@ionic/core 7.6.7-dev.11707148710.1cd59fde → 7.6.7-dev.11707156611.1b43b9ec

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

@@ -110,28 +110,10 @@
   align-items: center;
   opacity: 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 {
+  inset-inline-start: 0;
 }
+
 :host(.legacy-radio) label::-moz-focus-inner {
   border: 0;
 }
@@ -508,27 +490,8 @@ input {
   content: "";
   opacity: 0.2;
 }
-@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(.ion-focused) .radio-icon::after {
+  inset-inline-start: -9px;
 }
 
 :host(.in-item.legacy-radio) {

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

@@ -110,28 +110,10 @@
   align-items: center;
   opacity: 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 {
+  inset-inline-start: 0;
 }
+
 :host(.legacy-radio) label::-moz-focus-inner {
   border: 0;
 }
@@ -522,27 +504,8 @@ input {
 :host(.ion-focused.legacy-radio) .radio-icon::after {
   top: -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.legacy-radio) .radio-icon::after {
+  inset-inline-start: -12px;
 }
 
 :host(.ion-focused) .radio-icon::after {

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

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

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

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

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

@@ -62,33 +62,10 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-@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 {
+  inset-inline-start: 0;
 }
+
 ion-refresher.refresher-active {
   display: block;
 }
@@ -274,7 +251,7 @@ ion-refresher.refresher-native ion-spinner {
 .refresher-native ion-spinner {
   width: 32px;
   height: 32px;
-  color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
+  color: var(--ion-color-step-450, #747577);
 }
 
 .refresher-native.refresher-refreshing .refresher-pulling ion-spinner,

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

@@ -62,33 +62,10 @@ ion-refresher {
   pointer-events: none;
   z-index: -1;
 }
-@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 {
+  inset-inline-start: 0;
 }
+
 ion-refresher.refresher-active {
   display: block;
 }
@@ -310,7 +287,7 @@ ion-refresher.refresher-native .refresher-refreshing-icon {
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
-  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));
+  border: 1px solid var(--ion-color-step-200, #ececec);
+  background: var(--ion-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,7 +18,8 @@ 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/);
-            const results = await new AxeBuilder({ page }).analyze();
+            // TODO(FW-5937): Remove the disableRules once the ticket is resolved.
+            const results = await new AxeBuilder({ page }).disableRules('aria-progressbar-name').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, "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())));
+        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())));
     }
     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: var(--ion-placeholder-opacity, 0.6);
+  --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, var(--ion-text-color-step-400, #666666));
+  --clear-button-color: var(--ion-color-step-600, #666666);
   --color: var(--ion-text-color, #000);
-  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --icon-color: var(--ion-color-step-600, #666666);
   -webkit-padding-start: 12px;
   padding-inline-start: 12px;
   -webkit-padding-end: 12px;
@@ -289,32 +289,8 @@
   height: 100%;
   contain: strict;
 }
-@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-search-icon {
+  inset-inline-start: 5px;
 }
 
 .searchbar-input {
@@ -351,32 +327,8 @@
   border: 0;
   background-color: transparent;
 }
-@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-button {
+  inset-inline-end: 0;
 }
 
 .searchbar-clear-icon {