cssints 0.21.0 → 0.22.0

package/dist/vite.mjs

@@ -804,7 +804,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false, e
 		if (!FILE_RE.test(id) || excluded(id)) return void 0;
 		if (!marked(code, id)) {
 			if (ctx.environment.name === "client") yield* drop(id);
-			return ctx.environment.name === "ssr" && (inner || !build) && /[jt]sx$/.test(id) && !id.includes("node_modules") ? yield* inertJsx(code, id) : void 0;
+			return ctx.environment.name === "ssr" && (inner || !build) && /[jt]sx$/.test(id) ? yield* inertJsx(code, id) : void 0;
 		}
 		if (ctx.environment.name === "ssr" && (inner || !build)) {
 			const out = yield* instrument(code, id, false);

package/docs/API.md

@@ -1298,8 +1298,8 @@ createConfirm(options?: { id?: string | undefined; onOpenChange?(open: boolean):
 Two live regions with no APG pattern and no Quint spec: `createStatus` is one polite message whose text is replaced, `createToast` queues toasts whose countdown pauses. Their oracle is `packages/headless/test/toast.browser.test.tsx`.
 
 ```ts skip
-createStatus(options?: { id?: string | undefined }): {
-  message(): string | undefined;
+createStatus(options?: { id?: string | undefined; from?: (() => string | undefined) | undefined }): {
+  message(): string | undefined; // from() when the host controls the text, else the last show
   show(text: string): void; // replaces the text; nothing is queued
   clear(): void;
   statusProps: { id; role: "status"; "aria-live": "polite"; "aria-atomic": "true" };
@@ -1332,7 +1332,7 @@ createToast(options?: {
 };
 ```
 
-`createStatus` renders one `role=status` region that the host keeps mounted; `show()` replaces its text, so a burst of "Link copied" / "Saved" reads as the last state, not as a queue. A status is never for errors: an error is `createAlert` (`role=alert`), and a titled message with a timeout is a toast.
+`createStatus` renders one `role=status` region that the host keeps mounted; `show()` replaces its text, so a burst of "Link copied" / "Saved" reads as the last state, not as a queue. A status is never for errors: an error is `createAlert` (`role=alert`), and a titled message with a timeout is a toast. Both take `from: () => text`, which makes the text the host's own signal (`createAlert({ from: () => error() })`): no effect mirrors it into `show()`, and clearing the signal unmounts the alert.
 
 A toast is its own live region inside the `role=region` landmark: `role=alert` for `tone: "error"` (assertive) and `role=status` otherwise (polite). The host renders the `title` and `description` handed to `show` inside that element, so the toast's own text is the announcement — `aria-atomic` reads all of it, a close button's label included, so keep a toast to its title and description and give a close button no more than an icon with a label. The role sits on the toast rather than on one container per tone: the container is the `region` landmark, so it cannot also be the live region, and a role per toast needs no second region from the host. One timer per toast honours `timeout`; hover pauses it when `pauseOnHover` is true and focus always pauses, and both resume with the time that was left rather than restarting the deadline. `max` drops the oldest toast past the ceiling, and `onDismiss` fires for every toast that leaves. F6 into the region is the host's handler (hotkeys are a separate bean, cssints-h0d5): give `regionProps` an element with `tabindex="-1"` and focus it, remembering where focus was.
 
@@ -1432,7 +1432,7 @@ A data table on a **native `<table>`**: sortable column headers and row selectio
 ```ts skip
 createTable(options: {
   columns: ReadonlyArray<{ key: string; sortable?: boolean; numeric?: boolean; abbr?: string | undefined }>; // sortable defaults true
-  rows: ReadonlyArray<string>; // row ids in render order; the host sorts its own data
+  rows: ReadonlyArray<string> | (() => ReadonlyArray<string>); // row ids in render order; a getter is read lazily
   selection?: "none" | "single" | "multiple" | undefined; // "none"
   sortCycle?: "tri-state" | "toggle" | undefined; // "tri-state": ascending -> descending -> unsorted
   sort?: TableSort | null | undefined; // controlled; null = unsorted, undefined = uncontrolled
@@ -1465,7 +1465,7 @@ createTable(options: {
 
 `aria-sort` is carried by the sorted column only; a sortable header that is not sorted has none (ARIA's "not sorted" default), and a `sortable: false` column gets no button from `headerButtonProps` at all, so it is not a tab stop. The header button cycles `ascending` -> `descending` -> unsorted by default (so the table can be put back in its own order) and `ascending` <-> `descending` with `sortCycle: "toggle"` (what the APG grid example does); a new column always starts `ascending`, and only one is sorted. Sorting is the host's data: the primitive carries the descriptor and announces it, it never reorders a row.
 
-Selection is over ids, so it survives the host's re-sort. `rowProps` carries `aria-selected` and a click that selects; `toggleRow` / `toggleAll` are the programmatic path, and the row's checkbox stops its click from reaching the row so the two controls never toggle the same row twice. `selectAllProps` and `rowCheckboxProps` are `undefined` unless `selection` is `"multiple"` (one control over one selection is meaningless), and the select-all is a `role="checkbox"` rather than a native `input` because the mixed state a screen reader must hear is `aria-checked="mixed"`, not the DOM-only `indeterminate` property. It toggles the rows the table renders: a windowed table toggles its window and keeps the rest of the selection. A table that renders all of its rows and columns carries no `aria-rowcount` / `aria-colcount` (the markup already says it); pass them, and every cell gets its `aria-colindex`, only when the host windows. `numeric` is a layout hint for the host's skin: HTML has no attribute for it.
+`rows` may be a getter (`() => rows()`): it is read at attribute-read time, so a table whose rows arrive later keeps its sort and its selection instead of being rebuilt, and a selection made before the rows landed applies once they do. Selection is over ids, so it survives the host's re-sort. `rowProps` carries `aria-selected` and a click that selects; `toggleRow` / `toggleAll` are the programmatic path, and the row's checkbox stops its click from reaching the row so the two controls never toggle the same row twice. `selectAllProps` and `rowCheckboxProps` are `undefined` unless `selection` is `"multiple"` (one control over one selection is meaningless), and the select-all is a `role="checkbox"` rather than a native `input` because the mixed state a screen reader must hear is `aria-checked="mixed"`, not the DOM-only `indeterminate` property. It toggles the rows the table renders: a windowed table toggles its window and keeps the rest of the selection. A table that renders all of its rows and columns carries no `aria-rowcount` / `aria-colcount` (the markup already says it); pass them, and every cell gets its `aria-colindex`, only when the host windows. `numeric` is a layout hint for the host's skin: HTML has no attribute for it.
 
 ### Headless: `createTabs` (`@cssints/headless`)
 
@@ -1477,7 +1477,7 @@ Close and rename are an **extension** (bean `cssints-gdv2`, the docs playground'
 
 ```ts skip
 createTabs(options?: {
-  ...; // the plain tabs: items, value, defaultSelected, orientation, activation, disabled, focusablePanels, id, onValueChange
+  ...; // the plain tabs: items, value, defaultSelected, orientation, activation, disabled, focusablePanels, id, tabId, panelId, onValueChange
   closable?: boolean; // false: closeProps and the Delete key; the host removes from onClose
   renamable?: boolean; // false: a double click edits the label inline; the host renames from onRename
   label?(index: number): string | undefined; // the tab's name: the buttons' labels and the rename draft
@@ -1501,6 +1501,7 @@ createTabs(options?: {
 
 - **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)` names that index in the shortened list (call it before the host removes the tab). 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, and a label that trims to nothing cancels. While editing, the input owns the keys: the tablist's roving does not move. `begin(index)` is the programmatic start, for a tab the host has just added (append it, then `focusTab(index)` and `begin(index)`).
+- **Ids.** `tabId(index)` and `panelId(index)` replace the generated `${id}-tab-<index>` / `${id}-tabpanel-<index>`, and `aria-controls` / `aria-labelledby` follow them. Use them when the host's markup or a deep link already names a panel (`#logs`): the alternative is a second id on the same element, which no attribute can carry.
 - **The host's list.** `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. `label` is read lazily too, so a renamed tab renames its buttons with it.
 - The spec models a `deletable` flavour (Delete, focus to the next tab, the last refused) but neither a rename nor the callbacks, so the browser test, not the model, holds the extension.
 
@@ -1649,9 +1650,12 @@ createMenu(options: {
   open?: boolean | undefined; // controlled: the host owns the open state
   defaultOpen?: boolean; // uncontrolled starting state
   onOpenChange?(open: boolean): void; // a request the host may ignore
-  value?: number | undefined; // controlled checked items, packed (checkboxItem0 * 5 + radioChoice, 1-based)
-  defaultValue?: number;
-  onCheckedValueChange?(value: number): void;
+  checked?: ReadonlyArray<number> | undefined; // controlled, readable: the checked checkbox item indices
+  choice?: number | undefined; // controlled, readable: the chosen radio item, -1 for none
+  value?: number | undefined; // controlled, packed view of the same state (checkboxItem0 * 5 + radioChoice, 1-based)
+  defaultValue?: number; // the uncontrolled packed state at mount
+  onCheckedValueChange?(value: number): void; // a packed request the host may ignore
+  onCheckedValuesChange?(checked: ReadonlyArray<number>, choice: number): void; // the readable request
   triggerMode?: "outside" | "held" | undefined; // where the focus sits while the menu is closed
   disabled?: ReadonlyArray<number>; // focusable, never activated
   id?: string | undefined;
@@ -1660,6 +1664,9 @@ createMenu(options: {
   open(): boolean;
   focusLevel(): 0 | 1 | 2; // 0 outside, 1 on the trigger, 2 on an item
   focusIndex(): number;
+  checked(): ReadonlyArray<number>; // the readable view of the checked state
+  choice(): number; // the readable view of the radio choice
+  value(): number; // the packed view of the same state
   openMenu(): void; // a request, like every intent
   closeMenu(): void;
   keyDown(key: string): void;
@@ -1667,6 +1674,8 @@ createMenu(options: {
 };
 ```
 
+**The checked state has one store and two views.** The readable pair (`checked` + `choice`) is the store; `value` is derived from it as `menu-checkable.qnt`'s `checked(wrap, choice)` (one checkbox bit * 5 + the radio). The pack has one checkbox bit, so only the readable pair can name a checkbox beyond item 0. A host may own either view; each has its request (`onCheckedValuesChange(checked, choice)` and `onCheckedValueChange(value)`), and where both views are given the readable pair wins. `defaultChecked` / `defaultChoice` start the pair and `defaultValue` the packed side.
+
 **The open state is a request/commit pair**, like every other controlled primitive: `open` (+ `onOpenChange`) makes the host own it, `defaultOpen` starts it. Every intent that opens or closes — the trigger's click and its keys, Escape, an item's activation, Tab, an outside click in a kit, the programmatic `openMenu` / `closeMenu` — is a request, so a host that holds `open` keeps the menu open and the focus where it was; `menu-button.qnt` reverts the whole transition of a rejected request, focus included. A write the host makes on its own is not a request: it takes the focus to the first item when it opens and to the trigger when it closes, and a write of the value it already has moves nothing (no widget can observe it).
 
 ### Headless: `createCombobox` (`@cssints/headless`)
@@ -1834,6 +1843,48 @@ createSpinbutton(options?: {
 - a disabled spinbutton's field announces `aria-disabled` **and carries the native `disabled`** (the field is an `<input>`, so the platform's own form-control rule applies); the spin keys, the typed draft (Enter and blur included) and both steppers change nothing, and **both** steppers announce `aria-disabled="true"` — the at-bound rule of the spec stays, and a disabled widget adds the other side;
 - both read the option on every attribute read, so a host may flip `disabled` on a mounted widget and the attributes and the guards follow in the same tick.
 
+### Headless: `createSliderMultiThumb` (`@cssints/headless`)
+
+The APG Slider (Multi-Thumb) pattern: two `role="slider"` thumbs on one rail, each bounded by its neighbour, so they cannot pass one another; equal values are allowed. Its behaviour is `packages/apg-specs/specs/apg/slider-multithumb.qnt`, checked against the real DOM by the differential walk in `packages/headless/test/slider-multithumb.browser.test.tsx`. The spec fixes two thumbs and one linked pair: the independent-thumbs variant, N thumbs, dragging, a nearest-thumb rail press and `disabled` are deliberate omissions (a press names its thumb). Options are plain and read lazily; `value` + `onValueChange` make the widget controlled.
+
+```ts skip
+createSliderMultiThumb(options?: {
+  min?: number; // 0
+  max?: number; // 10
+  step?: number; // 1
+  largeStep?: number; // 3: the jump of PageUp / PageDown
+  value?: readonly [number, number] | undefined; // controlled; undefined = uncontrolled
+  defaultValue?: readonly [number, number]; // [3, 7], clamped into the range and ordered
+  orientation?: "horizontal" | "vertical"; // "horizontal"
+  direction?: "ltr" | "rtl"; // "ltr": under rtl the horizontal arrows flip
+  id?: string; // base of the thumb ids
+  onValueChange?(values: readonly [number, number]): void; // a request the host may ignore
+}): {
+  values(): readonly [number, number];
+  focused(): 0 | 1 | null;
+  setValues(values: readonly [number, number]): void;
+  pointerDown(index: 0 | 1, position: number): void; // a press at a 0..1 fraction of the track
+  focusThumb(index: 0 | 1): void;
+  blur(): void;
+  keyDown(key: string): boolean; // true when the key was consumed (preventDefault it)
+  thumbProps(index: 0 | 1): {
+    id;
+    role: "slider";
+    "aria-valuenow"; // the thumb's value
+    "aria-valuemin"; // the lower thumb: the range's minimum; the upper thumb: the lower value
+    "aria-valuemax"; // the lower thumb: the upper value; the upper thumb: the range's maximum
+    "aria-valuetext";
+    "aria-orientation";
+    tabindex: 0;
+    onFocus;
+    onBlur;
+    onKeyDown;
+  };
+};
+```
+
+Both thumbs are tab stops in a fixed order (lower, then upper), whatever the values are. There is no `trackProps`: the primitive has no rail press, because a press has to name a thumb.
+
 ### Headless: `createKnob` (`@cssints/headless`)
 
 A virtual knob after GarageBand's ([How Apple Designs a Virtual Knob](https://jherrm.github.io/knobs/)): spin around the centre, or slide vertically / horizontally, with one gesture locked per drag. **No APG pattern and no ARIA role exist for a dial**, so there is no Quint spec and no ported scenarios: `packages/headless/test/knob.browser.test.tsx` (real Chromium) is the oracle. The knob is a `role=slider` — the closest role WAI-ARIA has — with a polite live value; a numeric field must sit next to it, because a dial is never the only control. Options are plain and read lazily; `value` + `onValueChange` make the widget controlled.
@@ -1890,8 +1941,10 @@ createDropZone(options: {
   maxSize?: number | undefined; // bytes; a larger file is rejected with "size"
   disabled?: boolean | undefined; // zone aria-disabled, native disabled input and button, drops ignored
   onFiles(files: File[]): void; // the accepted files of one batch; not called when none passed
-  onReject?({ file, reason }: { file: File; reason: "type" | "size" }): void; // once per refused file
-  labels?: { zone?: string | undefined; browse?: string | undefined };
+  maxFiles?: number | undefined; // files taken from one batch; the rest are rejected with "count"
+  onReject?({ file, reason }: { file: File; reason: "type" | "size" | "count" }): void; // once per refused file
+  labels?: { zone?: string | undefined; labelledby?: string | undefined; browse?: string | undefined };
+  formatMessage?(message: { total: number; accepted: number; rejected: ReadonlyArray<"type" | "size" | "count"> }): string | undefined; // the announcement in the host's language
 }): {
   dragging(): boolean; // a drag is over the zone; a child's dragleave does not clear it
   message(): string | undefined; // "2 files, 1 rejected: too large"; undefined before the first batch
@@ -1907,6 +1960,7 @@ createDropZone(options: {
   zoneProps: {
     role: "group";
     "aria-label": string | undefined;
+    "aria-labelledby": string | undefined; // labels.labelledby: the host's own heading wins over aria-label
     "aria-disabled": "true" | undefined;
     onDragEnter;
     onDragOver;
@@ -1921,10 +1975,10 @@ createDropZone(options: {
 Principles:
 
 - **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 too. The drop handlers add nothing the button cannot do.
-- **Validation happens once per file**, in the order type then size, with a reason the host can show: `onReject` gets the file and `"type" | "size"`, and `onFiles` gets the rest in one batch. A batch with nothing accepted calls `onFiles` not at all — not with an empty array.
+- **Validation happens once per file**, in the order type then size then count, with a reason the host can show: `onReject` gets the file and `"type" | "size" | "count"` (`maxFiles` limits what one batch takes), and `onFiles` gets the rest in one batch. A batch with nothing accepted calls `onFiles` not at all — not with an empty array.
 - **A folder or an empty `DataTransfer` is a no-op** (Chromium marks a dropped directory as a `file` item whose `webkitGetAsEntry().isDirectory` is true): no callback, no rejection, and `message()` keeps the previous sentence.
 - **`dragleave` counts.** A child's `dragleave` bubbles to the zone, so `dragging()` is a depth counter: it clears when the drag leaves the zone, or on a drop. It is the styling hook; the primitive writes no `data-dragging`.
-- **`message()` is a default sentence for the host's status region** ("2 files, 1 rejected: too large", `undefined` before the first batch): the primitive tracks the counts of the last batch, the host decides the words. Render `statusProps` once and keep it mounted, or a change of its text is not announced.
+- **`message()` is a default sentence for the host's status region** ("2 files, 1 rejected: too large", `undefined` before the first batch): the primitive tracks the counts of the last batch, the host decides the words. An app with a locale passes `formatMessage`, which gets the same counts (`total`, `accepted`, `rejected`) and returns the sentence to announce. Render `statusProps` once and keep it mounted, or a change of its text is not announced.
 - Picking through the input is the same path as a drop and clears `input.value` afterwards, so choosing the same file twice fires `change` again.
 
 ### Headless: `createTimeline` (`@cssints/headless`)
@@ -1933,7 +1987,7 @@ Two modes over one axis. Without `rows` it is the package's demo tree of five fi
 
 ```ts skip
 createTimeline(options: {
-  rows: ReadonlyArray<{ id: string; label: string; start: number; end: number; depth?: number; status?: "ok" | "error" | "unset" }>; // in display order
+  rows: ReadonlyArray<{ id: string; label: string; start: number; end: number; depth?: number; status?: "ok" | "error" | "unset" }> | (() => ...); // in display order; a getter lets a trace arrive after mount
   axis?: { unit?: "ms" | "us" | "s" } | undefined; // "ms": the ruler's labels
   selected?: string | undefined; // controlled; undefined = uncontrolled
   onSelect?(id: string): void; // a request the host may ignore
@@ -1947,6 +2001,7 @@ createTimeline(options: {
   rulerProps: { role: "presentation"; "aria-hidden": "true"; ticks: ReadonlyArray<{ value: number; left: number; label: string }> };
   select(id: string): void;
   selectedId(): string | undefined;
+  focusedId(): string | undefined; // the row with the roving tab stop: the last one focused, else the first
 };
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssints",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
   "license": "MIT",
   "repository": {
@@ -72,7 +72,7 @@
     }
   },
   "dependencies": {
-    "@cssints/css-grammar": "^0.21.0",
+    "@cssints/css-grammar": "^0.22.0",
     "culori": "^4.0.2",
     "effect": "4.0.6",
     "happy-dom": "^20.14.5",