@ionic/core 8.2.3-dev.11721225504.1476a6ac → 8.2.3-dev.11724326037.1eacfaff

package/dist/collection/components/spinner/spinner.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonTheme, getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -18,14 +18,13 @@ export class Spinner {
         this.paused = false;
         this.size = undefined;
     }
-    // TODO(ROU-10920): Switch `theme` to `mode`.
     getName() {
         const spinnerName = this.name || config.get('spinner');
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         if (spinnerName) {
             return spinnerName;
         }
-        return theme === 'ios' ? 'lines' : 'circular';
+        return mode === 'ios' ? 'lines' : 'circular';
     }
     getSize() {
         const theme = getIonTheme(this);
@@ -58,7 +57,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '6cac09975f1088551e71b1c60033d3571438f374', class: createColorClasses(self.color, {
+        return (h(Host, { key: '49fd776ff3793a76b111c1f0e0fc0755d1d28d6c', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -0,0 +1,120 @@
+/*!
+ * (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: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    const colors = ['primary', 'neutral', 'success', 'warning', 'danger', 'light'];
+    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([]);
+            });
+            // TODO(ROU-10778): Re-enable this test once the colors have been finalized
+            test.skip(`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([]);
+            });
+        }
+    });
+});

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-07-17T14:14:32",
+  "timestamp": "2024-08-22T11:30:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.3",
@@ -5545,6 +5545,12 @@
       ],
       "listeners": [],
       "styles": [
+        {
+          "name": "--background",
+          "annotation": "prop",
+          "docs": "Background of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--background",
           "annotation": "prop",
@@ -5557,6 +5563,12 @@
           "docs": "Background of the button",
           "mode": "md"
         },
+        {
+          "name": "--background-activated",
+          "annotation": "prop",
+          "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.",
+          "mode": "ionic"
+        },
         {
           "name": "--background-activated",
           "annotation": "prop",
@@ -5569,6 +5581,12 @@
           "docs": "Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.",
           "mode": "md"
         },
+        {
+          "name": "--background-activated-opacity",
+          "annotation": "prop",
+          "docs": "Opacity of the button when pressed",
+          "mode": "ionic"
+        },
         {
           "name": "--background-activated-opacity",
           "annotation": "prop",
@@ -5581,6 +5599,12 @@
           "docs": "Opacity of the button when pressed",
           "mode": "md"
         },
+        {
+          "name": "--background-focused",
+          "annotation": "prop",
+          "docs": "Background of the button when focused with the tab key",
+          "mode": "ionic"
+        },
         {
           "name": "--background-focused",
           "annotation": "prop",
@@ -5593,6 +5617,12 @@
           "docs": "Background of the button when focused with the tab key",
           "mode": "md"
         },
+        {
+          "name": "--background-focused-opacity",
+          "annotation": "prop",
+          "docs": "Opacity of the button when focused with the tab key",
+          "mode": "ionic"
+        },
         {
           "name": "--background-focused-opacity",
           "annotation": "prop",
@@ -5605,6 +5635,12 @@
           "docs": "Opacity of the button when focused with the tab key",
           "mode": "md"
         },
+        {
+          "name": "--background-hover",
+          "annotation": "prop",
+          "docs": "Background of the button on hover",
+          "mode": "ionic"
+        },
         {
           "name": "--background-hover",
           "annotation": "prop",
@@ -5617,6 +5653,12 @@
           "docs": "Background of the button on hover",
           "mode": "md"
         },
+        {
+          "name": "--background-hover-opacity",
+          "annotation": "prop",
+          "docs": "Opacity of the background on hover",
+          "mode": "ionic"
+        },
         {
           "name": "--background-hover-opacity",
           "annotation": "prop",
@@ -5629,6 +5671,12 @@
           "docs": "Opacity of the background on hover",
           "mode": "md"
         },
+        {
+          "name": "--border-color",
+          "annotation": "prop",
+          "docs": "Border color of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--border-color",
           "annotation": "prop",
@@ -5641,6 +5689,12 @@
           "docs": "Border color of the button",
           "mode": "md"
         },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "Border radius of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--border-radius",
           "annotation": "prop",
@@ -5653,6 +5707,12 @@
           "docs": "Border radius of the button",
           "mode": "md"
         },
+        {
+          "name": "--border-style",
+          "annotation": "prop",
+          "docs": "Border style of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--border-style",
           "annotation": "prop",
@@ -5665,6 +5725,12 @@
           "docs": "Border style of the button",
           "mode": "md"
         },
+        {
+          "name": "--border-width",
+          "annotation": "prop",
+          "docs": "Border width of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--border-width",
           "annotation": "prop",
@@ -5677,6 +5743,12 @@
           "docs": "Border width of the button",
           "mode": "md"
         },
+        {
+          "name": "--box-shadow",
+          "annotation": "prop",
+          "docs": "Box shadow of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--box-shadow",
           "annotation": "prop",
@@ -5689,6 +5761,12 @@
           "docs": "Box shadow of the button",
           "mode": "md"
         },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "Text color of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--color",
           "annotation": "prop",
@@ -5701,6 +5779,12 @@
           "docs": "Text color of the button",
           "mode": "md"
         },
+        {
+          "name": "--color-activated",
+          "annotation": "prop",
+          "docs": "Text color of the button when pressed",
+          "mode": "ionic"
+        },
         {
           "name": "--color-activated",
           "annotation": "prop",
@@ -5713,6 +5797,12 @@
           "docs": "Text color of the button when pressed",
           "mode": "md"
         },
+        {
+          "name": "--color-focused",
+          "annotation": "prop",
+          "docs": "Text color of the button when focused with the tab key",
+          "mode": "ionic"
+        },
         {
           "name": "--color-focused",
           "annotation": "prop",
@@ -5725,6 +5815,12 @@
           "docs": "Text color of the button when focused with the tab key",
           "mode": "md"
         },
+        {
+          "name": "--color-hover",
+          "annotation": "prop",
+          "docs": "Text color of the button when hover",
+          "mode": "ionic"
+        },
         {
           "name": "--color-hover",
           "annotation": "prop",
@@ -5737,6 +5833,12 @@
           "docs": "Text color of the button when hover",
           "mode": "md"
         },
+        {
+          "name": "--opacity",
+          "annotation": "prop",
+          "docs": "Opacity of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--opacity",
           "annotation": "prop",
@@ -5749,6 +5851,12 @@
           "docs": "Opacity of the button",
           "mode": "md"
         },
+        {
+          "name": "--padding-bottom",
+          "annotation": "prop",
+          "docs": "Bottom padding of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
@@ -5761,6 +5869,12 @@
           "docs": "Bottom padding of the button",
           "mode": "md"
         },
+        {
+          "name": "--padding-end",
+          "annotation": "prop",
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--padding-end",
           "annotation": "prop",
@@ -5773,6 +5887,12 @@
           "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button",
           "mode": "md"
         },
+        {
+          "name": "--padding-start",
+          "annotation": "prop",
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--padding-start",
           "annotation": "prop",
@@ -5785,6 +5905,12 @@
           "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button",
           "mode": "md"
         },
+        {
+          "name": "--padding-top",
+          "annotation": "prop",
+          "docs": "Top padding of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--padding-top",
           "annotation": "prop",
@@ -5797,6 +5923,12 @@
           "docs": "Top padding of the button",
           "mode": "md"
         },
+        {
+          "name": "--ripple-color",
+          "annotation": "prop",
+          "docs": "Color of the button ripple effect",
+          "mode": "ionic"
+        },
         {
           "name": "--ripple-color",
           "annotation": "prop",
@@ -5809,6 +5941,12 @@
           "docs": "Color of the button ripple effect",
           "mode": "md"
         },
+        {
+          "name": "--transition",
+          "annotation": "prop",
+          "docs": "Transition of the button",
+          "mode": "ionic"
+        },
         {
           "name": "--transition",
           "annotation": "prop",
@@ -6376,6 +6514,12 @@
       "events": [],
       "listeners": [],
       "styles": [
+        {
+          "name": "--background",
+          "annotation": "prop",
+          "docs": "Background of the card",
+          "mode": "ionic"
+        },
         {
           "name": "--background",
           "annotation": "prop",
@@ -6388,6 +6532,12 @@
           "docs": "Background of the card",
           "mode": "md"
         },
+        {
+          "name": "--border-radius",
+          "annotation": "prop",
+          "docs": "Border radius of the card",
+          "mode": "ionic"
+        },
         {
           "name": "--border-radius",
           "annotation": "prop",
@@ -6400,6 +6550,12 @@
           "docs": "Border radius of the card",
           "mode": "md"
         },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "Color of the card",
+          "mode": "ionic"
+        },
         {
           "name": "--color",
           "annotation": "prop",

package/dist/esm/ion-avatar_3.entry.js

@@ -70,7 +70,7 @@ Avatar.style = {
     md: IonAvatarMdStyle0
 };
 
-const badgeIonicCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:current-color(base);color:current-color(contrast)}:host(:empty){display:none}:host{--background:var(--ionic-color-blue-700, #105cef);--color:var(--ionic-color-base-white, #ffffff);--padding-start:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-200, 8px);--padding-top:var(--ionic-space-0, 0px);--padding-bottom:var(--ionic-space-0, 0px);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--ionic-font-weight-medium, 500)}:host(.badge-soft){border-radius:var(--ionic-border-radius-200, 8px)}:host(.badge-xxsmall.badge-soft),:host(.badge-xsmall.badge-soft),:host(.badge-small.badge-soft){border-radius:var(--ionic-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ionic-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ionic-border-radius-0, 0px)}:host(.badge-xxsmall){--padding-start:var(--ionic-space-050, 2px);--padding-end:var(--ionic-space-050, 2px);min-width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px);font-size:var(--ionic-font-size-300, 0.75rem);line-height:var(--ionic-line-height-400, 16px)}:host(.badge-xsmall){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-600, 24px);height:var(--ionic-scale-600, 24px);font-size:var(--ionic-font-size-350, 0.875rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-small){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-800, 32px);height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-400, 1rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-medium){min-width:var(--ionic-scale-1000, 40px);height:var(--ionic-scale-1000, 40px);font-size:var(--ionic-font-size-450, 1.125rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-large){min-width:var(--ionic-scale-1200, 48px);height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-500, 1.25rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-xlarge){min-width:var(--ionic-scale-1400, 56px);height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-550, 1.375rem);line-height:var(--ionic-line-height-700, 28px)}";
+const badgeIonicCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--background:var(--ion-color-primary, #105cef);--color:var(--ion-color-primary-contrast, #fff);--padding-start:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-200, 8px);--padding-top:var(--ionic-space-0, 0px);--padding-bottom:var(--ionic-space-0, 0px);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:var(--ionic-font-weight-medium, 500)}:host(.badge-soft){border-radius:var(--ionic-border-radius-200, 8px)}:host(.badge-xxsmall.badge-soft),:host(.badge-xsmall.badge-soft),:host(.badge-small.badge-soft){border-radius:var(--ionic-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ionic-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ionic-border-radius-0, 0px)}:host(.badge-xxsmall){--padding-start:var(--ionic-space-050, 2px);--padding-end:var(--ionic-space-050, 2px);min-width:var(--ionic-scale-400, 16px);height:var(--ionic-scale-400, 16px);font-size:var(--ionic-font-size-300, 0.75rem);line-height:var(--ionic-line-height-400, 16px)}:host(.badge-xsmall){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-600, 24px);height:var(--ionic-scale-600, 24px);font-size:var(--ionic-font-size-350, 0.875rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-small){--padding-start:var(--ionic-space-100, 4px);--padding-end:var(--ionic-space-100, 4px);min-width:var(--ionic-scale-800, 32px);height:var(--ionic-scale-800, 32px);font-size:var(--ionic-font-size-400, 1rem);line-height:var(--ionic-line-height-600, 24px)}:host(.badge-medium){min-width:var(--ionic-scale-1000, 40px);height:var(--ionic-scale-1000, 40px);font-size:var(--ionic-font-size-450, 1.125rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-large){min-width:var(--ionic-scale-1200, 48px);height:var(--ionic-scale-1200, 48px);font-size:var(--ionic-font-size-500, 1.25rem);line-height:var(--ionic-line-height-700, 28px)}:host(.badge-xlarge){min-width:var(--ionic-scale-1400, 56px);height:var(--ionic-scale-1400, 56px);font-size:var(--ionic-font-size-550, 1.375rem);line-height:var(--ionic-line-height-700, 28px)}";
 const IonBadgeIonicStyle0 = badgeIonicCss;
 
 const badgeIosCss = ":host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-size:0.8125rem;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}";