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>
<!-- 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 existing grid component (`ion-grid`, `ion-row`, and `ion-col`) in
Ionic was developed several years ago and has not received significant
updates since then. As a result, it does not leverage modern CSS
features. For example, the gutter (spacing) between columns is
implemented using the border property, which is an outdated technique.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `--ion-grid-gap`: this new CSS variable, will indicate the gap size in
the grid. Defaults to `0px` - the current value.
- `ion-col`: has a new way to calculate the width of the column.
Additionally a new property `order` (and responsive variants) was added,
and will control the order of the column.
- `ion-row`: uses the newly introduced custom property `--ion-grid-gap`.
This property will indicate the gap size in the grid.
## Does this introduce a breaking change?
- [x] Yes
- [ ] 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.
-->
The properties `pull` and `push` from `ion-col`, have been removed. The
functionality achieved with them, is now achieved with the new property
`order` and the existing `size`. More information and migration examples
can be read in `BREAKING.md` file.
## 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: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Shane <shane@shanessite.net>
Issue number: resolves
[#30079](https://github.com/ionic-team/ionic-framework/issues/30079)
---------
<!-- 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. -->
Segments (IonSegment and IonSegmentView) do not work if placed on a
dir="rtl" context. If click on button, it won't slide content of the
next segment.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- calculate scroll value having into consideration the dir value;
## 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-6768-ionic1.vercel.app/src/components/segment-view/test/rtl)
---------
Co-authored-by: Shane <shane@shanessite.net>
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 design token build pipeline to support
Style Dictionary v5 and modernizes the scripts by migrating them to ES
modules. The changes ensure compatibility with the latest dependencies
and improve maintainability by refactoring the build scripts and
utilities.
**Dependency and Build Pipeline Updates:**
* Upgraded `outsystems-design-tokens` to version `^1.3.2` and
`style-dictionary` to version `^5.0.0` in `package.json` to support the
latest features and fixes.
* Updated the `build.tokens` npm script to use the new ES module entry
point (`index.mjs`) instead of the old CommonJS file (`index.js`).
**Migration to ES Modules:**
* Migrated the main design token build script from `index.js` to
`index.mjs`, refactoring imports/exports and adjusting to Style
Dictionary v5 API changes.
[[1]](diffhunk://#diff-80accbbc258884565c215c7eb6280722805ddf618d72bf6506c7dd1fb7faaa54L1-L201)
[[2]](diffhunk://#diff-0b9870c62ff80af860467e2541bba0b9ba5e7280b12bea6eeb124b1d174efbcfR1-R194)
* Renamed and refactored the utility functions file from `utils.js` to
`utils.mjs`, converting all utility functions to ES module exports for
compatibility.
[[1]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL4-R10)
[[2]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL22-R22)
[[3]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL47-R53)
[[4]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL65-R65)
[[5]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL76-R76)
[[6]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL85-R85)
[[7]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL95-R95)
[[8]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL118-R118)
[[9]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL144-R144)
[[10]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL155-R155)
[[11]](diffhunk://#diff-8b5c339d9dd13300954577213f84a443321a0d6477acd7553787fbcc00ce8cabL221-R221)
**Style Dictionary Configuration and Output Improvements:**
* Adjusted the Style Dictionary configuration and format registration to
match the new API, including changes to file header handling and output
structure for SCSS variables and utility classes.
* Changed variable prefix to --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.
-->
---------
Co-authored-by: ionitron <hi@ionicframework.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?
<!-- 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. -->
With these changes, both input and textarea have been updated so they'll
properly announce error text when it shows up. 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. -->
Current dev build:
```
8.7.4-dev.11756220757.185b8cbf
```
## Screens
[Textarea](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/textarea/test/validation)
[Input](https://ionic-framework-git-ionic-49-ionic1.vercel.app/src/components/input/test/validation)
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Issue number: resolves internal
---------
## What is the current behavior?
When opening a ion-select with a modal interface, the first option is
focused and, as such, has a border.
This happens because an ion-item is being rendered, which has a specific
styling for focused stated.
## What is the new behavior?
When inside a `ion-select-modal`, we don't want this specific `ion-item`
styling.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
