chore: revert bug fix attempt for month/year interface

wip: workaround for month/year picker changing value
test: screenshot tests for range selection
2026-03-13 10:22:08 +08:00 · 2024-01-22 14:14:51 -05:00 · 2024-01-19 21:38:19 -05:00 · 2024-01-19 21:28:32 -05:00 · 2024-01-19 21:07:09 -05:00 · 2024-01-19 20:48:58 -05:00
603 changed files with 6867 additions and 6283 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -53,8 +53,8 @@
 /core/src/components/nav/ @sean-perkins
 /core/src/components/nav-link/ @sean-perkins

-/core/src/components/picker-internal/ @liamdebeasi
-/core/src/components/picker-column-internal/ @liamdebeasi
+/core/src/components/picker/ @liamdebeasi
+/core/src/components/picker-column/ @liamdebeasi

 /core/src/components/radio/ @amandaejohnston
 /core/src/components/radio-group/ @amandaejohnston
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -7,8 +7,6 @@ inputs:
    description: 'Playwright total number of test shards (ex: 4)'
  update:
    description: 'Whether or not to update the reference snapshots'
-  component:
-    description: 'The component to update the reference snapshots'

 runs:
  using: 'composite'
@@ -25,29 +23,9 @@ runs:
      run: npm install && npx playwright install && npx playwright install-deps
      shell: bash
      working-directory: ./core
-    - id: clean-component-name
-      name: Clean Component Name
-      # Remove `ion-` prefix from the `component` variable if it exists.
-      run: |
-        echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT
-      shell: bash
-    - id: set-test-file
-      name: Set Test File
-      # Screenshots can be updated for all components or specified component(s).
-      # If the `component` variable is set, then the test has the option to
-      # - run all the file paths that are in a component folder.
-      # -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder.
-      # -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders.
-      run: |
-        if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then
-          echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT
-        else
-          echo "testFile=$(echo '')" >> $GITHUB_OUTPUT
-        fi
-      shell: bash
    - name: Test
      if: inputs.update != 'true'
-      run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
      shell: bash
      working-directory: ./core
    - name: Test and Update
@@ -69,7 +47,7 @@ runs:
      # which is why we not using the upload-archive
      # composite step here.
      run: |
-        npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
        git add src/\*.png --force
        mkdir updated-screenshots
        cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -1,18 +0,0 @@
-name: Assign issues to triage
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  auto-assign:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
-        with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
-          numOfAssignee: 1
-          allowSelfAssign: false
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -37,3 +37,45 @@ jobs:
      version: ${{ needs.create-nightly-hash.outputs.nightly-hash }}
    secrets:
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  finalize-release:
+    needs: [create-nightly-hash, release-ionic]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        token: ${{ secrets.IONITRON_TOKEN }}
+        fetch-depth: 0
+    - name: Configure Identity
+      # Commits from github-actions do not
+      # trigger other GitHub Actions. As a result,
+      # we publish releases from Ionitron instead
+      # so actions run when merging the release branch
+      # back into main.
+      run: |
+        git config user.name ionitron
+        git config user.email hi@ionicframework.com
+      shell: bash
+    - name: Checkout Nightly Branch
+      # There are branch protection rules for our version
+      # branches (i.e. "6.2.x"), so we cannot name the branch
+      # the nightly hash as it would fall under the protection
+      # rule. As a result, we prefix "tmp-" to the branch.
+      run: |
+        git checkout -b tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
+        git push origin tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
+      shell: bash
+    - name: Create GitHub Release
+      run: lerna version ${{ needs.create-nightly-hash.outputs.nightly-hash }} --yes --force-publish='*' --conventional-commits --conventional-prerelease --create-release github
+      env:
+        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      shell: bash
+    # We need to push the commit changes in order for the tags
+    # to get updated, but we don't need to keep the changelog
+    # changes around.
+    - name: Delete Nightly Branch
+      run: |
+        git checkout main
+        git branch -D tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
+        git push origin --delete tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
+      shell: bash
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -69,45 +69,16 @@ jobs:
      env:
        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      shell: bash
-
-  update-package-lock:
-    # This needs to run after finalize-release
-    # because we also push to the repo in that
-    # job. If these jobs ran in parallel then it is
-    # possible for them to push at the same time.
-    needs: [finalize-release]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        # Pull the latest version of the reference
-        # branch instead of the revision that triggered
-        # the workflow otherwise we won't get the commit
-        # created in the previous job and this next job
-        # will fail.
-        with:
-          ref: ${{ github.ref }}
-      - name: Configure Identity
-        # Commits from github-actions do not
-        # trigger other GitHub Actions. As a result,
-        # we push from Ionitron instead so actions
-        # run when merging the release branch
-        # back into main.
-        run: |
-          git config user.name ionitron
-          git config user.email hi@ionicframework.com
-        shell: bash
-      # Lerna does not automatically bump versions
-      # of Ionic dependencies that have changed,
-      # so we do that here.
-      - name: Bump Package Lock
-        run: |
-          lerna exec "npm install --package-lock-only"
-          git add .
-          git commit -m "chore(): update package lock files"
-          git push
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        shell: bash
+    # Lerna does not automatically bump versions
+    # of Ionic dependencies that have changed,
+    # so we do that here.
+    - name: Bump Package Lock
+      run: |
+        lerna exec "npm install --package-lock-only"
+        git add .
+        git commit -m "chore(): update package lock files"
+        git push
+      shell: bash

  purge-cdn-cache:
    needs: [release-ionic]
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -2,11 +2,6 @@ name: 'Update Reference Screenshots'

 on:
  workflow_dispatch:
-    inputs:
-      component:
-        description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)'
-        required: false
-        default: ''

 jobs:
  build-core:
@@ -39,7 +34,6 @@ jobs:
          shard: ${{ matrix.shard }}
          totalShards: ${{ matrix.totalShards }}
          update: true
-          component: ${{ inputs.component }}

  update-reference-screenshots:
    runs-on: ubuntu-latest
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -4,338 +4,70 @@ This is a comprehensive list of the breaking changes introduced in the major ver

 ## Versions

- [Version 7.x](#version-7x)
+- [Version 8.x](#version-8x)
+- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
 - [Version 6.x](./BREAKING_ARCHIVE/v6.md)
 - [Version 5.x](./BREAKING_ARCHIVE/v5.md)
 - [Version 4.x](./BREAKING_ARCHIVE/v4.md)
 - [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)

-## Version 7.x
+## Version 8.x

- [Browser and Platform Support](#version-7x-browser-platform-support)
- [Components](#version-7x-components)
-  - [Accordion Group](#version-7x-accordion-group)
-  - [Action Sheet](#version-7x-action-sheet)
-  - [Back Button](#version-7x-back-button)
-  - [Button](#version-7x-button)
-  - [Card Header](#version-7x-card-header)
-  - [Checkbox](#version-7x-checkbox)
-  - [Datetime](#version-7x-datetime)
-  - [Input](#version-7x-input)
-  - [Item](#version-7x-item)
-  - [Modal](#version-7x-modal)
-  - [Overlays](#version-7x-overlays)
-  - [Picker](#version-7x-picker)
-  - [Radio Group](#version-7x-radio-group)
-  - [Range](#version-7x-range)
-  - [Searchbar](#version-7x-searchbar)
-  - [Segment](#version-7x-segment)
-  - [Select](#version-7x-select)
-  - [Slides](#version-7x-slides)
-  - [Textarea](#version-7x-textarea)
-  - [Toggle](#version-7x-toggle)
-  - [Virtual Scroll](#version-7x-virtual-scroll)
- [Config](#version-7x-config)
- [Types](#version-7x-types)
-  - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
- [JavaScript Frameworks](#version-7x-javascript-frameworks)
-  - [Angular](#version-7x-angular)
-  - [React](#version-7x-react)
-  - [Vue](#version-7x-vue)
- [CSS Utilities](#version-7x-css-utilities)
-  - [hidden attribute](#version-7x-hidden-attribute)
+- [Browser and Platform Support](#version-8x-browser-platform-support)
+- [Components](#version-8x-components)
+  - [Button](#version-8x-button)
+  - [Content](#version-8x-content)
+  - [Datetime](#version-8x-datetime)
+  - [Picker](#version-8x-picker)

-<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
+<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>

-This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
+This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.

 **Minimum Browser Versions**
 | Desktop Browser | Supported Versions |
 | --------------- | ----------------- |
-| Chrome          | 79+               |
-| Safari          | 14+               |
-| Firefox         | 70+               |
-| Edge            | 79+               |
+| Chrome          | 89+               |
+| Safari          | 15+               |
+| Firefox         | 75+               |
+| Edge            | 89+               |

 **Minimum JavaScript Framework Versions**
-
 | Framework | Supported Version     |
 | --------- | --------------------- |
-| Angular   | 14+                   |
+| Angular   | 16+                   |
 | React     | 17+                   |
 | Vue       | 3.0.6+                |

 **Minimum Mobile Platform Versions**
-
 | Platform | Supported Version      |
 | -------- | ---------------------- |
-| iOS      | 14+                    |
-| Android  | 5.1+ with Chromium 79+ |
+| iOS      | 15+                    |
+| Android  | 5.1+ with Chromium 89+ |

-<h2 id="version-7x-components">Components</h2>
+<h2 id="version-8x-components">Components</h2>

-<h4 id="version-7x-accordion-group">Accordion Group</h4>
+<h4 id="version-8x-button">Button</h4>

- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
+- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).

- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+<h4 id="version-8x-content">Content</h4>

-<h4 id="version-7x-action-sheet">Action Sheet</h4>
+- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.

- Action Sheet is updated to align with the design specification.
+<h4 id="version-8x-datetime">Datetime</h4>

-**Design tokens**
+- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
+   - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
+      ```diff
+      ion-datetime::part(month-year-button) {
+      -  --background: red;

-| Token      | Previous Value | New Value |
-| ---------- | -------------- | --------- |
-| `--height` | `100%`         | `auto`    |
+      +  background: red;
+      }
+      ```
+<h4 id="version-8x-picker">Picker</h4>

-<h4 id="version-7x-button">Button</h4>
-
- Button is updated to align with the design specification for iOS.
-
-**Design tokens**
-
-| Token                              | Previous Value | New Value |
-| ---------------------------------- | -------------- | --------- |
-| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
-| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
-| `$button-ios-height`               | `2.8em`        | `3.1em`   |
-| `$button-ios-border-radius`        | `10px`         | `14px`    |
-| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
-| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
-
-<h4 id="version-7x-back-button">Back Button</h4>
-
- Back Button is updated to align with the design specification for iOS.
-
-**Design tokens**
-
-| Token               | Previous Value | New Value |
-| ------------------- | -------------- | --------- |
-| `--icon-margin-end` | `-5px`         | `1px`     |
-| `--icon-font-size`  | `1.85em`       | `1.6em`   |
-
-<h4 id="version-7x-card-header">Card Header</h4>
-
- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
-
-<h4 id="version-7x-checkbox">Checkbox</h4>
-
- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
-
- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
-
-<h4 id="version-7x-datetime">Datetime</h4>
-
- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
-
- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
-
- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
-
- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
-
- The haptics when swiping the wheel picker are now enabled only on iOS.
-
-<h4 id="version-7x-input">Input</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
-
-  - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-<h4 id="version-7x-item">Item</h4>
-
-**Design tokens**
-
-iOS:
-
-| Token                 | Previous Value | New Value |
-| --------------------- | -------------- | --------- |
-| `$item-ios-font-size` | `17px`         | `16px`    |
-| `--inner-padding-end` | `10px`         | `16px`    |
-| `--padding-start`     | `20px`         | `16px`    |
-
-<h4 id="version-7x-modal">Modal</h4>
-
- The `swipeToClose` property has been removed in favor of `canDismiss`.
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
-
-<h4 id="version-7x-overlays">Overlays</h4>
-
-Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
-
-<h4 id="version-7x-picker">Picker</h4>
-
- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
-
-<h4 id="version-7x-radio-group">Radio Group</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
-
-<h4 id="version-7x-range">Range</h4>
-
- Range is updated to align with the design specification for supported modes.
-
-  **Design tokens**
-
-  iOS:
-
-  | Token                             | Previous Value                                                                            | New Value                                                             |
-  | --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-  | `--bar-border-radius`             | `0px`                                                                                     | `$range-ios-bar-border-radius` (`2px` default)                        |
-  | `--knob-size`                     | `28px`                                                                                    | `$range-ios-knob-width` (`26px` default)                              |
-  | `$range-ios-bar-height`           | `2px`                                                                                     | `4px`                                                                 |
-  | `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`                                            | `var(--ion-color-step-900, #e6e6e6)`                                  |
-  | `$range-ios-knob-box-shadow`      | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
-  | `$range-ios-knob-width`           | `28px`                                                                                    | `26px`                                                                |
-
- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
-  - If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
-
- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
-
-<h4 id="version-7x-searchbar">Searchbar</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
-
-  - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-
-<h4 id="version-7x-segment">Segment</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
-
- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
-  - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
-
-<h4 id="version-7x-select">Select</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
-
- The `icon` CSS Shadow Part now targets an `ion-icon` component.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.33`         | `0.6`     |
-
-<h4 id="version-7x-slides">Slides</h4>
-
-`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
-
-Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
-
- [Angular](https://ionicframework.com/docs/angular/slides)
- [React](https://ionicframework.com/docs/react/slides)
- [Vue](https://ionicframework.com/docs/vue/slides)
-
-<h4 id="version-7x-textarea">Textarea</h4>
-
- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
-
-  - If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
-
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
-
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
-
- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
-
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
-
-**Design tokens**
-
-| Token                   | Previous Value | New Value |
-| ----------------------- | -------------- | --------- |
-| `--placeholder-opacity` | `0.5`          | `0.6`     |
-
-
-<h4 id="version-7x-toggle">Toggle</h4>
-
- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
-
- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
-
-<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
-
-`ion-virtual-scroll` has been removed from Ionic.
-
-Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
-
- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
- [React](https://ionicframework.com/docs/react/virtual-scroll)
- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
-
-Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
-
-<h2 id="version-7x-config">Config</h2>
-
- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
-
-<h2 id="version-7x-types">Types</h2>
-
-<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
-
-`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
-
-<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
-
-<h4 id="version-7x-angular">Angular</h4>
-
- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
-
- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
-
- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
-
-<h4 id="version-7x-react">React</h4>
-
-`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
-
-<h4 id="version-7x-vue">Vue</h4>
-
-`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
-
-<h2 id="version-7x-css-utilities">CSS Utilities</h2>
-
-<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
-
-The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
-
-Developers can add the following CSS to their global stylesheet if they need the old behavior:
-
-```css
-[hidden] {
-  display: none !important;
-}
-```
+- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
+  - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
+  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. 
--- a/BREAKING_ARCHIVE/v7.md
+++ b/BREAKING_ARCHIVE/v7.md
@@ -0,0 +1,331 @@
+# Breaking Changes
+
+## Version 7.x
+
+- [Browser and Platform Support](#version-7x-browser-platform-support)
+- [Components](#version-7x-components)
+  - [Accordion Group](#version-7x-accordion-group)
+  - [Action Sheet](#version-7x-action-sheet)
+  - [Back Button](#version-7x-back-button)
+  - [Button](#version-7x-button)
+  - [Card Header](#version-7x-card-header)
+  - [Checkbox](#version-7x-checkbox)
+  - [Datetime](#version-7x-datetime)
+  - [Input](#version-7x-input)
+  - [Item](#version-7x-item)
+  - [Modal](#version-7x-modal)
+  - [Overlays](#version-7x-overlays)
+  - [Picker](#version-7x-picker)
+  - [Radio Group](#version-7x-radio-group)
+  - [Range](#version-7x-range)
+  - [Searchbar](#version-7x-searchbar)
+  - [Segment](#version-7x-segment)
+  - [Select](#version-7x-select)
+  - [Slides](#version-7x-slides)
+  - [Textarea](#version-7x-textarea)
+  - [Toggle](#version-7x-toggle)
+  - [Virtual Scroll](#version-7x-virtual-scroll)
+- [Config](#version-7x-config)
+- [Types](#version-7x-types)
+  - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
+- [JavaScript Frameworks](#version-7x-javascript-frameworks)
+  - [Angular](#version-7x-angular)
+  - [React](#version-7x-react)
+  - [Vue](#version-7x-vue)
+- [CSS Utilities](#version-7x-css-utilities)
+  - [hidden attribute](#version-7x-hidden-attribute)
+
+<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
+
+This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
+
+**Minimum Browser Versions**
+| Desktop Browser | Supported Versions |
+| --------------- | ----------------- |
+| Chrome          | 79+               |
+| Safari          | 14+               |
+| Firefox         | 70+               |
+| Edge            | 79+               |
+
+**Minimum JavaScript Framework Versions**
+
+| Framework | Supported Version     |
+| --------- | --------------------- |
+| Angular   | 14+                   |
+| React     | 17+                   |
+| Vue       | 3.0.6+                |
+
+**Minimum Mobile Platform Versions**
+
+| Platform | Supported Version      |
+| -------- | ---------------------- |
+| iOS      | 14+                    |
+| Android  | 5.1+ with Chromium 79+ |
+
+<h2 id="version-7x-components">Components</h2>
+
+<h4 id="version-7x-accordion-group">Accordion Group</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
+
+- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+
+<h4 id="version-7x-action-sheet">Action Sheet</h4>
+
+- Action Sheet is updated to align with the design specification.
+
+**Design tokens**
+
+| Token      | Previous Value | New Value |
+| ---------- | -------------- | --------- |
+| `--height` | `100%`         | `auto`    |
+
+<h4 id="version-7x-button">Button</h4>
+
+- Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token                              | Previous Value | New Value |
+| ---------------------------------- | -------------- | --------- |
+| `$button-ios-letter-spacing`       | `-0.03em`      | `0`       |
+| `$button-ios-clear-letter-spacing` | `0`            | Removed   |
+| `$button-ios-height`               | `2.8em`        | `3.1em`   |
+| `$button-ios-border-radius`        | `10px`         | `14px`    |
+| `$button-ios-large-height`         | `2.8em`        | `3.1em`   |
+| `$button-ios-large-border-radius`  | `12px`         | `16px`    |
+
+<h4 id="version-7x-back-button">Back Button</h4>
+
+- Back Button is updated to align with the design specification for iOS.
+
+**Design tokens**
+
+| Token               | Previous Value | New Value |
+| ------------------- | -------------- | --------- |
+| `--icon-margin-end` | `-5px`         | `1px`     |
+| `--icon-font-size`  | `1.85em`       | `1.6em`   |
+
+<h4 id="version-7x-card-header">Card Header</h4>
+
+- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
+
+<h4 id="version-7x-checkbox">Checkbox</h4>
+
+- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
+
+- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
+
+<h4 id="version-7x-datetime">Datetime</h4>
+
+- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
+
+- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
+
+- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
+
+- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
+
+- The haptics when swiping the wheel picker are now enabled only on iOS.
+
+<h4 id="version-7x-input">Input</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
+
+  - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+<h4 id="version-7x-item">Item</h4>
+
+**Design tokens**
+
+iOS:
+
+| Token                 | Previous Value | New Value |
+| --------------------- | -------------- | --------- |
+| `$item-ios-font-size` | `17px`         | `16px`    |
+| `--inner-padding-end` | `10px`         | `16px`    |
+| `--padding-start`     | `20px`         | `16px`    |
+
+<h4 id="version-7x-modal">Modal</h4>
+
+- The `swipeToClose` property has been removed in favor of `canDismiss`.
+- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
+
+<h4 id="version-7x-overlays">Overlays</h4>
+
+Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
+
+<h4 id="version-7x-picker">Picker</h4>
+
+- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
+
+<h4 id="version-7x-radio-group">Radio Group</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
+
+<h4 id="version-7x-range">Range</h4>
+
+- Range is updated to align with the design specification for supported modes.
+
+  **Design tokens**
+
+  iOS:
+
+  | Token                             | Previous Value                                                                            | New Value                                                             |
+  | --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+  | `--bar-border-radius`             | `0px`                                                                                     | `$range-ios-bar-border-radius` (`2px` default)                        |
+  | `--knob-size`                     | `28px`                                                                                    | `$range-ios-knob-width` (`26px` default)                              |
+  | `$range-ios-bar-height`           | `2px`                                                                                     | `4px`                                                                 |
+  | `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)`                                            | `var(--ion-color-step-900, #e6e6e6)`                                  |
+  | `$range-ios-knob-box-shadow`      | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
+  | `$range-ios-knob-width`           | `28px`                                                                                    | `26px`                                                                |
+
+- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
+  - If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
+
+- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
+
+<h4 id="version-7x-searchbar">Searchbar</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
+
+  - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+
+<h4 id="version-7x-segment">Segment</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
+
+- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
+  - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
+
+<h4 id="version-7x-select">Select</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
+
+- The `icon` CSS Shadow Part now targets an `ion-icon` component.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.33`         | `0.6`     |
+
+<h4 id="version-7x-slides">Slides</h4>
+
+`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
+
+Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
+
+- [Angular](https://ionicframework.com/docs/angular/slides)
+- [React](https://ionicframework.com/docs/react/slides)
+- [Vue](https://ionicframework.com/docs/vue/slides)
+
+<h4 id="version-7x-textarea">Textarea</h4>
+
+- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
+
+  - If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
+
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
+
+- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
+
+**Design tokens**
+
+| Token                   | Previous Value | New Value |
+| ----------------------- | -------------- | --------- |
+| `--placeholder-opacity` | `0.5`          | `0.6`     |
+
+
+<h4 id="version-7x-toggle">Toggle</h4>
+
+- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
+
+- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
+
+<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
+
+`ion-virtual-scroll` has been removed from Ionic.
+
+Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
+
+- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
+- [React](https://ionicframework.com/docs/react/virtual-scroll)
+- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
+
+Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
+
+<h2 id="version-7x-config">Config</h2>
+
+- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
+
+<h2 id="version-7x-types">Types</h2>
+
+<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
+
+`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
+
+<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
+
+<h4 id="version-7x-angular">Angular</h4>
+
+- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
+
+- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
+
+- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
+
+<h4 id="version-7x-react">React</h4>
+
+`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
+
+<h4 id="version-7x-vue">Vue</h4>
+
+`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
+
+<h2 id="version-7x-css-utilities">CSS Utilities</h2>
+
+<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
+
+The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
+
+Developers can add the following CSS to their global stylesheet if they need the old behavior:
+
+```css
+[hidden] {
+  display: none !important;
+}
+```
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,74 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
-
-
-### Bug Fixes
-
-* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
-* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
-* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
-* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
-* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
-* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
-* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
-* **vue:** tabs and parameterized routes work with latest vue ([#28846](https://github.com/ionic-team/ionic-framework/issues/28846)) ([5bc4399](https://github.com/ionic-team/ionic-framework/commit/5bc439961fda2c595666e67688fdd1b8ff4dd0bf)), closes [#28774](https://github.com/ionic-team/ionic-framework/issues/28774)
-
-
-
-
-
-## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
-
-
-### Bug Fixes
-
-* **angular:** add old IonBackButtonDelegate import ([#28831](https://github.com/ionic-team/ionic-framework/issues/28831)) ([fb77353](https://github.com/ionic-team/ionic-framework/commit/fb7735397ed53323dd93a172407117228610b929)), closes [#28827](https://github.com/ionic-team/ionic-framework/issues/28827)
-* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
-
-
-
-
-
-## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
-
-
-### Bug Fixes
-
-* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
-
-
-
-
-
-## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
-
-
-### Bug Fixes
-
-* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
-* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
-* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
-* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
-
-
-
-
-
-## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
-
-
-### Bug Fixes
-
-* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
-* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
-* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
-
-
-
-
-
 ## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,72 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
-
-
-### Bug Fixes
-
-* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
-* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
-* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
-* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
-* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
-* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
-* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
-
-
-
-
-
-## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.5) (2024-01-17)
-
-
-### Bug Fixes
-
-* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
-
-
-
-
-
-## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
-
-
-### Bug Fixes
-
-* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
-
-
-
-
-
-## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
-
-
-### Bug Fixes
-
-* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
-* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
-* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
-* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
-
-
-
-
-
-## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
-
-
-### Bug Fixes
-
-* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
-* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
-* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
-
-
-
-
-
 ## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)


--- a/core/api.txt
+++ b/core/api.txt
@@ -408,6 +408,7 @@ ion-datetime,prop,multiple,boolean,false,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
+ion-datetime,prop,range,boolean,false,false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
@@ -415,7 +416,7 @@ ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
 ion-datetime,prop,titleSelectedDatesFormatter,((selectedDates: string[]) => string) | undefined,undefined,false,false
-ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
+ion-datetime,prop,value,null | string | string[] | undefined | { start: string; end: string; },undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
 ion-datetime,method,confirm,confirm(closeOverlay?: boolean) => Promise<void>
@@ -429,6 +430,7 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,css-prop,--wheel-highlight-border-radius
 ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
@@ -907,47 +909,66 @@ ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color

-ion-picker,scoped
-ion-picker,prop,animated,boolean,true,false,false
-ion-picker,prop,backdropDismiss,boolean,true,false,false
-ion-picker,prop,buttons,PickerButton[],[],false,false
-ion-picker,prop,columns,PickerColumn[],[],false,false
-ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-picker,prop,duration,number,0,false,false
-ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
-ion-picker,prop,isOpen,boolean,false,false,false
-ion-picker,prop,keyboardClose,boolean,true,false,false
-ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker,shadow
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
-ion-picker,prop,showBackdrop,boolean,true,false,false
-ion-picker,prop,trigger,string | undefined,undefined,false,false
-ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
-ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
-ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker,method,present,present() => Promise<void>
-ion-picker,event,didDismiss,OverlayEventDetail<any>,true
-ion-picker,event,didPresent,void,true
-ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
-ion-picker,event,ionPickerDidPresent,void,true
-ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
-ion-picker,event,ionPickerWillPresent,void,true
-ion-picker,event,willDismiss,OverlayEventDetail<any>,true
-ion-picker,event,willPresent,void,true
-ion-picker,css-prop,--backdrop-opacity
-ion-picker,css-prop,--background
-ion-picker,css-prop,--background-rgb
-ion-picker,css-prop,--border-color
-ion-picker,css-prop,--border-radius
-ion-picker,css-prop,--border-style
-ion-picker,css-prop,--border-width
-ion-picker,css-prop,--height
-ion-picker,css-prop,--max-height
-ion-picker,css-prop,--max-width
-ion-picker,css-prop,--min-height
-ion-picker,css-prop,--min-width
-ion-picker,css-prop,--width
+ion-picker,css-prop,--fade-background-rgb
+ion-picker,css-prop,--highlight-background
+ion-picker,css-prop,--highlight-border-radius
+
+ion-picker-column,shadow
+ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-picker-column,prop,disabled,boolean,false,false,false
+ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
+ion-picker-column,prop,value,number | string | undefined,undefined,false,false
+ion-picker-column,method,setFocus,setFocus() => Promise<void>
+ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,true
+
+ion-picker-column-option,shadow
+ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-picker-column-option,prop,disabled,boolean,false,false,false
+ion-picker-column-option,prop,value,any,undefined,false,false
+
+ion-picker-legacy,scoped
+ion-picker-legacy,prop,animated,boolean,true,false,false
+ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false
+ion-picker-legacy,prop,buttons,PickerButton[],[],false,false
+ion-picker-legacy,prop,columns,PickerColumn[],[],false,false
+ion-picker-legacy,prop,cssClass,string | string[] | undefined,undefined,false,false
+ion-picker-legacy,prop,duration,number,0,false,false
+ion-picker-legacy,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker-legacy,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-picker-legacy,prop,isOpen,boolean,false,false,false
+ion-picker-legacy,prop,keyboardClose,boolean,true,false,false
+ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false
+ion-picker-legacy,prop,showBackdrop,boolean,true,false,false
+ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false
+ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
+ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
+ion-picker-legacy,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
+ion-picker-legacy,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
+ion-picker-legacy,method,present,present() => Promise<void>
+ion-picker-legacy,event,didDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,didPresent,void,true
+ion-picker-legacy,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,ionPickerDidPresent,void,true
+ion-picker-legacy,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,ionPickerWillPresent,void,true
+ion-picker-legacy,event,willDismiss,OverlayEventDetail<any>,true
+ion-picker-legacy,event,willPresent,void,true
+ion-picker-legacy,css-prop,--backdrop-opacity
+ion-picker-legacy,css-prop,--background
+ion-picker-legacy,css-prop,--background-rgb
+ion-picker-legacy,css-prop,--border-color
+ion-picker-legacy,css-prop,--border-radius
+ion-picker-legacy,css-prop,--border-style
+ion-picker-legacy,css-prop,--border-width
+ion-picker-legacy,css-prop,--height
+ion-picker-legacy,css-prop,--max-height
+ion-picker-legacy,css-prop,--max-width
+ion-picker-legacy,css-prop,--min-height
+ion-picker-legacy,css-prop,--min-width
+ion-picker-legacy,css-prop,--width

 ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
@@ -1087,7 +1108,6 @@ ion-range,part,tick-active
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
-ion-refresher,prop,mode,"ios" | "md",undefined,false,false
 ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
@@ -1362,8 +1382,8 @@ ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionTabsDidChange,TabsEventDetail,false
-ion-tabs,event,ionTabsWillChange,TabsEventDetail,false
+ion-tabs,event,ionTabsDidChange,{ tab: string; },false
+ion-tabs,event,ionTabsWillChange,{ tab: string; },false

 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,23 +1,23 @@
 {
  "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.6.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.6.6",
+      "version": "7.6.1",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^4.10.0",
-        "ionicons": "^7.2.2",
+        "@stencil/core": "^4.8.2",
+        "ionicons": "^7.2.1",
        "tslib": "^2.1.0"
      },
      "devDependencies": {
-        "@axe-core/playwright": "^4.8.4",
-        "@capacitor/core": "^5.6.0",
+        "@axe-core/playwright": "^4.8.2",
+        "@capacitor/core": "^5.5.1",
        "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.7",
+        "@capacitor/keyboard": "^5.0.6",
        "@capacitor/status-bar": "^5.0.6",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
@@ -26,7 +26,7 @@
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/angular-output-target": "^0.8.3",
        "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.8",
+        "@stencil/sass": "^3.0.7",
        "@stencil/vue-output-target": "^0.8.7",
        "@types/jest": "^29.5.6",
        "@types/node": "^14.6.0",
@@ -56,12 +56,12 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
-      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
+      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
      "dev": true,
      "dependencies": {
-        "axe-core": "~4.8.3"
+        "axe-core": "~4.8.2"
      },
      "peerDependencies": {
        "playwright-core": ">= 1.0.0"
@@ -634,9 +634,9 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
-      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
+      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
@@ -652,9 +652,9 @@
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
+      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
@@ -1825,9 +1825,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
+      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -1846,9 +1846,9 @@
      }
    },
    "node_modules/@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
+      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
      "dev": true,
      "engines": {
        "node": ">=12.0.0",
@@ -2799,9 +2799,9 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
-      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
+      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
      "dev": true,
      "engines": {
        "node": ">=4"
@@ -5785,9 +5785,9 @@
      }
    },
    "node_modules/ionicons": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
-      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
      "dependencies": {
        "@stencil/core": "^4.0.3"
      }
@@ -10899,12 +10899,12 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
-      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
+      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
      "dev": true,
      "requires": {
-        "axe-core": "~4.8.3"
+        "axe-core": "~4.8.2"
      }
    },
    "@babel/code-frame": {
@@ -11324,9 +11324,9 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
-      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
+      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
@@ -11340,9 +11340,9 @@
      "requires": {}
    },
    "@capacitor/keyboard": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
-      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
+      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
      "dev": true,
      "requires": {}
    },
@@ -12184,9 +12184,9 @@
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
-      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
+      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA=="
    },
    "@stencil/react-output-target": {
      "version": "0.5.3",
@@ -12196,9 +12196,9 @@
      "requires": {}
    },
    "@stencil/sass": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
-      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
+      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
      "dev": true,
      "requires": {}
    },
@@ -12863,9 +12863,9 @@
      }
    },
    "axe-core": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
-      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
+      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
      "dev": true
    },
    "b4a": {
@@ -15056,9 +15056,9 @@
      }
    },
    "ionicons": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
-      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
+      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
      "requires": {
        "@stencil/core": "^4.0.3"
      }
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.6.6",
+  "version": "7.6.1",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,15 +31,15 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.10.0",
-    "ionicons": "^7.2.2",
+    "@stencil/core": "^4.8.2",
+    "ionicons": "^7.2.1",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.8.4",
-    "@capacitor/core": "^5.6.0",
+    "@axe-core/playwright": "^4.8.2",
+    "@capacitor/core": "^5.5.1",
    "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.6",
    "@capacitor/status-bar": "^5.0.6",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
@@ -48,7 +48,7 @@
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.8.3",
    "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.8",
+    "@stencil/sass": "^3.0.7",
    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, DatetimeValue, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -23,9 +23,9 @@ import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
-import { PickerButton, PickerColumn } from "./components/picker/picker-interface";
-import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
-import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
+import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
+import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
+import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -38,7 +38,6 @@ import { SegmentButtonLayout } from "./components/segment-button/segment-button-
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
-import { TabsEventDetail } from "./components/tabs/tabs-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -52,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, DatetimeValue, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -60,9 +59,9 @@ export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
-export { PickerButton, PickerColumn } from "./components/picker/picker-interface";
-export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
-export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
+export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
+export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
+export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -75,7 +74,6 @@ export { SegmentButtonLayout } from "./components/segment-button/segment-button-
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
-export { TabsEventDetail } from "./components/tabs/tabs-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -916,6 +914,10 @@ export namespace Components {
          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
         */
        "presentation": DatetimePresentation;
+        /**
+          * If `true`, a single range of dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "range": boolean;
        /**
          * If `true`, the datetime appears normal but the selected date cannot be changed.
         */
@@ -945,13 +947,13 @@ export namespace Components {
         */
        "size": 'cover' | 'fixed';
        /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
         */
        "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
        /**
          * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
         */
-        "value"?: string | string[] | null;
+        "value"?: DatetimeValue;
        /**
          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
         */
@@ -1184,7 +1186,7 @@ export namespace Components {
         */
        "counter": boolean;
        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
@@ -1703,7 +1705,7 @@ export namespace Components {
         */
        "breakpoints"?: number[];
        /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
         */
        "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
        /**
@@ -1951,6 +1953,58 @@ export namespace Components {
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
+        "exitInputMode": () => Promise<void>;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
+    interface IonPickerColumn {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled": boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
+         */
+        "numericInput": boolean;
+        "scrollActiveItemIntoView": (smooth?: boolean) => Promise<void>;
+        /**
+          * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
+         */
+        "setValue": (value: PickerColumnValue) => Promise<void>;
+        /**
+          * The selected option in the picker.
+         */
+        "value"?: string | number;
+    }
+    interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker column option.
+         */
+        "disabled": boolean;
+        /**
+          * The text value of the option.
+         */
+        "value"?: any | null;
+    }
+    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
         */
@@ -2034,50 +2088,12 @@ export namespace Components {
         */
        "trigger": string | undefined;
    }
-    interface IonPickerColumn {
+    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
        "col": PickerColumn;
    }
-    interface IonPickerColumnInternal {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled": boolean;
-        /**
-          * A list of options to be displayed in the picker
-         */
-        "items": PickerColumnItem[];
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
-         */
-        "numericInput": boolean;
-        "scrollActiveItemIntoView": () => Promise<void>;
-        /**
-          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
-         */
-        "setValue": (value?: string | number) => Promise<void>;
-        /**
-          * The selected option in the picker.
-         */
-        "value"?: string | number;
-    }
-    interface IonPickerInternal {
-        "exitInputMode": () => Promise<void>;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-    }
    interface IonPopover {
        /**
          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
@@ -2338,7 +2354,7 @@ export namespace Components {
         */
        "pin": boolean;
        /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
         */
        "pinFormatter": PinFormatter;
        /**
@@ -2379,10 +2395,6 @@ export namespace Components {
          * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.
         */
        "getProgress": () => Promise<number>;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
        /**
          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
         */
@@ -2980,7 +2992,7 @@ export namespace Components {
         */
        "counter": boolean;
        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
@@ -3344,13 +3356,13 @@ export interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerColumnElement;
 }
-export interface IonPickerColumnInternalCustomEvent<T> extends CustomEvent<T> {
+export interface IonPickerLegacyCustomEvent<T> extends CustomEvent<T> {
    detail: T;
-    target: HTMLIonPickerColumnInternalElement;
+    target: HTMLIonPickerLegacyElement;
 }
-export interface IonPickerInternalCustomEvent<T> extends CustomEvent<T> {
+export interface IonPickerLegacyColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
-    target: HTMLIonPickerInternalElement;
+    target: HTMLIonPickerLegacyColumnElement;
 }
 export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
@@ -4038,14 +4050,7 @@ declare global {
        new (): HTMLIonNoteElement;
    };
    interface HTMLIonPickerElementEventMap {
-        "ionPickerDidPresent": void;
-        "ionPickerWillPresent": void;
-        "ionPickerWillDismiss": OverlayEventDetail;
-        "ionPickerDidDismiss": OverlayEventDetail;
-        "didPresent": void;
-        "willPresent": void;
-        "willDismiss": OverlayEventDetail;
-        "didDismiss": OverlayEventDetail;
+        "ionInputModeChange": PickerChangeEventDetail;
    }
    interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4062,7 +4067,7 @@ declare global {
        new (): HTMLIonPickerElement;
    };
    interface HTMLIonPickerColumnElementEventMap {
-        "ionPickerColChange": PickerColumn;
+        "ionChange": PickerColumnChangeEventDetail;
    }
    interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4078,39 +4083,52 @@ declare global {
        prototype: HTMLIonPickerColumnElement;
        new (): HTMLIonPickerColumnElement;
    };
-    interface HTMLIonPickerColumnInternalElementEventMap {
-        "ionChange": PickerColumnItem;
+    interface HTMLIonPickerColumnOptionElement extends Components.IonPickerColumnOption, HTMLStencilElement {
    }
-    interface HTMLIonPickerColumnInternalElement extends Components.IonPickerColumnInternal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLIonPickerColumnInternalElement: {
-        prototype: HTMLIonPickerColumnInternalElement;
-        new (): HTMLIonPickerColumnInternalElement;
+    var HTMLIonPickerColumnOptionElement: {
+        prototype: HTMLIonPickerColumnOptionElement;
+        new (): HTMLIonPickerColumnOptionElement;
    };
-    interface HTMLIonPickerInternalElementEventMap {
-        "ionInputModeChange": PickerInternalChangeEventDetail;
+    interface HTMLIonPickerLegacyElementEventMap {
+        "ionPickerDidPresent": void;
+        "ionPickerWillPresent": void;
+        "ionPickerWillDismiss": OverlayEventDetail;
+        "ionPickerDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
    }
-    interface HTMLIonPickerInternalElement extends Components.IonPickerInternal, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLIonPickerLegacyElement extends Components.IonPickerLegacy, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
-    var HTMLIonPickerInternalElement: {
-        prototype: HTMLIonPickerInternalElement;
-        new (): HTMLIonPickerInternalElement;
+    var HTMLIonPickerLegacyElement: {
+        prototype: HTMLIonPickerLegacyElement;
+        new (): HTMLIonPickerLegacyElement;
+    };
+    interface HTMLIonPickerLegacyColumnElementEventMap {
+        "ionPickerColChange": PickerColumn;
+    }
+    interface HTMLIonPickerLegacyColumnElement extends Components.IonPickerLegacyColumn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonPickerLegacyColumnElement: {
+        prototype: HTMLIonPickerLegacyColumnElement;
+        new (): HTMLIonPickerLegacyColumnElement;
    };
    interface HTMLIonPopoverElementEventMap {
        "ionPopoverDidPresent": void;
@@ -4505,8 +4523,8 @@ declare global {
    };
    interface HTMLIonTabsElementEventMap {
        "ionNavWillLoad": void;
-        "ionTabsWillChange": TabsEventDetail;
-        "ionTabsDidChange": TabsEventDetail;
+        "ionTabsWillChange": { tab: string };
+        "ionTabsDidChange": { tab: string };
    }
    interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4676,8 +4694,9 @@ declare global {
        "ion-note": HTMLIonNoteElement;
        "ion-picker": HTMLIonPickerElement;
        "ion-picker-column": HTMLIonPickerColumnElement;
-        "ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
-        "ion-picker-internal": HTMLIonPickerInternalElement;
+        "ion-picker-column-option": HTMLIonPickerColumnOptionElement;
+        "ion-picker-legacy": HTMLIonPickerLegacyElement;
+        "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement;
        "ion-popover": HTMLIonPopoverElement;
        "ion-progress-bar": HTMLIonProgressBarElement;
        "ion-radio": HTMLIonRadioElement;
@@ -5627,6 +5646,10 @@ declare namespace LocalJSX {
          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
         */
        "presentation"?: DatetimePresentation;
+        /**
+          * If `true`, a single range of dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        "range"?: boolean;
        /**
          * If `true`, the datetime appears normal but the selected date cannot be changed.
         */
@@ -5652,13 +5675,13 @@ declare namespace LocalJSX {
         */
        "size"?: 'cover' | 'fixed';
        /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
         */
        "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
        /**
          * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
         */
-        "value"?: string | string[] | null;
+        "value"?: DatetimeValue;
        /**
          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
         */
@@ -5903,7 +5926,7 @@ declare namespace LocalJSX {
         */
        "counter"?: boolean;
        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
@@ -6434,7 +6457,7 @@ declare namespace LocalJSX {
         */
        "breakpoints"?: number[];
        /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
         */
        "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
        /**
@@ -6609,6 +6632,53 @@ declare namespace LocalJSX {
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        "onIonInputModeChange"?: (event: IonPickerCustomEvent<PickerChangeEventDetail>) => void;
+    }
+    interface IonPickerColumn {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
+         */
+        "numericInput"?: boolean;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
+        /**
+          * The selected option in the picker.
+         */
+        "value"?: string | number;
+    }
+    interface IonPickerColumnOption {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker column option.
+         */
+        "disabled"?: boolean;
+        /**
+          * The text value of the option.
+         */
+        "value"?: any | null;
+    }
+    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
         */
@@ -6662,35 +6732,35 @@ declare namespace LocalJSX {
        /**
          * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
         */
-        "onDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
         */
-        "onDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted after the picker has dismissed.
         */
-        "onIonPickerDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented.
         */
-        "onIonPickerDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onIonPickerDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed.
         */
-        "onIonPickerWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented.
         */
-        "onIonPickerWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onIonPickerWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
         */
-        "onWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        "onWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
         */
-        "onWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        "onWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * If `true`, a backdrop will be displayed behind the picker.
@@ -6701,7 +6771,7 @@ declare namespace LocalJSX {
         */
        "trigger"?: string | undefined;
    }
-    interface IonPickerColumn {
+    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
@@ -6709,44 +6779,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the selected value has changed
         */
-        "onIonPickerColChange"?: (event: IonPickerColumnCustomEvent<PickerColumn>) => void;
-    }
-    interface IonPickerColumnInternal {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the user cannot interact with the picker.
-         */
-        "disabled"?: boolean;
-        /**
-          * A list of options to be displayed in the picker
-         */
-        "items"?: PickerColumnItem[];
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        /**
-          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
-         */
-        "numericInput"?: boolean;
-        /**
-          * Emitted when the value has changed.
-         */
-        "onIonChange"?: (event: IonPickerColumnInternalCustomEvent<PickerColumnItem>) => void;
-        /**
-          * The selected option in the picker.
-         */
-        "value"?: string | number;
-    }
-    interface IonPickerInternal {
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
-        "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent<PickerInternalChangeEventDetail>) => void;
+        "onIonPickerColChange"?: (event: IonPickerLegacyColumnCustomEvent<PickerColumn>) => void;
    }
    interface IonPopover {
        /**
@@ -7066,7 +7099,7 @@ declare namespace LocalJSX {
         */
        "pin"?: boolean;
        /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
         */
        "pinFormatter"?: PinFormatter;
        /**
@@ -7095,10 +7128,6 @@ declare namespace LocalJSX {
          * If `true`, the refresher will be hidden.
         */
        "disabled"?: boolean;
-        /**
-          * The mode determines which platform styles to use.
-         */
-        "mode"?: "ios" | "md";
        /**
          * Emitted while the user is pulling down the content and exposing the refresher.
         */
@@ -7713,11 +7742,11 @@ declare namespace LocalJSX {
        /**
          * Emitted when the navigation has finished transitioning to a new component.
         */
-        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
+        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
        /**
          * Emitted when the navigation is about to transition to a new component.
         */
-        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
+        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
        "useRouter"?: boolean;
    }
    interface IonText {
@@ -7760,7 +7789,7 @@ declare namespace LocalJSX {
         */
        "counter"?: boolean;
        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
@@ -8131,8 +8160,9 @@ declare namespace LocalJSX {
        "ion-note": IonNote;
        "ion-picker": IonPicker;
        "ion-picker-column": IonPickerColumn;
-        "ion-picker-column-internal": IonPickerColumnInternal;
-        "ion-picker-internal": IonPickerInternal;
+        "ion-picker-column-option": IonPickerColumnOption;
+        "ion-picker-legacy": IonPickerLegacy;
+        "ion-picker-legacy-column": IonPickerLegacyColumn;
        "ion-popover": IonPopover;
        "ion-progress-bar": IonProgressBar;
        "ion-radio": IonRadio;
@@ -8228,8 +8258,9 @@ declare module "@stencil/core" {
            "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
            "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
            "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
-            "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;
-            "ion-picker-internal": LocalJSX.IonPickerInternal & JSXBase.HTMLAttributes<HTMLIonPickerInternalElement>;
+            "ion-picker-column-option": LocalJSX.IonPickerColumnOption & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
+            "ion-picker-legacy": LocalJSX.IonPickerLegacy & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
+            "ion-picker-legacy-column": LocalJSX.IonPickerLegacyColumn & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
            "ion-popover": LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
            "ion-progress-bar": LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
            "ion-radio": LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -382,10 +382,7 @@ export class Accordion implements ComponentInterface {
  };

  private toggleExpanded() {
-    const { accordionGroupEl, disabled, readonly, value, state } = this;
-
-    if (disabled || readonly) return;
-
+    const { accordionGroupEl, value, state } = this;
    if (accordionGroupEl) {
      /**
       * Because the accordion group may or may
--- a/core/src/components/accordion/test/accordion.e2e.ts
+++ b/core/src/components/accordion/test/accordion.e2e.ts
@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: states'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+    });
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('readonly', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.readonly = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('disabled', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.disabled = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+  });
+});
--- a/core/src/components/accordion/test/disabled/accordion.e2e.ts
+++ b/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -1,137 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: disabled'), () => {
-    test('should properly set disabled on child accordions', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('disabled', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.disabled = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('disabled', true);
-    });
-
-    test('should not open accordion on click when group is disabled', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false" disabled>
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      accordion.click();
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion on click when accordion is disabled', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion disabled>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      accordion.click();
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false" disabled>
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      await page.keyboard.press(tabKey);
-      await page.waitForChanges();
-
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion via keyboard navigation when accordion is disabled', async ({
-      page,
-      browserName,
-    }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion disabled>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      await page.keyboard.press(tabKey);
-      await page.waitForChanges();
-
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-  });
-});
--- a/core/src/components/accordion/test/disabled/index.html
+++ b/core/src/components/accordion/test/disabled/index.html
@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Accordion - Disabled</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        grid-row-gap: 20px;
-        grid-column-gap: 20px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Accordion - Disabled</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true" color="light">
-        <ion-header collapse="condense">
-          <ion-toolbar color="light">
-            <ion-title size="large">Accordion - Disabled</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <ion-accordion-group>
-              <ion-accordion value="first">
-                <ion-item slot="header" color="light">
-                  <ion-label>First Accordion</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">First Content</div>
-              </ion-accordion>
-              <ion-accordion value="second" disabled="true">
-                <ion-item slot="header" color="light">
-                  <ion-label>Second Accordion (Disabled)</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Second Content</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header" color="light">
-                  <ion-label>Third Accordion</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Third Content</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <ion-accordion-group disabled="true">
-              <ion-accordion value="first">
-                <ion-item slot="header" color="light">
-                  <ion-label>First Accordion in Disabled Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">First Content</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header" color="light">
-                  <ion-label>Second Accordion in Disabled Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Second Content</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header" color="light">
-                  <ion-label>Third Accordion in Disabled Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Third Content</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <ion-accordion value="second" disabled="true">
-              <ion-item slot="header" color="light">
-                <ion-label>Accordion Without Group (Disabled)</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Second Content</div>
-            </ion-accordion>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/accordion/test/readonly/accordion.e2e.ts
+++ b/core/src/components/accordion/test/readonly/accordion.e2e.ts
@@ -1,137 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: readonly'), () => {
-    test('should properly set readonly on child accordions', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('readonly', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.readonly = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('readonly', true);
-    });
-
-    test('should not open accordion on click when group is readonly', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false" readonly>
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      accordion.click();
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion on click when accordion is readonly', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion readonly>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      accordion.click();
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false" readonly>
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      await page.keyboard.press(tabKey);
-      await page.waitForChanges();
-
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-
-    test('should not open accordion via keyboard navigation when accordion is readonly', async ({
-      page,
-      browserName,
-    }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion readonly>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-
-      await page.keyboard.press(tabKey);
-      await page.waitForChanges();
-
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveClass(/accordion-collapsed/);
-    });
-  });
-});
--- a/core/src/components/accordion/test/readonly/index.html
+++ b/core/src/components/accordion/test/readonly/index.html
@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Accordion - Readonly</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        grid-row-gap: 20px;
-        grid-column-gap: 20px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Accordion - Readonly</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true" color="light">
-        <ion-header collapse="condense">
-          <ion-toolbar color="light">
-            <ion-title size="large">Accordion - Readonly</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <ion-accordion-group>
-              <ion-accordion value="first">
-                <ion-item slot="header" color="light">
-                  <ion-label>First Accordion</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">First Content</div>
-              </ion-accordion>
-              <ion-accordion value="second" readonly="true">
-                <ion-item slot="header" color="light">
-                  <ion-label>Second Accordion (Readonly)</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Second Content</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header" color="light">
-                  <ion-label>Third Accordion</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Third Content</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <ion-accordion-group readonly="true">
-              <ion-accordion value="first">
-                <ion-item slot="header" color="light">
-                  <ion-label>First Accordion in Readonly Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">First Content</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header" color="light">
-                  <ion-label>Second Accordion in Readonly Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Second Content</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header" color="light">
-                  <ion-label>Third Accordion in Readonly Group</ion-label>
-                </ion-item>
-                <div class="ion-padding" slot="content">Third Content</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <ion-accordion value="second" readonly="true">
-              <ion-item slot="header" color="light">
-                <ion-label>Accordion Without Group (Readonly)</ion-label>
-              </ion-item>
-              <div class="ion-padding" slot="content">Second Content</div>
-            </ion-accordion>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/action-sheet/test/a11y/index.html
+++ b/core/src/components/action-sheet/test/a11y/index.html
@@ -19,12 +19,12 @@
    <main class="ion-padding">
      <h1>Action Sheet - A11y</h1>

-      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
+      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
        >Aria Label Cancel Button</ion-button
      >
    </main>
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -265,22 +265,6 @@
  flex-wrap: $alert-ios-button-group-flex-wrap;
 }

-/**
-  * The right border should only be applied to the first button
-  * when the group has 2 or less buttons (horizontal).
-  * Otherwise, the right border should not be applied
-  * when the group has 3 or more buttons (vertical).
-  */
-.alert-button-group-vertical .alert-button {
-  border-right: none;
-
-  &:last-child {
-    @include rtl() {
-      border-right: none;
-    }
-  }
-}
-
 .alert-button {
  /**
   * This padding ensures that alerts
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -9,19 +9,6 @@
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      main > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
  </head>
  <script type="module">
    import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -32,13 +19,13 @@
    <main class="ion-padding">
      <h1>Alert - A11y</h1>

-      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
-      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
-      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
-      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
-      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
-      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
-      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
+      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
    </main>

    <script>
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -73,6 +73,11 @@ configs().forEach(({ config, screenshot, title }) => {
      await alertFixture.screenshot('longMessage');
    });

+    test('more than two buttons', async () => {
+      await alertFixture.open('#multipleButtons');
+      await alertFixture.screenshot('multipleButtons');
+    });
+
    test('no message', async () => {
      await alertFixture.open('#noMessage');
      await alertFixture.screenshot('noMessage');
@@ -100,41 +105,6 @@ configs().forEach(({ config, screenshot, title }) => {
  });
 });

-configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('should not have visual regressions'), () => {
-    test('more than two buttons', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-alert
-          header="Alert"
-          sub-header="Subtitle"
-          message="This is an alert message."
-          is-open="true"
-        ></ion-alert>
-
-        <script>
-          const alert = document.querySelector('ion-alert');
-          alert.buttons = [
-            'Open Modal',
-            {
-              text: 'Delete',
-              id: 'delete-button',
-              role: 'destructive',
-            },
-            'Cancel'
-          ];
-        </script>
-      `,
-        config
-      );
-
-      const alert = page.locator('ion-alert');
-
-      await expect(alert).toHaveScreenshot(screenshot(`alert-multipleButtons`));
-    });
-  });
-});
-
 class AlertFixture {
  readonly page: E2EPage;
  readonly screenshotFn?: (file: string) => string;
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Firefox-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Firefox-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sean Perkins	ad350b79e5	chore: revert bug fix attempt for month/year interface	2024-01-22 14:14:51 -05:00
Sean Perkins	2b1141d4c4	wip: workaround for month/year picker changing value	2024-01-19 21:38:19 -05:00
Sean Perkins	9e4be25f8e	test: screenshot tests for range selection	2024-01-19 21:28:32 -05:00
Sean Perkins	2813725dab	feat: --range-background css variable	2024-01-19 21:07:09 -05:00
Sean Perkins	0ddd5d51a4	chore: prettier formatting	2024-01-19 20:48:58 -05:00
Sean Perkins	a65bce2ce5	feat: support start/end object format for date range	2024-01-19 20:43:41 -05:00
Sean Perkins	804d51f3ef	fix: implementation and styling	2024-01-19 20:05:32 -05:00
Sean Perkins	dd5fe792c7	fix: implementation issues	2024-01-07 16:35:59 -05:00
Sean Perkins	6295e12543	wip: date range architecture discovery	2024-01-07 16:22:38 -05:00
Sean Perkins	2c20a6bdb4	chore(breaking): update picker component heading level (#28725 ) 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. --> The picker heading level is currently an `h2`, where the other component headings are `h4`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the heading level for Picker to `h4`. ## 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/.github/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. -->	2023-12-18 16:45:25 -05:00
Liam DeBeasi	e0895e7a95	chore: sync with main chore: sync with main	2023-12-18 11:09:00 -05:00
Liam DeBeasi	7cec5337a4	chore: sync	2023-12-18 10:46:20 -05:00
Liam DeBeasi	e574ffe85a	chore(picker): mark ionInputModeChange as internal (#28701 )	2023-12-13 17:51:23 -05:00
Liam DeBeasi	cd5c099dd3	feat(picker): add inline picker (#28689 ) Issue number: resolves #24905, resolves #26840, resolves #15710 --------- <!-- 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 picker is only displayed as an overlay which makes it impossible to use inline with the rest of the application. Additionally, there are several bugs and missing features. For example, it is impossible to know when the value of the picker column has changed using public APIs. This is valuable for updating other columns in response to that data. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces `ion-picker` as an inline wheel picker component. The overlay picker is still available using `ion-picker-legacy`. - The implementation of this component resolves linked bugs. It also resolves linked features by exposing an `ionChange` event for developers to listen for. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## 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: `7.5.8-dev.11702398696.1ab62ea9` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>	2023-12-13 13:03:58 -05:00
Shawn Taylor	666a01dd6e	fix(button): wrap text by default (#28682 ) Issue number: resolves #8700 BREAKING CHANGE: Button text now wraps by default.	2023-12-12 13:15:13 -05:00
Liam DeBeasi	c1465bd1b0	chore: sync feature-7.6 with main chore: sync feature-8.0 with main	2023-12-05 09:36:22 -05:00
Liam DeBeasi	8dc3d1a16d	Merge remote-tracking branch 'origin/main' into sync-80-125	2023-12-05 09:12:24 -05:00
Sean Perkins	56d3bd5612	Merge pull request #28606 from ionic-team/sp/sync-feature-8 chore: sync with main	2023-11-29 17:01:50 -05:00
Sean Perkins	2fb6cd92dc	Merge remote-tracking branch 'origin/main' into sp/sync-feature-8	2023-11-29 16:49:21 -05:00
Liam DeBeasi	7ac0018a3c	chore: sync with main chore: sync with main	2023-11-27 10:38:48 -05:00
Liam DeBeasi	a7c966776a	test: resolve type errors	2023-11-27 10:28:30 -05:00
Liam DeBeasi	7de4e34f13	Merge remote-tracking branch 'origin/main' into sync-80-main-11-27	2023-11-27 10:24:40 -05:00
Sean Perkins	4b5e62e60f	refactor(datetime): render button for month/year toggle (#28443 ) 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. --> `ion-datetime` uses an `ion-item` to render the month/year toggle button inside of the header. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ion-datetime` uses a `button` element for the month/year toggle button ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> Impact and migration path is noted in the `BREAKING.md`. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> - `translucent` is not a valid CSS value for `background`. This was always intended to be `transparent`. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> BREAKING CHANGE: The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.	2023-11-27 10:19:19 -05:00
Liam DeBeasi	9883eac0f7	fix(angular): transition plays when using browser buttons (#28530 ) Issue number: resolves #16569 --------- <!-- 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. --> Ionic Angular's routing integration disables page transitions when using the browser back/forward buttons. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Transitions now play when using the back/forward buttons ## Does this introduce a breaking change? - [ ] Yes - [x] No We're not aware of any breaking changes here, though it's possible some developers were relying on this behavior. As a result, we are targeting Ionic 8 to minimize any potential negative impact this fix may have on developers. <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Supersedes https://github.com/ionic-team/ionic-framework/pull/28188 Dev build: `7.5.6-dev.11700068172.15ce9b35` Co-authored-by: hoi4 <hoi4@users.noreply.github.com>	2023-11-16 10:52:32 -05:00
Liam DeBeasi	aa2a7f5271	chore: sync with main chore: sync with main	2023-11-15 12:18:04 -05:00
Liam DeBeasi	2509d565b2	chore: sync	2023-11-15 12:06:22 -05:00
Liam DeBeasi	ce89057641	refactor(angular): radio component is auto generated (#28533 )	2023-11-15 12:05:17 -05:00
Liam DeBeasi	5aafd68f03	chore: remove unused code (#28503 ) BREAKING CHANGE: Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.	2023-11-13 11:30:36 -05:00
Maria Hutt	098ed054b1	chore(angular): remove radio value accessor (#28386 ) Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>	2023-11-06 10:50:03 -08:00
Sean Perkins	7ba939fb94	fix(overlays): prevent scroll gestures when the overlay is presented (#28415 ) Issue number: Resolves #23942 --------- <!-- 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 an overlay is created (inserted in the DOM), but not presented, the scroll gesture is prevented. This behavior comes from the `connectedCallback` of `ion-backdrop`, where the gesture is prevented as soon as the backdrop is inserted in the DOM. This means in situations where a developer creates an overlay, but does not present it immediately, the user cannot scroll. This is not desired. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Scroll blocking behavior tied to the gesture has been removed from `ion-backdrop` and implemented into the overlays directly. - When an overlay is presented, scroll blocking is enabled on the `body` element (the user cannot scroll on the main content). - When the last presented overlay is dismissed, scroll blocking is disabled on the `body` element (the user can scroll on the main content). ## Does this introduce a breaking change? - [x] Yes - [ ] No `ion-backdrop` no longer prevents scrolling on the main content when the backdrop is either inserted into the DOM or removed from the DOM. Developers using Ionic overlays do not need to migrate their implementations. Developers with custom overlays using `ion-backdrop` internally can either use Ionic's gesture controller to disable scrolling when their overlay is presented/dismissed or can manually add the `backdrop-no-scroll` Ionic global class to the `body` element. <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> ---------	2023-11-01 14:58:53 -04:00
Sean Perkins	6cd819a059	Merge pull request #28427 from ionic-team/sp/sync-feature-8-with-main chore: sync with main	2023-10-29 22:55:59 -04:00
Sean Perkins	9bcee94e0b	Merge remote-tracking branch 'origin/main' into sp/sync-feature-8-with-main	2023-10-27 13:05:48 -04:00
Liam DeBeasi	409df1bea5	docs(breaking): add v8 browser and platform support (#28368 ) BREAKING CHANGE: The supported JS Framework and Browser/Platform versions have been revised for Ionic 8	2023-10-19 11:51:08 -04:00
Amanda Johnston	021712bd7d	chore(): update BREAKING.md to prepare for Ionic 8 development (#28360 ) 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. --> - v7 breaking changes moved to legacy file. - New v8 section added to main breaking changes list. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->	2023-10-17 09:07:36 -05:00