@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
-var theme = require('./theme-CeDs6Hcv.js');
+var index = require('./index-uvry__L4.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var theme = require('./theme-Bw0rpaNN.js');
 
 const avatarIosCss = () => `:host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;-o-object-fit:cover;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}`;
 
@@ -32,6 +32,12 @@ const Badge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     render() {
         const mode = ionicGlobal.getIonMode(this);
         return (index.h(index.Host, { key: '1a2d39c5deec771a2f2196447627b62a7d4c8389', class: theme.createColorClasses(this.color, {
@@ -51,7 +57,7 @@ const Thumbnail = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
+        return (index.h(index.Host, { key: 'ff9d2a4886b1c90a316c761f1160111f0e997f5d', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '9a0f0d69e3713831e88c8770a60b28ff1a03abb6' })));
     }
 };
 Thumbnail.style = thumbnailCss();

package/dist/cjs/ion-back-button.cjs.entry.js

@@ -3,12 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var helpers = require('./helpers-DdZyl6WL.js');
-var theme = require('./theme-CeDs6Hcv.js');
-var index$1 = require('./index-DqmRDbxg.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
-require('./dir-DD0jPVH3.js');
+var index = require('./index-uvry__L4.js');
+var helpers = require('./helpers-YPQybDph.js');
+var theme = require('./theme-Bw0rpaNN.js');
+var index$1 = require('./index-wOmugbdg.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+require('./dir-zwDPRE5K.js');
 
 const backButtonIosCss = () => `:host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}`;
 
@@ -17,24 +17,41 @@ const backButtonMdCss = () => `:host{--background:transparent;--color-focused:cu
 const BackButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.onClick = async (ev) => {
-            const nav = this.el.closest('ion-nav');
-            ev.preventDefault();
-            if (nav && (await nav.canGoBack())) {
-                return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
-            }
-            return theme.openURL(this.defaultHref, ev, 'back', this.routerAnimation);
-        };
     }
+    inheritedAttributes = {};
+    get el() { return index.getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The url to navigate back to by default when there is no history.
+     */
+    defaultHref;
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    disabled = false;
+    /**
+     * The built-in named SVG icon name or the exact `src` of an SVG file
+     * to use for the back button.
+     */
+    icon;
+    /**
+     * The text to display in the back button.
+     */
+    text;
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page.
+     */
+    routerAnimation;
     componentWillLoad() {
         this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
         if (this.defaultHref === undefined) {
@@ -69,6 +86,14 @@ const BackButton = class {
         }
         return 'bounded';
     }
+    onClick = async (ev) => {
+        const nav = this.el.closest('ion-nav');
+        ev.preventDefault();
+        if (nav && (await nav.canGoBack())) {
+            return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
+        }
+        return theme.openURL(this.defaultHref, ev, 'back', this.routerAnimation);
+    };
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;
@@ -86,7 +111,6 @@ const BackButton = class {
                 'show-back-button': showBackButton,
             }) }, index.h("button", { key: '63bc75ef0ad7cc9fb79e58217a3314b20acd73e3', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, index.h("span", { key: '5d3eacbd11af2245c6e1151cab446a0d96559ad8', class: "button-inner" }, backButtonIcon && (index.h("ion-icon", { key: '6439af0ae463764174e7d3207f02267811df666d', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (index.h("span", { key: '8ee89fb18dfdb5b75948a8b197ff4cdbc008742f', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && index.h("ion-ripple-effect", { key: '63803a884998bc73bea5afe0b2a0a14e3fa4d6bf', type: this.rippleType }))));
     }
-    get el() { return index.getElement(this); }
 };
 BackButton.style = {
     ios: backButtonIosCss(),

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
+var index = require('./index-uvry__L4.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
 
 const backdropIosCss = () => `:host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}`;
 
@@ -14,19 +14,23 @@ const Backdrop = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionBackdropTap = index.createEvent(this, "ionBackdropTap", 7);
-        /**
-         * If `true`, the backdrop will be visible.
-         */
-        this.visible = true;
-        /**
-         * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
-         */
-        this.tappable = true;
-        /**
-         * If `true`, the backdrop will stop propagation on tap.
-         */
-        this.stopPropagation = true;
     }
+    /**
+     * If `true`, the backdrop will be visible.
+     */
+    visible = true;
+    /**
+     * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+     */
+    tappable = true;
+    /**
+     * If `true`, the backdrop will stop propagation on tap.
+     */
+    stopPropagation = true;
+    /**
+     * Emitted when the backdrop is tapped.
+     */
+    ionBackdropTap;
     onMouseDown(ev) {
         this.emitTap(ev);
     }

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

@@ -3,12 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var helpers = require('./helpers-DdZyl6WL.js');
-var theme = require('./theme-CeDs6Hcv.js');
-var index$1 = require('./index-DqmRDbxg.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
-require('./dir-DD0jPVH3.js');
+var index = require('./index-uvry__L4.js');
+var helpers = require('./helpers-YPQybDph.js');
+var theme = require('./theme-Bw0rpaNN.js');
+var index$1 = require('./index-wOmugbdg.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+require('./dir-zwDPRE5K.js');
 
 const breadcrumbIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;align-items:center;color:var(--color);font-size:1rem;font-weight:400;line-height:1.5}.breadcrumb-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:-ms-inline-flexbox;display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex:1 1 100%;flex:1 1 100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:1.375rem}:host{--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--color-active);--background-focused:var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));font-size:clamp(16px, 1rem, 22px)}:host(.breadcrumb-active){font-weight:600}.breadcrumb-native{border-radius:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:5px;padding-bottom:5px;border:1px solid transparent}:host(.ion-focused) .breadcrumb-native{border-radius:8px}:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,:host(.ion-color.ion-focused) .breadcrumb-native{background:rgba(var(--ion-color-base-rgb), 0.1);color:var(--ion-color-base)}:host(.ion-focused) ::slotted(ion-icon),:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),:host(.ion-color.ion-focused) ::slotted(ion-icon){color:var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78))}.breadcrumb-separator{color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}::slotted(ion-icon){color:var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));font-size:min(1.125rem, 21.6px)}::slotted(ion-icon[slot=start]){-webkit-margin-end:8px;margin-inline-end:8px}::slotted(ion-icon[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39))}.breadcrumbs-collapsed-indicator{border-radius:4px;background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}.breadcrumbs-collapsed-indicator:hover{opacity:0.45}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea))}.breadcrumbs-collapsed-indicator ion-icon{font-size:min(1.375rem, 22px)}`;
 
@@ -20,40 +20,103 @@ const Breadcrumb = class {
         this.ionFocus = index.createEvent(this, "ionFocus", 7);
         this.ionBlur = index.createEvent(this, "ionBlur", 7);
         this.collapsedClick = index.createEvent(this, "collapsedClick", 7);
-        this.inheritedAttributes = {};
-        /** @internal */
-        this.collapsed = false;
-        /**
-         * If `true`, the breadcrumb will take on a different look to show that
-         * it is the currently active breadcrumb. Defaults to `true` for the
-         * last breadcrumb if it is not set on any.
-         */
-        this.active = false;
-        /**
-         * If `true`, the user cannot interact with the breadcrumb.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.collapsedIndicatorClick = () => {
-            this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
-        };
     }
+    inheritedAttributes = {};
+    collapsedRef;
+    /** @internal */
+    collapsed = false;
+    /** @internal */
+    last;
+    /** @internal */
+    showCollapsedIndicator;
+    get el() { return index.getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the breadcrumb will take on a different look to show that
+     * it is the currently active breadcrumb. Defaults to `true` for the
+     * last breadcrumb if it is not set on any.
+     */
+    active = false;
+    /**
+     * If `true`, the user cannot interact with the breadcrumb.
+     */
+    disabled = false;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * If true, show a separator between this breadcrumb and the next.
+     * Defaults to `true` for all breadcrumbs except the last.
+     */
+    separator;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    routerDirection = 'forward';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page using `href`.
+     */
+    routerAnimation;
+    /**
+     * Emitted when the breadcrumb has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the breadcrumb loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the collapsed indicator is clicked on.
+     * `ion-breadcrumbs` will listen for this and emit ionCollapsedClick.
+     * Normally we could just emit this as `ionCollapsedClick`
+     * and let the event bubble to `ion-breadcrumbs`,
+     * but if the event custom event is not set on `ion-breadcrumbs`,
+     * TypeScript will throw an error in user applications.
+     * @internal
+     */
+    collapsedClick;
     componentWillLoad() {
         this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
     }
     isClickable() {
         return this.href !== undefined;
     }
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    collapsedIndicatorClick = () => {
+        this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
+    };
     render() {
         const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
         const clickable = this.isClickable();
@@ -83,7 +146,7 @@ const Breadcrumb = class {
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, index.h(TagType, Object.assign({ key: '479feb845f4a6d8009d5422b33eb423730b9722b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), index.h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), index.h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), index.h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (index.h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, index.h(TagType, { key: '479feb845f4a6d8009d5422b33eb423730b9722b', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, index.h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), index.h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), index.h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (index.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,
             } }, index.h("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: index$1.ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
@@ -93,7 +156,6 @@ const Breadcrumb = class {
          */
         index.h("span", { key: 'fc3c741cb01fafef8b26046c7ee5b190efc69a7c', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, index.h("slot", { key: '4871932ae1dae520767e0713e7cee2d11b0bba6d', name: "separator" }, mode === 'ios' ? (index.h("ion-icon", { icon: index$1.chevronForwardOutline, lazy: false, "flip-rtl": true })) : (index.h("span", null, "/")))))));
     }
-    get el() { return index.getElement(this); }
 };
 Breadcrumb.style = {
     ios: breadcrumbIosCss(),
@@ -108,96 +170,40 @@ const Breadcrumbs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionCollapsedClick = index.createEvent(this, "ionCollapsedClick", 7);
-        /**
-         * The number of breadcrumbs to show before the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsBeforeCollapse = 1;
-        /**
-         * The number of breadcrumbs to show after the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsAfterCollapse = 1;
-        this.breadcrumbsInit = () => {
-            this.setBreadcrumbSeparator();
-            this.setMaxItems();
-        };
-        this.resetActiveBreadcrumb = () => {
-            const breadcrumbs = this.getBreadcrumbs();
-            // Only reset the active breadcrumb if we were the ones to change it
-            // otherwise use the one set on the component
-            const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            if (activeBreadcrumb && this.activeChanged) {
-                activeBreadcrumb.active = false;
-            }
-        };
-        this.setMaxItems = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            for (const breadcrumb of breadcrumbs) {
-                breadcrumb.showCollapsedIndicator = false;
-                breadcrumb.collapsed = false;
-            }
-            // If the number of breadcrumbs exceeds the maximum number of items
-            // that should show and the items before / after collapse do not
-            // exceed the maximum items then we need to collapse the breadcrumbs
-            const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-            if (shouldCollapse) {
-                // Show the collapsed indicator in the first breadcrumb that collapses
-                breadcrumbs.forEach((breadcrumb, index) => {
-                    if (index === itemsBeforeCollapse) {
-                        breadcrumb.showCollapsedIndicator = true;
-                    }
-                    // Collapse all breadcrumbs that have an index greater than or equal to
-                    // the number before collapse and an index less than the total number
-                    // of breadcrumbs minus the items that should show after the collapse
-                    if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-                        breadcrumb.collapsed = true;
-                    }
-                });
-            }
-        };
-        this.setBreadcrumbSeparator = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            // Check if an active breadcrumb exists already
-            const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            // Set the separator on all but the last breadcrumb
-            for (const breadcrumb of breadcrumbs) {
-                // The only time the last breadcrumb changes is when
-                // itemsAfterCollapse is set to 0, in this case the
-                // last breadcrumb will be the collapsed indicator
-                const last = maxItems !== undefined && itemsAfterCollapse === 0
-                    ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
-                    : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
-                breadcrumb.last = last;
-                // If the breadcrumb has defined whether or not to show the
-                // separator then use that value, otherwise check if it's the
-                // last breadcrumb
-                const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
-                breadcrumb.separator = separator;
-                // If there is not an active breadcrumb already
-                // set the last one to active
-                if (!active && last) {
-                    breadcrumb.active = true;
-                    this.activeChanged = true;
-                }
-            }
-        };
-        this.getBreadcrumbs = () => {
-            return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
-        };
-        this.slotChanged = () => {
-            this.resetActiveBreadcrumb();
-            this.breadcrumbsInit();
-        };
     }
+    collapsed;
+    activeChanged;
+    get el() { return index.getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The maximum number of breadcrumbs to show before collapsing.
+     */
+    maxItems;
+    /**
+     * The number of breadcrumbs to show before the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsBeforeCollapse = 1;
+    /**
+     * The number of breadcrumbs to show after the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsAfterCollapse = 1;
+    /**
+     * Emitted when the collapsed indicator is clicked on.
+     */
+    ionCollapsedClick;
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-        this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
+        this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
     }
     maxItemsChanged() {
         this.resetActiveBreadcrumb();
@@ -206,6 +212,79 @@ const Breadcrumbs = class {
     componentWillLoad() {
         this.breadcrumbsInit();
     }
+    breadcrumbsInit = () => {
+        this.setBreadcrumbSeparator();
+        this.setMaxItems();
+    };
+    resetActiveBreadcrumb = () => {
+        const breadcrumbs = this.getBreadcrumbs();
+        // Only reset the active breadcrumb if we were the ones to change it
+        // otherwise use the one set on the component
+        const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        if (activeBreadcrumb && this.activeChanged) {
+            activeBreadcrumb.active = false;
+        }
+    };
+    setMaxItems = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        for (const breadcrumb of breadcrumbs) {
+            breadcrumb.showCollapsedIndicator = false;
+            breadcrumb.collapsed = false;
+        }
+        // If the number of breadcrumbs exceeds the maximum number of items
+        // that should show and the items before / after collapse do not
+        // exceed the maximum items then we need to collapse the breadcrumbs
+        const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
+        if (shouldCollapse) {
+            // Show the collapsed indicator in the first breadcrumb that collapses
+            breadcrumbs.forEach((breadcrumb, index) => {
+                if (index === itemsBeforeCollapse) {
+                    breadcrumb.showCollapsedIndicator = true;
+                }
+                // Collapse all breadcrumbs that have an index greater than or equal to
+                // the number before collapse and an index less than the total number
+                // of breadcrumbs minus the items that should show after the collapse
+                if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
+                    breadcrumb.collapsed = true;
+                }
+            });
+        }
+    };
+    setBreadcrumbSeparator = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        // Check if an active breadcrumb exists already
+        const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        // Set the separator on all but the last breadcrumb
+        for (const breadcrumb of breadcrumbs) {
+            // The only time the last breadcrumb changes is when
+            // itemsAfterCollapse is set to 0, in this case the
+            // last breadcrumb will be the collapsed indicator
+            const last = maxItems !== undefined && itemsAfterCollapse === 0
+                ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
+                : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+            breadcrumb.last = last;
+            // If the breadcrumb has defined whether or not to show the
+            // separator then use that value, otherwise check if it's the
+            // last breadcrumb
+            const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
+            breadcrumb.separator = separator;
+            // If there is not an active breadcrumb already
+            // set the last one to active
+            if (!active && last) {
+                breadcrumb.active = true;
+                this.activeChanged = true;
+            }
+        }
+    };
+    getBreadcrumbs = () => {
+        return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
+    };
+    slotChanged = () => {
+        this.resetActiveBreadcrumb();
+        this.breadcrumbsInit();
+    };
     render() {
         const { color, collapsed } = this;
         const mode = ionicGlobal.getIonMode(this);
@@ -216,7 +295,6 @@ const Breadcrumbs = class {
                 'breadcrumbs-collapsed': collapsed,
             }) }, index.h("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "maxItems": [{
                 "maxItemsChanged": 0