Commit Graph

754 Commits

Author SHA1 Message Date
Maria Hutt
c6dfb10437 refactor(theme): remove root 2025-12-15 16:58:57 -08:00
Maria Hutt
ee81a8ac4b fix(theme): remove extra curly bracket 2025-12-15 16:56:42 -08:00
Maria Hutt
0349ff7ffc Update core/src/utils/theme.ts
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-12-15 16:54:13 -08:00
Maria Hutt
ade5c05328 Update core/src/utils/theme.ts
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-12-15 16:52:54 -08:00
Maria Hutt
e729dea955 feat(chip): add recipe and variables 2025-12-15 08:27:34 -08:00
Maria Hutt
e50c4f9d74 Merge remote-tracking branch 'origin/next' into chore-sync-ionic-modular-with-next 2025-12-01 10:33:39 -08:00
Maria Hutt
b6df59a02c Merge remote-tracking branch 'origin/main' into chore-sync-next-with-main 2025-11-26 13:51:27 -08:00
Maria Hutt
e9bd3f819d test(scripts): update to handle hash params (#30807)
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Playwright's `setContent` cannot handle query params which causes the
`scripts.js` to not run effectively.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Update `scripts.js` to accept hash params as well
- Update `scripts.js` to accept the dark class to set dark mode if dark
query or hash was not passed

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

How to test:
1. Verify that tests are passing

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-11-26 18:19:31 +00:00
Maria Hutt
f349aac6bb Merge branch 'next' of github.com:ionic-team/ionic-framework into chore-sync-next-with-main 2025-11-20 11:33:49 -08:00
Bernardo Cardoso
f9a936b875 fix(tokens): remove style dictionary scripts and reuse os tokens logic (#30786)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

This pull request updates the design token build system and its
dependencies, simplifying the process and removing custom scripts in
favor of using the latest features of the `outsystems-design-tokens`
package. The changes modernize how design tokens are generated and
maintained, reducing custom code and leveraging upstream improvements.

Key changes include:

**Build Process Simplification:**
- The custom design token generation scripts
(`core/scripts/tokens/index.mjs` and `core/scripts/tokens/utils.mjs`)
have been removed. Token generation is now handled directly via the
`outsystems-design-tokens` package using an `npx` command in the
`build.tokens` script. This reduces maintenance overhead and keeps the
build process aligned with upstream best practices.
[[1]](diffhunk://#diff-0b9870c62ff80af860467e2541bba0b9ba5e7280b12bea6eeb124b1d174efbcfL1-L188)
[[2]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL1-L320)
[[3]](diffhunk://#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26L83-R82)

**Dependency Updates:**
- Updated `outsystems-design-tokens` to version `1.3.3` and
`style-dictionary` to version `5.1.1` in both `package.json` and
`package-lock.json`. This ensures compatibility with the latest features
and bug fixes and removes the need to specify `style-dictionary`
directly as a dependency.
[[1]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L47-L52)
[[2]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L9592-R9598)
[[3]](diffhunk://#diff-4ff996db8bece1eded512c3b97a6bde33622f94bb387634ef32496d832d57744L11137-R11138)
[[4]](diffhunk://#diff-7f67769260741e2563407af949f7e54fbf0431d1c607933f6e8a8094e3219e26L69-L74)

**SCSS Utility Import:**
- The `@forward "../../foundations/ionic.utility";` statement was
removed from `core/src/css/ionic/utils.bundle.ionic.scss`, likely
because the utility SCSS is now generated and managed by the new token
build process.

Removed CSS tests for Ionic theme, as they relied heavily on testing the
effect of the utility-classes, that are no longer created on the ionic
scope.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-11-20 13:02:37 -05:00
Maria Hutt
608ce9a97c Merge remote-tracking branch 'origin/main' into chore-sync-next-with-main 2025-11-19 15:07:38 -08:00
Maria Hutt
92db36489c fix(checkbox, toggle, radio-group): improve screen reader announcement timing for validation errors (#30714)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, when an error text is shown, it may not announce itself to
voice assistants. This is because the way error text currently works is
by always existing in the DOM, but being hidden when there is no error.
When the error state changes, the error text is shown, but as far as the
voice assistant can tell it's always been there and nothing has changed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated aria attributes
- Added observer with an observer

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Checkbox
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/checkbox/test/validation/)
[Toggle
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/toggle/test/validation/)
[Radio Group
preview](https://ionic-framework-git-fw-6757-ionic1.vercel.app/src/components/radio-group/test/validation/)

⚠️ Flakiness ⚠️ 

The flakiness on checkbox and toggle is because when a native input is
present on the page, the browser will have the screen reader to be
really fast when it comes to checking information. This speed ends up
being too fast for `ion-checkbox` to be able to add the error text. This
leads to the error text not being announce consistently. There's no
issue when it comes to ion-input or ion-textarea because Ionic uses the
native inputs so their arias are read. There's also no issue
with ion-select because we don't have a native input. It's only an issue
with checkbox and the others is because it has a [native input that is
being
hidden](8e884bd2cb/core/src/components/checkbox/checkbox.tsx (L368-L369)).
So the browser sees that and speeds up the screen reader.

The flakiness on radio group is because when you tab out of the last
radio button, the ionBlur event is emitted by the child <ion-radio>.
This event bubbles up, but the timing is still too early for the group.
2025-11-13 18:11:32 +00:00
Maria Hutt
54a1c86d6a fix(checkbox, toggle): fire ionFocus and ionBlur (#30733)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`ionFocus` and `ionBlur` are not being emitted for checkbox and toggle. 

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Moved the `onFocus` and `onBlur` to `Host`
- Added tests for `onFocus`, `onBlur`, and `onChange`.
- Added a workaround on Playwright in order to trigger `ionBlur` since
Playwright browsers aren't acting like native browsers when it comes to
tabbing.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.7.7-dev.11761071592.1d1b804d`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane@shanessite.net>
2025-10-23 17:09:05 +00:00
Brandy Smith
a7699eabbe feat(themes): add md theme tokens and update ionic theme to include semantic tokens (#30734)
- Updates the theme tokens interface to add more numeric tokens & semantic tokens
- Moves the `config` values into a separate `config` option which uses the `IonicConfig` interface
  - Adds a config option for `formHighlight` to `IonicConfig`
- Defines default & dark tokens for the `md` theme
- Removes the numeric tokens from the `ionic` theme and adds semantic tokens
- Remove the numerous `--ion-font-family` overrides in favor of the tokens

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-10-21 15:56:18 -04:00
Brandy Smith
3fd1d5cab1 feat(themes): add ionic theme tokens (#30708)
- Updates the token interface to accept a numeric scale.
- Updates the base tokens to use the new interface.
- Adds tokens for the `ionic` theme based on the existing design tokens.
- Excludes certain keys (`enabled`, `rippleEffect`, `formHighlight`) from the generated CSS variables.
- Removes the `--background` and `--ion-background-color` from the global `ionic` theme overrides, allowing it to use the dark palette.
- Removes the different Ionic colors from the `ionic` theme, ensuring all of the themes use the same named (primary, secondary, etc.) colors.
- Updates the testing script to pull in the tokens based on the theme & palette passed to the URL.
- Adds a new npm script, `build.themes`, to generate the theme files.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-10-16 10:07:57 -04:00
Maria Hutt
03303d73f0 fix(select): improve screen reader announcement timing for validation errors (#30723)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, when an error text is shown, it may not announce itself to
voice assistants. This is because the way error text currently works is
by always existing in the DOM, but being hidden when there is no error.
When the error state changes, the error text is shown, but as far as the
voice assistant can tell it's always been there and nothing has changed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated aria attributes
- Added observer with an observer

We had to do this with a mutation observer and state because it's
important in some frameworks, like Angular, that state changes to cause
a re-render. This, combined with some minor aria changes, makes it so
that when a field is declared invalid, it immediately announces the
invalid state instead of waiting for the user to go back to the invalid
field.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


[Preview](https://ionic-framework-git-fw-6797-ionic1.vercel.app/src/components/select/test/validation/)
2025-10-15 17:50:07 +00:00
Maria Hutt
820fa28543 fix(header): prevent flickering during iOS page transitions (#30705)
Issue number: resolves #25326

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The header flickers upon page transition when on iOS mode and using a
condensed header:

**Entering Page Two (P1 → P2):**
When navigating to Page Two, which has a collapsing header (intended to
be hidden until scroll), the header briefly flashes into view. This
happens because the header is initially rendered with full `opacity: 1`
before the component's logic can apply `opacity: 0` to hide it, causing
a visible flicker.

**Navigating Back (P2 → P1):**
When navigating back, Page One's header briefly bleeds through the top
of Page Two. Although Page Two is on top (`z−index: 100`), its
collapsing header is set to `opacity: 0`. This transparency allows Page
One header (`z−index: 99`) to become visible underneath, as the
transparent area cannot block the content below it.

The header flickers upon page transition when on iOS mode and using a
fade header:

**Entering Page Two (P1 → P2):**
When navigating to Page Two, which has a fade header (should not have a
background on load), the header background briefly flashes into view.
This happens because the header is initially rendered with full
`opacity: 1` before the component's logic can apply `opacity: 0` to hide
it, causing a visible flicker.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added a transition-specific class that is applied to the condensed
ion-header element to override its default transparency.

This guarantees the header to act as an opaque block during the page
transition, eliminating visual flickering caused by early `opacity: 0`
or the header underneath bleeding through.

- Added a transition-specific class that is applied to the fade
ion-header element to override its default opaque background.

This guarantees the header to act as a transparent block during the page
transition, eliminating visual flickering caused by default `opacity:
1`.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.7.6-dev.11759524961.1cff6814`
2025-10-14 17:48:35 +00:00
Brandy Smith
41953b0b3b feat(themes): add base tokens and update colors to use new token system (#30692)
## What is the current behavior?
The colors are generated using the Sass functions and a `$colors` map
and the design tokens are undefined.

## What is the new behavior?
- Moves the helper & theme `spec` tests into the `test` directory with
the other ones
- Defines base tokens for the default, light & dark tokens
- Defines the interfaces for the different theme objects
- Adds new theme utility functions to mix colors together (used for
shade & tint) and convert hex to rgb
- Updates the functions that generate the design token variables to:
- Automatically generate the rgb variables without needing to set them
manually
- Create the color classes (`.ion-color-primary`,
`.ion-color-secondary`, etc.) which are used by the components to change
their color via the `color` property
- Adds 3 e2e tests to verify visually that the design tokens are
generating properly: Basic, Color & Typography
- Removes the old Sass mixins/functions & updates the ones we still need
to pull from the design tokens instead of the `$colors` map

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

This adds `foreground` as a required variant to the colors now.
Currently foreground is only used by clear buttons but it should be used
by all text-only components. This will break for any apps overriding
`--ion-color-primary` without `--ion-color-primary-foreground`. We will
have to look into improving the migration path on this later.

## Other information

- [Themes /
Basic](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/basic)
- [Themes /
Color](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/color)
- [Themes /
Typography](https://ionic-framework-git-fw-6748-ionic1.vercel.app/src/themes/test/typography)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2025-10-01 12:13:41 -04:00
Brandy Smith
93d75502a3 feat(themes): allow mode specific custom theme overrides with modular themes (#30657)
Issue number: internal

---------

## What is the current behavior?
A `customTheme` object can not change based on the mode.

## What is the new behavior?
Adds top level `ios` and `md` property checks to flatten with the
`customTheme` object based on the mode.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information
Requires additional changes in order to test.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-09-25 15:39:40 -04:00
Brandy Smith
1aa7c35da1 feat(themes): add support for modular themes and custom themes (#30651)
Issue number: internal

---------

## What is the new behavior?
- Moves `openURL` out of the `theme` utils because it makes more sense
in `helpers`
- Adds support for the default `default.tokens.ts` design tokens file
- Adds support for custom theme set globally and on a component 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Requires additional changes in order to test.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-09-25 15:39:40 -04:00
ShaneK
1d020ed0be merge: package-lock 2025-09-24 13:21:21 -07:00
Shane
a40d957ad9 fix(modal): allow sheet modals to skip focus trap (#30689)
Issue number: resolves #30684

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Recently, we [fixed some issues with aria-hidden in
modals](https://github.com/ionic-team/ionic-framework/pull/30563),
unfortunately at this time we neglected modals that opt out of focus
trapping. As a result, a lot of modals that disable focus trapping still
have it happening and it doesn't get cleaned up properly on dismiss.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We're now properly checking for and skipping focus traps on modals that
do not want them.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

I created regression tests for Angular in this to prevent this from
happening again. I initially tried to do this with core, but the issue
doesn't seem to reproduce with core.

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Current dev build:
```
 8.7.5-dev.11758652700.103435a3
```
2025-09-24 19:29:58 +00:00
ShaneK
aeef933fbe chore: merge 8.7.4 2025-09-17 11:59:34 -07:00
José Rio
49f96d7f1e fix(overlays,picker): remove invalid aria-hidden attribute (#30563)
Issue number: resolves #30040

---------

## What is the current behavior?
- The usage of `aria-hidden="true"` attributes both on overlay and
picker components was causing some console error/warnings messages.
- This was being caused due the fact of the activeElement (focused
element) was inside those elements with this attribute that's equal to
true in all cases.


![d13215a4-a610-4b1f-81d8-ce3ae05df790](https://github.com/user-attachments/assets/1b79c8bf-b23a-4165-8fb4-894be27bbad4)

## What is the new behavior?
- There is no need of making usage of this attribute due the facts:
- 1. Once overlay is closed the focus will be redirect to the element
that triggers the overlay, this way screen readers will be also
redirected to the same context of focused element.
- 2. After overlay is closed, it will be set as a `display: none;`
through the selector `:host(.overlay-hidden)`, which by itself will
disable overlay content for the screen readers.

- Removed overlay tests since they were basically checking about
`aria-hidden` attribute.
- Updated PickerColumn and PickerColumnOption structure in order to fit
the a11y needs.
- Added a focus management system to better drive users when making
usage of keyboard navigation inside picker.
- Skip A11Y test validation when reported violation is color contrast
related.

### ⚠️ NOTE:
- Reported devTools issue/warning when selecting picker is **from now
on** expected due to focus an input that's set with `tabIndex="-1"` and
`aria-hidden="true"` - Which turns into an A11Y violation when it gets
focused.
It happens that it gets focused dynamically in order to open the native
numeric keyboard **once user selects highlighted picker values zone**,
in order to allow users to insert numeric values through the keyboard.
If this `aria-hidden` and `tabindex` are removed/updated, the existing
functionality will be lost since ScreenReaders will start to ignore the
updated value through the PickerChange and will be focused onto the
focused input.
This mentioned input has an onChange event that's used to update the
`aria-valuetext` on each `picker-column` which is being capture by the
ScreenReader.
That said, this new devTools reported issue/warning is a false positive
since A11Y behaviour is being covered through a different perspective.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Testing:

-  [ActionSheet
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y)
-  [Alert
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y)
-  [DateTime
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic)
-  [DateTime Button
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic)
-  [Modal
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y)
-  [Popover
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic)
-  [Select
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic)
-  [Picker, PickerColumn and PickerColumnOption
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic)
-  [Toast
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y)

## Other Information

Dev build: `8.7.4-dev.11756388042.1a103a79`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-09-03 22:54:11 +00:00
Brandy Smith
a934e48315 Merge branch 'main' into chore/update-next-from-main 2025-08-04 18:56:38 -04:00
Brandy Smith
6203b88b9f chore(deps): update @stencil/core to v4.36.2 (#30587)
Issue number: resolves #30565

---------

## What is the current behavior?
Stencil is on v4.33.1

## What is the new behavior?
- Updates Stencil to v4.36.2
- Updates `children` references to `__children` in `reorder-group`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I searched through the repository for other components that may be
affected but did not find any.

Dev build: `8.7.1-dev.11753971948.1b297d94`
Reorder Example using dev build:
[StackBlitz](https://stackblitz.com/edit/5nrzhbja)
Router Example using dev build:
[StackBlitz](https://stackblitz.com/edit/rvpcflzx)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-31 15:35:43 +00:00
ShaneK
92b1f4c01f fix(lint): running core lint.fix 2025-07-09 14:10:30 -07:00
ShaneK
7981fe3f9a chore(merge): merging main into next 2025-07-09 14:05:38 -07:00
Brandy Smith
73f7b3f839 test(item-sliding): add test for side issue with CDN (#30469)
Adds test for https://github.com/ionic-team/ionic-framework/pull/29845

Must be merged after the fix in that PR is released. The test will fail
while using the older version of the CDN.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-08 20:18:23 +00:00
Brandy Smith
345bd53831 Merge branch 'main' into chore/update-next-from-main 2025-06-04 16:58:30 -04:00
Maria Hutt
2dea6071db fix(scroll-assist): allow focus on input's siblings (#30409)
Co-authored-by: Shane <shane@shanessite.net>
2025-05-27 09:08:16 -07:00
Brandy Smith
d52fca084c fix(config): allow LogLevel to work with isolatedModules and update all warns and errors to respect logLevel (#30350)
Issue number: internal

---------

## What is the current behavior?
- `LogLevel` throws error `Error: Cannot access ambient const enums when
'isolatedModules' is enabled`
- Several existing console warns and errors are not calling the function
that respects the `logLevel` config

## What is the new behavior?
- Remove `const` from the `enum` to work with `isolatedModules`
- Update `console.warn`s to `printIonWarning`
- Update `console.error`s to `printIonError`

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information

Dev build: `8.5.5-dev.11744729748.174bf7e0`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-04-16 16:23:16 +00:00
Brandy Smith
56be987881 Merge branch 'main' into merge-main-into-next 2025-04-11 15:33:29 -04:00
Brandy Smith
835ad52c29 fix(config): properly export LogLevel (#30335)
Issue number: resolves #30255

---------

## What is the current behavior?
`LogLevel` is not properly exported

## What is the new behavior?
Exports `LogLevel` in core

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Dev build: `8.5.4-dev.11743715474.1eadbd25`

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-04-04 18:45:53 +00:00
Tobi
7f9df7a894 fix(overlays): exclude backdrop-no-scroll class when toast is presented (#30123)
Issue number: resolves #30112 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

When toast is presented, the `backdrop-no-scroll` class is added to the
body when using Frameworks like Angular. It should not add this class as
toast does not be setting focus trap as mentioned in the
[comments](1cfa915e8f/core/src/utils/overlays.ts (L514-L520)).

## What is the new behavior?

- Class is only added when the overlay that is presented is not a toast
component.
- Test was added.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

N/A

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-04-01 23:05:12 +00:00
Maria Hutt
1cfa915e8f fix(segment-button): ensure consistent disabled state for segment-content error handling (#30288)
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Segment buttons do not consistently set themselves to a disabled state.
When disabling them and rapidly refreshing the page, their state may
vary—sometimes they appear disabled, and other times they do not.

This was due to this
[PR](https://github.com/ionic-team/ionic-framework/pull/30138). The
reason that this PR was created was due to the console errors being
shown too early when segment buttons and contents were dynamically
rendered.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- I reverted the changes added through the other PR since the
`setTimeout` was causing the inconsistency.
- By moving the console errors to `componentWillLoad`, it provides
`ion-segment-content` time to render before the console errors are
thrown.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.5.2-dev.11742514102.1b51674d`

How to test:
1. Run the server locally
2. Navigate to the [segment view
disabled](http://localhost:3333/src/components/segment-view/test/disabled)
page
3. Verify that the "Paid", "Free", and "Top" buttons disabled
4. Rapid fire some hard refreshes
5.  Verify that the "Paid", "Free", and "Top" buttons disabled
6. Navigate to this StackBlitz
[repro](https://stackblitz.com/edit/yhktpj19-wxmxpmw7?file=src%2Fmain.tsx)
7. Install the dev build: `npm i
@ionic/react@8.5.2-dev.11742514102.1b51674d
@ionic/react-router@8.5.2-dev.11742514102.1b51674d`
8. Open the console log
9. Click on the "Add last child" button
10. Verify that there are no console errors like `Segment Button: Unable
to find Segment Content with id="content3".`
2025-03-25 18:21:31 +00:00
Brandy Smith
5cd85049e0 refactor(): fix incorrect merges 2025-03-18 18:08:51 -04:00
Brandy Smith
b8b5984150 Merge branch 'main' into chore-merge-main-into-next 2025-03-18 18:05:14 -04:00
Brandy Smith
114514276e Merge branch 'main' into chore-update-feat-8.5-main 2025-03-13 18:45:33 -04:00
Christian Bromann
11554a5d35 fix(vue): update output target and properly emit events (#30227)
Issue number: resolves #30206 resolves #30178 resolves #30177 resolves
#30175 resolves #30170

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
There have been plenty of issues reported in regards to Vue components
failing to propagate events. It seems like when we updated the Vue
output target and started to use the provided runtime code from the
output target, we have changed the way how event names are computed.
Ionic has used a custom wrapper for handling events that would kebab
case event names. That is no longer needed and removing it fixes
observed issues.

Reproduction case working:
https://stackblitz.com/edit/vj18czas-wdhzxjom?file=package.json

## What is the new behavior?
We have received a fix for this in
https://github.com/stenciljs/output-targets/pull/617 which I hope will
resolve this issue by updating the dependency.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

Dev build: `8.4.4-dev.11741193800.14916f6f`
2025-03-11 20:39:31 +00:00
Brandy Smith
9fe44559ce Merge branch 'main' into chore-feat-8.5-main 2025-03-10 12:19:38 -04:00
fudom
322319397c fix(range): handle unsupported values for range min and max (#30070)
Issue number: resolves #29667

---------

## What is the current behavior?
Currently, if min/max are set to undefined on `IonRange` (which is an
accepted value), it breaks the DOM.

## What is the new behavior?
After these changes, if min/max are set to undefined or any unsupported
value (such as infinity or a NaN), it will fall back to the default
values for min and max (currently, 1 and 100 respectively).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: ShaneK <shane@shanessite.net>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-03-07 22:19:54 +00:00
Shane
2149ba2c8d fix(capacitor): use proper types for capacitor v7 support (#30228)
Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, Capacitor types are outdated in Ionic Framework and we're
accessing a type property that no longer exists in Capacitor 7.0.0+

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This PR updates the capacitor version and addresses removal of
`.Plugins` from `@capacitor/core`'s `CapacitorGlobal`, which we rely on
to dynamically access plugins that the user may or may not have
installed.

The fix for this was creating a custom type definition to support
accessing `Plugins`. While `Plugins` was removed from Capacitor if we
were accessing it directly from core, we're pulling it from the window
in the browser, where it's still exposed, so we just needed to make our
type reflect that.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Technically, this issue does not prevent Framework from working with
Capacitor 7 because it's only a typing issue, but it's still a minor
issue that should be addressed in our effort to support Capacitor 7.
This PR, along with #30195, should make it ready for that.
2025-03-06 01:14:45 +00:00
r-yanyo
b6b43ae292 fix(capacitor): replace deprecated platform check method (#30195)
Issue number: resolves internal

ref: https://github.com/ionic-team/capacitor/issues/7884

---------

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
`this.platform.is('capacitor')` returns `false` in Capacitor App.

## What is the new behavior?
`this.platform.is('capacitor')` returns as expected.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
It might also need to be fixed.


14b6538d98/core/src/utils/test/platform.utils.ts (L32)

---------

Co-authored-by: ShaneK <shane@shanessite.net>
2025-03-06 01:14:36 +00:00
ShaneK
ecaeb390cf Merge branch 'main' of github.com:ionic-team/ionic-framework into merge/main-into-8.5 2025-03-03 05:44:37 -08:00
Maria Hutt
5eab76c0f3 fix(focusVisibleElement): set focus on custom appRootSelector (#30218) 2025-02-27 10:47:26 -08:00
Pedro Lourenço
14b6538d98 fix(segment-button): protect connectedCallback for when segment-content has not yet been created (cherry-pick) (#30138)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When the `connectedCallback` method is called for a segment-button and
its corresponding segment-content has not been created in that instant,
a console error is thrown and the method returns.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `connectedCallback` will now wait, at most 1 second, for the
corresponding segment-content to be created.
- The new behaviour can be tested in segment-view/basic.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See

https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2025-02-10 18:09:25 +00:00
Sean Perkins
efd3e0fd2b feat(config): add logLevel option to suppress ionic warnings and errors (#30015)
resolves #29814

---------

- Developers can assign a value to `logLevel` in the Ionic config to control the log level that Ionic Framework will produce logs for.
  - `OFF` will completely disable all warnings and errors from Ionic
  - `WARN` will log warnings and errors
  - `ERROR` will log only errors
- Default behavior is that developers receive both Ionic warnings and errors
- Configuration only applies to usages of `printIonWarning` and `printIonError`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-01-20 16:15:02 -05:00
Brandy Carney
b0a2544c15 Merge branch 'main' into chore-update-from-main 2024-11-27 14:13:31 -05:00
Maria Hutt
845071c97a fix(menu): hide from screen readers while animating (#30036)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When the menu is presented on an Android device, TalkBack's focus rings
may appear in the wrong position due to the transition (specifically
`transform` styles). This occurs because the focus rings are initially
displayed at the starting position of the elements before the transition
begins.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- When an overlay is being animated (presenting or dismissing), the
overlay will hide from screen readers. This allows Talkback to display
the focus rings on the correct position.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.4.1-dev.11732305980.19d90e1c`

Related to https://github.com/ionic-team/ionic-framework/pull/29951
2024-11-27 16:27:57 +00:00