@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a

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

@@ -15,10 +15,6 @@ var index$1 = require('./index-CxDnX7hd.js');
 require('./focus-visible-BIj-I3-C.js');
 require('./capacitor-w_r4U-_S.js');
 
-const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjkuNjYsNzcuNjZsLTEyOCwxMjhhOCw4LDAsMCwxLTExLjMyLDBsLTU2LTU2YTgsOCwwLDAsMSwxMS4zMi0xMS4zMkw5NiwxODguNjksMjE4LjM0LDY2LjM0YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiLz48L3N2Zz4=';
-
-const minusSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjQsMTI4YTgsOCwwLDAsMS04LDhINDBhOCw4LDAsMCwxLDAtMTZIMjE2QTgsOCwwLDAsMSwyMjQsMTI4WiIvPjwvc3ZnPg==';
-
 const toggleIonicCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:var(--token-primitives-neutral-500, #a2a2a2);--track-background-checked: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)))));--border-radius:var(--token-border-radius-full, 999px);--focus-ring-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--token-border-size-050, var(--token-scale-050, 2px));--handle-background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--handle-background-checked:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--handle-border-radius:var(--token-border-radius-full, 999px);--handle-height:var(--token-scale-500, 20px);--handle-max-height:var(--token-scale-500, 20px);--handle-width:var(--token-scale-500, 20px);--handle-spacing:var(--token-space-050, var(--token-scale-050, 2px));--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,     right 110ms ease-in-out 80ms;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);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;z-index:2}.toggle-wrapper{-ms-flex-align:center;align-items:center;min-height:var(--token-scale-1200, 48px)}.native-wrapper .toggle-icon{width:var(--token-scale-1100, 44px);height:var(--token-scale-600, 24px);overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}.toggle-bottom{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}.toggle-bottom .error-text{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.toggle-bottom .helper-text{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}:host(.ion-focused) .toggle-icon{outline:var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}:host(.ion-focused){outline:none}:host(.ion-activated) .toggle-icon{background:var(--token-bg-neutral-base-press, var(--token-primitives-neutral-700, #777777))}:host(.ion-activated.toggle-checked) .toggle-icon{background:var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)))}:host(.toggle-disabled) .toggle-icon::after{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}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}.toggle-inner .toggle-switch-icon{width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}:host .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0}`;
 
 const toggleIosCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.toggle-bottom{padding-top:4px;font-size:0.75rem}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px}.toggle-switch-icon-checked-default{-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2)}`;
@@ -252,22 +248,17 @@ const Toggle = class {
     setFocus() {
         this.el.focus();
     }
+    /**
+     * Get the default icon to use for the checked icon based on the theme.
+     */
     get toggleDefaultCheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = ionicGlobal.getIonTheme(this);
-        const defaultIcons = {
-            ios: index$1.removeOutline,
-            ionic: checkSvg,
-            md: index$1.checkmarkOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the default icon
-        return defaultIcon;
+        return theme === 'ios' ? index$1.removeOutline : index$1.checkmarkOutline;
     }
     /**
      * Get the icon to use for the checked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleCheckedIcon() {
@@ -275,20 +266,13 @@ const Toggle = class {
     }
     /**
      * Get the icon to use for the unchecked icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get toggleUncheckedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = ionicGlobal.getIonTheme(this);
-        const defaultIcons = {
-            ios: index$1.ellipseOutline,
-            ionic: minusSvg,
-            md: index$1.removeOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured toggle unchecked icon or the default icon
+        const defaultIcon = theme === 'ios' ? index$1.ellipseOutline : index$1.removeOutline;
         return index.config.get('toggleUncheckedIcon', defaultIcon);
     }
     renderOnOffSwitchLabels(checked) {
@@ -357,7 +341,7 @@ const Toggle = class {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = theme.hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (index.h(index.Host, { key: 'f3252e2c92ba027748413620748d479b8c865805', 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: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '030fcdcc6074a283de193a04b4c52a9dda2a89b3', 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: theme.createColorClasses(color, {
                 [theme$1]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -372,10 +356,10 @@ const Toggle = class {
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
-            }) }, index.h("label", { key: '29c8cb1ad33e2e5d982fa19f2ebcfa7b328f3be7', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", { key: '8aefbd4f2be1d1cbe5350200aa0ff321370ff101', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), index.h("div", { key: '4bbf765fed7eb016cbd560cf1bd8cd4e32a28f20', class: {
+            }) }, index.h("label", { key: '1d7d4f534661093ea5ea7c885ca7ba355983ff88', class: "toggle-wrapper", htmlFor: inputId }, index.h("input", { key: '43de25ac1c815db634915c302c934d0827b32b4c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), index.h("div", { key: '9ed1fd6cd5b912b25628a2e2c29f0d758e0a7a24', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: 'fbfd9fef85b53219b52b0736a7aa510877d52c78' }), this.renderHintText()), index.h("div", { key: 'b84836acce007f477c2a9c6dfaace3856068b58e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '0b7834f1e125d8a9c0acc7577f344812ccaf52fe' }), this.renderHintText()), index.h("div", { key: '16bebe3d305cccbfcf4d85eb16ac3fe94ae2c59c', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/accordion/accordion.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Host, h } from "@stencil/core";
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
@@ -364,22 +363,18 @@ export class Accordion {
             this.setAria(expanded);
         });
     }
+    /**
+     * Get the icon to use for the toggle icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     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: caretDownRegular,
-            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);
+        return config.get('accordionToggleIcon', chevronDown);
     }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
@@ -410,7 +405,7 @@ export class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: 'dc4f4369be66507b8b0f0e28a8ab73d0d11d89ca', class: {
+        return (h(Host, { key: '815dda5c42051851dfb17312fee6eb60421b680b', class: {
                 [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -423,7 +418,7 @@ export class Accordion {
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
                 'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
-            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: '3e67b334a8b12eb337d2deae47b6a661cba41c74', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'ae7618fb460577c6c31995d8e842c1de16263985', name: "header" })), h("div", { key: '9fc9964f77b9344f763c9adf69ce0bc09534bc75', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '996cf517f866dc516e4ce488c647364e8b2726c8', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'b48b4bc14e8ea1ef04c3e5acebbdf6f7c543c4c7', name: "content" })))));
+            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: '0361184ad0b1a2dbb8879292313fc6ea4d6915aa', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '1176aed8aebd66a17d365f2ecab4a40165a14a17', name: "header" })), h("div", { key: 'ebe6eabeedaee6a9fdcf8c989e706f5f42af54c2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '5c9ebc847e8f161c8fcaf6f4af9ad42ce22217ac', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'a45d5a106dc635d4a8790cdd4fdf04c1b8e25987', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -723,20 +723,18 @@ textarea.alert-input {
   inset-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
-.alert-checkbox-inner {
-  width: var(--token-scale-400, 16px);
-  height: var(--token-scale-400, 16px);
-}
-
-.alert-checkbox-inner path {
-  fill: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-}
-
 [aria-checked=true] .alert-checkbox-icon {
   border-color: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
   background-color: var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
 }
 
+[aria-checked=true] .alert-checkbox-inner {
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
+  background-color: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
+  clip-path: polygon(2.79% 58.21%, 33.75% 89.17%, 99.38% 23.54%, 90.54% 14.71%, 33.75% 71.49%, 11.63% 49.37%);
+}
+
 .alert-button-group {
   -webkit-padding-start: 8px;
   padding-inline-start: 8px;

package/dist/collection/components/alert/alert.js

@@ -427,7 +427,7 @@ export class Alert {
                     'alert-button-inner': true,
                     [`checkbox-label-placement-${richInput.labelPlacement ?? defaultLabelPlacement}`]: true,
                     [`checkbox-justify-${richInput.justify ?? defaultJustify}`]: true,
-                } }, h("div", { class: "alert-checkbox-icon" }, theme === 'ionic' ? (h("svg", { class: "alert-checkbox-inner", viewBox: "0 0 256 256", "aria-hidden": "true" }, h("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))) : (h("div", { class: "alert-checkbox-inner" }))), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
+                } }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
         })));
     }
     renderRadio() {
@@ -565,14 +565,14 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '79be0ec718f515228e2d14cf74f83da91839e7e3', tabindex: "-1", style: {
+        return (h(Host, { key: '607c6f27d3764f68110cf2ebd46e0829aaa432c7', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
                 [theme]: true,
                 'overlay-hidden': true,
                 'alert-translucent': this.translucent,
-            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '38118ef27d201e578cbfd31357c97503c23ea4e1', tappable: this.backdropDismiss }), h("div", { key: 'a1b6123a0d56ba31a089acc8ac516adb64661f68', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'f893bbd5f6b3d0197afed8086bb865f1427dee75', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, h("div", { key: 'ab71e3723710a177ef471029b6f62e9d8f913b9c', class: "alert-head" }, header && (h("h2", { key: '11ba9be074b547bb8e64c22d97945844c279ce35', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '469bb832c8005a957613c70767dacc65377d8e74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '30b8268dc6a34b0e5c976651d876126716974bae', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '06d07b2bbc966e979ead64afd5cc237142400cfb', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '263cdccbefb3a5ff2afe3184320988ae4cc10e7b', tappable: this.backdropDismiss }), h("div", { key: 'd5d67340a83500955d894865864da7cbb11a31df', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'bdc4d4f198d81a8901d08d68106bd8bf1ae3e9e2', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, h("div", { key: '79a9cda2d299b36fa4e1ac9abc501b5f324b3ddf', class: "alert-head" }, header && (h("h2", { key: '8d2ec86a3c0958822819b702d6957f8b703eba1e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '27f2982dbe925379e07fd71dbcf995db197d6f4c', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '6dde6c5d31748e13d5c0dcbf10107d71af4bcf91', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '0e5c2403ab6d04d84945b9375f99d29d7e6b67cc', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/back-button/back-button.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -42,21 +41,20 @@ export class BackButton {
             this.defaultHref = config.get('backButtonDefaultHref');
         }
     }
+    /**
+     * Get the icon to use for the back button icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get backButtonIcon() {
         // Return the icon if it is explicitly set
         if (this.icon != null) {
             return this.icon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronBack,
-            ionic: caretLeftRegular,
-            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
+        const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
         return config.get('backButtonIcon', defaultIcon);
     }
     get backButtonText() {
@@ -64,7 +62,7 @@ export class BackButton {
         return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
     }
     get hasIconOnly() {
-        return this.backButtonIcon && !this.backButtonText;
+        return !!this.backButtonIcon && !this.backButtonText;
     }
     get rippleType() {
         // If the button only has an icon we use the unbounded
@@ -79,7 +77,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '30cb7e566ef5182691373de93dbe694fb8cf72ed', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '76fb1f3b149f64429efb34ba245e2a823e040890', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -89,7 +87,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: 'be59bfbfec6e6591afee4beff7f0527bdd432dab', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '9118e5a082f9092307d80a53307f768461403928', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '14193bf4f0edd1ba45f83ab664ddbe08f541997f', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: 'a83a8cdb8a95d67ff997c1e366a46c7ec2f7b9fc', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '11c5cc4b5eb3fc19db6e094d549546200ba2b90e', type: this.rippleType }))));
+            }) }, h("button", { key: '756332a61b212e4466ee45e7b7bf76a9e55d203f', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '2af18172b063251d103b92d28f5a0437cad3206e', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'd82c57dbfafbeeef019d42b3febcdbd045cc468a', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: 'd26836eb3ab34e95cbc0663971b7be66757ebee5', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '28d049f7aaeab3320f6d0254c0f65721a8fcc43e', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
-import dotsThreeRegular from "@phosphor-icons/core/assets/regular/dots-three.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -50,31 +48,21 @@ export class Breadcrumb {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
+    /**
+     * Get the icon to use for the collapsed icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get breadcrumbCollapsedIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipsisHorizontal,
-            ionic: dotsThreeRegular,
-            md: ellipsisHorizontal,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured breadcrumb collapsed icon or the default icon
-        return config.get('breadcrumbCollapsedIcon', defaultIcon);
+        return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
     }
+    /**
+     * Get the icon to use for the separator icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get breadcrumbSeparatorIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronForwardOutline,
-            ionic: caretRightRegular,
-            md: chevronForwardOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured breadcrumb separator icon or the default icon
-        return config.get('breadcrumbSeparatorIcon', defaultIcon);
+        return config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
     }
     isClickable() {
         return this.href !== undefined;
@@ -98,7 +86,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: 'eb02645656f4ee3752aa9f6c4dee2e57a8ee7527', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '031903ec1227baa7843454eae78f856f41492d4a', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -108,15 +96,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, { key: '54ea53cd2e2f6cabca07565574971c80681f49d8', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: 'bd61fa6839550c381d559b0c3dccd42469374de2', name: "start" }), h("slot", { key: '095a422dc68e1ed78ea1b301bbea9c53e177cbba' }), h("slot", { key: '958b819ab4a37c9e6d6b5ea06da5bbcb01840627', name: "end" })), showCollapsedIndicator && (h("button", { key: '068f87ca666e09286e2fc09fae63e8bdbaad0900', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, { key: 'fa6064b743ee439c8c017494a4237f0905a290ac', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: '7a53001136b8d12d10fa33073dbf83f10895f0a5', name: "start" }), h("slot", { key: '8c3b8954a9dc1eea47b5b57992d98a871b78ea96' }), h("slot", { key: '91a87b34f478ab380bc116d2756f0dee099e071d', name: "end" })), showCollapsedIndicator && (h("button", { key: 'f9b87383ec50f3dc9d0863879fa87366a1013781', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { key: '46d5821fee23327a23a4dfd7ad507ce551f7b00c', "aria-hidden": "true", icon: breadcrumbCollapsedIcon, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: '0d11ad830325fc6e614fc54577f50c400862690b', "aria-hidden": "true", icon: breadcrumbCollapsedIcon, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { key: '2520520d582b923c635548be4da74c138db38b46', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: 'e134f59f8fdc1d8602817a072adfc6f2a89885d7', name: "separator" }, theme === 'ios' || theme === 'ionic' ? (h("ion-icon", { icon: breadcrumbSeparatorIcon, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { key: '7f167f93e1a46a8d6ae6de04c1dfc77cc0c1e7df', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: 'c75a176e0d2d5689470382b55dfcaac0299a6182', name: "separator" }, theme === 'ios' || theme === 'ionic' ? (h("ion-icon", { icon: breadcrumbSeparatorIcon, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,6 +63,7 @@
   /**
    * @prop --size: Size of the checkbox icon
    *
+   * @prop --checkbox-background: Background of the checkbox icon
    * @prop --checkbox-background-checked: Background of the checkbox icon when checked
    *
    * @prop --border-color: Border color of the checkbox icon
@@ -74,7 +75,7 @@
    * @prop --transition: Transition of the checkbox icon
    *
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --checkmark-width: Stroke width of the checkbox checkmark
+   * @prop --checkmark-width: Stroke width of the checkbox checkmark. Only applies when no icon is set in the config.
    */
   display: inline-block;
   position: relative;
@@ -137,16 +138,39 @@ input {
 }
 
 .native-wrapper {
+  border-radius: var(--border-radius);
   display: flex;
+  position: relative;
+  flex-shrink: 0;
   align-items: center;
+  width: var(--size);
+  height: var(--size);
+  transition: var(--transition);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--checkbox-background);
+  box-sizing: border-box;
 }
 
+/**
+ * Apply the color to the ion-icon container so that the default
+ * checkmark icon and any configured icon apply color consistently.
+ */
 .checkbox-icon {
-  position: relative;
+  color: var(--checkmark-color);
+  opacity: 0;
+}
+
+.checkbox-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .checkbox-icon path {
-  opacity: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--checkmark-width);
 }
 
 .checkbox-bottom {
@@ -266,14 +290,14 @@ input {
   display: block;
 }
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .native-wrapper,
+:host(.checkbox-indeterminate) .native-wrapper {
   border-color: var(--border-color-checked);
   background: var(--checkbox-background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-icon path,
-:host(.checkbox-indeterminate) .checkbox-icon path {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
   opacity: 1;
 }
 
@@ -283,8 +307,6 @@ input {
 
 :host {
   /**
-   * @prop --checkmark-height: Stroke height of the checkbox checkmark
-   *
    * @prop --focus-ring-color: Color of the focus ring
    * @prop --focus-ring-width: Width of the focus ring
    * @prop --focus-ring-offset: Offset of the focus ring
@@ -292,8 +314,7 @@ input {
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
   --border-style: var(--token-border-style-solid, solid);
   --border-color: var(--token-primitives-neutral-800, #626262);
-  --checkmark-width: var(--token-scale-400, 16px);
-  --checkmark-height: var(--checkmark-width);
+  --checkmark-width: 3;
   --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
   --focus-ring-offset: var(--token-space-050, var(--token-scale-050, 2px));
@@ -317,9 +338,6 @@ input {
   cursor: pointer;
   z-index: 1;
 }
-:host .native-wrapper {
-  position: relative;
-}
 
 .label-text-wrapper {
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
@@ -359,26 +377,11 @@ input {
 }
 
 .native-wrapper {
-  border-radius: var(--border-radius);
-  flex-shrink: 0;
   justify-content: center;
-  width: var(--size);
-  height: var(--size);
-  transition: var(--transition);
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-  background: var(--checkbox-background);
-  box-sizing: border-box;
 }
 
 .checkbox-icon {
-  width: var(--checkmark-width);
-  height: var(--checkmark-height);
-}
-
-.checkbox-icon path {
-  fill: var(--checkmark-color);
+  font-size: calc(var(--size) * 2 / 3);
 }
 
 .checkbox-bottom {
@@ -455,12 +458,6 @@ input {
   --size: var(--token-scale-400, 16px);
 }
 
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
-  border-color: var(--border-color-checked);
-  background: var(--checkbox-background-checked);
-}
-
 :host(.ion-invalid) {
   --focus-ring-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
 }
@@ -497,9 +494,7 @@ input {
     background-color: var(--token-primitives-neutral-100, #f3f3f3);
   }
   :host(:hover.checkbox-checked) .native-wrapper,
-  :host(:hover.checkbox-checked) .checkbox-icon,
-  :host(:hover.checkbox-indeterminate) .native-wrapper,
-  :host(:hover.checkbox-indeterminate) .checkbox-icon {
+  :host(:hover.checkbox-indeterminate) .native-wrapper {
     background-color: var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da));
   }
 }
@@ -513,9 +508,7 @@ input {
 }
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
   background-color: var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
 }