fix(toggle): rtl layout renders correctly in safari (#26315)

core/src/components/toggle/toggle.ios.scss

@@ -69,23 +69,23 @@
 }
 
 .toggle-switch-icon {
-  @include ltr() {
-    /* stylelint-disable-next-line property-disallowed-list */
-    right: 6px;
-  }
-
-  @include rtl() {
-    /* stylelint-disable property-disallowed-list */
-    right: initial;
-    left: 6px;
-    /* stylelint-enable property-disallowed-list */
-  }
-
   position: absolute;
 
   color: var(--ion-color-dark);
 }
 
+:host(.toggle-ltr) .toggle-switch-icon {
+  /* stylelint-disable-next-line property-disallowed-list */
+  right: 6px;
+}
+
+:host(.toggle-rtl) .toggle-switch-icon {
+  /* stylelint-disable property-disallowed-list */
+  right: initial;
+  left: 6px;
+  /* stylelint-enable property-disallowed-list */
+}
+
 :host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked {
   // The color contrast of iOS default on/off labels fails to meet WCAG 2.0.
   // We use Ionic's color contrast variables to meet the WCAG 2.0 standard (AAA).
@@ -97,18 +97,6 @@
 }
 
 .toggle-switch-icon-checked {
-  @include ltr() {
-    /* stylelint-disable property-disallowed-list */
-    right: initial;
-    left: 4px;
-    /* stylelint-enable property-disallowed-list */
-  }
-
-  @include rtl() {
-    /* stylelint-disable-next-line property-disallowed-list */
-    right: 4px;
-  }
-
   position: absolute;
 
   width: 15px;
@@ -117,6 +105,18 @@
   transform: translateY(-50%) rotate(90deg);
 }
 
+:host(.toggle-ltr) .toggle-switch-icon-checked {
+  /* stylelint-disable property-disallowed-list */
+  right: initial;
+  left: 4px;
+  /* stylelint-enable property-disallowed-list */
+}
+
+:host(.toggle-rtl) .toggle-switch-icon-checked {
+  /* stylelint-disable-next-line property-disallowed-list */
+  right: 4px;
+}
+
 // iOS Toggle Background Oval: Activated or Checked
 // ----------------------------------------------------------
 
@@ -144,16 +144,15 @@
 
 // when pressing down on the toggle and it IS checked
 // the knob is wider so move it left by 6px in the transform
-:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper {
-  @include ltr() {
-    // transform by 100% - handle width - 6px (width addition on activated)
-    transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);
-  }
 
-  @include rtl() {
-    // transform by -100% + handle width + 6px (width addition on activated)
-    transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);
-  }
+:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper {
+  // transform by 100% - handle width - 6px (width addition on activated)
+  transform: translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper {
+  // transform by -100% + handle width + 6px (width addition on activated)
+  transform: translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);
 }
 
 // iOS Toggle: Disabled

core/src/components/toggle/toggle.scss

@@ -107,7 +107,6 @@ input {
 // --------------------------------------------------
 
 .toggle-inner {
-  @include position(null, null, null, var(--handle-spacing));
   @include border-radius(var(--handle-border-radius));
 
   position: absolute;
@@ -126,31 +125,44 @@ input {
   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 {
+  // stylelint-disable-next-line property-disallowed-list
+  left: var(--handle-spacing);
+}
+
+:host(.toggle-rtl) .toggle-inner {
+  // stylelint-disable-next-line property-disallowed-list
+  right: var(--handle-spacing);
+}
+
 // Toggle Inner Knob: Checked
 // ----------------------------------------------------------
 
-:host(.toggle-checked) .toggle-icon-wrapper {
-  @include ltr() {
-    // transform by 100% - handle width
-    transform: translate3d(calc(100% - var(--handle-width)), 0, 0);
-  }
+:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {
+  // transform by 100% - handle width
+  transform: translate3d(calc(100% - var(--handle-width)), 0, 0)
+}
 
-  @include rtl() {
-    // transform by -100% + handle width
-    transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);
-  }
+:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {
+  // transform by -100% + handle width
+  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);
 }
 
 :host(.toggle-checked) .toggle-inner {
-  @include ltr() {
-    // transform by handle spacing amount
-    transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);
-  }
-
-  @include rtl() {
-    // transform by handle spacing amount
-    transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
-  }
-
   background: var(--handle-background-checked);
 }
+
+:host(.toggle-ltr.toggle-checked) .toggle-inner {
+  // transform by handle spacing amount
+  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-checked) .toggle-inner {
+  // transform by handle spacing amount
+  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
+}

core/src/components/toggle/toggle.tsx

@@ -210,6 +210,7 @@ export class Toggle implements ComponentInterface {
     const mode = getIonMode(this);
     const { label, labelId, labelText } = getAriaLabel(el, inputId);
     const value = this.getValue();
+    const rtl = isRTL(el) ? 'rtl' : 'ltr';
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
@@ -227,6 +228,7 @@ export class Toggle implements ComponentInterface {
           'toggle-checked': checked,
           'toggle-disabled': disabled,
           interactive: true,
+          [`toggle-${rtl}`]: true,
         })}
       >
         <div class="toggle-icon" part="track">