From 8e4ab30d7c35e8a5cc5120dcce1420b533cf62e9 Mon Sep 17 00:00:00 2001
From: Xander Marjoram <xander.marjoram@justeattakeaway.com>
Date: Thu, 11 Jul 2024 16:41:36 +0100
Subject: [PATCH] feat(pie-textarea): DSW-2130 add resize prop and
 functionality (#1574)

* feat(pie-textarea): DSW-2130 add resize prop and functionality

* Linting fixes

* Linting fixes

* Min height for auto mode

* DSW-2130: Add functionality for auto resize mode

* Readme update

* Update textarea story and add component tests

* Add textarea visual regression tests

* Add fixed sizes for manual resize mode on touch devices

* Update changeset

* Self-review changes

* Rename test

* Use defaultProps value for disabled prop

* PR comment updates

* Wait for throttled resize in visual tests
---
 .changeset/long-bottles-think.md              |  11 +
 .../stories/pie-textarea.stories.ts           |  24 +-
 .../pie-modal/test/visual/pie-modal.spec.ts   |   2 +-
 packages/components/pie-textarea/README.md    |   9 +-
 packages/components/pie-textarea/package.json |   4 +-
 packages/components/pie-textarea/src/defs.ts  |   9 +
 packages/components/pie-textarea/src/index.ts |  49 +++-
 .../components/pie-textarea/src/textarea.scss |  85 +++++-
 .../test/component/pie-textarea.spec.ts       |  61 +++-
 .../test/visual/pie-textarea.spec.ts          | 191 ++++++++-----
 yarn.lock                                     | 263 ++++++++++--------
 11 files changed, 478 insertions(+), 230 deletions(-)
 create mode 100644 .changeset/long-bottles-think.md

diff --git a/.changeset/long-bottles-think.md b/.changeset/long-bottles-think.md
new file mode 100644
index 0000000000..98d669ebb8
--- /dev/null
+++ b/.changeset/long-bottles-think.md
@@ -0,0 +1,11 @@
+---
+"@justeattakeaway/pie-textarea": minor
+"pie-storybook": patch
+---
+
+[Added] - resize prop for textarea
+[Added] - auto and manual sizing functionality
+[Added] - styling for different sizes
+[Added] - disabled and focus styles
+[Added] - visual and component tests
+[Changed] - update textarea storybook story
diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts
index 412f9951ce..83b078974f 100644
--- a/apps/pie-storybook/stories/pie-textarea.stories.ts
+++ b/apps/pie-storybook/stories/pie-textarea.stories.ts
@@ -3,7 +3,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-textarea';
-import { TextareaProps, defaultProps, sizes } from '@justeattakeaway/pie-textarea';
+import {
+    TextareaProps, defaultProps, resizeModes, sizes,
+} from '@justeattakeaway/pie-textarea';
 /* eslint-enable import/no-duplicates */
 
 import { type StoryMeta } from '../types';
@@ -21,7 +23,7 @@ const textareaStoryMeta: TextareaStoryMeta = {
             description: 'If true, disables the textarea field.',
             control: 'boolean',
             defaultValue: {
-                summary: false,
+                summary: defaultProps.disabled,
             },
         },
         size: {
@@ -32,6 +34,14 @@ const textareaStoryMeta: TextareaStoryMeta = {
                 summary: defaultProps.size,
             },
         },
+        resize: {
+            description: 'Controls the resizing behaviour of the textarea. Can be `auto` or `manual`. Defaults to `auto`.',
+            control: 'select',
+            options: resizeModes,
+            defaultValue: {
+                summary: defaultProps.resize,
+            },
+        },
     },
     args: defaultArgs,
     parameters: {
@@ -44,12 +54,14 @@ const textareaStoryMeta: TextareaStoryMeta = {
 
 const Template = ({
     disabled,
+    resize,
     size,
 }: TextareaProps) => html`
-        <pie-textarea
-                ?disabled="${disabled}"
-                size="${ifDefined(size)}">
-        </pie-textarea>
+    <pie-textarea
+            ?disabled="${disabled}"
+            size="${ifDefined(size)}"
+            resize="${ifDefined(resize)}">
+    </pie-textarea>
     `;
 
 export const Default = createStory<TextareaProps>(Template, defaultArgs)();
diff --git a/packages/components/pie-modal/test/visual/pie-modal.spec.ts b/packages/components/pie-modal/test/visual/pie-modal.spec.ts
index 6c3073168a..95001bbb65 100644
--- a/packages/components/pie-modal/test/visual/pie-modal.spec.ts
+++ b/packages/components/pie-modal/test/visual/pie-modal.spec.ts
@@ -640,7 +640,7 @@ test.describe('Prop: `isFooterPinned`', () => {
 
 test.describe('Prop: `hasStackedActions`', () => {
     test.describe('when true', () => {
-        (['small', 'medium', 'large'] as Array<ModalProps['size']>)
+        sizes
             .forEach((size) => {
                 test(`should display actions full width (at narrow viewports – with leading action on top) for a modal with size = ${size}`, async ({ page, mount }) => {
                     await mount(PieModal, {
diff --git a/packages/components/pie-textarea/README.md b/packages/components/pie-textarea/README.md
index f2fd352c93..5c678b093a 100644
--- a/packages/components/pie-textarea/README.md
+++ b/packages/components/pie-textarea/README.md
@@ -72,10 +72,11 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
 
 ## Props
 
-| Property   | Type                       | Default  | Description                                        |
-|------------|----------------------------|----------|----------------------------------------------------|
-| `disabled` | `boolean`                  | `false`  | Indicates whether or not the textarea is disabled. |
-| `size`     | `small`, `medium`, `large` | `medium` | The size of the textarea field.                    |
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `disabled` | `boolean` | `false` | Indicates whether or not the textarea is disabled. |
+| `size` | `"small"`, `"medium"`, `"large"` | `"medium"` | The size of the textarea field. |
+| `resize` | `"auto"`, `"manual"` | `"auto"` | Controls the resizing behaviour of the textarea. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
 
diff --git a/packages/components/pie-textarea/package.json b/packages/components/pie-textarea/package.json
index 17c9554d90..d1e578925d 100644
--- a/packages/components/pie-textarea/package.json
+++ b/packages/components/pie-textarea/package.json
@@ -37,10 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
+    "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0",
+    "lodash.throttle": "4.1.1"
   },
   "volta": {
     "extends": "../../../package.json"
diff --git a/packages/components/pie-textarea/src/defs.ts b/packages/components/pie-textarea/src/defs.ts
index 7ad3842ac6..69c02b8c33 100644
--- a/packages/components/pie-textarea/src/defs.ts
+++ b/packages/components/pie-textarea/src/defs.ts
@@ -1,6 +1,7 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const sizes = ['small', 'medium', 'large'] as const;
+export const resizeModes = ['auto', 'manual'] as const;
 
 export interface TextareaProps {
     /**
@@ -12,6 +13,13 @@ export interface TextareaProps {
      * The size of the textarea field. Can be `small`, `medium` or `large`. Defaults to `medium`.
      */
     size?: typeof sizes[number];
+
+    /**
+     * The resize mode of the textarea. Can be `auto` or `manual`. Defaults to `auto`.
+     * When set to `auto`, the textarea will resize vertically as needed.
+     * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
+     */
+    resize?: typeof resizeModes[number];
 }
 
 /**
@@ -25,4 +33,5 @@ type DefaultProps = ComponentDefaultProps<TextareaProps>;
 export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
+    resize: 'auto',
 };
diff --git a/packages/components/pie-textarea/src/index.ts b/packages/components/pie-textarea/src/index.ts
index a0143dbc59..afb9707134 100644
--- a/packages/components/pie-textarea/src/index.ts
+++ b/packages/components/pie-textarea/src/index.ts
@@ -1,11 +1,15 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import {
+    LitElement, html, unsafeCSS, PropertyValues,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
+import throttle from 'lodash.throttle';
 
 import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
 import styles from './textarea.scss?inline';
-import { TextareaProps, defaultProps, sizes } from './defs';
+import {
+    TextareaProps, defaultProps, sizes, resizeModes,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -19,25 +23,52 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: Boolean, reflect: true })
-    public disabled?: TextareaProps['disabled'];
+    public disabled = defaultProps.disabled;
 
     @property({ type: String })
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size?: TextareaProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
+    public resize = defaultProps.resize;
+
+    @query('textarea')
+    private _textarea!: HTMLTextAreaElement;
+
+    private _throttledResize = throttle(() => {
+        if (this.resize === 'auto') {
+            this._textarea.style.height = 'auto';
+            this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`; // +2 for border thicknesses
+        }
+    }, 100);
+
+    private handleResize () {
+        this._throttledResize();
+    }
+
+    updated (changedProperties: PropertyValues<this>) {
+        if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
+            this.handleResize();
+        }
+    }
 
     render () {
         const {
             disabled,
+            resize,
             size,
         } = this;
 
         return html`
             <div
-                class="c-textarea"
-                data-test-id="pie-textarea-shell"
-                data-pie-size=${ifDefined(size)}>
+                class="c-textareaWrapper"
+                data-test-id="pie-textarea-wrapper"
+                data-pie-size="${size}"
+                data-pie-resize="${resize}">
                 <textarea
                     data-test-id="pie-textarea"
+                    @input=${this.handleResize}
                     ?disabled=${disabled}
                 ></textarea>
             </div>`;
diff --git a/packages/components/pie-textarea/src/textarea.scss b/packages/components/pie-textarea/src/textarea.scss
index 4d4f5d2f09..41f44d6cf3 100644
--- a/packages/components/pie-textarea/src/textarea.scss
+++ b/packages/components/pie-textarea/src/textarea.scss
@@ -1,22 +1,89 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-.c-textarea {
-  --textarea-height: 72px;
+// Heights are being defined based on the line height of the text and the padding.
+// Changing the `size` property affects the padding and therefore the height of the textarea.
+// Default height is two lines of text.
+// Minimum height in manual resize mode is one line of text.
+// Maximum height in auto resize mode is six lines of text.
+.c-textareaWrapper {
+  --textarea-line-height: #{p.line-height(--dt-font-body-l-line-height)};
+  --textarea-border-thickness: 1px;
+  --textarea-resize: none;
+  --textarea-padding-inline: var(--dt-spacing-d);
+  --textarea-padding-block: var(--dt-spacing-c);
+  --textarea-background-color: var(--dt-color-container-default);
+  --textarea-border-color: var(--dt-color-interactive-form);
+  --textarea-content-color: var(--dt-color-content-default);
 
-  height: var(--textarea-height);
+  // Default height is two lines of text
+  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+
+  line-height: 0; // Remove once there is text outside the textarea
+
+  textarea {
+    @include p.font-size(--dt-font-body-l-size);
+    line-height: var(--textarea-line-height);
+    font-family: var(--dt-font-body-l-family);
+    resize: var(--textarea-resize);
+    border: var(--textarea-border-thickness) solid var(--textarea-border-color);
+    background-color: var(--textarea-background-color);
+    color: var(--textarea-content-color);
+
+    border-radius: var(--dt-radius-rounded-c);
+    block-size: var(--textarea-height);
+    max-block-size: var(--textarea-max-height);
+    min-block-size: var(--textarea-min-height);
+
+    padding-block-start: var(--textarea-padding-block);
+    padding-block-end: var(--textarea-padding-block);
+    padding-inline-start: var(--textarea-padding-inline);
+    padding-inline-end: var(--textarea-padding-inline);
+
+    &[disabled] {
+      --textarea-background-color: var(--dt-color-disabled-01);
+      --textarea-border-color: var(--dt-color-disabled-01);
+      --textarea-content-color: var(--dt-color-content-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([disabled]) {
+        --textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
+      }
+    }
+
+    &:focus-visible {
+      @include p.focus;
+    }
+  }
 
   &[data-pie-size="large"] {
-    --textarea-height: 80px;
+    --textarea-padding-block: var(--dt-spacing-d);
   }
 
   &[data-pie-size="small"] {
-    --textarea-height: 64px;
+    --textarea-padding-block: var(--dt-spacing-b);
   }
 
-  textarea {
-    width: 100%;
-    height: 100%;
+  &[data-pie-resize="manual"] {
+    --textarea-resize: vertical;
+
+    // Minimum is one line of text
+    --textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2)); // One line of text
+
+    @media (pointer: coarse) {
+      // Fixed size for touch devices
+      --textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+      --textarea-resize: none;
+    }
   }
-}
 
+  &[data-pie-resize="auto"] {
+    // Maximum is six lines of text
+    --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
 
+    // Minimum is two lines of text
+    --textarea-min-height: var(--textarea-height);
+  }
+}
diff --git a/packages/components/pie-textarea/test/component/pie-textarea.spec.ts b/packages/components/pie-textarea/test/component/pie-textarea.spec.ts
index 64316cc743..4a7c658726 100644
--- a/packages/components/pie-textarea/test/component/pie-textarea.spec.ts
+++ b/packages/components/pie-textarea/test/component/pie-textarea.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieTextarea, TextareaProps } from '../../src/index.ts';
 
 const componentSelector = '[data-test-id="pie-textarea"]';
-const componentShellSelector = '[data-test-id="pie-textarea-shell"]';
+const componentWrapperSelector = '[data-test-id="pie-textarea-wrapper"]';
 
 test.describe('PieTextarea - Component tests', () => {
     // IMPORTANT: Mounting and Unmounting the component before each test ensures that any tests that do not explicitly
@@ -89,13 +89,13 @@ test.describe('PieTextarea - Component tests', () => {
                 const component = await mount(PieTextarea, {});
 
                 // Act
-                const textareaShell = component.locator(componentShellSelector);
+                const textareaWrapper = component.locator(componentWrapperSelector);
 
                 // Assert
-                expect(textareaShell).toHaveAttribute('data-pie-size', 'medium');
+                expect(textareaWrapper).toHaveAttribute('data-pie-size', 'medium');
             });
 
-            test('should apply `large` size prop to the HTML textarea rendered', async ({ mount }) => {
+            test('should apply `large` size attribute to the textarea wrapper', async ({ mount }) => {
                 // Arrange
                 const component = await mount(PieTextarea, {
                     props: {
@@ -104,13 +104,13 @@ test.describe('PieTextarea - Component tests', () => {
                 });
 
                 // Act
-                const textareaShell = component.locator(componentShellSelector);
+                const textareaWrapper = component.locator(componentWrapperSelector);
 
                 // Assert
-                expect(textareaShell).toHaveAttribute('data-pie-size', 'large');
+                expect(textareaWrapper).toHaveAttribute('data-pie-size', 'large');
             });
 
-            test('should apply `small` size prop to the HTML textarea rendered', async ({ mount }) => {
+            test('should apply `small` size attribute to the textarea wrapper', async ({ mount }) => {
                 // Arrange
                 const component = await mount(PieTextarea, {
                     props: {
@@ -119,10 +119,53 @@ test.describe('PieTextarea - Component tests', () => {
                 });
 
                 // Act
-                const textareaShell = component.locator(componentShellSelector);
+                const textareaWrapper = component.locator(componentWrapperSelector);
 
                 // Assert
-                expect(textareaShell).toHaveAttribute('data-pie-size', 'small');
+                expect(textareaWrapper).toHaveAttribute('data-pie-size', 'small');
+            });
+        });
+
+        test.describe('resize', () => {
+            test('should apply `auto` resize prop by default if no resize prop provided', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieTextarea, {});
+
+                // Act
+                const textareaWrapper = component.locator(componentWrapperSelector);
+
+                // Assert
+                expect(textareaWrapper).toHaveAttribute('data-pie-resize', 'auto');
+            });
+
+            test('should apply `manual` resize attribute to the textarea wrapper', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieTextarea, {
+                    props: {
+                        resize: 'manual',
+                    } as TextareaProps,
+                });
+
+                // Act
+                const textareaWrapper = component.locator(componentWrapperSelector);
+
+                // Assert
+                expect(textareaWrapper).toHaveAttribute('data-pie-resize', 'manual');
+            });
+
+            test('should apply `auto` resize attribute to the textarea wrapper', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieTextarea, {
+                    props: {
+                        resize: 'auto',
+                    } as TextareaProps,
+                });
+
+                // Act
+                const textareaWrapper = component.locator(componentWrapperSelector);
+
+                // Assert
+                expect(textareaWrapper).toHaveAttribute('data-pie-resize', 'auto');
             });
         });
     });
diff --git a/packages/components/pie-textarea/test/visual/pie-textarea.spec.ts b/packages/components/pie-textarea/test/visual/pie-textarea.spec.ts
index 1b4e938722..dd4a9904d2 100644
--- a/packages/components/pie-textarea/test/visual/pie-textarea.spec.ts
+++ b/packages/components/pie-textarea/test/visual/pie-textarea.spec.ts
@@ -1,29 +1,11 @@
-import { test } from '@sand4rt/experimental-ct-web';
+import { test, expect } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import type {
-    WebComponentPropValues, WebComponentTestInput,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
-import {
-    createTestWebComponent,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
-import {
-    WebComponentTestWrapper,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts';
-import { setRTL } from '@justeattakeaway/pie-webc-testing/src/helpers/set-rtl-direction.ts';
 
 import { PieTextarea } from '../../src/index.ts';
+import { sizes } from '../../src/defs.ts';
 
-const readingDirections = ['LTR', 'RTL'];
-
-const renderTestPieTextarea = (propVals: WebComponentPropValues) => {
-    let attributes = '';
-
-    if (propVals.disabled) attributes += ' disabled';
-    if (propVals.size) attributes += ` size="${propVals.size}"`;
-
-    return `<pie-textarea${attributes}></pie-textarea>`;
-};
+const componentSelector = '[data-test-id="pie-textarea"]';
 
 test.beforeEach(async ({ mount }, testInfo) => {
     testInfo.setTimeout(testInfo.timeout + 40000);
@@ -34,64 +16,129 @@ test.beforeEach(async ({ mount }, testInfo) => {
     await component.unmount();
 });
 
-test('Size variants', async ({ mount, page }) => {
-    const sizeVariants = ['small', 'medium', 'large'];
-
-    await Promise.all(sizeVariants.map(async (size) => {
-        const testComponent: WebComponentTestInput = createTestWebComponent({ size }, renderTestPieTextarea);
-        const propKeyValues = `size: ${testComponent.propValues.size}`;
-
-        await mount(
-            WebComponentTestWrapper,
-            {
-                props: { propKeyValues },
-                slots: {
-                    component: testComponent.renderedString.trim(),
-                },
-            },
-        );
-    }));
-
-    await percySnapshot(page, 'PIE Textarea - Size variants', percyWidths);
-});
-
-await Promise.all(readingDirections.map(async (dir) => {
-    test(`Content and props - ${dir}`, async ({ mount, page }) => {
-        if (dir === 'RTL') {
-            setRTL(page);
-        }
+sizes.forEach((size) => {
+    test(`should render correctly with size: ${size}`, async ({ page, mount }) => {
+        await mount(PieTextarea, {
+            props: {
+                size,
+            } as PieTextarea,
+        });
 
-        let testComponent: WebComponentTestInput = createTestWebComponent({ value: 'String' }, renderTestPieTextarea);
+        const textarea = page.locator(componentSelector);
 
-        // Disabled placeholder
-        testComponent = createTestWebComponent({
-            disabled: true,
-        }, renderTestPieTextarea);
+        await expect.soft(textarea).toBeVisible();
 
-        let propKeyValues = `disabled: ${testComponent.propValues.disabled}`;
+        await percySnapshot(page, `Textarea - size: "${size}"`, percyWidths);
+    });
+});
 
-        await mount(
-            WebComponentTestWrapper,
-            {
-                props: { propKeyValues },
-            },
-        );
+test.describe('disabled', () => {
+    test('should render correctly when disabled', async ({ page, mount }) => {
+        await mount(PieTextarea, {
+            props: {
+                disabled: true,
+            } as PieTextarea,
+        });
 
-        // Not Disabled placeholder
-        testComponent = createTestWebComponent({
-            disabled: false,
-        }, renderTestPieTextarea);
+        await percySnapshot(page, 'Textarea - disabled: true', percyWidths);
+    });
 
-        propKeyValues = `disabled: ${testComponent.propValues.disabled}`;
+    test('should render correctly when not disabled', async ({ page, mount }) => {
+        await mount(PieTextarea, {
+            props: {
+                disabled: false,
+            } as PieTextarea,
+        });
 
-        await mount(
-            WebComponentTestWrapper,
-            {
-                props: { propKeyValues },
-            },
-        );
+        await percySnapshot(page, 'Textarea - disabled: false', percyWidths);
+    });
+});
 
-        await percySnapshot(page, `PIE Textarea - Content and props - ${dir}`, percyWidths);
+test.describe('Resize mode:', () => {
+    test.describe('auto', () => {
+        test('should render correctly with resize mode: auto', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'auto',
+                } as PieTextarea,
+            });
+
+            await percySnapshot(page, 'Textarea - resize: "auto"', percyWidths);
+        });
+
+        test('should resize the textarea vertically', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'auto',
+                } as PieTextarea,
+            });
+
+            const textarea = await page.locator(componentSelector);
+
+            await textarea.fill('The default height is enough for two lines of text, but it should grow if you type more.');
+            await page.waitForTimeout(250); // Wait for throttled resize event to fire.
+
+            await percySnapshot(page, 'Textarea - resize: "auto" (multiline content)', percyWidths);
+        });
+
+        test('should overflow when content exceeds maximum height', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'auto',
+                } as PieTextarea,
+            });
+
+            const textarea = await page.locator(componentSelector);
+            await textarea.fill('The default height is enough for two lines of text, but it should grow if you type more. If you reach more than six lines of content, the element will not continue to grow and scrollbars will appear.');
+            await page.waitForTimeout(250); // Wait for throttled resize event to fire.
+
+            await percySnapshot(page, 'Textarea - resize mode: auto - with overflowing content', percyWidths);
+        });
+
+        test('should not be able to be made taller than its maximum height', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'auto',
+                } as PieTextarea,
+            });
+
+            const textarea = await page.locator(componentSelector);
+            await textarea.fill('This textarea has been filled with enough text for the automatic resizing to reach its maximum height. Some content should be cut off and you should not be able to see the end of this text. If this happens then the maximum height is not being limited correctly.');
+            await page.waitForTimeout(250); // Wait for throttled resize event to fire.
+
+            await page.evaluate(() => {
+                const textarea = document.querySelector('pie-textarea');
+                textarea?.shadowRoot?.querySelector('textarea')?.setAttribute('style', 'height: 600px;'); // Setting the height too high, maxHeight should override this.
+            });
+
+            await percySnapshot(page, 'Textarea - resize: "auto" - with large height', percyWidths);
+        });
     });
-}));
 
+    test.describe('manual', () => {
+        test('should render correctly with resize mode: manual', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'manual',
+                } as PieTextarea,
+            });
+
+            await percySnapshot(page, 'Textarea - resize: "manual"', percyWidths);
+        });
+
+        test('should render correctly with a large height', async ({ page, mount }) => {
+            await mount(PieTextarea, {
+                props: {
+                    resize: 'manual',
+                } as PieTextarea,
+            });
+
+            await page.evaluate(() => {
+                const textarea = document.querySelector('pie-textarea');
+                textarea?.shadowRoot?.querySelector('textarea')?.setAttribute('style', 'height: 600px;');
+            });
+
+            await percySnapshot(page, 'Textarea - resize: "manual" - with large height', percyWidths);
+        });
+    });
+});
diff --git a/yarn.lock b/yarn.lock
index 99af8cfabf..3179989fcf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5462,76 +5462,76 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-assistive-text@0.5.0, @justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text":
+"@justeattakeaway/pie-assistive-text@0.5.1, @justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-button@0.47.7, @justeattakeaway/pie-button@workspace:packages/components/pie-button":
+"@justeattakeaway/pie-button@0.47.8, @justeattakeaway/pie-button@workspace:packages/components/pie-button":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-button@workspace:packages/components/pie-button"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
     element-internals-polyfill: 1.3.11
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-card@0.19.6, @justeattakeaway/pie-card@workspace:packages/components/pie-card":
+"@justeattakeaway/pie-card@0.19.7, @justeattakeaway/pie-card@workspace:packages/components/pie-card":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-card@workspace:packages/components/pie-card"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-checkbox-group@0.0.0, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group":
+"@justeattakeaway/pie-checkbox-group@0.1.0, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-checkbox@0.7.0, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox":
+"@justeattakeaway/pie-checkbox@0.7.1, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
-    "@justeattakeaway/pie-assistive-text": 0.5.0
+    "@justeattakeaway/pie-assistive-text": 0.5.1
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-chip@0.7.0, @justeattakeaway/pie-chip@workspace:packages/components/pie-chip":
+"@justeattakeaway/pie-chip@0.7.1, @justeattakeaway/pie-chip@workspace:packages/components/pie-chip":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-chip@workspace:packages/components/pie-chip"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-webc-core": 0.24.0
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
@@ -5548,20 +5548,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-cookie-banner@0.20.5, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner":
+"@justeattakeaway/pie-cookie-banner@0.21.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeat/pie-design-tokens": 6.3.1
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-divider": 0.13.6
-    "@justeattakeaway/pie-icon-button": 0.28.8
-    "@justeattakeaway/pie-link": 0.17.6
-    "@justeattakeaway/pie-modal": 0.43.3
-    "@justeattakeaway/pie-switch": 0.29.9
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-divider": 0.13.7
+    "@justeattakeaway/pie-icon-button": 0.28.9
+    "@justeattakeaway/pie-link": 0.17.7
+    "@justeattakeaway/pie-modal": 0.43.4
+    "@justeattakeaway/pie-switch": 0.29.10
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
@@ -5579,27 +5579,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-divider@0.13.6, @justeattakeaway/pie-divider@workspace:packages/components/pie-divider":
+"@justeattakeaway/pie-divider@0.13.7, @justeattakeaway/pie-divider@workspace:packages/components/pie-divider":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-divider@workspace:packages/components/pie-divider"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-form-label@0.13.5, @justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label":
+"@justeattakeaway/pie-form-label@0.13.6, @justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-switch": 0.29.9
-    "@justeattakeaway/pie-text-input": 0.23.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-switch": 0.29.10
+    "@justeattakeaway/pie-text-input": 0.23.1
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
@@ -5611,15 +5611,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-icon-button@0.28.8, @justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button":
+"@justeattakeaway/pie-icon-button@0.28.9, @justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
@@ -5673,14 +5673,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-icons-webc@0.24.1, @justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc":
+"@justeattakeaway/pie-icons-webc@0.24.2, @justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc"
   dependencies:
     "@justeattakeaway/pie-components-config": 0.16.0
     "@justeattakeaway/pie-icons": 4.18.0
     "@justeattakeaway/pie-icons-configs": 4.5.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@rollup/plugin-typescript": 11.1.6
     "@web/test-runner": 0.16.1
     just-kebab-case: 4.2.0
@@ -5708,31 +5708,31 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-link@0.17.6, @justeattakeaway/pie-link@workspace:packages/components/pie-link":
+"@justeattakeaway/pie-link@0.17.7, @justeattakeaway/pie-link@workspace:packages/components/pie-link":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-link@workspace:packages/components/pie-link"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-modal@0.43.3, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal":
+"@justeattakeaway/pie-modal@0.43.4, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-modal@workspace:packages/components/pie-modal"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeat/pie-design-tokens": 6.3.1
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icon-button": 0.28.8
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icon-button": 0.28.9
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     "@types/body-scroll-lock": 3.1.2
     body-scroll-lock: 3.1.5
@@ -5741,97 +5741,99 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-notification@0.9.2, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification":
+"@justeattakeaway/pie-notification@0.9.3, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-notification@workspace:packages/components/pie-notification"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icon-button": 0.28.8
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icon-button": 0.28.9
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-spinner@0.6.5, @justeattakeaway/pie-spinner@workspace:packages/components/pie-spinner":
+"@justeattakeaway/pie-spinner@0.6.6, @justeattakeaway/pie-spinner@workspace:packages/components/pie-spinner":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-spinner@workspace:packages/components/pie-spinner"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-switch@0.29.9, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch":
+"@justeattakeaway/pie-switch@0.29.10, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-switch@workspace:packages/components/pie-switch"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
     element-internals-polyfill: 1.3.11
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-tag@0.9.7, @justeattakeaway/pie-tag@workspace:packages/components/pie-tag":
+"@justeattakeaway/pie-tag@0.9.8, @justeattakeaway/pie-tag@workspace:packages/components/pie-tag":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-tag@workspace:packages/components/pie-tag"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-text-input@0.23.0, @justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input":
+"@justeattakeaway/pie-text-input@0.23.1, @justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
-    "@justeattakeaway/pie-assistive-text": 0.5.0
+    "@justeattakeaway/pie-assistive-text": 0.5.1
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-webc-core": 0.24.0
     "@justeattakeaway/pie-wrapper-react": 0.14.1
     cem-plugin-module-file-extensions: 0.0.5
     element-internals-polyfill: 1.3.11
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-textarea@0.3.0, @justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea":
+"@justeattakeaway/pie-textarea@0.3.1, @justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
+    "@types/lodash.throttle": 4.1.9
     cem-plugin-module-file-extensions: 0.0.5
+    lodash.throttle: 4.1.1
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-toast@0.1.0, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast":
+"@justeattakeaway/pie-toast@0.1.1, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-toast@workspace:packages/components/pie-toast"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-webc-core": 0.23.0
+    "@justeattakeaway/pie-webc-core": 0.24.0
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-webc-core@0.23.0, @justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core":
+"@justeattakeaway/pie-webc-core@0.24.0, @justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core"
   dependencies:
@@ -5853,26 +5855,26 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc"
   dependencies:
-    "@justeattakeaway/pie-assistive-text": 0.5.0
-    "@justeattakeaway/pie-button": 0.47.7
-    "@justeattakeaway/pie-card": 0.19.6
-    "@justeattakeaway/pie-checkbox": 0.7.0
-    "@justeattakeaway/pie-checkbox-group": 0.0.0
-    "@justeattakeaway/pie-chip": 0.7.0
+    "@justeattakeaway/pie-assistive-text": 0.5.1
+    "@justeattakeaway/pie-button": 0.47.8
+    "@justeattakeaway/pie-card": 0.19.7
+    "@justeattakeaway/pie-checkbox": 0.7.1
+    "@justeattakeaway/pie-checkbox-group": 0.1.0
+    "@justeattakeaway/pie-chip": 0.7.1
     "@justeattakeaway/pie-components-config": 0.16.0
-    "@justeattakeaway/pie-cookie-banner": 0.20.5
-    "@justeattakeaway/pie-divider": 0.13.6
-    "@justeattakeaway/pie-form-label": 0.13.5
-    "@justeattakeaway/pie-icon-button": 0.28.8
-    "@justeattakeaway/pie-link": 0.17.6
-    "@justeattakeaway/pie-modal": 0.43.3
-    "@justeattakeaway/pie-notification": 0.9.2
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-switch": 0.29.9
-    "@justeattakeaway/pie-tag": 0.9.7
-    "@justeattakeaway/pie-text-input": 0.23.0
-    "@justeattakeaway/pie-textarea": 0.3.0
-    "@justeattakeaway/pie-toast": 0.1.0
+    "@justeattakeaway/pie-cookie-banner": 0.21.0
+    "@justeattakeaway/pie-divider": 0.13.7
+    "@justeattakeaway/pie-form-label": 0.13.6
+    "@justeattakeaway/pie-icon-button": 0.28.9
+    "@justeattakeaway/pie-link": 0.17.7
+    "@justeattakeaway/pie-modal": 0.43.4
+    "@justeattakeaway/pie-notification": 0.9.3
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-switch": 0.29.10
+    "@justeattakeaway/pie-tag": 0.9.8
+    "@justeattakeaway/pie-text-input": 0.23.1
+    "@justeattakeaway/pie-textarea": 0.3.1
+    "@justeattakeaway/pie-toast": 0.1.1
     chalk: 5.3.0
   bin:
     add-components: ./src/index.js
@@ -10800,6 +10802,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.throttle@npm:4.1.9":
+  version: 4.1.9
+  resolution: "@types/lodash.throttle@npm:4.1.9"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 6d330072387f062d408747f0dbe62869820ee3f3fbec43965f703ce9c9083e4ff9082faa4fe92aea000d6367b7645955e9c8db6a4e04e6bd769697fdd19c12b1
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.17.6
+  resolution: "@types/lodash@npm:4.17.6"
+  checksum: f748c672f49c54ee631a0fab6f26d56ab99bd68a4fb91604b5d7525a72102dd1917209c12d7078c988a375edb5dc70ca600db05ac01785306fd64470048cd16c
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.14.167":
   version: 4.17.5
   resolution: "@types/lodash@npm:4.17.5"
@@ -26060,6 +26078,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.throttle@npm:4.1.1":
+  version: 4.1.1
+  resolution: "lodash.throttle@npm:4.1.1"
+  checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805
+  languageName: node
+  linkType: hard
+
 "lodash.truncate@npm:^4.4.2":
   version: 4.4.2
   resolution: "lodash.truncate@npm:4.4.2"
@@ -29610,28 +29635,28 @@ __metadata:
   resolution: "pie-storybook@workspace:apps/pie-storybook"
   dependencies:
     "@justeat/pie-design-tokens": 6.3.1
-    "@justeattakeaway/pie-assistive-text": 0.5.0
-    "@justeattakeaway/pie-button": 0.47.7
-    "@justeattakeaway/pie-card": 0.19.6
-    "@justeattakeaway/pie-checkbox": 0.7.0
-    "@justeattakeaway/pie-checkbox-group": 0.0.0
-    "@justeattakeaway/pie-chip": 0.7.0
-    "@justeattakeaway/pie-cookie-banner": 0.20.5
+    "@justeattakeaway/pie-assistive-text": 0.5.1
+    "@justeattakeaway/pie-button": 0.47.8
+    "@justeattakeaway/pie-card": 0.19.7
+    "@justeattakeaway/pie-checkbox": 0.7.1
+    "@justeattakeaway/pie-checkbox-group": 0.1.0
+    "@justeattakeaway/pie-chip": 0.7.1
+    "@justeattakeaway/pie-cookie-banner": 0.21.0
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-divider": 0.13.6
-    "@justeattakeaway/pie-form-label": 0.13.5
-    "@justeattakeaway/pie-icon-button": 0.28.8
+    "@justeattakeaway/pie-divider": 0.13.7
+    "@justeattakeaway/pie-form-label": 0.13.6
+    "@justeattakeaway/pie-icon-button": 0.28.9
     "@justeattakeaway/pie-icons-configs": 4.5.1
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-link": 0.17.6
-    "@justeattakeaway/pie-modal": 0.43.3
-    "@justeattakeaway/pie-notification": 0.9.2
-    "@justeattakeaway/pie-spinner": 0.6.5
-    "@justeattakeaway/pie-switch": 0.29.9
-    "@justeattakeaway/pie-tag": 0.9.7
-    "@justeattakeaway/pie-text-input": 0.23.0
-    "@justeattakeaway/pie-textarea": 0.3.0
-    "@justeattakeaway/pie-toast": 0.1.0
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-link": 0.17.7
+    "@justeattakeaway/pie-modal": 0.43.4
+    "@justeattakeaway/pie-notification": 0.9.3
+    "@justeattakeaway/pie-spinner": 0.6.6
+    "@justeattakeaway/pie-switch": 0.29.10
+    "@justeattakeaway/pie-tag": 0.9.8
+    "@justeattakeaway/pie-text-input": 0.23.1
+    "@justeattakeaway/pie-textarea": 0.3.1
+    "@justeattakeaway/pie-toast": 0.1.1
     "@storybook/addon-a11y": 7.6.18
     "@storybook/addon-designs": 7.0.9
     "@storybook/addon-essentials": 7.6.18
@@ -38578,7 +38603,7 @@ __metadata:
     "@angular/platform-browser": 15.2.0
     "@angular/platform-browser-dynamic": 15.2.0
     "@angular/router": 15.2.0
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     rxjs: 7.8.0
     tslib: 2.3.0
@@ -38595,8 +38620,8 @@ __metadata:
     "@babel/plugin-transform-runtime": 7.24.3
     "@babel/preset-env": 7.24.5
     "@babel/preset-react": 7.24.1
-    "@justeattakeaway/pie-button": 0.47.7
-    "@justeattakeaway/pie-cookie-banner": 0.20.5
+    "@justeattakeaway/pie-button": 0.47.8
+    "@justeattakeaway/pie-cookie-banner": 0.21.0
     "@justeattakeaway/pie-css": 0.12.1
     "@lit/react": 1.0.2
     babel-loader: 8
@@ -38613,7 +38638,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wc-next13@workspace:apps/examples/wc-next13"
   dependencies:
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     "@lit-labs/nextjs": 0.2.0
     "@lit/react": 1.0.5
@@ -38633,7 +38658,7 @@ __metadata:
   resolution: "wc-nuxt2@workspace:apps/examples/wc-nuxt2"
   dependencies:
     "@babel/preset-env": 7.24.5
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     babel-loader: 8
     core-js: 3.30.0
@@ -38648,7 +38673,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3"
   dependencies:
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     "@types/node": 18
     nuxt: 3.4.3
@@ -38660,7 +38685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wc-react17@workspace:apps/examples/wc-react17"
   dependencies:
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     "@lit/react": 1.0.2
     react: 17.0.2
@@ -38673,7 +38698,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wc-react18@workspace:apps/examples/wc-react18"
   dependencies:
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     "@lit/react": 1.0.5
     react: 18.3.1
@@ -38687,11 +38712,11 @@ __metadata:
   resolution: "wc-vanilla@workspace:apps/examples/wc-vanilla"
   dependencies:
     "@justeat/pie-design-tokens": 6.3.1
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
-    "@justeattakeaway/pie-icon-button": 0.28.8
-    "@justeattakeaway/pie-icons-webc": 0.24.1
-    "@justeattakeaway/pie-modal": 0.43.3
+    "@justeattakeaway/pie-icon-button": 0.28.9
+    "@justeattakeaway/pie-icons-webc": 0.24.2
+    "@justeattakeaway/pie-modal": 0.43.4
     vite: 4.5.3
   languageName: unknown
   linkType: soft
@@ -38700,7 +38725,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "wc-vue3@workspace:apps/examples/wc-vue3"
   dependencies:
-    "@justeattakeaway/pie-button": 0.47.7
+    "@justeattakeaway/pie-button": 0.47.8
     "@justeattakeaway/pie-css": 0.12.1
     "@types/node": 18.15.11
     "@vitejs/plugin-vue": 4.0.0