chore(RTL): RTL swapped left/right spacing with css logical properties (

#2158)

dist/button/button.css

@@ -118,11 +118,13 @@ a.fake-btn svg.icon {
 }
 button.btn svg.icon:first-child,
 a.fake-btn svg.icon:first-child {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 button.btn svg.icon:last-child,
 a.fake-btn svg.icon:last-child {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 button.btn svg.icon:only-child,
 a.fake-btn svg.icon:only-child {
@@ -471,21 +473,6 @@ button.btn--floating-label .btn__floating-label--inline {
   position: unset;
   transform: translate(0, -6px);
 }
-[dir="rtl"] button.btn svg.icon--chevron-down-12:first-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:first-child {
-  margin-left: 8px;
-  margin-right: 0;
-}
-[dir="rtl"] button.btn svg.icon--chevron-down-12:last-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:last-child {
-  margin-left: 0;
-  margin-right: 8px;
-}
-[dir="rtl"] button.btn svg.icon--chevron-down-12:only-child,
-[dir="rtl"] a.fake-btn svg.icon--chevron-down-12:only-child {
-  margin-left: 0;
-  margin-right: 0;
-}
 [dir="rtl"] button.btn--split-start,
 [dir="rtl"] a.fake-btn--split-start {
   border-radius: 0 24px 24px 0;
@@ -512,8 +499,3 @@ button.btn--floating-label .btn__floating-label--inline {
   border-left-color: var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color: var(--primary-border-split-color, var(--color-stroke-subtle));
 }
-[dir="rtl"] button.btn svg.icon,
-[dir="rtl"] a.fake-btn svg.icon {
-  margin-left: 8px;
-  margin-right: 0;
-}

dist/carousel/carousel.css

@@ -122,17 +122,13 @@ div.carousel {
 .carousel__control--next {
   right: -16px;
 }
-.carousel__control .icon--chevron-right-24 {
-  margin-left: 2px;
-}
-.carousel__control .icon--chevron-left-24 {
-  margin-left: -2px;
-}
 .carousel__control .icon--chevron-right-12 {
-  margin-left: 1px;
+  -webkit-margin-start: 1px;
+          margin-inline-start: 1px;
 }
 .carousel__control .icon--chevron-left-12 {
-  margin-left: -1px;
+  -webkit-margin-end: 1px;
+          margin-inline-end: 1px;
 }
 .carousel__control svg {
   color: var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
@@ -189,24 +185,10 @@ span.carousel__container {
   left: unset;
   right: -16px;
 }
-[dir="rtl"] .carousel__control .icon--chevron-left-24 {
-  margin-left: 2px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-left-12 {
-  margin-left: 1px;
-}
 [dir="rtl"] .carousel__control--next {
   left: -16px;
   right: unset;
 }
-[dir="rtl"] .carousel__control .icon--chevron-right-24 {
-  margin-left: -2px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-right-12 {
-  margin-left: -1px;
-}
-[dir="rtl"] .carousel__control .icon--chevron-left-24,
-[dir="rtl"] .carousel__control .icon--chevron-right-24,
 [dir="rtl"] .carousel__control .icon--chevron-left-12,
 [dir="rtl"] .carousel__control .icon--chevron-right-12 {
   transform: rotate(180deg);

dist/combobox/combobox.css

@@ -46,6 +46,11 @@ span.combobox {
   left: 0;
   right: unset;
 }
+.combobox__control > svg.icon,
+.combobox__control > button {
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
+}
 .combobox__option[role^="option"] {
   background-color: transparent;
   border-style: solid;
@@ -132,7 +137,6 @@ span.combobox {
 }
 .combobox__control > svg.icon--chevron-down-12 {
   color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
-  margin-left: 8px;
   pointer-events: none;
   position: absolute;
   right: 17px;
@@ -227,8 +231,6 @@ span.combobox {
 }
 [dir="rtl"] .combobox__control > svg.icon,
 [dir="rtl"] .combobox__control > button {
-  margin-left: 0;
-  margin-right: 8px;
   right: unset;
 }
 [dir="rtl"] .combobox__control > svg.icon {

dist/cta-button/cta-button.css

@@ -76,10 +76,12 @@ a.cta-btn svg.icon {
   width: 10px;
 }
 a.cta-btn svg.icon:first-child {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 a.cta-btn svg.icon:last-child {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 a.cta-btn svg.icon:only-child {
   margin: 0;

dist/details/details.css

@@ -28,15 +28,12 @@ summary.details__summary--small {
   padding: 4px 8px;
 }
 span.details__icon {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 span.details__icon[hidden] {
   display: inline-block;
 }
-[dir="rtl"] span.details__icon {
-  margin-left: 0;
-  margin-right: 8px;
-}
 details.details[open] span.details__icon {
   transform: rotate(180deg);
 }

dist/drawer-dialog/drawer-dialog.css

@@ -42,7 +42,8 @@
   white-space: nowrap;
 }
 .drawer-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: 16px;
+          margin-inline-start: 16px;
 }
 .drawer-dialog__header .fake-link {
   text-decoration: none;

dist/field/field.css

@@ -25,7 +25,8 @@ div.field--table {
   justify-content: flex-end;
 }
 .field__description--group > :last-child {
-  margin-left: 5px;
+  -webkit-margin-start: 5px;
+          margin-inline-start: 5px;
   text-align: right;
 }
 .field__description--group > :first-child {
@@ -115,6 +116,5 @@ div.field__description {
   margin-top: 16px;
 }
 [dir="rtl"] .field__description--group > :last-child {
-  margin-right: 5px;
   text-align: left;
 }

dist/filter-menu-button/filter-menu-button.css

@@ -46,7 +46,8 @@ button.filter-menu-button__button:active {
 .filter-menu-button__button-cell svg.icon--chevron-down-12 {
   align-self: center;
   color: var(--filter-menu-button-icon-color, var(--color-foreground-primary));
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 .filter-menu-button__button-text {
   display: inline-block;
@@ -264,10 +265,6 @@ button.filter-menu-button__footer:hover {
 div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
   outline: none;
 }
-[dir="rtl"] .filter-menu-button__button-cell .icon--chevron-down-12 {
-  margin-left: 0;
-  margin-right: 8px;
-}
 [dir="rtl"] .filter-menu-button__checkbox {
   margin-left: 8px;
 }

dist/fullscreen-dialog/fullscreen-dialog.css

@@ -52,7 +52,8 @@
   white-space: nowrap;
 }
 .fullscreen-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: 16px;
+          margin-inline-start: 16px;
 }
 .fullscreen-dialog__header .fake-link {
   outline-offset: 4px;

dist/inline-notice/inline-notice.css

@@ -9,7 +9,8 @@ span.inline-notice {
 }
 .inline-notice__header {
   display: flex;
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
   margin-top: 4px;
 }
 .inline-notice p {
@@ -19,6 +20,3 @@ span.inline-notice {
 .inline-notice button.fake-link {
   color: var(--color-foreground-primary);
 }
-[dir="rtl"] .inline-notice__header .icon.icon--confirmation-filled-16 {
-  margin-left: 8px;
-}

dist/lightbox-dialog/lightbox-dialog.css

@@ -57,7 +57,8 @@
   white-space: nowrap;
 }
 .lightbox-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: 16px;
+          margin-inline-start: 16px;
 }
 .lightbox-dialog__main {
   box-sizing: border-box;
@@ -116,7 +117,8 @@ button.icon-btn.lightbox-dialog__close {
   z-index: 1;
 }
 button.icon-btn.lightbox-dialog__prev {
-  margin-right: 16px;
+  -webkit-margin-end: 16px;
+          margin-inline-end: 16px;
 }
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
@@ -213,10 +215,6 @@ button.icon-btn.lightbox-dialog__prev {
   height: 95%;
   max-height: 95%;
 }
-[dir="rtl"] button.icon-btn.lightbox-dialog__prev {
-  margin-left: 16px;
-  margin-right: 0;
-}
 [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
   transform: rotate(180deg);
 }

dist/listbox-button/listbox-button.css

@@ -96,7 +96,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
   opacity: 1;
@@ -157,10 +158,6 @@ span.listbox-button__value {
 .listbox-button__options:focus:not(:focus-visible) {
   outline: none;
 }
-[dir="rtl"] .listbox-button__option svg.icon {
-  margin-left: 0;
-  margin-right: 8px;
-}
 [dir="rtl"] .listbox-button .btn__label {
   color: var(--listbox-button-label-color, var(--color-foreground-secondary));
   margin-left: 3px;

dist/listbox/listbox.css

@@ -66,11 +66,8 @@ div.listbox__option svg.icon {
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  margin-left: 8px;
-}
-[dir="rtl"] div.listbox__option svg.icon {
-  margin-left: 0;
-  margin-right: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 div.listbox__options[role="listbox"]:focus .listbox__option--active[role="option"] {
   background-color: var(--color-state-primary-hover);

dist/page-notice/page-notice.css

@@ -79,12 +79,14 @@ span[role="region"].page-notice {
 .page-notice__header {
   grid-column: 1;
   grid-row: 1;
-  padding-right: 16px;
+  -webkit-margin-end: 16px;
+          margin-inline-end: 16px;
 }
 .page-notice__main {
   grid-column: 1 / 3;
   grid-row: 1;
-  padding-right: 16px;
+  -webkit-margin-end: 16px;
+          margin-inline-end: 16px;
 }
 .page-notice__header + .page-notice__main {
   grid-column: 2;
@@ -130,13 +132,6 @@ p.page-notice__cta {
     margin-top: 0;
   }
 }
-[dir="rtl"] .page-notice__header {
-  padding-left: 16px;
-  padding-right: 0;
-}
-[dir="rtl"] .page-notice__main {
-  padding-right: 0;
-}
 [dir="rtl"] .page-notice__footer {
   margin-left: initial;
   margin-right: auto;

dist/pagination/pagination.css

@@ -38,11 +38,13 @@ button.pagination__previous {
 }
 a.pagination__next,
 button.pagination__next {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 a.pagination__previous,
 button.pagination__previous {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 .pagination__item {
   align-items: center;
@@ -127,16 +129,6 @@ nav.pagination--fluid ol.pagination__items li {
 [dir="rtl"] nav.pagination svg.icon--arrow-left-16 {
   transform: rotate(180deg);
 }
-[dir="rtl"] a.pagination__next,
-[dir="rtl"] button.pagination__next {
-  margin-left: 0;
-  margin-right: 8px;
-}
-[dir="rtl"] a.pagination__previous,
-[dir="rtl"] button.pagination__previous {
-  margin-left: 8px;
-  margin-right: 0;
-}
 @media (min-width: 768px) {
   nav.pagination {
     margin: 16px 0;

dist/panel-dialog/panel-dialog.css

@@ -57,7 +57,8 @@
   white-space: nowrap;
 }
 .panel-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: 16px;
+          margin-inline-start: 16px;
 }
 .panel-dialog__header .fake-link {
   outline-offset: 4px;