@ionic/core 8.0.0-dev.11712932867.11504809 → 8.0.0-dev.11713893672.15a2b23e

package/components/ion-back-button.js

@@ -4,14 +4,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes } from './helpers.js';
 import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
-import { a as chevronBack, b as arrowBackSharp } from './index6.js';
-import { c as config, d as getIonTheme } from './ionic-global.js';
+import { a as chevronBack, b as arrowBackSharp } from './index7.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
-const ionicBackButtonMdCss = ":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{--border-radius:4px;--background-focused:currentColor;--background-focused-opacity:.12;--background-hover:currentColor;--background-hover-opacity:0.04;--color:currentColor;--icon-margin-end:0;--icon-margin-start:0;--icon-font-size:1.5rem;--icon-font-weight:normal;--min-height:32px;--min-width:44px;--padding-start:12px;--padding-end:12px;font-size:0.875rem;font-weight:500;text-transform:uppercase}:host(.back-button-has-icon-only){--border-radius:50%;min-width:48px;min-height:48px;aspect-ratio:1/1}.button-native{-webkit-box-shadow:none;box-shadow:none}.button-text{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0}ion-icon{line-height:0.67;text-align:start}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
-const IonBackButtonIonicStyle0 = ionicBackButtonMdCss;
-
 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}}";
 const IonBackButtonIosStyle0 = backButtonIosCss;
 
@@ -52,7 +49,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
             // icon is set on the component or by the config
             return icon;
         }
-        if (getIonTheme(this) === 'ios') {
+        if (getIonMode(this) === 'ios') {
             // default ios back button icon
             return config.get('backButtonIcon', chevronBack);
         }
@@ -60,7 +57,7 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
         return config.get('backButtonIcon', arrowBackSharp);
     }
     get backButtonText() {
-        const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
+        const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
         return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
     }
     get hasIconOnly() {
@@ -77,10 +74,10 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '01d115b1203a256e0cbd75bb982fd7ef310917ba', onClick: this.onClick, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: 'e233c0ccdeefd85b4e7170ca28beb2d528706db5', onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
                 'back-button-has-icon-only': hasIconOnly,
@@ -89,11 +86,10 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: 'e37e1c79da8337ad4f04cf6e4edd51ad7d4c0d69', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '7cfeae53736e5fbe4c5c31d259d0eb3ec0664643', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: 'a48e4ca9c1afefacc60766f910ea8349cdd3cce6', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '60bcc5fa226861b03b83a2b6fbad51284c295d4b', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     get el() { return this; }
     static get style() { return {
-        ionic: IonBackButtonIonicStyle0,
         ios: IonBackButtonIosStyle0,
         md: IonBackButtonMdStyle0
     }; }

package/components/ion-badge.js

@@ -3,10 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicBadgeMdCss = ":host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--padding-top:3px;--padding-end:4px;--padding-bottom:4px;--padding-start:4px;border-radius:4px}";
-const IonBadgeIonicStyle0 = ionicBadgeMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const badgeIosCss = ":host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";
 const IonBadgeIosStyle0 = badgeIosCss;
@@ -22,13 +19,12 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.color = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '0834ff32b44532d37e4821e3a324ca7693ff1a99', class: createColorClasses(this.color, {
-                [theme]: true,
-            }) }, h("slot", { key: '8d8a1f093861fa92ebe44af0f24333c732128e92' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'cd1425d016a570b34dd42044fe79b42e6c984e86', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: '29d2258c9e242f5fc1d85e2df5288edcfb038c8b' })));
     }
     static get style() { return {
-        ionic: IonBadgeIonicStyle0,
         ios: IonBadgeIosStyle0,
         md: IonBadgeMdStyle0
     }; }

package/components/ion-breadcrumb.js

@@ -4,13 +4,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes } from './helpers.js';
 import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
-import { e as ellipsisHorizontal, d as chevronForwardOutline } from './index6.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { e as ellipsisHorizontal, d as chevronForwardOutline } from './index7.js';
+import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const ionicBreadcrumbMdCss = ":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-600, var(--ion-text-color-step-400, #677483));--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));--background-focused:var(--ion-color-step-50, var(--ion-background-color-step-50, #fff))}:host(.breadcrumb-active){font-weight:500}.breadcrumb-native{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}.breadcrumb-separator{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:-1px}:host(.ion-focused) .breadcrumb-native{border-radius:4px;-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.12);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.12)}.breadcrumb-separator{color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}::slotted(ion-icon){color:var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));font-size:1.125rem}::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, #222d3a))}.breadcrumbs-collapsed-indicator{border-radius:2px;background:var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}.breadcrumbs-collapsed-indicator:hover{opacity:0.7}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8))}";
-const IonBreadcrumbIonicStyle0 = ionicBreadcrumbMdCss;
-
 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)}";
 const IonBreadcrumbIosStyle0 = breadcrumbIosCss;
 
@@ -62,7 +59,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         // Links can still be tabbed to when set to disabled if they have an href
         // in order to truly disable them we can keep it as an anchor but remove the href
         const href = disabled ? undefined : this.href;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const attrs = TagType === 'span'
             ? {}
             : {
@@ -74,8 +71,8 @@ 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: 'f8c8ff8902c58b20290366f1a6c2dc4539c090e4', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '7f6db640a81d6c44e22f5d7980b7e3c111c695f0', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+                [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
                 'breadcrumb-disabled': disabled,
@@ -84,7 +81,7 @@ 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: 'c33298acb311f76f1f268c3b9fa7a5f1d51de81d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '8a85ec300027360b65d957a47a405ebcc622682e', name: "start" }), h("slot", { key: 'c1040ad6ecebfc3dd16bdcb8932f3aea1602c46c' }), h("slot", { key: '5da8aebb66302508c1eac199789ad3c01560f9a9', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '897cbb8e7632ce86de24e71916392a6fecf40d6b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '8b420722f1cacc771903abb4bf86d7375cb60698', name: "start" }), h("slot", { key: '6945b283fbac7ca799de48938379c6f7b1926735' }), h("slot", { key: 'f27519c372bf6ab37d766ae945e3600baa3d2831', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
@@ -92,11 +89,10 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { name: "separator" }, theme === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { 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 {
-        ionic: IonBreadcrumbIonicStyle0,
         ios: IonBreadcrumbIosStyle0,
         md: IonBreadcrumbMdStyle0
     }; }

package/components/ion-breadcrumbs.js

@@ -3,10 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses, h as hostContext } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicBreadcrumbsMdCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0}";
-const IonBreadcrumbsIonicStyle0 = ionicBreadcrumbsMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const breadcrumbsIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;-ms-flex-pack:center;justify-content:center}";
 const IonBreadcrumbsIosStyle0 = breadcrumbsIosCss;
@@ -114,13 +111,13 @@ const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class Breadcrumbs extends H
     }
     render() {
         const { color, collapsed } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '7c9cd12e9ea20f10ce6f9d1fed9d38c97478dc4f', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '9cef93113d7c0d0bcab67d7790d8df915236dd59', 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: '20017edb9e4484eac37c93d78e7770b7f8e72e69', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '6e6b0e0a3297de16bf08ec107bbce4bb5f00b28c', onSlotchange: this.slotChanged })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -129,7 +126,6 @@ const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class Breadcrumbs extends H
         "itemsAfterCollapse": ["maxItemsChanged"]
     }; }
     static get style() { return {
-        ionic: IonBreadcrumbsIonicStyle0,
         ios: IonBreadcrumbsIosStyle0,
         md: IonBreadcrumbsMdStyle0
     }; }

package/components/ion-card-content.js

@@ -2,10 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicCardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:13px;padding-bottom:13px;font-size:0.875rem;line-height:1.5}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
-const IonCardContentIonicStyle0 = ionicCardContentMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;font-size:1rem;line-height:1.4}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:1.5rem;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:1rem;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:0.875rem;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:0.875rem}ion-card-header+.card-content-ios{padding-top:0}";
 const IonCardContentIosStyle0 = cardContentIosCss;
@@ -19,15 +16,14 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__registerHost();
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '923eae2e57e0fdadd9b389fc986e5ec711cb1ad8', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'c2146c75bb2e20dd975b144dd7a99c122d420aab', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`card-content-${theme}`]: true,
+                [`card-content-${mode}`]: true,
             } }));
     }
     static get style() { return {
-        ionic: IonCardContentIonicStyle0,
         ios: IonCardContentIosStyle0,
         md: IonCardContentMdStyle0
     }; }

package/components/ion-card-header.js

@@ -3,10 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicCardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
-const IonCardHeaderIonicStyle0 = ionicCardHeaderMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:16px;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}}";
 const IonCardHeaderIosStyle0 = cardHeaderIosCss;
@@ -23,15 +20,14 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
         this.translucent = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'ff96ee33852d6736ba8d0bcf290a59f5bebab112', class: createColorClasses(this.color, {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
-                [theme]: true,
-            }) }, h("slot", { key: '6746c3bd519e2e9618101c648c057237439d6b96' })));
+                [mode]: true,
+            }) }, h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
     }
     static get style() { return {
-        ionic: IonCardHeaderIonicStyle0,
         ios: IonCardHeaderIosStyle0,
         md: IonCardHeaderMdStyle0
     }; }

package/components/ion-card-subtitle.js

@@ -3,10 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicCardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:0.875rem;font-weight:500}";
-const IonCardSubtitleIonicStyle0 = ionicCardSubtitleMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:0.75rem;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
 const IonCardSubtitleIosStyle0 = cardSubtitleIosCss;
@@ -22,14 +19,13 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
         this.color = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'be9eb1d1b9cdb5ebd8d0ebf14f0d9f4ff302ccb8', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [theme]: true,
-            }) }, h("slot", { key: 'c009367fedb7fb8b4abe871c179d25d0161f3b81' })));
+                [mode]: true,
+            }) }, h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
     }
     static get style() { return {
-        ionic: IonCardSubtitleIonicStyle0,
         ios: IonCardSubtitleIosStyle0,
         md: IonCardSubtitleMdStyle0
     }; }

package/components/ion-card-title.js

@@ -3,10 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
-
-const ionicCardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;line-height:1.2}";
-const IonCardTitleIonicStyle0 = ionicCardTitleMdCss;
+import { b as getIonMode } from './ionic-global.js';
 
 const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:1.75rem;font-weight:700;line-height:1.2}";
 const IonCardTitleIosStyle0 = cardTitleIosCss;
@@ -22,14 +19,13 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
         this.color = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '9eb214dcdabd925db621af6cd9d5ccfaf0e244a0', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
-                [theme]: true,
-            }) }, h("slot", { key: '7cf3e81bd73437192c10d7db5ab3650791e0052a' })));
+                [mode]: true,
+            }) }, h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
     }
     static get style() { return {
-        ionic: IonCardTitleIonicStyle0,
         ios: IonCardTitleIosStyle0,
         md: IonCardTitleMdStyle0
     }; }

package/components/ion-card.js

@@ -4,12 +4,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as inheritAttributes } from './helpers.js';
 import { o as openURL, c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
-const cardIonicCss = ":host{--background:var(--ionic-color-neutral-0, #ffffff);--border-radius:var(--ionic-border-radius-rounded-small, 4px);-webkit-padding-start:var(--ionic-space-base, 16px);padding-inline-start:var(--ionic-space-base, 16px);-webkit-padding-end:var(--ionic-space-base, 16px);padding-inline-end:var(--ionic-space-base, 16px);padding-top:var(--ionic-space-base, 16px);padding-bottom:var(--ionic-space-base, 16px);border-radius:var(--border-radius);display:block;border:var(--ionic-border-size-small, 1px) solid var(--ionic-color-neutral-50, #e7e7e7);background:var(--background);color:var(--color)}:host(.card-round){--border-radius:var(--ionic-border-radius-rounded-large, 16px)}:host(.card-rectangular){--border-radius:var(--ionic-border-radius-square, 0)}";
-const IonCardIonicStyle0 = cardIonicCss;
-
 const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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:block;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1), -webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:0.875rem;-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1)}";
 const IonCardIosStyle0 = cardIosCss;
 
@@ -31,7 +28,6 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.rel = undefined;
         this.routerDirection = 'forward';
         this.routerAnimation = undefined;
-        this.shape = undefined;
         this.target = undefined;
     }
     componentWillLoad() {
@@ -40,7 +36,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     isClickable() {
         return this.href !== undefined || this.button;
     }
-    renderCard(theme) {
+    renderCard(mode) {
         const clickable = this.isClickable();
         if (!clickable) {
             return [h("slot", null)];
@@ -55,22 +51,18 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && theme === 'md' && h("ion-ripple-effect", null)));
+        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
     }
     render() {
-        const { shape } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '1dd2da5168f9edc92f8a4b029ae7cb41f60a53e9', class: createColorClasses(this.color, {
-                [theme]: true,
-                // TODO(FW-6119): remove theme === 'ionic' when support for other themes is added
-                [`card-${shape}`]: theme === 'ionic' && shape !== undefined,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '20989b44d99554e110bd2b41dca7f989f038dc5b', class: createColorClasses(this.color, {
+                [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),
-            }) }, this.renderCard(theme)));
+            }) }, this.renderCard(mode)));
     }
     get el() { return this; }
     static get style() { return {
-        ionic: IonCardIonicStyle0,
         ios: IonCardIosStyle0,
         md: IonCardMdStyle0
     }; }
@@ -84,7 +76,6 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         "rel": [1],
         "routerDirection": [1, "router-direction"],
         "routerAnimation": [16],
-        "shape": [513],
         "target": [1]
     }]);
 function defineCustomElement$1() {

package/components/ion-chip.js

@@ -3,12 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 
-const chipIonicCss = ":host{--background:var(--ionic-color-neutral-10, #f5f5f5);--border-color:transparent;--border-radius:var(--ionic-border-radius-rounded-small, 4px);--color:var(--ionic-color-neutral-900, #05080f);--focus-ring-color:#9ec4fd;--focus-ring-width:var(--ionic-border-size-medium, 2px);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--ionic-space-xxs, 6px);padding-inline-start:var(--ionic-space-xxs, 6px);-webkit-padding-end:var(--ionic-space-xxs, 6px);padding-inline-end:var(--ionic-space-xxs, 6px);padding-top:var(--ionic-space-xs, 8px);padding-bottom:var(--ionic-space-xs, 8px);border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--ionic-space-xxxs, 4px);min-height:32px;border-width:var(--ionic-border-size-small, 1px);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-size:var(--ionic-font-size-m, 14px);font-weight:var(--ionic-font-weight-medium, 500);line-height:var(--ionic-font-line-height-full, 100%);cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle}:host(.chip-outline){--background:transparent;border-color:var(--ionic-color-neutral-100, #dadada)}:host(.ion-focused){outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-width)}@media (any-hover: hover){:host(:hover){--background:rgba(5, 8, 15, 0.16)}}:host(.chip-disabled){opacity:0.6;pointer-events:none}:host(.chip-round){--border-radius:var(--ionic-border-radius-rounded-large, 16px)}:host(.chip-rectangular){--border-radius:var(--ionic-border-radius-square, 0)}::slotted(ion-icon){font-size:var(--ionic-font-size-l, 16px)}";
-const IonChipIonicStyle0 = chipIonicCss;
-
 const chipIosCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}";
 const IonChipIosStyle0 = chipIosCss;
 
@@ -23,31 +20,24 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         this.color = undefined;
         this.outline = false;
         this.disabled = false;
-        this.shape = undefined;
     }
     render() {
-        const { shape } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '0bc44676ec03a18e21231b70f5f30bb27c6e54de', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
-                // TODO(FW-6120): remove the theme==='ionic' when we add support for the `ios` and `md` modes.
-                [`chip-${shape}`]: theme === 'ionic' && shape !== undefined,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-                'ion-focusable': !this.disabled,
-            }) }, h("slot", { key: 'f83ce18088eea6adcfd6641b9d9e4d12dee079d1' }), theme === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: 'a4d431e3b066420890fcaa30bbc99f1240dff11c' }), mode === 'md' && h("ion-ripple-effect", null)));
     }
     static get style() { return {
-        ionic: IonChipIonicStyle0,
         ios: IonChipIosStyle0,
         md: IonChipMdStyle0
     }; }
 }, [33, "ion-chip", {
         "color": [513],
         "outline": [4],
-        "disabled": [4],
-        "shape": [1]
+        "disabled": [4]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/ion-col.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
@@ -137,10 +137,10 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '10ac8290295f8b717c4155b1bf4fa07fe11f090d', class: {
-                [theme]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6f86eafa8d585815f19abcf52678ab6e8cebb8f5' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', 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: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
     }
     static get style() { return IonColStyle0; }
 }, [1, "ion-col", {

package/components/ion-content.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, readTask, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { j as hasLazyBuild, c as componentOnReady } from './helpers.js';
-import { a as isPlatform, d as getIonTheme, b as getIonMode } from './ionic-global.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 
@@ -50,7 +50,6 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         };
         this.color = undefined;
         this.fullscreen = false;
-        this.fixedSlotPlacement = 'after';
         this.forceOverscroll = undefined;
         this.scrollX = false;
         this.scrollY = true;
@@ -145,8 +144,9 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll(mode) {
+    shouldForceOverscroll() {
         const { forceOverscroll } = this;
+        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     resize() {
@@ -331,34 +331,32 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         }
     }
     render() {
-        const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
+        const { isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
-        const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme === 'ios';
+        const mode = getIonMode(this);
+        const forceOverscroll = this.shouldForceOverscroll();
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '6f0eb3ee14b1d34bd84727e068ad52eb900a9638', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '133795359748c29c2f26f2c4b05315c1ee2ebf14', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: '74ce3ef67dd9ba40dbc29a6583647d711ca038d0', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '6aa93d33fa15184e6bce468f568892bdc27ea2d8', class: {
+            } }, h("div", { key: 'cec324eeb397b9947b48706a726a71c0a338c47b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'da55ddf94fe7fba83e3625f08ce0561136911828', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '90cb76d98d1596cdb22854117725b66050e25020' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '5277456fa0cca2680fbb3ae48f90100ba16bf90d' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'e3dfb4aa64d29e5cc24e8b0cd75a7eb1e0d6954c', name: "fixed" })));
     }
     get el() { return this; }
     static get style() { return IonContentStyle0; }
 }, [1, "ion-content", {
         "color": [513],
         "fullscreen": [4],
-        "fixedSlotPlacement": [1, "fixed-slot-placement"],
         "forceOverscroll": [1028, "force-overscroll"],
         "scrollX": [4, "scroll-x"],
         "scrollY": [4, "scroll-y"],