voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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

@@ -83,6 +83,7 @@
    * @prop --button-color-hover: Color of the action sheet button on hover
    * @prop --button-color-focused: Color of the action sheet button when tabbed to
    * @prop --button-color-selected: Color of the selected action sheet button
+   * @prop --button-color-disabled: Color of the selected action sheet button when disabled
    */
   --color: initial;
   --button-color-activated: var(--button-color);
@@ -143,6 +144,11 @@
   overflow: hidden;
 }
 
+.action-sheet-button:disabled {
+  color: var(--button-color-disabled);
+  opacity: 0.4;
+}
+
 .action-sheet-button-inner {
   display: flex;
   position: relative;
@@ -232,10 +238,10 @@
 }
 
 @media (any-hover: hover) {
-  .action-sheet-button:hover {
+  .action-sheet-button:not(:disabled):hover {
     color: var(--button-color-hover);
   }
-  .action-sheet-button:hover::after {
+  .action-sheet-button:not(:disabled):hover::after {
     background: var(--button-background-hover);
     opacity: var(--button-background-hover-opacity);
   }
@@ -296,7 +302,7 @@
  * }
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
+  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
@@ -305,10 +311,11 @@
   --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
-  --button-background-selected: var(--ion-color-step-150, var(--ion-background-color, #fff));
+  --button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
   --button-background-selected-opacity: 1;
-  --button-color: var(--ion-color-primary, #3880ff);
-  --color: var(--ion-color-step-400, #999999);
+  --button-color: var(--ion-color-primary, #0054e9);
+  --button-color-disabled: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --color: var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));
   text-align: center;
 }
 
@@ -389,7 +396,7 @@
   padding-inline-end: 10px;
   padding-top: 14px;
   padding-bottom: 13px;
-  color: var(--color, var(--ion-color-step-400, #999999));
+  color: var(--color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
   font-size: max(13px, 0.8125rem);
   font-weight: 400;
   text-align: center;
@@ -446,11 +453,11 @@
 .action-sheet-destructive,
 .action-sheet-destructive.ion-activated,
 .action-sheet-destructive.ion-focused {
-  color: var(--ion-color-danger, #eb445a);
+  color: var(--ion-color-danger, #c5000f);
 }
 
 @media (any-hover: hover) {
   .action-sheet-destructive:hover {
-    color: var(--ion-color-danger, #eb445a);
+    color: var(--ion-color-danger, #c5000f);
   }
 }

package/dist/collection/components/action-sheet/action-sheet.js

@@ -196,7 +196,7 @@ export class ActionSheet {
             }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b6a051e2cf5e101edbf59c8a40a04d8f7107fb3c', tappable: this.backdropDismiss }), h("div", { key: '5bfa2b37a417aaff3776f06d92a8544dfcbf714f', tabindex: "0" }), h("div", { key: '77d5a217803fd7be8f8dbedcd0ef5e59f0fd9800', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '3901d56215f05cdab074e2ec321391281a165097', class: "action-sheet-container" }, h("div", { key: '275f5c7981b2ee44fb632b3d137c7209cbfcf45c', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '4285893438675be9b40838a93c2ff382a1074cd3', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '5be2fba3c88800b24bb3d69422285724eab15311', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -781,5 +781,5 @@ export class ActionSheet {
     }
 }
 const buttonClass = (button) => {
-    return Object.assign({ 'action-sheet-button': true, 'ion-activatable': true, 'ion-focusable': true, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
+    return Object.assign({ 'action-sheet-button': true, 'ion-activatable': !button.disabled, 'ion-focusable': !button.disabled, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
 };

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

@@ -83,6 +83,7 @@
    * @prop --button-color-hover: Color of the action sheet button on hover
    * @prop --button-color-focused: Color of the action sheet button when tabbed to
    * @prop --button-color-selected: Color of the selected action sheet button
+   * @prop --button-color-disabled: Color of the selected action sheet button when disabled
    */
   --color: initial;
   --button-color-activated: var(--button-color);
@@ -143,6 +144,11 @@
   overflow: hidden;
 }
 
+.action-sheet-button:disabled {
+  color: var(--button-color-disabled);
+  opacity: 0.4;
+}
+
 .action-sheet-button-inner {
   display: flex;
   position: relative;
@@ -232,10 +238,10 @@
 }
 
 @media (any-hover: hover) {
-  .action-sheet-button:hover {
+  .action-sheet-button:not(:disabled):hover {
     color: var(--button-color-hover);
   }
-  .action-sheet-button:hover::after {
+  .action-sheet-button:not(:disabled):hover::after {
     background: var(--button-background-hover);
     opacity: var(--button-background-hover-opacity);
   }
@@ -307,7 +313,8 @@
   --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
-  --button-color: var(--ion-color-step-850, #262626);
+  --button-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }
 

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

@@ -26,24 +26,33 @@ 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: a11y'), () => {
+    test.describe(title('action-sheet: aria attributes'), () => {
         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/action-sheet/test/basic/action-sheet-rendering.e2e.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 import { ActionSheetFixture } from "./fixture";
 configs().forEach(({ config, screenshot, title }) => {
@@ -39,3 +40,21 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('action sheet: disabled buttons'), () => {
+        test('should render disabled button', async ({ page }) => {
+            await page.setContent(`
+        <ion-action-sheet></ion-action-sheet>
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.buttons = [
+            { text: 'Disabled', disabled: true }
+          ];
+        </script>
+      `, config);
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.evaluate((el) => el.present());
+            await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-disabled'));
+        });
+    });
+});

package/dist/collection/components/action-sheet/test/basic/action-sheet.spec.js

@@ -16,3 +16,25 @@ describe('action sheet: htmlAttributes inheritance', () => {
         await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
     });
 });
+describe('action sheet: disabled buttons', () => {
+    it('regular button should be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const button = actionSheet.querySelector('.action-sheet-button');
+        await expect(button.hasAttribute('disabled')).toBe(true);
+    });
+    it('cancel button should not be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', role: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const cancelButton = actionSheet.querySelector('.action-sheet-cancel');
+        await expect(cancelButton.hasAttribute('disabled')).toBe(false);
+    });
+});

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

@@ -228,7 +228,7 @@
 
 .alert-button.ion-focused,
 .alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, #e6e6e6);
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
 }
 
 .alert-button-inner {
@@ -408,7 +408,7 @@ textarea.alert-input {
  * differences across browsers.
  */
 :host {
-  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
+  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));
   --max-width: clamp(270px, 16.875rem, 324px);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
   font-size: max(14px, 0.875rem);
@@ -448,7 +448,7 @@ textarea.alert-input {
 }
 
 .alert-sub-title {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   font-size: max(14px, 0.875rem);
 }
 
@@ -477,20 +477,21 @@ textarea.alert-input {
 }
 
 .alert-input {
-  border-radius: 4px;
+  border-radius: 7px;
   margin-top: 10px;
-  -webkit-padding-start: 6px;
-  padding-inline-start: 6px;
-  -webkit-padding-end: 6px;
-  padding-inline-end: 6px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  border: 0.55px solid var(--ion-color-step-250, #bfbfbf);
+  -webkit-padding-start: 7px;
+  padding-inline-start: 7px;
+  -webkit-padding-end: 7px;
+  padding-inline-end: 7px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  border: 0.55px solid var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));
   background-color: var(--ion-background-color, #fff);
   appearance: none;
+  font-size: 1rem;
 }
 .alert-input::placeholder {
-  color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
+  color: var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));
   font-family: inherit;
   font-weight: inherit;
 }
@@ -499,10 +500,10 @@ textarea.alert-input {
 }
 .alert-input::-webkit-date-and-time-value {
   /**
-   * The -webkit-date-and-time-value pseudo element is used 
+   * The -webkit-date-and-time-value pseudo element is used
    * to style the date/time input on iOS/Mobile Safari.
    * To avoid layout shift between an empty state and a selected state,
-   * we set the height `18px` to match the native input height for 
+   * we set the height `18px` to match the native input height for
    * date/time inputs on iOS/Mobile Safari.
    */
   height: 18px;
@@ -534,7 +535,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 .alert-radio-icon {
@@ -553,34 +554,10 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary, #3880ff);
-}
-@supports (inset-inline-start: 0) {
-  [aria-checked=true] .alert-radio-inner {
-    inset-inline-start: 7px;
-  }
+  border-color: var(--ion-color-primary, #0054e9);
 }
-@supports not (inset-inline-start: 0) {
-  [aria-checked=true] .alert-radio-inner {
-    left: 7px;
-  }
-  :host-context([dir=rtl]) [aria-checked=true] .alert-radio-inner {
-    left: unset;
-    right: unset;
-    right: 7px;
-  }
-  [dir=rtl] [aria-checked=true] .alert-radio-inner {
-    left: unset;
-    right: unset;
-    right: 7px;
-  }
-  @supports selector(:dir(rtl)) {
-    [aria-checked=true] .alert-radio-inner:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 7px;
-    }
-  }
+[aria-checked=true] .alert-radio-inner {
+  inset-inline-start: 7px;
 }
 
 .alert-checkbox-label {
@@ -603,58 +580,34 @@ textarea.alert-input {
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  width: min(1.5rem, 66px);
-  height: min(1.5rem, 66px);
-  border-width: 0.0625rem;
+  width: min(1.375rem, 55.836px);
+  height: min(1.375rem, 55.836px);
+  border-width: 0.125rem;
   border-style: solid;
-  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   background-color: var(--ion-item-background, var(--ion-background-color, #fff));
   contain: strict;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #3880ff);
-  background-color: var(--ion-color-primary, #3880ff);
+  border-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, #0054e9);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
-  top: calc(min(1.5rem, 66px) / 6);
+  top: calc(min(1.375rem, 55.836px) / 8);
   position: absolute;
-  width: calc(min(1.5rem, 66px) / 6 + 1px);
-  height: calc(min(1.5rem, 66px) * 0.5);
+  width: calc(min(1.375rem, 55.836px) / 6 + 1px);
+  height: calc(min(1.375rem, 55.836px) * 0.5);
   transform: rotate(45deg);
-  border-width: 0.0625rem;
+  border-width: 0.125rem;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
   border-color: var(--ion-background-color, #fff);
 }
-@supports (inset-inline-start: 0) {
-  [aria-checked=true] .alert-checkbox-inner {
-    inset-inline-start: calc(min(1.5rem, 66px) / 3 + 1px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  [aria-checked=true] .alert-checkbox-inner {
-    left: calc(min(1.5rem, 66px) / 3 + 1px);
-  }
-  :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
-    left: unset;
-    right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
-  }
-  [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
-    left: unset;
-    right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
-  }
-  @supports selector(:dir(rtl)) {
-    [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(min(1.5rem, 66px) / 3 + 1px);
-    }
-  }
+[aria-checked=true] .alert-checkbox-inner {
+  inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
 }
 
 .alert-button-group {
@@ -707,7 +660,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, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
   font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
@@ -751,5 +704,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, #eb445a);
+  color: var(--ion-color-danger, #c5000f);
 }