@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/status-dot/status-dot.svelte

@@ -3,11 +3,15 @@
    * @cinder
    * @category feedback
    * @status stable
-   * @purpose Static role="img" badge that communicates an entity's state through a colored dot with an accessible text label.
+   * @purpose Colored dot indicator that communicates static entity state or live realtime connection state with an accessible text label.
+   * @tag connection
    * @tag feedback
+   * @tag realtime
    * @tag status
    * @useWhen Indicating the current state of a list row, user, deployment, or other entity alongside its name.
    * @useWhen Communicating status compactly when many indicators appear together without triggering live-region announcements.
+   * @useWhen Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
+   * @useWhen Giving operators an at-a-glance health signal for a long-lived transport.
    * @avoidWhen Counting items or showing a numeric value — use badge instead.
    * @avoidWhen Announcing a transient status change — use toast-region or alert so assistive tech reads it.
    * @related badge
@@ -17,11 +21,31 @@
 
 <script lang="ts">
   import { classNames } from '../../utilities/class-names.ts';
-  import type { StatusDotProps } from './status-dot.types.ts';
+  import type {
+    StatusDotConnectionState,
+    StatusDotProps,
+    StatusDotStatus,
+  } from './status-dot.types.ts';
+
+  const connectionStatusMap: Record<StatusDotConnectionState, StatusDotStatus> = {
+    connected: 'online',
+    connecting: 'warning',
+    disconnected: 'offline',
+    error: 'danger',
+  };
+
+  const connectionLabels: Record<StatusDotConnectionState, string> = {
+    connected: 'Connected',
+    connecting: 'Connecting',
+    disconnected: 'Disconnected',
+    error: 'Error',
+  };
 
   let {
     status,
+    connectionState,
     label,
+    live,
     showLabel = true,
     size = 'md',
     class: className,
@@ -30,12 +54,28 @@
   }: StatusDotProps = $props();
 
   const normalizedAriaLabel = $derived(ariaLabel?.trim() ? ariaLabel.trim() : undefined);
-  const normalizedLabel = $derived(label?.trim() ? label.trim() : undefined);
+  const resolvedStatus = $derived(
+    status ?? (connectionState === undefined ? 'neutral' : connectionStatusMap[connectionState]),
+  );
+  const resolvedLive = $derived(live ?? connectionState !== undefined);
+  const normalizedLabel = $derived(
+    label?.trim()
+      ? label.trim()
+      : connectionState === undefined
+        ? undefined
+        : connectionLabels[connectionState],
+  );
   const hasVisibleLabel = $derived(showLabel && normalizedLabel !== undefined);
 
   // `role="img"` needs an author-provided name. Blank labels are treated as
   // absent so status is never communicated by color alone.
-  const resolvedAriaLabel = $derived(normalizedAriaLabel ?? normalizedLabel ?? status);
+  const resolvedAriaLabel = $derived(normalizedAriaLabel ?? normalizedLabel ?? resolvedStatus);
+  const visibleLabelIsLiveDuplicate = $derived(
+    resolvedLive && normalizedLabel !== undefined && resolvedAriaLabel !== normalizedLabel,
+  );
+  const needsHiddenLiveLabel = $derived(
+    resolvedLive && (!hasVisibleLabel || visibleLabelIsLiveDuplicate),
+  );
 </script>
 
 <!--
@@ -51,13 +91,22 @@
 <span
   {...rest}
   class={classNames('cinder-status-dot', className)}
-  data-cinder-status={status}
+  data-cinder-status={resolvedStatus}
+  data-cinder-state={connectionState}
   data-cinder-size={size}
-  role="img"
-  aria-label={resolvedAriaLabel}
+  role={resolvedLive ? 'status' : 'img'}
+  aria-live={resolvedLive ? 'polite' : undefined}
+  aria-atomic={resolvedLive ? 'true' : undefined}
+  aria-label={resolvedLive ? undefined : resolvedAriaLabel}
 >
   <span class="cinder-status-dot__indicator" aria-hidden="true"></span>
   {#if hasVisibleLabel}
-    <span class="cinder-status-dot__label">{normalizedLabel}</span>
+    <span
+      class="cinder-status-dot__label"
+      aria-hidden={visibleLabelIsLiveDuplicate ? 'true' : undefined}>{normalizedLabel}</span
+    >
+  {/if}
+  {#if needsHiddenLiveLabel}
+    <span class="cinder-sr-only">{resolvedAriaLabel}</span>
   {/if}
 </span>

package/src/components/status-dot/status-dot.types.ts

@@ -6,7 +6,7 @@ import type { HTMLAttributes } from 'svelte/elements';
  * The string values are stamped onto the root as `data-cinder-status` and
  * drive color exclusively via CSS — there are no hard-coded color classes
  * on the component. The token mapping (e.g. `online` → `--cinder-success`,
- * `error` → `--cinder-danger`) lives in `status-dot.css` so consumers can
+ * `danger` → `--cinder-danger`) lives in `status-dot.css` so consumers can
  * theme without forking the component.
  *
  * - `success` maps to `--cinder-success` (same hue as `online`).
@@ -19,7 +19,7 @@ export type StatusDotStatus =
   | 'online'
   | 'offline'
   | 'warning'
-  | 'error'
+  | 'danger'
   | 'pending'
   | 'neutral'
   | 'success'
@@ -27,6 +27,9 @@ export type StatusDotStatus =
 
 export type StatusDotSize = 'sm' | 'md';
 
+/** Realtime connection states that StatusDot can render as a live-region preset. */
+export type StatusDotConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
+
 /**
  * Props for StatusDot.
  *
@@ -37,10 +40,14 @@ export type StatusDotSize = 'sm' | 'md';
  * fallback.
  */
 export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
-  /** Required semantic status. Drives color via `data-cinder-status`. */
-  status: StatusDotStatus;
+  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. */
+  status?: StatusDotStatus;
+  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+  connectionState?: StatusDotConnectionState;
   /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
   label?: string;
+  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+  live?: boolean;
   /** Whether to render the visible label. Default `true`. */
   showLabel?: boolean;
   /** Dot size. Default `'md'`. */
@@ -50,12 +57,16 @@ export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
 };
 
 export interface StatusDotSchemaProps {
-  /** Required semantic status. Drives color via `data-cinder-status`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
-  status: StatusDotStatus;
+  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
+  status?: StatusDotStatus;
+  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+  connectionState?: StatusDotConnectionState;
   /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
   label?: string;
   /** Whether to render the visible label. @default true */
   showLabel?: boolean;
+  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+  live?: boolean;
   /** Dot size. @default "md" */
   size?: StatusDotSize;
   /** Extra classes appended to the root element. */

package/src/components/steps/steps.css

@@ -191,14 +191,14 @@
     /* Ring uses --cinder-ring-color: the bright fill-accent (L 0.72) is only
        ~1.8:1 against the white marker surface, so the current-step indicator
        would be near-invisible in light mode. */
-    box-shadow: 0 0 0 2px var(--cinder-ring-color);
+    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
     color: var(--cinder-accent-text);
   }
 
   @media (forced-colors: active) {
     [data-cinder-state='current'] .cinder-steps__marker {
-      outline: 2px solid ButtonText;
-      outline-offset: 2px;
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: var(--cinder-ring-width);
       box-shadow: none;
     }
   }

package/src/components/table/table.css

@@ -162,6 +162,16 @@
     z-index: 2;
   }
 
+  @media (forced-colors: active) {
+    .cinder-table__sort-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 2px is correct here: sort-button has border:none so there is no
+         ButtonBorder to merge with at 2px. */
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-table__sort-button:hover {
       background: var(--cinder-surface-hover);

package/src/components/table/table.examples.json

@@ -19,7 +19,7 @@
       "id": "selection",
       "title": "Selectable rows",
       "description": "Table with a select-all checkbox in the header and per-row selection. One row is explicitly disabled from selection.",
-      "code": "<script lang=\"ts\">\n  import { Table } from '@lostgradient/cinder/table';\n  const people = [\n    {\n      id: '1',\n      name: 'Ada Lovelace',\n      role: 'Mathematician',\n      commits: 142,\n      selectionDisabled: false,\n    },\n    {\n      id: '2',\n      name: 'Grace Hopper',\n      role: 'Computer Scientist',\n      commits: 98,\n      selectionDisabled: false,\n    },\n    { id: '3', name: 'Alan Turing', role: 'Cryptanalyst', commits: 76, selectionDisabled: true },\n  ];\n\n  let selectedIds = $state(new Set<string>());\n\n  const selectableRows = $derived(people.filter((p) => !p.selectionDisabled));\n  const allSelected = $derived(\n    selectableRows.length > 0 && selectableRows.every((p) => selectedIds.has(p.id)),\n  );\n  const someSelected = $derived(selectableRows.some((p) => selectedIds.has(p.id)));\n\n  function onSelectAll(next: boolean): void {\n    if (next) {\n      selectedIds = new Set(selectableRows.map((p) => p.id));\n    } else {\n      selectedIds = new Set();\n    }\n  }\n\n  function onRowChange(id: string, next: boolean): void {\n    const updated = new Set(selectedIds);\n    if (next) {\n      updated.add(id);\n    } else {\n      updated.delete(id);\n    }\n    selectedIds = updated;\n  }\n</script>\n\n<Table caption=\"Recent contributors\" selectable>\n  <Table.Header\n    {allSelected}\n    {someSelected}\n    {onSelectAll}\n    selectAllLabel=\"Select all selectable rows\"\n  >\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell align=\"right\">Commits</Table.HeaderCell>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    {#each people as person (person.id)}\n      {#if person.selectionDisabled}\n        <Table.Row selectionDisabled={true}>\n          <Table.Cell>{person.name}</Table.Cell>\n          <Table.Cell>{person.role}</Table.Cell>\n          <Table.Cell align=\"right\">{person.commits}</Table.Cell>\n        </Table.Row>\n      {:else}\n        <Table.Row\n          selected={selectedIds.has(person.id)}\n          onSelectedChange={(next) => onRowChange(person.id, next)}\n          selectionLabel={`Select ${person.name}`}\n        >\n          <Table.Cell>{person.name}</Table.Cell>\n          <Table.Cell>{person.role}</Table.Cell>\n          <Table.Cell align=\"right\">{person.commits}</Table.Cell>\n        </Table.Row>\n      {/if}\n    {/each}\n  </Table.Body>\n</Table>\n\n{#if selectedIds.size > 0}\n  <p style=\"margin-top: 0.75rem; font-size: 0.875rem; color: var(--cinder-text-muted)\">\n    {selectedIds.size} row{selectedIds.size !== 1 ? 's' : ''} selected\n  </p>\n{/if}\n"
+      "code": "<script lang=\"ts\">\n  import { Table } from '@lostgradient/cinder/table';\n  const people = [\n    {\n      id: '1',\n      name: 'Ada Lovelace',\n      role: 'Mathematician',\n      commits: 142,\n      selectionDisabled: false,\n    },\n    {\n      id: '2',\n      name: 'Grace Hopper',\n      role: 'Computer Scientist',\n      commits: 98,\n      selectionDisabled: false,\n    },\n    { id: '3', name: 'Alan Turing', role: 'Cryptanalyst', commits: 76, selectionDisabled: true },\n  ];\n\n  let selectedIds = $state(new Set<string>());\n\n  const selectableRows = $derived(people.filter((p) => !p.selectionDisabled));\n  const allSelected = $derived(\n    selectableRows.length > 0 && selectableRows.every((p) => selectedIds.has(p.id)),\n  );\n  const someSelected = $derived(selectableRows.some((p) => selectedIds.has(p.id)));\n\n  function onSelectAll(next: boolean): void {\n    if (next) {\n      selectedIds = new Set(selectableRows.map((p) => p.id));\n    } else {\n      selectedIds = new Set();\n    }\n  }\n\n  function onRowChange(id: string, next: boolean): void {\n    const updated = new Set(selectedIds);\n    if (next) {\n      updated.add(id);\n    } else {\n      updated.delete(id);\n    }\n    selectedIds = updated;\n  }\n</script>\n\n<Table caption=\"Recent contributors\" selectable>\n  <Table.Header\n    {allSelected}\n    {someSelected}\n    onselectall={onSelectAll}\n    selectAllLabel=\"Select all selectable rows\"\n  >\n    <Table.Row>\n      <Table.HeaderCell>Name</Table.HeaderCell>\n      <Table.HeaderCell>Role</Table.HeaderCell>\n      <Table.HeaderCell align=\"right\">Commits</Table.HeaderCell>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    {#each people as person (person.id)}\n      {#if person.selectionDisabled}\n        <Table.Row selectionDisabled={true}>\n          <Table.Cell>{person.name}</Table.Cell>\n          <Table.Cell>{person.role}</Table.Cell>\n          <Table.Cell align=\"right\">{person.commits}</Table.Cell>\n        </Table.Row>\n      {:else}\n        <Table.Row\n          selected={selectedIds.has(person.id)}\n          onselectedchange={(next) => onRowChange(person.id, next)}\n          selectionLabel={`Select ${person.name}`}\n        >\n          <Table.Cell>{person.name}</Table.Cell>\n          <Table.Cell>{person.role}</Table.Cell>\n          <Table.Cell align=\"right\">{person.commits}</Table.Cell>\n        </Table.Row>\n      {/if}\n    {/each}\n  </Table.Body>\n</Table>\n\n{#if selectedIds.size > 0}\n  <p style=\"margin-top: 0.75rem; font-size: 0.875rem; color: var(--cinder-text-muted)\">\n    {selectedIds.size} row{selectedIds.size !== 1 ? 's' : ''} selected\n  </p>\n{/if}\n"
     },
     {
       "id": "sticky-sortable",

package/src/components/table/table.svelte

@@ -62,7 +62,7 @@
     { box: 'border-box', enabled: () => stickyHeader },
   );
 
-  function onSortChange(column: string): void {
+  function onsortchange(column: string): void {
     if (!sort || sort.column !== column) {
       sort = { column, direction: 'ascending' };
       return;
@@ -81,7 +81,7 @@
     get selectionEnabled() {
       return selectable;
     },
-    onSortChange,
+    onsortchange,
   });
 </script>
 

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

@@ -20,13 +20,13 @@ export type TableSectionContext = 'header' | 'body';
 export type TableHeaderSelectionContext = {
   readonly allSelected: boolean;
   readonly someSelected: boolean;
-  readonly onSelectAll: (next: boolean) => void;
+  readonly onselectall: (next: boolean) => void;
   readonly selectAllLabel: string;
   claimSelectionHeaderCell: () => void;
 };
 /**
  * Shape of the table context provided to child components. Header cells call
- * `onSortChange` with their column key when activated; the table propagates
+ * `onsortchange` with their column key when activated; the table propagates
  * the new sort state to its bindable `sort` prop. Children read
  * `selectionEnabled` to render the leading selection cell.
  *
@@ -36,7 +36,7 @@ export type TableHeaderSelectionContext = {
  */
 export type TableContext = {
   readonly sort: TableSort | undefined;
-  onSortChange: (column: string) => void;
+  onsortchange: (column: string) => void;
   /** Mirror of Table.selectable. Set synchronously at construction time. */
   readonly selectionEnabled?: boolean;
 };

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

@@ -19,9 +19,9 @@ snippet. The flat `@lostgradient/cinder/table-header` subpath remains exported f
 | `allSelected`    | `boolean`  | no       | —       | Checked state for the select-all checkbox. Required when `Table.selectable` is true.                                                                                                                                                                                            |
 | `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. |
+| `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)` | 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.                                                                                                    |
+| `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/table-header.svelte

@@ -29,7 +29,7 @@
     children,
     allSelected,
     someSelected,
-    onSelectAll,
+    onselectall,
     selectAllLabel = 'Select all rows',
   }: TableHeaderProps = $props();
 
@@ -39,10 +39,10 @@
   // One-time mount-time guard; read the props untracked.
   if (
     selectionEnabled &&
-    untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)
+    untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)
   ) {
     throw new Error(
-      '[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.',
+      '[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.',
     );
   }
 
@@ -66,8 +66,8 @@
     get someSelected() {
       return someSelected ?? false;
     },
-    get onSelectAll() {
-      return onSelectAll ?? (() => {});
+    get onselectall() {
+      return onselectall ?? (() => {});
     },
     get selectAllLabel() {
       return selectAllLabel;

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

@@ -9,12 +9,12 @@ export type TableHeaderProps = {
   /**
    * 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`
+   * Required (alongside `allSelected` and `onselectall`) when `Table.selectable`
    * is true for accurate checkbox state.
    */
   someSelected?: boolean;
   /** Called when the user activates the select-all checkbox. Required when `Table.selectable` is true. */
-  onSelectAll?: (next: boolean) => void;
+  onselectall?: (next: boolean) => void;
   /**
    * Accessible name for the select-all checkbox. Defaults to "Select all rows".
    * When the table contains rows with `selectionDisabled={true}`, pass a more

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       | —       | Whether the row's selection checkbox is checked. Required in selectable tables alongside `onSelectedChange` and `selectionLabel`.                                                                                                                                                  |
+| `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)` | 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.                                                                                                                                                         |
+| `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,7 +30,7 @@
     class: className,
     children,
     selected,
-    onSelectedChange,
+    onselectedchange,
     selectionLabel,
     selectionDisabled,
     ...rest
@@ -50,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(', ')}.`,
           );
         }
       }
@@ -73,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 =

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

@@ -4,7 +4,7 @@ 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`.
@@ -13,13 +13,13 @@ import type { HTMLAttributes } from 'svelte/elements';
  * 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`. */
+      /** 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;
     }
@@ -27,7 +27,7 @@ export type TableRowSelectionProps =
       /** 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
@@ -38,7 +38,7 @@ export type TableRowSelectionProps =
     }
   | {
       selected?: undefined;
-      onSelectedChange?: undefined;
+      onselectedchange?: undefined;
       selectionLabel?: undefined;
       selectionDisabled?: undefined;
     };

package/src/components/tabs/README.md

@@ -65,6 +65,7 @@ trailing badge alone to convey it.
 | `orientation`     | `"horizontal"` \| `"vertical"` | no       | —       | Layout orientation. Affects which arrow keys move between tabs.                                                                                                                                               |
 | `value`           | `string`                       | no       | —       | Bound active tab value.                                                                                                                                                                                       |
 | `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.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/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
  * ---------------------------------------- */
@@ -99,6 +106,14 @@
       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.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}