voyager-ionic-core 8.1.0 → 8.2.0

package/dist/cjs/{md.transition-047c18c5.js → md.transition-dbc2d3f3.js}

@@ -4,10 +4,10 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-c0b7f8f4.js');
+const index = require('./index-fa3cf6ba.js');
 require('./index-c8d52405.js');
-require('./ionic-global-35b86a09.js');
-require('./index-8709af32.js');
+require('./ionic-global-f401ca2e.js');
+require('./index-ceeb4ff8.js');
 require('./index-5915f9b3.js');
 require('./helpers-afaa9001.js');
 

package/dist/cjs/{overlays-cb04d075.js → overlays-d4afb0bd.js}

@@ -5,8 +5,8 @@
 
 const index = require('./index-c8d52405.js');
 const helpers = require('./helpers-afaa9001.js');
-const hardwareBackButton = require('./hardware-back-button-ed931127.js');
-const ionicGlobal = require('./ionic-global-35b86a09.js');
+const hardwareBackButton = require('./hardware-back-button-93f7a8f0.js');
+const ionicGlobal = require('./ionic-global-f401ca2e.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 const gestureController = require('./gesture-controller-9436f482.js');
 const index$1 = require('./index-5915f9b3.js');

package/dist/cjs/{status-tap-5b2775cd.js → status-tap-0a82a165.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-8709af32.js');
+const index = require('./index-ceeb4ff8.js');
 const index$1 = require('./index-5b6a7459.js');
 const helpers = require('./helpers-afaa9001.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

@@ -96,7 +96,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.17.2",
+    "version": "4.18.1",
     "typescriptVersion": "5.4.5"
   },
   "collections": [

package/dist/collection/components/accordion/test/a11y/accordion.e2e.js

@@ -5,10 +5,11 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ config, title }) => {
     test.describe(title('accordion: a11y'), () => {
-        test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-            // TODO(FW-1764): remove skip once issue is resolved
+        // TODO(ROU-8157): remove skip once the keyboard navigation is working again
+        test.skip('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+            // TODO(ROU-5358): remove skip once issue is resolved
             skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-            // TODO (FW-2979)
+            // TODO (ROU-5437)
             skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
             await page.goto(`/src/components/accordion/test/a11y`, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

package/dist/collection/components/alert/test/a11y/alert.e2e.js

@@ -133,7 +133,9 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('alert: font scaling'), () => {
-        test('should scale text on larger font sizes', async ({ page }) => {
+        test('should scale text on larger font sizes', async ({ page, skip }) => {
+            // TODO(ROU-8158): unskip this test when a solution is found
+            skip.browser('chromium', 'Rendering is flaky in Chrome.');
             await page.setContent(`
         <style>
           html {

package/dist/collection/components/breadcrumbs/test/reactive/breadcrumbs.e2e.js

@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, screenshot, t
         test.describe('adding a breadcrumb item', () => {
             test('should update the active item', async ({ page }) => {
                 const breadcrumbItems = page.locator('ion-breadcrumb');
-                const addItemButton = page.locator('ion-button#add-btn');
+                const addItemButton = page.locator('#add-btn');
                 await expect(breadcrumbItems).toHaveCount(4);
                 await addItemButton.click();
                 await page.waitForChanges();

package/dist/collection/components/checkbox/checkbox.ios.css

@@ -96,6 +96,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/checkbox/checkbox.md.css

@@ -96,6 +96,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/datetime/test/position/datetime.e2e.js

@@ -8,7 +8,7 @@ configs().forEach(({ title, screenshot, config }) => {
         test('should position the time picker relative to the click target', async ({ page }) => {
             await page.goto('/src/components/datetime/test/position', config);
             const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-            const openDateTimeBtn = page.locator('ion-button#open-datetime');
+            const openDateTimeBtn = page.locator('#open-datetime');
             await openDateTimeBtn.click();
             await ionPopoverDidPresent.next();
             await page.locator('.datetime-ready').waitFor();

package/dist/collection/components/item/test/inputs/item.e2e.js

@@ -151,3 +151,49 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
     });
 });
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('item: inputs'), () => {
+        test('should not shrink the width of a div next to a checkbox, radio, select or toggle', async ({ page, }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/29319',
+            });
+            await page.setContent(`
+        <style>
+          .box {
+            background: lightgreen;
+
+            width: 60px;
+            height: 60px;
+          }
+        </style>
+
+        <ion-list lines="none">
+          <ion-item>
+            <div class="box"></div>
+            <ion-checkbox>Checkbox</ion-checkbox>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-radio>Radio</ion-radio>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-select label="Select">
+              <ion-select-option>Option</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <div class="box"></div>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-list>
+      `, config);
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`item-inputs-div-with-inputs`));
+        });
+    });
+});

package/dist/collection/components/item/test/slotted-inputs/item.e2e.js

@@ -12,3 +12,138 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('item: slotted inputs'), () => {
+        test.describe('checkbox', () => {
+            test('should not expand the slotted checkbox width larger than its content', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+                });
+                await page.setContent(`
+          <ion-list>
+            <ion-item>
+              <ion-checkbox slot="start"></ion-checkbox>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-checkbox slot="end"></ion-checkbox>
+            </ion-item>
+            <ion-item>
+              <ion-checkbox slot="start">Start</ion-checkbox>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-checkbox slot="end">End</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `, config);
+                const list = page.locator('ion-list');
+                await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-checkbox`));
+            });
+        });
+        test.describe('radio', () => {
+            test('should not expand the slotted radio width larger than its content', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+                });
+                await page.setContent(`
+          <ion-list>
+            <ion-item>
+              <ion-radio slot="start"></ion-radio>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-radio slot="end"></ion-radio>
+            </ion-item>
+            <ion-item>
+              <ion-radio slot="start">Start</ion-radio>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-radio slot="end">End</ion-radio>
+            </ion-item>
+          </ion-list>
+        `, config);
+                const list = page.locator('ion-list');
+                await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-radio`));
+            });
+        });
+        test.describe('select', () => {
+            test('should not expand the slotted select width larger than its content', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+                });
+                await page.setContent(`
+          <ion-list>
+            <ion-item>
+              <ion-select slot="start">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-select slot="end">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-select slot="start" label="Start">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-select slot="end" label="End">
+                <ion-select-option>Option</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        `, config);
+                const list = page.locator('ion-list');
+                await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-select`));
+            });
+        });
+        test.describe('toggle', () => {
+            test('should not expand the slotted toggle width larger than its content', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/29423',
+                });
+                await page.setContent(`
+          <ion-list>
+            <ion-item>
+              <ion-toggle slot="start"></ion-toggle>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-toggle slot="end"></ion-toggle>
+            </ion-item>
+            <ion-item>
+              <ion-toggle slot="start">Start</ion-toggle>
+              <ion-label>Label</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Label</ion-label>
+              <ion-toggle slot="end">End</ion-toggle>
+            </ion-item>
+          </ion-list>
+        `, config);
+                const list = page.locator('ion-list');
+                await expect(list).toHaveScreenshot(screenshot(`item-slotted-inputs-toggle`));
+            });
+        });
+    });
+});

package/dist/collection/components/loading/test/basic/loading.e2e.js

@@ -60,7 +60,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
             await page.click('#html-content-loading');
             await ionLoadingDidPresent.next();
-            const button = page.locator('ion-loading ion-button');
+            const button = page.locator('ion-loading button');
             if (browserName === 'webkit') {
                 await page.keyboard.down('Alt');
             }

package/dist/collection/components/menu/test/basic/menu.e2e.js

@@ -26,7 +26,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should trap focus', async ({ page, skip, browserName }) => {
             skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
-            // TODO (FW-2979)
+            // TODO (ROU-5437)
             skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
             const ionDidOpen = await page.spyOnEvent('ionDidOpen');
             await page.click('#open-start');

package/dist/collection/components/modal/test/trigger/modal.e2e.js

@@ -21,7 +21,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await modal.evaluate((modal) => {
                 var _a;
                 modal.remove();
-                (_a = document.querySelector('ion-button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', modal);
+                (_a = document.querySelector('button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', modal);
             });
             await page.waitForChanges();
             await button.click();

package/dist/collection/components/nav/test/basic/nav.e2e.js

@@ -17,7 +17,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test.describe('pushing a new page', () => {
             test('should render the pushed component', async ({ page }) => {
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
                 const pageOne = page.locator('page-one');
                 const pageTwo = page.locator('page-two');
                 await pageTwoButton.click();
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 await expect(pageOne).not.toBeVisible();
             });
             test('should render the back button', async ({ page }) => {
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
                 const pageTwoBackButton = page.locator('page-two ion-back-button');
                 await pageTwoButton.click();
                 await page.waitForChanges();
@@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('back button should pop to the previous page', async ({ page }) => {
             const pageOne = page.locator('page-one');
             const pageTwo = page.locator('page-two');
-            const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+            const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
             const pageTwoBackButton = page.locator('page-two ion-back-button');
             await pageTwoButton.click();
             await page.waitForChanges();
@@ -52,8 +52,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 const pageOne = page.locator('page-one');
                 const pageTwo = page.locator('page-two');
                 const pageThree = page.locator('page-three');
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-                const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
+                const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
                 await pageTwoButton.click();
                 await page.waitForChanges();
                 await expect(pageOne).toHaveCount(1);

package/dist/collection/components/nav/test/nested/nav.e2e.js

@@ -15,8 +15,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('should push pages with nested ion-nav', async ({ page }) => {
             const pageOne = page.locator('page-one');
             const pageTwo = page.locator('page-two');
-            const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-            const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+            const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
+            const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
             await pageTwoButton.click();
             await page.waitForChanges();
             const pageTwoOne = page.locator('page-two-one');
@@ -28,7 +28,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.waitForChanges();
             await expect(pageTwoOne).toHaveCount(1);
             await expect(pageTwoTwo).toBeVisible();
-            const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+            const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
             await pageThreeButton.click();
             await page.waitForChanges();
             const pageThree = page.locator('page-three');
@@ -38,15 +38,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test.describe('back button', () => {
             test('should work with nested ion-nav', async ({ page }) => {
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-                const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
+                const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
                 await pageTwoButton.click();
                 await page.waitForChanges();
                 const pageTwoOne = page.locator('page-two-one');
                 const pageTwoTwo = page.locator('page-two-two');
                 await pageTwoTwoButton.click();
                 await page.waitForChanges();
-                const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+                const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
                 const pageThreeBackButton = page.locator('page-three ion-back-button');
                 await pageThreeButton.click();
                 await page.waitForChanges();

package/dist/collection/components/nav/test/routing/nav.e2e.js

@@ -21,8 +21,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 const pageRoot = page.locator('page-root');
                 const pageOne = page.locator('page-one');
                 const pageTwo = page.locator('page-two');
-                const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+                const pageOneButton = page.locator('button:has-text("Go to Page One")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
                 await pageOneButton.click();
                 await page.waitForChanges();
                 await expect(pageOne).toBeVisible();
@@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 await expect(pageOne).toHaveCount(1);
             });
             test('should render the back button', async ({ page }) => {
-                const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+                const pageOneButton = page.locator('button:has-text("Go to Page One")');
                 const pageOneBackButton = page.locator('page-one ion-back-button');
                 await pageOneButton.click();
                 await page.waitForChanges();
@@ -47,7 +47,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('back button should pop to the previous page', async ({ page }) => {
             const pageRoot = page.locator('page-root');
             const pageOne = page.locator('page-one');
-            const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+            const pageOneButton = page.locator('button:has-text("Go to Page One")');
             const pageOneBackButton = page.locator('page-one ion-back-button');
             await pageOneButton.click();
             await page.waitForChanges();
@@ -63,9 +63,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 const pageOne = page.locator('page-one');
                 const pageTwo = page.locator('page-two');
                 const pageThree = page.locator('page-three');
-                const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-                const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-                const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+                const pageOneButton = page.locator('button:has-text("Go to Page One")');
+                const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
+                const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
                 await pageOneButton.click();
                 await page.waitForChanges();
                 await expect(pageRoot).toHaveCount(1);

package/dist/collection/components/picker-column/picker-column.js

@@ -359,7 +359,7 @@ export class PickerColumn {
                     break;
             }
             if (newOption !== null) {
-                this.value = newOption.value;
+                this.setValue(newOption.value);
                 // This stops any default browser behavior such as scrolling
                 ev.preventDefault();
             }
@@ -509,8 +509,8 @@ export class PickerColumn {
      * Use this method instead of the global `pickerColumn.focus()`.
      */
     async setFocus() {
-        if (this.scrollEl) {
-            this.scrollEl.focus();
+        if (this.assistiveFocusable) {
+            this.assistiveFocusable.focus();
         }
     }
     connectedCallback() {
@@ -534,14 +534,33 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ced35afc6326a20dbac68193921a807a9c10bb99', class: createColorClasses(color, {
+        return (h(Host, { key: 'd60736ce74c0e8c774a163272b78fbad32993ec2', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '41e290dcc44dacb4237eb674ce2dedc7db66eb7d', name: "prefix" }), h("div", { key: '1fd869b063900103deadefc40929a1e8f02ec084', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '74611112ef154b343ae29a773f8cd8a01cc1447d', name: "prefix" }), h("div", { key: 'af772d2b61b7eb41a567593d290b80a50b7caa72', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: '0d2087f775b240c9b2534650eb27f3d99e7690a9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '1245b2bb2b6314c3ec4e0ab3ece4e42beb360fc9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '503b08f6bbe27fa7d34c165a93ec38ce7f1ad590', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'ec401a2b2d56546fb3f10239b71320ce7dc6a77d' }), h("div", { key: '97a234018291c5a6ca7a56bb1a9a417cac0b3e6f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '0197711f71486a8fa3c184b593cebe1c1e54c585', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '961304f0a2a10afb3502ce4c5fbdceef0aa933cf', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'f38b83d26c3c2ba8ef00da7caf7f0be518b2007d', name: "suffix" })));
+            },
+            /**
+             * When an element has an overlay scroll style and
+             * a fixed height, Firefox will focus the scrollable
+             * container if the content exceeds the container's
+             * dimensions.
+             *
+             * This causes keyboard navigation to focus to this
+             * element instead of going to the next element in
+             * the tab order.
+             *
+             * The desired behavior is for the user to be able to
+             * focus the assistive focusable element and tab to
+             * the next element in the tab order. Instead of tabbing
+             * to this element.
+             *
+             * To prevent this, we set the tabIndex to -1. This
+             * will match the behavior of the other browsers.
+             */
+            tabIndex: -1 }, h("div", { key: '4b646ee97bcf8ed541b9798c91dff189eec41dd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a44d1a10d20a13aeb47f9871b09e291aa7f216bd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6a481715bd68fa68dc2a76c2e867ce771ea680b0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '23236e731b1ad432c104761ebeec91697a6b7643' }), h("div", { key: '58a6c1f35a3ff0b26acaceebfd477d74b6dcfd6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ea864872dec6dc363406d1bd9101b1bf21944db6', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '28cc4c570d0dd59f491eef2b15a5ed706d28b7bb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'cff1cc0bea732a5ce22bb451c5ea404a84af1993', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/test/trigger/popover.e2e.js

@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await popover.evaluate((popover) => {
                 var _a;
                 popover.remove();
-                (_a = document.querySelector('ion-button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', popover);
+                (_a = document.querySelector('button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', popover);
             });
             await page.waitForChanges();
             await button.click();

package/dist/collection/components/radio/radio.ios.css

@@ -126,6 +126,7 @@ input {
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/radio/radio.js

@@ -70,6 +70,17 @@ export class Radio {
          */
         this.updateState();
     }
+    componentDidLoad() {
+        /**
+         * The value may be `undefined` if it
+         * gets set before the radio is
+         * rendered. This ensures that the radio
+         * is checked if the value matches. This
+         * happens most often when Angular is
+         * rendering the radio.
+         */
+        this.updateState();
+    }
     /** @internal */
     async setFocus(ev) {
         ev.stopPropagation();
@@ -107,7 +118,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'e44cade8aa8415bdc825f9d17fc8562487cf5d35', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '43c95effb6acb119733270e8a5e02fe18b47ee4b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -118,10 +129,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '48a99aa80a7d7b4085ef26faf3167903c975517c', class: "radio-wrapper" }, h("div", { key: 'a8d74e0603b41215ea3e867356a9be0dcf3722d8', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '168ea77c08fde9832077d617662b93dc9986b544', class: "radio-wrapper" }, h("div", { key: 'ce1e6eee63fbab1e5a66b18f767f4eecc2a227f1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '9e3cce6254e70b02d50381537438a70435b031cc' })), h("div", { key: 'bfa3ee188d911e056a3e60178eac41362efb94b3', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '7d849e43d4356b5c3978c2bba9a6fba5d21ca69d' })), h("div", { key: 'e741f7822364958b050a232bdfccdc413095c244', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.md.css

@@ -126,6 +126,7 @@ input {
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/searchbar/searchbar.js

@@ -23,7 +23,7 @@ export class Searchbar {
         this.onClearInput = async (shouldFocus) => {
             this.ionClear.emit();
             return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+                // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
                 // wait for 4 frames
                 setTimeout(() => {
                     const value = this.getValue();
@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '8f3323145edfde317f2762e470f3ab2e27452b69', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'a3ae5d8a6fe3a96b5aa7142f7a246876fdbe3ef3', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '543593e248261418ea75580e5fbed1c613e57d00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '01351daea61933fedd1bd6289376183962096479', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'fae92d93e9c16c4b48116da9aa6b3e827d0f830a', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '4d20d2db6ce72e82f86fa140ebd2ad3b6bbf4bd6', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '40102559fa7864a7545466cf1abc40131b5ace6c', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '42eb950e72357bba1a1fe2dacfa982412c9d64db', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }