@ionic/core 8.3.3-dev.11729113140.194d2c73 → 8.3.3-dev.11729113832.1f2984ab

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

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

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

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

package/dist/cjs/ion-tab-bar_2.cjs.entry.js

@@ -66,11 +66,11 @@ const TabBar = class {
         const { color, translucent, keyboardVisible } = this;
         const mode = ionicGlobal.getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (index.h(index.Host, { key: '4ada6205120b6943f80ca00b0750210d55eed141', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, index.h("slot", { key: '2b61fdd8ebd4bd4170ee7be48653c77afcb2a44f' })));
+            }) }, index.h("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -150,7 +150,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '54d5c03f2d0ea454342ac085702b1f33dcaa8589', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (index.h(index.Host, { key: '4b528ce31f67e10ad849e0c99bd034bba675c227', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -162,7 +162,7 @@ const TabButton = class {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, index.h("a", Object.assign({ key: '222128c5af368ed52b0976d436f1d6f0356ca269' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), index.h("span", { key: 'fc8abca426d0d643c31034c34490e77365385f15', class: "button-inner" }, index.h("slot", { key: 'acae0036f691bc29ed537d1818030cf0dc37b883' })), mode === 'md' && index.h("ion-ripple-effect", { key: '8dbe060ae58a209953e748b5688b3d8504df87d8', type: "unbounded" }))));
+            } }, index.h("a", Object.assign({ key: '0da8784b1b243ffaaaf04dd7adb55d6881ed0c08' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), index.h("span", { key: '2c628e8f1ebc129f84876c01530468cb97d8bf3a', class: "button-inner" }, index.h("slot", { key: '8052a171d197a7de1a7eb12b091c35f73ae1ee21' })), mode === 'md' && index.h("ion-ripple-effect", { key: '4186bdb5ed045ec16f495a14fa30ac864c576227', type: "unbounded" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -50,10 +50,10 @@ const Tab = class {
     }
     render() {
         const { tab, active, component } = this;
-        return (index.h(index.Host, { key: '3c983c731117c65d1dd8892cd7cc9972c31700b7', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: 'd325bc089ebd6819404daa445912e22541e5827b' })));
+            } }, index.h("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -207,7 +207,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '27f811ba897e7b7d5aff9708fd20ec1155fc3242', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: '0038751d3aa5cc6b36d9f9cc64e60aa820ce8d72', name: "top" }), index.h("div", { key: 'c4860c66ac89bfdf81e14dbeab9d6d98f2fd9942', class: "tabs-inner" }, index.h("slot", { key: 'a1c28f9f0dbf49dc89b28d31951e406c94e181b1' })), index.h("slot", { key: '2cf9c616ad3708a37a14d347d14dd8b9942dddba', name: "bottom" })));
+        return (index.h(index.Host, { key: 'eb094c9bd15b7777c53bd0bd6d225784fa472849', onIonTabButtonClick: this.onTabClicked }, index.h("slot", { key: 'a516ca6915bf26e77eeeb0ff684c4fcc7d4420a7', name: "top" }), index.h("div", { key: 'dd2a32a072d77afe216abc4958c1d686405fb780', class: "tabs-inner" }, index.h("slot", { key: '222c20ba862068f5c78e7bbef4fa213499fb2fa5' })), index.h("slot", { key: '3e76dcb1b21873aa137d095c56131514054ead3a', name: "bottom" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -19,9 +19,9 @@ const Text = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'c9fd187354e4b4cdbcea29d8205ed3f0445679e6', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: theme.createColorClasses(this.color, {
                 [mode]: true,
-            }) }, index.h("slot", { key: '7ebe2562f6ff30749146a24df9ae17f92599ed69' })));
+            }) }, index.h("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
     }
 };
 Text.style = IonTextStyle0;

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

@@ -369,7 +369,7 @@ const Textarea = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: '3057a0262aa5b10dd009255246b088a292cf2105', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '37595a18d77dea1a337ac1c672e5f08a4128111d', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -378,7 +378,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, index.h("label", { key: '3cefc2946471e462d7e63de23453f73b86fd52a3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'f58e07557457ef15db0ede22bb05eef14e926856', class: "textarea-wrapper-inner" }, index.h("div", { key: 'dd327f34c75825a130034e0599a54c76f5083f2f', class: "start-slot-wrapper" }, index.h("slot", { key: '1e08f37a467423e0d1cbd032e21e7d82390e0d7c', name: "start" })), index.h("div", { key: '0dc7c0317e0489e4e63573b2b3fa33dd8faa0e61', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: 'b351376fb2756af4c9e5745a3391b2952ed538a4', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), index.h("div", { key: 'ea91b1656ddcbe7dfb0522618d4b5e179774f372', class: "end-slot-wrapper" }, index.h("slot", { key: 'af088c4e26d145d92631496cea1eddd2e54fdd22', name: "end" }))), shouldRenderHighlight && index.h("div", { key: 'c63ccb5e724c936f9d01eae561651064d80a843f', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, index.h("label", { key: '67342758743e5a40448a32ff695876d39778621f', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'a994be8264bf5652811cf816d79a04178954e83f', class: "textarea-wrapper-inner" }, index.h("div", { key: 'e09c93ebcd5b3d227d51e682ca23dfc7fd7027ad', class: "start-slot-wrapper" }, index.h("slot", { key: 'd39758f21f19ae70aea21e9a9a7b7c20991fe593', name: "start" })), index.h("div", { key: '6a4e10e53de4bb235ee30def4c9ae5bdee888816', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '9e254e551f124d972e9bc6b09ef0f2bb55890be5', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), index.h("div", { key: 'a66aa2d2bc4778a0bec56a8b9ec9052a832eb3b2', class: "end-slot-wrapper" }, index.h("slot", { key: '8e6a90b4475de32e23afc593da4108610dcca663', name: "end" }))), shouldRenderHighlight && index.h("div", { key: '6da03205a8daff45581b20f0af3938634a9d5f8c', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -832,9 +832,9 @@ const Toast = class {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             index$1.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 (index$3.h(index$3.Host, Object.assign({ key: '2a9a43662626837370415ffd9404c59685691641', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (index$3.h(index$3.Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: 'ff5df3d039ee6b7b9f096a51f6e4ead2d58d0e52', class: wrapperClass }, index$3.h("div", { key: 'c08cf224c941e82bc3d1055f3ee9f90b9b3321dc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { key: 'bf88aee853cffecb21b4c90f8de6e87672e8559a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { key: 'f99a8d2de9bda000ee03f021e84e6f12a410d231', 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: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, index$3.h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', 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 index$3.getElement(this); }
     static get watchers() { return {

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

@@ -164,7 +164,7 @@ const Toggle = class {
         const value = this.getValue();
         const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (index.h(index.Host, { key: '6c191cbb3e2a652474539dbc2135b22f86baba9e', onClick: this.onClick, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '8f024fb0fbc2d4442be0574b03450426e8e4fc9e', onClick: this.onClick, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -174,10 +174,10 @@ const Toggle = class {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, index.h("label", { key: '4f9b2a802ede6286b0ffe2f55a7e93d14d93e8be', class: "toggle-wrapper" }, index.h("input", Object.assign({ key: '3404228bdb34b662f91c04e644b0addc76006906', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), index.h("div", { key: '7a629988fbfa52ccf73563e78834e56de8e657f4', class: {
+            }) }, index.h("label", { key: '0492f009cd89755adf41f60925028002df0e67b1', class: "toggle-wrapper" }, index.h("input", Object.assign({ key: 'fd98b23e8adfa2630878eddc30607a0b1bf9e798', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), index.h("div", { key: 'bcbde055ad9450319ae41e8956a1e8cc0a7796a4', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, index.h("slot", { key: '4a4f76889af86430d2347ae08be813e78984b11b' })), index.h("div", { key: 'df244aec6733371723b25fa05c151b1aaf895e16', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, index.h("slot", { key: '7a6ea9515d454d80615f0622f361c5f91b41345c' })), index.h("div", { key: '6d3670b81b8f809092c98b3f3b8e483ddf6a7cac', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -102,8 +102,10 @@
   right: 0;
   top: 0;
   bottom: 0;
-  display: block;
-  position: fixed;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
   outline: none;
   font-family: var(--ion-font-family, inherit);
   touch-action: none;
@@ -116,12 +118,8 @@
 }
 
 .action-sheet-wrapper {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transform: translate3d(0,  100%,  0);
-  display: block;
-  position: absolute;
+  display: flex;
+  flex-direction: column;
   width: var(--width);
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -203,6 +201,16 @@
   overflow: hidden;
 }
 
+.action-sheet-button::after {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
@@ -220,9 +228,7 @@
 }
 
 .action-sheet-button.ion-focused {
-  background-color: var(--button-background-focused);
   color: var(--button-color-focused);
-  opacity: var(--button-background-focused-opacity);
 }
 .action-sheet-button.ion-focused::after {
   background: var(--button-background-focused);

package/dist/collection/components/action-sheet/action-sheet.js

@@ -192,11 +192,14 @@ export class ActionSheet {
         const mode = getIonMode(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
-        // const buttons = allButtons.filter((b) => b.role !== 'cancel');
+        const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: '2dca254623153dceb8635f5c6579d100b5bb943b', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b2cc3ca4d78b6a38d1df4122a0e1e3890acb4de9', tappable: this.backdropDismiss }), h("div", { key: '775d18c1547b0d70de0c12bfea98cec8b4100658', tabindex: "0" }), h("div", { key: '2cfedd88a497f2cca1d2d111152a3b25cf8779af', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'd18f374c0826df3d58ce97fbb5d83e122d02b67c', class: "action-sheet-container" }, header && (h("h2", { key: '8cbd4baf50bbec2b3c06f226acfb70f29bf9913a', id: headerID, class: "action-sheet-title" }, header)), cancelButton && (h("div", { key: 'ab1dd593ee56b0f74a40ee32f79dcc197c46b5e7', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '30ed64e542c9a11f965444b22ac24c71e28c9f99' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28e94fe349b10ee4627618946e7b1823e96e905e', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '5ca9cc7485409f35e7a7223655ff11964617a5ec', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c5b48ac780e01203040583e7bbc0a3fe5553198a' })))))), h("div", { key: 'be2238323e5b34d7b4d1940deb0bd77191aa7f01', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
+                'action-sheet-title': true,
+                'action-sheet-has-sub-title': this.subHeader !== undefined,
+            } }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -102,8 +102,10 @@
   right: 0;
   top: 0;
   bottom: 0;
-  display: block;
-  position: fixed;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
   outline: none;
   font-family: var(--ion-font-family, inherit);
   touch-action: none;
@@ -116,12 +118,8 @@
 }
 
 .action-sheet-wrapper {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transform: translate3d(0,  100%,  0);
-  display: block;
-  position: absolute;
+  display: flex;
+  flex-direction: column;
   width: var(--width);
   min-width: var(--min-width);
   max-width: var(--max-width);
@@ -203,6 +201,16 @@
   overflow: hidden;
 }
 
+.action-sheet-button::after {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
@@ -220,9 +228,7 @@
 }
 
 .action-sheet-button.ion-focused {
-  background-color: var(--button-background-focused);
   color: var(--button-color-focused);
-  opacity: var(--button-background-focused-opacity);
 }
 .action-sheet-button.ion-focused::after {
   background: var(--button-background-focused);

package/dist/collection/components/alert/alert.js

@@ -394,9 +394,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: 'a77c66a54d407338e008770de5bf91766c671ec2', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '1d21c6afd07c49444bf7566cd8ded154ec802622', tappable: this.backdropDismiss }), h("div", { key: '96280b7babacecc161227a293fe33e1fc0895468', tabindex: "0" }), h("div", { key: 'd26ac2e8ab2ab85d241cd74a1f19e1957283f6bd', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'a8a412f2950a31a7fc3d91f0d7d23a67b97ab649', class: "alert-head" }, header && (h("h2", { key: '54ee6365d98c2dafa9513c5b67ac54f1be5dd87d', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: '72db051283f31cd4874fca8c1c06b10e751353b5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '7c957ebfb5beb84d26708c30d271eda01eac3f69', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), h("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), h("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (h("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/app/app.js

@@ -64,7 +64,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '53472b607f7f38b30a6d1a7592da2125100011cf', class: {
+        return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/dist/collection/components/avatar/avatar.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { key: '8a3f3786bb3c117d524437bcb0e74e107abbe1d4', class: getIonMode(this) }, h("slot", { key: 'd9a5e55965ee7341e0994bc0057bef5b019a56fe' })));
+        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '07ab5d7d5a58f9604f50276c6a1850e0b9428c24', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '8351c93a1812c94c979fb115f07a9ad7b3152188', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '5f173fbc01a03da1d50449c5ad8fee7cf65c59d8', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '6f69164c1e8466e72ed80a12456f09b176d91cd0', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'e8fb8b00e937caab22990723acf077ff6d4e04e0', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '62511668303ff53d477fcf49f417de03eff1ac52', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '562f12891bc631cb71eb90c7303cc5ad55b19c48', type: this.rippleType }))));
+            }) }, h("button", { key: '991b8baa784dbfbdf8d3581cbbf6a858ac1f1e6e', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '929fcd83a4fdb00cf97ca803f234719171602a5e', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '0c10d412ae8342d96f221e626b421c9abadac748', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '96f505880a80f36ee8b8c78268b450f3629ee613', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '0aecf5d415c608069eb1a10043530bd0929b6383', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/backdrop/backdrop.js

@@ -23,7 +23,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b1570293e99e4a7d3a054bba3708b1d457a66abe', tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c803b4302c8e722064feb03dafe3cb6e190b4f2b', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

package/dist/collection/components/badge/badge.js

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '05aa51688e73322aa21c8b9c68251e691acfa4e5', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1253618692342bcf9487188402dc3d49ae0de480', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '8b0a9cbb20a979f040edf044f4fd26554f167b42' })));
+            }) }, h("slot", { key: '71d65e203965ea37b94504a8a0a96beb52d4e356' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -64,7 +64,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: '3fa177213574bcc93f4184f3ff031bdc05992501', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'dfe55ad57f23e5da5f2e2c51fea99964812472e3', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,15 +74,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '0de0c76f2849affa8afe8b363ceffded4c824cbc' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fd346028462e92ef5aece4e0d0fedd5d22ddae4e', name: "start" }), h("slot", { key: 'b4dee49713e6709bb7f655083d3df952eeda8cd6' }), h("slot", { key: '54f66d33ab51e1fa914b897dfb0ff13f847952d6', name: "end" })), showCollapsedIndicator && (h("button", { key: '4940dbc9466c1a8020421b155c5b54b00ff10c0a', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: 'e361b1f0e7de6dd5c5dd4f6deae72c2c8210466d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '9daeb45a8a28c89f3ad5751f71b8412197846371', name: "start" }), h("slot", { key: '4849e63cdffd6c712292745138b68730442c8b0d' }), h("slot", { key: '6edf9bac5aec06ccec2844efac2d9afa1d24cf57', name: "end" })), showCollapsedIndicator && (h("button", { key: 'de7f5faea75b44011b289d259265e2435a65874f', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { key: '105cd22175c66f9db97ed2564839fe757169625a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: '957d8851af9c99dda263f34eff0b35a0fc212c32', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { key: '478bbcc120a8e5f40918264e87d89bb63fd4e984', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: 'e6395282218911304fdcf22f34689ca80cfd717c', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { key: '97d646c37c4c41ad6b12c3a543d1146fde06fc9a', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '0429f671a986f2d7be1b1b69fc879e80806d2916', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '583a19cc4e6ceaf89cb771d7576c821d01818422', class: createColorClasses(color, {
+        return (h(Host, { key: '18ffba1642f10cc2bc31440e84f23aa6f042e501', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: 'ca825133dd956d15115932d6ad2277604d297a09', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '3db6d31590e3047889ce554d57d155c8ea2e1455', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -211,7 +211,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '4bc06e6ec688d4f4c12b870b3ab3dd8db08aae59', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '8f3a0363d46ef888d22b0b0812c70cb4f79e6efa', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -226,7 +226,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '0a9b023f728364c890fc59d2241d00ac417d8e9e' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '46b4b46e303ede9ea03f488d95d6eafa7db8f098', class: "button-inner" }, h("slot", { key: '98e72fddd837d0f30a097f79bf5100088f7eb214', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'a442858cdae935e49bbcb933d9c55770573dcd54', name: "start" }), h("slot", { key: 'd974805e9f4143e5d0239546fffc604c70a48600' }), h("slot", { key: '45f2ed69eed604f91fd098d691dd7fa806ab39b7', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'b62907b56cd488742fdfcaede2fee433cde2f146', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'a517c7d06aab15ad4c2a51b8ec224c1aeb4ed565' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '127c26dd97c0bf5097433df77df7313d59784899', class: "button-inner" }, h("slot", { key: '39d9a9cad8e1addbe63406062e555e05c2cb541b', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'cfdebdd89155c6c21eb80e51e06456a3a6d877e0', name: "start" }), h("slot", { key: 'eac497e0f97ab55baa834ae23155d89b0f7069c6' }), h("slot", { key: 'c99f7900f8856b32a0b4ac11092d461f5e9a1109', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'c681edb0480879fbd801575f2233f6e118898638', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/buttons/buttons.js

@@ -9,10 +9,10 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'cacb76b3b67aae673a764b3cbe03aaa8425f8ce5', class: {
+        return (h(Host, { key: '4e5ce9abb3f56e8c91e3eb58c2819300e61eba24', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: '16086adaa70b2dd47aa441a4d31cc2c3dcfd5412' })));
+            } }, h("slot", { key: 'f2f360ec888b6e946b512fed07431fab47c61482' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/card/card.js

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '51b9a91d48671d429f5659a2961619e1a46cd5df', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8584300522f382ee8891c039d71da82533dfa36a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

package/dist/collection/components/card-content/card-content.js

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '28f37e16b611f9a80b336e97b318e8374646079e', class: {
+        return (h(Host, { key: '2a2d0b48aad4b83990a1748fce60e772514eb223', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

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

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'af5a7144374f1aad2788ae95618e7693277a0618', class: createColorClasses(this.color, {
+        return (h(Host, { key: '18d12507ec6e650a72d721e9d0f4128b5e86df1d', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '7367add0a6d062683a7279f2c1af1f886c5810f6' })));
+            }) }, h("slot", { key: '3374c087d8c3f014082787e255432e7a335ef44f' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '04aa891554981ead6057c317b0ed314d668f702f', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'cbcb01bd01cf6de64a0b04fb626e42b07ceb8f53', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'dd6c32fd6f1cf50e257ff70c46e3b765eb0884c5' })));
+            }) }, h("slot", { key: 'cbcaa73aa5799882c48d6c0aabfb13651bcc91c0' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ea924d0f85eae1f4a97d59d2ae0549459c46a5ae', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f904a0ca6489f147d03c9c5f9f2c5549cdb38d1a', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '087ffc17c4500b7db68caf619bf8e39e34113591' })));
+            }) }, h("slot", { key: 'effb921de4ad8dfbbe318b3f692f4005812da7b1' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -72,7 +72,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '90d45249f95c207f04a2c15cfd2a8485d5d1c3f9', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+        return (h(Host, { key: 'd7a07fbf130413eaa4622c07786e8a00723113eb', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -82,10 +82,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '08da6781f1f72d1f37cd41a88d3b5ed6b9076ca0', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'b45f448b88d39e547ecd147aaa283bc5240a08df', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: '8e9648cfdc2101bcbca354d6cfdfede1944770fe', class: {
+            }), onClick: this.onClick }, h("label", { key: '99797589ed4ea7cbac53531c85b2d4a2dcd568c4', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'cc12fe7920ab23c6f21546f7b312b8f1f5671349', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: '1b087f061da5abca6129d372503d8882b77e24be', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: 'b55cf97e82ae04e589c09a11ec6b8b71d6029a37' })), h("div", { key: '3e16d10b8098a2c6cfaa8ea3b37b1943036b71e2', class: "native-wrapper" }, h("svg", { key: 'cb91e27c398f3e8360678d73e789ed0e6ba6970b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: 'bc84274c826fa1db1207230aa03bf5790afe2992' })), h("div", { key: '89e9396dc9215804bd8ac42e943a292d050ef8c5', class: "native-wrapper" }, h("svg", { key: '2aafac248c639074faaf17044d8d9204474a9b7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/collection/components/chip/chip.js

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '886c26b6e7b3e3ca8622a4a0926bdf6dea0a71d4', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7dd923c1b28d1eb1efa348f66f49cec067645af9', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", { key: 'd24353e79ac84013758cee1acb1b0f9b2ebb4d67' }), mode === 'md' && h("ion-ripple-effect", { key: 'b69bb3ce3d464251d5e11ba6a5240e4567f72f05' })));
+            }) }, h("slot", { key: '7ede838bf109dc27a898ee2dcdeabc3f439c8e6f' }), mode === 'md' && h("ion-ripple-effect", { key: '5acb073029544e73fcc0db4cc4e661ec1df4d231' })));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: '56ecf3b3f2be05d5f179f2d136d4ab05a4525da9', class: {
+        return (h(Host, { key: 'c37fa4c4c993385ccbb6f4e89b2f390b140507a0', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '8f1113d39dcb709300ebbeaf81bc092c1dd8da3e' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6a5296ff0b9dee6600c2dafe7363a065d053bac2' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }