@ionic/core 8.3.4 → 8.3.5-dev.11730311720.151cb777

package/components/ion-accordion.js

@@ -2,15 +2,21 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as caretDownSvg } from './caret-down.js';
 import { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
-import { c as chevronDown } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { h as hostContext } from './theme.js';
+import { c as chevronDown } from './index5.js';
+import { c as config } from './config2.js';
+import { c as getIonTheme } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
+const accordionIonicCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--ion-space-400, 16px);margin-inline-start:var(--ion-space-400, 16px);-webkit-margin-end:var(--ion-space-400, 16px);margin-inline-end:var(--ion-space-400, 16px);right:0;left:0;bottom:0;display:block;position:absolute;height:var(--ion-border-size-025, 1px);background-color:var(--ion-primitives-neutral-300, #cfcfcf);content:\"\";z-index:3}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:var(--ion-border-radius-0, 0px);--color:var(--ion-primitives-neutral-1200, #242424);--border-width:0;--inner-border-width:0;--min-height:var(--ion-scale-700, 28px);--padding-top:var(--ion-space-300, 12px);--padding-end:var(--ion-space-400, 16px);--padding-bottom:var(--ion-space-300, 12px);--padding-start:var(--ion-space-400, 16px);font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none}:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot=header]){--border-radius:var(--ion-border-radius-400, 16px)}#content{-webkit-padding-start:var(--ion-space-400, 16px);padding-inline-start:var(--ion-space-400, 16px);-webkit-padding-end:var(--ion-space-400, 16px);padding-inline-end:var(--ion-space-400, 16px);padding-bottom:var(--ion-space-300, 12px);font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;color:var(--ion-primitives-neutral-1000, #3b3b3b)}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;z-index:2}";
+const IonAccordionIonicStyle0 = accordionIonicCss;
+
+const accordionIosCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
 const IonAccordionIosStyle0 = accordionIosCss;
 
-const accordionMdCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}";
+const accordionMdCss = ":host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}";
 const IonAccordionMdStyle0 = accordionMdCss;
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
@@ -81,7 +87,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (!ionItem) {
                 return;
             }
-            const { toggleIconSlot, toggleIcon } = this;
+            const { accordionToggleIcon, toggleIconSlot } = this;
             /**
              * Check if there already is a toggle icon.
              * If so, do not add another one.
@@ -94,7 +100,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             iconEl.slot = toggleIconSlot;
             iconEl.lazy = false;
             iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = toggleIcon;
+            iconEl.icon = accordionToggleIcon;
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
@@ -214,9 +220,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             }
         };
         this.getNextSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const nextSibling = this.el.nextElementSibling;
             if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
                 return;
@@ -224,9 +227,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             return nextSibling;
         };
         this.getPreviousSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const previousSibling = this.el.previousElementSibling;
             if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
                 return;
@@ -239,7 +239,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.value = `ion-accordion-${accordionIds++}`;
         this.disabled = false;
         this.readonly = false;
-        this.toggleIcon = chevronDown;
+        this.toggleIcon = undefined;
         this.toggleIconSlot = 'end';
     }
     valueChanged() {
@@ -276,6 +276,23 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             this.setAria(expanded);
         });
     }
+    get accordionToggleIcon() {
+        // Return the icon if it is explicitly set
+        if (this.toggleIcon != null) {
+            return this.toggleIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronDown,
+            ionic: caretDownSvg,
+            md: chevronDown,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured accordion toggle icon or the default icon
+        return config.get('accordionToggleIcon', defaultIcon);
+    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
@@ -295,13 +312,13 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
     }
     render() {
         const { disabled, readonly } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
-                [mode]: true,
+        return (h(Host, { key: 'fa0868a83fe0858d01eb2926790bcfc7635a647d', class: {
+                [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
@@ -311,7 +328,8 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, h("div", { key: '9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '464c32a37f64655eacf4218284214f5f30b14a1e', name: "header" })), h("div", { key: '8bb52e6a62d7de0106b253201a89a32e79d9a594', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '1d9dfd952ad493754aaeea7a8f625b33c2dd90a0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '970dfbc55a612d739d0ca3b7b1a08e5c96d0c479', name: "content" })))));
+                'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
+            } }, h("div", { key: '386fcbc4f5cd8a5b04d2e8b3adcfc8b692c75c48', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '831deb179fdaada595982566e08ec380a17cf058', name: "header" })), h("div", { key: 'c4d51f29c3797705392119b2369d941f752e50f2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: 'fc45f0b7b7057f5f99d4ff99950ab95b5e137045', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'f59d8e00a6d6fa7fe5291217c4b649499d759349', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -319,6 +337,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         "value": ["valueChanged"]
     }; }
     static get style() { return {
+        ionic: IonAccordionIonicStyle0,
         ios: IonAccordionIosStyle0,
         md: IonAccordionMdStyle0
     }; }

package/components/ion-app.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
-import { shouldUseCloseWatcher } from './hardware-back-button.js';
-import { p as printIonWarning } from './index6.js';
-import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { getOrInitFocusVisibleUtility } from './focus-visible.js';
+import { c as config } from './config2.js';
+import { c as getIonTheme } from './ionic-global.js';
 
 const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
 const IonAppStyle0 = appCss;
@@ -14,46 +14,6 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         super();
         this.__registerHost();
     }
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            rIC(async () => {
-                const isHybrid = isPlatform(window, 'hybrid');
-                if (!config.getBoolean('_testing')) {
-                    import('./index9.js').then((module) => module.startTapClick(config));
-                }
-                if (config.getBoolean('statusTap', isHybrid)) {
-                    import('./status-tap.js').then((module) => module.startStatusTap());
-                }
-                if (config.getBoolean('inputShims', needInputShims())) {
-                    /**
-                     * needInputShims() ensures that only iOS and Android
-                     * platforms proceed into this block.
-                     */
-                    const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims.js').then((module) => module.startInputShims(config, platform));
-                }
-                const hardwareBackButtonModule = await import('./hardware-back-button.js');
-                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
-                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
-                    hardwareBackButtonModule.startHardwareBackButton();
-                }
-                else {
-                    /**
-                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-                     * then the close watcher will not be used.
-                     */
-                    if (shouldUseCloseWatcher()) {
-                        printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
-                    }
-                    hardwareBackButtonModule.blockHardwareBackButton();
-                }
-                if (typeof window !== 'undefined') {
-                    import('./keyboard2.js').then((module) => module.startKeyboardAssist(window));
-                }
-                import('./focus-visible.js').then((module) => (this.focusVisible = module.startFocusVisible()));
-            });
-        }
-    }
     /**
      * Used to set focus on an element that uses `ion-focusable`.
      * Do not use this if focusing the element as a result of a keyboard
@@ -64,14 +24,13 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
      * presented as a result of keyboard action.)
      */
     async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
+        const focusVisible = getOrInitFocusVisibleUtility();
+        focusVisible.setFocus(elements);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'aa7f465d2fe61cfd40709c0fd388f80a0927376c', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -81,33 +40,6 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
 }, [0, "ion-app", {
         "setFocus": [64]
     }]);
-const needInputShims = () => {
-    /**
-     * iOS always needs input shims
-     */
-    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
-    if (needsShimsIOS) {
-        return true;
-    }
-    /**
-     * Android only needs input shims when running
-     * in the browser and only if the browser is using the
-     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
-     */
-    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
-    if (isAndroidMobileWeb) {
-        return true;
-    }
-    return false;
-};
-const rIC = (callback) => {
-    if ('requestIdleCallback' in window) {
-        window.requestIdleCallback(callback);
-    }
-    else {
-        setTimeout(callback, 32);
-    }
-};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/ion-avatar.js

@@ -2,7 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as getIonMode } from './ionic-global.js';
+import { c as getIonTheme } from './ionic-global.js';
+
+const avatarIonicCss = ":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{--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:var(--ion-primitives-neutral-100, #f5f5f5);color:var(--ion-primitives-neutral-800, #626262);font-weight:var(--ion-font-weight-medium, 500);line-height:var(--ion-font-line-height-700, 28px)}:host(:not(.avatar-image)){-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);border:var(--ion-border-size-025, 1px) var(--ion-border-style-solid, solid) var(--ion-primitives-neutral-800, #626262)}:host(.avatar-xxsmall){--padding-end:var(--ion-space-050, 2px);--padding-start:var(--ion-space-050, 2px);width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px);font-size:var(--ion-font-size-300, 0.75rem);line-height:var(--ion-font-line-height-500, 20px)}:host(.avatar-xsmall){--padding-end:var(--ion-space-050, 2px);--padding-start:var(--ion-space-050, 2px);width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px);font-size:var(--ion-font-size-300, 0.75rem);line-height:var(--ion-font-line-height-500, 20px)}:host(.avatar-small){--padding-end:var(--ion-space-150, 6px);--padding-start:var(--ion-space-150, 6px);width:var(--ion-scale-800, 32px);height:var(--ion-scale-800, 32px);font-size:var(--ion-font-size-400, 1rem);line-height:var(--ion-font-line-height-600, 24px)}:host(.avatar-medium){--padding-end:var(--ion-space-200, 8px);--padding-start:var(--ion-space-200, 8px);width:var(--ion-scale-1000, 40px);height:var(--ion-scale-1000, 40px);font-size:var(--ion-font-size-450, 1.125rem)}:host(.avatar-large){--padding-end:var(--ion-space-250, 10px);--padding-start:var(--ion-space-250, 10px);width:var(--ion-scale-1200, 48px);height:var(--ion-scale-1200, 48px);font-size:var(--ion-font-size-500, 1.25rem)}:host(.avatar-xlarge){--padding-end:var(--ion-space-300, 12px);--padding-start:var(--ion-space-300, 12px);width:var(--ion-scale-1400, 56px);height:var(--ion-scale-1400, 56px);font-size:var(--ion-font-size-550, 1.375rem)}:host(.avatar-xxsmall.avatar-soft),:host(.avatar-xsmall.avatar-soft),:host(.avatar-small.avatar-soft){--border-radius:var(--ion-border-radius-100, 4px)}:host(.avatar-soft){--border-radius:var(--ion-border-radius-200, 8px)}:host(.avatar-round){--border-radius:var(--ion-border-radius-full, 999px)}:host(.avatar-rectangular){--border-radius:var(--ion-border-radius-0, 0px)}:host(.avatar-icon){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.avatar-xsmall) ::slotted(ion-icon){width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(.avatar-small) ::slotted(ion-icon){width:var(--ion-scale-500, 20px);height:var(--ion-scale-500, 20px)}:host(.avatar-medium) ::slotted(ion-icon){width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px)}:host(.avatar-large) ::slotted(ion-icon){width:var(--ion-scale-800, 32px);height:var(--ion-scale-800, 32px)}:host(.avatar-xlarge) ::slotted(ion-icon){width:var(--ion-scale-1000, 40px);height:var(--ion-scale-1000, 40px)}";
+const IonAvatarIonicStyle0 = avatarIonicCss;
 
 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}";
 const IonAvatarIosStyle0 = avatarIosCss;
@@ -15,15 +18,61 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.size = undefined;
+        this.shape = undefined;
+    }
+    get hasImage() {
+        return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
+    }
+    get hasIcon() {
+        return !!this.el.querySelector('ion-icon');
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'medium';
+        }
+        return size;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
     }
     render() {
-        return (h(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode(this) }, h("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
+        const theme = getIonTheme(this);
+        const size = this.getSize();
+        const shape = this.getShape();
+        return (h(Host, { key: '169f3e804c30f9eedc8c3cf064af9871bead2f5f', class: {
+                [theme]: true,
+                [`avatar-${size}`]: size !== undefined,
+                [`avatar-${shape}`]: shape !== undefined,
+                [`avatar-image`]: this.hasImage,
+                [`avatar-icon`]: this.hasIcon,
+            } }, h("slot", { key: '67bb5a3c1a6bd33af37141df05663f1685c84286' })));
     }
+    get el() { return this; }
     static get style() { return {
+        ionic: IonAvatarIonicStyle0,
         ios: IonAvatarIosStyle0,
         md: IonAvatarMdStyle0
     }; }
-}, [33, "ion-avatar"]);
+}, [33, "ion-avatar", {
+        "size": [1],
+        "shape": [1]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/ion-back-button.js

@@ -2,17 +2,22 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as caretLeftSvg } from './caret-left.js';
 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 './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { a as chevronBack, b as arrowBackSharp } from './index5.js';
+import { c as config } from './config2.js';
+import { c as getIonTheme } from './ionic-global.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './ripple-effect.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}}";
+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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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:0.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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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:0.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;
 
-const backButtonMdCss = ":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 backButtonMdCss = ":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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space: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{right:0;left: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:0.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 IonBackButtonMdStyle0 = backButtonMdCss;
 
 const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTMLElement {
@@ -44,20 +49,24 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
         }
     }
     get backButtonIcon() {
-        const icon = this.icon;
-        if (icon != null) {
-            // icon is set on the component or by the config
-            return icon;
-        }
-        if (getIonMode(this) === 'ios') {
-            // default ios back button icon
-            return config.get('backButtonIcon', chevronBack);
+        // Return the icon if it is explicitly set
+        if (this.icon != null) {
+            return this.icon;
         }
-        // default md back button icon
-        return config.get('backButtonIcon', arrowBackSharp);
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronBack,
+            ionic: caretLeftSvg,
+            md: arrowBackSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured back button icon or the default icon
+        return config.get('backButtonIcon', defaultIcon);
     }
     get backButtonText() {
-        const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
+        const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
         return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
     }
     get hasIconOnly() {
@@ -74,10 +83,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 mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '8351c93a1812c94c979fb115f07a9ad7b3152188', onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '6b3723c6070e0ff19b312ed86ee642bdefebae2e', onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
                 'back-button-has-icon-only': hasIconOnly,
@@ -86,10 +95,11 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '991b8baa784dbfbdf8d3581cbbf6a858ac1f1e6e', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '929fcd83a4fdb00cf97ca803f234719171602a5e', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '0c10d412ae8342d96f221e626b421c9abadac748', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '96f505880a80f36ee8b8c78268b450f3629ee613', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '0aecf5d415c608069eb1a10043530bd0929b6383', type: this.rippleType }))));
+            }) }, h("button", { key: '482b8e4d3d9485747d241f2bac1993cb2ab4aed6', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'b5243414e42716903c86a08f2e8fa098d30cfdbe', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'fd6ad102d5fad6411c75005cb7bcc11c24a18bbb', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '7d39ac018ee158f46b9bdf886ae7ed4b15c88ed4', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '12d543212f08222a4ba8f235b5c4a4be62284c01', type: this.rippleType }))));
     }
     get el() { return this; }
     static get style() { return {
+        ionic: IonBackButtonIonicStyle0,
         ios: IonBackButtonIosStyle0,
         md: IonBackButtonMdStyle0
     }; }

package/components/ion-badge.js

@@ -3,12 +3,15 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createColorClasses } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
+import { c as getIonTheme } 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 badgeIonicCss = ":host{--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-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{--background:var(--ion-color-primary, #105cef);--color:var(--ion-color-primary-contrast, #fff);--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--ion-font-weight-medium, 500)}:host(.badge-soft){border-radius:var(--ion-border-radius-200, 8px)}:host(.badge-xxsmall.badge-soft),:host(.badge-xsmall.badge-soft),:host(.badge-small.badge-soft){border-radius:var(--ion-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ion-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ion-border-radius-0, 0px)}:host(.badge-xxsmall){--padding-start:var(--ion-space-050, 2px);--padding-end:var(--ion-space-050, 2px);min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px);font-size:var(--ion-font-size-300, 0.75rem);line-height:var(--ion-font-line-height-400, 16px)}:host(.badge-xsmall){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);min-width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px);font-size:var(--ion-font-size-350, 0.875rem);line-height:var(--ion-font-line-height-600, 24px)}:host(.badge-small){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);min-width:var(--ion-scale-800, 32px);height:var(--ion-scale-800, 32px);font-size:var(--ion-font-size-400, 1rem);line-height:var(--ion-font-line-height-600, 24px)}:host(.badge-medium){min-width:var(--ion-scale-1000, 40px);height:var(--ion-scale-1000, 40px);font-size:var(--ion-font-size-450, 1.125rem);line-height:var(--ion-font-line-height-700, 28px)}:host(.badge-large){min-width:var(--ion-scale-1200, 48px);height:var(--ion-scale-1200, 48px);font-size:var(--ion-font-size-500, 1.25rem);line-height:var(--ion-font-line-height-700, 28px)}:host(.badge-xlarge){min-width:var(--ion-scale-1400, 56px);height:var(--ion-scale-1400, 56px);font-size:var(--ion-font-size-550, 1.375rem);line-height:var(--ion-font-line-height-700, 28px)}";
+const IonBadgeIonicStyle0 = badgeIonicCss;
+
+const badgeIosCss = ":host{--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-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{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";
 const IonBadgeIosStyle0 = badgeIosCss;
 
-const badgeMdCss = ":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 badgeMdCss = ":host{--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-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{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host{--padding-top:3px;--padding-end:4px;--padding-bottom:4px;--padding-start:4px;border-radius:4px}";
 const IonBadgeMdStyle0 = badgeMdCss;
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
@@ -17,19 +20,52 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.color = undefined;
+        this.shape = undefined;
+        this.size = undefined;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-10777): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-10747): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'small';
+        }
+        return size;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '1253618692342bcf9487188402dc3d49ae0de480', class: createColorClasses(this.color, {
-                [mode]: true,
-            }) }, h("slot", { key: '71d65e203965ea37b94504a8a0a96beb52d4e356' })));
+        const shape = this.getShape();
+        const size = this.getSize();
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c90c2b6ac737ec5ebfa28bb2ccef6517a9a9b84e', class: createColorClasses(this.color, {
+                [theme]: true,
+                [`badge-${shape}`]: shape !== undefined,
+                [`badge-${size}`]: size !== undefined,
+            }) }, h("slot", { key: '4a3a379d86e60a04a449b8a0bf8f99776d64bc4c' })));
     }
     static get style() { return {
+        ionic: IonBadgeIonicStyle0,
         ios: IonBadgeIosStyle0,
         md: IonBadgeMdStyle0
     }; }
 }, [33, "ion-badge", {
-        "color": [513]
+        "color": [513],
+        "shape": [1],
+        "size": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {