@ionic/core 8.8.6-dev.11777559143.1d1ad1ad → 8.8.6-dev.11777569278.1613db2e

package/hydrate/index.mjs

@@ -13106,6 +13106,7 @@ class Chip {
     }; }
 }
 
+// TODO(FW-7285): Replace with global breakpoints
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -13129,8 +13130,9 @@ const matchBreakpoint = (breakpoint) => {
 
 const colCss = () => `:host{--col-unit-size:calc(     (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)   );-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex:1;flex:1;min-height:1px;overflow:auto}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col--]),:host([class*=" ion-grid-col--"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));max-width:calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px))}:host([class^=ion-grid-offset-col--]),:host([class*=" ion-grid-offset-col--"]){--margin-calc:calc(     var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))   );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col--1){--ion-grid-col-span:1}:host(.ion-grid-order-col--1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col--1){--ion-grid-col-margin:1}:host(.ion-grid-col--2){--ion-grid-col-span:2}:host(.ion-grid-order-col--2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col--2){--ion-grid-col-margin:2}:host(.ion-grid-col--3){--ion-grid-col-span:3}:host(.ion-grid-order-col--3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col--3){--ion-grid-col-margin:3}:host(.ion-grid-col--4){--ion-grid-col-span:4}:host(.ion-grid-order-col--4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col--4){--ion-grid-col-margin:4}:host(.ion-grid-col--5){--ion-grid-col-span:5}:host(.ion-grid-order-col--5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col--5){--ion-grid-col-margin:5}:host(.ion-grid-col--6){--ion-grid-col-span:6}:host(.ion-grid-order-col--6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col--6){--ion-grid-col-margin:6}:host(.ion-grid-col--7){--ion-grid-col-span:7}:host(.ion-grid-order-col--7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col--7){--ion-grid-col-margin:7}:host(.ion-grid-col--8){--ion-grid-col-span:8}:host(.ion-grid-order-col--8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col--8){--ion-grid-col-margin:8}:host(.ion-grid-col--9){--ion-grid-col-span:9}:host(.ion-grid-order-col--9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col--9){--ion-grid-col-margin:9}:host(.ion-grid-col--10){--ion-grid-col-span:10}:host(.ion-grid-order-col--10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col--10){--ion-grid-col-margin:10}:host(.ion-grid-col--11){--ion-grid-col-span:11}:host(.ion-grid-order-col--11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col--11){--ion-grid-col-margin:11}:host(.ion-grid-col--12){--ion-grid-col-span:12}:host(.ion-grid-order-col--12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col--12){--ion-grid-col-margin:12}`;
 
+// TODO(FW-7285): Replace with global breakpoints
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const BREAKPOINTS$1 = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
@@ -13145,7 +13147,7 @@ class Col {
     // matches and grab the column value from the relevant prop if so
     getColumns(property) {
         let matched;
-        for (const breakpoint of BREAKPOINTS) {
+        for (const breakpoint of BREAKPOINTS$1) {
             const matches = matchBreakpoint(breakpoint);
             // Grab the value of the property, if it exists and our
             // media query matches we return the value
@@ -13206,12 +13208,12 @@ class Col {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (hAsync(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
+        return (hAsync(Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, hAsync("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
+            } }, hAsync("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
     }
     get el() { return getElement(this); }
     static get style() { return colCss(); }
@@ -18673,6 +18675,345 @@ class Footer {
     }; }
 }
 
+const galleryCss = () => `:host{display:grid;grid-template-columns:repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr))}:host(.gallery-layout-uniform){gap:var(--ion-gallery-gap, 16px)}:host(.gallery-layout-uniform) ::slotted(*){aspect-ratio:1/1}:host(.gallery-layout-masonry){-ms-flex-align:start;align-items:start;-webkit-column-gap:var(--ion-gallery-gap, 16px);-moz-column-gap:var(--ion-gallery-gap, 16px);column-gap:var(--ion-gallery-gap, 16px);row-gap:0;grid-auto-rows:2px}:host(.gallery-layout-masonry) ::slotted(*){display:block;min-height:unset;margin-bottom:var(--ion-gallery-gap, 16px)}::slotted(*){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%}::slotted(img){display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}`;
+
+// TODO(FW-7285): Replace with global breakpoints
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+};
+const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
+ * @slot - Content is placed in a responsive gallery layout.
+ */
+class Gallery {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Keep track of whether we've warned about invalid columns to avoid
+        // duplicate warnings on screen resize.
+        this.hasWarnedInvalidColumns = false;
+        /**
+         * The visual layout of the gallery. When `uniform`, rows take up the height
+         * of the tallest item and are spaced evenly across the gallery. Additionally,
+         * items will have an aspect ratio of 1/1, forcing them to be square unless a
+         * height is explicitly set. When `masonry`, items will be positioned under each
+         * other with only the specified gap between them.
+         */
+        this.layout = 'uniform';
+        /**
+         * The order in which items are positioned. Only applies when layout is
+         * `masonry`. When `sequential`, items are positioned in the order they are
+         * placed in the DOM. When `best-fit`, items are positioned under the column
+         * with the most available space.
+         */
+        this.order = 'sequential';
+        /**
+         * The number of columns to display. Can be set as a number or an object of
+         * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
+         */
+        this.columns = DEFAULT_COLUMNS;
+        /**
+         * Listen for the slotchange event on the slot.
+         * When the layout is `masonry`, this listener is used to schedule a resize
+         * of the masonry grid when the slot changes. This is useful for when items
+         * are added or removed from the gallery.
+         */
+        this.onSlotChange = () => {
+            this.scheduleMasonryResize();
+        };
+        /**
+         * Measure the host and children, then compute masonry placement.
+         */
+        this.resizeMasonryGrid = () => {
+            this.masonryRaf = undefined;
+            if (this.layout !== 'masonry') {
+                this.clearMasonryStyles();
+                return;
+            }
+            const styles = getComputedStyle(this.el);
+            const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
+            const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
+            const columnsStr = styles.getPropertyValue('--internal-gallery-columns');
+            // Fallback to 2 columns for masonry calculations when the resolved
+            // --internal-gallery-columns CSS value is missing or unparsable.
+            const columns = parseInt(columnsStr, 10) || 2;
+            const items = this.getItems();
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
+        };
+    }
+    layoutChanged() {
+        this.updateResponsiveColumns(true);
+        this.scheduleMasonryResize();
+    }
+    componentDidLoad() {
+        this.updateResponsiveColumns(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveColumns();
+            this.scheduleMasonryResize();
+        });
+        this.resizeObserver.observe(this.el);
+        this.scheduleMasonryResize();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+            this.masonryRaf = undefined;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    /**
+     * Listen for the load event on child elements.
+     * When the layout is `masonry`, this listener is used to schedule a resize
+     * of the masonry grid when the child elements load. This is useful for when
+     * images take time to load.
+     */
+    onChildLoad(ev) {
+        if (this.layout !== 'masonry') {
+            return;
+        }
+        const target = ev.target;
+        if (target !== null && this.el.contains(target)) {
+            this.scheduleMasonryResize();
+        }
+    }
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    scheduleMasonryResize() {
+        if (this.layout !== 'masonry') {
+            this.clearMasonryStyles();
+            return;
+        }
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+        }
+        this.masonryRaf = requestAnimationFrame(this.resizeMasonryGrid);
+    }
+    /**
+     * Normalize a columns value to a positive integer.
+     * Returns undefined when the input cannot be interpreted as a finite number.
+     */
+    sanitizeColumns(columns) {
+        if (columns === undefined) {
+            return undefined;
+        }
+        const numericColumns = typeof columns === 'number' ? columns : Number(columns);
+        if (!Number.isFinite(numericColumns) || !Number.isInteger(numericColumns) || numericColumns <= 0) {
+            return undefined;
+        }
+        return numericColumns;
+    }
+    /**
+     * Check if the value is a breakpoint columns object.
+     */
+    isBreakpointColumns(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * Check if the breakpoint columns object has any invalid values.
+     * Returns true if any value is undefined or not a positive integer.
+     */
+    hasInvalidBreakpointColumns(breakpointColumns) {
+        for (const breakpoint of BREAKPOINT_ORDER) {
+            const value = breakpointColumns[breakpoint];
+            if (value !== undefined && this.sanitizeColumns(value) === undefined) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    getColumnsFromBreakpointColumns(width, breakpointColumns) {
+        let columns;
+        for (const bp of BREAKPOINT_ORDER) {
+            const customValue = breakpointColumns[bp];
+            const parsedCustom = this.sanitizeColumns(customValue);
+            const parsedDefault = this.sanitizeColumns(DEFAULT_COLUMNS[bp]);
+            // Use valid custom values when present; otherwise fall back to defaults per breakpoint.
+            const resolved = customValue === undefined || parsedCustom === undefined ? parsedDefault : parsedCustom;
+            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
+                columns = resolved;
+            }
+        }
+        return columns;
+    }
+    /**
+     * Warn about an invalid columns value when it is set to a non-positive
+     * integer or a breakpoint map object with invalid values.
+     */
+    warnInvalidColumns(columns) {
+        printIonWarning(`[ion-gallery] - Invalid "columns" value (${JSON.stringify(columns)}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, this.el);
+        this.hasWarnedInvalidColumns = true;
+    }
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    getColumnsForWidth(width) {
+        const { columns, hasWarnedInvalidColumns } = this;
+        const isBreakpointColumns = this.isBreakpointColumns(columns);
+        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointColumns(columns);
+        const sanitizedColumns = isBreakpointColumns
+            ? this.getColumnsFromBreakpointColumns(width, columns)
+            : this.sanitizeColumns(columns);
+        if (!hasWarnedInvalidColumns &&
+            (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined))) {
+            this.warnInvalidColumns(columns);
+        }
+        if (sanitizedColumns !== undefined) {
+            return sanitizedColumns;
+        }
+        return this.getColumnsFromBreakpointColumns(width, DEFAULT_COLUMNS);
+    }
+    /**
+     * Update the responsive columns for the gallery.
+     * This is used to update the columns when the component width changes.
+     */
+    updateResponsiveColumns(force = false) {
+        const width = this.el.getBoundingClientRect().width;
+        // Only update the columns if the component width has changed by more than
+        // 1px or if the force flag is true. This prevents unnecessary re-renders
+        // when the component width has not changed.
+        if (!width || (!force && this.lastWidth !== undefined && Math.abs(this.lastWidth - width) < 1)) {
+            return;
+        }
+        this.lastWidth = width;
+        const columns = this.getColumnsForWidth(width);
+        this.el.style.setProperty('--internal-gallery-columns', `${columns}`);
+    }
+    /**
+     * Return all directly slotted HTMLElement children of the gallery.
+     */
+    getItems() {
+        return Array.from(this.el.children).filter((child) => child instanceof HTMLElement);
+    }
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    clearItemStyles(itemEl) {
+        itemEl.style.gridRowStart = '';
+        itemEl.style.gridRowEnd = '';
+        itemEl.style.gridColumn = '';
+    }
+    /**
+     * Clear placement styles for all items when leaving masonry mode.
+     */
+    clearMasonryStyles() {
+        this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
+    }
+    /**
+     * Convert a rendered item height to the number of grid rows it should span.
+     * Returns undefined for images that are not fully loaded yet.
+     */
+    calculateRowSpan(itemEl, rowHeight, rowGap) {
+        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+            return undefined;
+        }
+        const height = itemEl.getBoundingClientRect().height;
+        const itemStyles = getComputedStyle(itemEl);
+        const marginBottom = parseFloat(itemStyles.getPropertyValue('margin-bottom')) || 0;
+        const denominator = rowHeight + rowGap;
+        if (!denominator || !Number.isFinite(denominator)) {
+            return 1;
+        }
+        return Math.ceil((height + marginBottom + rowGap) / denominator) || 1;
+    }
+    /**
+     * Get the index of the column to position the item in.
+     * When the order is `best-fit`, the column with the shortest height is
+     * returned. Otherwise, items are placed in the column that matches their
+     * natural DOM order.
+     */
+    getColumnIndex(index, columnHeights, columns) {
+        const { order } = this;
+        if (order === 'best-fit') {
+            let columnIndex = 0;
+            for (let i = 1; i < columns; i++) {
+                if (columnHeights[i] < columnHeights[columnIndex]) {
+                    columnIndex = i;
+                }
+            }
+            return columnIndex;
+        }
+        return index % columns;
+    }
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    layoutMasonry(items, rowHeight, rowGap, columns) {
+        const columnHeights = new Array(columns).fill(0);
+        items.forEach((itemEl, i) => {
+            const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (span === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            const columnIndex = this.getColumnIndex(i, columnHeights, columns);
+            const start = columnHeights[columnIndex] + 1;
+            itemEl.style.gridColumn = `${columnIndex + 1}`;
+            itemEl.style.gridRowStart = `${start}`;
+            itemEl.style.gridRowEnd = `span ${span}`;
+            columnHeights[columnIndex] = start + span - 1;
+        });
+    }
+    render() {
+        const { layout, order } = this;
+        const theme = getIonTheme(this);
+        return (hAsync(Host, { key: 'c8e3d332f3bf28671cd960571c7752bdacb503eb', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry',
+            } }, hAsync("slot", { key: 'ee0509845dfa77e0257bc01852f6b96cb78bee45', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "layout": [{
+                "layoutChanged": 0
+            }],
+        "order": [{
+                "layoutChanged": 0
+            }],
+        "columns": [{
+                "layoutChanged": 0
+            }]
+    }; }
+    static get style() { return galleryCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ion-gallery",
+        "$members$": {
+            "layout": [513],
+            "order": [513],
+            "columns": [8]
+        },
+        "$listeners$": [[2, "load", "onChildLoad"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["layout", "layout"], ["order", "order"]]
+    }; }
+}
+
 const gridCss = () => `:host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}`;
 
 /**
@@ -18689,10 +19030,10 @@ class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
+        return (hAsync(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
+            } }, hAsync("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
     }
     static get style() { return gridCss(); }
     static get cmpMeta() { return {
@@ -19094,7 +19435,7 @@ class Header {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (hAsync(Host, Object.assign({ key: '658d5746920c349cc9fe85666c7215f2edc3c794', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -19102,7 +19443,7 @@ class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && hAsync("div", { key: '4a1470d86e1aac6f8d545fe01e75b4dce665fb70', class: "header-background" }), hAsync("slot", { key: '3b02661242bda5834c4e13e4eb61bf79b53ba33e' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && hAsync("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), hAsync("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19453,9 +19794,9 @@ class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '840d5b29d81222b061ac72168ef6551b5a061e3a', class: {
+        return (hAsync(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
                 [theme]: true,
-            } }, hAsync("img", { key: 'e22e66ee4bb3a648b21c6080674e68eebf4a3feb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, hAsync("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19760,7 +20101,7 @@ class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', class: {
+        return (hAsync(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -19823,11 +20164,11 @@ class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'e94d19f17ef9d4d77786716152e3206366feb546', class: {
+        return (hAsync(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, hAsync("div", { key: '35fcc0572ad27a683aa55a704bd11b19fcdfd29c', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: 'fec3c13dbb2fa98699401147ce442b73e97e8bd8', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '6cd6083255dacc891b4d201477e6bffccb1084bc', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ionic: ionicInfiniteScrollContentMdCss(),
@@ -20575,7 +20916,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd62741432c3e1421d69fdf2ed2e8058a1ce3544f', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -20588,7 +20929,7 @@ class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, hAsync("label", { key: '9707227d9eb977e0983c78757af20219eb1651c6', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '8bc5197ecb665e268668137844f122b74f69cc2d', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, hAsync("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -20598,14 +20939,14 @@ class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && hAsync("div", { key: '65383eeb6a876dbf103dd5358f041f45856e6e9d', class: "input-outline" }), hAsync("slot", { key: '7d333894f2be13a4033a515ce3c8a4489cc4bfc3', name: "start" }), hAsync("input", Object.assign({ key: '8221d445e4ee9e1d2946205893cbb6de93604c86', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (hAsync("button", { key: '2fb77a78ecb32b46dc9641580c2c2f6125e9715d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && hAsync("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), hAsync("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), hAsync("input", Object.assign({ key: '33a06efb4ce0b6e67c12e77f131effb113fba73f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (hAsync("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: 'a349dfb263a011fc10f01350f917c4020809f512', "aria-hidden": "true", icon: inputClearIcon }))), hAsync("slot", { key: '6e02025608bd54cf36e21ed3bef00353921a7fb9', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '8bf1e516962d232a96a2fa701e10c8c909318f62', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), hAsync("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21370,7 +21711,7 @@ class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (hAsync(Host, { key: 'aee59cdba3f3c3783519cf114c668ae92f74fcef', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: createColorClasses$1(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -21378,10 +21719,10 @@ class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, hAsync("div", Object.assign({ key: 'a0b26b833a20807019114a78e4512a639b82a61f', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper", part: "container" }, hAsync("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator", part: "separator" }))))), hAsync("div", { key: 'e525d1841bab5378b165ec1cca9fc45274c2c0ec', class: {
+            }) }, hAsync("div", Object.assign({ key: 'a4427602ea1894d53e4d0f502dbb972c93a86bff', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper", part: "container" }, hAsync("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator", part: "separator" }))))), hAsync("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, hAsync("slot", { key: '9fd331ceff04ab93f8d4aec251565cc201f19294' }))));
+            }, part: "description" }, hAsync("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21529,16 +21870,16 @@ class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode$1(this);
         const isPasswordVisible = type === 'text';
-        return (hAsync(Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: createColorClasses$1(color, {
                 [mode]: true,
-            }) }, hAsync("ion-button", { key: '0a83d58e059bc3b7ef604270e92351d7fa5d129c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, hAsync("ion-button", { key: 'dee2bdeb169d1fa4943c9a8b0164b8fbb4cdfe06', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: 'af9a7e202fe0b3f75f10b3e13bf1e5fb653194d1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21913,11 +22254,11 @@ class ItemDivider {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '4d481e6233a75f3c3042b5825d9c14fe77280f03', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ede65c17ec8e42e4096f8753116923d6b8d2cc14', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: 'e10eeec38a39d7801b88f478c834beded30f1bb4', name: "start" }), hAsync("div", { key: '3e88c2c1a5938ee2df3264d99f2c595d438a7557', class: "item-divider-inner", part: "inner" }, hAsync("div", { key: 'e7bf5e3a985c59211bfac097e8a904627a9cc6f7', class: "item-divider-wrapper", part: "container" }, hAsync("slot", { key: '0ec4f262411414bf44d9ab6e831dbc74672ba317' })), hAsync("slot", { key: '9cd77653584fe95db1477149134af10e0d4053fa', name: "end" }))));
+            }) }, hAsync("slot", { key: '4e16384a4481326490dab1ad31218c19eb9108db', name: "start" }), hAsync("div", { key: '0bddbea071781e3372b5c7147c2fdd3ba0e29ffe', class: "item-divider-inner", part: "inner" }, hAsync("div", { key: 'dfa603352f7cc58aaa717a32507b1dbbd7b79757', class: "item-divider-wrapper", part: "container" }, hAsync("slot", { key: '4b1b67cfe72266645943f88ede9f8c61a344967d' })), hAsync("slot", { key: '6ddd72a410c449e281f5344d02324e7461ba29e8', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21954,7 +22295,7 @@ class ItemGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '3fb0784b321736344604e259cfb05c6307159bed', role: "group", class: {
+        return (hAsync(Host, { key: '66ad8ce335cd97703e884538bdf6ea1927a30889', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,
@@ -22050,14 +22391,14 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '810fe351aa83d6e88cb0e2ebee307b3050e65b45', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'bfade0042108ff525077dfbdfd45169ccfd6b920', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '6eb95c4f815e774d1b579a1fb2ddcad891966ca0' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '5630c1bd31910f46b0a08017a98f7935f17385bf', class: "button-inner", part: "inner" }, hAsync("slot", { key: '081375e3b9683347008d08817ded21c61a374d93', name: "top" }), hAsync("div", { key: '99d7dff311268ab4677397ab5a29b068f1cdf79b', class: "horizontal-wrapper", part: "container" }, hAsync("slot", { key: 'b88858db83d847e3d49a84b75eb277500cb66fb3', name: "start" }), hAsync("slot", { key: '8ca5149591a5e3285eff5078e1eb03554fb0713b', name: "icon-only" }), hAsync("slot", { key: 'a8229a5e11bf41926745ab71f6dcd2d2ca63806c' }), hAsync("slot", { key: '9a497c0cb92fe14ad6b9063fa0946fcd75fb8c08', name: "end" })), hAsync("slot", { key: 'cae262fd2b7fad9e4bc9c02541fa17a6480ecf7f', name: "bottom" })), theme === 'md' && hAsync("ion-ripple-effect", { key: '7114b927480e6a9261c7568e036ecf38ec1680ab' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '38466b511f4a20a3728f37dbf6779b852eba531a' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'bb8f1b332afa2f575bcc69b340bd8f1faa5ca925', class: "button-inner", part: "inner" }, hAsync("slot", { key: '41d627511e1615283956712e1b9519bae92460f6', name: "top" }), hAsync("div", { key: 'bb949a43a586a8996933ee7528e5491beb647aa5', class: "horizontal-wrapper", part: "container" }, hAsync("slot", { key: 'c0d6a73ef49082bfbdf0f542f7465d044ccb6521', name: "start" }), hAsync("slot", { key: '79c6103e680983b2c1a17f1f11dbc41224cd4016', name: "icon-only" }), hAsync("slot", { key: '6c7f17723544d3f6e8b9689b84ddf6196f1897a5' }), hAsync("slot", { key: 'e15d0e02fde71bad8ff7bab0eded7d49508a926e', name: "end" })), hAsync("slot", { key: 'c509d54d44ce33f5a34597b9d0ec29960bbcff62', name: "bottom" })), theme === 'md' && hAsync("ion-ripple-effect", { key: '412d4dc645c941d0b4356cf982be3d5bc2686f13' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -22115,7 +22456,7 @@ class ItemOptions {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: 'cc55282505679d51fb90ebf30869e930c71afbd4', class: {
+        return (hAsync(Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,
@@ -22721,7 +23062,7 @@ class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
+        return (hAsync(Host, { key: '321925e5582cc08b14031231603b1f1c49828b0a', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -22836,13 +23177,13 @@ class Label {
     render() {
         const position = this.position;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'd730045c08ba576082563398ab51fc903577d214', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, hAsync("slot", { key: '604289ef567339c83fb409371224906819a9d7cc' })));
+            }) }, hAsync("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22922,7 +23263,7 @@ class List {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (hAsync(Host, { key: 'dcdfb595a6b45307f9810e1ded25ba635c947940', role: "list", class: {
+        return (hAsync(Host, { key: 'f17f7af20c567ea0098b362ea04d051b44aa151a', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,
@@ -22972,10 +23313,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '0be4fb7d4f9cd6f50229cf7b361c74e94fbfce91', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '90c594b0290949b159f35bd36c86c3231a1b8e44', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '4dcc3374685728ae9270d8d58b1ea1c08b0bbc08', class: "list-header-inner", part: "inner" }, hAsync("slot", { key: '5658cc9185680bfa96328685d817b84b18e9ab5a' }))));
+            }) }, hAsync("div", { key: '9d1bde129787263edb79bc921cdf0168a2935a27', class: "list-header-inner", part: "inner" }, hAsync("slot", { key: 'fe157b5ff88355adfb09209ee92fd03c82e067ff' }))));
     }
     static get style() { return {
         ionic: listHeaderIonicCss(),
@@ -23264,9 +23605,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b1e84a0d078fac04c0736a19d067d8d49e339323', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '19884fd6f8bf6f704bff388ecfa245d1cd98156c', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'ecd47d503a9805a5c18f1b0d48989e54b4cb8f78', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '231821576b812ffaa90ed9ced4437e456908ad53', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'e18d21751a73f408bd058aa4270f245285cd57fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '478761b8a000191951e9902138483b389e1b76c4', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '968be6c72872ce5bc8706fa37f242dcdc38efb33', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24327,14 +24668,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '12bd2c4e9aa2f314ffc45d7f43290bd9910ca8b0', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: 'd42a7b48a1464a4d71188e3a31f719c5dc296d77', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [theme]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: 'd43e12f2502ae5da847eb0d2a70d0a3945733739', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '19977e6584bdbb5b01e6e0a4a7f4558087175b33' })), hAsync("ion-backdrop", { key: '22e79a7edca409248bd3637474d6783f1d7de1b3', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '3ffcedd178c412771657599f3d5de2cd2a717c00', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '2d8dfdb569c4b433cbacbe2aee8a12954e157a51' })), hAsync("ion-backdrop", { key: 'e1fcbdcf6bd3aa0fa10dcf05a2b012bef196a243', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24468,7 +24809,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '206b8482b58e7ee49ea89393a15e9cf30578297b', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'd150818e749a1cbe72dc05011247023f6d442eb8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -24477,7 +24818,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: '33017f0cde4835383f65b82f24e088dc2cf46517' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '63aadc2910f7fd7ae070fe108822c51441dd8ea5', class: "button-inner" }, hAsync("slot", { key: '6696b67329bdf6a0a7db0739d16717eb9ffc5f3b' }, hAsync("ion-icon", { key: '7f88dd0caa7003db810bce76189ecbaba9ff6317', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && hAsync("ion-ripple-effect", { key: '1a2063529bb63cc055fb4bb7d1ad3032df2a74b4', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '88bef93aa6c1a0d5795c4a9ba3edffd99413a758' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '12b2f8bc542239a35adee62d76acccff571a84d7', class: "button-inner" }, hAsync("slot", { key: '5bba549d8e92745aa34372c105cfe80e0ecbc9f5' }, hAsync("ion-icon", { key: '864ff8bf1722b7fe1f17f2a40dfc5b91cb3403f9', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && hAsync("ion-ripple-effect", { key: '59e24ecb22970e43b51739324b11457c6e4bc117', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -24534,10 +24875,10 @@ class MenuToggle {
     render() {
         const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: 'c3ddce789a90d720769919ebf854d05cc75f599e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '973372d778e7902eac28b2a6a5e74165b51d60d6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: 'f1334ba9d20148b673a0b6185ab5ef92f448f720' })));
+            } }, hAsync("slot", { key: '760b8ffe93ae490b62f7ad6fc94ecbc8521ead64' })));
     }
     static get style() { return menuToggleCss(); }
     static get cmpMeta() { return {
@@ -28040,20 +28381,20 @@ class Modal {
         const isHandleCycle = handleBehavior === 'cycle';
         const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: 'e4b82f87c76d3ad5aae7794c4c882e6c95ef7c97', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '2d3a31da1613386cf90f0d59d6b26c9a5b654d2a', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '70f0240dd59e38587c6fbbc2ade4fcb094292b48', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: '9c2b8fd94a37c39739de9b5b12d541685e4fb26c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '55eb3782bd130447dcb935097366b85941422220',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'baf6be86f7d5053d870a4ad794c1d584985c5ba0', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: 'e3b76699bc31e8dd29b09ed6091d8f9003865e15', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '3043e51b33a1e394ae731ebc49fd4df7ef71be99',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'bc685478939603b48fd2530cc0d24beb138f5918', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '19e71dc84abf18b21be76ec35229c5c5e7410c6e', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '96d518c5ee89e7b16929cd6fd682347045d5c231', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '9b868070ee1be064e6b385f4783fc428c78d8084', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29013,7 +29354,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: 'd6dd0b1e0ba59381a139f4a49de3eb8351fa87a4' });
+        return hAsync("slot", { key: '87188d8fb4232d448ef2ad8e3db29c3730b1ff9e' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29094,7 +29435,7 @@ class NavLink {
         };
     }
     render() {
-        return hAsync(Host, { key: '61246716bdf9556db90e07680bc1a289f9658d5c', onClick: this.onClick });
+        return hAsync(Host, { key: '38f3d2e7a3ae4e57ac1479436c143e6820d25cd2', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -29128,9 +29469,9 @@ class Note {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'a8470df6b8fb8ca327a282fc23705bc230f13a40', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '34a74796fc2e41549100c6611a5900d60c8d688d', class: createColorClasses$1(this.color, {
                 [theme]: true,
-            }) }, hAsync("slot", { key: '07cbdef68f010b06638f359f70dff3f1d659d899' })));
+            }) }, hAsync("slot", { key: 'ea4c2e3b5666d10ca312e175db200134d8a30382' })));
     }
     static get style() { return {
         ionic: ionicNoteMdCss(),
@@ -29896,11 +30237,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, hAsync("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), hAsync("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, hAsync("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), hAsync("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30878,9 +31219,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '66a5b7f51aa1ee343dbad3830e03933dbdab27ed', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: '5751788e3b7ecd2fe269c096db883b0681646270', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { key: '19a170752bacdabd50c719f6d1aa9e58a2bd830b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '871671f796aa6a1f78e07ab2599d94b5fd8cd0bf', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '89792e1dc75a4359a4706a8fd1846fe29b866173', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31005,10 +31346,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '9ceebae71b6df0b01f36691d82d716f6756625d9', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '54c254f01017aa47aac76c0833f9ef04bf20bdc9', class: createColorClasses$1(color, {
                 [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("div", { key: '1f26246d601779dadfaf055d195e2a4959180f5a', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: 'eed413474a8b7ec7a73da27fa72a2d0a9a2aae2b' }))));
+            }) }, hAsync("div", { key: '36b21f1b7d9a5b05f0211ce8be90f66578641224', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: '154bf9ca37ca1c6e5d34d42c16b04203e83210be' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32577,9 +32918,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: 'ba8801218aa8543eae0e8e2c57fbd0d4fbb2c8ff', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '43128f8b7e57f08a451af1a237534d0517d86eda', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0301c9a9ed70cf34445e89484cd4145dc98f3d4c', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'd017b8cda9eb474cf990222c90539697308a1c8f', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'fdf8ec2e98a29bfa3e26788e4a432ff402800202', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '9498eace0a68daf39e7c0580ca46e33a9791f62c', class: "popover-content", part: "content" }, hAsync("slot", { key: '0f10c7e335d2f4f75e10d7fde5244c3dd5ae0bb4' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'c087932225f8fc872af7451fd847ab2667ae6ffb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '25fb1c8320099d1170f3a61766760c694d84bf0b', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '552f4b70758470fac0d2e2bd114eaf5d9b81a3ac', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: 'f19c1d60b0f4ff86bf308c5837637cd4bbd6814e', class: "popover-content", part: "content" }, hAsync("slot", { key: '00870a41134268d84e239d305bf2daed7b049c34' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32707,7 +33048,7 @@ class ProgressBar {
         const shape = this.getShape();
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: '9adef68c31bdf39d48199e01587f8d5295d4c6af', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '0f6202e25d884fb85d18578769f6cfa5c704e9d9', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -32900,7 +33241,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '19cc76c559551a34e4968f4902709be6f104dede', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '82127b11eac97fa45886179d248c8509ca07655a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -32911,10 +33252,10 @@ class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'ba97fae433b69e609ad88b949a56cd213d866ae6', class: "radio-wrapper" }, hAsync("div", { key: 'a742b8f1a56d080fd221d89717dbd110db18ee69', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '352c25ebdeeba01b85dc02b2108de988e9eb14a6', class: "radio-wrapper" }, hAsync("div", { key: '8eca395a22199d24b376c57dd52eeaa91ba51c34', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: 'f06b9b57e1c2d66d3eb6790ca30f4d5e85d0d264' })), hAsync("div", { key: '780fc11778f5661d95e60c6cd72a9ed78910b889', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '9c26b977843398be61f1b753251d8fe40d65702a' })), hAsync("div", { key: '336b2d6aeb5e86dc1d994ac1eac52634f5da5b9c', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33184,10 +33525,10 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (hAsync(Host, { key: '39246fbf1f1e3a6ba27dd715f030445d4434999b', class: {
+        return (hAsync(Host, { key: 'c8077cb16bcc6719fa2aba1a5a9cb139e0b81a9e', class: {
                 [theme]: true,
                 'in-list': hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), hAsync("slot", { key: '892b023cb363fc2dc67f8df028d3dfc58f7b54cd' })));
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), hAsync("slot", { key: 'ddeca1867cb8e74121add7616f6be9e1a202c142' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34037,7 +34378,7 @@ class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '1b8ca217fa6965fc038fb4ca8f0bc9142b3893ad', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6c11f7ad176a00ca5368be9ba46c29f6a9aa02bb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -34051,10 +34392,10 @@ class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: '98b02130c9bb5a9ba6557be28f1ac09be0d10806', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '570083103b51b335c805672918d69e997dc30e66', class: {
+            }) }, hAsync("label", { key: '4ac202cf5fd17a9f69e288508e89cfe266a2c8f2', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '1261d51ce247e066e5005f4aaa7b474ae0ddd421', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '1e3233a747d0adca6611234d0675ce049ef979cf', class: "native-wrapper" }, hAsync("slot", { key: '4f06a217592a98d889420468eb282ba8652ef1cc', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '4286279dbadf0e92bffbd5e98d5e36cba095be3c', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '4c09b153ab02c2c80b6197c2beb73c8cd1dc9348', class: "native-wrapper" }, hAsync("slot", { key: 'a81e2e9a5442603f128fec3d1f15090615164abf', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'ccc0a89eb6ce714e5b67893fb6845670a7857914', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35129,7 +35470,7 @@ class Refresher {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '0be6aed52363cda66f8324ddfb9b0aeda92ce0bf', slot: "fixed", class: {
+        return (hAsync(Host, { key: 'd2671f7850b565e7a6fc5b3ff15b2410bcf7cb32', slot: "fixed", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`refresher-${theme}`]: true,
@@ -35368,9 +35709,9 @@ class RefresherContent {
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
         const arrowIcon = theme === 'ionic' ? caretLeftFillSvg : caretBackSharp;
-        return (hAsync(Host, { key: '3a3a3fb44f8397bb8e5019b51254ada8c26ae371', class: {
+        return (hAsync(Host, { key: '684bf1189acba94c502e2bb421f0b65313c3e9f9', class: {
                 [theme]: true,
-            } }, hAsync("div", { key: '3e63966e8c2b262b1f9d4a5545dbdd00e97a4c68', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'd4c8fa7151cee666520a40050c58f6e8201b14a5', class: "refresher-pulling-icon" }, hAsync("div", { key: '2f45a17fe5fe51e81e2d7bd580fd60ce754c5989', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '210cd5f152453a283dbc579f545c683e3af84ea3', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (hAsync("div", { key: '060c8d531e90478121113f59989ac29809f48947', class: "arrow-container" }, hAsync("ion-icon", { key: '7c30ddd2c1a6e2274e7d57f792733017c663197b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '3dee253d56c871195dcd59eaedc2b867ac578319', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '46b859328da272449f316ea8f68f3c3dd545c2e7', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '56660f9f6cff1006c5552df3a9430124689d42cb', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'e8232281f251e5d0d22972fa8e38176edc3d9e5d', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '70f42df444c4669f393137f218ba9d635f76a26c', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, hAsync("div", { key: '29bfcc52d581913654f7639b0f669d149bf91026', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'c5ddc5a3c22ec365906e8716cdbdb8cf793bb978', class: "refresher-pulling-icon" }, hAsync("div", { key: '4314fff1f89758c81de7d908be2eaae81e8d9fb8', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'cea2bc74fd42c35ec6d6349f033830e745c9e99b', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (hAsync("div", { key: 'bfd43614c33fa6e83f67ac95022db5343af160d6', class: "arrow-container" }, hAsync("ion-icon", { key: '64f48d15dc2c17cbeb177f28272477ee8535136b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '6f540e79e981a923050f57167aff8da92bfe8990', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '97b0755e0f240ec199b408a9cfef9fc48b481a68', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '1cd2a284b786fa94272f88659942ff15a7344f66', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '722aea4deaef0b014f49ce61a4a81ef219d0b101', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '8152f4fe27037c4f34918e515ac460c1f03240d5', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35439,9 +35780,9 @@ class Reorder {
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'ba59a095c200b70c6d847dc7362d52b315dc853a', class: {
+        return (hAsync(Host, { key: '2a30643d0c5dbebab97a7aca68c165ee79ceed33', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: '79be263f78cc21c9c4f91326e557e65849ab1e51' }, hAsync("ion-icon", { key: '6e5c47c8bbd33f5cd405a5fd531831cb87c8e57e', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, hAsync("slot", { key: '9ac45a0cc21aea6ed0ec03aa12334886219b1051' }, hAsync("ion-icon", { key: '6d6789a718db4f252c6b3b4484148be2a65c80b8', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35717,7 +36058,7 @@ class ReorderGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'df12858536c409c76552fe79b88827b3c4a5d9c5', class: {
+        return (hAsync(Host, { key: 'f618089290a47bae34bcaaed968c3f8f4daa827f', class: {
                 [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -35843,7 +36184,7 @@ class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '502ce1841747f255dfab542914bebd0d0f4ae9bd', role: "presentation", class: {
+        return (hAsync(Host, { key: 'f4db39623cfd1bdc773e222b2dd9ed52a26cc685', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));
@@ -36828,10 +37169,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '518b86cf40eb95e03f75a20ff44fff804ac8ec4d', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '989574921f3bf06e4e5ad4e98ea3cce2e5c7165e', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'dbf3cc12752b4fa2d3873723a8ea5a30b053d261' }, attrs), hAsync("slot", { key: '9614e46a8d35201937f1f9a39b88f71b78efa7a0' }))));
+            }) }, hAsync("a", Object.assign({ key: 'ee72dba91cc13ca4f251ba6bb5a8b7bf54b6f88d' }, attrs), hAsync("slot", { key: '8e8b5afd795bb213b8765f731463e0588799b001' }))));
     }
     static get style() { return routerLinkCss(); }
     static get cmpMeta() { return {
@@ -37031,7 +37372,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '3f107f085a977b4d27c7266771a9564e3219f736' });
+        return hAsync("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37071,9 +37412,9 @@ class Row {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
+        return (hAsync(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
+            } }, hAsync("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
     }
     static get style() { return rowCss(); }
     static get cmpMeta() { return {
@@ -37632,8 +37973,8 @@ class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: 'e9d60e9e313218ae012da0eb63dc3c08f37f6915', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '4566b2968b5ba79369e424f1829decf7779e9be1', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (hAsync("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: 'e6af154631381ee0549c5d1d39577a86b8ae7b3f', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '9b71660f86c93ab8e1c4bca45a778584b1473a48', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '27c4121c6b49906b2a9c225bd7ba9ab2a41e4292', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (hAsync("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: 'd5fc37533478d088fd40697b21cffc8f9c673add', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -37647,14 +37988,14 @@ class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, hAsync("div", { key: 'cdd7674dd31f53a96517c69fc83916ceea590d6a', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'b7682f425c2645b9fe33ee03d0d0adb88c5b7c7b', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (hAsync("ion-icon", { key: 'd8ad4196fa5921a3f444756410386b8189f4136a', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (hAsync("button", { key: '7bad8accea54850d7cb6dbe8d5d5a404c97bab8b', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'b7e0dbfa02f9ea4db7eb01cb293d81d4a54e23d2', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '3b790197d1f8bad980086ebd898cb2487d56ea24', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (hAsync("ion-icon", { key: 'fce3e3510516d768d8b51a6334cf9d9ac934345e', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (hAsync("button", { key: 'b47cb7c79fd07e44f2273e55782a784f6d567155', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'f60f21ce6f8c3e37d768ff0bd5c69e5797dd77fd', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '6d4f026bd1fde68d43c4e49531ca7b1689590e80', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38265,14 +38606,14 @@ class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '578d4eb20a89742c8c3cb3109fe62a5fdf87b089', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '96e641a05388cbf4477c598f9d36d0028fff8dfb', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, hAsync("slot", { key: '4b9999c95622773aea0c1bf3d1ab9dc650efb5eb', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: 'c705c995b339a81e5a52da0a38d2ff429ed333a4', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38424,7 +38765,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: '75eeffd15e3581c15f48a0b12cbf5a4229b087d6', class: {
+        return (hAsync(Host, { key: 'bbb2ae95aa27852c31dcc0ba3ee5acce24349752', class: {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -38440,7 +38781,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '701fd86647377f744d91eb92427c73583d229253', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '63634d3e500312c847194551996a2897610e0cc7', class: "button-inner" }, hAsync("slot", { key: '89963e233c9a7ea84b7262ab84db6edbe76ee95e' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '9d766c3d48c0b2ba50ab03f2279ccf710973bbba' })), hAsync("div", { key: 'a70f2d1a57cca4e04b00b36a6b47eb93ef4cb26e', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'aff9931755a1f643147bf0e7d2be29b35d8f9d41', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: '0335787c4606314d2715062b536b544cf0fb1f27', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '47d06436538ed9fc97789af76b6681674a2bd0a7', class: "button-inner" }, hAsync("slot", { key: 'de1164da25cb74e6fa3066e43744483fc5b821fa' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '82d3f9d812f851a6bbbf3603e5845e6e6e925442' })), hAsync("div", { key: '77bbfb251707d274635f21e4cd7153791d9fdb49', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '2d7b64dbdb084bd3a851e215b9d049a9aff6f03f', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38478,7 +38819,7 @@ class SegmentContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '81cc29460a17c32592fbf9fca6242f4bb1738aa6' }, hAsync("slot", { key: '4f718420caf11c6672642fcf1a1bdb7f48d6cdfc' })));
+        return (hAsync(Host, { key: '66e6783365c0842eb785d50191206d82321b35e7' }, hAsync("slot", { key: '21528369e7efdb93599179720b26c3f3c3e574ed' })));
     }
     static get style() { return segmentContentCss(); }
     static get cmpMeta() { return {
@@ -38599,11 +38940,11 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (hAsync(Host, { key: '47db42d48ffc6a957e1823ba1ac1a2edff15cfca', class: {
+        return (hAsync(Host, { key: 'f6190a42acd23c2039732b209943a5f747a51377', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, hAsync("slot", { key: '3796e9c733e8659fda172eb2734e50d28b864fa7' })));
+            } }, hAsync("slot", { key: '4665ec76305f47c010eb114d2280b6a695cbb4ee' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -39539,7 +39880,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'b75ee27abca24a0ee5ec2bcecec98aeab85d11b2', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '03fa41ce215865ceeaeddec12d9ac66b5ab18e3f', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -39558,7 +39899,7 @@ class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, hAsync("label", { key: '09f84e92cec1f79d4563d5f27edd7f71266446b8', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '448be6befb0d4a2c0be0b31d9fb970c4bf86e004', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, hAsync("label", { key: '66808fb8c26f7a5db356b22d43751463cbb4bcaa', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '3e80160009e0e5b47952d666ca621166067adbea', 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
@@ -39568,7 +39909,7 @@ class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '5304fa8c9eb2f8a048cd242696aad6bcd66ffa71', class: "select-outline" }), hAsync("slot", { key: '6103312fc0549a71b395e550472c489cd63e50cf', name: "start" }), hAsync("div", { key: 'c37d9c7f6087b522b424b28aaa711f7682468429', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4e7228f7911e5b85b60bdba483506845b2df9f58', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '9c4a369969d2653a553e667e544928e9341dbb51', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '8ea2530c4dc535661bf97d16724bdca3b9e23560', class: "select-outline" }), hAsync("slot", { key: '2526c811e6f0f250421f6de9834d96d21df528b7', name: "start" }), hAsync("div", { key: '95d0b2432c9e656166bf35ddd457a74052c91a27', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0864febe104e3ac77aa10ce397e7c7569855636e', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c83f3992d7a0ee55ca635b391421626a9131c8eb', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39960,7 +40301,7 @@ class SelectModal {
         });
     }
     render() {
-        return (hAsync(Host, { key: '3d19cbc5c4b35089ce424924174f6b87fb1bdcab', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: '3cb79b05db6fec2f72ebdb87edcc24bad9c375ac' }, hAsync("ion-toolbar", { key: '99cf6652daad67727efc354d2064f96658e110be' }, this.header !== undefined && hAsync("ion-title", { key: '372fc52cfb477875cb6f0af8aee0e33f3059ecb1' }, this.header), hAsync("ion-buttons", { key: '748ff6504898f1516ce1904e77a5bcea8ad8cdd3', slot: "end" }, hAsync("ion-button", { key: '129b09e56081dd7f4407d00dce0df0d89836d32b', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (hAsync("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), hAsync("ion-content", { key: 'd3e095c2d3b01481877ffadffcef17792422c242' }, hAsync("ion-list", { key: '7514600d43482f866e508ee88ea65ee2eae63887' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '43db0bab8915e4e422acbd73d27a880935c13a38', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: '58f462db240eb759d7be9f090ab9fba48abdea0c' }, hAsync("ion-toolbar", { key: 'dbd4722ad8c2fc21a066b89451fdc5c0a3776808' }, this.header !== undefined && hAsync("ion-title", { key: 'cefe16f3dff1a90d10875506a94fe1d737c67b44' }, this.header), hAsync("ion-buttons", { key: '750ba8ac17447906cbe020d654b943a88adf8185', slot: "end" }, hAsync("ion-button", { key: '8c075ec9d7becf25dd1307bf083bec229a0889ae', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (hAsync("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), hAsync("ion-content", { key: '65dff8eab0158cdff103ade997246cea2b3c4b9e' }, hAsync("ion-list", { key: 'e3556e81c97146ffda80260265294a4f8d6ebdf2' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -40005,7 +40346,7 @@ class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'fd2c00d514768451e7d51631e4ce4cdb2a7a92ad', class: {
+        return (hAsync(Host, { key: 'f4d425097bd16997f0ea48c8896dc92408e55bb9', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }
@@ -40174,9 +40515,9 @@ class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '75388b15e655f05df0849bbcd79064e4f9f72294', class: {
+        return (hAsync(Host, { key: 'de63245b6690ffb6201a8faac850b7e73eed8022', class: {
                 [theme]: true,
-            } }, hAsync("ion-list", { key: '14a2f8e328145d7563e9f1924637e08ba3f64f07' }, header !== undefined && hAsync("ion-list-header", { key: '22f0b835c1ea3c13e54dc3be563dcb2dc8d7f53e' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'd0464a9be0c4c3f5df33597929b89d20bc57ca7b' }, hAsync("ion-label", { key: '362f77d17c4613a27ced112cc056369ac6915fc7', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '7166ad9c5a5f39ee3006e59ab069bbee6fbf8c2f' }, subHeader), message !== undefined && hAsync("p", { key: 'a195ed5683525cf6d63b6b8c36c49965dcab7315' }, message)))), this.renderOptions(options))));
+            } }, hAsync("ion-list", { key: 'a96857c064aaf9a645b9e1ee22932116b1c25d62' }, header !== undefined && hAsync("ion-list-header", { key: '86b8c398f12cdd3e7d2a7d4c4af69029e4decdbc' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '3bcd9c0a544e1e98243163600413d82a304081db' }, hAsync("ion-label", { key: 'd20b933ba82913b623486c982ab094819f850565', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'c869868d89d024b5b02e6a3b626ca91e6f312036' }, subHeader), message !== undefined && hAsync("p", { key: 'd8a26d162ba8d3b092abef38ef3c1795787e7f75' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -40231,11 +40572,11 @@ 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 (hAsync(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
+        return (hAsync(Host, { key: 'aa94213767105077047a369d4e4861027af96060', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
+            } }, hAsync("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return skeletonTextCss(); }
@@ -40308,7 +40649,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '0b3ce4b99c2c828d05b507c4f073811ebbe17d0f', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'fb9e66e61191ada25b8cb1f82038e8d6eaeaebe0', class: createColorClasses$1(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -40352,6 +40693,7 @@ const splitPaneIosCss = () => `:host{--side-width:100%;right:0;left:0;top:0;bott
 
 const splitPaneMdCss = () => `:host{--side-width:100%;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){right:0;left:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--side-min-width:270px;--side-max-width:28%}`;
 
+// TODO(FW-7285): Replace with global breakpoints
 const QUERY = {
     lg: '(min-width: 992px)'};
 /**
@@ -40419,12 +40761,12 @@ class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
+        return (hAsync(Host, { key: 'f9f96d71771ced17604357d27ae7b4b7ed29ec9c', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
+            } }, hAsync("slot", { key: '4c95f5197bde73de689c3e4425c14c55412539c6' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -40501,10 +40843,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: 'b249545a5adfcef4616afe79aa0f215bab464d0a', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: '5761999a97a78dda973bd39bf44f10d9637fc00c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '19e2a406d96d20d8d4af8c3ff900e975d06021f6' })));
+            } }, hAsync("slot", { key: 'd2cc63bbd20ba5f58ef8d6b23eb50ffa7d80478a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -40711,7 +41053,7 @@ class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: '7a91bb00ad289d94d34271bdecefb7221c093fd6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'dd255e7c4d99f239f43c03eaef94c26ae6db4fc6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
@@ -40719,7 +41061,7 @@ class TabBar {
                 'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, hAsync("slot", { key: '96ad10c451a6ae1e2b7c48d94d0f158fb8cde1dc' })));
+            }) }, hAsync("slot", { key: 'f112cf52bce37b8a93f9ca6f9632e85889d2791e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -40847,7 +41189,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '124248b961d34d24a3cbeeb669c672caa10f6d07', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -40860,7 +41202,7 @@ class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, hAsync("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
+            } }, hAsync("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), hAsync("span", { key: '0912736f1e69a8da9a49c94bca1c613061bcaad1', class: "button-inner" }, hAsync("slot", { key: '9b919361a07b62304dddc751658fca0540a3747a' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '472967f7b2b8f63d669fae542bb2eb1900955975', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -41056,7 +41398,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '9c05f69a72ab24897f1febab0928783d08224734', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '56407c9562bfd095e0259e430879151b824287fd', name: "top" }), hAsync("div", { key: '6a86ceff372b8a60342040d9361ad31bf05e80ec', class: "tabs-inner" }, hAsync("slot", { key: 'a554d3e835236a87686a0a53bd16d3124e77c0c5' })), hAsync("slot", { key: 'd241d4cfba26a7ce3a3f93703dae18b8857bd9ee', name: "bottom" })));
+        return (hAsync(Host, { key: 'd94b2760650125d00a9bd620f367022119aba911', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'dfa95a272dce19af4575e4d6488962cf6c521754', name: "top" }), hAsync("div", { key: 'd537e5212745833107c751cc6f79d12f48f5472a', class: "tabs-inner" }, hAsync("slot", { key: '6db89721daa7ffd390586345137f1fdfcefa7910' })), hAsync("slot", { key: '7b24f140b89e8e316f24170b29390e00c31d9a0c', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return tabsCss(); }
@@ -41097,9 +41439,9 @@ class Text {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4a8be0173621ab64b2849bd02b569e479890c5c4', class: createColorClasses$1(this.color, {
                 [theme]: true,
-            }) }, hAsync("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
+            }) }, hAsync("slot", { key: 'af7771d2fd855b5de843f32d58cd33a89051fa8b' })));
     }
     static get style() { return textCss(); }
     static get cmpMeta() { return {
@@ -41663,7 +42005,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'b31341357553adac08f518e48d83127415f36500', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd4a95fcd3fe11311d779c10777421c36da20b7a6', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -41675,7 +42017,7 @@ class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, hAsync("label", { key: '406cb6739da3382da1f723c42f4ea5aee86e09d4', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '69056191d5f1036bcb88a31d44bc61e3a98f9ebc', class: "textarea-wrapper-inner" }, 
+            }) }, hAsync("label", { key: '3d21eab560550527de015d36b1c71761792aa516', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '5fe9ec91ac5560d2ebbb93751dd770fe17e5f839', 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
@@ -41685,7 +42027,7 @@ class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'eff37b99e2f47f1973cc61611647c28ae7271a4d', class: "textarea-outline" }), hAsync("div", { key: '9c70d10b3d2cce601f670cd86bfc19fff10233da', class: "start-slot-wrapper" }, hAsync("slot", { key: 'b0c92cc7941a0810faabfb1acf177c019e200a5d', name: "start" })), hAsync("div", { key: 'a6f9a2c06a009c322d29aa3a6e2b5a79f3532c5b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, hAsync("textarea", Object.assign({ key: 'eb6bf7370fa3047ed475680111d3e232f0c0644c', 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)), hAsync("div", { key: 'e869ef964514267c0d419d474c16303c01d26cec', class: "end-slot-wrapper" }, hAsync("slot", { key: '8e9905fe7caaf4be904f9cfbc3d9d7f9c48deb50', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '4287784c6b896b13a4205f5f959aebbbcdd49db3', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'aac1db3f8a9a9d541bd0d76f17c7936daca419d7', class: "textarea-outline" }), hAsync("div", { key: '49779a6b346b5bf2e8f98787c9159f41fd767d26', class: "start-slot-wrapper" }, hAsync("slot", { key: '2a86311a2ee002e286d8cb1e27480364cb3eb5b1', name: "start" })), hAsync("div", { key: '922069ecd0aa72e4294d78e02a4f216706af0d99', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, hAsync("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)), hAsync("div", { key: '6e76190d9644dd880200f28bbfdb6291362ce639', class: "end-slot-wrapper" }, hAsync("slot", { key: 'fe9466237a1d88bf8cd534e83cca148ce6178abe', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'e8a158231e0dcacb4df5b94575fe54d7aff5c23f', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -41769,9 +42111,9 @@ class Thumbnail {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
+        return (hAsync(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
+            } }, hAsync("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
     }
     static get style() { return thumbnailCss(); }
     static get cmpMeta() { return {
@@ -42655,9 +42997,9 @@ 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 (hAsync(Host, Object.assign({ key: '6fd286b024a05e6960f7b4b7947a3c26cc129e14', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f8a4c4537d421e924a58f9addbb38a4a043b9f53', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(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 }), hAsync("div", { key: '42aa178a6c7f25841bb6e257810c37b6a5703b1f', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: '5cb2f2566ce8ab76de6a79ecac02a354eb242c58', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'f5a60e1b8c95bbbb829e3b9b01db64ab5229265a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a903491644c03391f66432253cc8365c782b056d', 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$1(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 }), hAsync("div", { key: '4f0b39c8e0d7aecfe81da23c3ca1591374a8afa5', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: 'a2cf3ea830d27b51ffe1158fb3f3bf87486401b5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'bee5f21ee8df2278e20bf0565495da30c2e61963', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("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')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43033,7 +43375,7 @@ class Toggle {
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: 'b12951146a79d3839e6263e91e747398a0fa901d', 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$1(color, {
+        return (hAsync(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$1(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -43045,10 +43387,10 @@ class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, hAsync("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
+            }) }, hAsync("label", { key: '43d05b9140a9ccabc3981a28b01bf2cb844050f6', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '716f13f4202712d4ce22fe738879a8259102c329', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '0466a7f662ec5804ecc2e22971248a86f20141c7', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), hAsync("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '86b8fbbd03ee3179e84cf906ea4e6881137d798a' }), this.renderHintText()), hAsync("div", { key: '6ccf0131e4ff14c3b1f59d218081b8da5f6b1864', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43340,11 +43682,11 @@ class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (hAsync(Host, { key: 'a2103857ffb26f517b4190bb01a8fa170a042e45', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, hAsync("div", { key: '288b74048d260c9279d6e60c8733e26105ee0098', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'fa4b8cfb32f3bfb84f451cf3a2420b37fc75533c', class: "toolbar-container", part: "container" }, hAsync("slot", { key: 'fe9414ab3fa2ca84d424a400ba91ec8239d700ff', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'c633cd1b6eef87adbfccfa61857518dcf62ac550', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: 'aff3a3d8acbc480e9daec864aeb85d168ab2c447', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '52b45c5abbfe695e862c857163e7aa00c1c2af9a' })), hAsync("slot", { key: '3157c16fcfe428230998f218c6233d114b550a6f', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '4b74dff5b832ea0f3030efa319c63c876c3e90e2', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, hAsync("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), hAsync("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), hAsync("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43403,11 +43745,11 @@ class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, hAsync("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
+            }) }, hAsync("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, hAsync("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -43463,6 +43805,7 @@ registerComponents([
   FabButton,
   FabList,
   Footer,
+  Gallery,
   Grid,
   Header,
   Icon,