@ionic/core 7.6.2-dev.11704998705.1e1f9850 → 7.6.2-dev.11705694334.11b34c62

package/dist/collection/components/item-sliding/item-sliding.js

@@ -2,10 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { supportsWebAnimations } from "../../utils/animation/animation";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
 import { isEndSide } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
+import { isRTL } from "../../utils/rtl/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
+import { slidingItemAnimation } from "./animations/item-sliding-options";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
@@ -22,6 +26,7 @@ export class ItemSliding {
         this.initialContentScrollY = true;
         this.state = 2 /* SlidingState.Disabled */;
         this.disabled = false;
+        this.animationType = 'legacy';
     }
     disabledChanged() {
         if (this.gesture) {
@@ -70,6 +75,12 @@ export class ItemSliding {
             this.mutationObserver = undefined;
         }
     }
+    componentWillLoad() {
+        if (!supportsWebAnimations && this.animationType === 'modern') {
+            printIonWarning('Animation type "modern" needs Web Animations API support. Falling back to "legacy".');
+            this.animationType = 'legacy';
+        }
+    }
     /**
      * Get the amount the item is open in pixels.
      */
@@ -174,6 +185,20 @@ export class ItemSliding {
             return this.rightOptions;
         }
     }
+    /**
+     * Given a side, return the width of the options on that side.
+     *
+     * @param side The side of the options to get the width for.
+     */
+    getOptionsWidth(side) {
+        if (side === 'start') {
+            return this.optsWidthLeftSide;
+        }
+        else if (side === 'end') {
+            return this.optsWidthRightSide;
+        }
+        return 0;
+    }
     async updateOptions() {
         const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
@@ -321,7 +346,8 @@ export class ItemSliding {
         if (!this.item) {
             return;
         }
-        const { el } = this;
+        const { el, animationType } = this;
+        const rtl = isRTL(el);
         const style = this.item.style;
         this.openAmount = openAmount;
         if (isFinal) {
@@ -365,14 +391,51 @@ export class ItemSliding {
             }, 600);
             openSlidingItem = undefined;
             style.transform = '';
+            if (animationType === 'modern') {
+                this.animateSlidingItemOptions(0, rtl);
+            }
             return;
         }
         style.transform = `translate3d(${-openAmount}px,0,0)`;
+        if (animationType === 'modern') {
+            this.animateSlidingItemOptions(openAmount, rtl);
+        }
         this.ionDrag.emit({
             amount: openAmount,
             ratio: this.getSlidingRatioSync(),
         });
     }
+    animateSlidingItemOptions(openAmount, isRTL) {
+        var _a;
+        /**
+         * The total width of the 'processed' options.
+         * Used to calculate the offset to move each option off the
+         * screen, on top of each other.
+         */
+        let optionWidthOffset = 0;
+        const side = this.state === 16 /* SlidingState.Start */ ? 'start' : 'end';
+        const options = Array.from(((_a = this.getOptions(side)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ion-item-option')) || []);
+        const optsWidth = this.getOptionsWidth(side);
+        const progress = Math.abs(openAmount / optsWidth);
+        options.forEach((option, index) => {
+            let isFinal = false;
+            let zIndex;
+            let viewportOffset = 0;
+            const isReset = openAmount === 0;
+            if (side === 'start') {
+                viewportOffset = isRTL ? -1 * (optsWidth - optionWidthOffset) : -1 * (option.clientWidth + optionWidthOffset);
+                isFinal = openAmount <= -optsWidth;
+                zIndex = isRTL ? undefined : options.length - index;
+            }
+            else {
+                viewportOffset = isRTL ? optionWidthOffset + option.clientWidth : optsWidth - optionWidthOffset;
+                isFinal = openAmount >= optsWidth;
+                zIndex = isRTL ? options.length - index : undefined;
+            }
+            slidingItemAnimation(option, viewportOffset, progress, isFinal, isReset, zIndex);
+            optionWidthOffset += option.clientWidth;
+        });
+    }
     getSlidingRatioSync() {
         if (this.openAmount > 0) {
             return this.openAmount / this.optsWidthRightSide;
@@ -386,13 +449,15 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
+        const { state, animationType } = this;
         return (h(Host, { class: {
                 [mode]: true,
-                'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
-                'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
-                'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,
-                'item-sliding-active-swipe-end': (this.state & 32 /* SlidingState.SwipeEnd */) !== 0,
-                'item-sliding-active-swipe-start': (this.state & 64 /* SlidingState.SwipeStart */) !== 0,
+                [`item-sliding-animation-${animationType}`]: true,
+                'item-sliding-active-slide': state !== 2 /* SlidingState.Disabled */,
+                'item-sliding-active-options-end': (state & 8 /* SlidingState.End */) !== 0,
+                'item-sliding-active-options-start': (state & 16 /* SlidingState.Start */) !== 0,
+                'item-sliding-active-swipe-end': (state & 32 /* SlidingState.SwipeEnd */) !== 0,
+                'item-sliding-active-swipe-start': (state & 64 /* SlidingState.SwipeStart */) !== 0,
             } }));
     }
     static get is() { return "ion-item-sliding"; }
@@ -425,6 +490,24 @@ export class ItemSliding {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "animationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'modern' | 'legacy'",
+                    "resolved": "\"legacy\" | \"modern\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the animation behavior for sliding item options.\nYou can choose between two available options: \"modern\" and \"legacy\".\n\n- \"legacy\": The item will be swiped to reveal the option buttons beneath it.\n- \"modern\": As the item is swiped, all item options will smoothly and gradually reveal themselves.\n\nThe \"modern\" animation type requires the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\nCheck [Browser Support](https://caniuse.com/web-animation) for more information."
+                },
+                "attribute": "animation-type",
+                "reflect": false,
+                "defaultValue": "'legacy'"
             }
         };
     }

package/dist/collection/components/item-sliding/test/a11y/item-sliding.e2e.js

@@ -1,36 +1,8 @@
 /*!
  * (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";
 import { testSlidingItem } from "../test.utils";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('item-sliding: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-item-sliding id="axe">
-            <ion-item>
-              <ion-label>Sliding Item with End Options</ion-label>
-            </ion-item>
-
-            <ion-item-options>
-              <ion-item-option>Favorite</ion-item-option>
-              <ion-item-option class="ion-activated">Activated</ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-        </main>
-      `, config);
-            await page.locator(`#axe`).evaluate(async (el) => {
-                await el.open('end');
-            });
-            await page.waitForChanges();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 /**
  * This behavior does not vary across directions
  */

package/dist/collection/components/item-sliding/test/basic/item-sliding.e2e.js

@@ -15,33 +15,70 @@ configs().forEach(({ title, screenshot, config }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/item-sliding/test/basic`, config);
         });
-        test.describe('start options', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                const item = page.locator('#item2');
-                /**
-                 * Negative dragByX value to drag element from the right to the left
-                 * to reveal the options on the right side.
-                 * Positive dragByX value to drag element from the left to the right
-                 * to reveal the options on the left side.
-                 */
-                const dragByX = config.direction === 'rtl' ? -150 : 150;
-                await dragElementBy(item, page, dragByX);
-                await page.waitForChanges();
-                await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+        test.describe('legacy animation', () => {
+            test.describe('start options', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    const item = page.locator('#item2');
+                    /**
+                     * Negative dragByX value to drag element from the right to the left
+                     * to reveal the options on the right side.
+                     * Positive dragByX value to drag element from the left to the right
+                     * to reveal the options on the left side.
+                     */
+                    const dragByX = config.direction === 'rtl' ? -150 : 150;
+                    await dragElementBy(item, page, dragByX);
+                    await page.waitForChanges();
+                    await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
+                });
+            });
+            test.describe('end options', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    const item = page.locator('#item2');
+                    /**
+                     * Negative dragByX value to drag element from the right to the left
+                     * to reveal the options on the right side.
+                     * Positive dragByX value to drag element from the left to the right
+                     * to reveal the options on the left side.
+                     */
+                    const dragByX = config.direction === 'rtl' ? 150 : -150;
+                    await dragElementBy(item, page, dragByX);
+                    await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+                });
             });
         });
-        test.describe('end options', () => {
-            test('should not have visual regressions', async ({ page }) => {
-                const item = page.locator('#item2');
-                /**
-                 * Negative dragByX value to drag element from the right to the left
-                 * to reveal the options on the right side.
-                 * Positive dragByX value to drag element from the left to the right
-                 * to reveal the options on the left side.
-                 */
-                const dragByX = config.direction === 'rtl' ? 150 : -150;
-                await dragElementBy(item, page, dragByX);
-                await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
+        test.describe('modern animation', () => {
+            test.describe('start options', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    const useModernAnimationBtn = page.locator('#useModernAnimation');
+                    await useModernAnimationBtn.click();
+                    const item = page.locator('#item2');
+                    /**
+                     * Negative dragByX value to drag element from the right to the left
+                     * to reveal the options on the right side.
+                     * Positive dragByX value to drag element from the left to the right
+                     * to reveal the options on the left side.
+                     */
+                    const dragByX = config.direction === 'rtl' ? -150 : 150;
+                    await dragElementBy(item, page, dragByX);
+                    await page.waitForChanges();
+                    await expect(item).toHaveScreenshot(screenshot('modern-item-sliding-start'));
+                });
+            });
+            test.describe('end options', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    const useModernAnimationBtn = page.locator('#useModernAnimation');
+                    await useModernAnimationBtn.click();
+                    const item = page.locator('#item2');
+                    /**
+                     * Negative dragByX value to drag element from the right to the left
+                     * to reveal the options on the right side.
+                     * Positive dragByX value to drag element from the left to the right
+                     * to reveal the options on the left side.
+                     */
+                    const dragByX = config.direction === 'rtl' ? 150 : -150;
+                    await dragElementBy(item, page, dragByX);
+                    await expect(item).toHaveScreenshot(screenshot('modern-item-sliding-end'));
+                });
             });
         });
     });

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

@@ -348,7 +348,7 @@
 :host-context(.ion-focused).label-floating:not(.ion-color),
 :host-context(.item-has-focus).label-stacked:not(.ion-color),
 :host-context(.item-has-focus).label-floating:not(.ion-color) {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 :host-context(.ion-focused.ion-color).label-stacked:not(.ion-color),

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

@@ -1,7 +1,6 @@
 /*!
  * (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'] }).forEach(({ title, screenshot, config }) => {
@@ -65,25 +64,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('label: a11y for ion-color()'), () => {
-        test('should not have accessibility violations when focused', 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>
-            <div class="ion-focused">
-              <ion-label position="stacked">Default Label</ion-label>
-            </div>
-          </main>
-        `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('label: text wrapping in item'), () => {
         test('long text should not cause label to expand infinitely', async ({ page }) => {

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

@@ -173,7 +173,7 @@ ion-spinner {
   --background: var(--ion-color-step-50, #f2f2f2);
   --max-width: 280px;
   --max-height: 90%;
-  --spinner-color: var(--ion-color-primary, #0054e9);
+  --spinner-color: var(--ion-color-primary, #3880ff);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
   color: var(--ion-color-step-850, #262626);
   font-size: 0.875rem;

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

@@ -4,36 +4,20 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('loading: a11y'), () => {
         test('should set aria-labelledby with a message', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.message = 'Loading';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-message-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
         test('should set aria-labelledby with a label', async ({ page }) => {
-            await page.setContent(`
-          <ion-loading aria-label="Loading"></ion-loading>
-
-          <script>
-            const loading = document.querySelector('ion-loading');
-            loading.spinner = 'bubbles';
-          </script>
-        `, config);
+            await page.goto('/src/components/loading/test/a11y', config);
             const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-            const loading = page.locator('ion-loading');
-            await loading.evaluate((el) => el.present());
+            await page.click('#open-label-loading');
             await ionLoadingDidPresent.next();
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -261,7 +261,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: .1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
   --padding-start: 5px;
   --padding-end: 5px;
   min-height: 32px;

package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js

@@ -4,20 +4,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Only ios mode uses ion-color() for the menu button
- */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('menu-button: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <ion-menu-button auto-hide="false"></ion-menu-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('menu-button: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -10,7 +10,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
 // Defaults for the card swipe animation
 export const SwipeToCloseDefaults = {
-    MIN_PRESENTING_SCALE: 0.93,
+    MIN_PRESENTING_SCALE: 0.915,
 };
 export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
     /**

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -279,7 +279,7 @@
   padding-bottom: 0;
   height: 44px;
   background: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: 16px;
 }
 

package/dist/collection/components/picker-legacy/picker.md.css

@@ -265,7 +265,7 @@
   padding-bottom: 0;
   height: 44px;
   background: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;

package/dist/collection/components/picker-legacy-column/picker-column.md.css

@@ -242,5 +242,5 @@
 .picker-prefix,
 .picker-suffix,
 .picker-opt.picker-opt-selected {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }

package/dist/collection/components/progress-bar/progress-bar.ios.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, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
-  --buffer-background: var(--background);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
+  --progress-background: var(--ion-color-primary, #3880ff);
   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%);
 }
@@ -257,5 +251,17 @@
   }
 }
 :host {
-  height: 3px;
+  border-radius: 9999px;
+  height: 4px;
+}
+
+:host(.progress-bar-solid) {
+  /**
+   * On iOS the unfilled portion of the progress bar
+   * is always a consistent background color. We
+   * only apply this style when the progress bar is
+   * solid (with a buffer value of 1). This maintains
+   * the custom Ionic appearance for a buffered progress bar.
+   */
+  --background: var(--ion-color-step-100, #e6e6e6);
 }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -26,11 +26,14 @@ export class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
+        // If the progress is displayed as a solid bar.
+        const progressSolid = buffer === 1;
         return (h(Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+                'progress-bar-solid': progressSolid,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
     static get is() { return "ion-progress-bar"; }

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, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
-  --buffer-background: var(--background);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
+  --progress-background: var(--ion-color-primary, #3880ff);
   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/radio/radio.ios.css

@@ -462,7 +462,7 @@ input {
  * }
  */
 :host {
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, #3880ff);
 }
 
 :host(.legacy-radio) {
@@ -504,7 +504,7 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
+  background: var(--ion-color-primary-tint, #4c8dff);
   content: "";
   opacity: 0.2;
 }

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

@@ -463,7 +463,7 @@ input {
  */
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, #3880ff);
   --border-width: 0.125rem;
   --border-style: solid;
   --border-radius: 50%;
@@ -551,7 +551,7 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
+  background: var(--ion-color-primary-tint, #4c8dff);
   content: "";
   opacity: 0.2;
 }