@ionic/core 8.8.7-dev.11778599050.191a48e3 → 8.8.7-dev.11778680417.1f9234bd

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(); }
@@ -18689,6 +18691,504 @@ class Footer {
     }; }
 }
 
+/**
+ * Helpers for validating user-supplied CSS values using regular expressions, without
+ * relying on browser CSS APIs.
+ */
+// Matches `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
+// Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
+const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+/**
+ * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+ * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+ * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
+ *
+ * @param value String value to validate.
+ */
+function isValidLengthPercentage(value) {
+    const v = value.trim();
+    if (!v) {
+        return false;
+    }
+    return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
+}
+
+const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+const DEFAULT_GAP = '16px';
+
+const galleryCss = () => `:host{display:grid;grid-template-columns:repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr))}:host(.gallery-layout-uniform){gap:var(--internal-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(--internal-gallery-gap, 16px);-moz-column-gap:var(--internal-gallery-gap, 16px);column-gap:var(--internal-gallery-gap, 16px);row-gap:0;grid-auto-rows:2px}:host(.gallery-layout-masonry) ::slotted(*){display:block;min-height:unset;margin-bottom:var(--internal-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 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, invalid gap,
+        // and unused order properties to avoid duplicate warnings on screen resize.
+        this.hasWarnedInvalidColumns = false;
+        this.hasWarnedInvalidGap = false;
+        this.hasWarnedUnusedOrder = 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 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;
+        /**
+         * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+         * values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,
+         * or numbers (treated as pixel values). Can also be set as a breakpoint map
+         * (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept
+         * space-separated values or CSS keyword values like `inherit`, `auto`, etc.
+         */
+        this.gap = DEFAULT_GAP;
+        /**
+         * 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 width = this.el.getBoundingClientRect().width;
+            const columns = this.getColumnsForWidth(width);
+            // Skip masonry placement when width/columns does not resolve
+            // to a valid breakpoint column count.
+            if (columns === undefined) {
+                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 items = this.getItems();
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
+        };
+    }
+    propertiesChanged() {
+        this.updateResponsiveStyles(true);
+        this.scheduleMasonryResize();
+        // Wait until the next animation frame to warn about unused order
+        // to avoid erroneous warnings when the layout and order are updated
+        // in the same frame.
+        raf(() => {
+            this.warnUnusedOrder();
+        });
+    }
+    componentDidLoad() {
+        this.updateResponsiveStyles(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveStyles();
+            this.scheduleMasonryResize();
+        });
+        this.resizeObserver.observe(this.el);
+        this.scheduleMasonryResize();
+        this.warnUnusedOrder();
+    }
+    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 single column value (`columns` as a number, string, or one entry from
+     * a `columns` breakpoint map) 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;
+    }
+    /**
+     * Normalize a single gap value (`gap` as a number, string, or one entry from
+     * a `gap` breakpoint map) to a CSS length string. Returns `undefined` when
+     * the input cannot be interpreted as a valid CSS length.
+     */
+    sanitizeGap(gap) {
+        if (gap === undefined) {
+            return undefined;
+        }
+        const normalizedGap = typeof gap === 'string' ? gap.trim() : gap;
+        if (normalizedGap === '' || typeof normalizedGap === 'object') {
+            return undefined;
+        }
+        const numericGap = Number(normalizedGap);
+        if (Number.isFinite(numericGap)) {
+            return numericGap < 0 ? undefined : `${numericGap}px`;
+        }
+        if (typeof normalizedGap !== 'string') {
+            return undefined;
+        }
+        const isValidCssLength = isValidLengthPercentage(normalizedGap);
+        return isValidCssLength ? normalizedGap : undefined;
+    }
+    /**
+     * Check if the value is a breakpoint map object.
+     */
+    isBreakpointMap(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * Check if the breakpoint map has any invalid values for the provided sanitizer.
+     */
+    hasInvalidBreakpointMap(breakpointMap, sanitizeValue) {
+        for (const breakpoint of BREAKPOINT_ORDER) {
+            const value = breakpointMap[breakpoint];
+            if (value !== undefined && sanitizeValue(value) === undefined) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Resolve a responsive value from a breakpoint map.
+     * Uses a breakpoint-specific default when custom values are missing/invalid.
+     */
+    resolveFromBreakpoints(width, breakpointMap, sanitizeProvided, getSanitizedDefault) {
+        let resolvedValue;
+        for (const bp of BREAKPOINT_ORDER) {
+            const providedValue = breakpointMap[bp];
+            const sanitizedProvided = sanitizeProvided(providedValue);
+            const sanitizedDefault = getSanitizedDefault(bp);
+            const resolved = providedValue === undefined || sanitizedProvided === undefined ? sanitizedDefault : sanitizedProvided;
+            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
+                resolvedValue = resolved;
+            }
+        }
+        return resolvedValue;
+    }
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    getColumnsFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeColumns(value), (bp) => this.sanitizeColumns(DEFAULT_COLUMNS[bp]));
+    }
+    /**
+     * Get the gap from a responsive breakpoint map.
+     * Returns the gap for the last matching breakpoint.
+     */
+    getGapFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeGap(value), () => this.sanitizeGap(DEFAULT_GAP));
+    }
+    /**
+     * 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) {
+        if (this.hasWarnedInvalidColumns) {
+            return;
+        }
+        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;
+    }
+    /**
+     * Warn about an invalid gap value when it is set to a negative number
+     * or a breakpoint map object with invalid values.
+     */
+    warnInvalidGap(gap) {
+        if (this.hasWarnedInvalidGap) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
+        this.hasWarnedInvalidGap = true;
+    }
+    /**
+     * Warn when `order` is explicitly set while layout is `uniform`.
+     */
+    warnUnusedOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (this.hasWarnedUnusedOrder || layout !== 'uniform' || order === undefined) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - "order" has no effect when "layout" is "uniform". Set "layout" to "masonry" for "order" to apply.`, this.el);
+        this.hasWarnedUnusedOrder = 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 } = this;
+        const isBreakpointColumns = this.isBreakpointMap(columns);
+        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointMap(columns, (value) => this.sanitizeColumns(value));
+        const sanitizedColumns = isBreakpointColumns
+            ? this.getColumnsFromBreakpointMap(width, columns)
+            : this.sanitizeColumns(columns);
+        if (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined)) {
+            this.warnInvalidColumns(columns);
+        }
+        if (sanitizedColumns !== undefined) {
+            return sanitizedColumns;
+        }
+        return this.getColumnsFromBreakpointMap(width, DEFAULT_COLUMNS);
+    }
+    /**
+     * Resolve the active gap value for the current width.
+     */
+    getGapForWidth(width) {
+        const { gap } = this;
+        const providedGap = gap !== null && gap !== void 0 ? gap : DEFAULT_GAP;
+        const isBreakpointGap = this.isBreakpointMap(providedGap);
+        const hasInvalidBreakpointGap = isBreakpointGap && this.hasInvalidBreakpointMap(providedGap, (value) => this.sanitizeGap(value));
+        const sanitizedGap = isBreakpointGap
+            ? this.getGapFromBreakpointMap(width, providedGap)
+            : this.sanitizeGap(providedGap);
+        if (hasInvalidBreakpointGap || (!isBreakpointGap && sanitizedGap === undefined)) {
+            this.warnInvalidGap(providedGap);
+        }
+        if (sanitizedGap !== undefined) {
+            return sanitizedGap;
+        }
+        return this.sanitizeGap(DEFAULT_GAP);
+    }
+    /**
+     * Update the responsive styles for the gallery. This is used to update
+     * the columns and gap when the component width changes.
+     */
+    updateResponsiveStyles(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}`);
+        const gap = this.getGapForWidth(width);
+        this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
+    }
+    /**
+     * 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 = '';
+        itemEl.style.marginBottom = '';
+    }
+    /**
+     * 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.getOrder();
+        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);
+        const lastItemsByColumn = new Array(columns).fill(undefined);
+        items.forEach((itemEl, i) => {
+            itemEl.style.marginBottom = '';
+            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;
+            lastItemsByColumn[columnIndex] = itemEl;
+        });
+        // Remove trailing space from the final item in each column while preserving
+        // spacing between all non-final items.
+        lastItemsByColumn.forEach((itemEl) => {
+            if (itemEl === undefined) {
+                return;
+            }
+            itemEl.style.marginBottom = '0px';
+            const spanWithoutTrailingGap = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (spanWithoutTrailingGap === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            itemEl.style.gridRowEnd = `span ${spanWithoutTrailingGap}`;
+        });
+    }
+    /**
+     * Resolved order for layout and CSS. Order should be `undefined` for
+     * the uniform layout. When order is not set, it should be `"sequential"`
+     * for the masonry layout.
+     */
+    getOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (layout === 'uniform') {
+            return undefined;
+        }
+        if (layout === 'masonry' && order === undefined) {
+            return 'sequential';
+        }
+        return order;
+    }
+    render() {
+        const { layout } = this;
+        const order = this.getOrder();
+        const theme = getIonTheme(this);
+        return (hAsync(Host, { key: '8a8266626f1ba8beb7e382c89ae7905372fe23a9', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
+            } }, hAsync("slot", { key: '7758e89bda53a91d593b9ece0cbe60a4bce0a0fa', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "columns": [{
+                "propertiesChanged": 0
+            }],
+        "gap": [{
+                "propertiesChanged": 0
+            }],
+        "layout": [{
+                "propertiesChanged": 0
+            }],
+        "order": [{
+                "propertiesChanged": 0
+            }]
+    }; }
+    static get style() { return galleryCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ion-gallery",
+        "$members$": {
+            "layout": [1],
+            "order": [1],
+            "columns": [8],
+            "gap": [8]
+        },
+        "$listeners$": [[2, "load", "onChildLoad"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 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}`;
 
 /**
@@ -18705,10 +19205,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 {
@@ -19110,7 +19610,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,
@@ -19118,7 +19618,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 {
@@ -19469,9 +19969,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 {
@@ -19776,7 +20276,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,
@@ -19839,11 +20339,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(),
@@ -20591,7 +21091,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,
@@ -20604,7 +21104,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
@@ -20614,14 +21114,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 {
@@ -21386,7 +21886,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,
@@ -21394,10 +21894,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); }
@@ -21545,16 +22045,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 {
@@ -21929,11 +22429,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 {
@@ -21970,7 +22470,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,
@@ -22066,14 +22566,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 {
@@ -22131,7 +22631,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,
@@ -22983,7 +23483,7 @@ class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'ca0730d5ee00f245b6a139d9fb53fcc8c529a8c6', class: {
+        return (hAsync(Host, { key: 'e6890a1b14faaf9121a07912b1c2f46e06148202', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -23102,13 +23602,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 {
@@ -23188,7 +23688,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,
@@ -23238,10 +23738,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(),
@@ -23530,9 +24030,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 {
@@ -24593,14 +25093,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 {
@@ -24734,7 +25234,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,
@@ -24743,7 +25243,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 {
@@ -24800,10 +25300,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 {
@@ -28306,20 +28806,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 {
@@ -29279,7 +29779,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: 'd6dd0b1e0ba59381a139f4a49de3eb8351fa87a4' });
+        return hAsync("slot", { key: '87188d8fb4232d448ef2ad8e3db29c3730b1ff9e' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29360,7 +29860,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 {
@@ -29394,9 +29894,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(),
@@ -30162,11 +30662,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 {
@@ -31144,9 +31644,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 {
@@ -31271,10 +31771,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 {
@@ -32843,9 +33343,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 {
@@ -32973,7 +33473,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,
@@ -33166,7 +33666,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,
@@ -33177,10 +33677,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 {
@@ -33450,10 +33950,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 {
@@ -34303,7 +34803,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,
@@ -34317,10 +34817,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 {
@@ -35395,7 +35895,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,
@@ -35634,9 +36134,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 {
@@ -35705,9 +36205,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 {
@@ -35983,7 +36483,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 */,
@@ -36109,7 +36609,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,
             } }));
@@ -37094,10 +37594,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 {
@@ -37297,7 +37797,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 {
@@ -37337,9 +37837,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 {
@@ -37898,8 +38398,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,
@@ -37913,14 +38413,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 {
@@ -38535,14 +39035,14 @@ class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'aa903445e6c04076cb4b29cf7195e7b843b158aa', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '2c0631392507f2e903670070232029928470bf11', 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: '761df7f38ea889287f466ba35076a50b5e8d7b72', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: 'ed99c28b8976c4d51ad12089680cb8fb51d835a7', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38694,7 +39194,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),
@@ -38710,7 +39210,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 {
@@ -38748,7 +39248,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 {
@@ -38876,11 +39376,11 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (hAsync(Host, { key: 'f03a6e740fde773dc02e0aad79fd73475c3227fa', class: {
+        return (hAsync(Host, { key: '48ce45ca6c45d4bbc804390c31a43729a60abb8a', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, hAsync("slot", { key: '3c850dd0e7ca795af8497162c8824eaede3bbc29' })));
+            } }, hAsync("slot", { key: 'e248ce5b24b355bd6b51cbfd25741addf4ffd4fb' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -39816,7 +40316,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),
@@ -39835,7 +40335,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
@@ -39845,7 +40345,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 {
@@ -40237,7 +40737,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 {
@@ -40282,7 +40782,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 }));
     }
@@ -40451,9 +40951,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 {
@@ -40508,11 +41008,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(); }
@@ -40585,7 +41085,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'),
@@ -40629,6 +41129,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)'};
 /**
@@ -40696,12 +41197,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 {
@@ -40778,10 +41279,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 {
@@ -40988,7 +41489,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,
@@ -40996,7 +41497,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 {
@@ -41124,7 +41625,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,
@@ -41137,7 +41638,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 {
@@ -41333,7 +41834,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(); }
@@ -41374,9 +41875,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 {
@@ -41940,7 +42441,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,
@@ -41952,7 +42453,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
@@ -41962,7 +42463,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; }
@@ -42046,9 +42547,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 {
@@ -42932,9 +43433,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 {
@@ -43310,7 +43811,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,
@@ -43322,10 +43823,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 {
@@ -43617,11 +44118,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 {
@@ -43680,11 +44181,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 {
@@ -43740,6 +44241,7 @@ registerComponents([
   FabButton,
   FabList,
   Footer,
+  Gallery,
   Grid,
   Header,
   Icon,