@lostgradient/cinder 0.2.0 → 0.4.0

package/src/components/table-header-cell/README.md

@@ -21,7 +21,7 @@ snippet. The flat `@lostgradient/cinder/table-header-cell` subpath remains expor
 | `column`   | `string`                            | no       | —       | Column key. Required when `sortable=true` so the parent Table can track which column the user activated.                                                                                       |
 | `scope`    | `"col"` \| `"colgroup"`             | no       | —       | When set, hint to assistive tech that the column groups multiple rows.                                                                                                                         |
 | `sortable` | `boolean`                           | no       | —       | When true, render a button inside the `<th>` and dispatch sort intents to the parent Table. The cell's `aria-sort` reflects the current sort direction (`ascending`, `descending`, or `none`). |
-| `children` | `(opaque)`                          | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                     |
+| `children` | `(opaque)`                          | yes      | —       | Cell content (column label). Not expressible in JSON Schema; see the component types for the signature.                                                                                        |
 
 <!-- generated:props:end -->
 

package/src/components/table-header-cell/table-header-cell.svelte

@@ -48,10 +48,16 @@
         ? 'none'
         : undefined,
   );
+  const nextSortDescription = $derived(
+    ariaSort === 'ascending' ? 'Activate to sort descending' : 'Activate to sort ascending',
+  );
+  const sortButtonDescriptionAttributes = $derived({
+    'aria-description': nextSortDescription,
+  });
 
   function handleClick(): void {
     if (!sortable || !column) return;
-    table.onSortChange(column);
+    table.onsortchange(column);
   }
 </script>
 
@@ -64,7 +70,12 @@
   aria-sort={ariaSort}
 >
   {#if isSortable}
-    <button type="button" class="cinder-table__sort-button" onclick={handleClick}>
+    <button
+      {...sortButtonDescriptionAttributes}
+      type="button"
+      class="cinder-table__sort-button"
+      onclick={handleClick}
+    >
       {@render children()}
       <span
         class="cinder-table__sort-indicator"

package/src/components/table-row/README.md

@@ -17,11 +17,11 @@ snippet. The flat `@lostgradient/cinder/table-row` subpath remains exported for
 | Prop                | Type       | Required | Default | Description                                                                                                                                                                                                                                                                        |
 | ------------------- | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `class`             | `string`   | no       | —       | Additional class names merged with `.cinder-table__row`.                                                                                                                                                                                                                           |
-| `selected`          | `boolean`  | no       | —       |                                                                                                                                                                                                                                                                                    |
-| `selectionDisabled` | `boolean`  | no       | —       |                                                                                                                                                                                                                                                                                    |
+| `selected`          | `boolean`  | no       | —       | Whether the row's selection checkbox is checked. Required in selectable tables alongside `onselectedchange` and `selectionLabel`.                                                                                                                                                  |
+| `selectionDisabled` | `boolean`  | no       | —       | When true, renders a disabled selection checkbox for this row, preventing selection while keeping the alignment cell.                                                                                                                                                              |
 | `selectionLabel`    | `string`   | no       | —       | Accessible name for the disabled selection checkbox. Provide a localised string to override the English default ("Selection not allowed for this row"). The library cannot localise on the consumer's behalf, so this is the seam for non-English applications or custom phrasing. |
-| `children`          | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                         |
-| `onSelectedChange`  | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                         |
+| `children`          | `(opaque)` | yes      | —       | Cell children (TableCell or TableHeaderCell). Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                           |
+| `onselectedchange`  | `(opaque)` | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                         |
 
 <!-- generated:props:end -->
 

package/src/components/table-row/table-row.svelte

@@ -30,9 +30,10 @@
     class: className,
     children,
     selected,
-    onSelectedChange,
+    onselectedchange,
     selectionLabel,
     selectionDisabled,
+    ...rest
   }: TableRowProps = $props();
 
   const table = tryGetTableContext();
@@ -49,13 +50,13 @@
       if (!hasDisabled) {
         // All three must be present — reject partial trios.
         const hasSelected = selected !== undefined;
-        const hasOnChange = onSelectedChange !== undefined;
+        const hasOnChange = onselectedchange !== undefined;
         const hasLabel = selectionLabel !== undefined;
         if (!hasSelected || !hasOnChange || !hasLabel) {
           throw new Error(
             '[Cinder] TableRow: when Table.selectable is true, each body row must supply ' +
-              'selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. ' +
-              `Missing: ${[!hasSelected && 'selected', !hasOnChange && 'onSelectedChange', !hasLabel && 'selectionLabel'].filter(Boolean).join(', ')}.`,
+              'selected + onselectedchange + selectionLabel together, or set selectionDisabled={true}. ' +
+              `Missing: ${[!hasSelected && 'selected', !hasOnChange && 'onselectedchange', !hasLabel && 'selectionLabel'].filter(Boolean).join(', ')}.`,
           );
         }
       }
@@ -72,12 +73,12 @@
 
   function handleSelectAllChange(event: Event): void {
     const input = event.currentTarget as HTMLInputElement;
-    headerSelection?.onSelectAll(input.checked);
+    headerSelection?.onselectall(input.checked);
   }
 
   function handleRowChange(event: Event): void {
     const input = event.currentTarget as HTMLInputElement;
-    onSelectedChange?.(input.checked);
+    onselectedchange?.(input.checked);
   }
 
   const shouldRenderHeaderSelectionCell =
@@ -88,7 +89,7 @@
   }
 </script>
 
-<tr class={classNames('cinder-table__row', className)}>
+<tr {...rest} class={classNames('cinder-table__row', className)}>
   {#if shouldRenderHeaderSelectionCell && headerSelection}
     <th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection">
       <input

package/src/components/table-row/table-row.types.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 
 /**
  * Discriminated union for row selection props.
  *
- * - Active branch: supply `selected` + `onSelectedChange` + `selectionLabel`.
+ * - Active branch: supply `selected` + `onselectedchange` + `selectionLabel`.
  * - Opt-out branch: supply `selectionDisabled: true` — renders an empty alignment cell.
  * - Inert branch: supply nothing — only valid when `Table.selectable` is false or
  *   the row is inside `TableHeader`.
@@ -12,19 +13,21 @@ import type { Snippet } from 'svelte';
  * object at destructuring time. TypeScript cannot narrow the active vs inert
  * branch after destructuring. Runtime validation enforces the contract when
  * `Table.selectable` is true — both `selected` and `selectionLabel` are
- * required together and `onSelectedChange` must be present.
+ * required together and `onselectedchange` must be present.
  */
 export type TableRowSelectionProps =
   | {
+      /** Whether the row's selection checkbox is checked. Required in selectable tables alongside `onselectedchange` and `selectionLabel`. */
       selected: boolean;
-      onSelectedChange: (next: boolean) => void;
+      onselectedchange: (next: boolean) => void;
       selectionLabel: string;
       selectionDisabled?: false;
     }
   | {
+      /** When true, renders a disabled selection checkbox for this row, preventing selection while keeping the alignment cell. */
       selectionDisabled: true;
       selected?: undefined;
-      onSelectedChange?: undefined;
+      onselectedchange?: undefined;
       /**
        * Accessible name for the disabled selection checkbox. Provide a localised
        * string to override the English default ("Selection not allowed for this
@@ -35,12 +38,12 @@ export type TableRowSelectionProps =
     }
   | {
       selected?: undefined;
-      onSelectedChange?: undefined;
+      onselectedchange?: undefined;
       selectionLabel?: undefined;
       selectionDisabled?: undefined;
     };
 
-export type TableRowProps = {
+export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'class'> & {
   /** Additional class names merged with `.cinder-table__row`. */
   class?: string;
   /** Cell children (TableCell or TableHeaderCell). */

package/src/components/tabs/README.md

@@ -64,7 +64,8 @@ trailing badge alone to convey it.
 | `class`           | `string`                       | no       | —       | Additional class names merged with `.cinder-tabs`.                                                                                                                                                            |
 | `orientation`     | `"horizontal"` \| `"vertical"` | no       | —       | Layout orientation. Affects which arrow keys move between tabs.                                                                                                                                               |
 | `value`           | `string`                       | no       | —       | Bound active tab value.                                                                                                                                                                                       |
-| `children`        | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                    |
+| `children`        | `(opaque)`                     | yes      | —       | Tab and TabPanel children. Not expressible in JSON Schema; see the component types for the signature.                                                                                                         |
+| `onValueChange`   | `(opaque)`                     | no       | —       | Intercept a proposed tab value before the bindable value is written. Return a replacement value to transform it. Not expressible in JSON Schema; see the component types for the signature.                   |
 
 <!-- generated:props:end -->
 

package/src/components/tabs/tabs.css

@@ -57,6 +57,7 @@
     padding: var(--cinder-space-2) var(--cinder-space-3);
     font: inherit;
     font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
     color: var(--cinder-text-muted);
     cursor: pointer;
     position: relative;
@@ -96,7 +97,6 @@
 
   .cinder-tab[data-cinder-active] {
     color: var(--cinder-accent-text);
-    font-weight: var(--cinder-font-medium);
   }
 
   /* Active indicator — bottom (horizontal) / right (vertical) accent stripe. */

package/src/components/tabs/tabs.svelte

@@ -21,11 +21,13 @@
 
   import { handleRovingKeydown, isRovingKey } from '../../utilities/roving-tabindex.ts';
   import { classNames } from '../../utilities/class-names.ts';
+  import { commitValue } from '../../utilities/value-change.ts';
 
   const baseId = $props.id();
 
   let {
     value = $bindable(''),
+    onValueChange,
     orientation = 'horizontal',
     activateOnFocus,
     class: className,
@@ -124,7 +126,9 @@
       const focusedValue = order[focused];
       if (focusedValue === undefined) return;
       event.preventDefault();
-      value = focusedValue;
+      commitValue(focusedValue, onValueChange, (next) => {
+        value = next;
+      });
       return;
     }
 
@@ -154,7 +158,9 @@
     if (nextValue === undefined) return;
     focusValue(nextValue);
     if (effectiveActivateOnFocus) {
-      value = nextValue;
+      commitValue(nextValue, onValueChange, (next) => {
+        value = next;
+      });
     }
   }
 
@@ -172,7 +178,9 @@
       return baseId;
     },
     select(next) {
-      value = next;
+      commitValue(next, onValueChange, (nextValue) => {
+        value = nextValue;
+      });
     },
     isActive(candidate) {
       return value === candidate;

package/src/components/tabs/tabs.types.ts

@@ -58,6 +58,8 @@ export type TabsContext = {
 export type TabsProps = {
   /** Bound active tab value. */
   value?: string;
+  /** Intercept a proposed tab value before the bindable value is written. Return a replacement value to transform it. */
+  onValueChange?: (next: string) => string | void;
   /** Layout orientation. Affects which arrow keys move between tabs. */
   orientation?: TabsOrientation;
   /**

package/src/components/tag-input/README.md

@@ -26,35 +26,35 @@ Free-form token entry field that turns committed text into removable tags while
 
 <!-- generated:props:start -->
 
-| Prop               | Type                                                                                                          | Required | Default | Description                                                                                                                |
-| ------------------ | ------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `allowDuplicates`  | `boolean`                                                                                                     | no       | —       | Allow the same trimmed tag value to appear more than once.                                                                 |
-| `aria-describedby` | `string` \| `null`                                                                                            | no       | —       | Additional description ids composed into the visible input aria-describedby chain.                                         |
-| `aria-invalid`     | `false` \| `true` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` \| `null`                           | no       | —       | Manual invalid-state override used when no inline validation message or FormField invalid state is active.                 |
-| `aria-label`       | `string` \| `null`                                                                                            | no       | —       | Accessible label applied when no labelled-by chain is present.                                                             |
-| `aria-labelledby`  | `string` \| `null`                                                                                            | no       | —       | Element ids that label both the text input and the committed-tag listbox.                                                  |
-| `autocapitalize`   | `"off"` \| `"on"` \| `"characters"` \| `"none"` \| `"sentences"` \| `"words"` \| `null`                       | no       | —       | Autocapitalization hint forwarded to the visible text input.                                                               |
-| `class`            | `string`                                                                                                      | no       | —       | Additional class merged onto the root element.                                                                             |
-| `defaultValue`     | `string`[]                                                                                                    | no       | —       | Initial tags for uncontrolled usage. Ignored after mount.                                                                  |
-| `disabled`         | `boolean`                                                                                                     | no       | —       | Disable the input and chip removal affordances.                                                                            |
-| `enterkeyhint`     | `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"search"` \| `"send"` \| `null`               | no       | —       | Virtual-keyboard Enter hint forwarded to the visible text input.                                                           |
-| `id`               | `string`                                                                                                      | no       | —       | Stable id for the visible text input. Falls back to FormField context or a generated id.                                   |
-| `inputmode`        | `"email"` \| `"tel"` \| `"url"` \| `"none"` \| `"search"` \| `"text"` \| `"numeric"` \| `"decimal"` \| `null` | no       | —       | Virtual-keyboard input mode forwarded to the visible text input.                                                           |
-| `max`              | `number`                                                                                                      | no       | —       | Maximum number of tags allowed. Non-finite values disable the cap.                                                         |
-| `maxlength`        | `number` \| `null`                                                                                            | no       | —       | Maximum pending-text length forwarded to the visible text input.                                                           |
-| `name`             | `string`                                                                                                      | no       | —       | Hidden input name used for native form submission; one hidden field is rendered per tag.                                   |
-| `placeholder`      | `string` \| `null`                                                                                            | no       | —       | Placeholder text shown while the pending tag input is empty.                                                               |
-| `readonly`         | `boolean`                                                                                                     | no       | —       | Render the pending-tag input as read-only and make committed tags non-removable.                                           |
-| `spellcheck`       | `false` \| `true` \| `"true"` \| `"false"` \| `null`                                                          | no       | —       | Spellcheck setting forwarded to the visible text input.                                                                    |
-| `value`            | `string`[]                                                                                                    | no       | —       | Controlled tags. When provided, the parent owns the tag array.                                                             |
-| `autocomplete`     | `(opaque)`                                                                                                    | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
-| `delimiter`        | `(opaque)`                                                                                                    | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                    |
-| `onblur`           | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onchange`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onfocus`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `oninput`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onkeydown`        | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `validate`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| Prop               | Type                                                                                                          | Required | Default | Description                                                                                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `allowDuplicates`  | `boolean`                                                                                                     | no       | —       | Allow the same trimmed tag value to appear more than once.                                                                                                 |
+| `aria-describedby` | `string` \| `null`                                                                                            | no       | —       | Additional description ids composed into the visible input aria-describedby chain.                                                                         |
+| `aria-invalid`     | `false` \| `true` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` \| `null`                           | no       | —       | Manual invalid-state override used when no inline validation message or FormField invalid state is active.                                                 |
+| `aria-label`       | `string` \| `null`                                                                                            | no       | —       | Accessible label applied when no labelled-by chain is present.                                                                                             |
+| `aria-labelledby`  | `string` \| `null`                                                                                            | no       | —       | Element ids that label both the text input and the committed-tag listbox.                                                                                  |
+| `autocapitalize`   | `"off"` \| `"on"` \| `"characters"` \| `"none"` \| `"sentences"` \| `"words"` \| `null`                       | no       | —       | Autocapitalization hint forwarded to the visible text input.                                                                                               |
+| `class`            | `string`                                                                                                      | no       | —       | Additional class merged onto the root element.                                                                                                             |
+| `defaultValue`     | `string`[]                                                                                                    | no       | —       | Initial tags for uncontrolled usage. Ignored after mount.                                                                                                  |
+| `disabled`         | `boolean`                                                                                                     | no       | —       | Disable the input and chip removal affordances.                                                                                                            |
+| `enterkeyhint`     | `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"search"` \| `"send"` \| `null`               | no       | —       | Virtual-keyboard Enter hint forwarded to the visible text input.                                                                                           |
+| `id`               | `string`                                                                                                      | no       | —       | Stable id for the visible text input. Falls back to FormField context or a generated id.                                                                   |
+| `inputmode`        | `"email"` \| `"tel"` \| `"url"` \| `"none"` \| `"search"` \| `"text"` \| `"numeric"` \| `"decimal"` \| `null` | no       | —       | Virtual-keyboard input mode forwarded to the visible text input.                                                                                           |
+| `max`              | `number`                                                                                                      | no       | —       | Maximum number of tags allowed. Non-finite values disable the cap.                                                                                         |
+| `maxlength`        | `number` \| `null`                                                                                            | no       | —       | Maximum pending-text length forwarded to the visible text input.                                                                                           |
+| `name`             | `string`                                                                                                      | no       | —       | Hidden input name used for native form submission; one hidden field is rendered per tag.                                                                   |
+| `placeholder`      | `string` \| `null`                                                                                            | no       | —       | Placeholder text shown while the pending tag input is empty.                                                                                               |
+| `readonly`         | `boolean`                                                                                                     | no       | —       | Render the pending-tag input as read-only and make committed tags non-removable.                                                                           |
+| `spellcheck`       | `false` \| `true` \| `"true"` \| `"false"` \| `null`                                                          | no       | —       | Spellcheck setting forwarded to the visible text input.                                                                                                    |
+| `value`            | `string`[]                                                                                                    | no       | —       | Controlled tags. When provided, the parent owns the tag array.                                                                                             |
+| `autocomplete`     | `(opaque)`                                                                                                    | no       | —       | Autocomplete hint forwarded to the visible text input. Not expressible in JSON Schema; see the component types for the signature.                          |
+| `delimiter`        | `(opaque)`                                                                                                    | no       | —       | Key that commits the current input into a tag. Enter always commits separately. Not expressible in JSON Schema; see the component types for the signature. |
+| `onblur`           | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
+| `onchange`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
+| `onfocus`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
+| `oninput`          | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
+| `onkeydown`        | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
+| `validate`         | `(opaque)`                                                                                                    | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                 |
 
 <!-- generated:props:end -->
 

package/src/components/tag-input/tag-input.css

@@ -77,9 +77,9 @@
     max-inline-size: 100%;
     padding-inline: var(--cinder-space-2);
     padding-block: var(--cinder-space-1);
-    border: 1px solid var(--cinder-border-muted);
+    border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-full);
-    background: var(--cinder-surface-inset);
+    background: color-mix(in oklch, var(--cinder-surface-inset), var(--cinder-surface) 60%);
     color: var(--cinder-text);
     cursor: default;
   }

package/src/components/tag-input/tag-input.examples.json

@@ -7,7 +7,7 @@
       "id": "basic",
       "title": "Basic tag input",
       "description": "Commit free-form tags with Enter or a comma delimiter.",
-      "code": "<script lang=\"ts\">\n  import { FormField, TagInput } from '@lostgradient/cinder';\n</script>\n\n<FormField\n  id=\"basic-tag-input\"\n  label=\"Topics\"\n  description=\"Press Enter or comma to turn the current text into a tag.\"\n>\n  <TagInput placeholder=\"Add a topic…\" />\n</FormField>\n"
+      "code": "<script lang=\"ts\">\n  import { FormField, TagInput } from '@lostgradient/cinder';\n\n</script>\n\n<FormField\n  id=\"field\"\n  label=\"Topics\"\n  description=\"Press Enter or comma to turn the current text into a tag.\"\n>\n  <TagInput placeholder=\"Add a topic…\" />\n</FormField>\n"
     },
     {
       "id": "disabled",
@@ -27,6 +27,12 @@
       "description": "Start uncontrolled with existing tags and keep editing in place.",
       "code": "<script lang=\"ts\">\n  import { FormField, TagInput } from '@lostgradient/cinder';\n</script>\n\n<FormField\n  id=\"prepopulated-tag-input\"\n  label=\"Technologies\"\n  description=\"Review the initial stack and remove anything that does not apply.\"\n>\n  <TagInput defaultValue={['Svelte', 'Bun', 'TypeScript']} placeholder=\"Add a technology…\" />\n</FormField>\n"
     },
+    {
+      "id": "readonly",
+      "title": "Read-only tags",
+      "description": "With `readonly`, the committed tags stay visible but cannot be removed and the pending-tag input rejects new entries — distinct from `disabled`, which also dims the whole control.",
+      "code": "<script lang=\"ts\">\n  import { FormField, TagInput } from '@lostgradient/cinder';\n</script>\n\n<FormField\n  id=\"readonly-tag-input\"\n  label=\"Applied filters\"\n  description=\"These filters are fixed for this report and cannot be edited.\"\n>\n  <TagInput readonly defaultValue={['Svelte', 'Bun', 'TypeScript']} />\n</FormField>\n"
+    },
     {
       "id": "validation",
       "title": "Validated email tags",

package/src/components/tag-input/tag-input.svelte

@@ -25,6 +25,7 @@
     composeDescribedBy,
     resolveFieldControl,
   } from '../../_internal/field-control.ts';
+  import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
   import { getFormFieldContext } from '../../_internal/form-field-context.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { handleRovingKeydown, isRovingKey } from '../../utilities/roving-tabindex.ts';
@@ -69,6 +70,16 @@
   let inlineError = $state<string | null>(null);
   let uncontrolledTags = $state(initialDefaultTags);
   let focusedChipIndex = $state(-1);
+  let statusAnnouncement = $state('');
+  // Bumped on every announce so the live region re-fires even when two consecutive
+  // announcements share the same text (e.g. adding the same tag again) — a same-value
+  // `$state` assignment is a no-op in Svelte 5 and would otherwise be swallowed.
+  let statusAnnouncementSequence = $state(0);
+
+  function announceStatus(announcement: string): void {
+    statusAnnouncement = announcement;
+    statusAnnouncementSequence += 1;
+  }
 
   const isControlled = $derived(value !== undefined);
   const currentTags = $derived(isControlled ? (value ?? []) : uncontrolledTags);
@@ -228,14 +239,17 @@
     draftValue = '';
     focusedChipIndex = -1;
     setTags([...currentTags, candidate]);
+    announceStatus(`${candidate} added.`);
     return true;
   }
 
   function removeTag(index: number): void {
     if (field.disabled || resolvedReadonly) return;
     inlineError = null;
+    const removed = currentTags[index] ?? '';
     const nextTags = currentTags.filter((_, candidateIndex) => candidateIndex !== index);
     setTags(nextTags);
+    if (removed) announceStatus(`${removed} removed.`);
   }
 
   function focusAfterRemove(index: number): void {
@@ -416,4 +430,8 @@
       <input type="hidden" {name} value={tag} disabled={field.disabled} />
     {/each}
   {/if}
+  <VisuallyHiddenLiveRegion
+    message={statusAnnouncement}
+    announcementSequence={statusAnnouncementSequence}
+  />
 </div>

package/src/components/textarea/README.md

@@ -23,10 +23,12 @@ Multi-line text input for longer freeform content with optional resize control.
 | `error`       | `string`   | no       | —       | Validation error message; sets `aria-invalid="true"` and `aria-describedby`.                                                                                                                                                                                                                                                                           |
 | `id`          | `string`   | yes      | —       | Unique identifier — required for label association and ARIA wiring.                                                                                                                                                                                                                                                                                    |
 | `label`       | `string`   | no       | —       | Visible label rendered in a `<label>` element associated via `for`.                                                                                                                                                                                                                                                                                    |
+| `maxlength`   | `number`   | no       | —       | Maximum character count. Passed through to the native `maxlength` attribute and shown as the limit in the `showCount` counter.                                                                                                                                                                                                                         |
+| `required`    | `boolean`  | no       | —       | Marks the field as required. Passed through to the native `required` attribute.                                                                                                                                                                                                                                                                        |
 | `rows`        | `number`   | no       | —       | Number of visible text rows. Defaults to 4.                                                                                                                                                                                                                                                                                                            |
 | `showCount`   | `boolean`  | no       | —       | When `true` AND `maxlength` is set, renders a live character counter (`{value.length}/{maxlength}`) below the textarea. The counter element is wired into `aria-describedby` so screen readers announce it as part of the field's description, and it is also placed inside an `aria-live="polite"` region so updates are announced as the user types. |
-| `class`       | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                |
-| `value`       | `(opaque)` | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                |
+| `class`       | `(opaque)` | no       | —       | Extra class names merged with `.cinder-textarea`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                           |
+| `value`       | `(opaque)` | no       | —       | Bound value of the textarea. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                |
 
 <!-- generated:props:end -->
 

package/src/components/textarea/textarea.css

@@ -21,13 +21,20 @@
  * ---------------------------------------- */
 
   .cinder-textarea-label {
-    display: block;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     line-height: 1;
     color: var(--cinder-text);
   }
 
+  .cinder-textarea-label[data-disabled] {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
   /* ----------------------------------------
  * Textarea control
  * ---------------------------------------- */
@@ -93,11 +100,20 @@
   }
 
   .cinder-textarea[aria-invalid='true']:focus-visible {
+    border-color: transparent;
     box-shadow:
       0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-danger);
   }
 
+  @media (forced-colors: active) {
+    .cinder-textarea[aria-invalid='true']:focus-visible {
+      outline: var(--cinder-ring-width) solid Mark;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   /* ----------------------------------------
  * Disabled state
  * ---------------------------------------- */

package/src/components/textarea/textarea.examples.json

@@ -7,7 +7,25 @@
       "id": "basic",
       "title": "Basic textarea",
       "description": "Multi-line text input with label and bound value.",
-      "code": "<script lang=\"ts\">\n  import { Textarea } from '@lostgradient/cinder/textarea';\n  let bio = $state('');\n</script>\n\n<Textarea\n  id=\"bio\"\n  bind:value={bio}\n  label=\"Bio\"\n  description=\"Tell us a little about yourself.\"\n  placeholder=\"I'm a designer who…\"\n/>\n{#if bio.length > 0}\n  <p style=\"margin-top: 0.5rem; color: var(--cinder-text-muted);\">{bio.length} characters</p>\n{/if}\n"
+      "code": "<script lang=\"ts\">\n  import { Textarea } from '@lostgradient/cinder/textarea';\n\n  let bio = $state('');\n</script>\n\n<Textarea\n  id=\"field\"\n  bind:value={bio}\n  label=\"Bio\"\n  description=\"Tell us a little about yourself.\"\n  placeholder=\"I'm a designer who…\"\n/>\n{#if bio.length > 0}\n  <p style=\"margin-top: 0.5rem; color: var(--cinder-text-muted);\">{bio.length} characters</p>\n{/if}\n"
+    },
+    {
+      "id": "disabled",
+      "title": "Disabled textarea",
+      "description": "A disabled textarea is dimmed and non-editable; its value is still shown so context is preserved while editing is locked.",
+      "code": "<script lang=\"ts\">\n  import { Textarea } from '@lostgradient/cinder/textarea';\n\n</script>\n\n<Textarea\n  id=\"field\"\n  value=\"This account note is read-only and managed by your administrator.\"\n  label=\"Account note\"\n  description=\"Contact an administrator to change this.\"\n  disabled\n/>\n"
+    },
+    {
+      "id": "required",
+      "title": "Required textarea",
+      "description": "Setting `required` forwards the native `required` attribute, which browsers expose as `aria-required=\"true\"` and enforce during form submission.",
+      "code": "<script lang=\"ts\">\n  import { Textarea } from '@lostgradient/cinder/textarea';\n\n  let message = $state('');\n</script>\n\n<Textarea\n  id=\"field\"\n  bind:value={message}\n  label=\"Message\"\n  description=\"This field is required.\"\n  required\n/>\n"
+    },
+    {
+      "id": "with-character-count",
+      "title": "Live character counter",
+      "description": "Set `showCount` together with `maxlength` to render a live `{used}/{limit}` counter below the field that updates as the user types.",
+      "code": "<script lang=\"ts\">\n  import { Textarea } from '@lostgradient/cinder/textarea';\n\n  let summary = $state('A short product summary.');\n</script>\n\n<Textarea\n  id=\"field\"\n  bind:value={summary}\n  label=\"Summary\"\n  description=\"Keep it under 200 characters.\"\n  showCount\n  maxlength={200}\n/>\n"
     },
     {
       "id": "with-error",

package/src/components/textarea/textarea.svelte

@@ -62,7 +62,12 @@
 
 <div class="cinder-textarea-field">
   {#if label}
-    <label for={id} class="cinder-textarea-label">{label}</label>
+    <label for={id} class="cinder-textarea-label" data-disabled={field.disabled || undefined}>
+      {label}
+      {#if field.required}
+        <span class="cinder-_required-marker" aria-hidden="true">*</span>
+      {/if}
+    </label>
   {/if}
   <textarea
     {id}

package/src/components/textarea/textarea.types.ts

@@ -12,6 +12,16 @@ export type TextareaProps = HTMLTextareaAttributes & {
   error?: string;
   /** Number of visible text rows. Defaults to 4. */
   rows?: number;
+  // `required` and `maxlength` redeclare inherited `HTMLTextareaAttributes` keys,
+  // deliberately narrowing them from `… | null` to clean `boolean` / `number`. The
+  // native "remove the attribute" `null` is noise in the documented prop surface
+  // (this mirrors how `rows` above narrows its inherited type). Both props are
+  // explicitly destructured in textarea.svelte, so the narrowed type is the only
+  // accepted shape — there is no `...rest` escape hatch. textarea.test.ts pins this.
+  /** Marks the field as required. Passed through to the native `required` attribute. */
+  required?: boolean;
+  /** Maximum character count. Passed through to the native `maxlength` attribute and shown as the limit in the `showCount` counter. */
+  maxlength?: number;
   /** Disables the textarea. */
   disabled?: boolean;
   /** Extra class names merged with `.cinder-textarea`. */