@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/radio-group/test/legacy/basic/radio-group.e2e.js

@@ -0,0 +1,122 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('radio-group: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/radio-group/test/legacy/basic`, config);
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`radio-group-diff`));
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('radio-group: interaction'), () => {
+        let radioFixture;
+        test.beforeEach(({ page }) => {
+            radioFixture = new RadioFixture(page);
+        });
+        test('spacebar should not deselect without allowEmptySelection', async ({ page }) => {
+            await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="false">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+            await radioFixture.checkRadio('keyboard');
+            await radioFixture.expectChecked(true);
+        });
+        test('spacebar should deselect with allowEmptySelection', async ({ page }) => {
+            await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="true">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+            await radioFixture.checkRadio('keyboard');
+            await radioFixture.expectChecked(false);
+        });
+        test('click should not deselect without allowEmptySelection', async ({ page }) => {
+            await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="false">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+            await radioFixture.checkRadio('mouse');
+            await radioFixture.expectChecked(true);
+        });
+        test('click should deselect with allowEmptySelection', async ({ page }) => {
+            await page.setContent(`
+        <ion-radio-group value="one" allow-empty-selection="true">
+          <ion-item>
+            <ion-label>One</ion-label>
+            <ion-radio id="one" value="one"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+            await radioFixture.checkRadio('mouse');
+            await radioFixture.expectChecked(false);
+        });
+        test('programmatically assigning a value should update the checked radio', async ({ page }) => {
+            await page.setContent(`
+        <ion-radio-group value="1">
+          <ion-item>
+            <ion-label>Item 1</ion-label>
+            <ion-radio value="1" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Item 2</ion-label>
+            <ion-radio value="2" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Item 3</ion-label>
+            <ion-radio value="3" slot="start"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `, config);
+            const radioGroup = page.locator('ion-radio-group');
+            const radioOne = page.locator('ion-radio[value="1"]');
+            const radioTwo = page.locator('ion-radio[value="2"]');
+            await radioGroup.evaluate((el) => (el.value = '2'));
+            await page.waitForChanges();
+            await expect(radioOne).not.toHaveClass(/radio-checked/);
+            await expect(radioTwo).toHaveClass(/radio-checked/);
+        });
+    });
+});
+class RadioFixture {
+    constructor(page) {
+        this.page = page;
+    }
+    async checkRadio(method, selector = 'ion-radio') {
+        const { page } = this;
+        const radio = (this.radio = page.locator(selector));
+        if (method === 'keyboard') {
+            await radio.focus();
+            await page.keyboard.press('Space');
+        }
+        else {
+            await radio.click();
+        }
+        await page.waitForChanges();
+        return radio;
+    }
+    async expectChecked(state) {
+        const { radio } = this;
+        await expect(radio.locator('input')).toHaveJSProperty('checked', state);
+    }
+}

package/dist/collection/components/radio-group/test/legacy/form/radio-group.e2e.js

@@ -0,0 +1,30 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('radio-group: form'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/radio-group/test/legacy/form', config);
+        });
+        test('selecting an option should update the value', async ({ page }) => {
+            const radioGroup = page.locator('ion-radio-group');
+            const ionChange = await page.spyOnEvent('ionChange');
+            const griffRadio = page.locator('ion-radio[value="griff"]');
+            await expect(radioGroup).toHaveAttribute('value', 'biff');
+            await griffRadio.click();
+            await page.waitForChanges();
+            await expect(ionChange).toHaveReceivedEventDetail({ value: 'griff', event: { isTrusted: true } });
+        });
+        test('selecting a disabled option should not update the value', async ({ page }) => {
+            const value = page.locator('#value');
+            const disabledRadio = page.locator('ion-radio[value="george"]');
+            await expect(value).toHaveText('');
+            await expect(disabledRadio).toHaveAttribute('disabled', '');
+            await disabledRadio.click({ force: true });
+            await page.waitForChanges();
+            await expect(value).toHaveText('');
+        });
+    });
+});

package/dist/collection/components/radio-group/test/legacy/search/radio-group.e2e.js

@@ -0,0 +1,38 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+/**
+ * This behavior does not var across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('radio-group'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/radio-group/test/legacy/search', config);
+        });
+        test.describe('radio-group: state', () => {
+            test('radio should remain checked after being removed/readded to the dom', async ({ page }) => {
+                const radioGroup = page.locator('ion-radio-group');
+                const radio = page.locator('ion-radio[value=two]');
+                const searchbarInput = page.locator('ion-searchbar input');
+                // select radio
+                await radio.click();
+                await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+                // filter radio so it is not in DOM
+                await page.fill('ion-searchbar input', 'zero');
+                await searchbarInput.evaluate((el) => el.blur());
+                await page.waitForChanges();
+                await expect(radio).toBeHidden();
+                // ensure radio group has the same value
+                await expect(radioGroup).toHaveJSProperty('value', 'two');
+                // clear the search so the radio appears
+                await page.fill('ion-searchbar input', '');
+                await searchbarInput.evaluate((el) => el.blur());
+                await page.waitForChanges();
+                // ensure that the new radio instance is still checked
+                await expect(radio.locator('input')).toHaveJSProperty('checked', true);
+            });
+        });
+    });
+});

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

@@ -4,28 +4,18 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('range: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            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();
+            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();
             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,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, 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.js

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

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;
 }
@@ -237,7 +260,7 @@ ion-refresher.refresher-native ion-spinner {
   margin-bottom: 0;
   width: 24px;
   height: 24px;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 ion-refresher.refresher-native .spinner-arrow-container {
   display: inherit;
@@ -259,7 +282,7 @@ ion-refresher.refresher-native .arrow-container ion-icon {
   right: 0;
   bottom: -4px;
   position: absolute;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: 12px;
 }
 ion-refresher.refresher-native.refresher-pulling ion-refresher-content .refresher-pulling, ion-refresher.refresher-native.refresher-ready ion-refresher-content .refresher-pulling {
@@ -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, 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);
 }