@ionic/core 7.7.1 → 7.7.2-dev.11707425083.192d8103

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

@@ -57,11 +57,9 @@
   /**
    * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
    * @prop --progress-background: Background of the progress bar representing the current value
-   * @prop --buffer-background: DEPRECATED, use `--background` instead
    */
-  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
-  --progress-background: var(--ion-color-primary, #3880ff);
-  --buffer-background: var(--background);
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
+  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -115,7 +113,7 @@
 }
 
 .progress-buffer-bar {
-  background: var(--buffer-background);
+  background: var(--background);
   z-index: 1;
 }
 
@@ -152,7 +150,7 @@
 }
 
 .buffer-circles {
-  background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);
+  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
   /* stylelint-disable property-disallowed-list */
   background-repeat: repeat-x;
   background-position: 5px center;
@@ -172,10 +170,6 @@
   animation-play-state: paused;
 }
 
-:host(.ion-color) .progress-buffer-bar {
-  background: rgba(var(--ion-color-base-rgb), 0.3);
-}
-
 :host(.ion-color) .buffer-circles {
   background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
 }
@@ -258,4 +252,8 @@
 }
 :host {
   height: 4px;
+}
+
+:host(.ion-color) .progress-buffer-bar {
+  background: rgba(var(--ion-color-base-rgb), 0.3);
 }

package/dist/collection/components/progress-bar/test/a11y/progress-bar.e2e.js

@@ -0,0 +1,24 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+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 }) => {
+    test.describe(title('progress-bar: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+          <main>
+            <ion-progress-bar type="indeterminate" aria-label="default"></ion-progress-bar>
+            <ion-progress-bar buffer="0.10" value="0.02" aria-label="buffer"></ion-progress-bar>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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;
 }
@@ -462,7 +444,7 @@ input {
  * }
  */
 :host {
-  --color-checked: var(--ion-color-primary, #3880ff);
+  --color-checked: var(--ion-color-primary, #0054e9);
 }
 
 :host(.legacy-radio) {
@@ -504,31 +486,12 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #4c8dff);
+  background: var(--ion-color-primary-tint, #1a65eb);
   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;
 }
@@ -463,7 +445,7 @@ input {
  */
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #3880ff);
+  --color-checked: var(--ion-color-primary, #0054e9);
   --border-width: 0.125rem;
   --border-style: solid;
   --border-radius: 50%;
@@ -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 {
@@ -551,7 +514,7 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #4c8dff);
+  background: var(--ion-color-primary-tint, #1a65eb);
   content: "";
   opacity: 0.2;
 }

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: '5a4fa1fd7ba19c6111e7d01cae8fca2b22bca2a1', 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;
@@ -524,7 +455,7 @@
   --knob-size: 26px;
   --bar-height: 4px;
   --bar-background: var(--ion-color-step-900, #e6e6e6);
-  --bar-background-active: var(--ion-color-primary, #3880ff);
+  --bar-background-active: var(--ion-color-primary, #0054e9);
   --bar-border-radius: 2px;
   --height: 42px;
 }