@ionic/core 7.6.7-dev.11707156611.1b43b9ec → 7.6.7-dev.11707162903.1706e75f

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

@@ -228,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 .alert-button-inner {
@@ -447,7 +447,7 @@ textarea.alert-input {
   padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 .alert-message {
@@ -480,11 +480,11 @@ textarea.alert-input {
   margin-right: 0;
   margin-top: 5px;
   margin-bottom: 5px;
-  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   color: var(--ion-text-color, #000);
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -500,8 +500,8 @@ textarea.alert-input {
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
-  border-top: 1px solid var(--ion-color-step-150, #d9d9d9);
-  border-bottom: 1px solid var(--ion-color-step-150, #d9d9d9);
+  border-top: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  border-bottom: 1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   overflow: auto;
 }
 
@@ -529,7 +529,7 @@ textarea.alert-input {
   padding-top: 13px;
   padding-bottom: 13px;
   flex: 1;
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
@@ -542,10 +542,34 @@ textarea.alert-input {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, #737373);
+  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+@supports (inset-inline-start: 0) {
+  .alert-radio-icon {
+    inset-inline-start: 26px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .alert-radio-icon {
+    left: 26px;
+  }
+  :host-context([dir=rtl]) .alert-radio-icon {
+    left: unset;
+    right: unset;
+    right: 26px;
+  }
+  [dir=rtl] .alert-radio-icon {
+    left: unset;
+    right: unset;
+    right: 26px;
+  }
+  @supports selector(:dir(rtl)) {
+    .alert-radio-icon:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 26px;
+    }
+  }
 }
 
 .alert-radio-inner {
@@ -558,12 +582,36 @@ textarea.alert-input {
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
   background-color: var(--ion-color-primary, #0054e9);
 }
-.alert-radio-inner {
-  inset-inline-start: 3px;
+@supports (inset-inline-start: 0) {
+  .alert-radio-inner {
+    inset-inline-start: 3px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .alert-radio-inner {
+    left: 3px;
+  }
+  :host-context([dir=rtl]) .alert-radio-inner {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  [dir=rtl] .alert-radio-inner {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  @supports selector(:dir(rtl)) {
+    .alert-radio-inner:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 3px;
+    }
+  }
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
 }
 
 [aria-checked=true] .alert-radio-icon {
@@ -583,7 +631,7 @@ textarea.alert-input {
   padding-bottom: 13px;
   flex: 1;
   width: calc(100% - 53px);
-  color: var(--ion-color-step-850, #262626);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
@@ -595,11 +643,35 @@ textarea.alert-input {
   height: 16px;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--ion-color-step-550, #737373);
+  border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+@supports (inset-inline-start: 0) {
+  .alert-checkbox-icon {
+    inset-inline-start: 26px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .alert-checkbox-icon {
+    left: 26px;
+  }
+  :host-context([dir=rtl]) .alert-checkbox-icon {
+    left: unset;
+    right: unset;
+    right: 26px;
+  }
+  [dir=rtl] .alert-checkbox-icon {
+    left: unset;
+    right: unset;
+    right: 26px;
+  }
+  @supports selector(:dir(rtl)) {
+    .alert-checkbox-icon:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 26px;
+    }
+  }
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -619,8 +691,32 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary-contrast, #fff);
 }
-[aria-checked=true] .alert-checkbox-inner {
-  inset-inline-start: 3px;
+@supports (inset-inline-start: 0) {
+  [aria-checked=true] .alert-checkbox-inner {
+    inset-inline-start: 3px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  [aria-checked=true] .alert-checkbox-inner {
+    left: 3px;
+  }
+  :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  @supports selector(:dir(rtl)) {
+    [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 3px;
+    }
+  }
 }
 
 .alert-button-group {

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

@@ -239,11 +239,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-850, #2d4665);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
   --color-focused: var(--color-active);
-  --background-focused: var(--ion-color-step-50, rgba(233, 237, 243, 0.7));
+  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));
   /**
    * Main content should be prioritized
    * on iOS, so we set max font size for breadcrumbs.
@@ -281,15 +281,15 @@
 :host(.ion-focused) ::slotted(ion-icon),
 :host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),
 :host(.ion-color.ion-focused) ::slotted(ion-icon) {
-  color: var(--ion-color-step-750, #445b78);
+  color: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, #73849a);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-400, #92a0b3);
+  color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
   font-size: min(1.125rem, 21.6px);
 }
 
@@ -304,13 +304,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, #242d39);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 4px;
-  background: var(--ion-color-step-100, #e9edf3);
-  color: var(--ion-color-step-550, #73849a);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -318,7 +318,7 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, #d9e0ea);
+  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
 }
 
 .breadcrumbs-collapsed-indicator ion-icon {

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

@@ -239,11 +239,11 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-600, #677483);
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
   --color-active: var(--ion-text-color, #03060b);
   --color-hover: var(--ion-text-color, #03060b);
-  --color-focused: var(--ion-color-step-800, #35404e);
-  --background-focused: var(--ion-color-step-50, #fff);
+  --color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
+  --background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
 }
 
 :host(.breadcrumb-active) {
@@ -273,11 +273,11 @@
 }
 
 .breadcrumb-separator {
-  color: var(--ion-color-step-550, #73849a);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 ::slotted(ion-icon) {
-  color: var(--ion-color-step-550, #7d8894);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
   font-size: 1.125rem;
 }
 
@@ -292,13 +292,13 @@
 }
 
 :host(.breadcrumb-active) ::slotted(ion-icon) {
-  color: var(--ion-color-step-850, #222d3a);
+  color: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
 }
 
 .breadcrumbs-collapsed-indicator {
   border-radius: 2px;
-  background: var(--ion-color-step-100, #eef1f3);
-  color: var(--ion-color-step-550, #73849a);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
 }
 
 .breadcrumbs-collapsed-indicator:hover {
@@ -306,5 +306,5 @@
 }
 
 .breadcrumbs-collapsed-indicator:focus {
-  background: var(--ion-color-step-150, #dfe5e8);
+  background: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
 }

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

@@ -185,7 +185,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))));
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 16px;

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

@@ -185,7 +185,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))));
   -webkit-margin-start: 10px;
   margin-inline-start: 10px;
   -webkit-margin-end: 10px;

package/dist/collection/components/card-subtitle/card-subtitle.ios.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-600, #666666);
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/collection/components/card-subtitle/card-subtitle.md.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-550, #737373);
+  --color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/collection/components/card-title/card-title.md.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-850, #262626);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

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

@@ -128,10 +128,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-checkbox) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-checkbox:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-checkbox) label::-moz-focus-inner {
   border: 0;
 }

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

@@ -128,10 +128,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-checkbox) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-checkbox) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-checkbox:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-checkbox) label::-moz-focus-inner {
   border: 0;
 }

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

@@ -186,11 +186,33 @@
     visibility: hidden;
     pointer-events: none;
   }
-  :host(.show-month-and-year) .calendar-next-prev,
-  :host(.show-month-and-year) .calendar-days-of-week,
-  :host(.show-month-and-year) .calendar-body,
-  :host(.show-month-and-year) .datetime-time {
-    inset-inline-start: -99999px;
+  @supports (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      inset-inline-start: -99999px;
+    }
+  }
+  @supports not (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      left: -99999px;
+    }
+    :host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev, :host-context([dir=rtl]).show-month-and-year .calendar-next-prev, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week, :host-context([dir=rtl]).show-month-and-year .calendar-days-of-week, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-body, :host-context([dir=rtl]).show-month-and-year .calendar-body, :host-context([dir=rtl]):host(.show-month-and-year) .datetime-time, :host-context([dir=rtl]).show-month-and-year .datetime-time {
+      left: unset;
+      right: unset;
+      right: -99999px;
+    }
+    @supports selector(:dir(rtl)) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
+        left: unset;
+        right: unset;
+        right: -99999px;
+      }
+    }
   }
 }
 /**
@@ -451,7 +473,7 @@
   padding-bottom: 6px;
   display: flex;
   border: none;
-  background: var(--ion-color-step-300, #edeef0);
+  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: inherit;
@@ -593,7 +615,7 @@ ion-picker {
 :host {
   --background: var(--ion-color-light, #f6f8fc);
   --background-rgb: var(--ion-color-light-rgb, 246, 248, 252);
-  --title-color: var(--ion-color-step-600, #666666);
+  --title-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -609,7 +631,7 @@ ion-picker {
   padding-inline-end: 16px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 0.55px solid var(--ion-color-step-200, #cccccc);
+  border-bottom: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
   font-size: min(0.875rem, 22.4px);
 }
 
@@ -671,7 +693,7 @@ ion-picker {
   padding-inline-end: 8px;
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--ion-color-step-300, #b3b3b3);
+  color: var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));
   font-size: min(0.75rem, 19.2px);
   font-weight: 600;
   line-height: 24px;
@@ -866,7 +888,7 @@ ion-picker {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-top: 0.55px solid var(--ion-color-step-200, #cccccc);
+  border-top: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
 }
 
 :host .datetime-buttons ::slotted(ion-buttons),

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

@@ -186,11 +186,33 @@
     visibility: hidden;
     pointer-events: none;
   }
-  :host(.show-month-and-year) .calendar-next-prev,
-  :host(.show-month-and-year) .calendar-days-of-week,
-  :host(.show-month-and-year) .calendar-body,
-  :host(.show-month-and-year) .datetime-time {
-    inset-inline-start: -99999px;
+  @supports (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      inset-inline-start: -99999px;
+    }
+  }
+  @supports not (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      left: -99999px;
+    }
+    :host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev, :host-context([dir=rtl]).show-month-and-year .calendar-next-prev, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week, :host-context([dir=rtl]).show-month-and-year .calendar-days-of-week, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-body, :host-context([dir=rtl]).show-month-and-year .calendar-body, :host-context([dir=rtl]):host(.show-month-and-year) .datetime-time, :host-context([dir=rtl]).show-month-and-year .datetime-time {
+      left: unset;
+      right: unset;
+      right: -99999px;
+    }
+    @supports selector(:dir(rtl)) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
+        left: unset;
+        right: unset;
+        right: -99999px;
+      }
+    }
   }
 }
 /**
@@ -451,7 +473,7 @@
   padding-bottom: 6px;
   display: flex;
   border: none;
-  background: var(--ion-color-step-300, #edeef0);
+  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: inherit;
@@ -591,7 +613,7 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-step-100, #ffffff);
+  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
   --title-color: var(--ion-color-contrast);
 }
 
@@ -617,7 +639,7 @@ ion-picker {
 }
 
 :host .calendar-action-buttons ion-button {
-  --color: var(--ion-color-step-650, #595959);
+  --color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
 }
 
 .calendar-month-year-toggle {
@@ -629,7 +651,7 @@ ion-picker {
   padding-bottom: 12px;
   min-height: 48px;
   background: transparent;
-  color: var(--ion-color-step-650, #595959);
+  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
   z-index: 1;
 }
 .calendar-month-year-toggle.ion-focused::after {
@@ -653,7 +675,7 @@ ion-picker {
   padding-inline-end: 10px;
   padding-top: 0px;
   padding-bottom: 0px;
-  color: var(--ion-color-step-500, gray);
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
   font-size: 0.875rem;
   line-height: 36px;
 }
@@ -715,7 +737,7 @@ ion-picker {
 }
 
 :host .time-header {
-  color: var(--ion-color-step-650, #595959);
+  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
 }
 
 /**

package/dist/collection/components/datetime-button/datetime-button.css

@@ -77,7 +77,7 @@
   position: relative;
   transition: 150ms color ease-in-out;
   border: none;
-  background: var(--ion-color-step-300, #edeef0);
+  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: 1rem;

package/dist/collection/components/fab-list/fab-list.css

@@ -184,8 +184,27 @@
   margin-bottom: 0;
   flex-direction: row-reverse;
 }
-:host(.fab-list-side-start) {
-  inset-inline-end: 0;
+@supports (inset-inline-start: 0) {
+  :host(.fab-list-side-start) {
+    inset-inline-end: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.fab-list-side-start) {
+    right: 0;
+  }
+  :host-context([dir=rtl]):host(.fab-list-side-start), :host-context([dir=rtl]).fab-list-side-start {
+    left: unset;
+    right: unset;
+    left: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.fab-list-side-start:dir(rtl)) {
+      left: unset;
+      right: unset;
+      left: 0;
+    }
+  }
 }
 
 :host(.fab-list-side-end) {
@@ -197,6 +216,25 @@
   margin-bottom: 0;
   flex-direction: row;
 }
-:host(.fab-list-side-end) {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.fab-list-side-end) {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.fab-list-side-end) {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.fab-list-side-end), :host-context([dir=rtl]).fab-list-side-end {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.fab-list-side-end:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }