@ionic/core 7.7.2-dev.11707926434.1affaed4 → 7.7.2-dev.11707932366.16baf005

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

@@ -4,95 +4,128 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('radio: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/radio/test/a11y`, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('radio: keyboard navigation'), () => {
-        test.beforeEach(async ({ page, browserName }) => {
+        test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`
-      <ion-app>
-        <ion-content>
+        <main>
+          <ion-radio>my label</ion-radio>
+          <ion-radio aria-label="my aria label"></ion-radio>
+          <ion-radio-group>
+            <ion-radio>my label in a group</ion-radio>
+          </ion-radio-group>
+          <ion-radio-group>
+            <ion-radio aria-label="my aria label in a group"></ion-radio>
+          </ion-radio-group>
           <ion-list>
-            <ion-radio-group id="first-group" value="huey">
-              <ion-item>
-                <ion-radio value="huey">Huey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="dewey">Dewey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="fooey" disabled>Fooey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="louie">Louie</ion-radio>
-              </ion-item>
-            </ion-radio-group>
+            <ion-item>
+              <ion-radio-group>
+                <ion-radio>my label in a group in a list</ion-radio>
+              </ion-radio-group>
+            </ion-item>
           </ion-list>
           <ion-list>
-            <ion-radio-group id="second-group" value="huey">
-              <ion-item>
-                <ion-radio value="huey">Huey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="dewey">Dewey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="fooey" disabled>Fooey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="louie">Louie</ion-radio>
-              </ion-item>
-            </ion-radio-group>
+            <ion-item>
+              <ion-radio-group>
+                <ion-radio aria-label="my aria label in a group in a list"></ion-radio>
+              </ion-radio-group>
+            </ion-item>
           </ion-list>
-        </ion-content>
-      </ion-app>
-    `, config);
-            if (browserName === 'webkit') {
-                const radio = page.locator('#first-group ion-radio').first();
-                /**
-                 * Sometimes Safari does not focus the first radio.
-                 * This is a workaround to ensure the first radio is focused.
-                 *
-                 * Wait for the first radio to be rendered before tabbing.
-                 * This is necessary because the first radio may not be rendered
-                 * when the page first loads.
-                 *
-                 * This would cause the first radio to be skipped when tabbing.
-                 */
-                await radio.waitFor();
-            }
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
         });
-        test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
-            const firstGroupRadios = page.locator('#first-group ion-radio');
-            const secondGroupRadios = page.locator('#second-group ion-radio');
-            await pageUtils.pressKeys('Tab');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
-            await pageUtils.pressKeys('Tab');
-            await expect(secondGroupRadios.nth(0)).toBeFocused();
-            await pageUtils.pressKeys('shift+Tab');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
+        test('selected state should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-radio-group value="a">
+            <ion-radio value="a">Selected radio</ion-radio>
+          </ion-radio-group>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
         });
-        test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
-            const firstGroupRadios = page.locator('#first-group ion-radio');
-            await pageUtils.pressKeys('Tab');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(1)).toBeFocused();
-            // firstGroupRadios.nth(2) is disabled so it should not receive focus.
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(3)).toBeFocused();
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
-            await page.keyboard.press('ArrowUp');
-            await expect(firstGroupRadios.nth(3)).toBeFocused();
+        test.describe(title('radio: keyboard navigation'), () => {
+            test.beforeEach(async ({ page, browserName }) => {
+                await page.setContent(`
+        <ion-app>
+          <ion-content>
+            <ion-list>
+              <ion-radio-group id="first-group" value="huey">
+                <ion-item>
+                  <ion-radio value="huey">Huey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="dewey">Dewey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="fooey" disabled>Fooey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="louie">Louie</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+            <ion-list>
+              <ion-radio-group id="second-group" value="huey">
+                <ion-item>
+                  <ion-radio value="huey">Huey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="dewey">Dewey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="fooey" disabled>Fooey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="louie">Louie</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+          </ion-content>
+        </ion-app>
+      `, config);
+                if (browserName === 'webkit') {
+                    const radio = page.locator('#first-group ion-radio').first();
+                    /**
+                     * Sometimes Safari does not focus the first radio.
+                     * This is a workaround to ensure the first radio is focused.
+                     *
+                     * Wait for the first radio to be rendered before tabbing.
+                     * This is necessary because the first radio may not be rendered
+                     * when the page first loads.
+                     *
+                     * This would cause the first radio to be skipped when tabbing.
+                     */
+                    await radio.waitFor();
+                }
+            });
+            test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
+                const firstGroupRadios = page.locator('#first-group ion-radio');
+                const secondGroupRadios = page.locator('#second-group ion-radio');
+                await pageUtils.pressKeys('Tab');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+                await pageUtils.pressKeys('Tab');
+                await expect(secondGroupRadios.nth(0)).toBeFocused();
+                await pageUtils.pressKeys('shift+Tab');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+            });
+            test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
+                const firstGroupRadios = page.locator('#first-group ion-radio');
+                await pageUtils.pressKeys('Tab');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(1)).toBeFocused();
+                // firstGroupRadios.nth(2) is disabled so it should not receive focus.
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(3)).toBeFocused();
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+                await page.keyboard.press('ArrowUp');
+                await expect(firstGroupRadios.nth(3)).toBeFocused();
+            });
         });
     });
 });

package/dist/collection/components/radio-group/radio-group.js

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'a8b4c4531f129467641e0916471c9bc95d0706da', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {

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,8 +454,8 @@
   --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-active: var(--ion-color-primary, #3880ff);
+  --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;
 }
@@ -617,7 +548,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,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,11 +454,11 @@
   --knob-box-shadow: none;
   --knob-size: 18px;
   --bar-height: 2px;
-  --bar-background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);
-  --bar-background-active: var(--ion-color-primary, #3880ff);
+  --bar-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);
+  --bar-background-active: var(--ion-color-primary, #0054e9);
   --bar-border-radius: 0;
   --height: 42px;
-  --pin-background: var(--ion-color-primary, #3880ff);
+  --pin-background: var(--ion-color-primary, #0054e9);
   --pin-color: var(--ion-color-primary-contrast, #fff);
 }
 
@@ -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, #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/range/test/a11y/range.e2e.js

@@ -4,18 +4,28 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('range: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/range/test/a11y`, config);
-            /**
-             * Axe does not take <slot> elements into account
-             * when checking color-contrast. As a result, it will
-             * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+            await page.setContent(`
+        <main>
+          <ion-range value="50"><span slot="label">my label</span></ion-range>
+          <ion-range label="my label"></ion-range>
+          <ion-range aria-label="my aria label"></ion-range>
+          <ion-range>
+            <span slot="label">temperature</span>
+            <ion-icon name="snow" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon name="flame" slot="end" aria-hidden="true"></ion-icon>
+          </ion-range>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
+    });
+});
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('range: a11y'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.setContent(`<ion-app>
           <ion-content>

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, #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.js

@@ -594,7 +594,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (h(Host, { key: '611c1aaa015716565349c3f60f724ff29f77fab8', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,