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: 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: 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: 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>
<!-- 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: 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
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. -->
Currently, if you focus on something and then refresh with a refresher,
the browser will try to scroll to what's focused after refreshing. This
can be an unexpected and disrupting user experience.
https://github.com/user-attachments/assets/3ef5999d-d104-422a-a6a9-4f478912f48a
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
With these changes, we blur the active element to prevent the browser
from trying to scroll back to something off screen after refreshing.
Also, I did try to create regression tests for this, but playwright
actually doesn't currently seem to make it possible as far as I can tell
- that's actually what I spent most of my time on this issue trying to
do. Looks like the only way to trigger the refresher with playwright
uses mouse click events, which inherently blurs the active element. You
need to use cursor events for this to work, because cursor events do not
cause a blur on the active element.
https://github.com/user-attachments/assets/bd1a3bfc-9b48-4b3f-b8dc-6959eefc9107
## 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.3-dev.11755285796.12743331
```
Issue number: resolves#30231
---------
<!-- 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, if you're using voiceover on Chrome or Firefox, you can
navigate the checkbox in such a way that it announces the checkbox
image, which provides no context to what you're actually selecting.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
With this change, you can no longer select the checkbox image.
## 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. -->
[Screen](https://ionic-framework-git-ionic-56-ionic1.vercel.app/src/components/checkbox/test/basic)
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
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. -->
- improve tokens usage;
## 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. -->
[shapes](https://ionic-framework-git-rou-12131-ionic1.vercel.app/src/components/badge/test/shape?ionic:theme=ionic)
Issue number: resolves#30592
---------
## What is the current behavior?
Reorder group is failing for Angular, React & Vue due to the change from
`children` to `__children`.
## What is the new behavior?
- Fallback to `children` if `__children` is undefined.
- Adds an e2e test for Angular (depends on
https://github.com/ionic-team/ionic-framework/pull/30594)
- Tasks have been created to migrate and add e2e tests for the other
frameworks
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.7.2-dev.11754087334.1815cf22`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30552
---------
<!-- 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. -->
Something caused a timing shift in v8.6.0 that messed up the timing
required for react router to set the active tab ID. Currently, when the
router goes to set the tab ID, it's possibly too early and the tab may
not exist yet, causing it to go unset.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This PR is a workaround that allows tabs to check when they're rendered
if a tab should be selected as a fallback for the router not setting
them. I don't think the tabs, in the long run, should be responsible for
this, but I think this is a good intermediate step until the upcoming
react router upgrade, when we can look into a better solution for react
router that may require less timing precision.
This PR also adds regression tests for React to make sure this doesn't
happen again without getting noticed.
## 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.2-dev.11754338216.1a548096
```
This fixes the flaky/failing tests here:
`should not have visual regressions with a custom styled calendar`
<img width="1658" height="916" alt="CleanShot 2025-08-04 at 13 46 12@2x"
src="https://github.com/user-attachments/assets/b5d54ee8-b315-4db0-b09b-65d9cd2fa7ca"
/>
`should switch the calendar header when moving to a month with a
different number of days`
<img width="2104" height="1752" alt="CleanShot 2025-08-04 at 13 45
33@2x"
src="https://github.com/user-attachments/assets/8a0cdb0b-6e9d-4b5c-a2df-f9174431492b"
/>
You can run them locally using:
- `npm run test.e2e.docker src/components/datetime/test/datetime.e2e.ts
-- --repeat-each=10`
- `npm run test.e2e.docker
src/components/datetime/test/custom/datetime.e2e.ts -- --repeat-each=10`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
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>
Issue number: resolves#22469
---------
- Adds new responsive display classes with the following values: `none`, `inline`, `inline-block`, `block`, `flex`, `inline-flex`, `grid`, `inline-grid`, `table`, `table-cell`, `table-row`
- Adds new responsive flex util classes for the following properties: `align-content`, `align-items`, `align-self`, `justify-content`, `flex-direction`, `flex-wrap`, `flex`, `flex-grow` , `flex-shrink`, `order`
- Adds e2e tests to verify the correct classes are in the CSS files
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#29833
---------
- Adds the `border` property for customizing the border of highlighted dates
- Adds the `border` to the e2e test for highlightedDates
- Updates screenshots
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30445
---------
Updates all packages to use the latest version of Ionicons v8
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#23148resolves#27614
---------
The `ion-reorder-group` only emits an `ionItemReorder` event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position.
- Adds an `ionReorderStart` event that is fired without any details on the start of the gesture.
- Adds an `ionReorderMove` event that is fired continuously during gesture move and includes the `from` and `to` detail.
- Adds an `ionReorderEnd` event that is fired at the end of the gesture and always includes the `from` and `to` detail, even if they are the same.
- Deprecates the `ionItemReorder` event, recommending to use the `ionReorderEnd` instead.
- [ ] Yes
- [x] No
While this does not introduce a breaking change, it does deprecate the `ionItemReorder` event in favor of the `ionReorderEnd` event. This event behaves a bit differently since it is always emitted on end. If the `from` and `to` are the same, it will still emit them, so it's possible to check if they are the same to determine if `ionReorderEnd` fired without moving item positions.
----
Co-authored-by: sfinktah <sfinktah@github.spamtrak.org>
Co-authored-by: Brandy Smith <6577830+brandyscarney@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?
<!-- Please describe the current behavior that you are modifying. -->
Currently, if you use infinite scroll and fully change out elements in
the DOM, you'll lose your scroll position. This can present as a race
condition in some frameworks, like React, but will present pretty
consistently in vanilla JavaScript. This happens because the browser is
removing the old elements from the DOM and adding the new ones, and
during that time the container holding the old elements will shrink and
the browser will adjust the top position to be the maximum of the new
container height.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
With this new property (`preserveRerenderScrollPosition`) set, we will
loop through siblings of the infinite scroll and set their min-heights
to be their current heights before triggering the `ionInfinite` event,
then we clean up after complete is called by restoring their previous
min-heights or setting them to auto if there were none. This prevents
the container from resizing and the browser from losing the scroll
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. -->
**Current dev build**:
```
8.6.6-dev.11753719591.13a5c65f
```
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?
Error text color was `ion-semantics-danger-800`
## What is the new behavior?
Error text color is now `ion-semantics-danger-900`, following design
guidelines.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: internal
---------
## What is the current behavior?
- The current toggle, using the ionic theme, is not following the design
for pressed state, as well as the default background color for unchecked
toggles
## What is the new behavior?
For the ionic theme:
- Changes unselected toggle background color to follow the new style:
`ion-primitives-neutral-500
- Changes the toggle background color for pressed states:
`ion-bg-primary-base-press` and `ion-bg-neutral-base-press`, for checked
and unchecked toggles, respectively
- updates the toggle snapshots accordingly
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#30543
---------
## What is the current behavior?
On desktop Safari and Android the segment view is not switching to the
right segment content when the height is dynamically set or read in as
0. This can be reproduced in the following StackBlitz on Android:
https://6dhropnr-aheyyprl.stackblitz.io/
## What is the new behavior?
- Sets `min-height` to `1px` on `ion-segment-content` so that it
continues to work with a dynamically set height
- Adds an e2e test for Safari to verify the correct content is displayed
when it contains a dynamically loaded image
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.6.2-dev.11752524287.1d61cd78`
[Preview](https://ionic-framework-git-fw-6586-ionic1.vercel.app/src/components/segment-view/test/dynamic-height)
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@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?
<!-- Please describe the current behavior that you are modifying. -->
Currently, if you have multiple card modals open in portrait view and
then transition to landscape, the background will not be transformed
properly and will not cover the entire screen as expected.
https://github.com/user-attachments/assets/bb2c7015-adb6-4c3b-8bc5-13360275fcf4
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now, we're correctly targeting the right element and will transform it
as expected. This allows a more consistent UX for these transitions.
https://github.com/user-attachments/assets/fff72387-d78b-4df4-a234-d89b54f694c4
## 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. -->
[Relevant (broken) screen (main
branch)](https://ionic-framework-git-main-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios)
[Relevant (fixed) screen (this
branch)](https://ionic-framework-git-fix-modal-landscape-background-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios)
Issue number: resolves#29763
---------
<!-- 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. -->
If the nested content of an ion-item is conditionally rendered and goes
from containing zero interactive elements to one or more, a render is
not triggered in Angular and the item does not behave correctly for one
or more nested inputs.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- A mutation observer is created in `connectedCallback()` to watch for
changes in item's child list. When the `childList` changes, two pieces
of state that track whether the item needs to be interactive and whether
there are multiple interactive elements are updated.
- Add `disconnectedCallback()` and logic to disconnect Mutation
Observer.
- Create new function `totalNestedInputs()` with logic from existing
`setMultipleInputs` function to be used for both `setMultipleInputs` and
new function `setIsInteractive`.
## 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. -->
I opted for the MutationObserver over a `slotchange` listener because
the `slotchange` fires synchronously on any slot within the shadowRoot,
and the MutationObserver fires once on the item element itself. I
attempted to add the minimum amount of logic to achieve this but there
may be a more elegant solution that combines what `multipleInputs` and
`isInteractive` are doing but requires more changes to existing code.
Issue number: resolves#30389
---------
<!-- 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 the element an ion-modal was presented from is removed,
the modal stays presented and can be broken depending on the framework.
This is unlike #30540, where children of open modals were being kept
open. In this case, specifically the DOM element is being removed for
whatever reason and the modal is staying open.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We're now identifying our parent component on load and watching it with
a mutation observer to determine if it gets removed from the DOM. If it
does, we trigger a dismiss. This, conveniently, works nicely with #30540
and will dismiss all children and grandchildren as well.
## 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. -->
The issue this resolves was already marked closed, but on closer
inspection I determined that was a mistake. I believed this issue was
related to another one I was dealing with and it is, but it wasn't quite
the same.
After this issue is merged, I believe we will have handled all avenues
of possibly ending up with broken modals because of parent elements or
modals being removed.
[Relevant Test
Page](https://ionic-framework-git-fix-remove-modal-when-parent-removed-ionic1.vercel.app/src/components/modal/test/inline)
**Current dev build:**
```
8.6.5-dev.11752329407.10f7fc80
```
Issue number: resolves#30459
---------
## What is the current behavior?
1. Typing `"12345"` in a 4-box input-otp with `type="text"` is
incorrectly triggering autofill detection on Android, causing `"45"` to
be distributed across the first two boxes instead of replacing the `"4"`
with the `"5"`.
**Current Behavior**: Type `"12345"` → `["4", "5", "", ""]` (incorrectly
distributed)
**Expected Behavior**: Type `"12345"` → `["1", "2", "3", "5"]`
(correctly replaces last character)
2. Typing an invalid character (like `"w"` when `type="number"`) in an
input box with a value is inserted, ignoring the input validation.
**Current Behavior**: Type `"2"` in the first box, focus it again, type
`"w"` → `"2w"` appears
**Expected Behavior**: Type `"2"` in the first box, focus it again, type
`"w"` → `"2"` remains (invalid character rejected)
## What is the new behavior?
- Fixes autofill detection on Android devices
- Fixes invalid character insertion in filled input boxes
- Improves cursor position handling when typing in a filled box
- Adds e2e tests for more coverage
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.6.5-dev.11752245814.1253279a`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30389
---------
<!-- 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 a child modal is present and a parent modal is somehow
dismissed, the child modal stays open. This can cause issues in some
frameworks like React and Angular, where this cuts the connection to the
child modal and it can no longer be dismissed programmatically.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This change enables modals to identify their children and close the
children when they're closed. This prevents orphaned modals that can
cause a poor UX. Note: This fix is only for inline modals, which is the
biggest cause of the above issue.
## 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. -->
[Relevant test
page](https://ionic-framework-git-fw-6597-ionic1.vercel.app/src/components/modal/test/inline)
**Current dev build**:
```
8.6.5-dev.11752242329.17d249a3
```
