@ionic/core 8.0.0-dev.11709245047.1565a499 → 8.0.0-dev.11711035263.183d2423

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

@@ -66,11 +66,6 @@
   box-sizing: border-box;
 }
 
-:host-context(.item-legacy) {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
@@ -281,65 +276,6 @@
   transform: translateY(50%) scale(0.75);
 }
 
-/**
- * When translating the label inside of an ion-item with `fill="outline"`,
- * add pseudo-elements to imitate fieldset-like padding without shifting the label
- */
-:host-context(.item-fill-outline.ion-focused).label-floating,
-:host-context(.item-fill-outline.item-has-focus).label-floating,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
-:host-context(.item-fill-outline.item-has-value).label-floating {
-  transform: translateY(-6px) scale(0.75);
-  position: relative;
-  max-width: min-content;
-  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
-  overflow: visible;
-  z-index: 3;
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::before, :host-context(.item-fill-outline.ion-focused).label-floating::after,
-:host-context(.item-fill-outline.item-has-focus).label-floating::before,
-:host-context(.item-fill-outline.item-has-focus).label-floating::after,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
-:host-context(.item-fill-outline.item-has-value).label-floating::before,
-:host-context(.item-fill-outline.item-has-value).label-floating::after {
-  position: absolute;
-  width: 4px;
-  height: 100%;
-  background-color: var(--ion-item-background, var(--ion-background-color, #fff));
-  content: "";
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::before,
-:host-context(.item-fill-outline.item-has-focus).label-floating::before,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
-:host-context(.item-fill-outline.item-has-value).label-floating::before {
-  /* stylelint-disable property-disallowed-list */
-  left: calc(-1 * 4px);
-  /* stylelint-enable property-disallowed-list */
-}
-:host-context(.item-fill-outline.ion-focused).label-floating::after,
-:host-context(.item-fill-outline.item-has-focus).label-floating::after,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
-:host-context(.item-fill-outline.item-has-value).label-floating::after {
-  /* stylelint-disable property-disallowed-list */
-  right: calc(-1 * 4px);
-  /* stylelint-enable property-disallowed-list */
-}
-
-:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
-:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
-  transform: translateX(-32px) translateY(-6px) scale(0.75);
-}
-
-:host-context(.item-fill-outline.ion-focused.item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
-:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
-  transform: translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75);
-}
-
 :host-context(.ion-focused).label-stacked:not(.ion-color),
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
@@ -354,17 +290,6 @@
   color: var(--ion-color-contrast);
 }
 
-:host-context(.item-fill-solid.ion-focused.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-solid.ion-focused.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-outline.ion-focused.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-outline.ion-focused.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-solid.item-has-focus.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-solid.item-has-focus.ion-color).label-floating:not(.ion-color),
-:host-context(.item-fill-outline.item-has-focus.ion-color).label-stacked:not(.ion-color),
-:host-context(.item-fill-outline.item-has-focus.ion-color).label-floating:not(.ion-color) {
-  color: var(--ion-color-base);
-}
-
 :host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color),
 :host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) {
   color: var(--highlight-color-invalid);

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

@@ -65,7 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('label: a11y for ion-color()'), () => {
         test('should not have accessibility violations when focused', async ({ page }) => {
             /**

package/dist/collection/components/list-header/list-header.js

@@ -15,10 +15,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '7b0de2d26ec09f11740ad55bba5e4d2f52623b58', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8788351ca44861f264661da2412d6ce7906126bd', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '86cbae45e24ce7607b011cd3cd1ae82e741a111c', class: "list-header-inner" }, h("slot", { key: 'a276c0540cd1bdd907b01620d5bfb9c996c08b90' }))));
+            }) }, h("div", { key: '8801cb2fdddb2dab0c649aef1ffbac8f0ba9fbe0', class: "list-header-inner" }, h("slot", { key: '7fc87318333b7ee0c3eee91abc64a9275ad43a26' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -158,9 +158,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '0b32f7915df1327934877cc71228aea71205266f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '255c2d52a0788769ca8ac027eababc903f525d0e', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'ca6c4c48b83457685a17c7a396e67cd7a6b06ab9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'd76304807d988c02de44fc947124a15179ba2c6c', tabindex: "0" }), h("div", { key: '79ec338787a709a668c8f170d75a271bad3c2488', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'a8e3e70c79e1b359f821c6769b1f4b4bf90da992', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd3a70d4e67a6578b01a82f97cb54f79342e7fd62', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '9641470dc2f759e674cd176662c12161bf22e078', tabindex: "0" }), h("div", { key: 'a1b986633eff28e8da49eec08dfb27acab63a88e', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'ab8a43e8d71756be287f92961ebdc0bbe2d1882b', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/menu/menu.js

@@ -3,8 +3,9 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
+import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-trap";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
@@ -15,7 +16,6 @@ const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
 const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
 const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])';
 /**
  * @part container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
@@ -253,27 +253,6 @@ export class Menu {
     setOpen(shouldOpen, animated = true) {
         return menuController._setOpen(this, shouldOpen, animated);
     }
-    focusFirstDescendant() {
-        const { el } = this;
-        const firstInput = el.querySelector(focusableQueryString);
-        if (firstInput) {
-            firstInput.focus();
-        }
-        else {
-            el.focus();
-        }
-    }
-    focusLastDescendant() {
-        const { el } = this;
-        const inputs = Array.from(el.querySelectorAll(focusableQueryString));
-        const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-        if (lastInput) {
-            lastInput.focus();
-        }
-        else {
-            el.focus();
-        }
-    }
     trapKeyboardFocus(ev, doc) {
         const target = ev.target;
         if (!target) {
@@ -291,13 +270,14 @@ export class Menu {
              * Otherwise, we are about to have focus go out of the menu.
              * Wrap the focus to either the first or last element.
              */
+            const { el } = this;
             /**
              * Once we call `focusFirstDescendant`, another focus event
              * will fire, which will cause `lastFocus` to be updated
              * before we can run the code after that. We cache the value
              * here to avoid that.
              */
-            this.focusFirstDescendant();
+            focusFirstDescendant(el);
             /**
              * If the cached last focused element is the same as the now-
              * active element, that means the user was on the first element
@@ -305,7 +285,7 @@ export class Menu {
              * last descendant.
              */
             if (this.lastFocus === doc.activeElement) {
-                this.focusLastDescendant();
+                focusLastDescendant(el);
             }
         }
     }
@@ -606,14 +586,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'c47b00136d61d7d705efadd4d2d06b87b18747a3', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: 'f5f151ca5bf4963c0300656327bb9c38bc7869fb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '829d5332be865b5aab6435e6a7c8872c7fb89b52', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '5b47ee5da8238ec15d7371606cfbc3d384588ebb' })), h("ion-backdrop", { key: '58bc53f971865fd1615f267cd0259584b3045486', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '39ddd64f884cc667e45f99a2922077d87f209205', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '1ccce2c24ec0dfc81a34580c8be60c69c68d2d2d' })), h("ion-backdrop", { key: 'cf2bdf7f4171a4ada3cb55dd15f6b921b626a347', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -669,9 +649,15 @@ export class Menu {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "MenuType",
+                    "resolved": "\"overlay\" | \"push\" | \"reveal\" | undefined",
+                    "references": {
+                        "MenuType": {
+                            "location": "import",
+                            "path": "./menu-interface",
+                            "id": "src/components/menu/menu-interface.ts::MenuType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/menu-button/menu-button.js

@@ -46,7 +46,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '3cdbc04925c8c62ac65763fe83efdfffda0a16fa', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '1588897aeaefa91e13ed15927f2eeaebc01e8f18', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -55,7 +55,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '63db22c49359bf77fa344f5a13b733570ff088a4' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '011af3fa930dd888f7f4aca24ba294d23b2ceba7', class: "button-inner" }, h("slot", { key: 'dc75fd2f1f3d42eb30aefd9cd3ef137d6c8a515a' }, h("ion-icon", { key: '55cfdc7df1eab0bdc386e2a5c90be87be56a000a', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'cb4e5b3d2095e15a53fa24ac65209162ec635476' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '1c2f499b40e8b9b18e3cb0ed28bbcca01e6d777f', class: "button-inner" }, h("slot", { key: 'df2f969098b5779f54c2d51b4816c7b78b45c860' }, h("ion-icon", { key: 'd093d7377c7f1a5a47b3cc319b36e5087421cf4c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Only ios mode uses ion-color() for the menu button
  */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('menu-button: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -26,10 +26,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: 'fa7f54b6264dd2110f4cda34aaa6ea7ec4f5040f', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '63bcdda9e9917133893d92284b9a91dfe38596a9', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
+            } }, h("slot", { key: 'a3ecc57b11c04b2f9911e5703ea0c6f66515b2f2' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -131,9 +131,41 @@ export class Modal {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        const { breakpoints, initialBreakpoint, el } = this;
+        const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
-        this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
+        const attributesToInherit = ['aria-label', 'role'];
+        this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        /**
+         * When using a controller modal you can set attributes
+         * using the htmlAttributes property. Since the above attributes
+         * need to be inherited inside of the modal, we need to look
+         * and see if these attributes are being set via htmlAttributes.
+         *
+         * We could alternatively move this to componentDidLoad to simplify the work
+         * here, but we'd then need to make inheritedAttributes a State variable,
+         * thus causing another render to always happen after the first render.
+         */
+        if (htmlAttributes !== undefined) {
+            attributesToInherit.forEach((attribute) => {
+                const attributeValue = htmlAttributes[attribute];
+                if (attributeValue) {
+                    /**
+                     * If an attribute we need to inherit was
+                     * set using htmlAttributes then add it to
+                     * inheritedAttributes and remove it from htmlAttributes.
+                     * This ensures the attribute is inherited and not
+                     * set on the host.
+                     *
+                     * In this case, if an inherited attribute is set
+                     * on the host element and using htmlAttributes then
+                     * htmlAttributes wins, but that's not a pattern that we recommend.
+                     * The only time you'd need htmlAttributes is when using modalController.
+                     */
+                    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attribute]: htmlAttributes[attribute] });
+                    delete htmlAttributes[attribute];
+                }
+            });
+        }
         if (isSheetModal) {
             this.currentBreakpoint = this.initialBreakpoint;
         }
@@ -530,9 +562,9 @@ export class Modal {
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'da1f96dae9c305c473dd3813d241b3cd5c3e8cea', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '18053756559601f785776196d9dd269f8250c813', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'a95b63273f1bf68e79d5aa23dc78ccf67449129e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: 'e425881c2027374cff0eb0583cdb3e66a8d3be7d',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'c080204fb09a67046d1986db28ccb7a1c8f0704d', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: '1988ad86ef92108ad4c980ee6d98f280e368dee4',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -541,7 +573,7 @@ export class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '24c18af1e34b72a0dc05b80b6fc58017ab695acf' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '321e79f29eba3faab323d17ae575300e25fc0c51' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/test/modal-attributes.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../modal";
+it('should inherit attributes', async () => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    const page = await newSpecPage({
+        components: [Modal],
+        template: () => h("ion-modal", { overlayIndex: 1, "aria-label": "my label", role: "presentation" }),
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const contentWrapper = modal.shadowRoot.querySelector('[part="content"]');
+    expect(contentWrapper.getAttribute('aria-label')).toBe('my label');
+    expect(contentWrapper.getAttribute('role')).toBe('presentation');
+});
+it('should inherit attributes when set via htmlAttributes', async () => {
+    const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, htmlAttributes: { 'aria-label': 'my label', role: 'presentation' } })),
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const contentWrapper = modal.shadowRoot.querySelector('[part="content"]');
+    expect(contentWrapper.getAttribute('aria-label')).toBe('my label');
+    expect(contentWrapper.getAttribute('role')).toBe('presentation');
+    expect(modal.hasAttribute('aria-label')).toBe(false);
+    expect(modal.hasAttribute('role')).toBe(false);
+});

package/dist/collection/components/nav/nav.js

@@ -830,7 +830,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'a86e551f86509bd65200393785e4000dbb37154a' });
+        return h("slot", { key: '2cb1a430d8d29b0f54b1ec80f98e4b82b6c8cc0a' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-link/nav-link.js

@@ -14,7 +14,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: '7b6b746a0e945a48b308eec2dcd9893daf00bca1', onClick: this.onClick });
+        return h(Host, { key: 'e4aebea5eb131852acea407afb84597df71be4a4', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.js

@@ -13,9 +13,9 @@ export class Note {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '83fbede35bbb772419d68f6ad398aab0e00b9f61', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4064be8c5aceec02a25b8933338596b1720e19d9', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'c4060ce2439e96a5ac8763843579b7956a90032f' })));
+            }) }, h("slot", { key: '9b4265b01387096a8a6aba34a1d8217733bb6f1f' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

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

@@ -474,7 +474,7 @@ export class Picker {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '56b1421dee69c5aa7521b70199f047f4033c0a94', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6956b6ee5debbad88e90d8b307833a4c112cabfb', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '16c8d2d72dcbd64e2b2fb77200ead6a2107d24a6', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'f7f4c77bde934813a18f221308277580c45715e3', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -489,7 +489,7 @@ export class Picker {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: 'b6acaac9ed883ab1db90a09f7ef3c15feb8fa38b', class: "picker-before" }), h("div", { key: '76a49ca1b135f5fdd31a6230053af1f58d0d7dd1', class: "picker-after" }), h("div", { key: '1e265527d12ffd6dc005133ac7fcfc2a1e02c7c3', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '828077cb8f6a8061d3509aca018d7b06d3e98130' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '0eead52707acfa004c83fe0acfd4f9162b19f09b', class: "picker-before" }), h("div", { key: '5b4b531e3ed4fd35f1380156cf5332a455433a19', class: "picker-after" }), h("div", { key: '2b478202ac99703e4f72b30906915c7058ca9b9f', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '4a93ca36194ea1d2cec8bef8a0f402c14ee74576' })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -267,8 +267,19 @@ export class PickerColumn {
      * height of 0px.
      */
     componentWillLoad() {
+        /**
+         * We cache parentEl in a local variable
+         * so we don't need to keep accessing
+         * the class variable (which comes with
+         * a small performance hit)
+         */
+        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -294,8 +305,16 @@ export class PickerColumn {
                 }
             }
         };
-        new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
+        /**
+         * Set the root to be the parent picker element
+         * This causes the IO callback
+         * to be fired in WebKit as soon as the element
+         * is visible. If we used the default root value
+         * then WebKit would only fire the IO callback
+         * after any animations (such as a modal transition)
+         * finished, and there would potentially be a flicker.
+         */
+        new IntersectionObserver(visibleCallback, { threshold: 0.001, root: this.parentEl }).observe(this.el);
         if (parentEl !== null) {
             // TODO(FW-2832): type
             parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
@@ -364,14 +383,14 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '22dcc8dc9bc8c6035cba9f8825f231797464c652', class: createColorClasses(color, {
+        return (h(Host, { key: '20de89f624d0fdbb4eadf912a6a8a8c1f3c374bc', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'e93c2d8ea862e2d84ae9338ad2cbec0eea2230f8', name: "prefix" }), h("div", { key: 'a981c29b3cd9456b7f2523d1daa4d1797d389f03', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, h("slot", { key: '39bd2171785e21aef935787d8222949a2d29a771', name: "prefix" }), h("div", { key: '97217b758b65913db869f322b8f127f0da3a1c28', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: 'd80da940ecb2d8cea236ef9c74da1871a7ab6248', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2b05ef9d4116ca7940c3b61454517c02ee40bf9e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a557a7fb595d3bec5e0bd76b10f73cdc93b17bff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '4934b827a0b11dfcb2cb9a49740076609ab86f59' }), h("div", { key: 'f89592da27eb54e88e9a977aa4ecd9dc4d8e211d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '87c0cf79ce3b88c2328256ee6895612327653009', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '24e96271c3e7468cc3cc5a6f3e384740c4fd9988', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '2ed210e571787a88c06d7538cb7082875e85fb28', name: "suffix" })));
+            } }, h("div", { key: '8cfd8f5de1c274f7b2b5b14c7f6f875d475edc5c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cfbf7e8abe54c4df98addb9a24e82dd803ba95c0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8049923186d8b5ce28da2ce90ad720c244395f9c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '180efa3b7874e2b4269fb150794eaeab9f648f2e' }), h("div", { key: '9161cc3e344b92354276981813e1d55ef9979dea', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ce703fb3ea07d5ea2abf526d64ca85d2beed15f1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6ce6cb5de80ac316a664e9cfcecf1897c8f90e58', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'ecccfa6bd8f6d2d641109e74d0788081e3f29801', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,10 +76,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses(color, {
+        return (h(Host, { key: '9333d9ac8e9990fc840f31e00391177d9cd563b3', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
+            }) }, h("button", { key: '6ca92bc584587230135982106eab542589fc4c9d', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'd9a68906017f77143a0691b9bbc59ae2142da6aa' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -182,11 +182,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '91d3d127c46d125a2a86222e3002d804ebd8bc84', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '63140c43f7a2e3000076adec0406197cb569f985', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '3e86ec5e61adf40983a1d33ef24f66f4f75307e8', tabindex: "0" }), h("div", { key: '3c3844f369da33e35c9a498d88d1b7e4d686b8ce', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'e03200231976723409505b0c4070e7f596815e50', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'd59de79e8c364376bc16d2edae3672b21443f3fe', class: "picker-columns" }, h("div", { key: 'e79cb88c5397047bc8c7e71efb4f1a338773e744', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '776de64da09485ad1dbf78d4d402e297b94348a6', class: "picker-below-highlight" }))), h("div", { key: 'f0aa77e3b467c3fb4950389d27c13769dc913b14', tabindex: "0" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '90b9d07917c0643cf8a622f090abefcd2846ac96', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '4adca834de9295a18bdb355ebbfa49813f0f93f8', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/popover/popover.js

@@ -2,11 +2,12 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { focusFirstDescendant } from "../../utils/focus-trap";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -269,7 +270,7 @@ export class Popover {
          * descendant inside of the popover.
          */
         if (this.focusDescendantOnPresent) {
-            focusFirstDescendant(this.el, this.el);
+            focusFirstDescendant(el);
         }
         unlock();
     }
@@ -335,9 +336,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '71557e45cb839792d51f44786a3e8c1f92fd070c', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8e3ff2681dbd4d2a659633ba2d5419abb2646858', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '6b829c9938f208c55fe2ac749875e7acc3b95b93', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '29f3706a787a4eae20b12c9589272f0b8026d0b2', class: "popover-content", part: "content" }, h("slot", { key: '51c20057566904cbfe4cc5e199180bd144b65ca6' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '9bdb7b263b7ecaee62fd091dbc55ea3b8cf02b45', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '03bf042a104e8d019bd815ce0cc63a1b503cd644', class: "popover-content", part: "content" }, h("slot", { key: 'dd9e35e0af13da7b98d094cc1d5b1161afaf267b' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -28,7 +28,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '63b306c91da12d1fa18d6f6c4726871ef727c9f3', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,