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

package/dist/collection/components/toggle/toggle.js

@@ -2,9 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createLegacyFormController } from "../../utils/forms/index";
-import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
 import { hapticSelection } from "../../utils/native/haptic";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -26,8 +24,6 @@ export class Toggle {
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         this.setupGesture = async () => {
             const { toggleTrack } = this;
             if (toggleTrack) {
@@ -73,12 +69,10 @@ export class Toggle {
         this.value = 'on';
         this.enableOnOffLabels = config.get('toggleOnOffLabels');
         this.labelPlacement = 'start';
-        this.legacy = undefined;
         this.justify = 'space-between';
         this.alignment = 'center';
     }
     disabledChanged() {
-        this.emitStyle();
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
@@ -93,7 +87,6 @@ export class Toggle {
         });
     }
     async connectedCallback() {
-        this.legacyFormController = createLegacyFormController(this.el);
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
@@ -115,19 +108,7 @@ export class Toggle {
         }
     }
     componentWillLoad() {
-        this.emitStyle();
-        if (!this.legacyFormController.hasLegacyControl()) {
-            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
-        }
-    }
-    emitStyle() {
-        if (this.legacyFormController.hasLegacyControl()) {
-            this.ionStyle.emit({
-                'interactive-disabled': this.disabled,
-                // TODO(FW-2990): remove this
-                legacy: !!this.legacy,
-            });
-        }
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     onStart() {
         this.activated = true;
@@ -171,16 +152,12 @@ export class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();
-    }
-    renderToggle() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '3c0acc5498682a610e7a6f095590ad79391e1ba4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -190,42 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { class: "toggle-wrapper" }, h("input", Object.assign({ type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { class: {
+            }) }, h("label", { key: '68133afe76d290ebcb8f05883a27875529f0bfff', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'abd6aad2a3e62fbffb80d5c3dbdc57182bc97fab', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '8e70ddd2b4daada4bf16e85e56df9078116933f9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, this.renderToggleControl()))));
-    }
-    renderLegacyToggle() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-toggle now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: <ion-toggle>Email</ion-toggle>
-Example with aria-label: <ion-toggle aria-label="Email"></ion-toggle>
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            if (this.legacy) {
-                printIonWarning(`ion-toggle is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new toggle syntax.`, this.el);
-            }
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const { activated, color, checked, disabled, el, inputId, name } = this;
-        const mode = getIonMode(this);
-        const { label, labelId, labelText } = getAriaLabel(el, inputId);
-        const value = this.getValue();
-        const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "switch", class: createColorClasses(color, {
-                [mode]: true,
-                'in-item': hostContext('ion-item', el),
-                'toggle-activated': activated,
-                'toggle-checked': checked,
-                'toggle-disabled': disabled,
-                'legacy-toggle': true,
-                interactive: true,
-                [`toggle-${rtl}`]: true,
-            }) }, this.renderToggleControl(), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", role: "switch", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+            }, part: "label" }, h("slot", { key: 'eae25cdeefe1e6589f06b3a2568522e74cf44d66' })), h("div", { key: 'df9adddd1d8d73c8a23e1e91261d84c876ac5935', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -374,23 +319,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "reflect": false,
                 "defaultValue": "'start'"
             },
-            "legacy": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
-                },
-                "attribute": "legacy",
-                "reflect": false
-            },
             "justify": {
                 "type": "string",
                 "mutable": false,
@@ -486,30 +414,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                     "resolved": "void",
                     "references": {}
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -81,7 +81,7 @@
   z-index: 2;
 }
 
-:host(.in-item:not(.legacy-toggle)) {
+:host(.in-item) {
   width: 100%;
   height: 100%;
 }
@@ -92,16 +92,11 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-toggle)),
-:host([slot=end]:not(.legacy-toggle)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
-:host(.legacy-toggle) {
-  contain: content;
-  touch-action: none;
-}
-
 :host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
@@ -110,51 +105,6 @@
   pointer-events: none;
 }
 
-:host(.legacy-toggle) label {
-  top: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  appearance: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-@supports (inset-inline-start: 0) {
-  :host(.legacy-toggle) label {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.legacy-toggle) label {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.legacy-toggle:dir(rtl)) label {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
-}
-:host(.legacy-toggle) label::-moz-focus-inner {
-  border: 0;
-}
-
 input {
   position: absolute;
   top: 0;
@@ -189,7 +139,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -532,10 +482,10 @@ input {
  */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);
-  --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);
+  --track-background-checked: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);
   --border-radius: 14px;
   --handle-background: #ffffff;
-  --handle-background-checked: var(--ion-color-primary, #3880ff);
+  --handle-background-checked: var(--ion-color-primary, #0054e9);
   --handle-border-radius: 50%;
   --handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   --handle-width: 20px;
@@ -545,18 +495,6 @@ input {
   --handle-transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:host(.legacy-toggle) {
-  -webkit-padding-start: 12px;
-  padding-inline-start: 12px;
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  width: 36px;
-  height: 14px;
-  contain: strict;
-}
-
 .native-wrapper .toggle-icon {
   width: 36px;
   height: 14px;
@@ -599,27 +537,4 @@ input {
 
 :host(.toggle-disabled) {
   opacity: 0.38;
-}
-
-:host(.in-item.legacy-toggle) {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  cursor: pointer;
-}
-
-:host(.in-item.legacy-toggle[slot=start]) {
-  -webkit-padding-start: 2px;
-  padding-inline-start: 2px;
-  -webkit-padding-end: 18px;
-  padding-inline-end: 18px;
-  padding-top: 12px;
-  padding-bottom: 12px;
 }

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

@@ -198,9 +198,9 @@
  * }
  */
 :host {
-  --background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
+  --background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
   --padding-top: 3px;
   --padding-bottom: 3px;
   --padding-start: 4px;

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), h("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, h("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), h("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), h("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, h("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), h("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), h("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
+            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,7 @@
 :host {
   --background: var(--ion-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 0;

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -1,6 +1,7 @@
 /*!
  * (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'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
@@ -30,3 +31,20 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
         });
     });
 });
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    test.describe(title('typography: a11y'), () => {
+        test('should not have accessibility violations for anchor tags', 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>
+          <a href="#">Link</a>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

package/dist/collection/themes/test/colors/theme.e2e.js

@@ -0,0 +1,170 @@
+/*!
+ * (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";
+/**
+ * Small text is defined as 14pt (~18.5px)
+ * when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ */
+const styleTestHelpers = `
+  <style>
+    main {
+      background: var(--ion-color-contrast);
+      font-size: 14pt;
+    }
+    .ion-background {
+      background: var(--ion-color-base);
+    }
+    .ion-background-shade {
+      background: var(--ion-color-shade);
+    }
+    .ion-background-tint {
+      background: var(--ion-color-tint);
+    }
+    .ion-background-opacity-08 {
+      background: rgba(var(--ion-color-base-rgb), 0.08);
+    }
+    .ion-background-opacity-12 {
+      background: rgba(var(--ion-color-base-rgb), 0.12);
+    }
+    .ion-background-opacity-16 {
+      background: rgba(var(--ion-color-base-rgb), 0.16);
+    }
+    .ion-color {
+      color: var(--ion-color-base);
+    }
+    .ion-color-contrast {
+      color: var(--ion-color-contrast);
+    }
+  </style>
+`;
+/**
+ * All colors should be tested in the following scenarios:
+ * 1) The base color as the text color against the contrast color as the background color
+ * 2) The contrast color as the text color against the base color as the background color
+ * 3) The contrast color as the text color against the shade color as the background color
+ * 4) The contrast color as the text color against the tint color as the background color
+ * 5) The base color as the text color against the base color at 0.08 opacity as the background color
+ * 6) The base color as the text color against the base color at 0.12 opacity as the background color
+ * 7) The base color as the text color against the base color at 0.16 opacity as the background color
+ */
+configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+    test.describe(title('theme'), () => {
+        test.beforeEach(({ skip }) => {
+            skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
+            skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
+        });
+        for (const color of colors) {
+            test(`color "${color}" should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background shade should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-shade">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-tint">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`color "${color}" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-08">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`color "${color}" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-12">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`color "${color}" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color ion-background-opacity-16">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page }).analyze();
+                expect(results.violations).toEqual([]);
+            });
+        }
+    });
+});
+configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(({ config, title }) => {
+    const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+    test.describe(title('theme'), () => {
+        test.beforeEach(({ skip }) => {
+            skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
+            skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
+        });
+        for (const color of colors) {
+            test(`color "${color}" should pass AAA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page })
+                    .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                    .analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background should pass AAA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page })
+                    .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                    .analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background shade should pass AAA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-shade">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page })
+                    .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                    .analyze();
+                expect(results.violations).toEqual([]);
+            });
+            test(`contrast color on "${color}" background tint should pass AAA guidelines`, async ({ page }) => {
+                await page.setContent(`${styleTestHelpers}
+          <main class="ion-color-${color}">
+            <p class="ion-color-contrast ion-background-tint">Hello World</p>
+          </main>`, config);
+                const results = await new AxeBuilder({ page })
+                    .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                    .analyze();
+                expect(results.violations).toEqual([]);
+            });
+        }
+    });
+});

package/dist/collection/utils/focus-trap.js

@@ -0,0 +1,78 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { focusVisibleElement } from "./helpers";
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * Note: We need this distinction because `disabled="false"` is
+ * valid usage for the disabled property on ion-button.
+ */
+export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+/**
+ * Focuses the first descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusFirstDescendant = (ref, fallbackElement) => {
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusLastDescendant = (ref, fallbackElement) => {
+    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses a particular element in a context. If the element
+ * doesn't have anything focusable associated with it then
+ * a fallback element will be focused.
+ *
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of ion-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInContext = (hostToFocus, fallbackElement) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+    }
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
+    }
+    else {
+        // Focus fallback element instead of letting focus escape
+        fallbackElement.focus();
+    }
+};

package/dist/collection/utils/gesture/button-active.js

@@ -12,7 +12,7 @@ export const createButtonActiveGesture = (el, isButton) => {
             return;
         }
         const target = document.elementFromPoint(x, y);
-        if (!target || !isButton(target)) {
+        if (!target || !isButton(target) || target.disabled) {
             clearActiveButton();
             return;
         }

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
         this.ctrl = undefined;
     }
 }
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/helpers.js

@@ -237,7 +237,7 @@ export const findItemLabel = (componentEl) => {
     }
     return null;
 };
-export const focusElement = (el) => {
+export const focusVisibleElement = (el) => {
     el.focus();
     /**
      * When programmatically focusing an element,