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

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

@@ -110,10 +110,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-radio) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-radio) label, :host-context([dir=rtl]).legacy-radio label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-radio:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-radio) label::-moz-focus-inner {
   border: 0;
 }
@@ -490,8 +508,27 @@ input {
   content: "";
   opacity: 0.2;
 }
-:host(.ion-focused) .radio-icon::after {
-  inset-inline-start: -9px;
+@supports (inset-inline-start: 0) {
+  :host(.ion-focused) .radio-icon::after {
+    inset-inline-start: -9px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.ion-focused) .radio-icon::after {
+    left: -9px;
+  }
+  :host-context([dir=rtl]):host(.ion-focused) .radio-icon::after, :host-context([dir=rtl]).ion-focused .radio-icon::after {
+    left: unset;
+    right: unset;
+    right: -9px;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.ion-focused:dir(rtl)) .radio-icon::after {
+      left: unset;
+      right: unset;
+      right: -9px;
+    }
+  }
 }
 
 :host(.in-item.legacy-radio) {

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

@@ -110,10 +110,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-radio) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-radio) label, :host-context([dir=rtl]).legacy-radio label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-radio:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-radio) label::-moz-focus-inner {
   border: 0;
 }
@@ -504,8 +522,27 @@ input {
 :host(.ion-focused.legacy-radio) .radio-icon::after {
   top: -12px;
 }
-:host(.ion-focused.legacy-radio) .radio-icon::after {
-  inset-inline-start: -12px;
+@supports (inset-inline-start: 0) {
+  :host(.ion-focused.legacy-radio) .radio-icon::after {
+    inset-inline-start: -12px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.ion-focused.legacy-radio) .radio-icon::after {
+    left: -12px;
+  }
+  :host-context([dir=rtl]):host(.ion-focused.legacy-radio) .radio-icon::after, :host-context([dir=rtl]).ion-focused.legacy-radio .radio-icon::after {
+    left: unset;
+    right: unset;
+    right: -12px;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {
+      left: unset;
+      right: unset;
+      right: -12px;
+    }
+  }
 }
 
 :host(.ion-focused) .radio-icon::after {

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

@@ -122,10 +122,33 @@
   height: var(--knob-handle-size);
   text-align: center;
 }
-.range-knob-handle {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .range-knob-handle {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-knob-handle {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .range-knob-handle {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .range-knob-handle {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-knob-handle:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-knob-handle {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -153,10 +176,33 @@
   width: 100%;
   height: var(--bar-height);
 }
-.range-bar-container {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .range-bar-container {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-bar-container {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .range-bar-container {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .range-bar-container {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-bar-container:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-bar-container {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -194,10 +240,33 @@
   z-index: 2;
   pointer-events: none;
 }
-.range-knob {
-  inset-inline-start: calc(50% - var(--knob-size) / 2);
+@supports (inset-inline-start: 0) {
+  .range-knob {
+    inset-inline-start: calc(50% - var(--knob-size) / 2);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-knob {
+    left: calc(50% - var(--knob-size) / 2);
+  }
+  :host-context([dir=rtl]) .range-knob {
+    left: unset;
+    right: unset;
+    right: calc(50% - var(--knob-size) / 2);
+  }
+  [dir=rtl] .range-knob {
+    left: unset;
+    right: unset;
+    right: calc(50% - var(--knob-size) / 2);
+  }
+  @supports selector(:dir(rtl)) {
+    .range-knob:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: calc(50% - var(--knob-size) / 2);
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-knob {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -454,7 +523,7 @@
   --knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
   --knob-size: 26px;
   --bar-height: 4px;
-  --bar-background: var(--ion-color-step-900, #e6e6e6);
+  --bar-background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
   --bar-background-active: var(--ion-color-primary, #0054e9);
   --bar-border-radius: 2px;
   --height: 42px;
@@ -548,7 +617,7 @@
   top: 17px;
   width: 4px;
   height: 8px;
-  background: var(--ion-color-step-900, #e6e6e6);
+  background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
   pointer-events: none;
 }
 

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

@@ -122,10 +122,33 @@
   height: var(--knob-handle-size);
   text-align: center;
 }
-.range-knob-handle {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .range-knob-handle {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-knob-handle {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .range-knob-handle {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .range-knob-handle {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-knob-handle:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-knob-handle {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -153,10 +176,33 @@
   width: 100%;
   height: var(--bar-height);
 }
-.range-bar-container {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .range-bar-container {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-bar-container {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .range-bar-container {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .range-bar-container {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-bar-container:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-bar-container {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -194,10 +240,33 @@
   z-index: 2;
   pointer-events: none;
 }
-.range-knob {
-  inset-inline-start: calc(50% - var(--knob-size) / 2);
+@supports (inset-inline-start: 0) {
+  .range-knob {
+    inset-inline-start: calc(50% - var(--knob-size) / 2);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-knob {
+    left: calc(50% - var(--knob-size) / 2);
+  }
+  :host-context([dir=rtl]) .range-knob {
+    left: unset;
+    right: unset;
+    right: calc(50% - var(--knob-size) / 2);
+  }
+  [dir=rtl] .range-knob {
+    left: unset;
+    right: unset;
+    right: calc(50% - var(--knob-size) / 2);
+  }
+  @supports selector(:dir(rtl)) {
+    .range-knob:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: calc(50% - var(--knob-size) / 2);
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-knob {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -574,8 +643,32 @@
   opacity: 0.13;
   pointer-events: none;
 }
-.range-knob::before {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .range-knob::before {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-knob::before {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .range-knob::before {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .range-knob::before {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-knob::before:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 .range-tick {
@@ -632,10 +725,33 @@
   content: "";
   z-index: -1;
 }
-.range-pin::before {
-  inset-inline-start: 50%;
+@supports (inset-inline-start: 0) {
+  .range-pin::before {
+    inset-inline-start: 50%;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .range-pin::before {
+    left: 50%;
+  }
+  :host-context([dir=rtl]) .range-pin::before {
+    left: unset;
+    right: unset;
+    right: 50%;
+  }
+  [dir=rtl] .range-pin::before {
+    left: unset;
+    right: unset;
+    right: 50%;
+  }
+  @supports selector(:dir(rtl)) {
+    .range-pin::before:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 50%;
+    }
+  }
 }
-
 :host-context([dir=rtl]) .range-pin::before {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -687,13 +803,13 @@
 :host(.range-disabled) .range-bar-active,
 :host(.range-disabled) .range-bar,
 :host(.range-disabled) .range-tick {
-  background-color: var(--ion-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
 }
 
 :host(.range-disabled) .range-knob {
   transform: scale(0.55);
   outline: 5px solid #fff;
-  background-color: var(--ion-color-step-250, #bfbfbf);
+  background-color: var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
 }
 
 :host(.range-disabled) .label-text-wrapper,

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

@@ -62,10 +62,33 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-ion-refresher {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  ion-refresher {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  ion-refresher {
+    left: 0;
+  }
+  :host-context([dir=rtl]) ion-refresher {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] ion-refresher {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    ion-refresher:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 ion-refresher.refresher-active {
   display: block;
 }
@@ -251,7 +274,7 @@ ion-refresher.refresher-native ion-spinner {
 .refresher-native ion-spinner {
   width: 32px;
   height: 32px;
-  color: var(--ion-color-step-450, #747577);
+  color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
 }
 
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,

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

@@ -62,10 +62,33 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-ion-refresher {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  ion-refresher {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  ion-refresher {
+    left: 0;
+  }
+  :host-context([dir=rtl]) ion-refresher {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] ion-refresher {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    ion-refresher:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 ion-refresher.refresher-active {
   display: block;
 }
@@ -287,7 +310,7 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  border: 1px solid var(--ion-color-step-200, #ececec);
-  background: var(--ion-color-step-250, #ffffff);
+  border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));
+  background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
 }

package/dist/collection/components/refresher/test/a11y/refresher.e2e.js

@@ -18,8 +18,7 @@ configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEa
             const refresher = await page.locator('ion-refresher');
             await dragElementBy(target, page, 0, 320, undefined, undefined, false);
             await expect(refresher).toHaveClass(/refresher-pulling/);
-            // TODO(FW-5937): Remove the disableRules once the ticket is resolved.
-            const results = await new AxeBuilder({ page }).disableRules('aria-progressbar-name').analyze();
+            const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });

package/dist/collection/components/refresher-content/refresher-content.js

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { class: mode }, h("div", { class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { class: mode }, h("div", { class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, "aria-label": "pulling icon", paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner, "aria-label": "refreshing icon" }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

package/dist/collection/components/searchbar/searchbar.ios.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;
@@ -263,9 +263,9 @@
   --border-radius: 10px;
   --box-shadow: none;
   --cancel-button-color: var(--ion-color-primary, #0054e9);
-  --clear-button-color: var(--ion-color-step-600, #666666);
+  --clear-button-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   --color: var(--ion-text-color, #000);
-  --icon-color: var(--ion-color-step-600, #666666);
+  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   -webkit-padding-start: 12px;
   padding-inline-start: 12px;
   -webkit-padding-end: 12px;
@@ -289,8 +289,32 @@
   height: 100%;
   contain: strict;
 }
-.searchbar-search-icon {
-  inset-inline-start: 5px;
+@supports (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    inset-inline-start: 5px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    left: 5px;
+  }
+  :host-context([dir=rtl]) .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 5px;
+  }
+  [dir=rtl] .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 5px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-search-icon:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 5px;
+    }
+  }
 }
 
 .searchbar-input {
@@ -327,8 +351,32 @@
   border: 0;
   background-color: transparent;
 }
-.searchbar-clear-button {
-  inset-inline-end: 0;
+@supports (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    inset-inline-end: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    right: 0;
+  }
+  :host-context([dir=rtl]) .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 0;
+  }
+  [dir=rtl] .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-clear-button:dir(rtl) {
+      left: unset;
+      right: unset;
+      left: 0;
+    }
+  }
 }
 
 .searchbar-clear-icon {