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

package/dist/collection/components/toast/toast.js

@@ -10,7 +10,7 @@ import { GESTURE, createDelegateController, createTriggerController, dismiss, ev
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,7 +19,8 @@ import { getAnimationPosition } from "./animations/utils";
 import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part button - Any button element that is displayed inside of the toast.
  * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
@@ -92,6 +93,7 @@ export class Toast {
         this.keyboardClose = false;
         this.position = 'bottom';
         this.positionAnchor = undefined;
+        this.shape = undefined;
         this.buttons = undefined;
         this.translucent = false;
         this.animated = true;
@@ -178,11 +180,12 @@ export class Toast {
      * Present the toast overlay after it has been created.
      */
     async present() {
+        const mode = getIonMode(this);
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
         const { el, position } = this;
         const anchor = this.getAnchorElement();
-        const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
+        const animationPosition = getAnimationPosition(position, anchor, mode, el);
         /**
          * Cache the calculated position of the toast, so we can re-use it
          * in the dismiss animation.
@@ -276,6 +279,17 @@ export class Toast {
             : [];
         return buttons;
     }
+    getShape() {
+        const { shape } = this;
+        // TODO(ROU-11300): Remove theme check when shapes are defined for all themes.
+        if (getIonTheme(this) !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
      * Returns the element specified by the positionAnchor prop,
      * or undefined if prop's value is an ID string and the element
@@ -346,12 +360,12 @@ export class Toast {
         if (buttons.length === 0) {
             return;
         }
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const buttonGroupsClasses = {
             'toast-button-group': true,
             [`toast-button-group-${side}`]: true,
         };
-        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), theme === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
     }
     /**
      * Render the `message` property.
@@ -378,7 +392,8 @@ export class Toast {
         const allButtons = this.getButtons();
         const startButtons = allButtons.filter((b) => b.side === 'start');
         const endButtons = allButtons.filter((b) => b.side !== 'start');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const wrapperClass = {
             'toast-wrapper': true,
             [`toast-${this.position}`]: true,
@@ -391,22 +406,24 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'e31aaf663543af3b9053a9ee889cd77e2f1f5417', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '28df674cad77dda8dd1fd9a9d24247cbce28d11c', class: wrapperClass }, h("div", { key: '4ea547148ac2fc4849af83fc1fce5f7e5d88df88', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '5e416c4c3b38070d57041aef5380c4f8950bd5e3', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'd81c4e9a480af64e85a7b3b1f3a73e78519849ea', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toast.ios.scss"],
-            "md": ["toast.md.scss"]
+            "md": ["toast.md.scss"],
+            "ionic": ["toast.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toast.ios.css"],
-            "md": ["toast.md.css"]
+            "md": ["toast.md.css"],
+            "ionic": ["toast.ionic.css"]
         };
     }
     static get properties() {
@@ -704,6 +721,23 @@ export class Toast {
                 "attribute": "position-anchor",
                 "reflect": false
             },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for a toast with slightly rounded corners,\n`\"round\"` for a toast with fully rounded corners, or `\"rectangular\"`\nfor a toast without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
             "buttons": {
                 "type": "unknown",
                 "mutable": false,
@@ -737,7 +771,7 @@ export class Toast {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the toast will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/toast/toast.md.css

@@ -1,36 +1,3 @@
-/**
- * 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.
@@ -97,11 +64,10 @@
   height: 100%;
   outline: none;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: strict;
-  z-index: 1001;
   pointer-events: none;
 }
+
 :host {
   inset-inline-start: 0;
 }
@@ -137,6 +103,7 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
+
 .toast-wrapper {
   inset-inline-start: var(--start);
   inset-inline-end: var(--end);
@@ -218,6 +185,78 @@
     cursor: pointer;
   }
 }
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 1001;
+}
+
+/**
+ * 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

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

@@ -0,0 +1,419 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --track-background: Background of the toggle track
+   * @prop --track-background-checked: Background of the toggle track when checked
+   * @prop --border-radius: Border radius of the toggle track
+   *
+   * @prop --handle-background: Background of the toggle handle
+   * @prop --handle-background-checked: Background of the toggle handle when checked
+   *
+   * @prop --handle-border-radius: Border radius of the toggle handle
+   * @prop --handle-box-shadow: Box shadow of the toggle handle
+   * @prop --handle-height: Height of the toggle handle
+   * @prop --handle-max-height: Maximum height of the toggle handle
+   * @prop --handle-width: Width of the toggle handle
+   * @prop --handle-spacing: Horizontal spacing around the toggle handle
+   * @prop --handle-transition: Transition of the toggle handle
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+:host(.in-item) {
+  flex: 1 1 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * Toggle can be slotted
+ * in components such as item and
+ * toolbar which is why we do not
+ * limit the below behavior to just ion-item.
+ */
+:host([slot=start]),
+:host([slot=end]) {
+  flex: initial;
+  width: auto;
+}
+
+:host(.ion-focused) input {
+  border: 2px solid #5e9ed6;
+}
+
+:host(.toggle-disabled) {
+  pointer-events: none;
+}
+
+input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  opacity: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.toggle-wrapper {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+  height: inherit;
+  transition: background-color 15ms linear;
+  cursor: inherit;
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+.native-wrapper {
+  display: flex;
+  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;
+}
+
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL.
+ */
+:host(.toggle-label-placement-start) .toggle-wrapper {
+  flex-direction: row;
+}
+
+/**
+ * Label is on the right of the input in LTR and
+ * on the left in RTL.
+ */
+:host(.toggle-label-placement-end) .toggle-wrapper {
+  flex-direction: row-reverse;
+}
+
+.toggle-icon-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  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);
+  transition: var(--handle-transition);
+  background: var(--handle-background);
+  box-shadow: var(--handle-box-shadow);
+  contain: strict;
+}
+
+/**
+ * We do not use the @ltr and @rtl mixins
+ * here because ion-toggle uses the Shadow DOM
+ * and WebKit does not support :host-context.
+ */
+: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 {
+  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {
+  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 {
+  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-checked) .toggle-inner {
+  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
+}
+
+:host {
+  --track-background: var(--ion-primitives-neutral-800, #626262);
+  --track-background-checked: var(--ion-color-primary, #105cef);
+  --border-radius: var(--ion-border-radius-full, 999px);
+  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
+  --focus-ring-width: var(--ion-border-size-050, 2px);
+  --handle-background: var(--ion-primitives-base-white, #ffffff);
+  --handle-background-checked: var(--ion-primitives-base-white, #ffffff);
+  --handle-border-radius: var(--ion-border-radius-full, 999px);
+  --handle-height: var(--ion-scale-500, 20px);
+  --handle-max-height: var(--ion-scale-500, 20px);
+  --handle-width: var(--ion-scale-500, 20px);
+  --handle-spacing: var(--ion-space-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(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
+  width: 100%;
+  z-index: 2;
+}
+
+.toggle-wrapper {
+  align-items: center;
+  min-height: var(--ion-scale-1200, 48px);
+}
+
+.native-wrapper .toggle-icon {
+  width: var(--ion-scale-1100, 44px);
+  height: var(--ion-scale-600, 24px);
+  /**
+   * The handle box shadow should not
+   * overflow outside of the track container.
+   */
+  overflow: hidden;
+}
+
+:host(.ion-color.toggle-checked) .toggle-icon {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-focused) .toggle-icon {
+  outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-width);
+}
+
+:host(.ion-activated) .toggle-icon::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ion-state-press, rgba(36, 36, 36, 0.08));
+  content: "";
+}
+
+:host(.toggle-disabled) .toggle-icon::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+}
+
+.toggle-inner {
+  will-change: background-color, transform;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ion-primitives-neutral-1200, #242424);
+}
+
+.toggle-inner .toggle-switch-icon {
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
+}
+
+/**
+* Label is on the left of the input in LTR and
+* on the right in RTL.
+*/
+:host .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host .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: var(--ion-space-400, 16px);
+  margin-inline-end: var(--ion-space-400, 16px);
+  color: var(--ion-primitives-neutral-1200, #242424);
+}
+
+/**
+* Label is on the right of the input in LTR and
+* on the left in RTL.
+*/
+:host(.toggle-label-placement-end) .toggle-wrapper {
+  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: var(--ion-space-400, 16px);
+  margin-inline-start: var(--ion-space-400, 16px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}