@lostgradient/cinder 0.1.1 → 0.3.0

package/src/components/table/table.css

@@ -32,7 +32,7 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  .cinder-table-scroll > .cinder-table {
+  .cinder-table-scroll .cinder-table {
     min-inline-size: max-content;
   }
 
@@ -59,13 +59,26 @@
     z-index: 1;
   }
 
+  /* A native <caption> (caption-side: top) renders above the table's border box
+   * but inside the same scroll container, so a sticky <thead> pinned at top: 0
+   * would scroll up and overlap it. Offset the sticky threshold by the caption's
+   * MEASURED border-box height (set on the table by a ResizeObserver in
+   * table.svelte as --cinder-table-caption-height) so the header pins just below
+   * the real caption — including when the caption wraps to multiple lines, which
+   * a hard-coded `1lh` assumption could not handle. Scoped with :has(caption) so
+   * a caption-less sticky table keeps top: 0; the var falls back to 0px before
+   * the first measurement. */
+  .cinder-table[data-cinder-sticky-header]:has(caption) .cinder-table__header {
+    top: var(--cinder-table-caption-height, 0px);
+  }
+
   .cinder-table__header-cell {
     padding-block: var(--cinder-space-2);
     padding-inline: var(--cinder-space-3);
     text-align: left;
     font-weight: var(--cinder-font-medium);
     color: var(--cinder-text-muted);
-    border-bottom: 1px solid var(--cinder-border-muted);
+    border-bottom: 1px solid var(--cinder-border);
     text-wrap: balance;
   }
 
@@ -149,6 +162,12 @@
     z-index: 2;
   }
 
+  @media (hover: hover) {
+    .cinder-table__sort-button:hover {
+      background: var(--cinder-surface-hover);
+    }
+  }
+
   .cinder-table__sort-indicator {
     display: inline-flex;
     color: var(--cinder-text-subtle);
@@ -161,7 +180,7 @@
 
   .cinder-table__sort-indicator[data-cinder-direction='ascending'] .cinder-table__sort-chevron-down,
   .cinder-table__sort-indicator[data-cinder-direction='descending'] .cinder-table__sort-chevron-up {
-    opacity: 0.3;
+    opacity: 0.15;
   }
 
   /* ----------------------------------------
@@ -181,7 +200,7 @@
   .cinder-table__cell {
     padding-block: var(--cinder-space-2);
     padding-inline: var(--cinder-space-3);
-    border-bottom: 1px solid var(--cinder-border-muted);
+    border-bottom: 1px solid var(--cinder-border);
   }
 
   .cinder-table__cell[data-cinder-align='center'] {

package/src/components/table/table.svelte

@@ -28,6 +28,7 @@
   import type { TableProps } from './table.types.ts';
 
   import { classNames } from '../../utilities/class-names.ts';
+  import { useResizeObserver } from '../../utilities/use-resize-observer.svelte.ts';
 
   let {
     sort = $bindable(),
@@ -37,8 +38,30 @@
     selectable = false,
     class: className,
     children,
+    ...rest
   }: TableProps = $props();
 
+  // A native <caption> (caption-side: top) renders above the table's border box
+  // but inside the same scroll container, so a sticky <thead> pinned at top: 0
+  // would overlap it. The caption's height is not knowable in pure CSS — `1lh`
+  // would assume a single line and break when the caption wraps (narrow
+  // container, long/localized text, large text settings). Measure the caption's
+  // border-box block size and expose it as a custom property the sticky `top`
+  // calc consumes, so the header always pins just below the real caption.
+  let captionHeight = $state(0);
+
+  // Only the sticky-header `top` calc consumes `captionHeight`, so a non-sticky
+  // captioned table has no reason to run a ResizeObserver. Gate observation on
+  // `stickyHeader` to avoid the work in the common case.
+  const measureCaption = useResizeObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+    },
+    { box: 'border-box', enabled: () => stickyHeader },
+  );
+
   function onSortChange(column: string): void {
     if (!sort || sort.column !== column) {
       sort = { column, direction: 'ascending' };
@@ -63,13 +86,15 @@
 </script>
 
 <table
+  {...rest}
   class={classNames('cinder-table', className)}
   data-cinder-sticky-header={stickyHeader || undefined}
   data-cinder-density={density}
   data-cinder-selectable={selectable || undefined}
+  style:--cinder-table-caption-height={caption ? `${captionHeight}px` : undefined}
 >
   {#if caption}
-    <caption class="cinder-table__caption">{caption}</caption>
+    <caption class="cinder-table__caption" {@attach measureCaption}>{caption}</caption>
   {/if}
   {@render children()}
 </table>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { HTMLTableAttributes } from 'svelte/elements';
 /** Sort direction. */
 export type SortDirection = 'ascending' | 'descending';
 /** Bound sort state shape. */
@@ -48,7 +49,7 @@ export type TableContext = {
  * columns, or aggregate. The consumer owns data ordering and dispatches sort
  * intents through the `sort` bindable.
  */
-export type TableProps = {
+export type TableProps = Omit<HTMLTableAttributes, 'class'> & {
   /**
    * Bound sort state. When the user activates a sortable header, this prop
    * is updated to reflect the new column / direction.

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

@@ -14,10 +14,10 @@ snippet. The flat `@lostgradient/cinder/table-body` subpath remains exported for
 
 <!-- generated:props:start -->
 
-| Prop       | Type       | Required | Default | Description                                                                                                                |
-| ---------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `class`    | `string`   | no       | —       | Additional class names merged with `.cinder-table__body`.                                                                  |
-| `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. |
+| Prop       | Type       | Required | Default | Description                                                                              |
+| ---------- | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------- |
+| `class`    | `string`   | no       | —       | Additional class names merged with `.cinder-table__body`.                                |
+| `children` | `(opaque)` | yes      | —       | Row children. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->
 

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

@@ -14,11 +14,12 @@ snippet. The flat `@lostgradient/cinder/table-cell` subpath remains exported for
 
 <!-- generated:props:start -->
 
-| Prop       | Type                                | Required | Default | Description                                                                                                                |
-| ---------- | ----------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `align`    | `"left"` \| `"center"` \| `"right"` | no       | —       | Visual alignment for numeric columns.                                                                                      |
-| `class`    | `string`                            | no       | —       | Additional class names merged with `.cinder-table__cell`.                                                                  |
-| `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. |
+| Prop       | Type                                | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ---------- | ----------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `align`    | `"left"` \| `"center"` \| `"right"` | no       | —       | Visual alignment for numeric columns.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `as`       | `"td"` \| `"th"`                    | no       | —       | When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this cell as the row-header identifier for assistive technology. The component sets `scope="row"` itself (so `scope` is not part of the prop surface). Defaults to `'td'` so existing consumers are unaffected. The attribute surface is `HTMLTdAttributes` for both modes — `<td>` and `<th>` share `HTMLTableCellElement`, so `colspan`, `rowspan`, `headers`, and `abbr` are all forwarded regardless of `as`. Only `scope` is removed from the prop surface, because the component owns it (`scope="row"` when `as='th'`). |
+| `class`    | `string`                            | no       | —       | Additional class names merged with `.cinder-table__cell`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `children` | `(opaque)`                          | no       | —       | Cell content. Optional so that empty `<td>` cells (used in spanning table layouts) are a valid, non-throwing state. When omitted the cell renders empty, which is valid HTML for a `<td>`. **Note for TypeScript consumers:** the Snippet type is never called externally by consuming code — Svelte's compiler handles invocation internally. Making this optional is therefore safe as an API change: no external caller calls `props.children()` on a Svelte component's props. Not expressible in JSON Schema; see the component types for the signature.                                       |
 
 <!-- generated:props:end -->
 

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

@@ -18,9 +18,15 @@
   import type { TableCellProps } from './table-cell.types.ts';
   import { classNames } from '../../utilities/class-names.ts';
 
-  let { align = 'left', class: className, children, ...rest }: TableCellProps = $props();
+  let { align = 'left', as = 'td', class: className, children, ...rest }: TableCellProps = $props();
 </script>
 
-<td {...rest} class={classNames('cinder-table__cell', className)} data-cinder-align={align}>
+<svelte:element
+  this={as}
+  {...rest}
+  scope={as === 'th' ? 'row' : undefined}
+  class={classNames('cinder-table__cell', className)}
+  data-cinder-align={align}
+>
   {@render children?.()}
-</td>
+</svelte:element>

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

@@ -1,9 +1,21 @@
 import type { Snippet } from 'svelte';
 import type { HTMLTdAttributes } from 'svelte/elements';
 
-export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align'> & {
+export type TableCellProps = Omit<HTMLTdAttributes, 'class' | 'align' | 'scope'> & {
   /** Visual alignment for numeric columns. */
   align?: 'left' | 'center' | 'right';
+  /**
+   * When `'th'`, renders a `<th scope="row">` instead of `<td>`, marking this
+   * cell as the row-header identifier for assistive technology. The component
+   * sets `scope="row"` itself (so `scope` is not part of the prop surface).
+   * Defaults to `'td'` so existing consumers are unaffected.
+   *
+   * The attribute surface is `HTMLTdAttributes` for both modes — `<td>` and
+   * `<th>` share `HTMLTableCellElement`, so `colspan`, `rowspan`, `headers`, and
+   * `abbr` are all forwarded regardless of `as`. Only `scope` is removed from the
+   * prop surface, because the component owns it (`scope="row"` when `as='th'`).
+   */
+  as?: 'td' | 'th';
   /** Additional class names merged with `.cinder-table__cell`. */
   class?: string;
   /**

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

@@ -20,8 +20,8 @@ snippet. The flat `@lostgradient/cinder/table-header` subpath remains exported f
 | `class`          | `string`   | no       | —       | Additional class names merged with `.cinder-table__header`.                                                                                                                                                                                                                     |
 | `selectAllLabel` | `string`   | no       | —       | Accessible name for the select-all checkbox. Defaults to "Select all rows". When the table contains rows with `selectionDisabled={true}`, pass a more accurate label such as "Select all selectable rows".                                                                      |
 | `someSelected`   | `boolean`  | no       | —       | When true and `allSelected` is false, the select-all checkbox renders as indeterminate. The browser exposes that as `aria-checked="mixed"` to assistive tech. Required (alongside `allSelected` and `onSelectAll`) when `Table.selectable` is true for accurate checkbox state. |
-| `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.                                                                                                                                                      |
-| `onSelectAll`    | `(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      | —       | TableRow children — typically a single header row. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                   |
+| `onSelectAll`    | `(opaque)` | no       | —       | Called when the user activates the select-all checkbox. Required when `Table.selectable` is true. Not expressible in JSON Schema; see the component types for the signature.                                                                                                    |
 
 <!-- generated:props:end -->
 

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-row/README.md

@@ -17,10 +17,10 @@ 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.                                                                                                                                                         |
+| `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

@@ -33,6 +33,7 @@
     onSelectedChange,
     selectionLabel,
     selectionDisabled,
+    ...rest
   }: TableRowProps = $props();
 
   const table = tryGetTableContext();
@@ -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,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 
 /**
  * Discriminated union for row selection props.
@@ -16,12 +17,14 @@ import type { Snippet } from 'svelte';
  */
 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;
       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;
@@ -40,7 +43,7 @@ export type TableRowSelectionProps =
       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,7 @@ 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.                                                                                                         |
 
 <!-- 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/tag-input/README.md

@@ -0,0 +1,75 @@
+# TagInput
+
+Free-form token entry field that turns committed text into removable tags while keeping native input, form, and accessibility wiring intact.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { TagInput } from '@lostgradient/cinder/tag-input';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Collecting zero or more short free-form values such as labels, emails, or technologies.
+- Letting users review and remove committed values inline before submitting a form.
+
+### Avoid When
+
+- Users must choose from a fixed option list — use combobox instead.
+- The value is a single free-form string rather than a list — use input instead.
+
+## Props
+
+<!-- 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       | —       | 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 -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents: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

@@ -93,6 +93,7 @@
   }
 
   .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);

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.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`. */