@noxlovette/material 0.9.4 → 0.10.0

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/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/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';

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

@@ -0,0 +1,150 @@
+import { type VariantProps } from '../../../utils/tv.js';
+export type TextareaVariants = VariantProps<typeof textarea>;
+/**
+ * M3 defines a multi-line text field but no separate textarea spec. This keeps the text field's
+ * containers, label, notch and indicator, and changes only what a growing field has to:
+ * the container has a 56dp minimum instead of a fixed height, and the label and icons line up
+ * with the first line instead of the vertical center.
+ */
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, undefined, {
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+            inputWrapper: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            label: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+            supportingText: string;
+            leadingIcon: string;
+            trailingIcon: string;
+            fieldset: string;
+        };
+    };
+    leadingIcon: {
+        true: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            fieldset: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    label: string;
+    requiredAsterisk: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    supportingText: string;
+    counter: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}>>;

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

@@ -0,0 +1,155 @@
+import { tv } from '../../../utils/tv.js';
+/**
+ * M3 defines a multi-line text field but no separate textarea spec. This keeps the text field's
+ * containers, label, notch and indicator, and changes only what a growing field has to:
+ * the container has a 56dp minimum instead of a fixed height, and the label and icons line up
+ * with the first line instead of the vertical center.
+ */
+export const textarea = tv({
+    slots: {
+        base: `
+      group relative w-full min-h-spacing-700 flex items-start
+    `,
+        /* The wrapper holds the vertical padding, not the textarea, so text scrolled past `maxRows`
+           is clipped at the textarea's edge instead of sliding under the floated label. */
+        inputWrapper: `
+      relative flex-1 self-stretch px-spacing-200 cursor-text
+    `,
+        input: `
+      peer block w-full bg-transparent outline-none resize-none field-sizing-content
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      disabled:text-md-sys-color-on-surface/38 disabled:cursor-not-allowed
+    `,
+        label: `
+      absolute left-spacing-200 top-spacing-200
+      md-sys-typescale-body-large
+      text-md-sys-color-on-surface-variant
+      pointer-events-none
+      transition-[top,left,font-size,line-height,color,transform] md-sys-motion-fast-spatial
+
+      peer-focus:text-md-sys-color-primary
+    `,
+        requiredAsterisk: `
+      ml-spacing-25
+      text-md-sys-color-error
+      group-focus-within:text-md-sys-color-primary
+      transition-colors md-sys-motion-effects
+    `,
+        /* On the first line of text: 16dp from the top when outlined, 24dp when filled. */
+        leadingIcon: `
+      text-md-sys-color-on-surface-variant size-(--text-icon-24)
+      group-focus-within:text-md-sys-color-primary
+      ml-spacing-150 mt-spacing-200 text-icon-24
+    `,
+        /* Sized to the 24dp glyph like Textfield's, so it takes the same offset as the leading icon. */
+        trailingIcon: `
+      mr-spacing-150 mt-spacing-200 text-md-sys-color-on-surface-variant size-(--text-icon-24)
+      group-focus-within:text-md-sys-color-primary
+      z-20 text-icon-24
+    `,
+        supportingText: `
+      px-spacing-200 pt-spacing-50 flex justify-between gap-spacing-200
+      md-sys-typescale-body-small
+      text-md-sys-color-on-surface-variant
+    `,
+        counter: `
+      ms-auto shrink-0
+    `,
+        fieldset: `
+      absolute -top-spacing-100 left-spacing-0 right-spacing-0 bottom-spacing-0 m-spacing-0 px-spacing-150
+      pointer-events-none rounded-xs border border-md-sys-color-outline
+      transition-colors md-sys-motion-fast-effects
+
+      group-hover:border-md-sys-color-on-surface
+      group-focus-within:border-2 group-focus-within:border-md-sys-color-primary
+    `,
+        legend: `
+      invisible float-none block h-auto max-w-[0.01px] overflow-hidden
+      whitespace-nowrap md-sys-typescale-body-small
+      transition-[max-width] md-sys-motion-fast-spatial
+
+      group-focus-within:max-w-full
+      group-has-[textarea:not(:placeholder-shown)]:max-w-full
+    `,
+        legendLabel: `
+      px-spacing-50
+    `
+    },
+    variants: {
+        variant: {
+            filled: {
+                base: `
+          px-spacing-0 bg-md-sys-color-surface-container-highest
+          rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0 after:h-px after:bg-md-sys-color-on-surface-variant
+          after:transition-[height,background-color] after:md-sys-motion-fast-spatial
+          hover:after:bg-md-sys-color-on-surface
+          focus-within:after:bg-md-sys-color-primary
+          focus-within:after:h-[2px]
+        `,
+                /* 24dp above the first line leaves room for the label floated inside the container;
+                   24 + 24 + 8 = the 56dp single-line field. The resting label and the icons sit on that
+                   first line too, so the icons stay beside the text once the label floats to 8dp. */
+                inputWrapper: 'pt-spacing-300 pb-spacing-100',
+                leadingIcon: 'mt-spacing-300',
+                trailingIcon: 'mt-spacing-300',
+                label: `
+          top-spacing-300
+          peer-focus:top-spacing-100 peer-focus:md-sys-typescale-body-small
+          peer-not-placeholder-shown:top-spacing-100 peer-not-placeholder-shown:md-sys-typescale-body-small
+        `
+            },
+            outlined: {
+                inputWrapper: 'py-spacing-200',
+                label: `
+          peer-focus:top-spacing-0 peer-focus:md-sys-typescale-body-small peer-focus:-translate-y-1/2
+          peer-not-placeholder-shown:top-spacing-0 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:-translate-y-1/2
+        `
+            }
+        },
+        error: {
+            true: {
+                base: 'after:bg-md-sys-color-error focus-within:after:bg-md-sys-color-error',
+                label: 'text-md-sys-color-error peer-focus:text-md-sys-color-error',
+                supportingText: 'text-md-sys-color-error',
+                leadingIcon: 'text-md-sys-color-error',
+                trailingIcon: 'text-md-sys-color-error',
+                fieldset: `
+          border-md-sys-color-error
+          group-hover:border-md-sys-color-error
+          group-focus-within:border-md-sys-color-error
+        `
+            }
+        },
+        leadingIcon: {
+            true: {}
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-60',
+                inputWrapper: 'cursor-not-allowed',
+                fieldset: 'border-md-sys-color-on-surface/12 group-hover:border-md-sys-color-on-surface/12'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            /* Same as Textfield: the outlined label floats back over the leading icon into the notch. */
+            variant: 'outlined',
+            leadingIcon: true,
+            class: {
+                label: 'peer-focus:-left-spacing-250 peer-not-placeholder-shown:-left-spacing-250'
+            }
+        },
+        {
+            variant: 'filled',
+            disabled: true,
+            class: {
+                base: 'bg-md-sys-color-on-surface/4 after:bg-md-sys-color-on-surface/12'
+            }
+        }
+    ],
+    defaultVariants: {
+        variant: 'outlined'
+    }
+});

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

@@ -0,0 +1,59 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { TextareaVariants } from './theme.js';
+/**
+ * Props for the Textarea component.
+ */
+export type TextareaProps = TextareaVariants & Omit<HTMLTextareaAttributes, 'children' | 'value' | 'rows'> & {
+    /**
+     * The current value of the textarea.
+     */
+    value?: string | null;
+    /**
+     * The label text for the textarea.
+     */
+    label: string;
+    /**
+     * The ID for the textarea element. Auto-generated but can be replaced.
+     */
+    id?: string;
+    /**
+     * The placeholder text. Not used in M3: the label takes its place.
+     */
+    placeholder?: '';
+    /**
+     * Minimum height, in lines. The field grows with its content from here. Defaults to 3.
+     */
+    rows?: number;
+    /**
+     * Maximum height, in lines, before the content scrolls. Omit to grow without limit; set it
+     * to `rows` for a fixed-height field.
+     */
+    maxRows?: number;
+    /**
+     * Snippet for supporting text (helper or error text) displayed below the field.
+     */
+    supportingText?: Snippet;
+    /**
+     * Props for the leading icon, aligned with the first line.
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Props for the trailing icon button, aligned with the first line.
+     */
+    trailingIconProps?: IconProps;
+    /**
+     * Shows a character counter below the field. Going over it shows the error state; it does
+     * not stop typing (pass `maxlength` for a hard limit).
+     */
+    characterLimit?: number;
+    /**
+     * Callback function when the trailing icon is clicked.
+     */
+    trailingOnClick?: () => void;
+    /**
+     * Optional snippet for trailing icon override.
+     */
+    trailingIcon?: Snippet;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/misc/ThemeSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { RadioGroup } from '../forms/radio-group/index.js';
-  import { themeState, extractColorFromImage } from '../../utils/theme.svelte.js';
+  import { themeState, extractColorFromImage } from '../../utils/themeState.svelte.js';
   import { Title } from '../typography/title/index.js';
   import { Body } from '../typography/body/index.js';
 

package/dist/components/misc/materialAvatarPalette.js

@@ -1,7 +1,7 @@
 /**
  * Container-tier M3 color roles (see `styles/theme/*.css`) used as a generated avatar's
  * background. Deliberately NOT a fixed hex list: every consuming app picks its own source
- * color (`ThemeConfig.sourceColor` in `theme.svelte.ts`), which the M3 dynamic color
+ * color (`ThemeConfig.sourceColor` in `themeState.svelte.ts`), which the M3 dynamic color
  * algorithm expands into these tokens as real `--color-md-sys-color-*` custom properties on
  * `:root` — reading them live is what makes the avatar match that app's actual palette
  * instead of this library's own hardcoded pastel.

package/dist/components/progress/CircularProgress.svelte

@@ -14,12 +14,14 @@ travels around the circle.
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     percent,
     size = 48,
-    thickness = 4
-  }: {
+    thickness = 4,
+    ...a11y
+  }: ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Diameter of the indicator in pixels. Defaults to 48. */
@@ -93,7 +95,7 @@ travels around the circle.
   );
 </script>
 
-<Progress.Root value={percent ?? null} max={100} data-cy="m3-circular-progress">
+<Progress.Root {...a11y} value={percent ?? null} max={100} data-cy="m3-circular-progress">
   {#snippet child({ props })}
     <svg
       {...props}

package/dist/components/progress/CircularProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Diameter of the indicator in pixels. Defaults to 48. */

package/dist/components/progress/LinearProgress.svelte

@@ -16,12 +16,14 @@ The track always keeps a gap either side of the bar.
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     percent,
     height = 4,
-    class: className
-  }: {
+    class: className,
+    ...a11y
+  }: ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Height of the bar in pixels. Defaults to 4. */
@@ -84,6 +86,7 @@ The track always keeps a gap either side of the bar.
 </script>
 
 <Progress.Root
+  {...a11y}
   value={percent ?? null}
   max={100}
   class={container({ class: clsx(className) })}

package/dist/components/progress/LinearProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** The current progress percentage (0–100). Omit or pass null for indeterminate. */
     percent?: number | null;
     /** Height of the bar in pixels. Defaults to 4. */

package/dist/components/progress/WavyLinearProgress.svelte

@@ -13,14 +13,16 @@ effects spring (critically damped, so progress never visibly runs backwards).
   import { springTokens } from '../../animation/spring.js';
   import { SpringValue } from '../../animation/springValue.svelte.js';
   import { linear, trackOpacity, WAVE_PERIOD_MS } from './_wavy.js';
+  import type { ProgressA11yProps } from './types.js';
 
   let {
     width = 600,
     height = 10,
     thickness = 4,
     percent,
-    class: className
-  }: {
+    class: className,
+    ...a11y
+  }: ProgressA11yProps & {
     /** Width of the SVG viewBox. */
     width?: number;
     /** Height of the SVG viewBox. */
@@ -56,7 +58,7 @@ effects spring (critically damped, so progress never visibly runs backwards).
   let wavePath = $derived(linear(height / 2 - thickness / 2, height / 2, left, percentX, time));
 </script>
 
-<Progress.Root value={percent ?? null} max={100}>
+<Progress.Root {...a11y} value={percent ?? null} max={100}>
   {#snippet child({ props })}
     <svg {...props} viewBox="0 0 {width} {height}" class={className}>
       <path

package/dist/components/progress/WavyLinearProgress.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { ProgressA11yProps } from './types.js';
+type $$ComponentProps = ProgressA11yProps & {
     /** Width of the SVG viewBox. */
     width?: number;
     /** Height of the SVG viewBox. */

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

@@ -1,4 +1,5 @@
 export * from './_wavy.js';
+export * from './types.js';
 export { default as CircularProgress } from './CircularProgress.svelte';
 export { default as LinearProgress } from './LinearProgress.svelte';
 export { default as WavyLinearProgress } from './WavyLinearProgress.svelte';

package/dist/components/progress/index.js

@@ -1,6 +1,7 @@
 // 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 './_wavy.js';
+export * from './types.js';
 // default exports for components in this folder
 export { default as CircularProgress } from './CircularProgress.svelte';
 export { default as LinearProgress } from './LinearProgress.svelte';

package/dist/components/progress/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Accessible-name attributes shared by every progress indicator, forwarded to the element with
+ * `role="progressbar"`. Give each indicator a name when more than one is on screen, or when the
+ * visible label is not already associated with it.
+ */
+export type ProgressA11yProps = {
+    id?: string;
+    /** Accessible name, e.g. `"Reading comprehension"`. */
+    'aria-label'?: string;
+    /** Id of the element whose text names the indicator. */
+    'aria-labelledby'?: string;
+    /** Id of the element that describes the indicator. */
+    'aria-describedby'?: string;
+    /** Human-readable value, e.g. `"3 of 5 lessons"`. Defaults to the percentage. */
+    'aria-valuetext'?: string;
+};

package/dist/components/progress/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/Theme.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { MediaQuery } from 'svelte/reactivity';
-  import { generateThemeCSS, themeState, STORAGE_KEY } from './theme.svelte.js';
+  import { generateThemeCSS, themeState, STORAGE_KEY } from './themeState.svelte.js';
 
   /**
    * Whether to generate and inject the M3 dynamic-color CSS custom properties

package/dist/utils/ThemeScript.svelte

@@ -9,7 +9,7 @@ Add this to your root +layout.svelte (or any layout that wraps the whole app):
 <App>...</App>
 -->
 <script lang="ts">
-  import { THEME_INIT_SCRIPT } from './theme.svelte.js';
+  import { THEME_INIT_SCRIPT } from './themeState.svelte.js';
 </script>
 
 <svelte:head>

package/dist/utils/index.d.ts

@@ -1,9 +1,9 @@
 export * from './icon/index.js';
 export * from './shortcut.js';
-export * from './theme.svelte.js';
+export * from './themeState.svelte.js';
 export * from './types.js';
 export * from './ui.js';
-export type { ColorScheme, ContrastMode, ThemeConfig, ThemeVariant } from './theme.svelte.js';
+export type { ColorScheme, ContrastMode, ThemeConfig, ThemeVariant } from './themeState.svelte.js';
 export { default as Layer } from './Layer.svelte';
 export { default as Theme } from './Theme.svelte';
 export { default as ThemeScript } from './ThemeScript.svelte';

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 export * from './icon/index.js';
 export * from './shortcut.js';
-export * from './theme.svelte.js';
+export * from './themeState.svelte.js';
 export * from './types.js';
 export * from './ui.js';
 export { default as Layer } from './Layer.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [