voyager-ionic-core 8.0.0 → 8.1.0

package/components/ion-input.js

@@ -87,6 +87,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         this.autocorrect = 'off';
         this.autofocus = false;
         this.clearInput = false;
+        this.clearInputIcon = undefined;
         this.clearOnEdit = undefined;
         this.counter = false;
         this.counterFormatter = undefined;
@@ -175,6 +176,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -376,11 +378,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         return this.renderLabel();
     }
     render() {
-        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
+        const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -401,7 +405,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
+        return (h(Host, { key: '907ce98a82b5cfae5a08504cd79e00a2330b7444', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -412,14 +416,22 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '59d5bb45d2a5b828bba0ed8687a632a551e2f4d8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'f93f129d08246d0e9a601c100d718534d6403853', class: "native-wrapper" }, h("slot", { key: '54eeb1a6bace662b7eb0d7e27180ea3d7e3a3729', name: "start" }), h("input", Object.assign({ key: 'b3e0be55bc1a4a539ae3b0fdcf7fc078723cca16', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '5f6373504a6d0d074bfbf875c794d45ea2748175', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
+            }, onFocusin: (ev) => {
+                /**
+                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
+                 * event listener in scroll assist to fire. When this fires, focus will be moved
+                 * back to the input even if the clear button was never tapped. This poses issues
+                 * for screen readers as it means users would be unable to swipe past the clear button.
+                 */
+                ev.stopPropagation();
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '230d77973aa83458ceb32bf52e3abe9bc322cfe6', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9d69ac6e8a3c4b2b303dba2478f82695d5755ed2', name: "end" })), shouldRenderHighlight && h("div", { key: 'ac61f16237ce731e0745ab72d0fc3f066252464a', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -438,6 +450,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         "autocorrect": [1],
         "autofocus": [4],
         "clearInput": [4, "clear-input"],
+        "clearInputIcon": [1, "clear-input-icon"],
         "clearOnEdit": [4, "clear-on-edit"],
         "counter": [4],
         "counterFormatter": [16],

package/components/ion-item-divider.js

@@ -21,11 +21,11 @@ const ItemDivider = /*@__PURE__*/ proxyCustomElement(class ItemDivider extends H
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses(this.color, {
+        return (h(Host, { key: '60fda1dab7dbc0038ec7ff68a661896430f7d5c5', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), h("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, h("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, h("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), h("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
+            }) }, h("slot", { key: '6ce072dfc2adfa699a2c34ffe25ed221c74d9eea', name: "start" }), h("div", { key: '9a441be204ee2f0b567432722407c75e3cbbe942', class: "item-divider-inner" }, h("div", { key: 'fd6f2969b345dba51400a290473e594d2d019dc5', class: "item-divider-wrapper" }, h("slot", { key: 'ebf5601b21c4cf199c01bf142865b8da0c1ba4a6' })), h("slot", { key: '249af8f30113f2c986976d518126661f65531121', name: "end" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-item-group.js

@@ -17,7 +17,7 @@ const ItemGroup = /*@__PURE__*/ proxyCustomElement(class ItemGroup extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
+        return (h(Host, { key: '24ff047b7c45f963f0dad072c65d38a230c2bc97', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

package/components/ion-item-option.js

@@ -43,12 +43,12 @@ const ItemOption = /*@__PURE__*/ proxyCustomElement(class ItemOption extends HTM
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1900e015f593fefd710478a2088e052399c957eb', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, h("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), h("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, h("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), h("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), h("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), h("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), h("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, h(TagType, Object.assign({ key: '5db2bb9bc72b7b00c324e4189cd1b5f862680ebb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '6927e812ad001c5e7bd17f440d82c3830c58957b', class: "button-inner" }, h("slot", { key: '0fde4333def94c55d1318868c2bc71e780d5876a', name: "top" }), h("div", { key: '7ecc9ae8ddf66d7ed5d9f30becc9faf820e1c62e', class: "horizontal-wrapper" }, h("slot", { key: 'a15567fd4bd91080e9fbb6bb0c9b0e67d8a67051', name: "start" }), h("slot", { key: '7f86cdd28063e23f9d78997623333c5037c4f364', name: "icon-only" }), h("slot", { key: '4abb69ce3ad6c4917dd87b7b1eb0fa1c69917d73' }), h("slot", { key: '8b35a29f48722040465f182679ac17209937578d', name: "end" })), h("slot", { key: 'fa15a00891b41d66a4ccb51575dec54b72d0059e', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: '0c071910c90fafca8026f59d78f4d9d5224d150a' }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-item-options.js

@@ -27,7 +27,7 @@ const ItemOptions = /*@__PURE__*/ proxyCustomElement(class ItemOptions extends H
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
+        return (h(Host, { key: 'e28cd6a236323b5cc203c9b96782aa81024da924', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

package/components/ion-item-sliding.js

@@ -393,7 +393,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
+        return (h(Host, { key: '99f87c8bd794ae69830b407ba55013ac44793c26', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/components/ion-loading.js

@@ -256,9 +256,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'f48fc35c38f3c200f39a44f3e741c1676057248e', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', 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: 'e46058f693235c8ce5474df167595f6a80e4559d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '2ecd77581a2f130616033b8a78fb9da9d508b588', tabindex: "0" }), h("div", { key: '0243f93c41684f30c81623a8fbb533fd8f17b679', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '0643bc42b6e691580d29af27ea5a9fe395a6c5ce', class: "loading-spinner" }, h("ion-spinner", { key: 'f0417802dfbcad6ab9903b84bad692eedd326c88', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '3d3a256fe1074bda91cd09212460aa6460c4c723', 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: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), h("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, h("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-menu-button.js

@@ -51,7 +51,7 @@ const MenuButton = /*@__PURE__*/ proxyCustomElement(class MenuButton extends HTM
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', 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,
@@ -60,7 +60,7 @@ const MenuButton = /*@__PURE__*/ proxyCustomElement(class MenuButton extends HTM
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, h("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, h("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, h("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, h("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-menu-toggle.js

@@ -30,10 +30,10 @@ const MenuToggle = /*@__PURE__*/ proxyCustomElement(class MenuToggle extends HTM
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '7c27ea5b0795676bf5cb33e1f83aa142c197f64e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '69f187becedc0fe34603d41d279f043cf0fdf776' })));
+            } }, h("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
     }
     static get style() { return IonMenuToggleStyle0; }
 }, [1, "ion-menu-toggle", {

package/components/ion-menu.js

@@ -596,14 +596,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '68ea0bdf902c1f6369db93d69cacc0f30e1df32b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '30c0c9bfb8973e4a6feb658f8c4ee8e362f464ed', 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: '7f32097faa4dcf64a568c7cf4b8397bbffc9f7a4', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3d4fbc9142297708aa1b31eed875afe6ea79de04' })), h("ion-backdrop", { key: 'f29f4615913da302212d54a43dce94ca5bfa86a5', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '34b0e5840906862cf1bc27207e089004b0402c56', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2cd7e61a8c0987ca4b3f1f8b33cba7152f1275fe' })), h("ion-backdrop", { key: 'd190b1f9b66c76e276f27bfe074d3aab796180fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-modal.js

@@ -8,7 +8,7 @@ import { g as getElementRoot, k as clamp, r as raf, d as inheritAttributes, j as
 import { c as createLockController } from './lock-controller.js';
 import { p as printIonWarning } from './index6.js';
 import { g as getCapacitor } from './capacitor.js';
-import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays.js';
+import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { e as deepReady, w as waitForMount } from './index2.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
@@ -812,7 +812,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * as inputs should not be focusable outside
          * the sheet.
          */
-        baseEl.classList.remove('ion-disable-focus-trap');
+        baseEl.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
     };
     const disableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'none');
@@ -824,7 +824,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * Adding this class disables focus trapping
          * for the sheet temporarily.
          */
-        baseEl.classList.add('ion-disable-focus-trap');
+        baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
      * After the entering animation completes,
@@ -1191,6 +1191,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.isOpen = false;
         this.trigger = undefined;
         this.keepContentsMounted = false;
+        this.focusTrap = true;
         this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
@@ -1647,23 +1648,23 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'bb00efb8cbbdb2d1bbcc5e9c638586e2904882a8', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "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: 'd2d50f736fdc34b933c00309fe0b67e4aff7ee63', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '5d3523a04da9350ae435a4f3247198095b71f206', class: "modal-shadow" }), h("div", Object.assign({ key: '09b3c4b629155f8c32f5c896cf689ffbe7004de8',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), h("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'e47d90068927f3a518e4144e17f18ac326126712', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', 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: '5733e94b3ecc4ed9bfb6aec5cd254cd0e43ee8f7' }))));
+            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: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1697,6 +1698,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         "isOpen": [4, "is-open"],
         "trigger": [1],
         "keepContentsMounted": [4, "keep-contents-mounted"],
+        "focusTrap": [4, "focus-trap"],
         "canDismiss": [4, "can-dismiss"],
         "presented": [32],
         "present": [64],

package/components/ion-nav-link.js

@@ -36,7 +36,7 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
+        return h(Host, { key: '42c23dcdec5fdb25defebaf6e8a9fa75754ff8eb', onClick: this.onClick });
     }
     get el() { return this; }
 }, [0, "ion-nav-link", {

package/components/ion-nav.js

@@ -905,7 +905,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         }
     }
     render() {
-        return h("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
+        return h("slot", { key: 'e9d99a8a0b84f02f9964d8143cd5e647e43334f9' });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-note.js

@@ -20,9 +20,9 @@ const Note = /*@__PURE__*/ proxyCustomElement(class Note extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses(this.color, {
+        return (h(Host, { key: '90ec2fe8c9487608ed8c0bdc32c2e80a6a0890b3', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
+            }) }, h("slot", { key: '115ee3f79e6c526b0644443aad468e99385d0eda' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,

package/components/ion-picker-legacy.js

@@ -240,11 +240,11 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: 'cb1495acc8842c00e9f51ae792a01f769e36b0c6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "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: 'eecbcdfd474f5ab2f9962a030b1dcbf7714fe938', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '262e1d3bc916b30068f7be1edbc73283a815fc0f', tabindex: "0" }), h("div", { key: 'a036cf789ab768428aae26a19dbd0c5cb696188c', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '6be7a8986976ead39611ce398ed6ad71f3b7427e', 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: '66a1d99aebf48219cab4177d06d893fe1d458a1f', class: "picker-columns" }, h("div", { key: 'ed7fd940c5f54453587e13ab52cbfd4122a397c6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '21c491c08bce126dde03196b21e28d903e157e1f', class: "picker-below-highlight" }))), h("div", { key: 'bd892f74b886ae1bfd010d687a2b9741213b246c', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), h("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', 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: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, h("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), h("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-progress-bar.js

@@ -29,7 +29,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'b293f4475bcdaa7851b41ebfda659037f0365120', 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,

package/components/ion-range.js

@@ -602,7 +602,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'cd70b5db9eae808a644643d7095a1b5264cbc5fe', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7ad5ca892fd46c64ce5583e91e6812410a869921', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -611,10 +611,10 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '78ef0523f0064d6b268ae17ef72f90094511d897', class: "range-wrapper", id: "range-label" }, h("div", { key: '6e4b2051e770dabe80dcb9f412e9aae1859e9f33', class: {
+            }) }, h("label", { key: 'eb8d46a9572341b4cc3c91d8a5de0667bd166ca4', class: "range-wrapper", id: "range-label" }, h("div", { key: '21acd6ff6eba17bf6923bf723fea055b95fd29ca', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '72cdb8f6657a3b84f759743cedd600020c954c6a', class: "native-wrapper" }, h("slot", { key: 'f7a38d6bd63df5dc8b4470f1f4acaaf3e5c80514', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'ae74ac8c1da691e3be1b2f00dfd3c8419b9566ec', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '7644c86a6ad3edf2c27f02dd2a14795b3720ea0d', class: "native-wrapper" }, h("slot", { key: '1bbeccee57addc126b36de395e28ba655248695b', name: "start" }), this.renderRangeSlider(), h("slot", { key: '2963dd84e4116fc3956c304eb53deefd0d1291df', name: "end" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-refresher-content.js

@@ -54,7 +54,7 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, h("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, h("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, h("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, h("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, h("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, h("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return this; }
 }, [0, "ion-refresher-content", {

package/components/ion-refresher.js

@@ -603,7 +603,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e7f4f2f96de7e80430bf54967ebc12e7216b2ca9', slot: "fixed", class: {
+        return (h(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/components/ion-reorder-group.js

@@ -245,7 +245,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
+        return (h(Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/components/ion-reorder.js

@@ -30,7 +30,7 @@ const Reorder = /*@__PURE__*/ proxyCustomElement(class Reorder extends HTMLEleme
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, h("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, h("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, h("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, h("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-router-link.js

@@ -30,10 +30,10 @@ const RouterLink = /*@__PURE__*/ proxyCustomElement(class RouterLink extends HTM
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), h("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, h("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), h("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
 }, [1, "ion-router-link", {

package/components/ion-router-outlet.js

@@ -187,7 +187,7 @@ const RouterOutlet = /*@__PURE__*/ proxyCustomElement(class RouterOutlet extends
         return true;
     }
     render() {
-        return h("slot", { key: '44a7798b8574966f7fd699564b6006411a98a805' });
+        return h("slot", { key: 'dac9120f5ffa628b16c04e5fdd44ea8e560c97e6' });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-row.js

@@ -14,7 +14,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode(this) }, h("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        return (h(Host, { key: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode(this) }, h("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
     }
     static get style() { return IonRowStyle0; }
 }, [1, "ion-row"]);

package/components/ion-searchbar.js

@@ -391,8 +391,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '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" }, h("div", { key: 'e42fe29767fb06a5e4f9060c3f8a47b040528e4f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'da667148dc3300f4a8473315d04e6560194f51dc', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '8f3323145edfde317f2762e470f3ab2e27452b69', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'a3ae5d8a6fe3a96b5aa7142f7a246876fdbe3ef3', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '543593e248261418ea75580e5fbed1c613e57d00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -402,14 +402,14 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'b1a28467d41dd989e6aee10c7c9fb70a7c1534f1', class: "searchbar-input-container" }, 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, h("ion-icon", { key: 'b6576522762a83a7d9977f312dce433c2aaa2490', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'c460a3be7ffed2ddf4b08f64ea4ec6843586a726', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '01351daea61933fedd1bd6289376183962096479', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'fae92d93e9c16c4b48116da9aa6b3e827d0f830a', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '4d20d2db6ce72e82f86fa140ebd2ad3b6bbf4bd6', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '40102559fa7864a7545466cf1abc40131b5ace6c', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, 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) }, h("ion-icon", { key: '42eb950e72357bba1a1fe2dacfa982412c9d64db', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-segment-button.js

@@ -82,7 +82,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (h(Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -98,10 +98,10 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, 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), h("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
+            } }, 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), h("span", { key: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-segment.js

@@ -428,14 +428,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '22bd7bbecaa9f0c95971565e06ef3fa4ad44a946', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7b0aeabf078ca075d0ea1d5e92d84b9e7f1cefef', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '6d6fe81026928662137b872206de55117fda30a2' })));
+            }) }, h("slot", { key: 'ddecf3510bbc3cd37b2bbd7818b19f9919c767b5' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-select-option.js

@@ -17,7 +17,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }

package/components/ion-select.js

@@ -592,7 +592,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '5a1b82be3f737a2ce5b87c5cd716f898a902ab10', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -608,7 +608,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '79a6e99e38fa3f72d876f4b8ac0077a9fbf4bd2d', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'e18ac0b4a35e2cdde858347a9b116218533cd532', class: "select-wrapper-inner" }, h("slot", { key: 'cc194f718ef9363d3496531f0d9259e33b66f4d8', name: "start" }), h("div", { key: '833c5544e453c0ac543f5d4898d0f492caac405a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'adaa4064c9ad01ef7a452308680eb09dc3ad60ff', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'd47a6ef0a6192c5f098973aa517aad2aa9ae8dfc', class: "select-highlight" }))));
+            }) }, h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
     }
     get el() { return this; }
     static get watchers() { return {