@justeattakeaway/pie-textarea 0.0.0-snapshot-release-20240708103513

package/README.md

@@ -0,0 +1,93 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-textarea">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-textarea.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-textarea)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-textarea
+
+`pie-textarea` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-textarea` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-textarea
+
+# yarn
+$ yarn add @justeattakeaway/pie-textarea
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieTextarea } from '@justeattakeaway/pie-textarea';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-textarea';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-textarea`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## 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. |
+| `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:
+
+```html
+<!-- Native HTML -->
+<pie-textarea></pie-textarea>
+
+<!-- JSX -->
+<PieTextarea></PieTextarea>
+```
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -0,0 +1,173 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/defs.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "type": {
+            "text": "['small', 'medium', 'large']"
+          },
+          "default": "['small', 'medium', 'large']"
+        },
+        {
+          "kind": "variable",
+          "name": "resizeModes",
+          "type": {
+            "text": "['auto', 'manual']"
+          },
+          "default": "['auto', 'manual']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n}",
+          "description": "Default values for optional properties that have default fallback values in the component."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resizeModes",
+          "declaration": {
+            "name": "resizeModes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PieTextarea",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "TextareaProps['disabled'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "resize",
+              "privacy": "public",
+              "attribute": "resize"
+            },
+            {
+              "kind": "field",
+              "name": "_textarea",
+              "type": {
+                "text": "HTMLTextAreaElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleResize",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "TextareaProps['disabled'] | undefined"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "resize",
+              "fieldName": "resize"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "RtlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "pie-textarea",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieTextarea",
+          "declaration": {
+            "name": "PieTextarea",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import type { CSSResult } from 'lit';
+import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import type { TemplateResult } from 'lit-html';
+
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+declare type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'disabled' | 'size' | 'resize'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export declare const defaultProps: DefaultProps;
+
+/**
+ * @tagname pie-textarea
+ */
+export declare class PieTextarea extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
+    size: "small" | "medium" | "large";
+    resize: "auto" | "manual";
+    private _textarea;
+    private handleResize;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+
+export declare const resizeModes: readonly ["auto", "manual"];
+
+export declare const sizes: readonly ["small", "medium", "large"];
+
+export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * 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];
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,68 @@
+import { LitElement as p, html as v, unsafeCSS as g } from "lit";
+import { property as c, query as b } from "lit/decorators.js";
+import { RtlMixin as u, validPropertyValues as h, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
+const m = `*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-d);--textarea-padding-block-base: var(--dt-spacing-c);--textarea-padding-block-large: var(--dt-spacing-d);--textarea-padding-block-small: var(--dt-spacing-b);--textarea-padding-block: var(--textarea-padding-block-base);--textarea-inner-height-base: calc(var(--textarea-line-height) * 2);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-interactive-form);--textarea-content-color: var(--dt-color-content-default);--textarea-height: calc(var(--textarea-inner-height-base) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));line-height:0}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);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)}.c-textareaWrapper textarea[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){.c-textareaWrapper textarea: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))))}}.c-textareaWrapper textarea:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper[data-pie-size=large]{--textarea-padding-block: var(--textarea-padding-block-large)}.c-textareaWrapper[data-pie-size=small]{--textarea-padding-block: var(--textarea-padding-block-small)}.c-textareaWrapper[data-pie-resize=manual]{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2))}@media (pointer: coarse){.c-textareaWrapper[data-pie-resize=manual]{--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}}.c-textareaWrapper[data-pie-resize=auto]{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: var(--textarea-height)}
+`, f = ["small", "medium", "large"], k = ["auto", "manual"], o = {
+  disabled: !1,
+  size: "medium",
+  resize: "auto"
+};
+var y = Object.defineProperty, W = Object.getOwnPropertyDescriptor, d = (n, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? W(e, i) : e, s = n.length - 1, l; s >= 0; s--)
+    (l = n[s]) && (a = (r ? l(e, i, a) : l(a)) || a);
+  return r && a && y(e, i, a), a;
+};
+const x = "pie-textarea";
+class t extends u(p) {
+  constructor() {
+    super(...arguments), this.size = o.size, this.resize = o.resize;
+  }
+  handleResize() {
+    this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`);
+  }
+  updated(e) {
+    this.resize === "auto" && (e.has("resize") || e.has("size")) && this.handleResize();
+  }
+  render() {
+    const {
+      disabled: e,
+      resize: i,
+      size: r
+    } = this;
+    return v`
+            <div
+                class="c-textareaWrapper"
+                data-test-id="pie-textarea-wrapper"
+                data-pie-size=${r}
+                data-pie-resize=${i}>
+                <textarea
+                    data-test-id="pie-textarea"
+                    @input=${this.handleResize}
+                    ?disabled=${e}
+                ></textarea>
+            </div>`;
+  }
+}
+t.shadowRootOptions = { ...p.shadowRootOptions, delegatesFocus: !0 };
+t.styles = g(m);
+d([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+d([
+  c({ type: String }),
+  h(x, f, o.size)
+], t.prototype, "size", 2);
+d([
+  c({ type: String }),
+  h(x, k, o.resize)
+], t.prototype, "resize", 2);
+d([
+  b("textarea")
+], t.prototype, "_textarea", 2);
+z(x, t);
+export {
+  t as PieTextarea,
+  o as defaultProps,
+  k as resizeModes,
+  f as sizes
+};

package/dist/react.d.ts

@@ -0,0 +1,66 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import type { CSSResult } from 'lit';
+import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import * as React_2 from 'react';
+import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import type { TemplateResult } from 'lit-html';
+
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+declare type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'disabled' | 'size' | 'resize'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export declare const defaultProps: DefaultProps;
+
+export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-textarea
+ */
+declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    disabled?: TextareaProps['disabled'];
+    size: "small" | "medium" | "large";
+    resize: "auto" | "manual";
+    private _textarea;
+    private handleResize;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLTextAreaElement>;
+
+export declare const resizeModes: readonly ["auto", "manual"];
+
+export declare const sizes: readonly ["small", "medium", "large"];
+
+export declare interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * 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];
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,20 @@
+import * as e from "react";
+import { createComponent as t } from "@lit/react";
+import { PieTextarea as a } from "./index.js";
+import { defaultProps as P, resizeModes as f, sizes as T } from "./index.js";
+import "lit";
+import "lit/decorators.js";
+import "@justeattakeaway/pie-webc-core";
+const r = t({
+  displayName: "PieTextarea",
+  elementClass: a,
+  react: e,
+  tagName: "pie-textarea",
+  events: {}
+}), x = r;
+export {
+  x as PieTextarea,
+  P as defaultProps,
+  f as resizeModes,
+  T as sizes
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@justeattakeaway/pie-textarea",
+  "description": "PIE Design System Textarea built using Web Components",
+  "version": "0.0.0-snapshot-release-20240708103513",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "custom-elements.json",
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "pieMetadata": {
+    "componentStatus": "alpha"
+  },
+  "scripts": {
+    "build": "run -T vite build",
+    "build:react-wrapper": "npx build-react-wrapper",
+    "create:manifest": "yarn cem analyze --litelement",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TEXTAREA} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual",
+    "test:browsers-setup": "npx playwright-lit-setup"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.16.0",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.23.0"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>

package/src/defs.ts

@@ -0,0 +1,37 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
+export const sizes = ['small', 'medium', 'large'] as const;
+export const resizeModes = ['auto', 'manual'] as const;
+
+export interface TextareaProps {
+    /**
+     * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * 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];
+}
+
+/**
+ * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
+ */
+type DefaultProps = ComponentDefaultPropsGeneric<TextareaProps, 'disabled' | 'size' | 'resize'>;
+
+/**
+ * Default values for optional properties that have default fallback values in the component.
+ */
+export const defaultProps: DefaultProps = {
+    disabled: false,
+    size: 'medium',
+    resize: 'auto',
+};

package/src/index.ts

@@ -0,0 +1,82 @@
+import {
+    LitElement, html, unsafeCSS, PropertyValues,
+} from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './textarea.scss?inline';
+import {
+    TextareaProps, defaultProps, sizes, resizeModes,
+} from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-textarea';
+
+/**
+ * @tagname pie-textarea
+ */
+export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
+    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+    @property({ type: Boolean, reflect: true })
+    public disabled?: TextareaProps['disabled'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size = defaultProps.size;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
+    public resize = defaultProps.resize;
+
+    @query('textarea')
+    private _textarea!: HTMLTextAreaElement;
+
+    private handleResize () {
+        if (this.resize === 'auto') {
+            this._textarea.style.height = 'auto';
+            this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`; // +2 for border thicknesses
+        }
+    }
+
+    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-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>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieTextarea);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieTextarea;
+    }
+}

package/src/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieTextarea as PieTextareaLit } from './index';
+import { TextareaProps } from './defs';
+
+export * from './defs';
+
+const PieTextareaReact = createComponent({
+    displayName: 'PieTextarea',
+    elementClass: PieTextareaLit,
+    react: React,
+    tagName: 'pie-textarea',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>
+
+export const PieTextarea = PieTextareaReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TextareaProps>
+    & React.RefAttributes<PieTextareaLit> & ReactBaseType>;

package/src/textarea.scss

@@ -0,0 +1,93 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+// 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: calc(var(--dt-font-body-l-line-height) * 1px);
+  --textarea-border-thickness: 1px;
+  --textarea-resize: none;
+  --textarea-padding-inline: var(--dt-spacing-d);
+  --textarea-padding-block-base: var(--dt-spacing-c);
+  --textarea-padding-block-large: var(--dt-spacing-d);
+  --textarea-padding-block-small: var(--dt-spacing-b);
+  --textarea-padding-block: var(--textarea-padding-block-base);
+  --textarea-inner-height-base: calc(var(--textarea-line-height) * 2);
+  --textarea-background-color: var(--dt-color-container-default);
+  --textarea-border-color: var(--dt-color-interactive-form);
+  --textarea-content-color: var(--dt-color-content-default);
+
+  // Default height is two lines of text
+  --textarea-height: calc(var(--textarea-inner-height-base) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+
+  line-height: 0; // Remove once there is text outside the textarea
+
+  textarea {
+    font-size: calc(var(--dt-font-body-l-size) * 1px);
+    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-padding-block: var(--textarea-padding-block-large);
+  }
+
+  &[data-pie-size="small"] {
+    --textarea-padding-block: var(--textarea-padding-block-small);
+  }
+
+  &[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);
+  }
+}