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

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

@@ -70,7 +70,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: flex;
@@ -262,10 +262,10 @@
   --background: var(--ion-background-color, #fff);
   --border-radius: 2px;
   --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  --cancel-button-color: var(--ion-color-step-900, #1a1a1a);
+  --cancel-button-color: var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));
   --clear-button-color: initial;
-  --color: var(--ion-color-step-850, #262626);
-  --icon-color: var(--ion-color-step-600, #666666);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   -webkit-padding-start: 8px;
   padding-inline-start: 8px;
   -webkit-padding-end: 8px;
@@ -280,8 +280,32 @@
   width: 1.3125rem;
   height: 1.3125rem;
 }
-.searchbar-search-icon {
-  inset-inline-start: 16px;
+@supports (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    inset-inline-start: 16px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    left: 16px;
+  }
+  :host-context([dir=rtl]) .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 16px;
+  }
+  [dir=rtl] .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 16px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-search-icon:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 16px;
+    }
+  }
 }
 
 .searchbar-cancel-button {
@@ -295,8 +319,32 @@
   background-color: transparent;
   font-size: 1.5em;
 }
-.searchbar-cancel-button {
-  inset-inline-start: 9px;
+@supports (inset-inline-start: 0) {
+  .searchbar-cancel-button {
+    inset-inline-start: 9px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-cancel-button {
+    left: 9px;
+  }
+  :host-context([dir=rtl]) .searchbar-cancel-button {
+    left: unset;
+    right: unset;
+    right: 9px;
+  }
+  [dir=rtl] .searchbar-cancel-button {
+    left: unset;
+    right: unset;
+    right: 9px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-cancel-button:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 9px;
+    }
+  }
 }
 
 .searchbar-search-icon,
@@ -347,8 +395,32 @@
   border: 0;
   background-color: transparent;
 }
-.searchbar-clear-button {
-  inset-inline-end: 13px;
+@supports (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    inset-inline-end: 13px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    right: 13px;
+  }
+  :host-context([dir=rtl]) .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 13px;
+  }
+  [dir=rtl] .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 13px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-clear-button:dir(rtl) {
+      left: unset;
+      right: unset;
+      left: 13px;
+    }
+  }
 }
 
 .searchbar-clear-button.ion-activated {

package/dist/collection/components/segment-button/segment-button.ios.css

@@ -365,7 +365,7 @@ ion-ripple-effect {
   --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
   --border-style: solid;
   --indicator-box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
-  --indicator-color: var(--ion-color-step-350, var(--ion-background-color, #fff));
+  --indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
   --indicator-height: 100%;
   --indicator-transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
   --indicator-transform: none;
@@ -476,7 +476,7 @@ ion-ripple-effect {
 }
 
 :host(.in-segment-color) .segment-button-indicator-background {
-  background: var(--ion-color-step-350, var(--ion-background-color, #fff));
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
 }
 
 @media (any-hover: hover) {
@@ -489,7 +489,7 @@ ion-ripple-effect {
   --background-checked: var(--ion-toolbar-segment-background-checked, none);
   --color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
   --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
-  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color, #fff)));
+  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))));
 }
 
 /**

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

@@ -80,7 +80,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -183,10 +183,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-select) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-select:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }
@@ -738,7 +756,7 @@ button {
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--ion-color-step-650, #595959);
+  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
 }
 
 :host(.select-label-placement-stacked) .select-wrapper-inner,

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

@@ -80,7 +80,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -183,10 +183,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-select) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-select:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }
@@ -784,8 +802,8 @@ button {
  * }
  */
 :host(.select-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --border-color: var(--ion-color-step-500, gray);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -821,8 +839,8 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-solid:hover) {
-    --background: var(--ion-color-step-100, #e6e6e6);
-    --border-color: var(--ion-color-step-750, #404040);
+    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -831,8 +849,8 @@ button {
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.ion-focused) {
-  --background: var(--ion-color-step-150, #d9d9d9);
-  --border-color: var(--ion-color-step-750, #404040);
+  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -925,7 +943,7 @@ button {
  * }
  */
 :host(.select-fill-outline) {
-  --border-color: var(--ion-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -953,7 +971,7 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1168,7 +1186,7 @@ button {
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
 }
 
 :host(.legacy-select) {
@@ -1181,7 +1199,7 @@ button {
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, gray);
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
 }
 
 /**
@@ -1212,8 +1230,32 @@ button {
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .select-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.select-expanded) .select-highlight,
@@ -1229,8 +1271,27 @@ button {
 :host(.in-item) .select-highlight {
   bottom: 0;
 }
-:host(.in-item) .select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .select-highlight, :host-context([dir=rtl]).in-item .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .select-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -207,7 +207,7 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

package/dist/collection/components/split-pane/split-pane.md.css

@@ -207,7 +207,7 @@
  * }
  */
 :host {
-  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

package/dist/collection/components/tab-bar/tab-bar.ios.css

@@ -230,10 +230,10 @@
  * }
  */
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));
+  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
+  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));
   --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 50px;
 }

package/dist/collection/components/tab-bar/tab-bar.md.css

@@ -232,8 +232,8 @@
 :host {
   --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.07))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, #595959));
+  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));
+  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));
   --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 56px;
 }

package/dist/collection/components/tab-button/tab-button.ios.css

@@ -301,8 +301,32 @@ ion-ripple-effect {
   font-size: 12px;
   line-height: 16px;
 }
-::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 6px);
+@supports (inset-inline-start: 0) {
+  ::slotted(ion-badge) {
+    inset-inline-start: calc(50% + 6px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  ::slotted(ion-badge) {
+    left: calc(50% + 6px);
+  }
+  :host-context([dir=rtl]) ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 6px);
+  }
+  [dir=rtl] ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 6px);
+  }
+  @supports selector(:dir(rtl)) {
+    ::slotted(ion-badge):dir(rtl) {
+      left: unset;
+      right: unset;
+      right: calc(50% + 6px);
+    }
+  }
 }
 
 ::slotted(ion-icon) {
@@ -350,8 +374,27 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 12px);
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+    inset-inline-start: calc(50% + 12px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+    left: calc(50% + 12px);
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 12px);
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: calc(50% + 12px);
+    }
+  }
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -367,18 +410,58 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 10px;
 }
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 35px);
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-start) ::slotted(ion-badge),
+  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
+    inset-inline-start: calc(50% + 35px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-start) ::slotted(ion-badge),
+  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
+    left: calc(50% + 35px);
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 35px);
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: calc(50% + 35px);
+    }
+  }
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-badge),
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 10px;
 }
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 30px);
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
+  :host(.tab-has-label-only) ::slotted(ion-badge) {
+    inset-inline-start: calc(50% + 30px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
+  :host(.tab-has-label-only) ::slotted(ion-badge) {
+    left: calc(50% + 30px);
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 30px);
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: calc(50% + 30px);
+    }
+  }
 }
 
 :host(.tab-layout-label-hide) ::slotted(ion-badge),

package/dist/collection/components/tab-button/tab-button.md.css

@@ -334,8 +334,32 @@ ion-ripple-effect {
   font-size: 8px;
   font-weight: normal;
 }
-::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 6px);
+@supports (inset-inline-start: 0) {
+  ::slotted(ion-badge) {
+    inset-inline-start: calc(50% + 6px);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  ::slotted(ion-badge) {
+    left: calc(50% + 6px);
+  }
+  :host-context([dir=rtl]) ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 6px);
+  }
+  [dir=rtl] ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: calc(50% + 6px);
+  }
+  @supports selector(:dir(rtl)) {
+    ::slotted(ion-badge):dir(rtl) {
+      left: unset;
+      right: unset;
+      right: calc(50% + 6px);
+    }
+  }
 }
 
 ::slotted(ion-badge:empty) {
@@ -357,8 +381,27 @@ ion-ripple-effect {
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
   top: 8px;
 }
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+    inset-inline-start: 70%;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+    left: 70%;
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: 70%;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: 70%;
+    }
+  }
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -375,9 +418,29 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 16px;
 }
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: 80%;
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-start) ::slotted(ion-badge),
+  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
+    inset-inline-start: 80%;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-start) ::slotted(ion-badge),
+  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
+    left: 80%;
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: 80%;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: 80%;
+    }
+  }
 }
 
 :host(.tab-layout-icon-start) ::slotted(ion-icon) {
@@ -394,9 +457,29 @@ ion-ripple-effect {
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 16px;
 }
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
+@supports (inset-inline-start: 0) {
+  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
+  :host(.tab-has-label-only) ::slotted(ion-badge) {
+    inset-inline-start: 70%;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
+  :host(.tab-has-label-only) ::slotted(ion-badge) {
+    left: 70%;
+  }
+  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
+    left: unset;
+    right: unset;
+    right: 70%;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
+      left: unset;
+      right: unset;
+      right: 70%;
+    }
+  }
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-label),