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

package/dist/cjs/ion-gallery-item.cjs.entry.js

@@ -0,0 +1,79 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-CzcLEdQ5.js');
+var ionicGlobal = require('./ionic-global-BW5tRzrz.js');
+
+const galleryItemCss = () => `:host{display:block}::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}:host(.in-gallery-layout-uniform) ::slotted(*){aspect-ratio:1/1}:host(.in-gallery-layout-masonry){min-height:unset;margin-bottom:var(--internal-gallery-gap, 16px)}`;
+
+const GalleryItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasWarnedInvalidParent = false;
+        this.onSlotChange = () => {
+            this.warnInvalidParent();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        this.galleryEl = (_a = this.el.closest('ion-gallery')) !== null && _a !== void 0 ? _a : undefined;
+        this.syncLayoutClasses();
+    }
+    componentDidLoad() {
+        this.watchGalleryLayoutClasses();
+        this.warnInvalidParent();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.galleryClassObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.galleryClassObserver = undefined;
+        this.galleryEl = undefined;
+    }
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    warnInvalidParent() {
+        if (this.hasWarnedInvalidParent || this.galleryEl !== undefined) {
+            return;
+        }
+        index.printIonWarning('[ion-gallery-item] - This component should be used as a child of an "ion-gallery" component.', this.el);
+        this.hasWarnedInvalidParent = true;
+    }
+    /**
+     * Watch the parent gallery's class list so the item can react to layout
+     * changes (the gallery reflects its layout as a `gallery-layout-*` class).
+     */
+    watchGalleryLayoutClasses() {
+        var _a;
+        const galleryEl = this.galleryEl;
+        if (galleryEl === undefined) {
+            return;
+        }
+        (_a = this.galleryClassObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.galleryClassObserver = new MutationObserver(() => this.syncLayoutClasses());
+        this.galleryClassObserver.observe(galleryEl, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    syncLayoutClasses() {
+        var _a;
+        const layout = (_a = this.galleryEl) === null || _a === void 0 ? void 0 : _a.layout;
+        this.galleryLayout = layout === 'masonry' || layout === 'uniform' ? layout : undefined;
+    }
+    render() {
+        const { galleryLayout } = this;
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: 'b3de6bf2df4af01ed274188a96d9e8cd82c9f5cd', class: {
+                [theme]: true,
+                'in-gallery-layout-uniform': galleryLayout === 'uniform',
+                'in-gallery-layout-masonry': galleryLayout === 'masonry',
+            } }, index.h("slot", { key: '5bef4549c5101178fec9b590cb6b553ddc5376c4', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return index.getElement(this); }
+};
+GalleryItem.style = galleryItemCss();
+
+exports.ion_gallery_item = GalleryItem;

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

@@ -16,6 +16,9 @@ require('./focus-visible-BIj-I3-C.js');
 const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
 // Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
 const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+// Matches a `var(--name)` reference with an optional fallback, e.g.
+// `var(--my-gap)` or `var(--my-gap, 16px)`.
+const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
 /**
  * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
  * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
@@ -30,6 +33,17 @@ function isValidLengthPercentage(value) {
     }
     return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
 }
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+function isCssVariable(value) {
+    return VAR_FUNCTION_PATTERN.test(value.trim());
+}
 
 const DEFAULT_COLUMNS = {
     xs: 2,
@@ -41,7 +55,7 @@ const DEFAULT_COLUMNS = {
 };
 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}`;
+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-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:1px}`;
 
 // TODO(FW-7285): Replace with global breakpoints
 const BREAKPOINTS = {
@@ -53,6 +67,10 @@ const BREAKPOINTS = {
     xxl: 1400,
 };
 const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * The tag of the component used to wrap each gallery item.
+ */
+const GALLERY_ITEM_SELECTOR = 'ion-gallery-item';
 const Gallery = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -61,6 +79,7 @@ const Gallery = class {
         this.hasWarnedInvalidColumns = false;
         this.hasWarnedInvalidGap = false;
         this.hasWarnedUnusedOrder = false;
+        this.hasWarnedInvalidItems = 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,
@@ -77,7 +96,8 @@ const Gallery = class {
         /**
          * 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
+         * CSS variables like `var(--app-gallery-gap)`, 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.
          */
@@ -89,6 +109,9 @@ const Gallery = class {
          * are added or removed from the gallery.
          */
         this.onSlotChange = () => {
+            // Re-observe so newly added items are watched for size changes (e.g. a
+            // freshly appended item finishing hydration), then recompute placement.
+            this.observeResizes();
             this.scheduleMasonryResize();
         };
         /**
@@ -132,7 +155,7 @@ const Gallery = class {
             this.updateResponsiveStyles();
             this.scheduleMasonryResize();
         });
-        this.resizeObserver.observe(this.el);
+        this.observeResizes();
         this.scheduleMasonryResize();
         this.warnUnusedOrder();
     }
@@ -145,6 +168,22 @@ const Gallery = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = undefined;
     }
+    /**
+     * Observe the host and each item for size changes. Items are observed in
+     * addition to the host so masonry placement is recomputed when an item's
+     * rendered height changes — most importantly when a dynamically added
+     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
+     * `load` event and does not change the host's measured size while collapsed.
+     */
+    observeResizes() {
+        const observer = this.resizeObserver;
+        if (observer === undefined) {
+            return;
+        }
+        observer.disconnect();
+        observer.observe(this.el);
+        this.getItems().forEach((item) => observer.observe(item));
+    }
     /**
      * Listen for the load event on child elements.
      * When the layout is `masonry`, this listener is used to schedule a resize
@@ -198,9 +237,10 @@ const Gallery = class {
         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.
+     * Normalize a single gap value (`gap` as a number, a string such as a CSS
+     * length-percentage or `var()` reference, 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 or `var()` reference.
      */
     sanitizeGap(gap) {
         if (gap === undefined) {
@@ -217,6 +257,9 @@ const Gallery = class {
         if (typeof normalizedGap !== 'string') {
             return undefined;
         }
+        if (isCssVariable(normalizedGap)) {
+            return normalizedGap;
+        }
         const isValidCssLength = isValidLengthPercentage(normalizedGap);
         return isValidCssLength ? normalizedGap : undefined;
     }
@@ -297,7 +340,7 @@ const Gallery = class {
         if (this.hasWarnedInvalidGap) {
             return;
         }
-        index.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);
+        index.printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, CSS variable (e.g. var(--app-gap)), or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
         this.hasWarnedInvalidGap = true;
     }
     /**
@@ -369,11 +412,43 @@ const Gallery = class {
         this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
     }
     /**
-     * Return all directly slotted children of the gallery that can be grid items
-     * with inline placement styles (HTML elements and SVG elements).
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell. A direct child that is not an `ion-gallery-item` is
+     * treated as a pass-through wrapper (e.g. a layout `<div>`): its box is
+     * collapsed with `display: contents` so the nested items participate in the
+     * gallery grid. Children that contain no `ion-gallery-item` are ignored.
      */
     getItems() {
-        return Array.from(this.el.children).filter((child) => { var _a; return typeof ((_a = child.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function'; });
+        const items = [];
+        Array.from(this.el.children).forEach((child) => {
+            // Standard path: <ion-gallery-item> is a direct child of <ion-gallery>.
+            if (child.matches(GALLERY_ITEM_SELECTOR)) {
+                items.push(child);
+                return;
+            }
+            // Compatibility path: a wrapper element may contain <ion-gallery-item>
+            // components. Collapse the wrapper's box so the items participate in the
+            // gallery grid.
+            const nestedItems = Array.from(child.querySelectorAll(GALLERY_ITEM_SELECTOR));
+            if (nestedItems.length === 0) {
+                this.warnInvalidItems();
+                return;
+            }
+            child.style.display = 'contents';
+            items.push(...nestedItems);
+        });
+        return items;
+    }
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component.
+     */
+    warnInvalidItems() {
+        if (this.hasWarnedInvalidItems) {
+            return;
+        }
+        index.printIonWarning(`[ion-gallery] - Gallery items must be wrapped in "ion-gallery-item" components. Direct children that are not "ion-gallery-item" (and do not contain one) are ignored.`, this.el);
+        this.hasWarnedInvalidItems = true;
     }
     /**
      * Clear the item styles for the given item element.
@@ -391,12 +466,19 @@ const Gallery = class {
     clearMasonryStyles() {
         this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
     }
+    /**
+     * Whether the item contains any images that have not finished loading.
+     * Used to defer masonry placement until the rendered height is final.
+     */
+    hasUnloadedImages(itemEl) {
+        return Array.from(itemEl.querySelectorAll('img')).some((img) => !img.complete || img.naturalHeight === 0);
+    }
     /**
      * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined for images that are not fully loaded yet.
+     * Returns undefined when the item has images that are not fully loaded yet.
      */
     calculateRowSpan(itemEl, rowHeight, rowGap) {
-        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+        if (this.hasUnloadedImages(itemEl)) {
             return undefined;
         }
         const height = itemEl.getBoundingClientRect().height;
@@ -483,11 +565,11 @@ const Gallery = class {
         const { layout } = this;
         const order = this.getOrder();
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+        return (index.h(index.Host, { key: '2063823917f4ab8430aee0e17ae0f3a2b53341d1', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, index.h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
+            } }, index.h("slot", { key: '1378f489afb6b05181d2513f664c4efe24ad3598', onSlotchange: this.onSlotChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -84,9 +84,9 @@ const Img = class {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+        return (index.h(index.Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
                 [theme]: true,
-            } }, index.h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, index.h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js

@@ -271,7 +271,7 @@ const InfiniteScroll = class {
     render() {
         const theme = ionicGlobal.getIonTheme(this);
         const disabled = this.disabled;
-        return (index.h(index.Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
+        return (index.h(index.Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -315,11 +315,11 @@ const InfiniteScrollContent = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
+        return (index.h(index.Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, index.h("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, index.h("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
 };
 InfiniteScrollContent.style = {

package/dist/cjs/ion-input-otp.cjs.entry.js

@@ -692,7 +692,7 @@ const InputOTP = class {
         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 (index.h(index.Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'f39e98cd24cbf50f7db4e891dda9499f6def7986', class: theme.createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -700,10 +700,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, index.h("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$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper", part: "container" }, index.h("input", { class: "native-input", part: "native", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator", part: "separator" }))))), index.h("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
+            }) }, index.h("div", Object.assign({ key: '624adcd552947708162003353b331cd92df062ef', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper", part: "container" }, index.h("input", { class: "native-input", part: "native", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator", part: "separator" }))))), index.h("div", { key: 'c518d83ab0236a3ebbe631582ce6f1c2edfbcd29', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, index.h("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
+            }, part: "description" }, index.h("slot", { key: '15c7c8549c1788748e1ae31bd227a7f918cb5eca' }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -101,16 +101,16 @@ const InputPasswordToggle = class {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = ionicGlobal.getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (index.h(index.Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'f11e3bf4d3255e003aec504e6dd3ee1e0caaf767', class: theme.createColorClasses(color, {
                 [mode]: true,
-            }) }, index.h("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) => {
+            }) }, index.h("ion-button", { key: '5bba43f7755857fd9347612bb906c389b60386b4', 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 }, index.h("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, index.h("ion-icon", { key: 'c0eb0e4e2f3e9553bfd519ff655064c9f62af406', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -622,7 +622,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '3da29d837b5abe22de740ac96c8142422fce537a', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -635,7 +635,7 @@ const Input = class {
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, index.h("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, index.h("label", { key: '142a8230382a05938887e9c0790832218ac37697', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '953f247ea2f40545e01e0346549d9b7aa344b720', 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
@@ -645,14 +645,14 @@ const Input = class {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme$1 === 'ionic' && index.h("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), index.h("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), index.h("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 && (index.h("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme$1 === 'ionic' && index.h("div", { key: 'fd09b37c6a798900c5074e7cbe2e790ea050c29d', class: "input-outline" }), index.h("slot", { key: '3eef4c4748104d8722f3254a04ff88e2b70c560e', name: "start" }), index.h("input", Object.assign({ key: '012a3fa52e19422d7fbc227845e9771c7d8fbe4a', 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 && (index.h("button", { key: 'b115494d9611aea57a976d3102026f3d9b430bfb', "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 }, index.h("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'a259afa47a9914b2e0656364bed40644fa2c87c4', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: 'beec86eb500f6b335149c8734afc7c3945a10219', name: "end" })), shouldRenderHighlight && index.h("div", { key: '77a25d118934f369e09edbc2ffa6f90e3e760338', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-item-option_3.cjs.entry.js

@@ -70,14 +70,14 @@ const ItemOption = class {
                 href: this.href,
                 target: this.target,
             };
-        return (index.h(index.Host, { key: 'bfade0042108ff525077dfbdfd45169ccfd6b920', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '8f1bad23fd3ccbb9d54d57765e6731cd2ee07306', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, index.h(TagType, Object.assign({ key: '38466b511f4a20a3728f37dbf6779b852eba531a' }, attrs, { class: "button-native", part: "native", disabled: disabled }), index.h("span", { key: 'bb8f1b332afa2f575bcc69b340bd8f1faa5ca925', class: "button-inner", part: "inner" }, index.h("slot", { key: '41d627511e1615283956712e1b9519bae92460f6', name: "top" }), index.h("div", { key: 'bb949a43a586a8996933ee7528e5491beb647aa5', class: "horizontal-wrapper", part: "container" }, index.h("slot", { key: 'c0d6a73ef49082bfbdf0f542f7465d044ccb6521', name: "start" }), index.h("slot", { key: '79c6103e680983b2c1a17f1f11dbc41224cd4016', name: "icon-only" }), index.h("slot", { key: '6c7f17723544d3f6e8b9689b84ddf6196f1897a5' }), index.h("slot", { key: 'e15d0e02fde71bad8ff7bab0eded7d49508a926e', name: "end" })), index.h("slot", { key: 'c509d54d44ce33f5a34597b9d0ec29960bbcff62', name: "bottom" })), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '412d4dc645c941d0b4356cf982be3d5bc2686f13' }))));
+            }) }, index.h(TagType, Object.assign({ key: '2baf904e356a87ed463ee5f517e0e95f90b2ef30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), index.h("span", { key: '49b627f72dffd1b150ccd808b1b1f63bbe78e2de', class: "button-inner", part: "inner" }, index.h("slot", { key: 'cdb52f76f1d7e5df411215f17eb76ad25e36241a', name: "top" }), index.h("div", { key: '864204667c6e3ba6f989b24e96c131b67e55d408', class: "horizontal-wrapper", part: "container" }, index.h("slot", { key: '474f4aab708842bb7ef74cb6f1fbe601ceff82cf', name: "start" }), index.h("slot", { key: '2bd726c5ba3ee079a623f1f6229d1ac2afd3e291', name: "icon-only" }), index.h("slot", { key: '2d1a673c447ebf82c92f944ec9e83a5b38698307' }), index.h("slot", { key: '8d0f9337cd84c725190cffd25d74044075e85ab0', name: "end" })), index.h("slot", { key: 'a674039b26d9cbb886e88ea721bbc210484aba9f', name: "bottom" })), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '3e45bf18b7992943c47ece47e9358f4da0b8e865' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -112,7 +112,7 @@ const ItemOptions = class {
     render() {
         const theme = ionicGlobal.getIonTheme(this);
         const isEnd = helpers.isEndSide(this.side);
-        return (index.h(index.Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
+        return (index.h(index.Host, { key: 'ed05ceebf2cda943ac9efea2f91b71f7e8fc55e8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,
@@ -906,7 +906,7 @@ const ItemSliding = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'e6890a1b14faaf9121a07912b1c2f46e06148202', class: {
+        return (index.h(index.Host, { key: '47de8c8a9721f9223b42d6722a9ad32f378818aa', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

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

@@ -310,11 +310,11 @@ const ItemDivider = class {
     }
     render() {
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'ede65c17ec8e42e4096f8753116923d6b8d2cc14', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'dc73f348b5376faa40ba4bc6bba3d5c9e5ec5ab2', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, index.h("slot", { key: '4e16384a4481326490dab1ad31218c19eb9108db', name: "start" }), index.h("div", { key: '0bddbea071781e3372b5c7147c2fdd3ba0e29ffe', class: "item-divider-inner", part: "inner" }, index.h("div", { key: 'dfa603352f7cc58aaa717a32507b1dbbd7b79757', class: "item-divider-wrapper", part: "container" }, index.h("slot", { key: '4b1b67cfe72266645943f88ede9f8c61a344967d' })), index.h("slot", { key: '6ddd72a410c449e281f5344d02324e7461ba29e8', name: "end" }))));
+            }) }, index.h("slot", { key: '0f535b2cf91f2ec042aa59a89498cfa0e4d541a0', name: "start" }), index.h("div", { key: '867c8c1a1bd273a5f5018f77785f11d58152e8b9', class: "item-divider-inner", part: "inner" }, index.h("div", { key: 'c32b2a5658d27cf5d8cd8ffbfa476c02755e1afd', class: "item-divider-wrapper", part: "container" }, index.h("slot", { key: 'f8b0fea29a910cd2e36301586532be3a8348c31e' })), index.h("slot", { key: '418750f630c851cf04b6a278c1666c6cf33c113c', name: "end" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -336,7 +336,7 @@ const ItemGroup = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '66ad8ce335cd97703e884538bdf6ea1927a30889', role: "group", class: {
+        return (index.h(index.Host, { key: '017c8f7cd0258e1864423337ddd1b1cb522f64ed', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,
@@ -410,13 +410,13 @@ const Label = class {
     render() {
         const position = this.position;
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'b1f261db441bcb0a325a5b3e21da17764a56f17c', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, index.h("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
+            }) }, index.h("slot", { key: '490444c8c0d4cf72eae3f8abfb7ed7ecc30bb213' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -480,7 +480,7 @@ const List = class {
         const theme = ionicGlobal.getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (index.h(index.Host, { key: 'f17f7af20c567ea0098b362ea04d051b44aa151a', role: "list", class: {
+        return (index.h(index.Host, { key: '9be30ff6e75e020c0db7054800cb874efef26bd8', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,
@@ -511,10 +511,10 @@ const ListHeader = class {
     render() {
         const { lines } = this;
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '90c594b0290949b159f35bd36c86c3231a1b8e44', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '7a1632a069317285210f4aeae50a6f2ef6955c56', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, index.h("div", { key: '9d1bde129787263edb79bc921cdf0168a2935a27', class: "list-header-inner", part: "inner" }, index.h("slot", { key: 'fe157b5ff88355adfb09209ee92fd03c82e067ff' }))));
+            }) }, index.h("div", { key: 'a9a9463f209023da222f38a78126d5aaeb2f03b9', class: "list-header-inner", part: "inner" }, index.h("slot", { key: 'e3c6ec1b588392d347844d59d338abc339e80634' }))));
     }
 };
 ListHeader.style = {
@@ -535,9 +535,9 @@ const Note = class {
     }
     render() {
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '34a74796fc2e41549100c6611a5900d60c8d688d', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '376ae1c66c19d1bdd74a2371c0639ed9e49648b5', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
-            }) }, index.h("slot", { key: 'ea4c2e3b5666d10ca312e175db200134d8a30382' })));
+            }) }, index.h("slot", { key: 'f8168cd88bb21c5e5a2b03c29539729fb38a19fd' })));
     }
 };
 Note.style = {
@@ -573,11 +573,11 @@ const SkeletonText = class {
         const animated = this.animated && index.config.getBoolean('animated', true);
         const inMedia = theme.hostContext('ion-avatar', this.el) || theme.hostContext('ion-thumbnail', this.el);
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'aa94213767105077047a369d4e4861027af96060', class: {
+        return (index.h(index.Host, { key: '370451ee8963b776079f5df365f7bbd70a53b270', class: {
                 [theme$1]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, index.h("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, index.h("span", { key: '2b861b4ec86cbd61927ab7b81b13517c99dc94c7' }, "\u00A0")));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -280,9 +280,9 @@ const Loading = class {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (index.h(index.Host, Object.assign({ key: 'b1e84a0d078fac04c0736a19d067d8d49e339323', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: '2ffae36b20a7d7f3a752a062d90062583e31d053', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '19884fd6f8bf6f704bff388ecfa245d1cd98156c', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'ecd47d503a9805a5c18f1b0d48989e54b4cb8f78', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '231821576b812ffaa90ed9ced4437e456908ad53', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: 'e18d21751a73f408bd058aa4270f245285cd57fa', class: "loading-spinner" }, index.h("ion-spinner", { key: '478761b8a000191951e9902138483b389e1b76c4', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: '968be6c72872ce5bc8706fa37f242dcdc38efb33', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'a6d8cac2c34a0905ec67a2c64be7ec12cc84f168', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'cd011d86f20869096a8546f098fb5edad44033a1', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '70298be2139d6004e0f8fc5a85c5d05f1efdc347', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '32aef90695d91e0a82696abbce96ba29cb1a2608', class: "loading-spinner" }, index.h("ion-spinner", { key: '7ae69c27be273cf3e83230dae043168df27ac27e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: 'f13a01b31516c3fe85dd3a623962290c03e7412f', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -666,14 +666,14 @@ const Menu = class {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (index.h(index.Host, { key: 'd42a7b48a1464a4d71188e3a31f719c5dc296d77', onKeyDown: ionicGlobal.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (index.h(index.Host, { key: '76e15d710fbbbd2e64795224decc3673fd160db0', onKeyDown: ionicGlobal.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [theme$1]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': theme.hostContext('ion-split-pane', el),
-            } }, index.h("div", { key: '3ffcedd178c412771657599f3d5de2cd2a717c00', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '2d8dfdb569c4b433cbacbe2aee8a12954e157a51' })), index.h("ion-backdrop", { key: 'e1fcbdcf6bd3aa0fa10dcf05a2b012bef196a243', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, index.h("div", { key: 'cc0a0773caff97aefa98015bf3e36631173d2b4f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '0b90d1248bdf3bedafda7913189635c8d010abb6' })), index.h("ion-backdrop", { key: '4fb7013bc61161e6e336541ed25605219410f749', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -774,7 +774,7 @@ const MenuButton = class {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (index.h(index.Host, { key: 'd150818e749a1cbe72dc05011247023f6d442eb8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '341ca3bfac81ce4432eef5d2fd738becd1dfb07e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: theme.createColorClasses(color, {
                 [theme$1]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -783,7 +783,7 @@ const MenuButton = class {
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, index.h("button", Object.assign({ key: '88bef93aa6c1a0d5795c4a9ba3edffd99413a758' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), index.h("span", { key: '12b2f8bc542239a35adee62d76acccff571a84d7', class: "button-inner" }, index.h("slot", { key: '5bba549d8e92745aa34372c105cfe80e0ecbc9f5' }, index.h("ion-icon", { key: '864ff8bf1722b7fe1f17f2a40dfc5b91cb3403f9', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '59e24ecb22970e43b51739324b11457c6e4bc117', type: "unbounded" }))));
+            }) }, index.h("button", Object.assign({ key: '6e6229df2fc1f2d18294a5fbf7fe71e7dd47666a' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), index.h("span", { key: '0216acbf67d7aa5edc52328f7ded4cb98bc8a237', class: "button-inner" }, index.h("slot", { key: '5c2cdae42add9a25d3e6323048fcbc6b5fc9b32e' }, index.h("ion-icon", { key: '5b38c283957cd2f1ad659427dec612fc84fc054f', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'adabe4ffa1d66fe36d55294d774db9c4bba1ad76', type: "unbounded" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -819,10 +819,10 @@ const MenuToggle = class {
     render() {
         const theme = ionicGlobal.getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (index.h(index.Host, { key: '973372d778e7902eac28b2a6a5e74165b51d60d6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (index.h(index.Host, { key: '9ef631d9ae370a8740e691d281863203bfdddc38', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, index.h("slot", { key: '760b8ffe93ae490b62f7ad6fc94ecbc8521ead64' })));
+            } }, index.h("slot", { key: 'f8d9dfc562ed625ae47ec771ef6b2ea04bc463f4' })));
     }
 };
 MenuToggle.style = menuToggleCss();