@labcat2020/rocketship-svelte 0.2.0 → 0.3.0

package/README.md

@@ -17,6 +17,9 @@ Components are either copy-style ports of their Astro originals, or Svelte-first
 | `Table`      | `@labcat2020/rocketship-svelte/components/Table`      | — (Svelte-first)   |
 | `Field`      | `@labcat2020/rocketship-svelte/components/Field`      | — (Svelte-first)   |
 | `Label`      | `@labcat2020/rocketship-svelte/components/Label`      | — (Svelte-first)   |
+| `Input`      | `@labcat2020/rocketship-svelte/components/Input`      | — (Svelte-first)   |
+| `Textarea`   | `@labcat2020/rocketship-svelte/components/Textarea`   | — (Svelte-first)   |
+| `Select`     | `@labcat2020/rocketship-svelte/components/Select`     | — (Svelte-first)   |
 | `Disclosure` | `@labcat2020/rocketship-svelte/components/Disclosure` | — (Svelte-first)   |
 | `Accordion`  | `@labcat2020/rocketship-svelte/components/Accordion`  | — (Svelte-first)   |
 | `Figure`     | `@labcat2020/rocketship-svelte/components/Figure`     | — (Svelte-first)   |
@@ -56,6 +59,9 @@ Each component spreads unknown attributes onto its rendered element and composes
 | `Typography` | `as` (`div`, `section`, `article`), `html`, `class`                                                                                           |
 | `Button`     | `as` (`button`, `a`), `href`, `variant` (`primary`, `secondary`, `ghost`), `size` (`small`, `medium`, `large`), `disabled`, `type`, `class`   |
 | `Alert`      | `as` (`div`, `section`, `aside`, `article`), `variant` (`info`, `success`, `warning`, `error`), `title`, `titleSlot` snippet, `role`, `class` |
+| `Input`      | `type` (`text`, `email`, `password`, `number`, `search`, `url`, `tel`), `size` (`sm`, `md`, `lg`), `invalid`, `value` (`bind:value`), `class` |
+| `Textarea`   | `size` (`sm`, `md`, `lg`), `invalid`, `value` (`bind:value`), `class`                                                                         |
+| `Select`     | `size` (`sm`, `md`, `lg`), `invalid`, `placeholder`, `value` (`bind:value`), `children` snippet, `class`                                      |
 | `Figure`     | `as` (`figure`, `div`), `variant` (`default`, `bordered`), `captionAlign` (`start`, `center`), `caption`, `captionSlot` snippet, `class`      |
 
 ### `Typography` `html` prop
@@ -64,6 +70,56 @@ Each component spreads unknown attributes onto its rendered element and composes
 
 **Sanitize before you pass it.** The prop renders trusted HTML verbatim and does not sanitize its input, so it is only safe for content you control or content already sanitized at the boundary. Never pass unsanitized user input, request data, or third-party HTML through it — run it through a sanitizer (for example DOMPurify) first, or render structured markup with the `children` snippet instead.
 
+### `Field`, `Input` and `Textarea`
+
+`Field` hands each control its wiring through the `children` snippet: `id`, `aria-describedby`, `aria-invalid`, `required` and `disabled`. Spread that object onto `Input` or `Textarea` so the label, hint and error text stay linked to the control.
+
+```svelte
+<script lang="ts">
+  import Field from '@labcat2020/rocketship-svelte/components/Field'
+  import Input from '@labcat2020/rocketship-svelte/components/Input'
+  import Textarea from '@labcat2020/rocketship-svelte/components/Textarea'
+
+  let email = $state('')
+  let notes = $state('')
+</script>
+
+<Field label="Work email" hint="We send deployment alerts here.">
+  {#snippet children(control)}
+    <Input {...control} type="email" bind:value={email} />
+  {/snippet}
+</Field>
+
+<Field label="Release notes" error="Add at least ten characters.">
+  {#snippet children(control)}
+    <Textarea {...control} rows="3" bind:value={notes} />
+  {/snippet}
+</Field>
+```
+
+Both controls also work standalone. `invalid` raises `aria-invalid` and applies the error styling, and a size modifier (`sm`, `md`, `lg`) sets the type scale and control height. A `Field` error flows into the control's `aria-invalid` and its modifier, so the styling follows the error text Field renders.
+
+### `Select`
+
+`Select` wraps a native `<select>` and takes its options through the `children` snippet, plain `<option>` and `<optgroup>` included. There is no custom listbox, so keyboard, screen-reader and mobile behaviour are the platform's.
+
+```svelte
+<script lang="ts">
+  import Select from '@labcat2020/rocketship-svelte/components/Select'
+
+  let team = $state('')
+</script>
+
+<Select bind:value={team} placeholder="Choose a team" name="team">
+  <optgroup label="Engineering">
+    <option value="frontend">Frontend</option>
+    <option value="backend">Backend</option>
+  </optgroup>
+</Select>
+```
+
+`placeholder` renders a disabled option with an empty value, so it reads as an unset field. Once a real option is chosen the placeholder cannot be selected again; a parent can still reset the field by writing `''`. `size` accepts `sm`, `md` or `lg`; a number is passed through to the native `size` attribute, which renders a listbox instead of a dropdown, in which case no chevron is drawn.
+
 ## Install
 
 ```bash

package/dist/index.d.ts

@@ -2,12 +2,18 @@ export { default as Accordion } from './components/Accordion.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as Figure } from './components/Figure.svelte';
+export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as Select } from './components/Select.svelte';
 export { default as Table } from './components/Table.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
 export type * from './components/Accordion.svelte';
 export type * from './components/Disclosure.svelte';
 export type * from './components/Field.svelte';
 export type * from './components/Figure.svelte';
+export type * from './components/Input.svelte';
 export type * from './components/Label.svelte';
+export type * from './components/Select.svelte';
 export type * from './components/Table.svelte';
+export type * from './components/Textarea.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAClE,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,8BAA8B,CAAA"}

package/dist/index.js

@@ -3,5 +3,8 @@ export { default as Accordion } from './components/Accordion.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as Figure } from './components/Figure.svelte';
+export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as Select } from './components/Select.svelte';
 export { default as Table } from './components/Table.svelte';
+export { default as Textarea } from './components/Textarea.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labcat2020/rocketship-svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "Rocketship Svelte port — Svelte 5 components that reuse the Rocketship design system (tokens, mixins, base resets)",
@@ -28,8 +28,11 @@
     "./components/Field": "./src/components/Field.svelte",
     "./components/Figure": "./src/components/Figure.svelte",
     "./components/Grid": "./src/components/Grid.svelte",
+    "./components/Input": "./src/components/Input.svelte",
     "./components/Label": "./src/components/Label.svelte",
+    "./components/Select": "./src/components/Select.svelte",
     "./components/Table": "./src/components/Table.svelte",
+    "./components/Textarea": "./src/components/Textarea.svelte",
     "./components/Typography": "./src/components/Typography.svelte"
   },
   "files": [

package/src/components/Input.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'url' | 'tel'
+  export type InputSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    type?: InputType
+    size?: InputSize
+    invalid?: boolean
+    class?: string
+    value?: string | number
+  } & Omit<HTMLInputAttributes, 'size' | 'type' | 'value'>
+
+  let {
+    type = 'text',
+    size = 'md',
+    invalid = false,
+    class: className = '',
+    value = $bindable(''),
+    ...attrs
+  }: Props = $props()
+
+  // Field passes its wiring (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`) to
+  // the `children` snippet, which spreads it onto this control. An explicit attribute wins over the
+  // `invalid` prop, so the error state Field reports is the one the element announces and styles.
+  const ariaInvalid = $derived(attrs['aria-invalid'] ?? (invalid ? 'true' : undefined))
+  // Only the hard `true` state drives the styling; `spelling`/`grammar` are announced but not
+  // painted as an error, and an explicit `aria-invalid="false"` always wins over the prop.
+  const isInvalid = $derived(ariaInvalid === true || ariaInvalid === 'true')
+
+  const classes = $derived(
+    ['rs-input', `rs-input--${size}`, isInvalid ? 'rs-input--invalid' : undefined, className]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<input {...attrs} aria-invalid={ariaInvalid} bind:value class={classes} {type} />
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-input {
+      // Size locals live on the block so a size modifier only reassigns them; `--rs-input-font-size`
+      // stays unset here so a consumer can override one control without touching the others.
+      --rs-input-font-size-sm: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-input-font-size-md: var(--rs-font-size-md, #{to-rem(16)});
+      --rs-input-font-size-lg: var(--rs-font-size-lg, #{to-rem(18)});
+      --rs-input-min-height-sm: 34px;
+      --rs-input-min-height-md: 40px;
+      --rs-input-min-height-lg: 48px;
+      --rs-input-padding-inline-sm: var(--rs-space-2, 8px);
+      --rs-input-padding-inline-md: var(--rs-space-3, 12px);
+      --rs-input-padding-inline-lg: var(--rs-space-4, 16px);
+      background: var(--rs-input-bg, var(--rs-color-surface, #ffffff));
+      border: var(--rs-input-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-input-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-input-border-radius, var(--rs-radius-sm, 6px));
+      box-sizing: border-box;
+      color: var(--rs-input-color, var(--rs-color-fg, #131a2f));
+      display: block;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-input-font-size, var(--rs-input-font-size-md));
+      line-height: var(--rs-line-height-base, 1.45);
+      min-height: var(--rs-input-min-height, var(--rs-input-min-height-md));
+      padding-block: var(--rs-input-padding-block, var(--rs-space-2, 8px));
+      padding-inline: var(--rs-input-padding-inline, var(--rs-input-padding-inline-md));
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--rs-input-placeholder-color, var(--rs-color-muted, #4f5b7d));
+      }
+
+      &:focus-visible {
+        border-color: var(--rs-input-focus-border-color, var(--rs-color-accent, #2f5bdb));
+        outline: 2px solid var(--rs-input-focus-ring-color, var(--rs-color-focus-ring, #296dff));
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+
+      &--sm {
+        --rs-input-font-size: var(--rs-input-font-size-sm);
+        --rs-input-min-height: var(--rs-input-min-height-sm);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-sm);
+      }
+
+      &--md {
+        --rs-input-font-size: var(--rs-input-font-size-md);
+        --rs-input-min-height: var(--rs-input-min-height-md);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-md);
+      }
+
+      &--lg {
+        --rs-input-font-size: var(--rs-input-font-size-lg);
+        --rs-input-min-height: var(--rs-input-min-height-lg);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
+      }
+
+      // The error state owns a coordinated colour set, so the modifier reassigns the locals the base
+      // rule already reads instead of restating background, border and colour.
+      &--invalid {
+        --rs-input-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-input-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-input-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-input-font-size-sm: var(--rs-font-size-md, #{to-rem(16)});
+        --rs-input-font-size-md: var(--rs-font-size-lg, #{to-rem(18)});
+        --rs-input-font-size-lg: var(--rs-font-size-xl, #{to-rem(20)});
+        --rs-input-min-height-sm: 40px;
+        --rs-input-min-height-md: 44px;
+        --rs-input-min-height-lg: 52px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/Select.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLSelectAttributes } from 'svelte/elements'
+
+  export type SelectSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    size?: SelectSize | number
+    invalid?: boolean
+    placeholder?: string
+    class?: string
+    value?: string
+    children?: Snippet
+  } & Omit<HTMLSelectAttributes, 'size' | 'value' | 'placeholder' | 'multiple'>
+
+  // `size` is a Rocketship variant, but the native attribute of the same name is a visible row
+  // count that renders a listbox, so a non-variant value is forwarded to the element untouched.
+  const isSelectSize = (candidate: SelectSize | number | undefined): candidate is SelectSize =>
+    candidate === 'sm' || candidate === 'md' || candidate === 'lg'
+
+  let {
+    size = 'md',
+    invalid = false,
+    placeholder,
+    class: className = '',
+    value = $bindable(''),
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const variantSize = $derived(isSelectSize(size) ? size : 'md')
+  const nativeSize = $derived(isSelectSize(size) ? undefined : size)
+
+  // Field passes its wiring (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`) to
+  // the `children` snippet, which spreads it onto this component and so onto the `<select>`. An
+  // explicit attribute wins over the `invalid` prop, so the state the element announces is the one
+  // it is styled with.
+  const ariaInvalid = $derived(attrs['aria-invalid'] ?? (invalid ? 'true' : undefined))
+  // Only the hard `true` state drives the styling; `spelling`/`grammar` are announced but not
+  // painted as an error, and an explicit `aria-invalid="false"` always wins over the prop.
+  const isInvalid = $derived(ariaInvalid === true || ariaInvalid === 'true')
+
+  const hasPlaceholder = $derived(Boolean(placeholder?.trim()))
+  // A numeric `size` turns the control into a listbox, where a dropdown chevron would be false.
+  const showIcon = $derived(nativeSize === undefined)
+
+  // The placeholder is a disabled, empty-valued option, so a user can never select it back once a
+  // real option is chosen. Rendering `selected` keeps static server output on the placeholder; after
+  // hydration the `bind:value` binding owns which option is selected.
+  const placeholderSelected = $derived(value === '')
+
+  const classes = $derived(
+    [
+      'rs-select',
+      `rs-select--${variantSize}`,
+      isInvalid ? 'rs-select--invalid' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<span class={classes}>
+  <select
+    {...attrs}
+    aria-invalid={ariaInvalid}
+    bind:value
+    class="rs-select__control"
+    size={nativeSize}
+  >
+    {#if hasPlaceholder}
+      <option disabled selected={placeholderSelected} value="">{placeholder}</option>
+    {/if}
+    {@render children?.()}
+  </select>
+  {#if showIcon}
+    <svg
+      aria-hidden="true"
+      class="rs-select__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M4 6l4 4 4-4"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+      />
+    </svg>
+  {/if}
+</span>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-select {
+      // Variant-owned locals: the control reads them, so a modifier swaps a coordinated set.
+      --rs-select-bg: var(--rs-color-surface, #ffffff);
+      --rs-select-border-color: var(--rs-color-border, #c8d2eb);
+      --rs-select-color: var(--rs-color-fg, #131a2f);
+      --rs-select-focus-ring-color: var(--rs-color-focus-ring, #296dff);
+      --rs-select-icon-color: var(--rs-color-muted, #4f5b7d);
+      --rs-select-invalid-bg: var(--rs-color-danger-bg, #ffeef0);
+      --rs-select-invalid-border-color: var(--rs-color-danger-border, #f0a8b0);
+      --rs-select-invalid-focus-ring-color: var(--rs-color-danger-accent, #c5221f);
+      // Size defaults live on the block; the per-size hooks stay unset here, so an adopter can
+      // override one control through `--rs-select-font-size` without touching the others.
+      --rs-select-font-size: var(--rs-select-font-size-md, var(--rs-font-size-md, #{to-rem(16)}));
+      --rs-select-min-height: var(--rs-select-min-height-md, 40px);
+      --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-3, 12px));
+      display: block;
+      position: relative;
+
+      &--sm {
+        --rs-select-font-size: var(--rs-select-font-size-sm, var(--rs-font-size-sm, #{to-rem(14)}));
+        --rs-select-min-height: var(--rs-select-min-height-sm, 34px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-sm, var(--rs-space-2, 8px));
+      }
+
+      &--md {
+        --rs-select-font-size: var(--rs-select-font-size-md, var(--rs-font-size-md, #{to-rem(16)}));
+        --rs-select-min-height: var(--rs-select-min-height-md, 40px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-3, 12px));
+      }
+
+      &--lg {
+        --rs-select-font-size: var(--rs-select-font-size-lg, var(--rs-font-size-lg, #{to-rem(18)}));
+        --rs-select-min-height: var(--rs-select-min-height-lg, 48px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-lg, var(--rs-space-4, 16px));
+      }
+
+      // Roomier touch targets once the component's own container is wide enough.
+      @include container-query-up($rs-cq-sm) {
+        --rs-select-min-height: var(--rs-select-min-height-md, 44px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-4, 16px));
+
+        &--sm {
+          --rs-select-min-height: var(--rs-select-min-height-sm, 40px);
+          --rs-select-padding-inline: var(--rs-select-padding-inline-sm, var(--rs-space-3, 12px));
+        }
+
+        &--lg {
+          --rs-select-min-height: var(--rs-select-min-height-lg, 52px);
+          --rs-select-padding-inline: var(--rs-select-padding-inline-lg, var(--rs-space-5, 20px));
+        }
+      }
+
+      &__control {
+        appearance: none;
+        background: var(--rs-select-bg);
+        border: var(--rs-select-border-width, var(--rs-border-width-sm, 1px)) solid
+          var(--rs-select-border-color);
+        border-radius: var(--rs-select-border-radius, var(--rs-radius-sm, 6px));
+        box-sizing: border-box;
+        color: var(--rs-select-color);
+        cursor: pointer;
+        display: block;
+        font-family: var(
+          --rs-font-family-sans,
+          'Inter',
+          'Segoe UI',
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif
+        );
+        font-size: var(--rs-select-font-size);
+        line-height: var(--rs-line-height-base, 1.45);
+        margin: 0;
+        min-height: var(--rs-select-min-height);
+        padding-block: var(--rs-select-padding-block, var(--rs-space-2, 8px));
+        padding-inline: var(--rs-select-padding-inline);
+        padding-inline-end: calc(var(--rs-select-padding-inline) + var(--rs-space-6, 24px));
+        transition:
+          background-color var(--rs-transition-fast, 140ms) ease,
+          border-color var(--rs-transition-fast, 140ms) ease;
+        width: 100%;
+
+        &:hover {
+          --rs-select-border-color: var(--rs-color-accent, #2f5bdb);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--rs-select-focus-ring-color);
+          outline-offset: 2px;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.55;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      // The error state owns a coordinated colour set, so the modifier reassigns the locals the
+      // control already reads instead of restating background, border and colour. It follows the
+      // control's `:hover` so its danger border and focus ring outrank the hover accent.
+      &--invalid &__control {
+        --rs-select-bg: var(--rs-select-invalid-bg);
+        --rs-select-border-color: var(--rs-select-invalid-border-color);
+        --rs-select-focus-ring-color: var(--rs-select-invalid-focus-ring-color);
+      }
+
+      &__icon {
+        color: var(--rs-select-icon-color);
+        inset-block-start: 50%;
+        inset-inline-end: var(--rs-select-padding-inline);
+        pointer-events: none;
+        position: absolute;
+        transform: translateY(-50%);
+        transition:
+          color var(--rs-transition-fast, 140ms) ease,
+          opacity var(--rs-transition-fast, 140ms) ease;
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      // The chevron dims with the control, so the pair reads as one disabled unit.
+      &__control:disabled + .rs-select__icon {
+        opacity: 0.55;
+      }
+    }
+  }
+</style>

package/src/components/Textarea.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements'
+
+  export type TextareaSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    size?: TextareaSize
+    invalid?: boolean
+    class?: string
+    value?: string
+  } & Omit<HTMLTextareaAttributes, 'value'>
+
+  let {
+    size = 'md',
+    invalid = false,
+    class: className = '',
+    value = $bindable(''),
+    ...attrs
+  }: Props = $props()
+
+  // Field passes its wiring (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`) to
+  // the `children` snippet, which spreads it onto this control. An explicit attribute wins over the
+  // `invalid` prop, so the error state Field reports is the one the element announces and styles.
+  const ariaInvalid = $derived(attrs['aria-invalid'] ?? (invalid ? 'true' : undefined))
+  // Only the hard `true` state drives the styling; `spelling`/`grammar` are announced but not
+  // painted as an error, and an explicit `aria-invalid="false"` always wins over the prop.
+  const isInvalid = $derived(ariaInvalid === true || ariaInvalid === 'true')
+
+  const classes = $derived(
+    [
+      'rs-textarea',
+      `rs-textarea--${size}`,
+      isInvalid ? 'rs-textarea--invalid' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<textarea {...attrs} aria-invalid={ariaInvalid} bind:value class={classes}></textarea>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-textarea {
+      // Size locals live on the block so a size modifier only reassigns them; `--rs-textarea-font-size`
+      // stays unset here so a consumer can override one control without touching the others.
+      --rs-textarea-font-size-sm: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-textarea-font-size-md: var(--rs-font-size-md, #{to-rem(16)});
+      --rs-textarea-font-size-lg: var(--rs-font-size-lg, #{to-rem(18)});
+      --rs-textarea-min-height-sm: 72px;
+      --rs-textarea-min-height-md: 96px;
+      --rs-textarea-min-height-lg: 128px;
+      --rs-textarea-padding-inline-sm: var(--rs-space-2, 8px);
+      --rs-textarea-padding-inline-md: var(--rs-space-3, 12px);
+      --rs-textarea-padding-inline-lg: var(--rs-space-4, 16px);
+      background: var(--rs-textarea-bg, var(--rs-color-surface, #ffffff));
+      border: var(--rs-textarea-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-textarea-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-textarea-border-radius, var(--rs-radius-sm, 6px));
+      box-sizing: border-box;
+      color: var(--rs-textarea-color, var(--rs-color-fg, #131a2f));
+      display: block;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-textarea-font-size, var(--rs-textarea-font-size-md));
+      line-height: var(--rs-line-height-base, 1.45);
+      min-height: var(--rs-textarea-min-height, var(--rs-textarea-min-height-md));
+      padding-block: var(--rs-textarea-padding-block, var(--rs-space-2, 8px));
+      padding-inline: var(--rs-textarea-padding-inline, var(--rs-textarea-padding-inline-md));
+      resize: var(--rs-textarea-resize, vertical);
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--rs-textarea-placeholder-color, var(--rs-color-muted, #4f5b7d));
+      }
+
+      &:focus-visible {
+        border-color: var(--rs-textarea-focus-border-color, var(--rs-color-accent, #2f5bdb));
+        outline: 2px solid var(--rs-textarea-focus-ring-color, var(--rs-color-focus-ring, #296dff));
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+
+      &--sm {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-sm);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-sm);
+        --rs-textarea-padding-inline: var(--rs-textarea-padding-inline-sm);
+      }
+
+      &--md {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-md);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-md);
+        --rs-textarea-padding-inline: var(--rs-textarea-padding-inline-md);
+      }
+
+      &--lg {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-lg);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-lg);
+        --rs-textarea-padding-inline: var(--rs-textarea-padding-inline-lg);
+      }
+
+      // The error state owns a coordinated colour set, so the modifier reassigns the locals the base
+      // rule already reads instead of restating background, border and colour.
+      &--invalid {
+        --rs-textarea-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-textarea-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-textarea-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-textarea-font-size-sm: var(--rs-font-size-md, #{to-rem(16)});
+        --rs-textarea-font-size-md: var(--rs-font-size-lg, #{to-rem(18)});
+        --rs-textarea-font-size-lg: var(--rs-font-size-xl, #{to-rem(20)});
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+</style>