voyager-ionic-core 7.7.3 → 7.8.6

package/components/ion-searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { n as debounceEvent, c as componentOnReady, r as raf } from './helpers.js';
+import { n as debounceEvent, d as inheritAttributes, c as componentOnReady, r as raf } from './helpers.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses } from './theme.js';
 import { b as arrowBackSharp, j as closeCircle, k as closeSharp, s as searchOutline, q as searchSharp } from './index7.js';
@@ -29,6 +29,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -129,6 +130,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = 'default';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -138,6 +140,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.disabled = false;
         this.inputmode = undefined;
         this.enterkeyhint = undefined;
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.name = this.inputId;
         this.placeholder = 'Search';
         this.searchIcon = undefined;
@@ -147,6 +151,21 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.type = 'search';
         this.value = '';
     }
+    /**
+     * lang and dir are globally enumerated attributes.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onLangChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+        forceUpdate(this);
+    }
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        forceUpdate(this);
+    }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
@@ -171,6 +190,9 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -363,14 +385,14 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         return true;
     }
     render() {
-        const { cancelButtonText } = this;
+        const { cancelButtonText, autocapitalize } = this;
         const animated = this.animated && config.getBoolean('animated', true);
         const mode = getIonMode(this);
         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: '1de9b9bc6bad708bafcf4d31fa82838355120486', "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: 'e5178016e17104a80732edbae73c0dfc264bfe52', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '2c88a7b6ec7f33ada7dae560881210d7a8800f76', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9c7b4d2e86d9bcd12e57c9a96723d3da598a3773', "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: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -380,17 +402,19 @@ 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: '8e914264a99453748a2bf370943e4047a0a587fb', class: "searchbar-input-container" }, h("input", { key: 'd772f3e8d42301e50fbd6c9deb332fbdf3c435ac', "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, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { key: '8d9b461c2c34729b1bb562c227868cf817a353bc', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'bcc39be721f4b825af31aae4dfb3058722d889a8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'fb74faf81b347a62338ccdac981525df1c52b322', "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: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '1cece7c63ca5ca4b8799e15ee6d2bac100ef0d5e', "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: '9a6478e1f1482aa6e62c88bd96cd19cacbfb8d60', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return this; }
     static get watchers() { return {
+        "lang": ["onLangChanged"],
+        "dir": ["onDirChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"],
         "showCancelButton": ["showCancelButtonChanged"]
@@ -402,6 +426,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
 }, [34, "ion-searchbar", {
         "color": [513],
         "animated": [4],
+        "autocapitalize": [1],
         "autocomplete": [1],
         "autocorrect": [1],
         "cancelButtonIcon": [1, "cancel-button-icon"],
@@ -411,6 +436,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         "disabled": [4],
         "inputmode": [1],
         "enterkeyhint": [1],
+        "maxlength": [2],
+        "minlength": [2],
         "name": [1],
         "placeholder": [1],
         "searchIcon": [1, "search-icon"],
@@ -424,6 +451,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         "setFocus": [64],
         "getInputElement": [64]
     }, undefined, {
+        "lang": ["onLangChanged"],
+        "dir": ["onDirChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"],
         "showCancelButton": ["showCancelButtonChanged"]

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: 'b50b375ed817b47720b743078202f38c737a4034', class: {
+        return (h(Host, { key: 'daed55711fdb550747d2ad5fb6e012bff6f6b176', 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: '402f6467ec9ce97aa1df2c72382d07242b51c114', "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: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, h("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '851a4b8ff7e45f5fc559c4d8e9c3102441dbd10e', "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: 'b2dc87747e81ce49dfa1269355027d9380226a6a', class: "button-inner" }, h("slot", { key: '00e21fdcafb533605518beebb9557c724fc88e76' })), mode === 'md' && h("ion-ripple-effect", { key: '358c90ab1b43aae3bc6eb1e58fb38d4892894a68' })), h("div", { key: '20fd3f7c43dd117541314e852d894af855050707', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: 'bebdeb84466c404d52ce48feda1ece5fb1f202b0', 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: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '01c94f9fcc51fb5a7612588c87155a130b7c8a9d', 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: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
+            }) }, h("slot", { key: 'b0afdfcb7506a765df42d1d6eb4e1d81bf8fd92a' })));
     }
     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: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'abf6e85d60e815f59077910abec922826bf46eb2', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }

package/components/ion-skeleton-text.js

@@ -32,11 +32,11 @@ const SkeletonText = /*@__PURE__*/ proxyCustomElement(class SkeletonText extends
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
+        return (h(Host, { key: '4dab0fd2de666de12ad8f6dc6ed1e1de0be67ddd', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
+            } }, h("span", { key: 'f8f908ec24d65e63b14d9a54640a5f18f0fa8fa5' }, "\u00A0")));
     }
     get el() { return this; }
     static get style() { return IonSkeletonTextStyle0; }

package/components/ion-split-pane.js

@@ -119,12 +119,12 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
+        return (h(Host, { key: '57ee198506248916e74d8d082ad547a471e6cc73', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
+            } }, h("slot", { key: '2cd89fa50cfe8a7a6bdda981bb89d5a24a8eec88' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-bar.js

@@ -60,11 +60,11 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '5083528e7f802d2f323ce50585edc98eeb9754c6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
+            }) }, h("slot", { key: 'eb33cdd12da49062219d4aa17a319c3e6361c5c5' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tab-button.js

@@ -76,7 +76,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
             rel,
             target,
         };
-        return (h(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'c7b6a72766b71f34800137dadcf29af657bebddf', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -88,7 +88,7 @@ const TabButton = /*@__PURE__*/ proxyCustomElement(class TabButton extends HTMLE
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, h("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: 'a1eca4a5cf0dfdb55099811d03f204f7b3807a2e' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '888a6d8b95c2f0ca8f74f492729bd28f0d3273d5', class: "button-inner" }, h("slot", { key: '83a234af52ffce9ff0f4cc497712c962115a5813' })), mode === 'md' && h("ion-ripple-effect", { key: '771aff1b83233411e0cf706c3e94c78bca534794', type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-tab.js

@@ -55,10 +55,10 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '0f4b90f0b1027e89bd447ace17af31c8e155a827', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '4fe50fa809503794be2ef91383e49b72cad6fa82', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'ec3eaacf8b7085510e89273aa8373805ee98a381' })));
+            } }, h("slot", { key: '937777a826936d6b399329a926a704008339803e' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tabs.js

@@ -140,7 +140,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), h("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, h("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), h("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
+        return (h(Host, { key: '5102fdd8ae80408811312631f0739c356d913840', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '55f781cd010dcebf9675f2a0b4eab9f4271b780e', name: "top" }), h("div", { key: '2da0ee7b8c82e4bfa42f8bc5873e23e50a88c405', class: "tabs-inner" }, h("slot", { key: '6335a62a10398c008c91f87f15b4a940a95e175d' })), h("slot", { key: '9b6f08a21c703cc7fdebd48eb746d0fde6a8454d', name: "bottom" })));
     }
     get el() { return this; }
     static get style() { return IonTabsStyle0; }

package/components/ion-text.js

@@ -17,9 +17,9 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4330b56cbc4e15953d9b3162fb40af728a8195dd', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
+            }) }, h("slot", { key: 'ec674a71d8fbb04d537fd79d617d9db4a607c340' })));
     }
     static get style() { return IonTextStyle0; }
 }, [1, "ion-text", {

package/components/ion-thumbnail.js

@@ -14,7 +14,7 @@ const Thumbnail = /*@__PURE__*/ proxyCustomElement(class Thumbnail extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode(this) }, h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (h(Host, { key: 'd2667635930e4c0896805f452357e7dc9086bc72', class: getIonMode(this) }, h("slot", { key: '66eb1487f3da4da2ef71b812a8d0f0fe884c7d81' })));
     }
     static get style() { return IonThumbnailStyle0; }
 }, [1, "ion-thumbnail"]);

package/components/ion-title.js

@@ -38,11 +38,11 @@ const ToolbarTitle = /*@__PURE__*/ proxyCustomElement(class ToolbarTitle extends
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses(this.color, {
+        return (h(Host, { key: '6f43362b782ef7d340c241bb66f1469663c03cc1', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, h("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
+            }) }, h("div", { key: '9c3ff1a289e533ee3426b71ab5560fbea3529502', class: "toolbar-title" }, h("slot", { key: '50d5cc5a1519ad58f1994d2f8c8f08f62baac1fe' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toast.js

@@ -828,9 +828,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'c8d7e7d2baa01d3ed5d65a845bc61acf087c0b18', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '23803334fb668f6ce7044d3a321cb84bc753bd16', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '27c0feeb89c4efb47c42623a4b036ed84338ed10', class: wrapperClass }, h("div", { key: '41d5a3069f92e4a6acef2793fa4e236cdbdaae88', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '176f497bc990ef2ecc14c7fa90dd3a54a912030a', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7cd7138ba079fccf97f318b91e9986491ab4214d', class: wrapperClass }, h("div", { key: '93b78fa64e24435adeb77a04c1d1d53d2f093864', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '9a3c71b164ebcfba2540acb7568beffa76b62f47', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'feb9268102d844f1314205f7440de7066cf0620e', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-toolbar.js

@@ -63,10 +63,10 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '8907ed75fbb2b1dced55c481bba6363f1dca815b', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), h("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, h("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), h("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), h("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, h("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), h("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), h("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
+            })) }, h("div", { key: '6bfa09b08d6517f0d680f53b739854cecd631bc9', class: "toolbar-background" }), h("div", { key: '1531bd6dd9e0a5843309bba854b744c453037ad0', class: "toolbar-container" }, h("slot", { key: '881b41697d386eae651b019128573f0fa432cd33', name: "start" }), h("slot", { key: '64a284e6eae5311ac3125dfadb4bb32bdba9d089', name: "secondary" }), h("div", { key: 'c1f47503563b38084b27d7ba54f17ec478482b94', class: "toolbar-content" }, h("slot", { key: '9a85acfba72252705619ae32acae9c14f81aa57d' })), h("slot", { key: '89e08bd761dc6940dbebc5d06f5f080af204aa72', name: "primary" }), h("slot", { key: 'a1cb7d95627f8a3d24dd4b9c11718fc164f53674', name: "end" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/item.js

@@ -270,7 +270,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '1f9e61b627fc94d646cccbfd8be24df745080c2c' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '6690445e14e6f0614beae23b6cc2a2b9cd668934', name: "start" }), h("div", { key: 'cc36ee6ad3f3c04b7fe907f7c63e81fa43938b28', class: "item-inner" }, h("div", { key: '502eff7a3d237fa5658e505b3d2f74cdfdef16af', class: "input-wrapper" }, h("slot", { key: '750d23dcab6844acb92c9636f21dff04c91d2b22' })), h("slot", { key: 'ed16f6bce4ea5a76a181597b879f9bb55c909612', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { key: '29f89d1996f99a0d600c710e1b4bcd6975db7caf', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { key: '111ccb2ab79b9975d6f66714866ff4cc20a7b4da', class: "item-highlight" })), h("div", { key: 'd2ea55be7686ffdd95f0b53d7e8e386983cd0c8e', class: "item-bottom" }, h("slot", { key: '20adbe497dd62b23a169a5194947513a32f5c3a0', name: "error" }), h("slot", { key: '52587f1f2b9056e76ad9be8ccd7754cbeaefdc71', name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '1f9e61b627fc94d646cccbfd8be24df745080c2c' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '6690445e14e6f0614beae23b6cc2a2b9cd668934', name: "start" }), h("div", { key: 'cc36ee6ad3f3c04b7fe907f7c63e81fa43938b28', class: "item-inner" }, h("div", { key: '502eff7a3d237fa5658e505b3d2f74cdfdef16af', class: "input-wrapper" }, h("slot", { key: '750d23dcab6844acb92c9636f21dff04c91d2b22' })), h("slot", { key: 'ed16f6bce4ea5a76a181597b879f9bb55c909612', name: "end" }), showDetail && (h("ion-icon", { key: '95f5b05d1e409dbb7637f68313898d01a7321a15', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { key: '8074c0486bf0b72a4503f55dcb4a1fa8da310899', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '7b2362cdcf8aaf8791f12d3f0b4aa1198d2b4961' }), h("div", { key: 'e82c247286a9dcd1cf6e839b6e95434de175146b', class: "item-highlight" })), h("div", { key: '37524cfdb3518f1f2a958eae4b49977a1199ba3d', class: "item-bottom" }, h("slot", { key: '3643138f87985649e8ee32e099f4b592a45c4712', name: "error" }), h("slot", { key: '0ce71b7fae1256290da625d0d70ac2ff69425247', name: "helper" }), counterString && h("ion-note", { key: '4549ec01076ae1fe959bb88cafa24528444919a1', class: "item-counter" }, counterString))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/label.js

@@ -63,7 +63,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '813192a6460057c6d1e42f50f3f257bee2f550d8', class: createColorClasses(this.color, {
+        return (h(Host, { key: '72ad4ba5c1137ae0130e421346668e436ea53bf8', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,

package/components/list-header.js

@@ -22,10 +22,10 @@ const ListHeader = /*@__PURE__*/ proxyCustomElement(class ListHeader extends HTM
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '1b832a6882307d40fe4afc9a95a5db4fbdff60a3', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e5fabb3ae91e6fe47c89273d1d2dba5902f77f94', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: 'a53a3f05727b510d1b912c10c92a4aa58f4fe860', class: "list-header-inner" }, h("slot", { key: '9377dee83f050b2cb2c5b7c5d106668cc81d8f90' }))));
+            }) }, h("div", { key: 'a9cfdaa436267fbabb0d618c3932849c1b77fbd2', class: "list-header-inner" }, h("slot", { key: '8ed806fd58f8f2265c5bf466886086e88ada93cc' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,

package/components/list.js

@@ -33,7 +33,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '2cb1b689d9460d9576b471bb8b13d14fe34d1c2c', role: "list", class: {
+        return (h(Host, { key: '3df401155114c7a39c81f201bf8a181d07e8d4c8', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

package/components/note.js

@@ -20,9 +20,9 @@ const Note = /*@__PURE__*/ proxyCustomElement(class Note extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eebc0ea94483a248192408a1546739700281d2ae', class: createColorClasses(this.color, {
+        return (h(Host, { key: '79a17a318ec6e8326c9741b4a9bb4598acdc225e', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '33018e11967398327a0e7c20522547a4d9e8f55b' })));
+            }) }, h("slot", { key: '5adeaccfabb4bee7b84ea5c5de804bd255b29255' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,

package/components/overlays.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index5.js';
-import { OVERLAY_BACK_BUTTON_PRIORITY, shoudUseCloseWatcher } from './hardware-back-button.js';
+import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
 import { C as CoreDelegate } from './framework-delegate.js';
 import { c as componentOnReady, f as focusVisibleElement, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
@@ -364,7 +364,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!shoudUseCloseWatcher()) {
+        if (!shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -454,15 +454,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -555,7 +547,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -606,13 +598,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (doc !== undefined) {
-        (_c = getPresentedOverlay(doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -808,5 +794,61 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 
 export { BACKDROP as B, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, safeCall as s, toastController as t };

package/components/picker-column-internal.js

@@ -250,7 +250,11 @@ const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumn
      */
     componentWillLoad() {
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -339,18 +343,18 @@ const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumn
          * the attribute can be moved to datetime.tsx and set on every
          * instance of ion-picker-column-internal there instead.
          */
-        return (h(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
+        return (h(Host, { key: '42a034f2533d30d19f96a121eb74d5f757e1c684', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, h("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            }) }, h("div", { key: '85efccb40c87d473c06026b8041d57b40d2369c3', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '9fae4dd6697f23acba18c218ba250ea77954b18d', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f117afeb204a4f6bb34a1cd0e1b786fa479d8b32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
             const isItemDisabled = pickerDisabled || item.disabled || false;
             return (h("button", { tabindex: "-1", class: {
                     'picker-item': true,
                 }, "data-value": item.value, "data-index": index, onClick: (ev) => {
                     this.centerPickerItemInView(ev.target, true);
                 }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-        }), h("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+        }), h("div", { key: '28aa37f9ce90e88b9c3a5b2c399e3066e9f339e1', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ef4ae6bee2b17918f0c2aba9d5c720c1d95987e4', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '564967bc8e42a9018163850da3a967a933b3de7b', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-column.js

@@ -343,9 +343,9 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '06e2ae483a3bcf4fe721ad0c48cded6a1efdc6c0', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '49bb4c67a67c7318d4c305df78ceabae36355112', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '14bea013788d899edf7155eb3cc10f79fe8e4690', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '7e65761d24473e4ba0ce2d4fc707a5c5e8127903', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '65c3aea609401e8ae4ea6d363a1b9436796c0a86', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'c2e5a324ba95dd8832d3eb81b139e1f674d74a35', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return this; }
     static get watchers() { return {