@ionic/core 8.8.9-dev.11780493937.17fe092d → 8.8.9-dev.11780683233.1c5e9d9b

package/dist/collection/components/segment-view/segment-view.js

@@ -110,11 +110,11 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: '48ce45ca6c45d4bbc804390c31a43729a60abb8a', class: {
+        return (h(Host, { key: '8d1aa594c5674bca376ee3e9b18b60b0925dd875', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: 'e248ce5b24b355bd6b51cbfd25741addf4ffd4fb' })));
+            } }, h("slot", { key: '6375fa794ae615b74a70968718aadefa0a9fc1d6' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -1002,7 +1002,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '03fa41ce215865ceeaeddec12d9ac66b5ab18e3f', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c8fc8ffc5e66fa0deef9556f365d8d95ff652b5d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -1021,7 +1021,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '66808fb8c26f7a5db356b22d43751463cbb4bcaa', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '3e80160009e0e5b47952d666ca621166067adbea', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: 'dd1b83a6bfadcce8e8a9559e529c86d86a5c142d', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'c7ae6112920eb9260be01ef4a723549a71e6e275', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -1031,7 +1031,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '8ea2530c4dc535661bf97d16724bdca3b9e23560', class: "select-outline" }), h("slot", { key: '2526c811e6f0f250421f6de9834d96d21df528b7', name: "start" }), h("div", { key: '95d0b2432c9e656166bf35ddd457a74052c91a27', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0864febe104e3ac77aa10ce397e7c7569855636e', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c83f3992d7a0ee55ca635b391421626a9131c8eb', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'da07a6cea39e13cc62de7104ef4c06ac8b3c8fe1', class: "select-outline" }), h("slot", { key: '35c4261e4eb3f5d91e8fe61e02cfe3d93a2c6763', name: "start" }), h("div", { key: 'e70c2896f0c7ad908811f5eb19abde9a432d086e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ddb79446bfc9dc97714c0395570d67ce6a5aa1bf', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '297abbcf88af9911c6ecbbb27e2f37846f213bdb', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -147,7 +147,7 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '43db0bab8915e4e422acbd73d27a880935c13a38', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: '58f462db240eb759d7be9f090ab9fba48abdea0c' }, h("ion-toolbar", { key: 'dbd4722ad8c2fc21a066b89451fdc5c0a3776808' }, this.header !== undefined && h("ion-title", { key: 'cefe16f3dff1a90d10875506a94fe1d737c67b44' }, this.header), h("ion-buttons", { key: '750ba8ac17447906cbe020d654b943a88adf8185', slot: "end" }, h("ion-button", { key: '8c075ec9d7becf25dd1307bf083bec229a0889ae', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: '65dff8eab0158cdff103ade997246cea2b3c4b9e' }, h("ion-list", { key: 'e3556e81c97146ffda80260265294a4f8d6ebdf2' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '6f1c1c0ad2dad8d4c1defc41a37e9cb4219facef', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'e917416fdfb8785511abac755f9cd23e24bc2c70' }, h("ion-toolbar", { key: '7ce8116cdd882958f1c6d0abd9f6ddad60d4232b' }, this.header !== undefined && h("ion-title", { key: 'aa2be148b57b756ca1abdc4b29c26861494e9341' }, this.header), h("ion-buttons", { key: '7a9671f9426a5b9eb0fef1d4b446d2db98332f89', slot: "end" }, h("ion-button", { key: 'c5c1511bed6e3361aa740de9bcab4c7445887518', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: 'ddabe1b04a9f65e741935e387c06ee8f749b38e1' }, h("ion-list", { key: 'cb801aecd27444fb7bb9e3bf06e5934dfd1a9606' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-option/select-option.js

@@ -21,7 +21,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f4d425097bd16997f0ea48c8896dc92408e55bb9', class: {
+        return (h(Host, { key: 'd7baa96e166b66c8f14c97e56674db4dfec2152c', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }

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

@@ -149,9 +149,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'de63245b6690ffb6201a8faac850b7e73eed8022', class: {
+        return (h(Host, { key: '47062077a192fb05f662f30c68e9c12323a69e47', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'a96857c064aaf9a645b9e1ee22932116b1c25d62' }, header !== undefined && h("ion-list-header", { key: '86b8c398f12cdd3e7d2a7d4c4af69029e4decdbc' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '3bcd9c0a544e1e98243163600413d82a304081db' }, h("ion-label", { key: 'd20b933ba82913b623486c982ab094819f850565', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c869868d89d024b5b02e6a3b626ca91e6f312036' }, subHeader), message !== undefined && h("p", { key: 'd8a26d162ba8d3b092abef38ef3c1795787e7f75' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '50caf4e5f70d1d7b57256f115c589d90d9cea627' }, header !== undefined && h("ion-list-header", { key: '3401a27174b687632836f086f1a367214021358c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '7271f08cd8bae5383bb502d9411d60a5458e18f6' }, h("ion-label", { key: 'e22c6c54f725e3fc630eed38a71afd4bb474b357', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c0ca32ef8100d6aaa3aa2279ed1216bdb6a60b89' }, subHeader), message !== undefined && h("p", { key: '8e2e0b248a05f5483e62db8d608310078040767c' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -32,11 +32,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'aa94213767105077047a369d4e4861027af96060', class: {
+        return (h(Host, { key: '370451ee8963b776079f5df365f7bbd70a53b270', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, h("span", { key: '2b861b4ec86cbd61927ab7b81b13517c99dc94c7' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -56,7 +56,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'fb9e66e61191ada25b8cb1f82038e8d6eaeaebe0', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'b6559d1626b56a1c63580862263a15798f7d3f71', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -131,12 +131,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f9f96d71771ced17604357d27ae7b4b7ed29ec9c', class: {
+        return (h(Host, { key: 'b933156f8f9d8ce418ff0d39526967f9653d6639', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '4c95f5197bde73de689c3e4425c14c55412539c6' })));
+            } }, h("slot", { key: '3ec0a11e5506386747dc972ccb094359ca975bae' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -51,10 +51,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '5761999a97a78dda973bd39bf44f10d9637fc00c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '8b978f848d43898feafa7daa3e3d9819be833038', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'd2cc63bbd20ba5f58ef8d6b23eb50ffa7d80478a' })));
+            } }, h("slot", { key: '96a92d86cecc8c9ef4f11d310f7f87bb99ce4e50' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,7 +179,7 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'dd255e7c4d99f239f43c03eaef94c26ae6db4fc6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '16cd11a815d777a7517150b49b57a204c83c3c37', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
@@ -187,7 +187,7 @@ export class TabBar {
                 'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: 'f112cf52bce37b8a93f9ca6f9632e85889d2791e' })));
+            }) }, h("slot", { key: 'dfdff308f24b3addaf18528a8d869b3fc64306d1' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,7 +93,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '124248b961d34d24a3cbeeb669c672caa10f6d07', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: 'e4d3aaefcdc42677f7818c51ec1ec0a9cbcf8bcf', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +106,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'fde7dc112f62c5e1a08017f1e8665bf68658eadf' }, 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: '0912736f1e69a8da9a49c94bca1c613061bcaad1', class: "button-inner" }, h("slot", { key: '9b919361a07b62304dddc751658fca0540a3747a' })), theme === 'md' && h("ion-ripple-effect", { key: '472967f7b2b8f63d669fae542bb2eb1900955975', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1412d080294dd2602696c5657c71553ef35036d3' }, 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: '5daebf815b9b4f8016ce5b4b9d05148c1957a46c', class: "button-inner" }, h("slot", { key: 'e1cbabb911936d21d5b1a4f87d236b962beacbab' })), theme === 'md' && h("ion-ripple-effect", { key: 'd4544a7fb87b8559aaf9d2f0aa4d440201ebdb71', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -165,7 +165,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'd94b2760650125d00a9bd620f367022119aba911', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'dfa95a272dce19af4575e4d6488962cf6c521754', name: "top" }), h("div", { key: 'd537e5212745833107c751cc6f79d12f48f5472a', class: "tabs-inner" }, h("slot", { key: '6db89721daa7ffd390586345137f1fdfcefa7910' })), h("slot", { key: '7b24f140b89e8e316f24170b29390e00c31d9a0c', name: "bottom" })));
+        return (h(Host, { key: 'b8c5c75469cb1f1829a217a02555a7da8556454a', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '50b74e3df8ea0e991e096c7438a65fee0ca0f6b5', name: "top" }), h("div", { key: 'ca8d4329381c4b40882bbd31b4f15264cfa2c220', class: "tabs-inner" }, h("slot", { key: '816ffd6d997530e3b100480c9a8e4a51fa51e59c' })), h("slot", { key: '280bdf5ec61789823c7772287d60a26229fe78fa', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '4a8be0173621ab64b2849bd02b569e479890c5c4', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8fc5565ce579f8e2a9eddbaa7c93264291080bce', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'af7771d2fd855b5de843f32d58cd33a89051fa8b' })));
+            }) }, h("slot", { key: '5be1d661ee3a6f1f9d9428b59e830672faf475b1' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'd4a95fcd3fe11311d779c10777421c36da20b7a6', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a67ef5f3107776dcd8490bdd2af4a373ae422899', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,7 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '3d21eab560550527de015d36b1c71761792aa516', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '5fe9ec91ac5560d2ebbb93751dd770fe17e5f839', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: '7a8605454eb66d87a4b49ffd28e609a633eae09c', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '8b24d96089d11f659dbd5adfcbf317ec34742333', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -587,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'aac1db3f8a9a9d541bd0d76f17c7936daca419d7', class: "textarea-outline" }), h("div", { key: '49779a6b346b5bf2e8f98787c9159f41fd767d26', class: "start-slot-wrapper" }, h("slot", { key: '2a86311a2ee002e286d8cb1e27480364cb3eb5b1', name: "start" })), h("div", { key: '922069ecd0aa72e4294d78e02a4f216706af0d99', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'c1cae5f0695b4d978fbbd6d0af8d3da681d2c671', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '6e76190d9644dd880200f28bbfdb6291362ce639', class: "end-slot-wrapper" }, h("slot", { key: 'fe9466237a1d88bf8cd534e83cca148ce6178abe', name: "end" }))), shouldRenderHighlight && h("div", { key: 'e8a158231e0dcacb4df5b94575fe54d7aff5c23f', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '91a7ea7b6f6fccc473b9e058281e5437c00a9b5d', class: "textarea-outline" }), h("div", { key: 'ba641e63d5aaf2ddb291c875f57181d1c93a2b26', class: "start-slot-wrapper" }, h("slot", { key: '351684d41a2b080541a29e0d9e90dd50747b52dc', name: "start" })), h("div", { key: '5c0793742ff6cc327582c3d78d85c28fa8238a40', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: '9cf5c908e3fcd54af07c351dcf0bb91c853f1349', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'e47ffe0bf8e460a7cb205ed35a1107b44687116d', class: "end-slot-wrapper" }, h("slot", { key: '57d035b5f1db373b8488b129c8d3552eb8e630ac', name: "end" }))), shouldRenderHighlight && h("div", { key: '1259ad761b68aea69a1ae8b61a6bbdee6c071b7b', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
+        return (h(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
+            } }, h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, h("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
+            }) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -439,9 +439,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - 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: 'f8a4c4537d421e924a58f9addbb38a4a043b9f53', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'f0d62f099dd68f8f541110a60695c2a083c6a4d5', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4f0b39c8e0d7aecfe81da23c3ca1591374a8afa5', class: wrapperClass, part: "wrapper" }, h("div", { key: 'a2cf3ea830d27b51ffe1158fb3f3bf87486401b5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bee5f21ee8df2278e20bf0565495da30c2e61963', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '40a95848e952dd587d1972487affd4b8e088209f', class: "toast-content", part: "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, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '054ba519f93892a000832990097b265887272da4', class: wrapperClass, part: "wrapper" }, h("div", { key: '45fa83c1711ab98e81b8b00e0af3af436eaa5264', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'eb4143899be5259e3d933461bc4ca593c8b9dd9b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'bae8a899abb9bcd4895df45def79bfe3d704e6e4', class: "toast-content", part: "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')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -338,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '48744f35038be7be61fea432996440628d4f2ce9', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: '9e042d48d2416028c4f76fbb38fa2b26ee7512ef', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -350,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '43d05b9140a9ccabc3981a28b01bf2cb844050f6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '716f13f4202712d4ce22fe738879a8259102c329', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '0466a7f662ec5804ecc2e22971248a86f20141c7', class: {
+            }) }, h("label", { key: 'f13b94af8f0b862b8390172107e75ef670fff34f', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'e6c82e4fc9fcc77ed52408a04188d5696521de0c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '5f32f194da4f83792cccaa536a211b558c5eac1c', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '86b8fbbd03ee3179e84cf906ea4e6881137d798a' }), this.renderHintText()), h("div", { key: '6ccf0131e4ff14c3b1f59d218081b8da5f6b1864', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'c86e28aca1011a3d5a453b92ddc8b6d1ab049f0b' }), this.renderHintText()), h("div", { key: '80390009e2a3d1ad699e1b698df725449c8fab53', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -242,11 +242,11 @@ export class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/css-value-validation.js

@@ -9,6 +9,9 @@
 const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
 // Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
 const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+// Matches a `var(--name)` reference with an optional fallback, e.g.
+// `var(--my-gap)` or `var(--my-gap, 16px)`.
+const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
 /**
  * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
  * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
@@ -23,3 +26,14 @@ export function isValidLengthPercentage(value) {
     }
     return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
 }
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+export function isCssVariable(value) {
+    return VAR_FUNCTION_PATTERN.test(value.trim());
+}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-03T13:41:16",
+  "timestamp": "2026-06-05T18:16:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -14112,26 +14112,22 @@
       "props": [
         {
           "name": "collapse",
-          "type": "\"fade\" | \"hide\" | undefined",
+          "type": "\"fade\" | undefined",
           "complexType": {
-            "original": "'fade' | 'hide'",
-            "resolved": "\"fade\" | \"hide\" | undefined",
+            "original": "'fade'",
+            "resolved": "\"fade\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the footer.\n\n- `\"fade\"` only applies when the theme is `\"ios\"`.\n- `\"hide\"` applies to all themes (`\"ios\"`, `\"md\"`, and `\"ionic\"`): the footer\n  slides down and fades out after cumulative downward scrolling on the page content,\n  and returns on any upward scroll (same behavior as `ion-header[collapse=\"hide\"]`).",
+          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`.",
           "docsTags": [],
           "values": [
             {
               "value": "fade",
               "type": "string"
             },
-            {
-              "value": "hide",
-              "type": "string"
-            },
             {
               "type": "undefined"
             }
@@ -14244,7 +14240,7 @@
         },
         {
           "name": "slot",
-          "text": "- Content is placed in a responsive gallery layout."
+          "text": "- One or more `ion-gallery-item` components, placed in a responsive\ngallery layout."
         }
       ],
       "usage": {},
@@ -14312,7 +14308,7 @@
           "mutable": false,
           "attr": "gap",
           "reflectToAttr": false,
-          "docs": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nor numbers (treated as pixel values). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc.",
+          "docs": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nCSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel\nvalues). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc.",
           "docsTags": [
             {
               "name": "default",
@@ -14464,7 +14460,91 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed in a responsive gallery layout."
+          "docs": "One or more `ion-gallery-item` components, placed in a responsive\ngallery layout."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/gallery-item/gallery-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "ion-gallery-item",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "virtualProp",
+          "text": "{\"ios\" | \"md\"} mode - The mode determines the platform behaviors of the component."
+        },
+        {
+          "name": "virtualProp",
+          "text": "{\"ios\" | \"md\" | \"ionic\"} theme - The theme determines the visual appearance of the component."
+        },
+        {
+          "name": "slot",
+          "text": "- The content placed inside of the gallery item. This is typically an\n`img`, but can be any element (e.g. a `figure` wrapping an image and caption)."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "mode",
+          "type": "\"ios\" | \"md\"",
+          "mutable": false,
+          "attr": "mode",
+          "reflectToAttr": false,
+          "docs": "The mode determines the platform behaviors of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "ios",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "theme",
+          "type": "\"ios\" | \"md\" | \"ionic\"",
+          "mutable": false,
+          "attr": "theme",
+          "reflectToAttr": false,
+          "docs": "The theme determines the visual appearance of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "ios",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "ionic",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The content placed inside of the gallery item. This is typically an\n`img`, but can be any element (e.g. a `figure` wrapping an image and caption)."
         }
       ],
       "parts": [],
@@ -14657,16 +14737,16 @@
       "props": [
         {
           "name": "collapse",
-          "type": "\"condense\" | \"fade\" | \"hide\" | undefined",
+          "type": "\"condense\" | \"fade\" | undefined",
           "complexType": {
-            "original": "'condense' | 'fade' | 'hide'",
-            "resolved": "\"condense\" | \"fade\" | \"hide\" | undefined",
+            "original": "'condense' | 'fade'",
+            "resolved": "\"condense\" | \"fade\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the header.\n\n- `\"condense\"` and `\"fade\"` only apply when the theme is `\"ios\"`.\n  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles).\n- `\"hide\"` applies to all themes (`\"ios\"`, `\"md\"`, and `\"ionic\"`): the header\n  slides up and fades out after cumulative downward scrolling on the page content,\n  and returns on any upward scroll.",
+          "docs": "Describes the scroll effect that will be applied to the header.\nOnly applies when the theme is `\"ios\"`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
           "docsTags": [],
           "values": [
             {
@@ -14677,10 +14757,6 @@
               "value": "fade",
               "type": "string"
             },
-            {
-              "value": "hide",
-              "type": "string"
-            },
             {
               "type": "undefined"
             }