@lostgradient/cinder 0.4.0 → 0.5.0

package/src/components/command-palette/README.md

@@ -1,66 +0,0 @@
-# CommandPalette
-
-Modal search overlay for keyboard-first commands, destinations, and record jumpers.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import CommandPalette from '@lostgradient/cinder/command-palette';
-</script>
-
-<CommandPalette />
-```
-
-## Grouped Results
-
-Command items register with the palette by DOM node, so grouped results can use valid nested list markup without changing keyboard navigation. Use a presentational outer list item, an inner `ul[role="group"]` with an accessible name, and `CommandItem` children inside that inner list.
-
-```svelte
-<CommandPalette bind:open label="Command palette">
-  {#snippet items()}
-    <li role="presentation" class="cinder-command-group">
-      <span class="cinder-command-group__label">Recent files</span>
-      <ul role="group" aria-label="Recent files">
-        <CommandItem value="roadmap" onselect={() => openRoadmap()}>Roadmap</CommandItem>
-        <CommandItem value="settings" onselect={() => openSettings()}>Settings</CommandItem>
-      </ul>
-    </li>
-  {/snippet}
-</CommandPalette>
-```
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop          | Type       | Required | Default | Description                                                                                                                                                                |
-| ------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `class`       | `string`   | no       | —       | Class merged onto the palette panel.                                                                                                                                       |
-| `label`       | `string`   | no       | —       | Accessible name for the dialog, wired via `aria-label`.                                                                                                                    |
-| `open`        | `boolean`  | yes      | —       | Bindable open state. The component mutates `open = false` on Escape, backdrop click, or any explicit close path, then fires `onclose`.                                     |
-| `placeholder` | `string`   | no       | —       | Placeholder rendered inside the search input.                                                                                                                              |
-| `query`       | `string`   | no       | —       | Bindable search query. Mutated by the input's oninput handler. Exposed to the items snippet so consumers can filter. Reset to an empty string each time the palette opens. |
-| `empty`       | `(opaque)` | no       | —       | Rendered when zero items are registered after filtering. Not expressible in JSON Schema; see the component types for the signature.                                        |
-| `footer`      | `(opaque)` | no       | —       | Optional footer, e.g. for keybinding hints. Not part of the listbox. Not expressible in JSON Schema; see the component types for the signature.                            |
-| `items`       | `(opaque)` | yes      | —       | Receives the current query so consumers can filter. Not expressible in JSON Schema; see the component types for the signature.                                             |
-| `onclose`     | `(opaque)` | no       | —       | Fired after any close path routed through the palette close lifecycle. Not expressible in JSON Schema; see the component types for the signature.                          |
-| `triggerRef`  | `(opaque)` | no       | —       | Element to restore focus to on close. Falls back to `captureFocus()`. Not expressible in JSON Schema; see the component types for the 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/confirm-dialog/README.md

@@ -1,79 +0,0 @@
-# ConfirmDialog
-
-Pre-wired modal dialog for user-initiated binary decisions: "proceed" or "cancel". Focus defaults to the cancel button — the industry-standard guard against accidental destructive confirms.
-
-## Dialog model
-
-ConfirmDialog is one of three dialog-level components:
-
-- **`Modal`** — generic shell for rich content and forms. Use when the interaction requires more than two actions or rich body content.
-- **`ConfirmDialog`** — this component. Preset for user-initiated yes/no decisions. Escape, backdrop click, and the close-X all fire `oncancel`.
-- **`AlertDialog`** — preset for urgent blocking acknowledgements. Cannot be dismissed by Escape or backdrop click. No close button. The user _must_ click an action button.
-
-The key distinction between ConfirmDialog and AlertDialog is _who initiates_ the interruption:
-
-- ConfirmDialog is for user-initiated actions that need a safety gate ("You clicked Delete — are you sure?"). Escape is a safe exit; cancel is the default focus.
-- AlertDialog is for system-initiated or out-of-band urgency ("Your session expired", "This action affects others"). Escape is blocked; acknowledgement is mandatory.
-
-## Choosing this component
-
-- Asking the user to confirm before deleting, discarding, or publishing something that cannot easily be undone.
-- Any two-action flow where the only choices are "proceed" and "cancel" — ConfirmDialog saves you from composing Modal + two Buttons manually.
-- Destructive actions: set `destructive` to apply the danger variant to the confirm button.
-
-## Choosing something else
-
-- When the dialog body needs rich content (lists, markup, multiple paragraphs) — compose [`Modal`](../modal/README.md) directly instead, since `aria-describedby` collapses to a single continuous string for screen readers.
-- When more than two actions are needed — use [`Modal`](../modal/README.md) with a custom `footer` snippet.
-- When the dialog is triggered by a system event or out-of-band condition requiring mandatory acknowledgement — use [`AlertDialog`](../alert-dialog/README.md) instead.
-- Non-blocking notifications — use a toast or inline alert that does not interrupt the flow.
-
-## Related components
-
-- [`Modal`](../modal/README.md) — the underlying primitive; use directly when you need more control over content or actions.
-- [`AlertDialog`](../alert-dialog/README.md) — sticky blocking acknowledgement; cannot be dismissed by Escape or backdrop click.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import ConfirmDialog from '@lostgradient/cinder/confirm-dialog';
-</script>
-
-<ConfirmDialog />
-```
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop           | Type       | Required | Default | Description                                                                                                                                                                                                                                                                                                                             |
-| -------------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cancelLabel`  | `string`   | no       | —       | Cancel button label. Defaults to "Cancel".                                                                                                                                                                                                                                                                                              |
-| `class`        | `string`   | no       | —       | Optional extra class on the underlying <Modal>. Destructured as `class: className` per repo convention.                                                                                                                                                                                                                                 |
-| `confirmLabel` | `string`   | yes      | —       | Confirm button label. Required — no default. Name the action being confirmed: - Destructive: "Delete", "Discard changes", "Remove from organization". - Non-destructive: "Save", "Continue", "Publish". Never use "OK" or "Confirm" in production — they don't describe the action.                                                     |
-| `description`  | `string`   | no       | —       | Optional body description — short, plain text only. Rendered as a single <p> and wired to aria-describedby. For rich content (markup, lists, multiple paragraphs), compose <Modal> + <Button> directly — screen readers announce aria-describedby targets as one continuous run.                                                        |
-| `destructive`  | `boolean`  | no       | —       | When true, the confirm button uses variant="danger". The cancel button still receives default focus regardless — color is never the sole destructive signal.                                                                                                                                                                            |
-| `open`         | `boolean`  | yes      | —       | Controls visibility. Bindable.                                                                                                                                                                                                                                                                                                          |
-| `title`        | `string`   | yes      | —       | Modal title; passed through to <Modal>.                                                                                                                                                                                                                                                                                                 |
-| `oncancel`     | `(opaque)` | no       | —       | Fired when the user cancels via ANY dismissal affordance — cancel button, Escape, backdrop click, or the close-X button. Optional. Parent-driven `open = false` does NOT fire this callback. Callbacks are not awaited; thrown callbacks do not block close. Not expressible in JSON Schema; see the component types for the signature. |
-| `onconfirm`    | `(opaque)` | yes      | —       | Fired when the user activates the confirm button. Required. Component closes itself after. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                   |
-| `triggerRef`   | `(opaque)` | no       | —       | Forwarded to <Modal>; focus is restored here on close. Not expressible in JSON Schema; see the component types for the 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/container/README.md

@@ -1,50 +0,0 @@
-# Container
-
-Centered, max-width-capped wrapper for the narrow-column reading pattern. Container composes no app shell chrome; it just constrains and centers content.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import Container from '@lostgradient/cinder/container';
-</script>
-
-<Container maxWidth="prose">
-  <h1>Article title</h1>
-  <p>Long-form content stays at a readable measure.</p>
-</Container>
-```
-
-`maxWidth` selects a named width token (`prose` / `narrow` / `wide` / `full`); omitting it falls back to `--cinder-content-width`. The `full` keyword removes the cap entirely.
-
-The v1 inline gutter is a single non-responsive value (`--cinder-space-5`). Disable it with `padded={false}`, or override `.cinder-container` (or the `--cinder-content-width-*` tokens) per scope if you need different padding or widths.
-
-For an app shell with header and action regions, write the shell directly from `Container`, `SectionHeading`, navigation, and action primitives.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop       | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Required | Default | Description                                                                                                                |
-| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `as`       | `"object"` \| `"a"` \| `"abbr"` \| `"address"` \| `"article"` \| `"aside"` \| `"audio"` \| `"b"` \| `"bdi"` \| `"bdo"` \| `"blockquote"` \| `"body"` \| `"button"` \| `"canvas"` \| `"caption"` \| `"cite"` \| `"code"` \| `"colgroup"` \| `"data"` \| `"datalist"` \| `"dd"` \| `"del"` \| `"details"` \| `"dfn"` \| `"dialog"` \| `"div"` \| `"dl"` \| `"dt"` \| `"em"` \| `"fieldset"` \| `"figcaption"` \| `"figure"` \| `"footer"` \| `"form"` \| `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"head"` \| `"header"` \| `"hgroup"` \| `"html"` \| `"i"` \| `"iframe"` \| `"ins"` \| `"kbd"` \| `"label"` \| `"legend"` \| `"li"` \| `"main"` \| `"map"` \| `"mark"` \| `"menu"` \| `"meter"` \| `"nav"` \| `"noscript"` \| `"ol"` \| `"optgroup"` \| `"option"` \| `"output"` \| `"p"` \| `"picture"` \| `"pre"` \| `"progress"` \| `"q"` \| `"rp"` \| `"rt"` \| `"ruby"` \| `"s"` \| `"samp"` \| `"script"` \| `"search"` \| `"section"` \| `"select"` \| `"slot"` \| `"small"` \| `"span"` \| `"strong"` \| `"style"` \| `"sub"` \| `"summary"` \| `"sup"` \| `"table"` \| `"tbody"` \| `"td"` \| `"template"` \| `"textarea"` \| `"tfoot"` \| `"th"` \| `"thead"` \| `"time"` \| `"title"` \| `"tr"` \| `"u"` \| `"ul"` \| `"var"` \| `"video"` | no       | `"div"` | Element tag to render.                                                                                                     |
-| `centered` | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | no       | `true`  | Center the box with auto inline margins.                                                                                   |
-| `class`    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | no       | —       | Additional classes merged onto the root element.                                                                           |
-| `maxWidth` | `"prose"` \| `"narrow"` \| `"wide"` \| `"full"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | no       | —       | Named max-width token. Omitted falls back to the default content-width token.                                              |
-| `padded`   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | no       | `true`  | Apply the default inline gutter so content never touches the edges.                                                        |
-| `children` | `(opaque)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | yes      | —       | Required content rendered inside the container. Not expressible in JSON Schema; see the component types for the 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 -->
-<!-- generated:subcomponents:end -->

package/src/components/context-menu/README.md

@@ -1,55 +0,0 @@
-# ContextMenu
-
-Right-click and long-press menu positioned at the user's pointer while reusing dropdown menu parts.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { ContextMenu } from '@lostgradient/cinder/context-menu';
-</script>
-```
-
-## Guidance
-
-### Use When
-
-- Providing contextual actions for a canvas, list row, file, or selected item.
-- Opening a menu from a pointer location instead of a visible dropdown trigger.
-
-### Avoid When
-
-- The menu should open from a button — use dropdown.
-- Showing arbitrary rich content rather than menu actions — use popover.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop             | Type                         | Required | Default | Description                                                                                                                          |
-| ---------------- | ---------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `anchorPoint`    | { x: `number`; y: `number` } | no       | —       | Explicit pointer coordinates at which to anchor the menu, overriding the position captured from the right-click or long-press event. |
-| `class`          | `string`                     | no       | —       | Additional class names merged with the component's root class.                                                                       |
-| `disabled`       | `boolean`                    | no       | —       | When true, disables context-menu activation on right-click and long-press within the trigger region. Default `false`.                |
-| `longPressDelay` | `number`                     | no       | —       | Duration in milliseconds a touch pointer must be held before the menu opens on mobile. Default `500`.                                |
-| `open`           | `boolean`                    | no       | —       | Controls the open state of the context menu; bindable for controlled usage.                                                          |
-| `children`       | `(opaque)`                   | yes      | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.           |
-| `onopenchange`   | `(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/context-menu-trigger/README.md

@@ -1,50 +0,0 @@
-# ContextMenuTrigger
-
-Compose-only trigger region that opens a context-menu on right-click or touch long-press.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { ContextMenuTrigger } from '@lostgradient/cinder/context-menu-trigger';
-</script>
-```
-
-## Guidance
-
-### Use When
-
-- Wrapping the region that should own contextual actions inside ContextMenu.
-- Pairing pointer-positioned menu behavior with dropdown menu items.
-
-### Avoid When
-
-- Used outside context-menu — it requires the ContextMenu provider.
-- Opening a normal click menu from a visible button — use dropdown-trigger.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop       | Type       | Required | Default | Description                                                                                                                |
-| ---------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `class`    | `string`   | no       | —       | Additional class names merged with the component's root class.                                                             |
-| `children` | `(opaque)` | yes      | —       | 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/copy-button/README.md

@@ -1,46 +0,0 @@
-# CopyButton
-
-Button that copies a given text value to the clipboard with visual feedback.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import CopyButton from '@lostgradient/cinder/copy-button';
-</script>
-
-<CopyButton />
-```
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop              | Type       | Required | Default | Description                                                                                                                                                                                                                                                                          |
-| ----------------- | ---------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `class`           | `string`   | no       | —       | Additional class names merged with `.cinder-copy-button`.                                                                                                                                                                                                                            |
-| `confirmDuration` | `number`   | no       | —       | Duration in ms to show the confirmation state. Default 1500.                                                                                                                                                                                                                         |
-| `copiedLabel`     | `string`   | no       | —       | Accessible label for the copied state — what `aria-live="polite"` announces when the copy succeeds. Defaults to "Copied". Override this when `label` is customized so the live-region announcement reflects what just happened (e.g. label="Copy code" + copiedLabel="Code copied"). |
-| `iconOnly`        | `boolean`  | no       | —       | Render the button with only an icon and a visually hidden label. When true, defaults to a Copy icon (idle) and a Check icon (copied).                                                                                                                                                |
-| `label`           | `string`   | no       | —       | Accessible label for the idle state. Defaults to "Copy to clipboard".                                                                                                                                                                                                                |
-| `value`           | `string`   | yes      | —       | Text to copy to the clipboard.                                                                                                                                                                                                                                                       |
-| `children`        | `(opaque)` | no       | —       | Default content (idle state). Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                             |
-| `confirmation`    | `(opaque)` | no       | —       | Content rendered while in the "copied" state. Not expressible in JSON Schema; see the component types for the 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/data-grid/README.md

@@ -1,80 +0,0 @@
-# DataGrid
-
-ARIA data grid foundation for spreadsheet-like datasets with stable row identity, explicit column widths, keyboard navigation, row selection, cell/range selection, and pinned-column metadata.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { DataGrid } from '@lostgradient/cinder/data-grid';
-
-  const columns = [
-    { key: 'id', header: 'Order', width: 120, pin: 'left' },
-    { key: 'customer', header: 'Customer', width: 220 },
-    { key: 'status', header: 'Status', width: 140 },
-  ];
-
-  const rows = [
-    { id: 'ORD-1001', customer: 'Ada Lovelace', status: 'Packed' },
-    { id: 'ORD-1002', customer: 'Grace Hopper', status: 'Shipped' },
-  ];
-</script>
-
-<DataGrid {columns} {rows} getRowId={(row) => row.id} aria-label="Orders" />
-```
-
-## Guidance
-
-### Use When
-
-- Rendering an interactive tabular surface that needs grid semantics instead of native table semantics.
-- You need built-in row selection, cell focus, range selection, and copy behavior before adding virtualization or editing.
-
-### Avoid When
-
-- You only need a semantic read-only table — use DataTable or the Table family instead.
-- You need resize handles, drag-to-reorder controls, or editing today.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop                     | Type                                           | Required | Default | Description                                                                                                                                           |
-| ------------------------ | ---------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `class`                  | `string`                                       | no       | —       | Additional class names merged onto the root grid.                                                                                                     |
-| `columnOrder`            | `string`[]                                     | no       | —       | Applies a supplied column order.                                                                                                                      |
-| `columnSizing`           | `object`                                       | no       | —       | Overrides resolved column widths by column key.                                                                                                       |
-| `density`                | `"compact"` \| `"comfortable"` \| `"spacious"` | no       | —       | Controls body row padding density. Defaults to `'comfortable'`.                                                                                       |
-| `rowHeight`              | `number`                                       | no       | —       | Fixed body-row pixel height used by row virtualization. Defaults to 44 when omitted or invalid.                                                       |
-| `selectionMode`          | `"none"` \| `"single"` \| `"multiple"`         | no       | —       | Controls row-selection behavior. Cell focus and range selection remain available.                                                                     |
-| `selectionModel`         | `string`[]                                     | no       | —       | Controlled row-selection ids, keyed by `getRowId`.                                                                                                    |
-| `stickyHeader`           | `boolean`                                      | no       | —       | Keeps the column header row pinned to the top edge while scrolling. Defaults to `true`.                                                               |
-| `virtualizeColumns`      | `boolean`                                      | no       | —       | Enables LTR horizontal virtualization for unpinned columns. Pinned columns stay rendered.                                                             |
-| `virtualizeRows`         | `boolean`                                      | no       | —       | Enables fixed-height row virtualization.                                                                                                              |
-| `columnPinning`          | `(opaque)`                                     | no       | —       | Pins supplied column keys to the left or right edge. Not expressible in JSON Schema; see the component types for the signature.                       |
-| `columns`                | `(opaque)`                                     | yes      | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                               |
-| `getRowAriaLabel`        | `(opaque)`                                     | no       | —       | Optional accessible row label for screen-reader row summaries. Not expressible in JSON Schema; see the component types for the signature.             |
-| `getRowId`               | `(opaque)`                                     | yes      | —       | Stable row identity used for ARIA ids and row-scoped state. Not expressible in JSON Schema; see the component types for the signature.                |
-| `onselectionmodelchange` | `(opaque)`                                     | no       | —       | Called when row selection changes through cell interaction. Not expressible in JSON Schema; see the component types for the signature.                |
-| `onsortmodelchange`      | `(opaque)`                                     | no       | —       | Called after the user changes sort order and DataGrid updates `sortModel`. Not expressible in JSON Schema; see the component types for the signature. |
-| `rowClass`               | `(opaque)`                                     | no       | —       | Additional class names for body rows. Not expressible in JSON Schema; see the component types for the signature.                                      |
-| `rows`                   | `(opaque)`                                     | yes      | —       | A generically typed prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                              |
-| `sortModel`              | `(opaque)`                                     | no       | —       | Controls the row sort order used to render rows. Not expressible in JSON Schema; see the component types for the 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/data-list/README.md

@@ -1,73 +0,0 @@
-# DataList
-
-A semantic list container (`<ul role="list">`) for a homogeneous collection of
-records. DataList owns the list element, the list reset, and the empty state; it
-delegates row chrome (padding, dividers, density) to the row primitive. Each
-record is rendered through the `children` snippet, which **must** render an
-`<li>` — [`StackedListItem`](../stacked-list-item/README.md) is the recommended
-row.
-
-Reach for DataList when you have a vertical list of like records. For key–value
-metadata about a single entity use [`DescriptionList`](../description-list/README.md);
-for tabular rows and columns use [`Table`](../table/README.md).
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { DataList } from '@lostgradient/cinder/data-list';
-  import { StackedListItem } from '@lostgradient/cinder/stacked-list-item';
-
-  const members = [
-    { id: 'a', name: 'Alice Chen', role: 'Engineer' },
-    { id: 'b', name: 'Bob Osei', role: 'Designer' },
-  ];
-</script>
-
-<DataList items={members} key={(member) => member.id} density="condensed">
-  {#snippet children(member)}
-    <StackedListItem>
-      {#snippet title()}{member.name}{/snippet}
-      {#snippet meta()}{member.role}{/snippet}
-    </StackedListItem>
-  {/snippet}
-  {#snippet empty()}
-    No members yet.
-  {/snippet}
-</DataList>
-```
-
-A list-level `density` is inherited by every `StackedListItem` row that does not
-set its own `density` prop. The `empty` snippet renders inside a component-owned
-`<li class="cinder-data-list-empty">`, so it needs no inline styling.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop       | Type                             | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| ---------- | -------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `class`    | `string`                         | no       | —       | Additional class merged onto the `.cinder-data-list` root element.                                                                                                                                                                                                                                                                                                                                                                  |
-| `density`  | `"comfortable"` \| `"condensed"` | no       | —       | List-level density inherited by StackedListItem rows that do not set their own `density` prop. Omit to let each row use its own default. A per-row `density` always overrides this list-level value. Note: when passing a variable that may be `undefined`, spread conditionally because `exactOptionalPropertyTypes` is enabled: `{...(density ? { density } : {})}`                                                               |
-| `children` | `(opaque)`                       | yes      | —       | Row renderer. MUST render an `<li>` (the list root is a `<ul role="list">`). StackedListItem is the recommended row — it renders an `<li>` with leading/title/description/meta/trailing slots. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                           |
-| `empty`    | `(opaque)`                       | no       | —       | Rendered when `items` is empty. The component automatically wraps the snippet output in `<li class="cinder-data-list-empty">`. **Do NOT wrap in an `<li>` yourself** — the component provides the `<li>` wrapper automatically. Pass only inner content (e.g. a `<p>`, a `<div>`, or plain text). Contrast with `children`, which must render an `<li>`. Not expressible in JSON Schema; see the component types for the signature. |
-| `items`    | `(opaque)`                       | yes      | —       | The records to render. Each is passed to `children`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                     |
-| `key`      | `(opaque)`                       | yes      | —       | Key extractor for stable DOM reconciliation. Svelte uses this to identify each row when the list is reordered, filtered, or updated. Without a key, rows are matched by index and the wrong row instances may receive updated props, causing O(n) churn and incorrect rendering. `svelte <DataList {items} key={(m) => m.id}> ` Not expressible in JSON Schema; see the component types for the 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/data-table/README.md

@@ -1,78 +0,0 @@
-# DataTable
-
-Data-driven accessible table that renders rows and columns into a real `<table>` with `<caption>`, scoped column and row headers, optional sortable columns, and a horizontal-scroll responsive container.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { DataTable } from '@lostgradient/cinder/data-table';
-
-  const columns = [
-    { key: 'name', label: 'Name', rowHeader: true },
-    { key: 'score', label: 'Score', sortable: true, align: 'end' },
-  ];
-  const rows = [
-    { name: 'Ada', score: 98 },
-    { name: 'Grace', score: 95 },
-  ];
-</script>
-
-<DataTable {columns} {rows} caption="Class roster" />
-```
-
-## Guidance
-
-Set `virtualized` with a fixed `rowHeight` when the table is rendering thousands
-of same-height append-only rows. The virtualized path keeps the `<table>`,
-`<thead>`, and `<tbody>` semantics intact, sets `aria-rowcount` to the full
-logical row count, and annotates mounted body rows with full-table
-`aria-rowindex` values. Variable or measured body row heights are out of scope
-for this mode.
-
-### Use When
-
-- Rendering a roster, cohort, or assignment view from row/column data with real table semantics.
-- Needing sortable columns with screen-reader-announced sort state out of the box.
-
-### Avoid When
-
-- Composing a bespoke table layout with custom cell markup — use the compositional Table family directly.
-- Visualizing dense numeric magnitude across two dimensions — use matrix-chart instead.
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop            | Type                                             | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| --------------- | ------------------------------------------------ | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `caption`       | `string`                                         | no       | —       | Visual caption rendered as a `<caption>` element above the table.                                                                                                                                                                                                                                                                                                                                                                                          |
-| `class`         | `string`                                         | no       | —       | Additional class names merged onto DataTable's root wrapper element (the `<div class="cinder-data-table">` that contains the table). To style the `<table>` itself, target `.cinder-data-table table` from this class.                                                                                                                                                                                                                                     |
-| `density`       | `"comfortable"` \| `"condensed"` \| `"spacious"` | no       | —       | Vertical padding density for header and body cells. Defaults to `'comfortable'`.                                                                                                                                                                                                                                                                                                                                                                           |
-| `height`        | `string`                                         | no       | —       | CSS block-size for the virtualized native scroll container. Defaults to `"24rem"` when `virtualized` is true.                                                                                                                                                                                                                                                                                                                                              |
-| `overscan`      | `number`                                         | no       | —       | Extra body rows rendered before and after the visible virtualized window. Defaults to 5.                                                                                                                                                                                                                                                                                                                                                                   |
-| `rowHeight`     | `number`                                         | no       | —       | Fixed body row height in pixels for virtualized mode. This must match the actual rendered body row height, including density padding and any wrapping introduced by the table content. Defaults to 44.                                                                                                                                                                                                                                                     |
-| `scrollable`    | `boolean`                                        | no       | —       | When true, wraps the table in a `.cinder-table-scroll` container that enables horizontal overflow scrolling on small viewports.                                                                                                                                                                                                                                                                                                                            |
-| `stickToBottom` | `boolean`                                        | no       | —       | When true in virtualized mode, appending rows while scrolled to the bottom keeps the newest row pinned in view. Appending while scrolled up does not change the viewport.                                                                                                                                                                                                                                                                                  |
-| `stickyHeader`  | `boolean`                                        | no       | —       | When true, the header sticks to the top of the scrolling container.                                                                                                                                                                                                                                                                                                                                                                                        |
-| `virtualized`   | `boolean`                                        | no       | —       | When true, renders only the visible `<tbody>` row window plus spacer rows. Requires a fixed row height. This is intended for large, append-only tables such as live logs or event streams.                                                                                                                                                                                                                                                                 |
-| `columns`       | `(opaque)`                                       | yes      | —       | Column descriptors defining the headers and cell rendering for each column. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                     |
-| `rows`          | `(opaque)`                                       | yes      | —       | Row data. Each entry is read via `column.key` for each column. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                  |
-| `sort`          | `(opaque)`                                       | no       | —       | Bound sort state. When the user activates a sortable header cell, this prop is updated with the new `{ column, direction }`. The consumer is responsible for reordering `rows` in response — DataTable does not sort internally. Pass `undefined` initially when no column is sorted; the component will never write back `undefined` itself (sort always toggles to a column). Not expressible in JSON Schema; see the component types for the signature. |
-
-<!-- generated:props:end -->
-
-## CSS Variables
-
-<!-- generated:variables:start -->
-
-- `--cinder-data-table-height`
-<!-- generated:variables:end -->
-
-## Subcomponents
-
-<!-- generated:subcomponents:start -->
-
-None.
-
-<!-- generated:subcomponents:end -->