@ionic/core 8.0.1-dev.11713911458.1ad5f4cf → 8.0.1-dev.11714492860.17c00351

package/dist/cjs/ion-picker-column.cjs.entry.js

@@ -13,7 +13,7 @@ const ionicGlobal = require('./ionic-global-62487d02.js');
 const theme = require('./theme-d1c573d2.js');
 require('./capacitor-c04564bf.js');
 
-const pickerColumnCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+const pickerColumnCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
 const IonPickerColumnStyle0 = pickerColumnCss;
 
 const PickerColumn = class {
@@ -23,6 +23,7 @@ const PickerColumn = class {
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -37,6 +38,7 @@ const PickerColumn = class {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -109,6 +111,7 @@ const PickerColumn = class {
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 helpers.raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -189,8 +192,23 @@ const PickerColumn = class {
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && haptic.hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -249,12 +267,139 @@ const PickerColumn = class {
              */
             this.el.classList.remove('picker-column-active');
         };
+        /**
+         * Find the next enabled option after the active option.
+         * @param stride - How many options to "jump" over in order to select the next option.
+         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
+         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
+         * the enabled option 5 options after the active one. Note that the actual option selected
+         * may be past the stride if the option at the stride is disabled.
+         */
+        this.findNextOption = (stride = 1) => {
+            const { activeItem } = this;
+            if (!activeItem)
+                return null;
+            let prevNode = activeItem;
+            let node = activeItem.nextElementSibling;
+            while (node != null) {
+                if (stride > 0) {
+                    stride--;
+                }
+                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
+                    return node;
+                }
+                prevNode = node;
+                // Use nextElementSibling instead of nextSibling to avoid text/comment nodes
+                node = node.nextElementSibling;
+            }
+            return prevNode;
+        };
+        /**
+         * Find the next enabled option after the active option.
+         * @param stride - How many options to "jump" over in order to select the next option.
+         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
+         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
+         * the enabled option 5 options before the active one. Note that the actual option selected
+         *  may be past the stride if the option at the stride is disabled.
+         */
+        this.findPreviousOption = (stride = 1) => {
+            const { activeItem } = this;
+            if (!activeItem)
+                return null;
+            let nextNode = activeItem;
+            let node = activeItem.previousElementSibling;
+            while (node != null) {
+                if (stride > 0) {
+                    stride--;
+                }
+                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
+                    return node;
+                }
+                nextNode = node;
+                // Use previousElementSibling instead of previousSibling to avoid text/comment nodes
+                node = node.previousElementSibling;
+            }
+            return nextNode;
+        };
+        this.onKeyDown = (ev) => {
+            /**
+             * The below operations should be inverted when running on a mobile device.
+             * For example, swiping up will dispatch an "ArrowUp" event. On desktop,
+             * this should cause the previous option to be selected. On mobile, swiping
+             * up causes a view to scroll down. As a result, swiping up on mobile should
+             * cause the next option to be selected. The Home/End operations remain
+             * unchanged because those always represent the first/last options, respectively.
+             */
+            const mobile = ionicGlobal.isPlatform('mobile');
+            let newOption = null;
+            switch (ev.key) {
+                case 'ArrowDown':
+                    newOption = mobile ? this.findPreviousOption() : this.findNextOption();
+                    break;
+                case 'ArrowUp':
+                    newOption = mobile ? this.findNextOption() : this.findPreviousOption();
+                    break;
+                case 'PageUp':
+                    newOption = mobile ? this.findNextOption(5) : this.findPreviousOption(5);
+                    break;
+                case 'PageDown':
+                    newOption = mobile ? this.findPreviousOption(5) : this.findNextOption(5);
+                    break;
+                case 'Home':
+                    /**
+                     * There is no guarantee that the first child will be an ion-picker-column-option,
+                     * so we do not use firstElementChild.
+                     */
+                    newOption = this.el.querySelector('ion-picker-column-option:first-of-type');
+                    break;
+                case 'End':
+                    /**
+                     * There is no guarantee that the last child will be an ion-picker-column-option,
+                     * so we do not use lastElementChild.
+                     */
+                    newOption = this.el.querySelector('ion-picker-column-option:last-of-type');
+                    break;
+            }
+            if (newOption !== null) {
+                this.value = newOption.value;
+                // This stops any default browser behavior such as scrolling
+                ev.preventDefault();
+            }
+        };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
+        /**
+         * Render an element that overlays the column. This element is for assistive
+         * tech to allow users to navigate the column up/down. This element should receive
+         * focus as it listens for synthesized keyboard events as required by the
+         * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
+         */
+        this.renderAssistiveFocusable = () => {
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (index.h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
+        };
+        this.ariaLabel = null;
         this.isActive = false;
         this.disabled = false;
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
     }
+    ariaLabelChanged(newValue) {
+        this.ariaLabel = newValue;
+    }
     valueChange() {
         if (this.isColumnVisible) {
             /**
@@ -370,6 +515,10 @@ const PickerColumn = class {
             this.scrollEl.focus();
         }
     }
+    connectedCallback() {
+        var _a;
+        this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
+    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -387,17 +536,18 @@ const PickerColumn = class {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '59648ef23cef1ab6d30955bb95bc23e670ec7256', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '5a6b90bacbfa016d937d1c7ae6c55fd1e19729b5', class: theme.createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, index.h("slot", { key: 'fd93192d4945b2c33e0fe93cc90b505f2cec12fc', name: "prefix" }), index.h("div", { key: '99e49c6d58badd2fe5e75f0ebcd4bc00eb50aa58', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), index.h("slot", { key: '25785dd94823696945830461404d4127ebfbdb82', name: "prefix" }), index.h("div", { key: '94cb28b3a212574400c84f8e086a1c82654549dc', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, index.h("div", { key: 'bb44892ef179b25373e45e4b4bc4d1fa617b1ea1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '9ee7aeb8468bbb03f7192d56849dae089b7a0250', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '0baa4bda4bf02a8d06dbf3392b1516ca8ea8d26a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: 'ff4cad20fd82ab66599473f60d10c18dc1dc76d8' }), index.h("div", { key: '04dcb0390209081e6223b90e45b8f2ef0fdf94bd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '734e3b431a30ce93957e1452516efc86e29ff9c9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '1c68dcf9a029e607bb6bc9c19cd02214914eb6d7', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd85210cc99c8c1bf83eb1cd51540ebe875d4adeb', name: "suffix" })));
+            } }, index.h("div", { key: '19b174ac090d4670323fc2bd8ed8da44bf1ea692', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8c7ce6384e94acfb6154d5850f4dbabbd542edce', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'ea4f5026eff35400698e84f0c88c57ed443d82d0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '627cb80802653c8e047304d71d1b12865df316b0' }), index.h("div", { key: '468a4fdb3ba93bc5df7e99d68b388f8b52d70945', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '88d0030269d256b4217e99e26e9a80af81120164', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'fb312153e4ad2bdcf1646751d78eeb9afd83e79c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: '7fb8379b86f016f70546110e1abf05fb02eb98fb', name: "suffix" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "aria-label": ["ariaLabelChanged"],
         "value": ["valueChange"]
     }; }
 };

package/dist/cjs/ion-picker.cjs.entry.js

@@ -484,7 +484,7 @@ const Picker = class {
         this.emitInputModeChange();
     }
     render() {
-        return (index.h(index.Host, { key: 'f92214a09dc85b65873676f40fde2b802960e704', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: '6da37f75aca4ea1c9cb3bc733ebda2116279f313', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (index.h(index.Host, { key: '02b0687b1f80ba295a965dfba76dd59e2d1de5d3', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: 'f83ed84bcf9e02539c00d8a4e63e6a0d7fc4ac71', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -499,7 +499,7 @@ const Picker = class {
                 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() }), index.h("div", { key: '298e99d83dd3f5bf2798150bab0bb4024af472fa', class: "picker-before" }), index.h("div", { key: 'ea578f04eb562a4dc6d6cc92de133dcb9fb7f42a', class: "picker-after" }), index.h("div", { key: '84567824956dfe967992a629904836ba8b75b3ec', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: 'df81f8fb90e1f649b608328034528f5c31c70c3b' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { key: '45b07fb0617d8e006712776bf78302288edb3ff4', class: "picker-before" }), index.h("div", { key: '73009229368e0d62b09c913aacade26f068a7aa9', class: "picker-after" }), index.h("div", { key: 'b73da00e446cd1cfd511c39212e14a00d355752e', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: 'd969f5efc5ddb9eda6c4828702efd1ceeb69f767' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-popover.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bbc6c29f.js');
-const overlays = require('./overlays-10c452b2.js');
+const overlays = require('./overlays-574e681c.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
@@ -1067,6 +1067,7 @@ const Popover = class {
         this.arrow = true;
         this.isOpen = false;
         this.keyboardEvents = false;
+        this.focusTrap = true;
         this.keepContentsMounted = false;
     }
     onTriggerChange() {
@@ -1293,12 +1294,12 @@ const Popover = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
+        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = ionicGlobal.isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (index.h(index.Host, Object.assign({ key: '4bccccf57df72e1196c6a28e803831c0520aef53', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: '17e5e8b3e7ba5e251665fb9d0ade10c781f82f0e', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.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 && index.h("ion-backdrop", { key: 'e42f4f61150b7b41093d37d187d1b7bb4187a00e', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '386ac3247b0f82566aae07b6dbf5e97d243ce367', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '28f0e5ea2fa099b808ffb77a9a0d78b8b46c1513', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '7ba2e3dee529015c4e07ce78ec10dc59985ec6a2', class: "popover-content", part: "content" }, index.h("slot", { key: '915cdc8e389fda210f83aec8b7bbbfa6f830a884' })))));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: 'c12fb94b375d7e88a0c5d715440c0f66ad7ee817', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '478b388cc9a5a382003a2863e968e77a174914ab', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: 'f1c63a0079f197a8d4577e7c00a654871fb9d816', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '08b62a321c09ad4b0f90460468ecbc1d56320bf1', class: "popover-content", part: "content" }, index.h("slot", { key: '55645ff597f64d434219caa28015cf2a4ceb0ee5' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-progress-bar.cjs.entry.js

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

package/dist/cjs/ion-radio_2.cjs.entry.js

@@ -112,7 +112,7 @@ const Radio = class {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = ionicGlobal.getIonMode(this);
         const inItem = theme.hostContext('ion-item', el);
-        return (index.h(index.Host, { key: 'cb00934d052260e97462e97a1669045cbb0b963a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'e44cade8aa8415bdc825f9d17fc8562487cf5d35', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -123,10 +123,10 @@ const Radio = class {
                 // 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 }, index.h("label", { key: '05613f89400469692442bf3c02c27f9299c5d6ef', class: "radio-wrapper" }, index.h("div", { key: '89b5d7668c3856f417c318629086cf46a072efbe', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: '48a99aa80a7d7b4085ef26faf3167903c975517c', class: "radio-wrapper" }, index.h("div", { key: 'a8d74e0603b41215ea3e867356a9be0dcf3722d8', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, index.h("slot", { key: 'd5e43a8d0fe5a7fc323887d310fd64d6f87deef7' })), index.h("div", { key: '7fd221189adcfccca1ed18dcd0a60cde6261120b', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, index.h("slot", { key: '9e3cce6254e70b02d50381537438a70435b031cc' })), index.h("div", { key: 'bfa3ee188d911e056a3e60178eac41362efb94b3', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -291,7 +291,7 @@ const RadioGroup = class {
         const { label, labelId, el, name, value } = this;
         const mode = ionicGlobal.getIonMode(this);
         helpers.renderHiddenInput(true, el, name, value, false);
-        return index.h(index.Host, { key: 'b6b439d6d53d17a5a4d9853a7cf6065b28213338', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return index.h(index.Host, { key: '7801c5d6b3916efb15b4e479c6b90a8925e254a4', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-range.cjs.entry.js

@@ -604,7 +604,7 @@ const Range = class {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = ionicGlobal.getIonMode(this);
         helpers.renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (index.h(index.Host, { key: 'cd70b5db9eae808a644643d7095a1b5264cbc5fe', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '217323e45c3197c0ff9a5e0b12c1f860f9fe5152', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -613,10 +613,10 @@ const Range = class {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, index.h("label", { key: '78ef0523f0064d6b268ae17ef72f90094511d897', class: "range-wrapper", id: "range-label" }, index.h("div", { key: '6e4b2051e770dabe80dcb9f412e9aae1859e9f33', class: {
+            }) }, index.h("label", { key: '84357e85fc78954b9f598236e802c582dad8f69e', class: "range-wrapper", id: "range-label" }, index.h("div", { key: '85c61c11453e417e27305cddd65d2044b6ffc451', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? index.h("div", { class: "label-text" }, label) : index.h("slot", { name: "label" })), index.h("div", { key: '72cdb8f6657a3b84f759743cedd600020c954c6a', class: "native-wrapper" }, index.h("slot", { key: 'f7a38d6bd63df5dc8b4470f1f4acaaf3e5c80514', name: "start" }), this.renderRangeSlider(), index.h("slot", { key: 'ae74ac8c1da691e3be1b2f00dfd3c8419b9566ec', name: "end" })))));
+            }, part: "label" }, label !== undefined ? index.h("div", { class: "label-text" }, label) : index.h("slot", { name: "label" })), index.h("div", { key: 'f3504d2df23e8b4c7d657f21b8953defddd89e76', class: "native-wrapper" }, index.h("slot", { key: '36e85481fb513462a5e71a3801c3349485e6a1ef', name: "start" }), this.renderRangeSlider(), index.h("slot", { key: 'ed3eae7883e6a55c88b69b678e1de43cee4d1b40', name: "end" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-refresher_2.cjs.entry.js

@@ -800,7 +800,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'e7f4f2f96de7e80430bf54967ebc12e7216b2ca9', slot: "fixed", class: {
+        return (index.h(index.Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -867,7 +867,7 @@ const RefresherContent = class {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && spinnerConfigs.SPINNERS[pullingIcon] !== undefined;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, index.h("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (index.h("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, index.h("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, index.h("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (index.h("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, index.h("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: index$2.caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (index.h("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, index.h("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), index.h("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (index.h("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, index.h("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (index.h(index.Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, index.h("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (index.h("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, index.h("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, index.h("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (index.h("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, index.h("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: index$2.caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (index.h("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, index.h("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), index.h("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (index.h("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, index.h("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-reorder_2.cjs.entry.js

@@ -37,7 +37,7 @@ const Reorder = class {
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const reorderIcon = mode === 'ios' ? index$1.reorderThreeOutline : index$1.reorderTwoSharp;
-        return (index.h(index.Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, index.h("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, index.h("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (index.h(index.Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, index.h("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, index.h("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -283,7 +283,7 @@ const ReorderGroup = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
+        return (index.h(index.Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/cjs/ion-ripple-effect.cjs.entry.js

@@ -68,7 +68,7 @@ const RippleEffect = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
+        return (index.h(index.Host, { key: '2302f087ab1c6755355736e4ca77309c5fdcf185', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/cjs/ion-route_4.cjs.entry.js

@@ -882,10 +882,10 @@ const RouterLink = class {
             rel: this.rel,
             target: this.target,
         };
-        return (index.h(index.Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, index.h("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), index.h("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, index.h("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), index.h("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
     }
 };
 RouterLink.style = IonRouterLinkStyle0;

package/dist/cjs/ion-searchbar.cjs.entry.js

@@ -393,8 +393,8 @@ const Searchbar = class {
         const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '753b11f41484edcb2714aa81be8bc7bc0370cb2e', "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" }, index.h("div", { key: 'e42fe29767fb06a5e4f9060c3f8a47b040528e4f', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (index.h(index.Host, { key: 'da667148dc3300f4a8473315d04e6560194f51dc', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '0309b828f496e449405f4215f6cb10d3ae874f52', "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" }, index.h("div", { key: 'c0563d48fc25cc02ff45f4d708d1bdeb0cf7c7bc', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (index.h(index.Host, { key: '0842b78189eb10329d161294048aa26f380056b3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -404,14 +404,14 @@ const Searchbar = class {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, index.h("div", { key: 'b1a28467d41dd989e6aee10c7c9fb70a7c1534f1', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '4983f67966f79b2846c1369c7feaa0c568bc3025', "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, index.h("ion-icon", { key: 'b6576522762a83a7d9977f312dce433c2aaa2490', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: 'c460a3be7ffed2ddf4b08f64ea4ec6843586a726', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, index.h("div", { key: '250fddf0a88c0608f2f797d671ce0d57e4a0983b', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '8545874203f86312e3a949199ceaeefb9a2cd326', "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, index.h("ion-icon", { key: '3c212122d0c8b1d4e0c38be8e0bd2365232d0f87', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '4450d17927983da489b051639c14f96f1a96d64a', "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) }, index.h("ion-icon", { key: 'e2e5dcdeca46d2588642e7b9f05d396f6e0332a9', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'f9e9060cbe0caf06763327a01d5f03b0a5d87404', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-segment_2.cjs.entry.js

@@ -430,14 +430,14 @@ const Segment = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '22bd7bbecaa9f0c95971565e06ef3fa4ad44a946', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '1f29e1c1f712a65ddce6c8aa1623fee85cb66ed9', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, index.h("slot", { key: '6d6fe81026928662137b872206de55117fda30a2' })));
+            }) }, index.h("slot", { key: '86f5724565043a3d0983a14cc49c37df9a60c6b0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -525,7 +525,7 @@ const SegmentButton = class {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = ionicGlobal.getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (index.h(index.Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (index.h(index.Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
@@ -541,10 +541,10 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, index.h("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, index.h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && index.h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), index.h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
+            } }, index.h("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), index.h("span", { key: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, index.h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && index.h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), index.h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, index.h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, index.h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-bbc6c29f.js');
 const notchController = require('./notch-controller-d69150f5.js');
 const compareWithUtils = require('./compare-with-utils-df1001d7.js');
 const helpers = require('./helpers-afaa9001.js');
-const overlays = require('./overlays-10c452b2.js');
+const overlays = require('./overlays-574e681c.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const watchOptions = require('./watch-options-f5f3e158.js');
@@ -586,7 +586,7 @@ const Select = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (index.h(index.Host, { key: '5a1b82be3f737a2ce5b87c5cd716f898a902ab10', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '38647216725f05c3ea8e2c7b4125d7035e5bef31', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', el),
@@ -602,7 +602,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, index.h("label", { key: '79a6e99e38fa3f72d876f4b8ac0077a9fbf4bd2d', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), index.h("div", { key: 'e18ac0b4a35e2cdde858347a9b116218533cd532', class: "select-wrapper-inner" }, index.h("slot", { key: 'cc194f718ef9363d3496531f0d9259e33b66f4d8', name: "start" }), index.h("div", { key: '833c5544e453c0ac543f5d4898d0f492caac405a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: 'adaa4064c9ad01ef7a452308680eb09dc3ad60ff', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: 'd47a6ef0a6192c5f098973aa517aad2aa9ae8dfc', class: "select-highlight" }))));
+            }) }, index.h("label", { key: '80f465dda111b27548cba11fe734b4916f1da6d7', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), index.h("div", { key: 'b6c22c7f2d42439d89397ffe7182bf0e07225dc1', class: "select-wrapper-inner" }, index.h("slot", { key: '95cf6118d97f974debfe31e17938b6bb9b0bec63', name: "start" }), index.h("div", { key: '647912e4208feaddc581d066007653c910065907', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: '3bbf5e126327ff21fed8f6ad3acd77d0df900c4a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: 'd790350694c310866c5bd3f8da0edc9f8c17ac0d', class: "select-highlight" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -663,7 +663,7 @@ const SelectOption = class {
         this.value = undefined;
     }
     render() {
-        return index.h(index.Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', role: "option", id: this.inputId, class: ionicGlobal.getIonMode(this) });
+        return index.h(index.Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: ionicGlobal.getIonMode(this) });
     }
     get el() { return index.getElement(this); }
 };
@@ -771,7 +771,7 @@ const SelectPopover = class {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (index.h(index.Host, { key: '2ed838c17d47198c697164a0a750aafb6ca61a95', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: '24fe7a6e9e45458c201b178ca236645d0f49ea8a' }, header !== undefined && index.h("ion-list-header", { key: 'ebe64853dcd59c14a8f4dc9c2dc9e66d1e9767f6' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: 'ed7c6f2d7e1282b3048df0af8f1e3fd3b08297c6' }, index.h("ion-label", { key: 'a81f6c4011a0dce47b80c98a45d80b1368d84a1e', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: '4fd72c62da896092d535580917bb8a5ad6609c05' }, subHeader), message !== undefined && index.h("p", { key: '88aead29b35d69743abe4015f96a6fa9f199a0ff' }, message)))), this.renderOptions(options))));
+        return (index.h(index.Host, { key: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && index.h("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, index.h("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && index.h("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-spinner.cjs.entry.js

@@ -47,7 +47,7 @@ const Spinner = class {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (index.h(index.Host, { key: '9422c25aadfdf08861e26bb1aa336c94391d10a3', class: theme.createColorClasses(self.color, {
+        return (index.h(index.Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: theme.createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || ionicGlobal.config.getBoolean('_testing'),

package/dist/cjs/ion-split-pane.cjs.entry.js

@@ -125,12 +125,12 @@ const SplitPane = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'd04ff97717268184725f25b39bb1416b2b423260', class: {
+        return (index.h(index.Host, { key: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, index.h("slot", { key: '4d355509ab6fcdac415184068ffe1241a5078db3' })));
+            } }, index.h("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {