@cssints/headless 0.18.0 → 0.19.0

package/README.md

@@ -206,6 +206,36 @@ const email = createTextInput({ type: "email", autoComplete: "email", inputMode:
 - **`disabled` vs `readOnly`.** Disabled is out of the tab order and not submitted; readOnly is focusable, selectable and submitted. A field the user must read before signing is readOnly, not disabled.
 - `createTextArea` adds `rows`, `wrap` and `resize` (`resize` is a style, since CSS has no attribute for it; `none` is what a layout that owns its own height wants).
 
+## Drop zone
+
+`createDropZone` is a file drop target on a **hidden native `<input type="file">`**: the picker, the `accept` filter and `multiple` are the platform's, and the primitive adds a drag target, the validation and a status line. **There is no APG pattern for a drop zone**, so there is no Quint spec: `test/dropzone.browser.test.tsx` is its oracle. The same primitive replaces the bare file inputs of cms-admin's image field and kocharin's dashboard upload.
+
+```tsx
+const upload = createDropZone({
+  accept: "image/*",
+  multiple: true,
+  maxSize: 5 * 1024 * 1024,
+  labels: { zone: "Images", browse: "Choose images" },
+  onFiles: (files) => void add(files),
+  onReject: ({ file, reason }) => toast(`${file.name}: ${reason}`),
+});
+
+<div {...upload.zoneProps}>
+  <p>Drop images here{upload.dragging() ? " (release to add)" : ""}</p>
+  <input {...upload.inputProps} />
+  <button {...upload.browseProps}>{upload.message() ?? "Choose images"}</button>
+  <p {...upload.statusProps}>{upload.message()}</p>
+</div>;
+```
+
+- **The zone is never drag-only.** `browseProps` goes on a real `<button type="button">` that clicks the hidden input, so the picker is the keyboard path (Enter and Space are the platform's) and a pointer user can click as well as drag. The browse button's text is the host's; `labels.browse` is its accessible name when that text is an icon.
+- **Render the hidden input and the status region always.** `inputProps` carries `hidden`, so it is out of the tab order and the accessibility tree but still the thing the button clicks; the `role="status"` region announces a change of text, which only happens if it was already mounted.
+- **Validation happens once per file**, type then size: `accept` is the HTML grammar (`.png`, `image/png`, `image/*`), `maxSize` is bytes. A refused file reaches `onReject` with `reason: "type" | "size"`; the accepted ones reach `onFiles` in one batch, and a batch with nothing accepted calls neither.
+- **`message()` is a default sentence**, "2 files, 1 rejected: too large", for the status region; the words are the host's, the primitive only tracks the counts of the last batch. It is `undefined` before the first file.
+- **A folder or an empty `DataTransfer` is a no-op**: no callback, no rejection, and the previous announcement stays.
+- **`dragleave` counts.** A child's `dragleave` bubbles to the zone, so the state is a depth counter: `dragging()` clears only when the drag leaves the zone itself, or on a drop. `dragging()` is the styling hook — the primitive writes no `data-*`.
+- **`disabled`** marks the zone `aria-disabled`, disables the input natively and the browse button, and drops every drag before it becomes a batch. Options are read when an attribute is read, so a host may flip it on a mounted zone.
+
 ## Pagination
 
 `createPagination` is a navigation landmark over a page list. **No APG pattern exists**; the requirements are TetraLogical's (accessible-components-library v1.0.0), and `test/pagination.browser.test.tsx` is the oracle.
@@ -289,6 +319,87 @@ const table = createTable({
 - **`numeric` is a layout hint** for the host's skin (right alignment, tabular figures): HTML has no attribute for it, so the primitive carries nothing.
 - Solid 2 arrives through delegated events; a host that reads the DOM right after a click waits a tick.
 
+## Timeline
+
+`createTimeline` has two modes over one axis. Without `rows` it renders the package's demo tree of five fixed spans (collapsing, a zoom window, the differential walk against `specs/apg/timeline.qnt`); with `rows` it takes real span data and lays it out as a trace waterfall.
+
+```tsx
+const timeline = createTimeline({
+  rows: spans, // { id, label, start, end, depth?, status? }, in the host's display order
+  axis: { unit: "ms" },
+  selected: selected(), // controlled; omit it and the primitive keeps the value
+  onSelect: (id) => setSelected(id),
+});
+
+<ul {...timeline.listProps}>
+  {spans.map((span) => (
+    <li {...timeline.rowProps(span.id)}>
+      <span {...timeline.labelProps(span.id)}>{span.label}</span>
+      <div class="track">
+        <div {...timeline.barProps(span.id)} />
+      </div>
+    </li>
+  ))}
+</ul>
+<div {...{ role: timeline.rulerProps.role }}>
+  {timeline.rulerProps.ticks.map((tick) => (
+    <span style={{ left: `${tick.left}%` }}>{tick.label}</span>
+  ))}
+</div>;
+```
+
+- **A waterfall is a list, not an APG widget.** There is no trace/waterfall pattern, and the rows are neither a tree (nothing collapses) nor a grid (nothing is edited). The rows mode is `role="list"` / `role="listitem"` (see `listProps` / `rowProps`) with `aria-level` = `depth + 1`, so the nesting a flat DOM cannot show is still announced; the selected row is `aria-current="true"`, which every element may carry — `aria-selected` is not allowed on a `listitem` and a waterfall is not a selection control. The demo tree keeps `role="tree"` / `treeitem`, because it does collapse.
+- **The extent is the rows'.** `extent()` is the smallest `start` and the largest `end`, so a nested span is positioned and sized as a percentage of the whole trace, not of its parent. `barProps(id).style` is `left` / `width` in percent of that extent. A zero-length span (a marker, `start === end`) still paints: every bar has a **0.5% floor** (2 px on a 400 px track), the floor the o11y dashboard hand-rolled before this mode existed.
+- **Depth is a custom property**, `--depth` on `barProps` and `labelProps`, so a narrow track keeps its indentation: `padding-inline-start: calc(var(--depth) * 0.75rem)`. Nesting the label's DOM would steal width from the bar.
+- **The ruler is derived.** `rulerProps.ticks` is the extent stepped by 1, 2 or 5 times a power of ten (about five ticks), each `{ value, left, label }` with the label in the `axis.unit` (default `ms`). The ruler itself is decorative (`role="presentation"`, `aria-hidden="true"`); render the ticks as children.
+- **Selection and keys.** A row click selects it and moves the tab stop; ArrowUp / ArrowDown / Home / End move a roving tab stop, and Enter or Space selects the row that has DOM focus — the host moves the real focus after an arrow key, as the demo fixture does. `selected` + `onSelect` make it controlled (`selected` is a request the host may ignore); `select(id)` is the programmatic request.
+- `status` is carried as `data-status` on the row for the host's colour, and `label` never leaves the host's data: the primitive does not invent the row's text.
+
+## Tabs
+
+`createTabs` is the APG tablist: roving tabindex, wrapping arrows, Home/End, automatic or manual activation, disabled tabs, and a selection that is a request (`value` + `onValueChange`) or uncontrolled (`defaultSelected`). The plain widget is checked against `specs/apg/tabs.qnt` by the scenario bridge and the differential walk in `test/tabs.browser.test.tsx`.
+
+The docs playground's file tabs add and close files and rename them, so `createTabs` also takes `closable` and `renamable` — both off by default, so the plain widget is unchanged. **The primitive never takes the list:** it asks (`onClose`, `onRename`), the host removes or renames. `label(index)` is the tab's name: it names the close and rename buttons and seeds the rename draft, and it is read lazily.
+
+```tsx
+const tabs = createTabs({
+  get items() {
+    return files().length;
+  }, // the host's list; it shrinks after a close
+  get closable() {
+    return true;
+  },
+  get renamable() {
+    return true;
+  },
+  label: (index) => files()[index], // "Close index.ts", the rename draft
+  onClose: (index) => setFiles((all) => all.filter((_, at) => at !== index)),
+  onRename: (index, label) =>
+    setFiles((all) => all.map((name, at) => (at === index ? label : name))),
+});
+
+<div {...tabs.tablistProps}>
+  {files().map((name, index) => (
+    <div {...tabs.tabProps(index)} onDblClick={tabs.renameProps(index).onDblClick}>
+      {tabs.renameProps(index).editing() ? (
+        <input
+          {...tabs.renameProps(index).inputProps}
+          ref={(element) => queueMicrotask(() => element.focus())}
+        />
+      ) : (
+        name
+      )}
+    </div>
+  ))}
+  {/* ... the close button of each tab, and the panels */}
+</div>;
+```
+
+- **Close.** `closeProps(index)` is the tab's close button: `aria-label` "Close <label>" and `tabindex=-1`, because a tablist's tab stops are its tabs; the keyboard path is Delete on the focused tab. Focus after a close goes to the tab that slid into the closed one's place, or to the previous tab when the last one closed: `focusAfterClose(index)` is that index in the shortened list, and the host focuses it after its removal lands. Closing the last remaining tab is refused, as the spec refuses an empty tablist; a closed tab that was selected asks for the tab that takes the focus.
+- **Rename.** A double click begins; the tab renders `inputProps` instead of its label. Enter commits, Escape reverts, blur commits; a label that trims to nothing cancels. An `<input>` cannot live in a `<button>`, so the tab becomes a `role="tab"` element while it is editing. While editing the input owns the keys: the tablist's roving does not move, and an arrow key leaves the caret alone. `begin(index)` is the programmatic start (a tab the host has just added: append it, then `focusTab(index)` and `begin(index)`).
+- **State.** `editing()` is the tab being renamed, `null` when none. `items` is read from the option on every read, so the bounds, the roving tab stop and `firstEnabled` follow a host that shrinks its list.
+- The rename and the two callbacks are the extension's own: the spec models a `deletable` flavour (Delete, focus to the next tab, the last refused) but no rename and no callbacks, so `test/tabs-close.browser.test.tsx` is the oracle for all of it.
+
 ## Confirm
 
 `createConfirm` is a promise-based confirmation over `createDialogModal({ role: "alertdialog" })`. Like the field it is not checked against a spec (the dialog is; `test/confirm.browser.test.tsx` covers the promise around it, in Chromium).

package/dist/index.d.mts

@@ -1497,6 +1497,106 @@ export interface Drawer {
  * dismissal a non-modal drawer has); closing returns focus to the trigger.
  */
 export declare const createDrawer: (options?: DrawerOptions) => Drawer;
+/** Why a file was refused: the `accept` grammar, or `maxSize`. */
+export type DropZoneRejectReason = "type" | "size";
+export interface DropZoneReject {
+  readonly file: File;
+  readonly reason: DropZoneRejectReason;
+}
+export interface DropZoneLabels {
+  /** The zone's accessible name (`aria-label` on the `role=group` zone). */
+  readonly zone?: string | undefined;
+  /** The browse button's accessible name; render it visibly, or use it for an icon-only button. */
+  readonly browse?: string | undefined;
+}
+export interface DropZoneOptions {
+  /** The HTML `accept` grammar: extensions (`.png`) and MIME types, wildcards included (`image/*`). */
+  readonly accept?: string | undefined;
+  readonly multiple?: boolean | undefined;
+  /** Bytes; a larger file is rejected with `"size"`. */
+  readonly maxSize?: number | undefined;
+  readonly disabled?: boolean | undefined;
+  /** The files that passed, one call per batch; not called when the batch has none. */
+  readonly onFiles: (files: File[]) => void;
+  /** Each refused file, once, with the reason the host shows. */
+  readonly onReject?: ((reject: DropZoneReject) => void) | undefined;
+  readonly labels?: DropZoneLabels | undefined;
+}
+/** Spread onto the hidden `<input type=file>`; render it, always. */
+export interface DropZoneInputProps {
+  /** The id the browse button clicks; generated. */
+  readonly id: string;
+  readonly type: "file";
+  readonly accept: string | undefined;
+  readonly multiple: true | undefined;
+  readonly disabled: true | undefined;
+  readonly hidden: true;
+  readonly onChange: (event: {
+    currentTarget: HTMLInputElement;
+  }) => void;
+}
+/** Spread onto the drop target (any element). `dragging()` is the styling hook. */
+export interface DropZoneZoneProps {
+  readonly role: "group";
+  readonly "aria-label": string | undefined;
+  readonly "aria-disabled": "true" | undefined;
+  readonly onDragEnter: (event: DragEvent) => void;
+  readonly onDragOver: (event: DragEvent) => void;
+  readonly onDragLeave: (event: DragEvent) => void;
+  readonly onDrop: (event: DragEvent) => void;
+}
+/** Spread onto a real `<button type="button">`: Enter and Space are the platform's. */
+export interface DropZoneBrowseProps {
+  readonly type: "button";
+  readonly disabled: true | undefined;
+  readonly "aria-disabled": "true" | undefined;
+  readonly "aria-label": string | undefined;
+  readonly onClick: () => void;
+}
+/** Spread onto the live region; render it once, always. */
+export interface DropZoneStatusProps {
+  readonly role: "status";
+  readonly "aria-live": "polite";
+  readonly "aria-atomic": "true";
+}
+export interface DropZone {
+  /** A drag is over the zone; `dragleave` on a child does not clear it. */
+  readonly dragging: Accessor<boolean>;
+  /**
+   * A default sentence for the last batch ("2 files, 1 rejected: too large"),
+   * or `undefined` before one arrived. The host may write its own words from
+   * the same counts.
+   */
+  readonly message: Accessor<string | undefined>;
+  readonly inputProps: DropZoneInputProps;
+  readonly zoneProps: DropZoneZoneProps;
+  readonly browseProps: DropZoneBrowseProps;
+  readonly statusProps: DropZoneStatusProps;
+}
+/**
+ * A file drop zone. There is no APG pattern and no Quint spec for one: the
+ * contract is HTML's file input plus WAI-ARIA's live region, and
+ * `test/dropzone.browser.test.tsx` is its oracle.
+ *
+ * Decisions:
+ * - **The zone is never drag-only.** `browseProps` spreads onto a real
+ *   `<button type="button">` that clicks the hidden input, so the picker is the
+ *   keyboard path (Enter and Space are the platform's) and a pointer user can
+ *   click as well as drag. The drop handlers add nothing the button cannot do.
+ * - **Validation happens once per file**, in the order type then size, and a
+ *   refused file reaches `onReject` with the reason the host shows. `accept` is
+ *   the HTML grammar (`.` extension, MIME type, `*`); `maxSize` is bytes.
+ * - **Dropping a folder or a `DataTransfer` with no files is a no-op**: no
+ *   `onFiles`, no `onReject`, no message, and the previous announcement stays.
+ * - **`dragleave` counts.** A child's `dragleave` bubbles to the zone, so the
+ *   state is a depth counter: it clears only when the drag leaves the zone
+ *   itself, or on a drop.
+ * - **The zone is `role=group`** so `labels.zone` is exposed; `dragging()` is
+ *   the only drag state a skin reads (no `data-dragging`).
+ * - `disabled` marks the zone `aria-disabled`, disables the input natively and
+ *   the browse button, and drops every drag before it becomes a batch.
+ */
+export declare const createDropZone: (options: DropZoneOptions) => DropZone;
 /**
  * Options are read lazily (getters); pass a component's `props`.
  */
@@ -2854,6 +2954,11 @@ export interface SliderOptions {
   readonly defaultValue?: number;
   readonly orientation?: SliderOrientation;
   readonly direction?: SliderDirection;
+  /**
+   * aria-disabled: the thumb stays the tab stop (the APG pattern's focus
+   * contract) but a key or a rail press changes nothing.
+   */
+  readonly disabled?: boolean;
   /** Base for the generated thumb id. */
   readonly id?: string;
   /**
@@ -2870,6 +2975,7 @@ export interface SliderThumbProps {
   readonly "aria-valuemax": string;
   readonly "aria-valuetext": string;
   readonly "aria-orientation": SliderOrientation;
+  readonly "aria-disabled": "true" | undefined;
   readonly tabindex: number;
   readonly onFocus: () => void;
   readonly onBlur: () => void;
@@ -2907,6 +3013,11 @@ export interface Slider {
  * pass `value` + `onValueChange` to own the value. A key or rail press is a
  * request the host may ignore.
  *
+ * `disabled` is a widget-level extension of the pattern (the spec lists it
+ * under its deliberate omissions): the thumb keeps its tab stop and announces
+ * `aria-disabled`, and every key and rail press is dropped before it becomes a
+ * request.
+ *
  * ponytail: dragging (pointer capture/move) is not modelled — the spec
  * deliberately only fixes a discrete rail press.
  */
@@ -2991,6 +3102,11 @@ export interface SpinbuttonOptions {
   readonly defaultValue?: number;
   /** Wrap around at the bounds instead of clamping. */
   readonly wrap?: boolean;
+  /**
+   * aria-disabled plus the native `disabled` on the text field: keys, typing
+   * and both steppers change nothing, and both steppers announce `aria-disabled`.
+   */
+  readonly disabled?: boolean;
   /** Base for the generated input / button ids. */
   readonly id?: string;
   /**
@@ -3007,6 +3123,8 @@ export interface SpinbuttonInputProps {
   readonly "aria-valuemax": string;
   readonly "aria-valuetext": string;
   readonly "aria-invalid": "true" | undefined;
+  readonly "aria-disabled": "true" | undefined;
+  readonly disabled: boolean;
   readonly tabindex: number;
   readonly value: string;
   readonly onFocus: () => void;
@@ -3062,6 +3180,12 @@ export interface Spinbutton {
  * stepper buttons, Enter and blur are requests the host may ignore; typing and
  * Escape change no committed value.
  *
+ * `disabled` is a widget-level extension of the pattern (the spec models the
+ * steppers' bound only, and lists this under its deliberate omissions): the
+ * field announces `aria-disabled` and carries the native `disabled`, every key,
+ * typed draft and both steppers are dropped before they become a request, and
+ * neither stepper offers itself.
+ *
  * ponytail: commit/revert on Enter/blur/Escape is the common convention, not
  * APG text.
  */
@@ -3433,6 +3557,26 @@ export interface TabsOptions {
    * current value. Uncontrolled it is accepted; controlled the host may ignore it.
    */
   readonly onValueChange?: (index: number) => void;
+  /**
+   * Close buttons and the Delete key (default false): the host renders
+   * `closeProps` and removes the tab from `onClose`. The last tab is never
+   * asked to close.
+   */
+  readonly closable?: boolean | undefined;
+  /**
+   * Inline rename (default false): a double click on a tab starts it, Enter /
+   * blur commit and Escape reverts; the host renames from `onRename`.
+   */
+  readonly renamable?: boolean | undefined;
+  /**
+   * A tab's label: the close / rename button names and the starting draft of a
+   * rename, read lazily (a getter is fine) so a rename follows.
+   */
+  readonly label?: ((index: number) => string | undefined) | undefined;
+  /** A request to remove a tab; the primitive does not own the list. */
+  readonly onClose?: ((index: number) => void) | undefined;
+  /** A request to rename a tab with a non-empty label. */
+  readonly onRename?: ((index: number, label: string) => void) | undefined;
 }
 /** Spread onto the element with `role=tab` (a native `<button>`). */
 export interface TabProps {
@@ -3460,21 +3604,63 @@ export interface TabpanelProps {
   readonly tabindex: 0 | undefined;
   readonly hidden: boolean;
 }
+/**
+ * Spread onto the tab's close button. `tabindex=-1` keeps it out of the
+ * tablist's tab order (a tablist's stops are its tabs); the Delete key is the
+ * keyboard path.
+ */
+export interface TabCloseProps {
+  readonly "aria-label": string;
+  readonly tabindex: -1;
+  readonly onClick: () => void;
+}
+/** Spread onto the inline `<input>` a renaming tab renders instead of its label. */
+export interface TabRenameInputProps {
+  readonly type: "text";
+  readonly value: string;
+  readonly "aria-label": string;
+  readonly onInput: (event: InputEvent) => void;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
+  readonly onBlur: () => void;
+}
+/** The rename part of one tab: put `onDblClick` on the tab, `inputProps` in it. */
+export interface TabRenameProps {
+  readonly onDblClick: () => void;
+  /** Whether this tab is the one being renamed. */
+  readonly editing: Accessor<boolean>;
+  /** Start renaming `index` (e.g. a tab the host has just added). */
+  readonly begin: (index: number) => void;
+  /** Commit `label` to the tab being edited; an empty label cancels. */
+  readonly commit: (label: string) => void;
+  readonly cancel: () => void;
+  readonly inputProps: TabRenameInputProps;
+}
 export interface Tabs {
+  /** The tab count; read from `items` on every read, so a host that shrinks its list stays in step. */
   readonly items: number;
   readonly selected: Accessor<number>;
   /** Tab holding (or last holding) DOM focus; -1 when focus is outside. */
   readonly focused: Accessor<number>;
+  /** The tab being renamed inline, `null` when none. */
+  readonly editing: Accessor<number | null>;
   /** Programmatic selection request; ignores disabled tabs. */
   readonly select: (index: number) => void;
   /** Programmatic selection request (may point at a disabled tab, like base-ui). */
   readonly setSelected: (index: number) => void;
   /** Programmatic focus (does not select). */
   readonly focusTab: (index: number) => void;
+  /**
+   * The tab that takes focus once `onClose(index)`'s removal lands: the tab
+   * that slid into `index`, or the previous one when the last tab closed. Call
+   * it before the host removes the tab.
+   */
+  readonly focusAfterClose: (index: number) => number;
   readonly keyDown: (key: string) => void;
   readonly tablistProps: TablistProps;
   readonly tabProps: (index: number) => TabProps;
   readonly tabpanelProps: (index: number) => TabpanelProps;
+  readonly closeProps: (index: number) => TabCloseProps;
+  readonly renameProps: (index: number) => TabRenameProps;
 }
 /**
  * APG Tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): state plus prop
@@ -3489,6 +3675,14 @@ export interface Tabs {
  * Request/commit (map ticket `rt1p`): uncontrolled by default
  * (`defaultSelected`); pass `value` + `onValueChange` to own the selection.
  * Programmatic methods (`select`, `setSelected`, `keyDown`) are requests too.
+ *
+ * Close and rename are an **extension** (bean `cssints-gdv2`): the APG spec
+ * models a `deletable` flavour but neither a callback nor a rename, and this
+ * primitive owns no list. `closable` / `renamable` turn on the props; `onClose`
+ * / `onRename` ask the host, which removes or renames. Focus after a close goes
+ * to the tab that slid into the closed one's place, or to the previous tab when
+ * the last one closed; closing the last remaining tab is refused, as the spec
+ * refuses an empty tablist.
  */
 export declare const createTabs: (options?: TabsOptions) => Tabs;
 /**
@@ -3506,10 +3700,16 @@ export declare const createTabs: (options?: TabsOptions) => Tabs;
  * may ignore. The zoom window (`viewStart`/`viewEnd`) is not the controlled
  * value and stays uncontrolled.
  *
- * ponytail: the fixed 5-span tree is a demo fixture; a real consumer owns the
- * span list (layout is theirs). Roving tabindex only — a consumer must call
- * `focus()` on the row whose `tabindex` is 0 after arrow navigation (the tests'
- * fixture does this with an effect).
+ * The fixed 5-span tree is the demo fixture (the differential walk's oracle).
+ * A real consumer passes `rows`: span data on one shared axis, laid out by
+ * `barProps` as percentages of the rows' extent. No roles are borrowed from
+ * APG: a trace waterfall is a list of spans in time, so the rows mode is
+ * `role="list"` / `role="listitem"` (with `aria-level` for the depth) and the
+ * current row is `aria-current="true"`, which every element may carry.
+ *
+ * Roving tabindex only — a consumer must call `focus()` on the row whose
+ * `tabindex` is 0 after arrow navigation (the tests' fixture does this with an
+ * effect; the rows mode's span rows are reached by tabbing to the current one).
  */
 /** One span row: a fraction of the parent span on a shared 0..1 axis. */
 export interface TimelineRow {
@@ -3592,12 +3792,90 @@ export interface Timeline {
   readonly rowProps: (id: number) => TimelineRowProps;
   readonly rulerProps: TimelineRulerProps;
 }
-/**
- * Headless span timeline on Solid 2. The exported accessors are signals; the
- * prop objects are getter-backed, so spreading them keeps every attribute
- * reactive.
- */
-export declare const createTimeline: (options?: TimelineOptions) => Timeline;
+/** One span of a real trace: a point on a shared axis, labelled, at a depth. */
+export interface TimelineSpan {
+  readonly id: string;
+  readonly label: string;
+  /** Offset on the axis, in the axis' unit; `end` is the same axis, not a duration. */
+  readonly start: number;
+  readonly end: number;
+  /** Nesting level, 0 for a root span. */
+  readonly depth?: number;
+  readonly status?: "ok" | "error" | "unset";
+}
+export interface TimelineAxis {
+  /** The unit the numbers are in; the ruler labels its ticks with it. */
+  readonly unit?: "ms" | "us" | "s";
+}
+/** The rows mode: real span data, read lazily like every other option. */
+export interface TimelineRowsOptions {
+  readonly rows: ReadonlyArray<TimelineSpan>;
+  readonly axis?: TimelineAxis | undefined;
+  /** Controlled: the host owns the selection. */
+  readonly selected?: string | undefined;
+  /** A request to change the selection the host may ignore. */
+  readonly onSelect?: ((id: string) => void) | undefined;
+}
+export interface TimelineTick {
+  readonly value: number;
+  readonly left: number;
+  readonly label: string;
+}
+export interface TimelineListProps {
+  readonly role: "list";
+  readonly "aria-label": string;
+}
+export interface TimelineSpanRowProps {
+  readonly role: "listitem";
+  /** `depth + 1`: the nesting a flat list cannot show in the DOM. */
+  readonly "aria-level": number;
+  readonly "aria-current": "true" | undefined;
+  /** A styling hook: the status the span ended with. */
+  readonly "data-status": "ok" | "error" | "unset";
+  readonly tabindex: number;
+  readonly onClick: () => void;
+  readonly onKeyDown: (event: KeyboardEvent) => void;
+}
+export interface TimelineBarProps {
+  readonly "aria-hidden": "true";
+  /** `left` / `width` are percentages of the extent; `--depth` is the row's depth. */
+  readonly style: {
+    readonly left: string;
+    readonly width: string;
+    readonly "--depth": string;
+  };
+}
+export interface TimelineLabelProps {
+  /** `--depth`, so the host indents the label (`padding-inline-start: calc(var(--depth) * 1rem)`) instead of nesting it. */
+  readonly style: {
+    readonly "--depth": string;
+  };
+}
+export interface TimelineRulerRowsProps {
+  readonly role: "presentation";
+  readonly "aria-hidden": "true";
+  /** Ticks of a nice step across the extent; render them as children. */
+  readonly ticks: ReadonlyArray<TimelineTick>;
+}
+export interface TimelineRows {
+  /** `{ start, end }` across the rows; `{ 0, 0 }` when there are none. */
+  readonly extent: () => {
+    readonly start: number;
+    readonly end: number;
+  };
+  readonly depthOf: (id: string) => number;
+  readonly listProps: TimelineListProps;
+  readonly rowProps: (id: string) => TimelineSpanRowProps;
+  readonly barProps: (id: string) => TimelineBarProps;
+  readonly labelProps: (id: string) => TimelineLabelProps;
+  readonly rulerProps: TimelineRulerRowsProps;
+  /** Programmatic selection request; a controlled host may ignore it. */
+  readonly select: (id: string) => void;
+  readonly selectedId: Accessor<string | undefined>;
+}
+/** The demo five-span tree (`rows` absent) or real span data (`rows` given). */
+export declare function createTimeline(options: TimelineRowsOptions): TimelineRows;
+export declare function createTimeline(options?: TimelineOptions): Timeline;
 /** A toast's urgency; `error` is the only tone that announces assertively. */
 export type ToastTone = "info" | "success" | "error";
 export interface ToastOptions {

package/dist/index.mjs

@@ -2939,6 +2939,165 @@ const createDrawer = (options = {}) => {
 		handleProps: { "aria-hidden": "true" }
 	};
 };
+// src/dropzone.ts
+const REASON_TEXT = {
+	type: "unsupported type",
+	size: "too large"
+};
+const tokensOf = (accept) => (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+/** The HTML `accept` grammar: a token starting with "." is an extension, else a MIME type, `*` allowed. */
+const accepts = (accept, file) => {
+	const tokens = tokensOf(accept);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const [fileType = "", fileSubtype = ""] = file.type.toLowerCase().split("/");
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		const [type = "", subtype = ""] = token.split("/");
+		return type === fileType && (subtype === "*" || subtype === fileSubtype);
+	});
+};
+const refusal = (options, file) => {
+	if (!accepts(options.accept, file)) return "type";
+	if (options.maxSize !== void 0 && file.size > options.maxSize) return "size";
+};
+const messageOf = (batch) => {
+	if (batch === void 0) return;
+	const files = batch.total === 1 ? "1 file" : `${batch.total} files`;
+	if (batch.rejected.length === 0) return files;
+	const reasons = [...new Set(batch.rejected)].map((reason) => REASON_TEXT[reason]).join(", ");
+	return `${files}, ${batch.rejected.length} rejected: ${reasons}`;
+};
+/**
+* A file drop zone. There is no APG pattern and no Quint spec for one: the
+* contract is HTML's file input plus WAI-ARIA's live region, and
+* `test/dropzone.browser.test.tsx` is its oracle.
+*
+* Decisions:
+* - **The zone is never drag-only.** `browseProps` spreads onto a real
+*   `<button type="button">` that clicks the hidden input, so the picker is the
+*   keyboard path (Enter and Space are the platform's) and a pointer user can
+*   click as well as drag. The drop handlers add nothing the button cannot do.
+* - **Validation happens once per file**, in the order type then size, and a
+*   refused file reaches `onReject` with the reason the host shows. `accept` is
+*   the HTML grammar (`.` extension, MIME type, `*`); `maxSize` is bytes.
+* - **Dropping a folder or a `DataTransfer` with no files is a no-op**: no
+*   `onFiles`, no `onReject`, no message, and the previous announcement stays.
+* - **`dragleave` counts.** A child's `dragleave` bubbles to the zone, so the
+*   state is a depth counter: it clears only when the drag leaves the zone
+*   itself, or on a drop.
+* - **The zone is `role=group`** so `labels.zone` is exposed; `dragging()` is
+*   the only drag state a skin reads (no `data-dragging`).
+* - `disabled` marks the zone `aria-disabled`, disables the input natively and
+*   the browse button, and drops every drag before it becomes a batch.
+*/
+const createDropZone = (options) => {
+	const id = createUniqueId();
+	const [depth, setDepth] = createSignal(0);
+	const [batch, setBatch] = createSignal();
+	const disabled = () => options.disabled === true;
+	const deliver = (files) => {
+		if (disabled() || files.length === 0) return;
+		const accepted = [];
+		const rejected = [];
+		for (const file of files) {
+			const reason = refusal(options, file);
+			if (reason === void 0) accepted.push(file);
+			else {
+				rejected.push(reason);
+				options.onReject?.({
+					file,
+					reason
+				});
+			}
+		}
+		setBatch({
+			total: files.length,
+			rejected
+		});
+		if (accepted.length > 0) options.onFiles(accepted);
+	};
+	const dropped = (event) => {
+		event.preventDefault();
+		setDepth(0);
+		if (disabled()) return;
+		const transfer = event.dataTransfer;
+		if (transfer === null) return;
+		const items = Array.from(transfer.items).filter((item) => item.kind === "file");
+		const files = Array.from(transfer.files);
+		if (files.length === 0) return;
+		if (items.length > 0 && items.every((item) => item.webkitGetAsEntry?.()?.isDirectory === true)) return;
+		deliver(files);
+	};
+	const picked = (event) => {
+		const input = event.currentTarget;
+		const files = Array.from(input.files ?? []);
+		input.value = "";
+		deliver(files);
+	};
+	const browse = () => {
+		if (disabled()) return;
+		document.getElementById(id)?.click();
+	};
+	return {
+		dragging: () => depth() > 0,
+		message: () => messageOf(batch()),
+		inputProps: {
+			id,
+			type: "file",
+			get accept() {
+				return options.accept;
+			},
+			get multiple() {
+				return options.multiple === true ? true : void 0;
+			},
+			get disabled() {
+				return disabled() ? true : void 0;
+			},
+			hidden: true,
+			onChange: picked
+		},
+		zoneProps: {
+			role: "group",
+			get "aria-label"() {
+				return options.labels?.zone;
+			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			onDragEnter: (event) => {
+				event.preventDefault();
+				if (!disabled()) setDepth(depth() + 1);
+			},
+			onDragOver: (event) => {
+				event.preventDefault();
+			},
+			onDragLeave: (event) => {
+				event.preventDefault();
+				if (!disabled()) setDepth(Math.max(0, depth() - 1));
+			},
+			onDrop: dropped
+		},
+		browseProps: {
+			type: "button",
+			get disabled() {
+				return disabled() ? true : void 0;
+			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			get "aria-label"() {
+				return options.labels?.browse;
+			},
+			onClick: browse
+		},
+		statusProps: {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		}
+	};
+};
 // src/feed.ts
 /**
 * APG Feed (https://www.w3.org/WAI/ARIA/apg/patterns/feed/): state plus prop
@@ -5930,6 +6089,11 @@ const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "
 * pass `value` + `onValueChange` to own the value. A key or rail press is a
 * request the host may ignore.
 *
+* `disabled` is a widget-level extension of the pattern (the spec lists it
+* under its deliberate omissions): the thumb keeps its tab stop and announces
+* `aria-disabled`, and every key and rail press is dropped before it becomes a
+* request.
+*
 * ponytail: dragging (pointer capture/move) is not modelled — the spec
 * deliberately only fixes a discrete rail press.
 */
@@ -5948,6 +6112,7 @@ const createSlider = (options = {}) => {
 	const [focused, setFocused] = createSignal(false);
 	const orientation = () => options.orientation ?? "horizontal";
 	const direction = () => options.direction ?? "ltr";
+	const disabled = () => options.disabled === true;
 	const flipped = () => orientation() === "horizontal" && direction() === "rtl";
 	const commit = (next) => request(clamp(next));
 	const delta = (key) => {
@@ -5962,7 +6127,7 @@ const createSlider = (options = {}) => {
 		}
 	};
 	const keyDown = (key) => {
-		if (!focused()) return false;
+		if (!focused() || disabled()) return false;
 		if (key === "Home") {
 			commit(min);
 			return true;
@@ -5977,6 +6142,7 @@ const createSlider = (options = {}) => {
 		return true;
 	};
 	const pointerDown = (position) => {
+		if (disabled()) return;
 		const steps = Math.round(position * (max - min) / step);
 		commit(min + steps * step);
 		setFocused(true);
@@ -6003,6 +6169,9 @@ const createSlider = (options = {}) => {
 			get "aria-orientation"() {
 				return orientation();
 			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
 			get tabindex() {
 				return 0;
 			},
@@ -6167,6 +6336,12 @@ const createSliderMultiThumb = (options = {}) => {
 * stepper buttons, Enter and blur are requests the host may ignore; typing and
 * Escape change no committed value.
 *
+* `disabled` is a widget-level extension of the pattern (the spec models the
+* steppers' bound only, and lists this under its deliberate omissions): the
+* field announces `aria-disabled` and carries the native `disabled`, every key,
+* typed draft and both steppers are dropped before they become a request, and
+* neither stepper offers itself.
+*
 * ponytail: commit/revert on Enter/blur/Escape is the common convention, not
 * APG text.
 */
@@ -6187,6 +6362,7 @@ const createSpinbutton = (options = {}) => {
 	const [editing, setEditing] = createSignal(false);
 	const [draft, setDraft] = createSignal("");
 	const [wrap, setWrapSignal] = createSignal(options.wrap ?? false);
+	const disabled = () => options.disabled === true;
 	const draftInRange = (text) => {
 		const number = Number(text);
 		return text.trim() !== "" && number >= min && number <= max;
@@ -6214,7 +6390,7 @@ const createSpinbutton = (options = {}) => {
 		commitValue(next);
 	};
 	const keyDown = (key) => {
-		if (!focused()) return false;
+		if (!focused() || disabled()) return false;
 		switch (key) {
 			case "ArrowUp":
 				applyStep(1, step);
@@ -6246,7 +6422,7 @@ const createSpinbutton = (options = {}) => {
 		}
 	};
 	const commit = () => {
-		if (!focused()) return;
+		if (!focused() || disabled()) return;
 		const next = baseValue();
 		clearDraft();
 		commitValue(next);
@@ -6254,8 +6430,25 @@ const createSpinbutton = (options = {}) => {
 	const revert = () => {
 		clearDraft();
 	};
+	const blurField = () => {
+		const next = baseValue();
+		clearDraft();
+		setFocused(false);
+		if (disabled()) return;
+		commitValue(next);
+	};
+	const increment = () => {
+		if (disabled()) return;
+		setFocused(true);
+		applyStep(1, step);
+	};
+	const decrement = () => {
+		if (disabled()) return;
+		setFocused(true);
+		applyStep(-1, step);
+	};
 	const displayed = () => editing() ? draft() : String(value());
-	const ariaDisabled = (atBound) => !wrap() && atBound ? "true" : void 0;
+	const ariaDisabled = (atBound) => disabled() || !wrap() && atBound ? "true" : void 0;
 	return {
 		value,
 		focused,
@@ -6264,28 +6457,17 @@ const createSpinbutton = (options = {}) => {
 		displayed,
 		setValue: commitValue,
 		focus: () => setFocused(true),
-		blur: () => {
-			const next = baseValue();
-			clearDraft();
-			setFocused(false);
-			commitValue(next);
-		},
+		blur: blurField,
 		keyDown,
 		typeInput: (text) => {
-			if (!focused()) return;
+			if (!focused() || disabled()) return;
 			setEditing(true);
 			setDraft(text);
 		},
 		commit,
 		revert,
-		increment: () => {
-			setFocused(true);
-			applyStep(1, step);
-		},
-		decrement: () => {
-			setFocused(true);
-			applyStep(-1, step);
-		},
+		increment,
+		decrement,
 		setWrap: (next) => setWrapSignal(next),
 		inputProps: {
 			id: `${base}-input`,
@@ -6301,6 +6483,12 @@ const createSpinbutton = (options = {}) => {
 			get "aria-invalid"() {
 				return editing() && !draftInRange(draft()) ? "true" : void 0;
 			},
+			get "aria-disabled"() {
+				return disabled() ? "true" : void 0;
+			},
+			get disabled() {
+				return disabled();
+			},
 			get tabindex() {
 				return 0;
 			},
@@ -6308,18 +6496,13 @@ const createSpinbutton = (options = {}) => {
 				return displayed();
 			},
 			onFocus: () => setFocused(true),
-			onBlur: () => {
-				const next = baseValue();
-				clearDraft();
-				setFocused(false);
-				commitValue(next);
-			},
+			onBlur: blurField,
 			onKeyDown: (event) => {
 				if (keyDown(event.key)) event.preventDefault();
 			},
 			onInput: (event) => {
 				const target = event.currentTarget;
-				if (target !== null) {
+				if (target !== null && !disabled()) {
 					setEditing(true);
 					setDraft(target.value);
 				}
@@ -6333,10 +6516,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === max);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(1, step);
-			}
+			onClick: increment
 		},
 		decrementProps: {
 			role: "button",
@@ -6346,10 +6526,7 @@ const createSpinbutton = (options = {}) => {
 				return ariaDisabled(value() === min);
 			},
 			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => {
-				setFocused(true);
-				applyStep(-1, step);
-			}
+			onClick: decrement
 		}
 	};
 };
@@ -6736,28 +6913,40 @@ const createTextArea = (options = {}) => {
 * Request/commit (map ticket `rt1p`): uncontrolled by default
 * (`defaultSelected`); pass `value` + `onValueChange` to own the selection.
 * Programmatic methods (`select`, `setSelected`, `keyDown`) are requests too.
+*
+* Close and rename are an **extension** (bean `cssints-gdv2`): the APG spec
+* models a `deletable` flavour but neither a callback nor a rename, and this
+* primitive owns no list. `closable` / `renamable` turn on the props; `onClose`
+* / `onRename` ask the host, which removes or renames. Focus after a close goes
+* to the tab that slid into the closed one's place, or to the previous tab when
+* the last one closed; closing the last remaining tab is refused, as the spec
+* refuses an empty tablist.
 */
 const createTabs = (options = {}) => {
-	const items = Math.max(1, options.items ?? 4);
+	/** The live count: the host shrinks its list after a close, and the options are read lazily. */
+	const count = () => Math.max(1, options.items ?? 4);
 	const base = options.id ?? createUniqueId();
 	const disabled = new Set(options.disabled ?? []);
 	const focusablePanels = new Set(options.focusablePanels ?? []);
 	const activation = () => options.activation ?? "automatic";
 	const orientation = () => options.orientation ?? "horizontal";
+	const closable = () => options.closable ?? false;
+	const renamable = () => options.renamable ?? false;
+	const labelOf = (index) => options.label?.(index) ?? `tab ${index + 1}`;
 	const firstEnabled = () => {
-		for (let index = 0; index < items; index += 1) if (!disabled.has(index)) return index;
+		for (let index = 0; index < count(); index += 1) if (!disabled.has(index)) return index;
 		return 0;
 	};
 	const initial = options.defaultSelected ?? firstEnabled();
 	const [selected, request] = createControllable({
 		value: () => options.value,
-		initial: initial >= 0 && initial < items && !disabled.has(initial) ? initial : firstEnabled(),
+		initial: initial >= 0 && initial < count() && !disabled.has(initial) ? initial : firstEnabled(),
 		onChange: () => options.onValueChange
 	});
 	/** The tab that carries `tabindex=0`: the selected one, or the first enabled. */
 	const roving = () => disabled.has(selected()) ? firstEnabled() : selected();
 	const select = (index) => {
-		if (index < 0 || index >= items || disabled.has(index)) return;
+		if (index < 0 || index >= count() || disabled.has(index)) return;
 		request(index);
 	};
 	const move = (index) => {
@@ -6765,14 +6954,59 @@ const createTabs = (options = {}) => {
 		if (activation() === "automatic") select(index);
 	};
 	const step = (from, delta) => {
-		for (let offset = 1; offset <= items; offset += 1) {
-			const candidate = ((from + delta * offset) % items + items) % items;
+		for (let offset = 1; offset <= count(); offset += 1) {
+			const candidate = ((from + delta * offset) % count() + count()) % count();
 			if (!disabled.has(candidate)) return candidate;
 		}
 		return from;
 	};
 	const [focused, setFocused] = createSignal(-1);
+	/**
+	* The tab that takes focus once `onClose(index)`'s removal lands: the tab at
+	* `index` in the shortened list (the following tab slid into it), or the
+	* previous one when the last tab closed.
+	*/
+	const focusAfterClose = (index) => index < count() - 1 ? index : Math.max(0, count() - 2);
+	const close = (index) => {
+		if (!closable() || count() <= 1 || index < 0 || index >= count()) return;
+		const next = focusAfterClose(index);
+		setFocused(next);
+		if (selected() === index) select(next);
+		options.onClose?.(index);
+	};
+	const [editVersion, setEditVersion] = createSignal(0);
+	let editingIndex = null;
+	const editing = () => {
+		editVersion();
+		return editingIndex;
+	};
+	const setEditing = (index) => {
+		editingIndex = index;
+		setEditVersion((version) => version + 1);
+	};
+	const [draft, setDraft] = createSignal("");
+	const begin = (index) => {
+		if (!renamable() || disabled.has(index) || index < 0 || index >= count()) return;
+		setEditing(index);
+		setDraft(options.label?.(index) ?? "");
+	};
+	const cancel = () => {
+		if (editing() === null) return;
+		setEditing(null);
+		setDraft("");
+	};
+	/** Enter / blur commit; an empty label is not a name, so it cancels. */
+	const commit = (label) => {
+		const index = editing();
+		if (index === null) return;
+		setEditing(null);
+		setDraft("");
+		const trimmed = label.trim();
+		if (trimmed === "") return;
+		options.onRename?.(index, trimmed);
+	};
 	const keyDown = (key) => {
+		if (editing() !== null) return;
 		const current = focused();
 		if (current < 0) return;
 		const forward = orientation() === "horizontal" ? "ArrowRight" : "ArrowDown";
@@ -6788,27 +7022,34 @@ const createTabs = (options = {}) => {
 				move(firstEnabled());
 				break;
 			case "End": {
-				let last = items - 1;
+				let last = count() - 1;
 				while (last > 0 && disabled.has(last)) last -= 1;
 				move(last);
 				break;
 			}
 			case "Enter":
 			case " ":
-			case "Space": select(current);
+			case "Space":
+				select(current);
+				break;
+			case "Delete": close(current);
 		}
 	};
 	return {
-		items,
+		get items() {
+			return count();
+		},
 		selected,
 		focused,
+		editing,
 		select,
 		setSelected: (index) => {
-			if (index >= 0 && index < items) request(index);
+			if (index >= 0 && index < count()) request(index);
 		},
 		focusTab: (index) => {
-			if (index >= 0 && index < items) setFocused(index);
+			if (index >= 0 && index < count()) setFocused(index);
 		},
+		focusAfterClose,
 		keyDown,
 		tablistProps: {
 			role: "tablist",
@@ -6841,6 +7082,12 @@ const createTabs = (options = {}) => {
 				setFocused(index);
 			},
 			onKeyDown: (event) => {
+				if (editing() !== null) return;
+				if (event.key === "Delete" && closable()) {
+					event.preventDefault();
+					close(index);
+					return;
+				}
 				const before = focused();
 				keyDown(event.key);
 				if (focused() !== before || event.key === "Enter" || event.key === " ") event.preventDefault();
@@ -6856,6 +7103,43 @@ const createTabs = (options = {}) => {
 			get hidden() {
 				return selected() !== index;
 			}
+		}),
+		closeProps: (index) => ({
+			get "aria-label"() {
+				return `Close ${labelOf(index)}`;
+			},
+			tabindex: -1,
+			onClick: () => close(index)
+		}),
+		renameProps: (index) => ({
+			onDblClick: () => begin(index),
+			editing: () => editing() === index,
+			begin,
+			commit,
+			cancel,
+			inputProps: {
+				type: "text",
+				get value() {
+					return draft();
+				},
+				get "aria-label"() {
+					return `Rename ${labelOf(index)}`;
+				},
+				onInput: (event) => {
+					const target = event.currentTarget;
+					if (target !== null) setDraft(target.value);
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						commit(draft());
+					} else if (event.key === "Escape") {
+						event.preventDefault();
+						cancel();
+					}
+				},
+				onBlur: () => commit(draft())
+			}
 		})
 	};
 };
@@ -6936,11 +7220,10 @@ const shrink = (x) => x <= MIN_WIDTH ? x : x - Math.floor(x / 4) < MIN_WIDTH ? M
 const grow = (x) => x >= DOMAIN_MAX ? x : x + Math.floor(x / 4) > DOMAIN_MAX ? DOMAIN_MAX : x + Math.floor(x / 4);
 const clampStart = (start, w) => start < DOMAIN_MIN ? DOMAIN_MIN : start + w > DOMAIN_MAX ? DOMAIN_MAX - w : start;
 /**
-* Headless span timeline on Solid 2. The exported accessors are signals; the
-* prop objects are getter-backed, so spreading them keeps every attribute
-* reactive.
+* The demo tree: five fixed spans, collapsing, zoom. Its oracle is
+* `specs/apg/timeline.qnt` through the differential walk.
 */
-const createTimeline = (options = {}) => {
+const createDemoTimeline = (options = {}) => {
 	const initialExpanded = (options.defaultExpanded ?? []).reduce((mask, node) => setBit(mask, node, true), 0);
 	const [expanded, setExpanded] = createSignal(initialExpanded);
 	const [selected, requestSelected] = createControllable({
@@ -7095,6 +7378,172 @@ const createTimeline = (options = {}) => {
 		}
 	};
 };
+/** A zero-length span still paints: at least half a percent of the track. */
+const MIN_BAR_WIDTH = .5;
+/** Aim for about five ticks, whatever the extent. */
+const TICK_TARGET = 5;
+const percent = (value) => `${Math.round(value * 1e3) / 1e3}%`;
+/** 1, 2 or 5 times a power of ten, the step that makes the fewest labels fit. */
+const niceStep = (span) => {
+	const raw = span / TICK_TARGET;
+	const magnitude = 10 ** Math.floor(Math.log10(raw));
+	const normalized = raw / magnitude;
+	return (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+};
+const formatTick = (value, step, unit) => {
+	const decimals = step >= 1 ? 0 : Math.min(6, Math.ceil(-Math.log10(step)));
+	return `${value.toFixed(decimals)} ${unit}`;
+};
+/**
+* The rows mode: real span data on one axis. Everything hangs off `options.rows`
+* read at attribute-read time, so the host may pass a getter and a trace may
+* arrive after mount.
+*/
+const createRowsTimeline = (options) => {
+	const rows = () => options.rows;
+	const rowOf = (id) => {
+		const row = rows().find((candidate) => candidate.id === id);
+		if (row === void 0) throw new Error(`createTimeline: no row ${id}`);
+		return row;
+	};
+	const [selectedId, requestSelected] = createControllable({
+		value: () => options.selected,
+		initial: void 0,
+		onChange: () => (id) => {
+			if (id !== void 0) options.onSelect?.(id);
+		}
+	});
+	const [focus, setFocus] = createSignal(void 0);
+	const currentFocus = () => focus() ?? rows()[0]?.id;
+	const select = (id) => {
+		requestSelected(id);
+	};
+	const extent = () => {
+		let start = Number.POSITIVE_INFINITY;
+		let end = Number.NEGATIVE_INFINITY;
+		for (const row of rows()) {
+			start = Math.min(start, row.start);
+			end = Math.max(end, row.end);
+		}
+		return start <= end ? {
+			start,
+			end
+		} : {
+			start: 0,
+			end: 0
+		};
+	};
+	const ticks = () => {
+		if (rows().length === 0) return [];
+		const { start, end } = extent();
+		const unit = options.axis?.unit ?? "ms";
+		const span = end - start;
+		if (!(span > 0)) return [{
+			value: start,
+			left: 0,
+			label: formatTick(start, 1, unit)
+		}];
+		const step = niceStep(span);
+		const out = [];
+		for (let value = Math.ceil(start / step) * step; value <= end; value += step) out.push({
+			value,
+			left: (value - start) / span * 100,
+			label: formatTick(value, step, unit)
+		});
+		return out;
+	};
+	const barStyle = (id) => {
+		const row = rowOf(id);
+		const depth = String(row.depth ?? 0);
+		const { start, end } = extent();
+		const span = end - start;
+		if (!(span > 0)) return {
+			left: "0%",
+			width: percent(MIN_BAR_WIDTH),
+			"--depth": depth
+		};
+		const left = Math.max(0, (row.start - start) / span * 100);
+		const width = Math.max(MIN_BAR_WIDTH, (row.end - row.start) / span * 100);
+		return {
+			left: percent(left),
+			width: percent(width),
+			"--depth": depth
+		};
+	};
+	const onKeyDown = (id, event) => {
+		const list = rows();
+		const index = list.findIndex((row) => row.id === id);
+		switch (event.key) {
+			case "ArrowDown":
+				setFocus(list[Math.min(index + 1, list.length - 1)]?.id);
+				break;
+			case "ArrowUp":
+				setFocus(list[Math.max(index - 1, 0)]?.id);
+				break;
+			case "Home":
+				setFocus(list[0]?.id);
+				break;
+			case "End":
+				setFocus(list[list.length - 1]?.id);
+				break;
+			case "Enter":
+			case " ":
+				select(id);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	return {
+		extent,
+		depthOf: (id) => rowOf(id).depth ?? 0,
+		listProps: {
+			role: "list",
+			"aria-label": "Span timeline"
+		},
+		rowProps: (id) => ({
+			role: "listitem",
+			get "aria-level"() {
+				return (rowOf(id).depth ?? 0) + 1;
+			},
+			get "aria-current"() {
+				return selectedId() === id ? "true" : void 0;
+			},
+			get "data-status"() {
+				return rowOf(id).status ?? "unset";
+			},
+			get tabindex() {
+				return currentFocus() === id ? 0 : -1;
+			},
+			onClick: () => {
+				setFocus(id);
+				select(id);
+			},
+			onKeyDown: (event) => onKeyDown(id, event)
+		}),
+		barProps: (id) => ({
+			"aria-hidden": "true",
+			get style() {
+				return barStyle(id);
+			}
+		}),
+		labelProps: (id) => ({ get style() {
+			return { "--depth": String(rowOf(id).depth ?? 0) };
+		} }),
+		rulerProps: {
+			role: "presentation",
+			"aria-hidden": "true",
+			get ticks() {
+				return ticks();
+			}
+		},
+		select,
+		selectedId
+	};
+};
+function createTimeline(options = {}) {
+	return "rows" in options ? createRowsTimeline(options) : createDemoTimeline(options);
+}
 // src/toast.ts
 const DEFAULT_TIMEOUT_MS = 5e3;
 const DEFAULT_MAX = 3;
@@ -8825,4 +9274,4 @@ const createRearrangeableListbox = (options) => {
 		})
 	};
 };
-export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createConfirm, createDialogModal, createDisclosure, createDrawer, createFeed, createField, createGrid, createHotkeys, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPanZoom, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createScrollspy, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTable, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
+export { ConfirmPendingError, DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createConfirm, createDialogModal, createDisclosure, createDrawer, createDropZone, createFeed, createField, createGrid, createHotkeys, createLink, createListbox, createMenu, createMenubar, createMeter, createPagination, createPanZoom, createPlayer, createPopover, createRadioGroup, createRearrangeableListbox, createResizablePanels, createScrollspy, createSlider, createSliderMultiThumb, createSpinbutton, createStatus, createSwitch, createTable, createTabs, createTextArea, createTextInput, createTimeline, createToast, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssints/headless",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Headless APG widgets on Solid 2: state plus attribute objects, no elements, no styling, each conformance-checked against its Quint spec",
   "license": "MIT",
   "repository": {