@ionic/core 8.2.3-dev.11724345963.10ca6051 → 8.2.3-dev.11724780956.16364df0

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

@@ -59,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -84,7 +106,6 @@
   outline: none;
   cursor: pointer;
   user-select: none;
-  z-index: 2;
 }
 
 :host(.in-item) {
@@ -141,26 +162,6 @@ 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
@@ -175,26 +176,6 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL.
@@ -203,18 +184,6 @@ 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.
@@ -223,91 +192,6 @@ input {
   flex-direction: row-reverse;
 }
 
-/**
- * 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;
-}
-
-: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;
-  }
-}
-
 .toggle-icon-wrapper {
   display: flex;
   position: relative;
@@ -378,6 +262,147 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
+:host {
+  z-index: 2;
+}
+
+: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;
+}
+
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+: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;
+}
+
+: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
  * 

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import circleRegular from "@phosphor-icons/core/assets/regular/circle.svg";
-import lineVerticalRegular from "@phosphor-icons/core/assets/regular/line-vertical.svg";
+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";
@@ -140,7 +140,7 @@ export class Toggle {
         const theme = getIonTheme(this);
         const defaultIcons = {
             ios: removeOutline,
-            ionic: lineVerticalRegular,
+            ionic: checkRegular,
             md: checkmarkOutline,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
@@ -166,7 +166,7 @@ export class Toggle {
         const theme = getIonTheme(this);
         const defaultIcons = {
             ios: ellipseOutline,
-            ionic: circleRegular,
+            ionic: minusRegular,
             md: removeOutline,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
@@ -206,8 +206,9 @@ export class Toggle {
         const theme = getIonTheme(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: '184a920569b42f66f52fc7aab2d8670220a7e605', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '93fc47d96f36150a67232eaf362a77578f3fad11', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -217,10 +218,12 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '702b8e0c1014fa2425a8e4b4e68d451bd6b8ff7a', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'c382b53502cc1aa783674625ddc66adbe96a0619', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'd3c469fb9aca7c90cf1df6e731f3c1345b558b31', class: {
+                'ion-activatable': isIonicTheme,
+                'ion-focusable': isIonicTheme,
+            }) }, h("label", { key: '5393138f72b8ccb31443b56a76a96332bf5b519f', class: "toggle-wrapper" }, h("input", Object.assign({ key: '35af93ddf795b8145bd6f7d7eb66d4793f35372c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'dee41d1d8e3ae69153087222b77b016242e9a6c8', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '1891a02e9ad17a2433f29c7f51cb9d9b16750a4e' })), h("div", { key: 'f84cb5515f519de8a174d9111a99fe4d648d0e76', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '0d708fa9324b8af4d730641ef1577dd682aedfd8' })), h("div", { key: '55b9a578a8464758c409c43288e708617dea4dd8', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -228,14 +231,14 @@ export class Toggle {
         return {
             "ios": ["toggle.ios.scss"],
             "md": ["toggle.md.scss"],
-            "ionic": ["toggle.md.scss"]
+            "ionic": ["toggle.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
             "md": ["toggle.md.css"],
-            "ionic": ["toggle.md.css"]
+            "ionic": ["toggle.ionic.css"]
         };
     }
     static get properties() {