refactor(rtl): use css logical properties for padding/margin (#16987)

* refactor(rtl): use css logical properties for padding/margin

* fix(item-divider): fix padding

* test(rtl): add item basic rtl script

* fix(rtl): update core/src/themes/ionic.mixins.scss

* refactor(rtl): wrap css logical props with @supports

* refactor(rtl): do not use css logical properties for hardcoded 0 values

core/src/components/item-divider/item-divider.scss

@@ -22,7 +22,7 @@
   @include margin(0);
   @include padding(
     var(--padding-top),
-    calc(var(--padding-end) + var(--ion-safe-area-right, 0px))
+    calc(var(--padding-end) + var(--ion-safe-area-right, 0px)),
     var(--padding-bottom),
     calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
   );

core/src/components/item/test/basic/e2e.ts

@@ -8,3 +8,12 @@ test('item: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('item: basic-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/themes/ionic.functions.string.scss

@@ -71,6 +71,7 @@
   @return false;
 }
 
+
 // URL Encode Function
 // --------------------------------------------------
 
@@ -79,3 +80,32 @@
   $encoded: str-replace($spaces, "#", "%23");
   @return $encoded;
 }
+
+
+// Add Selector
+// --------------------------------------------------
+// Used to cleanly add selectors to :host and :host()
+
+@function add-root-selector($root, $addHostSelector, $shadowDom: false) {
+  $selectors: str-split($root, ",");
+
+  $list: ();
+
+  @each $selector in $selectors {
+    @if str-contains($selector, ":host(") {
+      $updated-host: str-replace($selector, ":host(", ":host(#{$addHostSelector}");
+      $list: append($list, $updated-host, comma);
+
+    } @else if str-contains($selector, ":host") {
+      $list: append($list, ":host(#{$addHostSelector}) + b", comma);
+
+    } @else if $shadowDom == true {
+      $list: append($list, ":host(#{$addHostSelector}) #{$selector}", comma);
+
+    } @else {
+      $list: append($list, "#{$addHostSelector} #{$selector}", comma);
+    }
+  }
+
+  @return $list;
+}

core/src/themes/ionic.globals.scss

@@ -17,7 +17,7 @@
 $font-family-base:                  var(--ion-font-family, inherit) !default;
 
 // Global app direction
-$app-direction: ltr !default;
+$app-direction: null !default;
 
 // Global font path
 $font-path: "/dist/fonts" !default;

core/src/themes/ionic.mixins.scss

@@ -157,11 +157,11 @@
 @mixin rtl() {
   @if $app-direction == multi or $app-direction == null {
     $root: #{&};
-    @at-root [dir="rtl"] {
-      #{$root} {
-        @content;
-      }
+
+    @at-root #{add-root-selector($root, "[dir=rtl]")} {
+      @content;
     }
+
   } @else if $app-direction == rtl {
     @content;
   }
@@ -214,19 +214,26 @@
 // @param {string} $end
 // ----------------------------------------------------------
 @mixin property-horizontal($prop, $start, $end: $start) {
-  @if $start == $end {
-    @include multi-dir() {
-      #{$prop}-left: $start;
-      #{$prop}-right: $end;
-    }
+  @if $start == 0 and $end == 0 {
+    #{$prop}-left: $start;
+    #{$prop}-right: $end;
+
   } @else {
-    @include ltr() {
-      #{$prop}-left: $start;
-      #{$prop}-right: $end;
-    }
-    @include rtl() {
-      #{$prop}-left: $end;
-      #{$prop}-right: $start;
+    #{$prop}-left: $start;
+    #{$prop}-right: $end;
+
+    @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
+      @if $start != null {
+        #{$prop}-left: unset;
+      }
+      @if $end != null {
+        #{$prop}-right: unset;
+      }
+
+      -webkit-#{$prop}-start: $start;
+      #{$prop}-inline-start: $start;
+      -webkit-#{$prop}-end: $end;
+      #{$prop}-inline-end: $end;
     }
   }
 }
@@ -240,32 +247,9 @@
 // @param {boolean} $content include content or use default
 // ----------------------------------------------------------
 @mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
-  @if $top == $end and $top == $bottom and $top == $start {
-    @include multi-dir() {
-      #{$prop}: $top;
-    }
-  } @else if $top == $bottom and $end == $start and $top != null and $end != null {
-    @include multi-dir() {
-      #{$prop}: $top $end;
-    }
-  } @else if $end == $start and $top != null and $end != null and $bottom != null {
-    @include multi-dir() {
-      #{$prop}: $top $end $bottom;
-    }
-  } @else if $top != null and $end != null and $bottom != null and $start != null {
-    @include ltr() {
-      #{$prop}: $top $end $bottom $start;
-    }
-    @include rtl() {
-      #{$prop}: $top $start $bottom $end;
-    }
-  } @else {
-    @include property-horizontal($prop, $start, $end);
-    @include multi-dir() {
-      #{$prop}-top: $top;
-      #{$prop}-bottom: $bottom;
-    }
-  }
+  @include property-horizontal($prop, $start, $end);
+  #{$prop}-top: $top;
+  #{$prop}-bottom: $bottom;
 }
 
 // Add padding horizontal