@ionic/core 8.7.6-dev.11759421585.1b377fd1 → 8.7.6-dev.11759523190.11a976aa

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,89 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --track-background: Background of the toggle track
@@ -166,6 +77,7 @@
   max-width: 100%;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
 }
 
 :host(.in-item) {
@@ -186,6 +98,10 @@
   width: auto;
 }
 
+:host(.ion-focused) input {
+  border: 2px solid #5e9ed6;
+}
+
 :host(.toggle-disabled) {
   pointer-events: none;
 }
@@ -209,6 +125,26 @@ input {
   cursor: inherit;
 }
 
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+: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;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -224,11 +160,17 @@ input {
 }
 
 .toggle-bottom {
+  padding-top: 4px;
   display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
   white-space: normal;
 }
 
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
+}
+
 /**
  * Error text should only be shown when .ion-invalid is
  * present on the checkbox. Otherwise the helper text should
@@ -236,10 +178,12 @@ input {
  */
 .toggle-bottom .error-text {
   display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
 .toggle-bottom .helper-text {
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
@@ -258,6 +202,18 @@ input {
   flex-direction: row;
 }
 
+:host(.toggle-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 /**
  * Label is on the right of the input in LTR and
  * on the left in RTL.
@@ -267,6 +223,92 @@ input {
   justify-content: start;
 }
 
+/**
+ * The margin between the label and
+ * the input should be on the start
+ * when the label sits at the end.
+ */
+: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(.toggle-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the toggle.
+ */
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+  text-align: center;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+   * The margin between the label and
+   * the toggle should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+  /**
+   * Label text should not extend
+   * beyond the bounds of the toggle.
+   */
+  max-width: calc(100% / 0.75);
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
+  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 {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
+  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 {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
 :host(.toggle-justify-space-between) .toggle-wrapper {
   justify-content: space-between;
 }
@@ -365,155 +407,6 @@ input {
   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 {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
-* Label is on the left of the input in LTR and
-* on the right in RTL. Label also has a fixed width.
-*/
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
-* Label is on top of the toggle.
-*/
-:host(.toggle-label-placement-stacked) .toggle-wrapper {
-  flex-direction: column;
-  text-align: center;
-}
-
-:host(.toggle-label-placement-stacked) .label-text-wrapper {
-  transform: scale(0.75);
-  /**
-    * The margin between the label and
-    * the toggle should be on the bottom
-    * when the label sits on top.
-    */
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 16px;
-  /**
-    * Label text should not extend
-    * beyond the bounds of the toggle.
-    */
-  max-width: calc(100% / 0.75);
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
-  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 {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
-  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 {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
-:host(.toggle-label-placement-start) .label-text-wrapper {
-  /**
-    * The margin between the label and
-    * the input should be on the end
-    * when the label sits at the start.
-    */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
-* The margin between the label and
-* the input should be on the start
-* when the label sits at the end.
-*/
-:host(.toggle-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -569,12 +462,6 @@ input {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -710,9 +597,6 @@ input {
   position: absolute;
   width: 15px;
   height: 15px;
-}
-
-.toggle-switch-icon-checked-default {
   transform: translateY(-50%) rotate(90deg);
 }
 

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

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import checkRegular from "@phosphor-icons/core/assets/regular/check.svg";
-import minusRegular from "@phosphor-icons/core/assets/regular/minus.svg";
 import { Host, h } from "@stencil/core";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
 import { hapticSelection } from "../../utils/native/haptic";
@@ -11,10 +9,9 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -126,8 +123,11 @@ export class Toggle {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (checked) => {
-            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
+        this.getSwitchLabelIcon = (mode, checked) => {
+            if (mode === 'md') {
+                return checked ? checkmarkOutline : removeOutline;
+            }
+            return checked ? removeOutline : ellipseOutline;
         };
     }
     disabledChanged() {
@@ -194,68 +194,18 @@ export class Toggle {
             this.focusEl.focus();
         }
     }
-    get toggleDefaultCheckedIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: removeOutline,
-            ionic: checkRegular,
-            md: 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;
-    }
-    /**
-     * Get the icon to use for the checked icon.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get toggleCheckedIcon() {
-        return config.get('toggleCheckedIcon', this.toggleDefaultCheckedIcon);
-    }
-    /**
-     * Get the icon to use for the unchecked icon.
-     * Otherwise, 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
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipseOutline,
-            ionic: minusRegular,
-            md: 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
-        return config.get('toggleUncheckedIcon', defaultIcon);
-    }
-    renderOnOffSwitchLabels(checked) {
-        const icon = this.getSwitchLabelIcon(checked);
+    renderOnOffSwitchLabels(mode, checked) {
+        const icon = this.getSwitchLabelIcon(mode, checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
-                /**
-                 * The default checked icon is being modified with
-                 * styling that causes it to rotate by 90 degrees
-                 * when the theme is `ios`.
-                 *
-                 * To prevent any rotation on a custom icon that is
-                 * set through the config, we need to apply a class
-                 * that handles the styling only when the default
-                 * checked icon is being used.
-                 */
-                'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && (theme === 'md' || theme === 'ionic') && this.renderOnOffSwitchLabels(checked)))));
+            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -288,13 +238,12 @@ export class Toggle {
     }
     render() {
         const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '956aeee2151b8cc8239edeaa935475e3019a7b5f', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '21037ea2e8326f58c84becadde475f007f931924', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+                [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -303,27 +252,23 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-                'ion-activatable': isIonicTheme,
-                'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '4aa309eac4fe94639f96d08ae9d09a65fedb271f', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4057524d70ca25e0df76d726d85656f16df655ca', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '3b0a476f62f1e183d4b4cbc823c749140ba27d4d', class: {
+            }) }, h("label", { key: '4d153679d118d01286f6633d1c19558a97745ff6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '0dfcd4df15b8d41bec5ff5f8912503afbb7bec53', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'ffed3a07ba2ab70e5b232e6041bc3b6b34be8331', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '75a6ccef569eabf17b3d3fba165d8110960832af' }), this.renderHintText()), h("div", { key: 'e2bc757d81ecc56ac40450586d1bc9f87e0ea726', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd88e1e3dcdd8293f6b61f237cd7a0511dcbce300' }), this.renderHintText()), h("div", { key: '0e924225f5f0caf3c88738acb6c557bd8c1b68f6', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toggle.ios.scss"],
-            "md": ["toggle.md.scss"],
-            "ionic": ["toggle.ionic.scss"]
+            "md": ["toggle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"],
-            "ionic": ["toggle.ionic.css"]
+            "md": ["toggle.md.css"]
         };
     }
     static get properties() {