@ionic/core 7.7.2-dev.11707926434.1affaed4 → 7.7.2-dev.11707932366.16baf005

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

@@ -84,16 +84,16 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 0;
+  --padding-bottom: 8px;
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -104,16 +104,13 @@
   display: block;
   position: relative;
   width: 100%;
+  min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
   box-sizing: border-box;
 }
 
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -144,20 +141,6 @@
   width: fit-content;
 }
 
-:host(.legacy-textarea) {
-  flex: 1;
-  background: var(--background);
-  white-space: pre-wrap;
-}
-
-:host(.legacy-textarea.ion-color) {
-  color: var(--ion-color-base);
-}
-
-:host(:not(.legacy-textarea)) {
-  --padding-bottom: 8px;
-}
-
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
   background: initial;
@@ -221,21 +204,6 @@
   opacity: var(--placeholder-opacity);
 }
 
-:host(.legacy-textarea) .native-textarea {
-  white-space: inherit;
-}
-
-:host(.legacy-textarea) .native-textarea,
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  -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);
-  border-radius: var(--border-radius);
-}
-
 .native-textarea {
   color: inherit;
   font-family: inherit;
@@ -252,55 +220,14 @@
   word-break: break-word;
 }
 
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  grid-area: 1/1/2/2;
-  word-break: break-word;
-}
-
 .cloned-input {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .cloned-input {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .cloned-input {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .cloned-input {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .cloned-input:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.cloned-input {
+  inset-inline-start: 0;
 }
 
 /**
@@ -312,13 +239,6 @@
   opacity: 1;
 }
 
-:host(.legacy-textarea[auto-grow]) .cloned-input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 :host([auto-grow]) .cloned-input {
   height: 100%;
 }
@@ -374,8 +294,7 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper,
-.textarea-legacy-wrapper {
+.native-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -390,8 +309,7 @@
    */
   grid-auto-rows: 100%;
 }
-.native-wrapper::after,
-.textarea-legacy-wrapper::after {
+.native-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
   visibility: hidden;
@@ -490,7 +408,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -509,7 +427,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -995,8 +913,8 @@
  * }
  */
 :host(.textarea-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --border-color: var(--ion-color-step-500, gray);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1032,8 +950,8 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-solid:hover) {
-    --background: var(--ion-color-step-100, #e6e6e6);
-    --border-color: var(--ion-color-step-750, #404040);
+    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1041,8 +959,8 @@
  * much darker on focus.
  */
 :host(.textarea-fill-solid.has-focus) {
-  --background: var(--ion-color-step-150, #d9d9d9);
-  --border-color: var(--ion-color-step-750, #404040);
+  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {
@@ -1050,25 +968,10 @@
    * Only the top left and top right borders should.
    * have a radius when using a solid fill.
    */
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-:host-context([dir=rtl]):host(.textarea-fill-solid) .textarea-wrapper, :host-context([dir=rtl]).textarea-fill-solid .textarea-wrapper {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-solid:dir(rtl)) .textarea-wrapper {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 :host(.label-floating.textarea-fill-solid) .label-text-wrapper {
@@ -1135,7 +1038,7 @@
  * }
  */
 :host(.textarea-fill-outline) {
-  --border-color: var(--ion-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1163,7 +1066,7 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1332,10 +1235,10 @@
 }
 
 :host(.textarea-fill-outline) .textarea-outline-start {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: var(--border-radius);
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: var(--border-radius);
   -webkit-border-start: var(--border-width) var(--border-style) var(--border-color);
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
   /**
@@ -1348,50 +1251,20 @@
    */
   width: calc(var(--padding-start) - 4px);
 }
-:host-context([dir=rtl]):host(.textarea-fill-outline) .textarea-outline-start, :host-context([dir=rtl]).textarea-fill-outline .textarea-outline-start {
-  border-top-left-radius: 0px;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-start {
-    border-top-left-radius: 0px;
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: 0px;
-  }
-}
 
 :host(.textarea-fill-outline) .textarea-outline-end {
   -webkit-border-end: var(--border-width) var(--border-style) var(--border-color);
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
-  border-top-left-radius: 0px;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: 0px;
+  border-start-start-radius: 0px;
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: var(--border-radius);
+  border-end-start-radius: 0px;
   /**
    * The ending outline fragment
    * should take up the remaining free space.
    */
   flex-grow: 1;
 }
-:host-context([dir=rtl]):host(.textarea-fill-outline) .textarea-outline-end, :host-context([dir=rtl]).textarea-fill-outline .textarea-outline-end {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: var(--border-radius);
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.textarea-fill-outline:dir(rtl)) .textarea-outline-end {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: var(--border-radius);
-  }
-}
 
 /**
  * When the textarea either has focus or a value,
@@ -1405,7 +1278,7 @@
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --padding-top: 18px;
   --padding-end: 0px;
   --padding-bottom: 8px;
@@ -1413,24 +1286,6 @@
   font-size: inherit;
 }
 
-:host(.legacy-textarea) {
-  --padding-top: 10px;
-  --padding-end: 0;
-  --padding-bottom: 11px;
-  --padding-start: 8px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 8px;
-  margin-bottom: 0;
-}
-
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-}
-
 .textarea-bottom .counter {
   letter-spacing: 0.0333333333em;
 }
@@ -1452,7 +1307,6 @@
   color: var(--highlight-color);
 }
 
-:host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.38;
 }
@@ -1466,32 +1320,8 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@supports (inset-inline-start: 0) {
-  .textarea-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .textarea-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .textarea-highlight:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.textarea-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.has-focus) .textarea-highlight {
@@ -1506,27 +1336,8 @@
 :host(.in-item) .textarea-highlight {
   bottom: 0;
 }
-@supports (inset-inline-start: 0) {
-  :host(.in-item) .textarea-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.in-item) .textarea-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.in-item) .textarea-highlight, :host-context([dir=rtl]).in-item .textarea-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.in-item:dir(rtl)) .textarea-highlight {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.in-item) .textarea-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.textarea-shape-round) {

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode(this) }, h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (h(Host, { key: 'a68f3a4857f63f4cf06ec89932e9dc4c434d4a9b', class: getIonMode(this) }, h("slot", { key: 'fd132f56a3ba8928d32d952b27ceb342a0e59aed' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,27 +100,8 @@
   box-sizing: border-box;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  :host {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host {
-    left: 0;
-  }
-  :host-context([dir=rtl]) {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(:dir(rtl)) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host {
+  inset-inline-start: 0;
 }
 
 :host(.title-small) {

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bb4edf1ed209af94f6db20de9a7523c3500f6e32', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, h("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
+            }) }, h("div", { key: 'd5857d84670a792aa74096a2efe03c3f17b98417', class: "toolbar-title" }, h("slot", { key: '596f3361b3182df48fbc14ef57c11702fac12cd1' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,62 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+    test.describe(title('toast: Axe testing'), () => {
+        test('should not have any axe violations with inline toasts', async ({ page }) => {
+            await page.setContent(`
+          <ion-toast></ion-toast>
+
+          <script>
+            const toast = document.querySelector('ion-toast');
+            toast.icon = 'person';
+            toast.header = 'Inline Toast Header';
+            toast.message = 'Inline Toast Message';
+            toast.buttons = ['OK'];
+          </script>
+        `, config);
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const toast = page.locator('ion-toast');
+            await toast.evaluate((el) => el.present());
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('should not have any axe violations with controller toasts', async ({ page }) => {
+            await page.setContent(`
+          <script type="module">
+            import { toastController } from '../../../../dist/ionic/index.esm.js';
+            window.toastController = toastController;
+          </script>
+
+          <ion-button onclick="presentToast()">Present</ion-button>
+
+          <script>
+            const presentToast = async () => {
+              // we only want to test color contrast on the toast itself
+              const button = document.querySelector('ion-button');
+              button.style.display = 'none';
+
+              const toast = await toastController.create({
+                icon: 'person',
+                header: 'Controller Toast Header',
+                message: 'Controller Toast Message',
+                buttons: ['OK']
+              });
+
+              await toast.present();
+            };
+          </script>
+        `, config);
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const button = page.locator('ion-button');
+            await button.click();
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 /**
  * This test does not check LTR vs RTL layouts
  */
@@ -12,30 +68,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/toast/test/a11y`, config);
         });
-        test('should not have any axe violations with inline toasts', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionToastDidPresent');
-            await page.click('#inline-toast-trigger');
-            await didPresent.next();
-            /**
-             * IonToast overlays the entire screen, so
-             * Axe will be unable to verify color contrast
-             * on elements under the toast.
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('should not have any axe violations with controller toasts', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionToastDidPresent');
-            await page.click('#controller-toast-trigger');
-            await didPresent.next();
-            /**
-             * IonToast overlays the entire screen, so
-             * Axe will be unable to verify color contrast
-             * on elements under the toast.
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
         test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page, }) => {
             const didPresent = await page.spyOnEvent('ionToastDidPresent');
             await page.click('#aria-label-toast-trigger');
@@ -143,3 +175,36 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * High contrast mode tests
+ */
+configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('toast: high contrast: buttons'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
+        <script>
+          const toast = document.querySelector('ion-toast');
+          toast.buttons = [
+            { text: 'Cancel', role: 'cancel' },
+            { text: 'OK' }
+          ];
+        </script>
+      `, config);
+        });
+        test('should not have visual regressions', async ({ page }) => {
+            const toast = page.locator('ion-toast');
+            await expect(toast).toBeVisible();
+            const toastWrapper = toast.locator('.toast-wrapper');
+            await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
+        });
+        test('should pass AAA guidelines', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page })
+                .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                .analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});