zabi-components 8.0.0 → 8.1.0

package/dist/atoms/Spinner.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "svelte/elements";
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    /**
+     * Diameter, on the scale the built-in loading states use: 12, 14, 16
+     * and 20px. For another size pass a `size-*` utility through `class`.
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * What is loading. With a label the spinner is a `status` and the
+     * label is read out; without one it is decorative and hidden from
+     * assistive technology, for use beside text that already says so.
+     */
+    label?: string;
+    /** Extra classes for the ring: a size, a colour, an opacity. */
+    class?: string;
+};
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/atoms/Table.svelte

@@ -1,23 +1,168 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { HTMLTableAttributes } from 'svelte/elements';
     import { cn } from "../util/cn.js";
+    import { generateId } from "../util/ssr-safe.js";
 
-    interface Props {
-        /** Visible `<caption>` when set. */
+    /** `true` stacks at every width; a breakpoint name stacks below it. */
+    export type TableStacked = boolean | "sm" | "md" | "lg";
+
+    /** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the `<table>`. */
+    type Props = Omit<HTMLTableAttributes, 'class' | 'children'> & {
+        /** `<caption>`, and the table's accessible name, when set. */
         caption?: string;
+        /** Keeps the caption as the accessible name but hides it from view. */
+        captionHidden?: boolean;
+        /**
+         * Lays each row out as a block of label and value pairs instead of
+         * scrolling sideways. The label of a cell is its `data-label`
+         * attribute, which the caller sets on every `<td>`.
+         */
+        stacked?: TableStacked;
         class?: string;
         children?: Snippet;
+    };
+
+    let {
+        caption,
+        captionHidden = false,
+        stacked = false,
+        class: className = '',
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const captionId = generateId("table-caption");
+    let tableElement = $state<HTMLTableElement>();
+
+    /**
+     * The rows arrive as `children`, so the stacked layout is written from the
+     * table down. Tailwind only generates classes it can read whole, which is
+     * why each breakpoint repeats the list rather than building it.
+     *
+     * The header row is hidden from view, not removed, so cells keep their
+     * column header. The visible label is the cell's `data-label` drawn in
+     * `::before`; where the browser supports alternative text for generated
+     * content it is given an empty one, so a screen reader reads the column
+     * header once instead of the header and then the label.
+     *
+     * The label takes the start of the line with an auto margin after it, and
+     * the cell packs everything else at the end. So a cell's own children stay
+     * together however many there are, and a cell with no label still has its
+     * value on the value side. An empty cell collapses to nothing but is not
+     * hidden: taking it out of the tree would shift the cells after it under
+     * the wrong column headers.
+     */
+    const STACKED_CLASS = {
+        always:
+            "block min-w-0 [&>:not(thead)]:block [&>thead]:sr-only [&>*>tr]:block [&>*>tr]:py-2 " +
+            "[&>*>tr>*]:flex [&>*>tr>*]:items-baseline [&>*>tr>*]:justify-end " +
+            "[&>*>tr>*]:gap-4 [&>*>tr>*]:py-1 [&>*>tr>*]:text-end " +
+            "[&>*>tr>:empty]:py-0 [&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        sm:
+            "max-sm:block max-sm:min-w-0 max-sm:[&>:not(thead)]:block max-sm:[&>thead]:sr-only " +
+            "max-sm:[&>*>tr]:block max-sm:[&>*>tr]:py-2 max-sm:[&>*>tr>*]:flex " +
+            "max-sm:[&>*>tr>*]:items-baseline " +
+            "max-sm:[&>*>tr>*]:justify-end max-sm:[&>*>tr>*]:gap-4 " +
+            "max-sm:[&>*>tr>*]:py-1 max-sm:[&>*>tr>*]:text-end max-sm:[&>*>tr>:empty]:py-0 " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-sm:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        md:
+            "max-md:block max-md:min-w-0 max-md:[&>:not(thead)]:block max-md:[&>thead]:sr-only " +
+            "max-md:[&>*>tr]:block max-md:[&>*>tr]:py-2 max-md:[&>*>tr>*]:flex " +
+            "max-md:[&>*>tr>*]:items-baseline " +
+            "max-md:[&>*>tr>*]:justify-end max-md:[&>*>tr>*]:gap-4 " +
+            "max-md:[&>*>tr>*]:py-1 max-md:[&>*>tr>*]:text-end max-md:[&>*>tr>:empty]:py-0 " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-md:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        lg:
+            "max-lg:block max-lg:min-w-0 max-lg:[&>:not(thead)]:block max-lg:[&>thead]:sr-only " +
+            "max-lg:[&>*>tr]:block max-lg:[&>*>tr]:py-2 max-lg:[&>*>tr>*]:flex " +
+            "max-lg:[&>*>tr>*]:items-baseline " +
+            "max-lg:[&>*>tr>*]:justify-end max-lg:[&>*>tr>*]:gap-4 " +
+            "max-lg:[&>*>tr>*]:py-1 max-lg:[&>*>tr>*]:text-end max-lg:[&>*>tr>:empty]:py-0 " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-lg:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+    } as const;
+
+    const stackedClass = $derived(
+        stacked === true ? STACKED_CLASS.always : stacked ? STACKED_CLASS[stacked] : "",
+    );
+
+    /**
+     * Some browsers stop treating a table as one once its boxes are no longer
+     * table boxes, and the rows then reach a screen reader as loose text.
+     * Explicit roles keep the structure whatever `display` says. The rows are
+     * the caller's markup, so the roles are set on the rendered elements and
+     * kept up as rows come and go; a role the caller set is left alone.
+     */
+    function restoreTableRoles(table: HTMLTableElement) {
+        const set = (element: Element, role: string) => {
+            if (!element.hasAttribute("role")) element.setAttribute("role", role);
+        };
+        for (const group of table.querySelectorAll(":scope > :is(thead, tbody, tfoot)")) {
+            set(group, "rowgroup");
+            for (const row of group.querySelectorAll(":scope > tr")) {
+                set(row, "row");
+                for (const cell of row.querySelectorAll(":scope > :is(td, th)")) {
+                    if (cell.tagName === "TD") set(cell, "cell");
+                    else if (cell.getAttribute("scope") === "row") set(cell, "rowheader");
+                    else if (cell.getAttribute("scope") === "col") set(cell, "columnheader");
+                    else set(cell, group.tagName === "THEAD" ? "columnheader" : "rowheader");
+                }
+            }
+        }
     }
 
-    let { caption, class: className = '', children }: Props = $props();
+    $effect(() => {
+        const table = tableElement;
+        if (!table || !stacked) return;
+
+        restoreTableRoles(table);
+        const observer = new MutationObserver(() => restoreTableRoles(table));
+        observer.observe(table, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    });
 </script>
 
 <div
-    class={cn("overflow-x-auto rounded-control border border-border shadow-sm", className)}
+    class={cn("overflow-x-auto rounded-control border border-border bg-card shadow-sm", className)}
 >
-    <table class="w-full min-w-[20rem] border-collapse text-left text-sm text-body">
+    <table
+        bind:this={tableElement}
+        class={cn("w-full min-w-[20rem] border-collapse text-left text-sm text-body", stackedClass)}
+        role={stacked ? "table" : undefined}
+        aria-labelledby={stacked && caption ? captionId : undefined}
+        {...restProps}
+    >
         {#if caption}
-            <caption class="border-b border-border bg-base-50 px-4 py-3 text-left text-headline">
+            <caption
+                id={captionId}
+                class={captionHidden
+                    ? "sr-only"
+                    : "border-b border-border bg-surface-elevated px-4 py-3 text-left text-headline"}
+            >
                 {caption}
             </caption>
         {/if}

package/dist/atoms/Table.svelte.d.ts

@@ -1,10 +1,22 @@
 import type { Snippet } from 'svelte';
-interface Props {
-    /** Visible `<caption>` when set. */
+import type { HTMLTableAttributes } from 'svelte/elements';
+/** `true` stacks at every width; a breakpoint name stacks below it. */
+export type TableStacked = boolean | "sm" | "md" | "lg";
+/** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the `<table>`. */
+type Props = Omit<HTMLTableAttributes, 'class' | 'children'> & {
+    /** `<caption>`, and the table's accessible name, when set. */
     caption?: string;
+    /** Keeps the caption as the accessible name but hides it from view. */
+    captionHidden?: boolean;
+    /**
+     * Lays each row out as a block of label and value pairs instead of
+     * scrolling sideways. The label of a cell is its `data-label`
+     * attribute, which the caller sets on every `<td>`.
+     */
+    stacked?: TableStacked;
     class?: string;
     children?: Snippet;
-}
+};
 declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/atoms/TemporalField.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+    import type { SizeVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
+    import Input from "./Input.svelte";
+
+    /**
+     * What DateField and TimeField share. Internal: it is not exported from
+     * the package, and its props are those of the two fields.
+     *
+     * It is an `Input` with a native `type`, so the box, the sizes, the label,
+     * the hint and the error message are Input's own and cannot drift from it.
+     * What is added here is only what a native date or time input needs to
+     * look like one: see the classes and the style block below.
+     */
+    interface Props {
+        kind: "date" | "time";
+        id?: string;
+        value?: string;
+        name?: string;
+        label?: string;
+        hideLabel?: boolean;
+        hint?: string;
+        error?: string;
+        min?: string;
+        max?: string;
+        step?: number | "any";
+        required?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        size?: SizeVariant;
+        class?: string;
+        "aria-describedby"?: string | null;
+    }
+
+    let {
+        kind,
+        id: idProp,
+        value = $bindable<Exclude<Props["value"], undefined>>(),
+        name = "",
+        label = "",
+        hideLabel = false,
+        hint = "",
+        error = "",
+        min,
+        max,
+        step,
+        required = false,
+        disabled = false,
+        readonly = false,
+        size = "md",
+        class: className = "",
+        "aria-describedby": describedBy,
+        ...restProps
+    }: Props = $props();
+
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (value === undefined) value = "";
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** What Input does not declare, but passes on to the `<input>`. */
+    const native = $derived({
+        min,
+        max,
+        step,
+        readonly: readonly || undefined,
+        "data-empty": value ? undefined : "",
+        ...restProps,
+    });
+
+    const fieldClasses = $derived(
+        cn(
+            "zabi-temporal-field",
+            // Its own look off: WebKit on iOS otherwise draws a date input as
+            // a button, with its own height and centred text. `block` and
+            // `min-w-0`: an empty one there has no intrinsic width.
+            "block min-w-0 appearance-none",
+            // The format the browser shows in an empty field ("mm/dd/yyyy")
+            // is a hint, not a value: in the placeholder colour.
+            !value && "text-input-placeholder",
+            className,
+        ),
+    );
+</script>
+
+<div>
+    <Input
+        id={idProp}
+        type={kind}
+        bind:value
+        {name}
+        {label}
+        {hideLabel}
+        {required}
+        {disabled}
+        {size}
+        {hint}
+        {error}
+        aria-describedby={describedBy}
+        class={fieldClasses}
+        {...native}
+    />
+</div>
+
+<style>
+    /*
+     * The parts of a native date or time input that utilities cannot reach.
+     * Global selectors under one class: the `<input>` is rendered by Input,
+     * so a scoped selector would not match it.
+     */
+
+    /* WebKit on iOS centres the value, and gives an empty one no height. */
+    :global(.zabi-temporal-field::-webkit-date-and-time-value) {
+        min-height: 1.5em;
+        text-align: start;
+    }
+
+    /* The editable segments in Chromium and desktop WebKit: no extra box
+       inside the field, so the text sits where an Input's does. */
+    :global(.zabi-temporal-field::-webkit-datetime-edit) {
+        padding: 0;
+    }
+
+    /* The browser's calendar or clock button. It follows `color-scheme`,
+       which the theme's dark block sets (see app.css); nothing here has to. */
+    :global(.zabi-temporal-field::-webkit-calendar-picker-indicator) {
+        cursor: pointer;
+    }
+    :global(.zabi-temporal-field:disabled::-webkit-calendar-picker-indicator),
+    :global(.zabi-temporal-field:read-only::-webkit-calendar-picker-indicator) {
+        cursor: default;
+    }
+
+</style>

package/dist/atoms/TemporalField.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { SizeVariant } from "../types/variants.js";
+/**
+ * What DateField and TimeField share. Internal: it is not exported from
+ * the package, and its props are those of the two fields.
+ *
+ * It is an `Input` with a native `type`, so the box, the sizes, the label,
+ * the hint and the error message are Input's own and cannot drift from it.
+ * What is added here is only what a native date or time input needs to
+ * look like one: see the classes and the style block below.
+ */
+interface Props {
+    kind: "date" | "time";
+    id?: string;
+    value?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    hint?: string;
+    error?: string;
+    min?: string;
+    max?: string;
+    step?: number | "any";
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: SizeVariant;
+    class?: string;
+    "aria-describedby"?: string | null;
+}
+declare const TemporalField: import("svelte").Component<Props, {}, "value">;
+type TemporalField = ReturnType<typeof TemporalField>;
+export default TemporalField;

package/dist/atoms/Text.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
 
     import { cn } from "../util/cn.js";
-    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+    import type { OnFillTone } from "../types/variants.js";
+    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error' | OnFillTone;
     type Size = 'xs' | 'sm' | 'md' | 'lg';
     type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
 
-    interface Props {
+    /** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the element. */
+    type Props = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
         as?: 'p' | 'span' | 'div';
         tone?: Tone;
         size?: Size;
@@ -17,7 +20,7 @@
         weight?: Weight;
         class?: string;
         children?: Snippet;
-    }
+    };
 
     let {
         as: Tag = 'p',
@@ -26,6 +29,7 @@
         weight,
         class: className = '',
         children,
+        ...restProps
     }: Props = $props();
 
     const toneClass: Record<Tone, string> = {
@@ -35,6 +39,9 @@
         headline: 'text-headline',
         label: 'text-label',
         error: 'text-error',
+        inherit: 'text-inherit',
+        'on-brand': 'text-on-brand',
+        'on-accent': 'text-on-accent',
     };
 
     /**
@@ -63,13 +70,18 @@
     /** Labels read as labels by default; callers can still override. */
     const defaultWeight: Weight = $derived(tone === 'label' ? 'medium' : 'normal');
     const resolvedWeight = $derived(weight ?? defaultWeight);
+    const classes = $derived(
+        cn(toneClass[tone], sizeClass[size], weightClass[resolvedWeight], className),
+    );
 </script>
 
-<svelte:element
-    this={Tag}
-    class={cn(toneClass[tone], sizeClass[size], weightClass[resolvedWeight], className)}
->
-    {#if children}
-        {@render children()}
-    {/if}
-</svelte:element>
+<!-- One branch per tag, not a dynamic element: hydration takes a dynamic
+element out and puts it back, which blurs a link or a field inside it that the
+user had already tabbed to. -->
+{#if Tag === 'span'}
+    <span class={classes} {...restProps}>{@render children?.()}</span>
+{:else if Tag === 'div'}
+    <div class={classes} {...restProps}>{@render children?.()}</div>
+{:else}
+    <p class={classes} {...restProps}>{@render children?.()}</p>
+{/if}

package/dist/atoms/Text.svelte.d.ts

@@ -1,8 +1,11 @@
 import type { Snippet } from 'svelte';
-type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { OnFillTone } from "../types/variants.js";
+type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error' | OnFillTone;
 type Size = 'xs' | 'sm' | 'md' | 'lg';
 type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
-interface Props {
+/** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the element. */
+type Props = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     as?: 'p' | 'span' | 'div';
     tone?: Tone;
     size?: Size;
@@ -13,7 +16,7 @@ interface Props {
     weight?: Weight;
     class?: string;
     children?: Snippet;
-}
+};
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/atoms/Textarea.svelte

@@ -1,10 +1,28 @@
 <script lang="ts">
-    import { CheckCircle, AlertTriangle, AlertCircle } from '@lucide/svelte';
+    import type { HTMLTextareaAttributes } from 'svelte/elements';
     import type { SemanticVariant, SizeVariant } from '../types/variants.js';
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
+    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import FieldMessages from "./FieldMessages.svelte";
 
-    interface Props {
+    /**
+     * Other attributes (`autocomplete`, `inputmode`, `maxlength`,
+     * `enterkeyhint`, `data-*`, `onchange`, ...) land on the `<textarea>`.
+     */
+    type Props = Omit<
+        HTMLTextareaAttributes,
+        | 'class'
+        | 'value'
+        | 'id'
+        | 'name'
+        | 'placeholder'
+        | 'required'
+        | 'disabled'
+        | 'rows'
+        | 'oninput'
+        | 'aria-describedby'
+    > & {
         id?: string;
         value?: string;
         name?: string;
@@ -18,13 +36,20 @@
         rows?: number;
         size?: SizeVariant;
         variant?: SemanticVariant;
+        /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
         message?: string;
+        /** Help text under the field, read out with it. */
+        hint?: string;
+        /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+        error?: string;
         oninput?: (event: Event) => void;
-    }
+        /** Ids of other elements that describe the field. The hint and the message are added after them. */
+        "aria-describedby"?: string | null;
+    };
 
     let {
         id: idProp,
-        value = $bindable(''),
+        value = $bindable<Exclude<Props["value"], undefined>>(),
         name = '',
         class: className = '',
         label = '',
@@ -37,27 +62,44 @@
         size = 'md',
         variant = 'default',
         message = '',
+        hint = '',
+        error = '',
         oninput,
+        'aria-describedby': describedBy,
         ...restProps
     }: Props = $props();
 
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (value === undefined) value = '';
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
     const fallbackId = generateId('textarea');
     const textareaId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
+    const status = $derived(fieldMessageState({ variant, message, hint, error }));
+
     const variantClass = $derived(() => {
-        return variant === 'success'
+        return status.variant === 'success'
             ? 'border-success focus-visible:border-success'
-            : variant === 'warning'
+            : status.variant === 'warning'
               ? 'border-warning focus-visible:border-warning'
-              : variant === 'error'
+              : status.variant === 'error'
                 ? 'border-error focus-visible:border-error'
-                : 'border-input-border';
+                : 'border-input-border enabled:hover:border-input-border-hover';
     });
 
+    // 16px below `sm`: iOS Safari zooms the page when a focused field is smaller.
     const textareaClasses = $derived(() => {
         const baseClasses =
-            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed resize-y px-3 py-2 text-sm leading-6';
+            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed resize-y px-3 py-2 text-sm max-sm:text-base leading-6';
 
         return cn(`${baseClasses} ${variantClass()} ${className}`);
     });
@@ -66,24 +108,6 @@
         () => 'mb-1 block text-sm font-medium text-label',
     );
 
-    const messageClasses = $derived(() => {
-        if (variant === 'error') {
-            return 'mt-1 flex items-center gap-2 text-sm text-error';
-        } else if (variant === 'success') {
-            return 'mt-1 flex items-center gap-2 text-sm text-success';
-        } else if (variant === 'warning') {
-            return 'mt-1 flex items-center gap-2 text-sm text-warning';
-        }
-        return 'mt-1 flex items-center gap-2 text-sm text-description';
-    });
-
-    const getIcon = $derived(() => {
-        if (variant === 'error') return AlertCircle;
-        if (variant === 'success') return CheckCircle;
-        if (variant === 'warning') return AlertTriangle;
-        return null;
-    });
-
     function handleInput(event: Event) {
         const target = event.target as HTMLTextAreaElement;
         value = target.value;
@@ -106,10 +130,10 @@
             {rows}
             class={textareaClasses()}
             oninput={handleInput}
-            aria-invalid={variant === 'error' ? 'true' : undefined}
+            aria-invalid={status.variant === 'error' ? 'true' : undefined}
             aria-required={required ? 'true' : undefined}
             aria-busy={loading ? 'true' : undefined}
-            aria-describedby={message ? `${textareaId}-message` : undefined}
+            aria-describedby={fieldDescribedBy(textareaId, status, describedBy)}
             {...restProps}
         ></textarea>
         {#if loading}
@@ -118,23 +142,10 @@
                 aria-hidden="true"
             >
                 <span
-                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
+                    class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70 motion-reduce:animate-pulse"
                 ></span>
             </span>
         {/if}
     </div>
-    {#if message && variant !== 'default'}
-        <p
-            id={`${textareaId}-message`}
-            class={messageClasses()}
-            role={variant === 'error' ? 'alert' : 'status'}
-            aria-live={variant === 'error' ? 'assertive' : 'polite'}
-        >
-            {#if getIcon()}
-                {@const Icon = getIcon()}
-                <Icon size={14} class="shrink-0" />
-            {/if}
-            <span>{message}</span>
-        </p>
-    {/if}
+    <FieldMessages fieldId={textareaId} {status} {hint} gap="mt-1" />
 </div>