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?
The input-otp component does not currently match our UX designs for the
ionic theme.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Changed shape design tokens;
- Changed background to use correct design token.
## 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. -->
Issue number: resolves #
---------
This is based on
https://github.com/ionic-team/ionic-framework/pull/30755 PR to try to
clean up things.
<!-- 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?
- Select text color was not according design
- Fill solid type was missing the background color
## What is the new behavior?
- Added the expected color to the select text
- Added missing background color variable to the fill solid type
## 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>
Issue number: resolves #
---------
This PR introduces improvements to the visual focus styling of Ionic
items when inside a select modal.
## What is the current behavior?
- The CSS variables `--background-focused` and
`--background-focused-opacity` were missing from `item.ionic.scss`,
which resulted in the native default outline focus style being applied
to focused items.
- When no item is selected, the focus style is currently applied to the
first list item by default, which we intend to change.
## What is the new behavior?
- Added missing focus css variables
- Hide the default focus style when there is no item selected
## NOTE
- This change will require an additional interaction to observe the
focus behavior when navigating through keyboard, since tap-based
navigation does not rely on focus styling.
## 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. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
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?
- The Stencil version was previously reverted under #30707 because of
test failures of components form another repo.
## What is the new behavior?
- Update the version again to match what we have in main, since these
tests were fixed.
## 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.
-->
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. -->
- update scss files to use semantic tokens;
## 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. -->
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 makes a minor update to the
`generateColorUtilityClasses` function to improve how CSS custom
property values are interpolated in the generated class definitions.
* In `core/scripts/tokens/utils.mjs`, the function now wraps the SCSS
variable reference for the custom property value in `#{...}` to ensure
proper interpolation when generating the CSS class.
## 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. -->
Issue number: resolves #
---------
<!-- 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 current version in use of stencil (`4.36.2`), as well as, a more
recent version (`4.38.0`) are breaking the tests for several of the
components (e.g. accordion, datepicker, modal)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Reverting the version of stencil to the last known stable version
`4.33.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. -->
N/A
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- The variables when being generated from the tokens were causing the
fallback to `$ion-font-family` to be with invalid format:
```
$ion-font-family: var(
--token-font-family,
"-apple-system, system-ui, " Segoe UI ", Roboto, Helvetica, Arial,
sans-serif, " Apple Color Emoji ",
" Segoe UI Emoji", " Segoe UI Symbol "",
sans-serif
);
```
- Additionally the command to generate the css from the tokens, was not
prepared to run on windows machines.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the added quotes to the variable coming from the tokens:
```
$ion-font-family: var(
--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
);
```
- Changed the command `build.tokens` to run on windows
- Generated a new version of `ionic.vars.scss`
## 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
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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
```
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. -->
I was out of office so I was removed from the auto assign.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add Maria back to the auto assign.
## 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. -->
N/A
Issue number: resolves#30641
---------
<!-- 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, Vue modals do not emit `ionModal...` events. This happened
due to a change in the way the stencil output targets for Vue changed.
Christian [updated the
overlays](https://github.com/ionic-team/ionic-framework/pull/30227/files#diff-7e46aba01094c4917cd55e8eebd263fc4a297a2d62143f1ae30959ec4e023b6f)
to support the base events, but not the component-specific events.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
With this change, you'll be able to bind to the events as described in
the Ionic documentation.
## 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
Current dev build:
```
8.7.5-dev.11758311583.14f4e9d9
```
Issue number: internal
---------
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This pull request updates the color and background variables across many
Ionic component styles to use new design system tokens, improving
consistency and maintainability. It also temporarily skips several
visual regression tests for the `datetime` component due to a known
issue (FW-6769).
**Design System Token Migration:**
* Updated `--color` and `--background` variables in many components
(e.g., `card`, `card-title`, `list-header`, `item`, `segment`, `radio`,
`select`, `textarea`, `input`, `checkbox`, `chip`, `datetime`,
`item-options`, `searchbar`) to use the new `globals.$ion-text-default`
and `globals.$ion-bg-surface-default` tokens instead of older
primitives. This change ensures consistent theming and easier future
maintenance.
[[1]](diffhunk://#diff-efdc0d0b924ff22b22228f52baebe09c69cce416ab33ba4a572c678ba3aa38f8L16-R16)
[[2]](diffhunk://#diff-c213fde8dd24fa2839aa2744fc6d06635c2a8e5f50f93996afa63592299eae84L8-R8)
[[3]](diffhunk://#diff-ff9d7e4249d9ff015206ca8f6ce3553d6217ae196bccdb0e4fbd26b93b45489dL8-R13)
[[4]](diffhunk://#diff-796ffc72b6171910c25d5aad085bc245095c38f104d55e253e06282702205066L33-R33)
[[5]](diffhunk://#diff-796ffc72b6171910c25d5aad085bc245095c38f104d55e253e06282702205066L63-R63)
[[6]](diffhunk://#diff-3c751a473bd2fa61cfd77529c7b9e496f34cf198a4aed0bea0b57d1a1f7fe40aL120-R126)
[[7]](diffhunk://#diff-5df43981fd8a3a93e815ade41875432d0620892c30ae86858821a1270087fef6L12-R12)
[[8]](diffhunk://#diff-5df43981fd8a3a93e815ade41875432d0620892c30ae86858821a1270087fef6L143-R143)
[[9]](diffhunk://#diff-5df43981fd8a3a93e815ade41875432d0620892c30ae86858821a1270087fef6L214-R214)
[[10]](diffhunk://#diff-cbf91c9b97e425d969df4730e12b3424dd54de7664b9e629d455d2e63539c84eL4-R4)
[[11]](diffhunk://#diff-4d89e41650632cecdd15dbe6b2ef5ad30d100788ecd786dd97a990aaf1ab08d9L9-R9)
[[12]](diffhunk://#diff-690dbcc4c16a68fc142652cfda82fe7c2008b27a7fcb63dac7e2926598edced2L14-R14)
[[13]](diffhunk://#diff-00b462d69386f16806ec2f51ec487d3c47faadfbe68f3b718d336642c80379beL8-R13)
[[14]](diffhunk://#diff-bb3e65e73d30ca817f259cc0f805118bfbdee6ce562dd7171afddbca03b7265aL6-R6)
[[15]](diffhunk://#diff-c55248a8c9a55b4714cca5b2daa538f3bff0d1260b9249af1b20f7e845a72741L20-R20)
[[16]](diffhunk://#diff-c55248a8c9a55b4714cca5b2daa538f3bff0d1260b9249af1b20f7e845a72741L58-R58)
[[17]](diffhunk://#diff-c55248a8c9a55b4714cca5b2daa538f3bff0d1260b9249af1b20f7e845a72741L70-R70)
[[18]](diffhunk://#diff-36e6af13208ea67992ffd6ac4cb84d0dceea7fb8ca0bcfaccb578d9ac296c9aaL17-R17)
[[19]](diffhunk://#diff-8409cb5f296c6ba6c9e0747c7eb6d6f837935bc158bb42406631669d6fcc12b3L8-R8)
[[20]](diffhunk://#diff-030647f0cfb9ca6f042e9d7114611c7076a7c01af73076d1db05cc881b40ddf7L9-R9)
[[21]](diffhunk://#diff-030647f0cfb9ca6f042e9d7114611c7076a7c01af73076d1db05cc881b40ddf7L165-R165)
[[22]](diffhunk://#diff-45914a3d091d2c33732c1bdfbd74ce4375d12c6b23811c211a038d829e110886L10-R16)
**Test Suite Maintenance:**
* Temporarily skipped several E2E visual regression tests for datetime
and item components, referencing TODO FW-6769, to prevent test failures
while an upstream issue is addressed.
[[1]](diffhunk://#diff-28d032b5dd4c52cbf575dd85894b936c883d43093a03b1e5fca940ee3a626cb3L31-R32)
[[2]](diffhunk://#diff-6bcce71748a9d3fff9d03f4829f9ee2f058ff2ff419e5a0168f6b1200e29ba0fL33-R34)
[[3]](diffhunk://#diff-6bcce71748a9d3fff9d03f4829f9ee2f058ff2ff419e5a0168f6b1200e29ba0fL87-R89)
[[4]](diffhunk://#diff-5c6fab9ab164e203679ae4adfafbc0c4c84c569e8fc37f788f5688707cdd283bL16-R17)
[[5]](diffhunk://#diff-eac254ce4208c500e31c420e6919b2141fb67c875b062b6d8cbbe3b262216cedL32-R33)
There're some snapshots updates that seem to have no visible
differences, so I would say its ok to accept the new ones.
## 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>
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| [actions/setup-node](https://redirect.github.com/actions/setup-node) |
action | major | `v4` -> `v5` |
---
### Release Notes
<details>
<summary>actions/setup-node (actions/setup-node)</summary>
###
[`v5`](https://redirect.github.com/actions/setup-node/compare/v4...v5)
[Compare
Source](https://redirect.github.com/actions/setup-node/compare/v4...v5)
</details>
---
### Configuration
📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.
♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/ionic-team/ionic-framework).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS45MS4xIiwidXBkYXRlZEluVmVyIjoiNDEuOTEuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| [actions/labeler](https://redirect.github.com/actions/labeler) |
action | major | `v5` -> `v6` |
---
### Release Notes
<details>
<summary>actions/labeler (actions/labeler)</summary>
### [`v6`](https://redirect.github.com/actions/labeler/compare/v5...v6)
[Compare
Source](https://redirect.github.com/actions/labeler/compare/v5...v6)
</details>
---
### Configuration
📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.
♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/ionic-team/ionic-framework).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS45MS4xIiwidXBkYXRlZEluVmVyIjoiNDEuOTEuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
