@ionic/core 8.8.4-dev.11777335998.1378bc9b → 8.8.4-dev.11777393099.1a6ea277

package/dist/collection/components/item-sliding/item-sliding.js

@@ -9,6 +9,18 @@ import { watchForOptions } from "../../utils/watch-options";
 import { getIonTheme } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
+const IONIC_SNAP_OPEN_RATIO = 0.4;
+const IONIC_EXPAND_TRIGGER = 80;
+const IONIC_VELOCITY_THRESHOLD = 0.4;
+const IONIC_ACTION_BASE_WIDTH = 64;
+const IONIC_OPEN_TRANSITION = '250ms cubic-bezier(0.25, 1, 0.5, 1)';
+const IONIC_SNAPBACK_TRANSITION = '300ms cubic-bezier(0.34, 1.4, 0.64, 1)';
+const IONIC_CONFIRM_EASE_IN = '150ms ease-in';
+const IONIC_CONFIRM_SNAPBACK = '480ms cubic-bezier(0.34, 1.4, 0.64, 1)';
+const IONIC_CONFIRM_PAUSE = 900;
+const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
+/** Expandable, non-disabled option (matches item-option expandable class). */
+const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
 let openSlidingItem;
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -25,12 +37,17 @@ export class ItemSliding {
         this.optsDirty = true;
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
+        this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
         this.state = 2 /* SlidingState.Disabled */;
         /**
          * If `true`, the user cannot interact with the sliding item.
          */
         this.disabled = false;
     }
+    isIonicTheme() {
+        return getIonTheme(this) === 'ionic';
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -248,8 +265,8 @@ export class ItemSliding {
         return maxWidth + SWIPE_MARGIN;
     }
     /**
-     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
-     * This is used when an expandable option is swiped beyond the threshold.
+     * Native (ios/md) full swipe: off-screen → fire swipe → return.
+     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
      */
     async animateFullSwipe(direction) {
         const abortController = new AbortController();
@@ -301,6 +318,128 @@ export class ItemSliding {
             }
         }
     }
+    queryExpandableOption(options) {
+        var _a;
+        return (_a = options === null || options === void 0 ? void 0 : options.querySelector(EXPANDABLE_OPTION_SELECTOR)) !== null && _a !== void 0 ? _a : undefined;
+    }
+    getExpandableOption(direction) {
+        return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
+    }
+    getOpenDirectionFromAmount(openAmount) {
+        if (openAmount > 0) {
+            return 'end';
+        }
+        if (openAmount < 0) {
+            return 'start';
+        }
+        return undefined;
+    }
+    getOptionsWidthForDirection(direction) {
+        return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+    }
+    getExpandableBaseWidth(direction) {
+        return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
+    }
+    setIonicExpandableWidth(direction, width, animate, easing) {
+        const expandableOption = this.getExpandableOption(direction);
+        if (!expandableOption) {
+            return;
+        }
+        const style = expandableOption.style;
+        style.transition = animate ? `width ${easing !== null && easing !== void 0 ? easing : IONIC_OPEN_TRANSITION}` : 'none';
+        const baseWidth = this.getExpandableBaseWidth(direction);
+        style.width = `${Math.max(baseWidth, width)}px`;
+    }
+    resetIonicExpandableOptions() {
+        [this.leftOptions, this.rightOptions].forEach((options) => {
+            const expandableOption = this.queryExpandableOption(options);
+            if (!expandableOption) {
+                return;
+            }
+            expandableOption.style.transition = '';
+            expandableOption.style.width = '';
+        });
+    }
+    updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
+        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
+            return;
+        }
+        const direction = this.getOpenDirectionFromAmount(openAmount);
+        if (direction === undefined) {
+            const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
+            if (previousDirection === undefined) {
+                this.resetIonicExpandableOptions();
+                return;
+            }
+            this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), isFinal, IONIC_SNAPBACK_TRANSITION);
+            return;
+        }
+        const baseWidth = this.getExpandableBaseWidth(direction);
+        const optionsWidth = this.getOptionsWidthForDirection(direction);
+        const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
+        const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
+        const targetWidth = baseWidth + resistedExtraWidth;
+        const easing = openAmount === 0 ? IONIC_SNAPBACK_TRANSITION : IONIC_OPEN_TRANSITION;
+        this.setIonicExpandableWidth(direction, targetWidth, isFinal, easing);
+    }
+    async animateIonicFullSwipe(direction) {
+        const abortController = new AbortController();
+        this.animationAbortController = abortController;
+        const { signal } = abortController;
+        const expandableOption = this.getExpandableOption(direction);
+        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+        if (this.gesture) {
+            this.gesture.enable(false);
+        }
+        try {
+            this.state =
+                direction === 'end'
+                    ? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
+                    : 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
+            if (!this.item) {
+                return;
+            }
+            const itemWidth = this.el.offsetWidth || window.innerWidth;
+            const baseWidth = this.getExpandableBaseWidth(direction);
+            const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
+            const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
+            if (expandableOption) {
+                expandableOption.style.transition = `width ${IONIC_CONFIRM_EASE_IN}`;
+                expandableOption.style.width = `${expandableTargetWidth}px`;
+            }
+            this.item.style.transition = `transform ${IONIC_CONFIRM_EASE_IN}`;
+            this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
+            await this.delay(150, signal);
+            options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
+            await this.delay(IONIC_CONFIRM_PAUSE, signal);
+            if (expandableOption) {
+                expandableOption.style.transition = `width ${IONIC_CONFIRM_SNAPBACK}`;
+                expandableOption.style.width = `${baseWidth}px`;
+            }
+            this.item.style.transition = `transform ${IONIC_CONFIRM_SNAPBACK}`;
+            this.item.style.transform = 'translate3d(0, 0, 0)';
+            await this.delay(480, signal);
+        }
+        catch (_a) {
+            // Animation was aborted. finally handles cleanup.
+        }
+        finally {
+            this.animationAbortController = undefined;
+            if (this.item) {
+                this.item.style.transition = '';
+                this.item.style.transform = '';
+            }
+            this.resetIonicExpandableOptions();
+            this.openAmount = 0;
+            this.state = 2 /* SlidingState.Disabled */;
+            if (openSlidingItem === this.el) {
+                openSlidingItem = undefined;
+            }
+            if (this.gesture) {
+                this.gesture.enable(!this.disabled);
+            }
+        }
+    }
     async updateOptions() {
         var _a;
         const options = this.el.querySelectorAll('ion-item-options');
@@ -403,10 +542,21 @@ export class ItemSliding {
         this.setOpenAmount(openAmount, false);
     }
     onEnd(gesture) {
+        this.restoreContentScrollAfterSlide();
+        if (this.isIonicTheme()) {
+            this.onEndIonic(gesture);
+        }
+        else {
+            this.onEndNative(gesture);
+        }
+    }
+    restoreContentScrollAfterSlide() {
         const { contentEl, initialContentScrollY } = this;
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
+    }
+    onEndNative(gesture) {
         // Check for full swipe conditions with expandable options
         const rawSwipeDistance = Math.abs(gesture.deltaX);
         const direction = gesture.deltaX < 0 ? 'end' : 'start';
@@ -443,17 +593,64 @@ export class ItemSliding {
             this.leftOptions.fireSwipeEvent();
         }
     }
+    onEndIonic(gesture) {
+        const velocity = gesture.velocityX;
+        const velocityX = velocity * 1000;
+        const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
+        if (activeDirection === undefined) {
+            this.setOpenAmount(0, true);
+            return;
+        }
+        const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
+        const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
+        const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
+        const wasRevealed = Math.abs(this.initialOpenAmount) >= optionsWidth;
+        if (hasExpandable &&
+            (extraWidth >= IONIC_EXPAND_TRIGGER || (wasRevealed && velocityX < Math.abs(IONIC_VELOCITY_THRESHOLD * 1000)))) {
+            this.animateIonicFullSwipe(activeDirection).catch(() => {
+                if (this.gesture) {
+                    this.gesture.enable(!this.disabled);
+                }
+            });
+            return;
+        }
+        const closeDirection = activeDirection === 'end'
+            ? velocityX > IONIC_VELOCITY_THRESHOLD * 1000
+            : velocityX < -IONIC_VELOCITY_THRESHOLD * 1000;
+        if (closeDirection) {
+            this.setOpenAmount(0, true);
+            return;
+        }
+        const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
+        const shouldSnapOpen = Math.abs(this.openAmount) > openThreshold;
+        const restingPoint = shouldSnapOpen
+            ? activeDirection === 'end'
+                ? this.optsWidthRightSide
+                : -this.optsWidthLeftSide
+            : 0;
+        this.setOpenAmount(restingPoint, true);
+    }
     calculateOptsWidth() {
         this.optsWidthRightSide = 0;
         if (this.rightOptions) {
             this.rightOptions.style.display = 'flex';
             this.optsWidthRightSide = this.rightOptions.offsetWidth;
+            const rightExpandable = this.queryExpandableOption(this.rightOptions);
+            if (rightExpandable) {
+                rightExpandable.style.width = '';
+                this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
+            }
             this.rightOptions.style.display = '';
         }
         this.optsWidthLeftSide = 0;
         if (this.leftOptions) {
             this.leftOptions.style.display = 'flex';
             this.optsWidthLeftSide = this.leftOptions.offsetWidth;
+            const leftExpandable = this.queryExpandableOption(this.leftOptions);
+            if (leftExpandable) {
+                leftExpandable.style.width = '';
+                this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
+            }
             this.leftOptions.style.display = '';
         }
         this.optsDirty = false;
@@ -468,21 +665,21 @@ export class ItemSliding {
         }
         const { el } = this;
         const style = this.item.style;
+        const previousOpenAmount = this.openAmount;
         this.openAmount = openAmount;
+        if (this.isIonicTheme()) {
+            this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
+        }
         if (isFinal) {
             style.transition = '';
         }
         if (openAmount > 0) {
-            this.state =
-                openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
-                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
-                    : 8 /* SlidingState.End */;
+            const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
+            this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
         }
         else if (openAmount < 0) {
-            this.state =
-                openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
-                    ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
-                    : 16 /* SlidingState.Start */;
+            const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
+            this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
         }
         else {
             /**
@@ -531,7 +728,7 @@ export class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
+        return (h(Host, { key: '7b360e8bf19b76aefa220c4f17af80b8d48caf3f', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -543,12 +740,16 @@ export class ItemSliding {
     static get is() { return "ion-item-sliding"; }
     static get originalStyleUrls() {
         return {
-            "$": ["item-sliding.scss"]
+            "ios": ["item-sliding.scss"],
+            "md": ["item-sliding.scss"],
+            "ionic": ["item-sliding.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["item-sliding.css"]
+            "ios": ["item-sliding.css"],
+            "md": ["item-sliding.css"],
+            "ionic": ["item-sliding.css"]
         };
     }
     static get properties() {

package/dist/collection/components/range/range.ionic.css

@@ -379,8 +379,7 @@
   background: var(--ion-color-base);
 }
 
-::slotted(ion-icon[slot]),
-::slotted(i.ph[slot]) {
+::slotted(ion-icon[slot]) {
   font-size: var(--token-font-size-600, 1.5rem);
 }
 

package/dist/collection/components/segment-button/segment-button.ionic.css

@@ -315,10 +315,6 @@
   height: var(--token-scale-600, 24px);
 }
 
-::slotted(i.ph) {
-  font-size: var(--token-scale-600, 24px);
-}
-
 :host(.segment-button-checked) ::slotted(*) {
   color: var(--color-checked);
 }

package/dist/collection/components/select/select.ionic.css

@@ -717,8 +717,6 @@ button {
 ::slotted(ion-icon) {
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
-  font-size: var(--token-scale-400, 16px);
-  line-height: 1;
 }
 
 .select-icon {

package/dist/collection/components/select/select.js

@@ -5,7 +5,6 @@ import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg
 import { Build, Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
-import { renderIcon } from "../../utils/icon";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
@@ -754,12 +753,12 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        const theme = getIonTheme(this);
         const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
-        const icon = isExpanded ? selectExpandedIcon : selectCollapsedIcon;
-        // Use the font glyph for the default ionic icon; null forces SVG for custom icons.
-        const ionicIconClass = icon === caretDownRegular ? 'ph-caret-down' : null;
-        return renderIcon(theme, ionicIconClass, icon, { class: { 'select-icon': true }, part: 'icon' });
+        let icon = selectCollapsedIcon;
+        if (isExpanded) {
+            icon = selectExpandedIcon;
+        }
+        return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
     get ariaLabel() {
         var _a;
@@ -918,7 +917,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'adff24eefb2530bedad439d4fc487e8bc14ea6e9', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd8f7abd11c8f6e5ebea306f69ed5ae5a115efa97', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -937,7 +936,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: 'ae2d8ab47f377909857ccd082e0f4aaa5504fa8b', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'd908a934f21c145f178c3e39eb7ec076caec752a', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, h("label", { key: '443499f6c4501df171d4f16756f2e55e57512c0c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '66e6cf63163b68b1ca85979e5c49a349632dfc54', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -947,7 +946,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '039d4719fd7e9f63574f3f98680a4df1d2bb4991', class: "select-outline" }), h("slot", { key: 'd227aea2b1c9d8318b8ccabeb8aef3fab72fd108', name: "start" }), h("div", { key: '5dbb3fd5b5e1ba443fe7589fead79a1e4cb35042', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'abfe8949dfe755e5477b2578f1c97159568c3502', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '55dce3ef686cc1e6d9b049978e0a62dbead1a087', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'a9f7d6bde570f4e2261617cdc2529cd835297865', class: "select-outline" }), h("slot", { key: 'f5516f6749c85dc3ed8f9ee04e748f1aad0d815c', name: "start" }), h("div", { key: '86fa4152f415a5ab72ed1a95899212fc1914b81c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3333af6835b20a97450372ca78a4aa77adf39d1c', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e0e782845ed0c35c139dbddcc3f9880aec12cf58', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-button/tab-button.ionic.css

@@ -280,10 +280,6 @@ ion-ripple-effect {
   height: var(--token-scale-600, 24px);
 }
 
-::slotted(i.ph) {
-  font-size: var(--token-scale-600, 24px);
-}
-
 :host(.tab-button-shape-soft) {
   border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
 }

package/dist/collection/components/toggle/toggle.ionic.css

@@ -464,8 +464,6 @@ input {
 .toggle-inner .toggle-switch-icon {
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
-  font-size: var(--token-scale-400, 16px);
-  line-height: 1;
 }
 
 /**

package/dist/collection/components/toggle/toggle.js

@@ -6,7 +6,6 @@ import minusRegular from "@phosphor-icons/core/assets/regular/minus.svg";
 import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
-import { renderIcon } from "../../utils/icon";
 import { hapticSelection } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
@@ -280,18 +279,8 @@ export class Toggle {
         return config.get('toggleUncheckedIcon', defaultIcon);
     }
     renderOnOffSwitchLabels(checked) {
-        var _a;
-        const theme = getIonTheme(this);
         const icon = this.getSwitchLabelIcon(checked);
-        // Map the ionic-theme default SVGs to their Phosphor class names.
-        // Pass null when a custom icon is configured so the SVG is always used.
-        const phosphorMap = {
-            [checkRegular]: 'ph-check',
-            [minusRegular]: 'ph-minus',
-        };
-        const ionicIconClass = (_a = phosphorMap[icon]) !== null && _a !== void 0 ? _a : null;
-        return renderIcon(theme, ionicIconClass, icon, {
-            class: {
+        return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
                 /**
@@ -305,8 +294,7 @@ export class Toggle {
                  * checked icon is being used.
                  */
                 'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
-            },
-        });
+            }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
         const theme = getIonTheme(this);
@@ -350,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'a154d3fa47c535d0d59485d0da7f22eb964a5be8', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'b12951146a79d3839e6263e91e747398a0fa901d', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -362,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '45012ad7e1e4ac7aab5b9943d646c9f8b2dae943', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '1b74d48d55d895858e7e3bc74d603c535fd78a59', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'b941871b523ce9894f5e4c7e233a7c4886414439', class: {
+            }) }, h("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'a9120feb48329d0b9878ada8efcfdd2a1c5ace0b' }), this.renderHintText()), h("div", { key: 'f8fa6a43375c32122ca7768f1b4b5c45fc99a371', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), h("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-28T00:29:05",
+  "timestamp": "2026-04-28T16:20:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -38973,7 +38973,8 @@
         "ion-action-sheet",
         "ion-alert",
         "ion-select-modal",
-        "ion-modal"
+        "ion-modal",
+        "ion-icon"
       ],
       "dependencyGraph": {
         "ion-select": [
@@ -38982,7 +38983,8 @@
           "ion-action-sheet",
           "ion-alert",
           "ion-select-modal",
-          "ion-modal"
+          "ion-modal",
+          "ion-icon"
         ],
         "ion-select-popover": [
           "ion-item",
@@ -45675,8 +45677,14 @@
       ],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "ion-icon"
+      ],
+      "dependencyGraph": {
+        "ion-toggle": [
+          "ion-icon"
+        ]
+      }
     },
     {
       "filePath": "src/components/toolbar/toolbar.tsx",

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

@@ -5,7 +5,7 @@ import { r as registerInstance, h, d as Host, g as getElement } from './index-Om
 import { c as getIonTheme } from './ionic-global-CAZb-5i-.js';
 import { h as hostContext, c as createColorClasses } from './theme-DaJxRxSQ.js';
 
-const avatarIonicCss = () => `:host{border-radius:var(--border-radius);display:block;position:relative}::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(--token-space-0, var(--token-scale-0, 0px));--padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}: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)}:host(.avatar-xxsmall){--padding-end:var(--token-space-050, var(--token-scale-050, 2px));--padding-start:var(--token-space-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.avatar-xsmall){--padding-end:var(--token-space-050, var(--token-scale-050, 2px));--padding-start:var(--token-space-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.avatar-small){--padding-end:var(--token-space-150, var(--token-scale-150, 6px));--padding-start:var(--token-space-150, var(--token-scale-150, 6px));font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;width:var(--token-scale-800, 32px);height:var(--token-scale-800, 32px)}:host(.avatar-medium){--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));width:var(--token-scale-1000, 40px);height:var(--token-scale-1000, 40px)}:host(.avatar-large){--padding-end:var(--token-space-250, var(--token-scale-250, 10px));--padding-start:var(--token-space-250, var(--token-scale-250, 10px));font-size:var(--token-font-size-500, 1.25rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px)}:host(.avatar-xlarge){--padding-end:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-300, var(--token-scale-300, 12px));font-size:var(--token-font-size-550, 1.375rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;width:var(--token-scale-1400, 56px);height:var(--token-scale-1400, 56px)}:host(.avatar-xxsmall.avatar-soft),:host(.avatar-xsmall.avatar-soft),:host(.avatar-small.avatar-soft){--border-radius:var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)))}:host(.avatar-medium.avatar-soft){--border-radius:var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.avatar-large.avatar-soft),:host(.avatar-xlarge.avatar-soft){--border-radius:var(--token-soft-md, var(--token-border-radius-400, var(--token-scale-400, 16px)))}:host(.avatar-xxsmall.avatar-round),:host(.avatar-xsmall.avatar-round),:host(.avatar-small.avatar-round){--border-radius:var(--token-round-2xs, var(--token-border-radius-full, 999px))}:host(.avatar-medium.avatar-round){--border-radius:var(--token-round-xs, var(--token-border-radius-full, 999px))}:host(.avatar-large.avatar-round),:host(.avatar-xlarge.avatar-round){--border-radius:var(--token-round-md, var(--token-border-radius-full, 999px))}:host(.avatar-xxsmall.avatar-rectangular),:host(.avatar-xsmall.avatar-rectangular),:host(.avatar-small.avatar-rectangular){--border-radius:var(--token-rectangular-2xs, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-medium.avatar-rectangular){--border-radius:var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-large.avatar-rectangular),:host(.avatar-xlarge.avatar-rectangular){--border-radius:var(--token-rectangular-md, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-icon){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.avatar-xxsmall) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.avatar-xxsmall) ::slotted(i.ph){font-size:var(--token-scale-300, 12px)}:host(.avatar-xsmall) ::slotted(ion-icon){width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.avatar-xsmall) ::slotted(i.ph){font-size:var(--token-scale-400, 16px)}:host(.avatar-small) ::slotted(ion-icon){width:var(--token-scale-500, 20px);height:var(--token-scale-500, 20px)}:host(.avatar-small) ::slotted(i.ph){font-size:var(--token-scale-500, 20px)}:host(.avatar-medium) ::slotted(ion-icon){width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.avatar-medium) ::slotted(i.ph){font-size:var(--token-scale-600, 24px)}:host(.avatar-large) ::slotted(ion-icon){width:var(--token-scale-700, 28px);height:var(--token-scale-700, 28px)}:host(.avatar-large) ::slotted(i.ph){font-size:var(--token-scale-700, 28px)}:host(.avatar-xlarge) ::slotted(ion-icon){width:var(--token-scale-800, 32px);height:var(--token-scale-800, 32px)}:host(.avatar-xlarge) ::slotted(i.ph){font-size:var(--token-scale-800, 32px)}:host ::slotted(ion-badge.badge-vertical-top:empty){-webkit-transform:translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1));transform:translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1))}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty){-webkit-transform:translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1));transform:translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1))}:host ::slotted(ion-badge.badge-vertical-bottom:empty){-webkit-transform:translate(0, var(--token-scale-100, 4px));transform:translate(0, var(--token-scale-100, 4px))}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty){-webkit-transform:translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px));transform:translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px))}:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-100, 4px);-webkit-transform:translate(100%, 100%);transform:translate(100%, 100%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-100, 4px)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-050, 2px)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-050, 2px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-150, 6px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-150, 6px)}:host ::slotted(ion-badge.badge-vertical-top:not(:empty)){-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-050, 2px)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:0}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-100, 4px)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:0}:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:var(--token-scale-050, 2px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:var(--token-scale-150, 6px)}:host(.avatar-disabled)::after{border-radius:var(--border-radius);right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none}`;
+const avatarIonicCss = () => `:host{border-radius:var(--border-radius);display:block;position:relative}::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(--token-space-0, var(--token-scale-0, 0px));--padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}: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)}:host(.avatar-xxsmall){--padding-end:var(--token-space-050, var(--token-scale-050, 2px));--padding-start:var(--token-space-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.avatar-xsmall){--padding-end:var(--token-space-050, var(--token-scale-050, 2px));--padding-start:var(--token-space-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.avatar-small){--padding-end:var(--token-space-150, var(--token-scale-150, 6px));--padding-start:var(--token-space-150, var(--token-scale-150, 6px));font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;width:var(--token-scale-800, 32px);height:var(--token-scale-800, 32px)}:host(.avatar-medium){--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));width:var(--token-scale-1000, 40px);height:var(--token-scale-1000, 40px)}:host(.avatar-large){--padding-end:var(--token-space-250, var(--token-scale-250, 10px));--padding-start:var(--token-space-250, var(--token-scale-250, 10px));font-size:var(--token-font-size-500, 1.25rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px)}:host(.avatar-xlarge){--padding-end:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-300, var(--token-scale-300, 12px));font-size:var(--token-font-size-550, 1.375rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;width:var(--token-scale-1400, 56px);height:var(--token-scale-1400, 56px)}:host(.avatar-xxsmall.avatar-soft),:host(.avatar-xsmall.avatar-soft),:host(.avatar-small.avatar-soft){--border-radius:var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)))}:host(.avatar-medium.avatar-soft){--border-radius:var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.avatar-large.avatar-soft),:host(.avatar-xlarge.avatar-soft){--border-radius:var(--token-soft-md, var(--token-border-radius-400, var(--token-scale-400, 16px)))}:host(.avatar-xxsmall.avatar-round),:host(.avatar-xsmall.avatar-round),:host(.avatar-small.avatar-round){--border-radius:var(--token-round-2xs, var(--token-border-radius-full, 999px))}:host(.avatar-medium.avatar-round){--border-radius:var(--token-round-xs, var(--token-border-radius-full, 999px))}:host(.avatar-large.avatar-round),:host(.avatar-xlarge.avatar-round){--border-radius:var(--token-round-md, var(--token-border-radius-full, 999px))}:host(.avatar-xxsmall.avatar-rectangular),:host(.avatar-xsmall.avatar-rectangular),:host(.avatar-small.avatar-rectangular){--border-radius:var(--token-rectangular-2xs, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-medium.avatar-rectangular){--border-radius:var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-large.avatar-rectangular),:host(.avatar-xlarge.avatar-rectangular){--border-radius:var(--token-rectangular-md, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.avatar-icon){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host(.avatar-xxsmall) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.avatar-xsmall) ::slotted(ion-icon){width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.avatar-small) ::slotted(ion-icon){width:var(--token-scale-500, 20px);height:var(--token-scale-500, 20px)}:host(.avatar-medium) ::slotted(ion-icon){width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.avatar-large) ::slotted(ion-icon){width:var(--token-scale-700, 28px);height:var(--token-scale-700, 28px)}:host(.avatar-xlarge) ::slotted(ion-icon){width:var(--token-scale-800, 32px);height:var(--token-scale-800, 32px)}:host ::slotted(ion-badge.badge-vertical-top:empty){-webkit-transform:translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1));transform:translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1))}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty){-webkit-transform:translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1));transform:translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1))}:host ::slotted(ion-badge.badge-vertical-bottom:empty){-webkit-transform:translate(0, var(--token-scale-100, 4px));transform:translate(0, var(--token-scale-100, 4px))}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty){-webkit-transform:translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px));transform:translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px))}:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-100, 4px);-webkit-transform:translate(100%, 100%);transform:translate(100%, 100%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-100, 4px)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-050, 2px)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-050, 2px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){bottom:var(--token-scale-150, 6px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)){inset-inline-end:var(--token-scale-150, 6px)}:host ::slotted(ion-badge.badge-vertical-top:not(:empty)){-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-050, 2px)}:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:0}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-100, 4px)}:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:calc(var(--token-scale-050, 2px) * -1)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:0}:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:var(--token-scale-050, 2px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)){top:var(--token-scale-150, 6px)}:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)){inset-inline-end:var(--token-scale-150, 6px)}:host(.avatar-disabled)::after{border-radius:var(--border-radius);right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none}`;
 
 const avatarIosCss = () => `:host{border-radius:var(--border-radius);display:block;position:relative}::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}`;
 
@@ -71,7 +71,7 @@ Avatar.style = {
     md: avatarMdCss()
 };
 
-const badgeIonicCss = () => `:host{-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;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--padding-top:var(--token-space-0, var(--token-scale-0, 0px));--padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--token-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--color:var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--color:var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.badge-small.badge-soft){border-radius:var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)))}:host(.badge-round){border-radius:var(--token-round-sm, var(--token-border-radius-full, 999px))}:host(.badge-rectangular){border-radius:var(--token-rectangular-sm, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.badge-small){--padding-start:var(--token-space-050, var(--token-scale-050, 2px));--padding-end:var(--token-space-050, var(--token-scale-050, 2px));min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.badge-small) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.badge-small) ::slotted(i.ph){font-size:var(--token-scale-300, 12px)}:host(.badge-medium),:host(.badge-large){--padding-start:var(--token-space-100, var(--token-scale-100, 4px));--padding-end:var(--token-space-100, var(--token-scale-100, 4px));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;min-width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.badge-medium) ::slotted(ion-icon),:host(.badge-large) ::slotted(ion-icon){width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.badge-medium) ::slotted(i.ph),:host(.badge-large) ::slotted(i.ph){font-size:var(--token-scale-400, 16px)}:host(:empty){--padding-start:0;--padding-end:0}:host([vertical]:not(:empty)){--padding-start:var(--token-scale-100, 4px);--padding-end:var(--token-scale-100, 4px);--padding-top:var(--token-scale-100, 4px);--padding-bottom:var(--token-scale-100, 4px)}:host(.badge-small:empty){min-width:var(--token-scale-200, 8px);height:var(--token-scale-200, 8px)}:host(.badge-medium:empty){min-width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.badge-large:empty){min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host([vertical].in-tab-button){position:relative}:host([vertical]) ::slotted(ion-icon){top:50%;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical]) ::slotted(ion-icon){inset-inline-start:50%}:host(:not(:empty).in-button){--padding-start:var(--token-scale-050, 2px);--padding-end:var(--token-scale-050, 2px);font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(:not(:empty).in-button) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(:not(:empty).in-button) ::slotted(i.ph){font-size:var(--token-scale-300, 12px)}`;
+const badgeIonicCss = () => `:host{-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;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--padding-top:var(--token-space-0, var(--token-scale-0, 0px));--padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--token-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--color:var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--color:var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)))}:host(.badge-small.badge-soft){border-radius:var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)))}:host(.badge-round){border-radius:var(--token-round-sm, var(--token-border-radius-full, 999px))}:host(.badge-rectangular){border-radius:var(--token-rectangular-sm, var(--token-border-radius-0, var(--token-scale-0, 0px)))}:host(.badge-small){--padding-start:var(--token-space-050, var(--token-scale-050, 2px));--padding-end:var(--token-space-050, var(--token-scale-050, 2px));min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(.badge-small) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.badge-medium),:host(.badge-large){--padding-start:var(--token-space-100, var(--token-scale-100, 4px));--padding-end:var(--token-space-100, var(--token-scale-100, 4px));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;min-width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}:host(.badge-medium) ::slotted(ion-icon),:host(.badge-large) ::slotted(ion-icon){width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(:empty){--padding-start:0;--padding-end:0}:host([vertical]:not(:empty)){--padding-start:var(--token-scale-100, 4px);--padding-end:var(--token-scale-100, 4px);--padding-top:var(--token-scale-100, 4px);--padding-bottom:var(--token-scale-100, 4px)}:host(.badge-small:empty){min-width:var(--token-scale-200, 8px);height:var(--token-scale-200, 8px)}:host(.badge-medium:empty){min-width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}:host(.badge-large:empty){min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host([vertical].in-tab-button){position:relative}:host([vertical]) ::slotted(ion-icon){top:50%;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical]) ::slotted(ion-icon){inset-inline-start:50%}:host(:not(:empty).in-button){--padding-start:var(--token-scale-050, 2px);--padding-end:var(--token-scale-050, 2px);font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;min-width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host(:not(:empty).in-button) ::slotted(ion-icon){width:var(--token-scale-300, 12px);height:var(--token-scale-300, 12px)}`;
 
 const badgeIosCss = () => `:host{-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;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);min-width:10px;font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host([vertical]:not(.in-button):not(.in-tab-button)),:host(:empty){--padding-start:0;--padding-end:0;--padding-bottom:0;--padding-top:0;border-radius:999px;width:10px;height:10px;font-size:0.5rem;line-height:10px}:host(:not(:empty).in-button){min-width:16px;height:16px;font-size:0.75rem;line-height:20px}:host(:not(:empty).in-button) ::slotted(ion-icon){width:12px;height:12px}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}:host([vertical].in-tab-button){position:relative;min-width:8px}:host([vertical].in-tab-button) ::slotted(ion-icon){top:50%;position:absolute;width:12px;height:12px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical].in-tab-button) ::slotted(ion-icon){inset-inline-start:50%}`;