voyager-ionic-core 7.2.3 → 7.5.0

package/dist/collection/components/textarea/test/label-placement/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: label placement start'), () => {
@@ -10,14 +10,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="start"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start`));
     });
     test('textarea should render multiple lines of text', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Standard" label-placement="start" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start-multi-line-value`));
     });
   });
   test.describe(title('textarea: label placement end'), () => {
@@ -26,14 +26,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="end"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end`));
     });
     test('textarea should render multiple lines of text', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Standard" label-placement="end" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end-multi-line-value`));
     });
   });
   test.describe(title('textarea: label placement fixed'), () => {
@@ -42,21 +42,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="fixed"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed`));
     });
     test('textarea should render multiple lines of text', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Standard" label-placement="fixed" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-multi-line-value`));
     });
     test('label should be truncated', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="fixed"></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-label-truncated`));
     });
   });
   test.describe(title('textarea: label placement stacked'), () => {
@@ -65,28 +65,28 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="stacked"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-value`));
     });
     test('label should appear above the textarea when there is a no value', async ({ page }) => {
       await page.setContent(`
         <ion-textarea label="Standard" label-placement="stacked"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-no-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-no-value`));
     });
     test('textarea should render multiple lines of text', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Standard" label-placement="stacked" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-multi-line-value`));
     });
     test('label should be truncated', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="stacked"></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-label-truncated`));
     });
   });
   test.describe(title('textarea: label placement floating'), () => {
@@ -95,21 +95,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="floating"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-value`));
     });
     test('label should appear on top of the textarea and hide the textarea when there is a no value', async ({ page, }) => {
       await page.setContent(`
         <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value`));
     });
     test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => {
       await page.setContent(`
          <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
        `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value-placeholder`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value-placeholder`));
     });
     test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => {
       await page.setContent(`
@@ -119,21 +119,21 @@ configs().forEach(({ title, screenshot, config }) => {
       const nativeTextarea = textarea.locator('textarea');
       await nativeTextarea.click();
       await page.waitForChanges();
-      expect(await textarea.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`textarea-focused-placement-floating-no-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-focused-placement-floating-no-value`));
     });
     test('textarea should render multiple lines of text', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Standard" label-placement="floating" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-multi-line-value`));
     });
     test('label should be truncated', async ({ page }) => {
       await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="floating"></ion-textarea>
     `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-label-truncated`));
     });
   });
 });
@@ -144,7 +144,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             <ion-textarea label="Label Label Label Label Label" placeholder="Text Input"></ion-textarea>
           `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-truncate`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-truncate`));
     });
     test('label slot should be truncated with an ellipsis', async ({ page }) => {
       await page.setContent(`
@@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             </ion-textarea>
           `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-slot-truncate`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-slot-truncate`));
     });
   });
 });
@@ -171,7 +171,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         el.appendChild(labelEl);
       });
       await page.waitForChanges();
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-async-label`));
     });
   });
   test.describe(title('textarea: flex in grid rendering'), () => {
@@ -218,7 +218,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-textarea class="custom-textarea" label="My Label" label-placement="stacked"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-layering`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-layering`));
     });
   });
 });

package/dist/collection/components/textarea/test/legacy/a11y/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";
 /**
  * This behavior does not vary across modes/directions.

package/dist/collection/components/textarea/test/legacy/autogrow/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";
 /**
  * This behavior does not vary across directions
@@ -11,7 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/textarea/test/legacy/autogrow`, config);
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-diff`));
+      await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`));
     });
     test('should grow when typing', async ({ page }) => {
       await page.setContent(`
@@ -24,19 +24,19 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             </ion-list>
           </ion-content>
         </ion-app>`, config);
-      const textarea = await page.waitForSelector('ion-textarea');
+      const textarea = page.locator('ion-textarea');
       await textarea.click();
       await page.waitForChanges();
       await textarea.type('Now, this is a story all about how');
       await page.setIonViewport();
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-initial`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`));
       await textarea.type([
         `\nMy life got flipped-turned upside down`,
         `And I'd like to take a minute`,
         `Just sit right there`,
         `I'll tell you how I became the prince of a town called Bel-Air`,
       ].join('\n'));
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-after`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-after`));
     });
     test('should break long lines without white space', async ({ page }) => {
       test.info().annotations.push({
@@ -52,7 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           </ion-content>
         </ion-app>`, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-word-break`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-word-break`));
     });
   });
 });

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

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the textarea
@@ -55,6 +88,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);
@@ -373,7 +422,7 @@
   display: flex;
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
-  font-size: 12px;
+  font-size: 0.75rem;
 }
 
 /**
@@ -651,6 +700,105 @@
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --border-width: 0.55px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));

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>"