voyager-ionic-core 8.3.4 → 8.4.0

package/components/header.js

@@ -0,0 +1,356 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
+import { k as clamp, i as inheritAriaAttributes } from './helpers.js';
+import { h as hostContext } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const TRANSITION = 'all 0.2s ease-in-out';
+const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};
+const createHeaderIndex = (headerEl) => {
+    if (!headerEl) {
+        return;
+    }
+    const toolbars = headerEl.querySelectorAll('ion-toolbar');
+    return {
+        el: headerEl,
+        toolbars: Array.from(toolbars).map((toolbar) => {
+            const ionTitleEl = toolbar.querySelector('ion-title');
+            return {
+                el: toolbar,
+                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
+                ionTitleEl,
+                innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
+                ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')),
+            };
+        }),
+    };
+};
+const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
+        // Native refresher should not cause titles to scale
+        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
+        if (nativeRefresher === null) {
+            writeTask(() => {
+                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+            });
+        }
+    });
+};
+const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+    /**
+     * Fading in the backdrop opacity
+     * should happen after the large title
+     * has collapsed, so it is handled
+     * by handleHeaderFade()
+     */
+    if (headerEl.collapse === 'fade') {
+        return;
+    }
+    if (opacity === undefined) {
+        headerEl.style.removeProperty('--opacity-scale');
+    }
+    else {
+        headerEl.style.setProperty('--opacity-scale', opacity.toString());
+    }
+};
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
+    if (!ev[0].isIntersecting) {
+        return;
+    }
+    /**
+     * There is a bug in Safari where overflow scrolling on a non-body element
+     * does not always reset the scrollTop position to 0 when letting go. It will
+     * set to 1 once the rubber band effect has ended. This causes the background to
+     * appear slightly on certain app setups.
+     *
+     * Additionally, we check if user is rubber banding (scrolling is negative)
+     * as this can mean they are using pull to refresh. Once the refresher starts,
+     * the content is transformed which can cause the intersection observer to erroneously
+     * fire here as well.
+     */
+    const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+    setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
+};
+/**
+ * If toolbars are intersecting, hide the scrollable toolbar content
+ * and show the primary toolbar content. If the toolbars are not intersecting,
+ * hide the primary toolbar content and show the scrollable toolbar content
+ */
+const handleToolbarIntersection = (ev, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
+mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
+    writeTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
+        const event = ev[0];
+        const intersection = event.intersectionRect;
+        const intersectionArea = intersection.width * intersection.height;
+        const rootArea = event.rootBounds.width * event.rootBounds.height;
+        const isPageHidden = intersectionArea === 0 && rootArea === 0;
+        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
+        if (isPageHidden || isPageTransitioning) {
+            return;
+        }
+        if (event.isIntersecting) {
+            setHeaderActive(mainHeaderIndex, false);
+            setHeaderActive(scrollHeaderIndex);
+        }
+        else {
+            /**
+             * There is a bug with IntersectionObserver on Safari
+             * where `event.isIntersecting === false` when cancelling
+             * a swipe to go back gesture. Checking the intersection
+             * x, y, width, and height provides a workaround. This bug
+             * does not happen when using Safari + Web Animations,
+             * only Safari + CSS Animations.
+             */
+            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
+            if (hasValidIntersection && scrollTop > 0) {
+                setHeaderActive(mainHeaderIndex);
+                setHeaderActive(scrollHeaderIndex, false);
+                setToolbarBackgroundOpacity(mainHeaderIndex.el);
+            }
+        }
+    });
+};
+const setHeaderActive = (headerIndex, active = true) => {
+    const headerEl = headerIndex.el;
+    if (active) {
+        headerEl.classList.remove('header-collapse-condense-inactive');
+        headerEl.removeAttribute('aria-hidden');
+    }
+    else {
+        headerEl.classList.add('header-collapse-condense-inactive');
+        headerEl.setAttribute('aria-hidden', 'true');
+    }
+};
+const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
+    toolbars.forEach((toolbar) => {
+        const ionTitle = toolbar.ionTitleEl;
+        const titleDiv = toolbar.innerTitleEl;
+        if (!ionTitle || ionTitle.size !== 'large') {
+            return;
+        }
+        titleDiv.style.transition = transition ? TRANSITION : '';
+        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+    });
+};
+const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const baseElHeight = baseEl.clientHeight;
+        const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
+        /**
+         * If we are using fade header with a condense
+         * header, then the toolbar backgrounds should
+         * not begin to fade in until the condense
+         * header has fully collapsed.
+         *
+         * Additionally, the main content should not
+         * overflow out of the container until the
+         * condense header has fully collapsed. When
+         * using just the condense header the content
+         * should overflow out of the container.
+         */
+        if (condenseHeader !== null && scrollTop < fadeStart) {
+            baseEl.style.setProperty('--opacity-scale', '0');
+            scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
+            return;
+        }
+        const distanceToStart = scrollTop - fadeStart;
+        const fadeDuration = 10;
+        const scale = clamp(0, distanceToStart / fadeDuration, 1);
+        writeTask(() => {
+            scrollEl.style.removeProperty('clip-path');
+            baseEl.style.setProperty('--opacity-scale', scale.toString());
+        });
+    });
+};
+
+const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+const IonHeaderIosStyle0 = headerIosCss;
+
+const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
+const IonHeaderMdStyle0 = headerMdCss;
+
+const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inheritedAttributes = {};
+        this.setupFadeHeader = async (contentEl, condenseHeader) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+        };
+        this.collapse = undefined;
+        this.translucent = false;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.checkCollapsibleHeader();
+    }
+    componentDidUpdate() {
+        this.checkCollapsibleHeader();
+    }
+    disconnectedCallback() {
+        this.destroyCollapsibleHeader();
+    }
+    async checkCollapsibleHeader() {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
+            return;
+        }
+        const { collapse } = this;
+        const hasCondense = collapse === 'condense';
+        const hasFade = collapse === 'fade';
+        this.destroyCollapsibleHeader();
+        if (hasCondense) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            // Cloned elements are always needed in iOS transition
+            writeTask(() => {
+                const title = cloneElement('ion-title');
+                title.size = 'large';
+                cloneElement('ion-back-button');
+            });
+            await this.setupCondenseHeader(contentEl, pageEl);
+        }
+        else if (hasFade) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (!contentEl) {
+                printIonContentErrorMsg(this.el);
+                return;
+            }
+            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
+            await this.setupFadeHeader(contentEl, condenseHeader);
+        }
+    }
+    destroyCollapsibleHeader() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = undefined;
+        }
+        if (this.scrollEl && this.contentScrollCallback) {
+            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+            this.contentScrollCallback = undefined;
+        }
+        if (this.collapsibleMainHeader) {
+            this.collapsibleMainHeader.classList.remove('header-collapse-main');
+            this.collapsibleMainHeader = undefined;
+        }
+    }
+    async setupCondenseHeader(contentEl, pageEl) {
+        if (!contentEl || !pageEl) {
+            printIonContentErrorMsg(this.el);
+            return;
+        }
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.scrollEl = await getScrollElement(contentEl);
+        const headers = pageEl.querySelectorAll('ion-header');
+        this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+        if (!this.collapsibleMainHeader) {
+            return;
+        }
+        const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
+        const scrollHeaderIndex = createHeaderIndex(this.el);
+        if (!mainHeaderIndex || !scrollHeaderIndex) {
+            return;
+        }
+        setHeaderActive(mainHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
+        /**
+         * Handle interaction between toolbar collapse and
+         * showing/hiding content in the primary ion-header
+         * as well as progressively showing/hiding the main header
+         * border as the top-most toolbar collapses or expands.
+         */
+        const toolbarIntersection = (ev) => {
+            handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
+        };
+        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
+            root: contentEl,
+            threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+        });
+        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
+        /**
+         * Handle scaling of large iOS titles and
+         * showing/hiding border on last toolbar
+         * in primary header
+         */
+        this.contentScrollCallback = () => {
+            handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+        };
+        this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
+        writeTask(() => {
+            if (this.collapsibleMainHeader !== undefined) {
+                this.collapsibleMainHeader.classList.add('header-collapse-main');
+            }
+        });
+    }
+    render() {
+        const { translucent, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const collapse = this.collapse || 'none';
+        // banner role must be at top level, so remove role if inside a menu
+        const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+        return (h(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
+                [mode]: true,
+                // Used internally for styling
+                [`header-${mode}`]: true,
+                [`header-translucent`]: this.translucent,
+                [`header-collapse-${collapse}`]: true,
+                [`header-translucent-${mode}`]: this.translucent,
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), h("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: IonHeaderIosStyle0,
+        md: IonHeaderMdStyle0
+    }; }
+}, [36, "ion-header", {
+        "collapse": [1],
+        "translucent": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Header);
+            }
+            break;
+    } });
+}
+
+export { Header as H, defineCustomElement as d };

package/components/index4.js

@@ -231,7 +231,7 @@ const createMenuController = () => {
             menus.splice(index, 1);
         }
     };
-    const _setOpen = async (menu, shouldOpen, animated) => {
+    const _setOpen = async (menu, shouldOpen, animated, role) => {
         if (isAnimatingSync()) {
             return false;
         }
@@ -241,7 +241,7 @@ const createMenuController = () => {
                 await openedMenu.setOpen(false, false);
             }
         }
-        return menu._setOpen(shouldOpen, animated);
+        return menu._setOpen(shouldOpen, animated, role);
     };
     const _createAnimation = (type, menuCmp) => {
         const animationBuilder = menuAnimations.get(type); // TODO(FW-2832): type

package/components/ion-app.js

@@ -70,7 +70,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
+        return (h(Host, { key: '96715520fd05d6f0e6fa26a8ba78792cfccd4c0a', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/components/ion-avatar.js

@@ -17,7 +17,7 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
+        return (h(Host, { key: '998217066084f966bf5d356fed85bcbd451f675a', class: getIonMode(this) }, h("slot", { key: '1a6f7c9d4dc6a875f86b5b3cda6d59cb39587f22' })));
     }
     static get style() { return {
         ios: IonAvatarIosStyle0,

package/components/ion-back-button.js

@@ -76,7 +76,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '8351c93a1812c94c979fb115f07a9ad7b3152188', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '5466624a10f1ab56f5469e6dc07080303880f2fe', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -86,7 +86,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '991b8baa784dbfbdf8d3581cbbf6a858ac1f1e6e', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '929fcd83a4fdb00cf97ca803f234719171602a5e', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '0c10d412ae8342d96f221e626b421c9abadac748', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '96f505880a80f36ee8b8c78268b450f3629ee613', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '0aecf5d415c608069eb1a10043530bd0929b6383', type: this.rippleType }))));
+            }) }, h("button", { key: '63bc75ef0ad7cc9fb79e58217a3314b20acd73e3', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '5d3eacbd11af2245c6e1151cab446a0d96559ad8', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '6439af0ae463764174e7d3207f02267811df666d', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '8ee89fb18dfdb5b75948a8b197ff4cdbc008742f', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '63803a884998bc73bea5afe0b2a0a14e3fa4d6bf', type: this.rippleType }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-badge.js

@@ -20,9 +20,9 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '1253618692342bcf9487188402dc3d49ae0de480', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1a2d39c5deec771a2f2196447627b62a7d4c8389', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '71d65e203965ea37b94504a8a0a96beb52d4e356' })));
+            }) }, h("slot", { key: 'fc1b6587f1ed24715748eb6785e7fb7a57cdd5cd' })));
     }
     static get style() { return {
         ios: IonBadgeIosStyle0,

package/components/ion-breadcrumb.js

@@ -71,7 +71,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: 'dfe55ad57f23e5da5f2e2c51fea99964812472e3', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '32ca61c83721dff52b5e97171ed449dce3584a55', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -81,15 +81,15 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: 'e361b1f0e7de6dd5c5dd4f6deae72c2c8210466d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '9daeb45a8a28c89f3ad5751f71b8412197846371', name: "start" }), h("slot", { key: '4849e63cdffd6c712292745138b68730442c8b0d' }), h("slot", { key: '6edf9bac5aec06ccec2844efac2d9afa1d24cf57', name: "end" })), showCollapsedIndicator && (h("button", { key: 'de7f5faea75b44011b289d259265e2435a65874f', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '479feb845f4a6d8009d5422b33eb423730b9722b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { key: '957d8851af9c99dda263f34eff0b35a0fc212c32', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { key: '97d646c37c4c41ad6b12c3a543d1146fde06fc9a', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '0429f671a986f2d7be1b1b69fc879e80806d2916', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { key: 'fc3c741cb01fafef8b26046c7ee5b190efc69a7c', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '4871932ae1dae520767e0713e7cee2d11b0bba6d', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-breadcrumbs.js

@@ -112,12 +112,12 @@ const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class Breadcrumbs extends H
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '18ffba1642f10cc2bc31440e84f23aa6f042e501', class: createColorClasses(color, {
+        return (h(Host, { key: 'fe64e9cdf597ede2db140bf5fa05a0359d82db57', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: '3db6d31590e3047889ce554d57d155c8ea2e1455', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-card-content.js

@@ -17,7 +17,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '2a2d0b48aad4b83990a1748fce60e772514eb223', class: {
+        return (h(Host, { key: 'd98e4d1fc6ad3237549f9bc17e4c67ec5059b1b3', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

package/components/ion-card-header.js

@@ -21,11 +21,11 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '18d12507ec6e650a72d721e9d0f4128b5e86df1d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '64246b81931203a64d553c788cd736f41e23f37b', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '3374c087d8c3f014082787e255432e7a335ef44f' })));
+            }) }, h("slot", { key: 'af2da2dfe266889afeb57fac25c6a730558dbba4' })));
     }
     static get style() { return {
         ios: IonCardHeaderIosStyle0,

package/components/ion-card-subtitle.js

@@ -20,10 +20,10 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'cbcb01bd01cf6de64a0b04fb626e42b07ceb8f53', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '84d820a19d9074f9c8bc61ccba1ca40062a60b73', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'cbcaa73aa5799882c48d6c0aabfb13651bcc91c0' })));
+            }) }, h("slot", { key: 'e4d07d395a1f4469a90847636083101b32b776a1' })));
     }
     static get style() { return {
         ios: IonCardSubtitleIosStyle0,

package/components/ion-card-title.js

@@ -20,10 +20,10 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f904a0ca6489f147d03c9c5f9f2c5549cdb38d1a', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'fca001a86396e83718d5211cd71912fdf40dea2f', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'effb921de4ad8dfbbe318b3f692f4005812da7b1' })));
+            }) }, h("slot", { key: '2ba416aed488b2ff462fa75fb3b70373a6dd7da6' })));
     }
     static get style() { return {
         ios: IonCardTitleIosStyle0,

package/components/ion-card.js

@@ -55,7 +55,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8584300522f382ee8891c039d71da82533dfa36a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '85e9b30bd81e79a0c7ac75cb3664bdcf9e4afc4d', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

package/components/ion-chip.js

@@ -23,12 +23,12 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '7dd923c1b28d1eb1efa348f66f49cec067645af9', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", { key: '7ede838bf109dc27a898ee2dcdeabc3f439c8e6f' }), mode === 'md' && h("ion-ripple-effect", { key: '5acb073029544e73fcc0db4cc4e661ec1df4d231' })));
+            }) }, h("slot", { key: '3793fbd9d915cef7241fb101e2bc64c08b9ba482' }), mode === 'md' && h("ion-ripple-effect", { key: 'd3b95b53918611dec095a50f2aaaab65617947a4' })));
     }
     static get style() { return {
         ios: IonChipIosStyle0,

package/components/ion-col.js

@@ -138,9 +138,9 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c37fa4c4c993385ccbb6f4e89b2f390b140507a0', class: {
+        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6a5296ff0b9dee6600c2dafe7363a065d053bac2' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
     }
     static get style() { return IonColStyle0; }
 }, [1, "ion-col", {