voyager-ionic-core 7.2.3 → 7.4.3

package/dist/collection/components/textarea/test/legacy/basic/textarea.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: basic'), () => {

package/dist/collection/components/textarea/test/legacy/clear-on-edit/textarea.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('textarea: clearOnEdit'), () => {

package/dist/collection/components/textarea/test/states/textarea.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: states'), () => {
@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Email" value="hi@ionic.io" readonly="true"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-readonly`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-readonly`));
     });
     test('should render disabled textarea correctly', async ({ page }) => {
       await page.setContent(`
         <ion-textarea label="Email" value="hi@ionic.io" disabled="true"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-disabled`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-disabled`));
     });
   });
 });

package/dist/collection/components/textarea/test/textarea-events.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions

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

@@ -55,6 +55,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 :host(.legacy-textarea) {
   flex: 1;
   background: var(--background);

package/dist/collection/components/textarea/textarea.js

@@ -1,14 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, forceUpdate, h, writeTask, } from '@stencil/core';
+import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
 import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from '../../global/ionic-global';
-import { getCounterText } from '../input/input.utils';
+import { getIonMode } from "../../global/ionic-global";
+import { getCounterText } from "../input/input.utils";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -229,7 +229,7 @@ export class Textarea {
      * Clear the textarea if the control has not been previously cleared
      * during focus.
      */
-    if (!this.didTextareaClearOnEdit && this.hasValue()) {
+    if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
       this.value = '';
       this.emitInputChange(ev);
     }
@@ -397,7 +397,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "references": {
             "Color": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::Color"
             }
           }
         },
@@ -688,7 +689,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
         },
         "attribute": "cols",
-        "reflect": false
+        "reflect": true
       },
       "rows": {
         "type": "number",
@@ -920,7 +921,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "references": {
             "TextareaChangeEventDetail": {
               "location": "import",
-              "path": "./textarea-interface"
+              "path": "./textarea-interface",
+              "id": "src/components/textarea/textarea-interface.ts::TextareaChangeEventDetail"
             }
           }
         }
@@ -940,7 +942,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "references": {
             "TextareaInputEventDetail": {
               "location": "import",
-              "path": "./textarea-interface"
+              "path": "./textarea-interface",
+              "id": "src/components/textarea/textarea-interface.ts::TextareaInputEventDetail"
             }
           }
         }
@@ -963,7 +966,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "references": {
             "StyleEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::StyleEventDetail"
             }
           }
         }
@@ -982,7 +986,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -1001,7 +1006,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -1015,7 +1021,8 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1031,10 +1038,12 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLTextAreaElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLTextAreaElement"
             }
           },
           "return": "Promise<HTMLTextAreaElement>"

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

@@ -55,6 +55,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 :host(.legacy-textarea) {
   flex: 1;
   background: var(--background);

package/dist/collection/components/thumbnail/test/basic/thumbnail.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * ion-thumbnail does not have mode/RTL-specific logic

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from '@stencil/core';
-import { getIonMode } from '../../global/ionic-global';
+import { Host, h } from "@stencil/core";
+import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
   render() {
     return (h(Host, { class: getIonMode(this) }, h("slot", null)));

package/dist/collection/components/title/test/basic/title.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('title: basic'), () => {
@@ -13,3 +13,18 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('title: special characters'), () => {
+    test('should not cut off characters', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-title size="large">ÔÔÔ</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const title = page.locator('ion-title');
+      await expect(title).toHaveScreenshot(screenshot('title-characters'));
+    });
+  });
+});

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

@@ -91,7 +91,6 @@
   bottom: 0;
   align-items: flex-end;
   min-width: 100%;
-  padding-bottom: 6px;
   font-size: 34px;
   font-weight: 700;
   text-align: start;
@@ -103,6 +102,7 @@
 
 :host(.title-large.ion-cloned-element) {
   --color: var(--ion-text-color, #000);
+  font-family: var(--ion-font-family);
 }
 
 :host(.title-large) .toolbar-title {

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

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode } from "../../global/ionic-global";
 export class ToolbarTitle {
   constructor() {
     this.color = undefined;
@@ -58,7 +58,8 @@ export class ToolbarTitle {
           "references": {
             "Color": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::Color"
             }
           }
         },
@@ -110,7 +111,8 @@ export class ToolbarTitle {
           "references": {
             "StyleEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::StyleEventDetail"
             }
           }
         }

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This test does not check LTR vs RTL layouts
@@ -13,9 +13,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await page.goto(`/src/components/toast/test/a11y`, config);
     });
     test('should not have any axe violations with inline toasts', async ({ page }) => {
-      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const didPresent = await page.spyOnEvent('ionToastDidPresent');
       await page.click('#inline-toast-trigger');
-      await ionToastDidPresent.next();
+      await didPresent.next();
       /**
        * IonToast overlays the entire screen, so
        * Axe will be unable to verify color contrast
@@ -25,9 +25,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
     test('should not have any axe violations with controller toasts', async ({ page }) => {
-      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const didPresent = await page.spyOnEvent('ionToastDidPresent');
       await page.click('#controller-toast-trigger');
-      await ionToastDidPresent.next();
+      await didPresent.next();
       /**
        * IonToast overlays the entire screen, so
        * Axe will be unable to verify color contrast
@@ -36,5 +36,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       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');
+      await didPresent.next();
+      const toastButton = page.locator('#aria-label-toast .toast-button');
+      await expect(toastButton).toHaveAttribute('aria-labelledby', 'close-label');
+      await expect(toastButton).toHaveAttribute('aria-label', 'close button');
+    });
   });
 });

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 class ToastFixture {
   constructor(page) {

package/dist/collection/components/toast/test/is-open/toast.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: stacked layout'), () => {

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.