@ionic/core 7.6.7-dev.11706551842.118ce6e0 → 7.6.7-dev.11706565090.179aa5a7

package/dist/cjs/{overlays-3afa911d.js → overlays-64ba8dd4.js}

@@ -4,9 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const ionicGlobal = require('./ionic-global-c70c3fb5.js');
+const ionicGlobal = require('./ionic-global-e309fc8f.js');
 const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
-const gestureController = require('./gesture-controller-9436f482.js');
 const hardwareBackButton = require('./hardware-back-button-76833cac.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-5915f9b3.js');
@@ -31,10 +30,7 @@ const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 const loadingController = /*@__PURE__*/ createController('ion-loading');
 const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
+const pickerController = /*@__PURE__*/ createController('ion-picker');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
 const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -144,7 +140,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -329,7 +325,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -395,7 +391,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
-    document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -458,14 +453,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
-    const lastOverlay = index.doc !== undefined && getPresentedOverlays(index.doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (lastOverlay) {
+    if (index.doc !== undefined && getPresentedOverlays(index.doc).length === 1) {
         setRootAriaHidden(false);
-        document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {

package/dist/cjs/{status-tap-66296dcb.js → status-tap-bf82416b.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-71f41461.js');
+const index = require('./index-120d18ce.js');
 const index$1 = require('./index-da15e99c.js');
 const helpers = require('./helpers-76bb7efb.js');
 require('./index-5915f9b3.js');

package/dist/cjs/{swipe-back-b8f2330b.js → swipe-back-2a858bbd.js}

@@ -5,8 +5,8 @@
 
 const helpers = require('./helpers-76bb7efb.js');
 const dir = require('./dir-94c21456.js');
-const index = require('./index-ee07ed59.js');
-require('./gesture-controller-9436f482.js');
+const index = require('./index-d1b59ffa.js');
+require('./gesture-controller-c40c045a.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
     const win = el.ownerDocument.defaultView;

package/dist/collection/collection-manifest.json

@@ -24,8 +24,8 @@
     "components/col/col.js",
     "components/content/content.js",
     "components/datetime/datetime.js",
-    "components/picker-column/picker-column.js",
-    "components/picker/picker.js",
+    "components/picker-column-internal/picker-column-internal.js",
+    "components/picker-internal/picker-internal.js",
     "components/datetime-button/datetime-button.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
@@ -55,9 +55,8 @@
     "components/nav/nav.js",
     "components/nav-link/nav-link.js",
     "components/note/note.js",
-    "components/picker-column-option/picker-column-option.js",
-    "components/picker-legacy/picker.js",
-    "components/picker-legacy-column/picker-column.js",
+    "components/picker/picker.js",
+    "components/picker-column/picker-column.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
@@ -95,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
+    "version": "4.11.0",
     "typescriptVersion": "5.3.3"
   },
   "collections": [
@@ -288,8 +287,8 @@
     {
       "components": [
         "ion-datetime",
-        "ion-picker-legacy",
-        "ion-picker-legacy-column"
+        "ion-picker",
+        "ion-picker-column"
       ]
     },
     {

package/dist/collection/components/accordion/accordion.js

@@ -280,9 +280,7 @@ export class Accordion {
         });
     }
     toggleExpanded() {
-        const { accordionGroupEl, disabled, readonly, value, state } = this;
-        if (disabled || readonly)
-            return;
+        const { accordionGroupEl, value, state } = this;
         if (accordionGroupEl) {
             /**
              * Because the accordion group may or may

package/dist/collection/components/accordion/test/accordion.e2e.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+    test.describe(title('accordion: states'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+        });
+        test('should properly set readonly on child accordions', async ({ page }) => {
+            const accordionGroup = page.locator('ion-accordion-group');
+            const accordion = page.locator('ion-accordion');
+            await expect(accordion).toHaveJSProperty('readonly', false);
+            await accordionGroup.evaluate((el) => {
+                el.readonly = true;
+            });
+            await page.waitForChanges();
+            await expect(accordion).toHaveJSProperty('readonly', true);
+        });
+        test('should properly set disabled on child accordions', async ({ page }) => {
+            const accordionGroup = page.locator('ion-accordion-group');
+            const accordion = page.locator('ion-accordion');
+            await expect(accordion).toHaveJSProperty('disabled', false);
+            await accordionGroup.evaluate((el) => {
+                el.disabled = true;
+            });
+            await page.waitForChanges();
+            await expect(accordion).toHaveJSProperty('disabled', true);
+        });
+    });
+});

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -307,7 +307,7 @@
   --button-background-focused-opacity: .12;
   --button-background-selected: var(--ion-color-step-150, var(--ion-background-color, #fff));
   --button-background-selected-opacity: 1;
-  --button-color: var(--ion-color-primary, #0054e9);
+  --button-color: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-step-400, #999999);
   text-align: center;
 }
@@ -434,11 +434,11 @@
 .action-sheet-destructive,
 .action-sheet-destructive.ion-activated,
 .action-sheet-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, #eb445a);
 }
 
 @media (any-hover: hover) {
   .action-sheet-destructive:hover {
-    color: var(--ion-color-danger, #c5000f);
+    color: var(--ion-color-danger, #eb445a);
   }
 }

package/dist/collection/components/action-sheet/test/a11y/action-sheet.e2e.js

@@ -26,33 +26,24 @@ const testAriaButton = async (page, buttonID, expectedAriaLabelledBy, expectedAr
     await expect(actionSheetButton).toHaveAttribute('aria-labelledby', expectedAriaLabelledBy);
     await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
 };
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
-    test.describe(title('action-sheet: Axe testing'), () => {
-        test('should not have accessibility violations when header is defined', async ({ page }) => {
-            await page.setContent(`
-          <ion-action-sheet></ion-action-sheet>
-
-          <script>
-            const actionSheet = document.querySelector('ion-action-sheet');
-            actionSheet.header = 'Header';
-            actionSheet.subHeader = 'Subtitle';
-            actionSheet.buttons = ['Confirm'];
-          </script>
-        `, config);
-            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-            const actionSheet = page.locator('ion-action-sheet');
-            await actionSheet.evaluate((el) => el.present());
-            await ionActionSheetDidPresent.next();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
-    test.describe(title('action-sheet: aria attributes'), () => {
+    test.describe(title('action-sheet: a11y'), () => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/action-sheet/test/a11y`, config);
         });
+        test('should not have accessibility violations when header is defined', async ({ page }) => {
+            const button = page.locator('#bothHeaders');
+            const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            await button.click();
+            await didPresent.next();
+            /**
+             * action-sheet overlays the entire screen, so
+             * Axe will be unable to verify color contrast
+             * on elements under the backdrop.
+             */
+            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+            expect(results.violations).toEqual([]);
+        });
         test('should have aria-labelledby when header is set', async ({ page }) => {
             await testAria(page, 'bothHeaders', 'action-sheet-1-header');
         });

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

@@ -534,7 +534,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-icon {
@@ -553,7 +553,7 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
 @supports (inset-inline-start: 0) {
   [aria-checked=true] .alert-radio-inner {
@@ -613,8 +613,8 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -707,7 +707,7 @@ textarea.alert-input {
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
@@ -751,5 +751,5 @@ textarea.alert-input {
 .alert-button-role-destructive,
 .alert-button-role-destructive.ion-activated,
 .alert-button-role-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, #eb445a);
 }

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

@@ -494,7 +494,7 @@ textarea.alert-input {
 
 .alert-input:focus {
   margin-bottom: 4px;
-  border-bottom: 2px solid var(--ion-color-primary, #0054e9);
+  border-bottom: 2px solid var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-group,
@@ -580,7 +580,7 @@ textarea.alert-input {
   height: 10px;
   transform: scale3d(0, 0, 0);
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 @supports (inset-inline-start: 0) {
   .alert-radio-inner {
@@ -615,7 +615,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -675,8 +675,8 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -747,7 +747,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;

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

@@ -19,28 +19,6 @@ const testAria = async (page, buttonID, expectedAriaLabelledBy, expectedAriaDesc
     expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
     expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
-    test.describe(title('alert: Axe testing'), () => {
-        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
-            await page.setContent(`
-          <ion-alert></ion-alert>
-
-          <script>
-            const alert = document.querySelector('ion-alert');
-            alert.header = 'Header';
-            alert.subHeader = 'Subtitle';
-            alert.buttons = ['OK'];
-          </script>
-        `, config);
-            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-            const alert = page.locator('ion-alert');
-            await alert.evaluate((el) => el.present());
-            await ionAlertDidPresent.next();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('alert: text wrapping'), () => {
         test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
@@ -94,6 +72,15 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/alert/test/a11y`, config);
         });
+        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
+            const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const button = page.locator('#bothHeaders');
+            await button.click();
+            await didPresent.next();
+            // TODO FW-4375
+            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+            expect(results.violations).toEqual([]);
+        });
         test('should have aria-labelledby when header is set', async ({ page }) => {
             await testAria(page, 'noMessage', 'alert-1-hdr', null);
         });

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

@@ -331,7 +331,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);
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

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

@@ -1,29 +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";
-/**
- * Only ios mode uses ion-color() for the back button
- */
-configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('back-button: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <style>
-          ion-back-button {
-            display: inline-block !important;
-            vertical-align: middle;
-          }
-        </style>
-        <ion-back-button text="Back" aria-label="back button"></ion-back-button>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('back-button: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

package/dist/collection/components/backdrop/backdrop.js

@@ -2,13 +2,25 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
     constructor() {
+        this.blocker = GESTURE_CONTROLLER.createBlocker({
+            disableScroll: true,
+        });
         this.visible = true;
         this.tappable = true;
         this.stopPropagation = true;
     }
+    connectedCallback() {
+        if (this.stopPropagation) {
+            this.blocker.block();
+        }
+    }
+    disconnectedCallback() {
+        this.blocker.unblock();
+    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

package/dist/collection/components/badge/test/a11y/badge.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 }) => {
@@ -21,20 +20,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
-    test.describe(title('badge: 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-badge>123</ion-badge>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});

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

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: normal;
+  white-space: nowrap;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;
@@ -114,20 +114,20 @@
 }
 
 :host(.button-solid) {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
+  --border-color: var(--ion-color-primary, #3880ff);
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-block) {
@@ -465,9 +465,9 @@ ion-ripple-effect {
 }
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-primary-shade, #004acd);
-  --background-focused: var(--ion-color-primary-shade, #004acd);
-  --background-hover: var(--ion-color-primary-tint, #1a65eb);
+  --background-activated: var(--ion-color-primary-shade, #3171e0);
+  --background-focused: var(--ion-color-primary-shade, #3171e0);
+  --background-hover: var(--ion-color-primary-tint, #4c8dff);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -477,8 +477,8 @@ ion-ripple-effect {
   --border-radius: 14px;
   --border-width: 1px;
   --border-style: solid;
-  --background-activated: var(--ion-color-primary, #0054e9);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-activated: var(--ion-color-primary, #3880ff);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --background-hover: transparent;
   --background-focused-opacity: .1;
   --color-activated: var(--ion-color-primary-contrast, #fff);
@@ -487,7 +487,7 @@ ion-ripple-effect {
 :host(.button-clear) {
   --background-activated: transparent;
   --background-activated-opacity: 0;
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --background-hover: transparent;
   --background-focused-opacity: .1;
   font-size: min(1.0625rem, 51px);

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

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: normal;
+  white-space: nowrap;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;
@@ -114,20 +114,20 @@
 }
 
 :host(.button-solid) {
-  --background: var(--ion-color-primary, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
+  --border-color: var(--ion-color-primary, #3880ff);
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-block) {
@@ -431,8 +431,8 @@ ion-ripple-effect {
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
@@ -444,8 +444,8 @@ ion-ripple-effect {
 
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;