@noxlovette/material 0.9.3 → 0.10.0

package/dist/components/containers/carousel/theme.js

@@ -13,7 +13,7 @@ export const carousel = tv({
         snapPoint: 'pointer-events-none absolute top-spacing-0 h-px w-px snap-start',
         viewport: 'sticky left-spacing-0 h-full overflow-clip',
         item: [
-            'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-[28px] text-start',
+            'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-xl text-start',
             'md-sys-state-focus-indicator transition-shadow md-sys-motion-effects'
         ],
         content: 'h-full'

package/dist/components/containers/context-menu/theme.js

@@ -24,9 +24,9 @@ export const contextMenu = tv({
         itemContent: 'flex flex-1 flex-col gap-spacing-25 min-w-spacing-0',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        icon: 'size-spacing-250 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
+        icon: 'size-(--text-icon-20) text-icon-20 text-md-sys-color-on-surface-variant shrink-0',
         separator: 'my-spacing-50 h-px bg-md-sys-color-outline-variant',
-        rightSlot: 'ml-auto size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
+        rightSlot: 'ml-auto size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant'
     },
     variants: {
         selected: {

package/dist/components/containers/dialogue/theme.js

@@ -2,7 +2,7 @@ import { tv } from '../../../utils/tv.js';
 export const dialogue = tv({
     slots: {
         base: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
-        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
+        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-xl p-spacing-300 gap-spacing-200',
         headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
         supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'

package/dist/components/containers/list/theme.d.ts

@@ -4,17 +4,17 @@ export type ListMediaVariants = VariantProps<typeof listMedia>;
 export declare const list: import("tailwind-variants").TVReturnType<{
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined, "flex w-full flex-col [--li-bottom:initial] [--li-top:initial]", {
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         standard: "";
-        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
+        segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
     };
 }, undefined>>;
 export declare const listItem: import("tailwind-variants").TVReturnType<{

package/dist/components/containers/list/theme.js

@@ -19,7 +19,7 @@ export const list = tv({
         variant: {
             standard: '',
             // 2dp between segments; outer corners 16dp (md.comp.list.container.shape).
-            segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]'
+            segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]'
         }
     },
     defaultVariants: { variant: 'standard' }
@@ -28,7 +28,7 @@ export const listItem = tv({
     slots: {
         base: [
             'relative isolate flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
-            '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
+            '[--li-shape:var(--radius-xs)] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
             'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
             'text-md-sys-color-on-surface-variant'
         ],
@@ -69,17 +69,17 @@ export const listItem = tv({
             true: {
                 base: [
                     'cursor-pointer outline-none',
-                    'hover:[--li-shape:0.75rem]',
-                    'focus-visible:[--li-shape:1rem]',
+                    'hover:[--li-shape:var(--radius-md)]',
+                    'focus-visible:[--li-shape:var(--radius-lg)]',
                     'focus-visible:outline-solid focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-md-sys-color-secondary',
-                    'active:[--li-shape:1rem]'
+                    'active:[--li-shape:var(--radius-lg)]'
                 ]
             },
             false: ''
         },
         selected: {
             true: {
-                base: 'text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
+                base: 'text-md-sys-color-on-secondary-container [--li-shape:var(--radius-lg)] hover:[--li-shape:var(--radius-lg)]',
                 leading: 'text-md-sys-color-on-secondary-container',
                 overline: 'text-md-sys-color-on-secondary-container',
                 headline: 'text-md-sys-color-on-secondary-container',
@@ -104,10 +104,10 @@ export const listItem = tv({
         expanded: {
             true: {
                 // The expanded group is one 16dp container: header on top, nested items below.
-                base: '[--li-top:1rem] [--li-bottom:var(--li-shape)]',
+                base: '[--li-top:var(--radius-lg)] [--li-bottom:var(--li-shape)]',
                 expandIcon: 'rotate-180 bg-md-sys-color-surface-container',
                 region: 'grid-rows-[1fr]',
-                nested: '[&>:last-child]:[--li-bottom:1rem]'
+                nested: '[&>:last-child]:[--li-bottom:var(--radius-lg)]'
             },
             false: {
                 expandIcon: 'bg-md-sys-color-surface',

package/dist/components/containers/menu/theme.js

@@ -16,11 +16,11 @@ export const menu = tv({
       focus-visible:outline-md-sys-color-primary
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
-        icon: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
-        indicator: 'size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
+        icon: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
+        indicator: 'size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant',
         itemContent: 'flex flex-1 flex-col gap-spacing-50 text-left min-w-spacing-0',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        rightSlot: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
+        rightSlot: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
         groupHeading: 'px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium text-md-sys-color-primary'
     },
     variants: {

package/dist/components/date/theme.js

@@ -15,7 +15,7 @@ export const dateRangeField = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         trailingIcon: `
       mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
@@ -124,7 +124,7 @@ export const dateField = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         trailingIcon: `
       mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant

package/dist/components/forms/checkbox/theme.js

@@ -4,7 +4,7 @@ export const checkbox = tv({
         root: 'group inline-flex size-spacing-500 shrink-0 select-none items-center justify-center cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
-        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
+        box: 'absolute inset-[11px] rounded-xs border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
         checkIcon: 'pointer-events-none absolute inset-spacing-0 m-auto size-spacing-175 text-md-sys-color-on-primary opacity-0 scale-75',
         indeterminateIcon: 'pointer-events-none absolute inset-spacing-0 m-auto block h-spacing-25 w-spacing-150 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
         label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'

package/dist/components/forms/command/theme.js

@@ -25,7 +25,7 @@ export const commandItem = tv({
     slots: {
         base: [
             'cursor-default select-none outline-none',
-            'data-selected:[--li-shape:0.75rem] data-selected:bg-md-sys-color-on-surface/10'
+            'data-selected:[--li-shape:var(--radius-md)] data-selected:bg-md-sys-color-on-surface/10'
         ]
     },
     // The list's own surface fill is a variant, so it's replaced here, not in the base.

package/dist/components/forms/index.d.ts

@@ -6,6 +6,7 @@ export * from './search/index.js';
 export * from './select/index.js';
 export * from './slider/index.js';
 export * from './switch/index.js';
+export * from './textarea/index.js';
 export * from './textfield/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';

package/dist/components/forms/index.js

@@ -8,6 +8,7 @@ export * from './search/index.js';
 export * from './select/index.js';
 export * from './slider/index.js';
 export * from './switch/index.js';
+export * from './textarea/index.js';
 export * from './textfield/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';

package/dist/components/forms/search/theme.js

@@ -38,7 +38,7 @@ export const searchView = tv({
         // keys are on gets the M3 focus indicator, drawn inside the item, and a focused item's shape.
         // `outline-solid` is load-bearing: ListItem's `outline-none` sets --tw-outline-style to none,
         // which `outline-3` reads, so without it the ring has a width and colour but no style.
-        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:1rem]'
+        results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:var(--radius-lg)]'
     },
     variants: {
         hasTrailing: { true: '', false: { input: 'me-spacing-150' } }

package/dist/components/forms/select/theme.js

@@ -22,12 +22,12 @@ export const select = tv({
         leadingIcon: `
       text-md-sys-color-on-surface-variant size-spacing-300
       group-has-[[data-state=open]]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
     `,
         dropdownIcon: `
       mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
       group-data-[state=open]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error z-20 text-icon-24
       transition-transform md-sys-motion-fast-spatial
       group-data-[state=open]:rotate-180
     `,

package/dist/components/forms/slider/Slider.svelte

@@ -36,6 +36,9 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
     class: className,
     dir,
     id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
     ...extra
   }: SliderProps = $props();
 
@@ -216,8 +219,13 @@ the track, a new `value` from outside) springs to it on the fast spatial spring.
 
       <Slider.Thumb index={0}>
         {#snippet child({ props: thumbProps, active })}
+          <!-- The thumb is the focusable role="slider" element, so it carries the accessible name. -->
           <div
             {...thumbProps}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            aria-valuetext={format(value)}
             class={cls.handle()}
             data-active={active || undefined}
             style="{start}: {center(pos)}; {extent}: {handlePx}px"

package/dist/components/forms/slider/theme.js

@@ -40,23 +40,23 @@ export const slider = tv({
             s: { root: '[--track:1.5rem] [--handle:2.75rem] [--outer:var(--radius-sm)]' },
             m: {
                 root: '[--track:2.5rem] [--handle:3.25rem] [--outer:var(--radius-md)]',
-                iconGlyph: 'size-spacing-300 text-[24px]'
+                iconGlyph: 'size-(--text-icon-24) text-icon-24'
             },
             l: {
                 root: '[--track:3.5rem] [--handle:4.25rem] [--outer:var(--radius-lg)]',
-                iconGlyph: 'size-spacing-300 text-[24px]'
+                iconGlyph: 'size-(--text-icon-24) text-icon-24'
             },
             xl: {
                 root: '[--track:6rem] [--handle:6.75rem] [--outer:var(--radius-xl)]',
-                iconGlyph: 'size-spacing-400 text-[32px]'
+                iconGlyph: 'size-(--text-icon-32) text-icon-32'
             }
         },
         vertical: {
             false: {
                 root: 'h-[var(--handle)] w-full min-w-40',
                 track: 'top-1/2 h-[var(--track)] -translate-y-1/2',
-                activeTrack: 'left-spacing-0 rounded-l-[var(--outer)] rounded-r-[2px]',
-                inactiveTrack: 'right-spacing-0 rounded-l-[2px] rounded-r-[var(--outer)]',
+                activeTrack: 'left-spacing-0 rounded-l-(--outer) rounded-r-(--md-comp-slider-inner-corner)',
+                inactiveTrack: 'right-spacing-0 rounded-l-(--md-comp-slider-inner-corner) rounded-r-(--outer)',
                 stop: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
                 icon: 'top-1/2 -translate-y-1/2',
                 handle: 'top-spacing-0 h-full -translate-x-1/2',
@@ -65,8 +65,8 @@ export const slider = tv({
             true: {
                 root: 'h-full min-h-40 w-[var(--handle)]',
                 track: 'left-1/2 w-[var(--track)] -translate-x-1/2',
-                activeTrack: 'bottom-spacing-0 rounded-t-[2px] rounded-b-[var(--outer)]',
-                inactiveTrack: 'top-spacing-0 rounded-t-[var(--outer)] rounded-b-[2px]',
+                activeTrack: 'bottom-spacing-0 rounded-t-(--md-comp-slider-inner-corner) rounded-b-(--outer)',
+                inactiveTrack: 'top-spacing-0 rounded-t-(--outer) rounded-b-(--md-comp-slider-inner-corner)',
                 stop: 'left-1/2 -translate-x-1/2 translate-y-1/2',
                 icon: 'left-1/2 -translate-x-1/2',
                 handle: 'left-spacing-0 w-full translate-y-1/2',

package/dist/components/forms/slider/types.d.ts

@@ -54,4 +54,17 @@ export type SliderProps = Omit<SliderVariants, 'active'> & Omit<HTMLAttributes<H
      * Orientation of the slider.
      */
     vertical?: boolean;
+    /**
+     * Accessible name for the slider. Applied to the focusable thumb (`role="slider"`), not the
+     * root, so screen readers announce it. Required unless `aria-labelledby` is set.
+     */
+    'aria-label'?: string | null;
+    /**
+     * Id of the element that labels the slider. Applied to the thumb, like `aria-label`.
+     */
+    'aria-labelledby'?: string | null;
+    /**
+     * Id of the element that describes the slider. Applied to the thumb.
+     */
+    'aria-describedby'?: string | null;
 };

package/dist/components/forms/textarea/Textarea.mdx

@@ -0,0 +1,63 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TextareaStories from './Textarea.stories.svelte';
+
+<Meta of={TextareaStories} />
+
+<Title />
+
+<Subtitle>A text field for longer, multi-line input.</Subtitle>
+
+[M3 text field guidelines](https://m3.material.io/components/text-fields/guidelines) ·
+`import { Textarea } from '@noxlovette/material';`
+
+<Canvas of={TextareaStories.Playground} />
+
+<Controls of={TextareaStories.Playground} />
+
+## Not an M3 component
+
+M3 has no textarea. It has a _multi-line text field_, and that is what this is: the
+[`Textfield`](?path=/docs/forms-textfield--docs) with a `<textarea>` inside. Everything a text
+field does carries over (filled and outlined containers, the floating label and notch, icons,
+supporting text, required, error, disabled). Only these change:
+
+| Part          | Textfield                 | Textarea                                                |
+| ------------- | ------------------------- | ------------------------------------------------------- |
+| Height        | Fixed 56dp                | 56dp minimum, then grows with the content               |
+| Resting label | Centered vertically       | On the first line of text                               |
+| Icons         | Centered vertically       | Beside the first line of text                           |
+| Filled input  | Centered, 16dp top offset | 24dp above the first line, 8dp below the last           |
+| Counter       | Only with supporting text | Whenever `characterLimit` is set; over the limit errors |
+
+Use `Textfield` for anything that fits on one line (names, emails, search). Use `Textarea` for
+free text: messages, descriptions, notes, feedback.
+
+<Canvas of={TextareaStories.FilledAndOutlined} />
+
+## Height
+
+`rows` is the minimum height in lines (default 3). The field grows as the user types, up to
+`maxRows`, and scrolls after that. Leave `maxRows` out to grow without limit, or set it equal to
+`rows` for a fixed-height field. There's no resize handle: the field sizes itself.
+
+Growing uses CSS `field-sizing: content`, with a script fallback for browsers without it.
+
+<Canvas of={TextareaStories.Growing} />
+
+## Character limit
+
+`characterLimit` shows a `12 / 160` counter below the field. Going over the limit puts the field
+in its error state but doesn't block typing, so pasted text isn't silently cut. Pass the native
+`maxlength` too if the limit is hard.
+
+<Canvas of={TextareaStories.CharacterLimit} />
+
+## Accessibility
+
+- **Label.** The floating label is a real `<label for>` tied to the textarea's id.
+- **Descriptions.** The supporting text and the counter are linked with `aria-describedby`, added
+  to any `aria-describedby` you pass.
+- **Errors.** `error`, or going over `characterLimit`, sets `aria-invalid`. Say what's wrong in
+  `supportingText`, not just with color.
+- **Required.** `required` sets `required` and `aria-required`, and shows an asterisk that screen
+  readers skip.

package/dist/components/forms/textarea/Textarea.stories.svelte

@@ -0,0 +1,99 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Forms/Textarea',
+    component: Textarea,
+    argTypes: {
+      label: { control: 'text' },
+      variant: { control: 'select', options: ['filled', 'outlined'] },
+      rows: { control: 'number' },
+      maxRows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' },
+      required: { control: 'boolean' },
+      characterLimit: { control: 'number' }
+    },
+    args: {
+      label: 'Message',
+      variant: 'outlined',
+      rows: 3,
+      disabled: false,
+      error: false,
+      required: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="p-spacing-300 max-w-md">
+      <Textarea {...args} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Filled and outlined" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-md flex-col">
+    <Textarea variant="filled" label="Filled" />
+    <Textarea variant="outlined" label="Outlined" />
+    <Textarea
+      variant="filled"
+      label="Filled with value"
+      value={'Line one\nLine two\nLine three\nLine four grows the field.'}
+    />
+    <Textarea
+      variant="outlined"
+      label="Outlined with value"
+      value={'Line one\nLine two\nLine three\nLine four grows the field.'}
+    />
+  </div>
+</Story>
+
+<Story name="Growing" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-md flex-col">
+    <Textarea label="Grows without limit" rows={2} />
+    <Textarea label="Grows to 5 lines, then scrolls" rows={2} maxRows={5} />
+    <Textarea label="Fixed at 4 lines" rows={4} maxRows={4} />
+  </div>
+</Story>
+
+<Story name="Character Limit" asChild>
+  <div class="p-spacing-300 max-w-md">
+    <Textarea label="Bio" characterLimit={160} value="">
+      {#snippet supportingText()}
+        Tell people a little about yourself.
+      {/snippet}
+    </Textarea>
+  </div>
+</Story>
+
+<Story name="With Icons" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-md flex-col">
+    <Textarea
+      label="Notes"
+      leadingIconProps={{ name: 'edit_note' }}
+      trailingIconProps={{ name: 'close' }}
+    />
+    <Textarea
+      variant="filled"
+      label="Notes"
+      leadingIconProps={{ name: 'edit_note' }}
+      trailingIconProps={{ name: 'close' }}
+    />
+  </div>
+</Story>
+
+<Story name="States" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-md flex-col">
+    <Textarea label="Required" required />
+    <Textarea label="Error" error value="Not quite right">
+      {#snippet supportingText()}
+        Describe the problem in at least 20 characters.
+      {/snippet}
+    </Textarea>
+    <Textarea label="Disabled" disabled value="Can't edit" />
+    <Textarea variant="filled" label="Disabled filled" disabled value="Can't edit" />
+  </div>
+</Story>

package/dist/components/forms/textarea/Textarea.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Textarea from './Textarea.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;

package/dist/components/forms/textarea/Textarea.svelte

@@ -0,0 +1,142 @@
+<!--
+@component
+Multi-line text field.
+
+M3 has no textarea spec, only a multi-line text field, so this is the `Textfield` with a
+`<textarea>` inside: the same filled and outlined containers, floating label and supporting
+text. It grows with its content from `rows` to `maxRows` lines, then scrolls.
+
+@see https://m3.material.io/components/text-fields/guidelines
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import type { Attachment } from 'svelte/attachments';
+  import { useId } from 'bits-ui';
+  import { Icon } from '../../../utils/index.js';
+  import { ButtonIcon } from '../../buttons/index.js';
+  import { textarea } from './theme.js';
+  import type { TextareaProps } from './types.js';
+
+  let {
+    value = $bindable(),
+    supportingText,
+    leadingIconProps,
+    trailingIconProps,
+    placeholder = '',
+    label,
+    id = useId(),
+    class: className,
+    characterLimit,
+    disabled = false,
+    error = false,
+    required = false,
+    variant = 'outlined',
+    rows = 3,
+    maxRows,
+    trailingOnClick,
+    trailingIcon,
+    ...restProps
+  }: TextareaProps = $props();
+
+  const length = $derived(value?.length ?? 0);
+  const overLimit = $derived(characterLimit != null && length > characterLimit);
+  const invalid = $derived(!!error || overLimit);
+
+  const cls = $derived(
+    textarea({ disabled, error: invalid, variant, leadingIcon: !!leadingIconProps })
+  );
+
+  const supportingId = $derived(`${id}-supporting`);
+  const counterId = $derived(`${id}-counter`);
+  const describedBy = $derived(
+    clsx(
+      restProps['aria-describedby'],
+      supportingText && supportingId,
+      characterLimit != null && counterId
+    ) || undefined
+  );
+
+  const sizeStyle = $derived(
+    `min-height: ${rows}lh;` + (maxRows != null ? ` max-height: ${Math.max(rows, maxRows)}lh;` : '')
+  );
+
+  /* `field-sizing: content` does the growing where it's supported; elsewhere, fit the height to
+     the content on every change, including a `value` set from outside. */
+  let textareaEl = $state<HTMLTextAreaElement>();
+  const fieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+
+  const autoGrow: Attachment<HTMLTextAreaElement> = (node) => {
+    if (fieldSizing) return;
+    void value;
+    node.style.height = 'auto';
+    node.style.height = `${node.scrollHeight}px`;
+  };
+
+  /* The wrapper's padding sits outside the textarea; a press there still focuses it. */
+  function focusTextarea(event: PointerEvent) {
+    if (event.target !== event.currentTarget || disabled) return;
+    event.preventDefault();
+    textareaEl?.focus();
+  }
+</script>
+
+<div class={clsx('relative w-full', className)}>
+  <div class={cls.base()}>
+    {#if leadingIconProps}
+      <Icon class={cls.leadingIcon()} {...leadingIconProps} />
+    {/if}
+
+    <div class={cls.inputWrapper()} onpointerdown={focusTextarea} role="presentation">
+      <textarea
+        bind:this={textareaEl}
+        bind:value
+        {id}
+        class={cls.input()}
+        style={sizeStyle}
+        rows={1}
+        aria-invalid={invalid}
+        aria-required={required}
+        {required}
+        {disabled}
+        {placeholder}
+        {...restProps}
+        aria-describedby={describedBy}
+        {@attach autoGrow}></textarea>
+
+      <label class={cls.label()} for={id}>
+        {label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span>{/if}
+      </label>
+    </div>
+
+    {#if trailingIcon}
+      {@render trailingIcon()}
+    {:else if trailingIconProps}
+      <ButtonIcon
+        variant="standard"
+        type="button"
+        onclick={trailingOnClick}
+        class={cls.trailingIcon()}
+        iconProps={trailingIconProps}
+      ></ButtonIcon>
+    {/if}
+
+    {#if variant === 'outlined'}
+      <fieldset class={cls.fieldset()} aria-hidden="true">
+        <legend class={cls.legend()}>
+          <span class={cls.legendLabel()}>{label}{required ? '*' : ''}</span>
+        </legend>
+      </fieldset>
+    {/if}
+  </div>
+
+  {#if supportingText || characterLimit != null}
+    <div class={cls.supportingText()}>
+      {#if supportingText}
+        <p id={supportingId}>{@render supportingText()}</p>
+      {/if}
+      {#if characterLimit != null}
+        <p id={counterId} class={cls.counter()}>{length} / {characterLimit}</p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/forms/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TextareaProps } from './types.js';
+/**
+ * Multi-line text field.
+ *
+ * M3 has no textarea spec, only a multi-line text field, so this is the `Textfield` with a
+ * `<textarea>` inside: the same filled and outlined containers, floating label and supporting
+ * text. It grows with its content from `rows` to `maxRows` lines, then scrolls.
+ *
+ * @see https://m3.material.io/components/text-fields/guidelines
+ */
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/forms/textarea/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Textarea } from './Textarea.svelte';

package/dist/components/forms/textarea/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Textarea } from './Textarea.svelte';