cssints 0.22.0 → 0.24.0

package/dist/{node-CWwn8PaX.d.mts → author-types-CTeNrh2c.d.mts}

@@ -1,4 +1,3 @@
-import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime } from "./author-types-X4zGpNpU.mjs";
 import { Warning } from "@cssints/css-grammar/support";
 import { Context } from "effect";
 import { TokenType } from "@cssints/css-grammar/token";
@@ -124,7 +123,7 @@ interface RegistryState {
   /** file -> site index -> replacement expression */
   sites: Map<string, Map<number, string>>;
   /** file -> site index -> the declarations of the style it produced: what a cn() with runtime arguments settles (macro.ts `groupOf`) */
-  nodes: Map<string, Map<number, Decl[]>>;
+  nodes: Map<string, Map<number, Decl$1[]>>;
   /** class -> rule; one entry per class across all modules */
   rules: Map<string, Rule>;
   /** `layer<TAB>css` -> a global rule: in the sheet of the modules that carry it, in layer _.k unless it names a layer (sheet.ts `addGlobal`) */
@@ -213,9 +212,11 @@ interface Cond {
 }
 /**
  * One declaration: property and value, under the conditions that wrap it (outermost first). `fallbacks` are the other
- * values of a `firstThatWorks(...)`, best first: the rule prints them before `value`, which is the one wanted.
+ * values of a `firstThatWorks(...)`, best first: the rule prints them before `value`, which is the one wanted. `join`
+ * makes it a list: when two declarations of this property meet in one `cn()` under the same conditions, their values
+ * join with this separator instead of the later one replacing the earlier.
  */
-type Decl = [prop: string, value: string, conds?: Cond[], fallbacks?: string[]];
+type Decl$1 = [prop: string, value: string, conds?: Cond[], fallbacks?: string[], join?: ","];
 /**
  * What a css.* builder returns: its declarations, and next to them the fixed classes it prints (`markers`, each with
  * the key of the kernel it belongs to), the kernels it needs, and the plugin members whose runtime and conflicts apply
@@ -223,7 +224,7 @@ type Decl = [prop: string, value: string, conds?: Cond[], fallbacks?: string[]];
  * own (`pretty()`, `frame()`): a condition around it would wrap nothing of theirs, so it is an error.
  */
 interface CssNode {
-  __cssints: Decl[];
+  __cssints: Decl$1[];
   markers?: [marker: string, kernel: string][];
   kernels?: Kernel[];
   globals?: GlobalRule[];
@@ -232,4 +233,91 @@ interface CssNode {
   plugs?: Plug[];
   bare?: [marker: string, kernel: string][];
 }
-export { RegistryState as i, At as n, LayersDecl as r, CssNode as t };
+/** A declaration a member emits: property and value (a custom property, `--_r`, is allowed); `append()` makes a list. */
+type Decl = readonly [prop: string, value: string, conds?: readonly Cond[], fallbacks?: readonly string[], join?: ","];
+/** A feature of `@mdn/browser-compat-data`: `css.at-rules.container.style_queries_for_custom_properties`. */
+type BcdKey = `css.${string}`;
+/**
+ * Global rules, registered once by `key` (`name@version`) in layer `_.k`; `atProperty` (the `@property` rules of its
+ * custom properties) goes at the top of the sheet. A target lacking a `requires` feature gets a support warning, never an
+ * error; `{ key, exact: true }` also counts a partial implementation as lacking (relative colour, whose channel scales
+ * differ in Chrome 119-121 and Safari 16.4-17.6). Two members share a kernel by pointing at the same object; the same key with other CSS is a build error, as is
+ * a custom property or a marker that two keys share.
+ */
+interface Kernel {
+  key: string;
+  css: string;
+  atProperty?: string;
+  requires?: (BcdKey | {
+    key: BcdKey;
+    exact: true;
+  })[];
+}
+/**
+ * A global rule a member contributes. It is identified by its content (`layer` and `css`): the same rule from two
+ * styles is one, an edit of it replaces the old one, and it is in the sheet of the modules whose styles carry it, until
+ * they stop. It goes to layer `_.k` with the kernels. Unlike a kernel, two globals **may** declare the same custom
+ * property: a look sets the same `--color-*` in several source layers, which is the point of fill-through. Use it for a
+ * rule that is not a class.
+ */
+interface GlobalRule {
+  css: string;
+  /**
+   * A top-level `@layer` of this name to put the rule in (a rule that must beat the engine's `:root` fallbacks). The
+   * layer must be declared: by `layers` of the same `Made`, or by `layers()` in a module this one imports. Omitted:
+   * layer `_.k`.
+   */
+  layer?: string;
+}
+/**
+ * A theme a member contributes, as `createGlobalTheme(tokens, selector, overrides, { layer, scope })` makes one: the
+ * same checks (the paths and values of `overrides` against the types of `tokens`, a layer that is declared), the
+ * aliases that depend on an override declared again, and `check.contrast` reads it. `tokens` is a token set of
+ * `createTokens()` that the member got from its caller (a closure: the arguments of a member are joined into one string).
+ */
+interface ThemeRule {
+  tokens: object;
+  overrides: object;
+  selector: string;
+  layer?: string;
+  /** A selector: the rule goes inside `@scope (<scope>) { ... }`. */
+  scope?: string;
+}
+/** One element family of a runtime: the nearest `marker` ancestor's computed `read` is copied into `write`. */
+interface ParentVar {
+  marker: string;
+  read: `--${string}`;
+  write: `--${string}`;
+  /** A property that changes when a CSS condition (`:hover`, a media query) changes `read`: its transition re-runs the copy. */
+  watch?: `--${string}`;
+}
+/**
+ * The runtime half of a member. The client module that holds a site with the member imports
+ * `virtual:cssints/runtime/<name>`, which is empty unless a browserslist target lacks a feature in `polyfills` (and, with
+ * `parentVars`, has `@property`, which the script stands on); then it imports `script`, configures `cssints/parent-vars`,
+ * and `css` (the fallback rules) is added to the sheet in layer `_.k`. A `requires` of the member's kernel that is in
+ * `polyfills` warns only for the targets the runtime does not reach.
+ */
+interface Runtime {
+  polyfills: BcdKey[];
+  parentVars?: ParentVar[];
+  css?: string;
+  /** The plugin's browser script, a module specifier the app resolves (`"@cssints/balance/runtime"`): imported, never evaluated at build time. */
+  script?: string;
+}
+/**
+ * A value a site ships as a JavaScript object of its own: `ship({ owner, open })` (`@cssints/reactive`'s `state()`, whose
+ * owner is a style and whose sources are data). Each `Style` becomes its class string, an array or an object keeps its
+ * shape, and anything else is its JSON.
+ */
+interface Ship {
+  readonly "~ship": {
+    readonly [key: string]: unknown;
+  };
+}
+/** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
+interface Conflict {
+  props: (string | RegExp)[];
+  message: string;
+}
+export { Kernel as a, ThemeRule as c, LayersDecl as d, RegistryState as f, GlobalRule as i, CssNode as l, Conflict as n, Runtime as o, Decl as r, Ship as s, BcdKey as t, At as u };

package/dist/clay.mjs

@@ -1,5 +1,5 @@
 import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-ClgusumY.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-B7ttL9B5.mjs";
 import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter, Predicate } from "effect";

package/dist/index.d.mts

@@ -1,6 +1,5 @@
-import { a as Kernel } from "./author-types-X4zGpNpU.mjs";
+import { a as Kernel, l as CssNode, u as At } from "./author-types-CTeNrh2c.mjs";
 import { n as _cv, r as _cx } from "./runtime-Cv7hGrWf.mjs";
-import { n as At, t as CssNode } from "./node-CWwn8PaX.mjs";
 import { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSUnitValue } from "@cssints/css-grammar/values";
 import { Effect } from "effect";
 /** What firstThatWorks() builds: its values as text, the wanted one first. */

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { a as registry, d as MacroError, f as MemberError, o as warn, r as forgetKernels, t as Registry } from "./registry-8sYvlzyn.mjs";
-import { A as camel, C as hashClass, D as settled, E as minWidth, F as probed, M as failIn, N as isNode, O as toDecls, P as node, S as edge, T as merged, _ as PSEUDOS, a as createTokens, b as checkVars, c as tokensOf, d as style, f as token, g as PROPS, h as LAYER, i as createGlobalTheme, j as fail, k as VAR, l as CSSTokenValue, m as FUNCTIONS, n as addTheme, o as isDone, p as CONTEXTS, r as check$1, t as DONE, u as isStyle, v as carried, w as isFallback, x as dropsOf, y as chainDecl } from "./theme-ClgusumY.mjs";
+import { A as camel, C as hashClass, D as settled, E as minWidth, F as probed, M as failIn, N as isNode, O as toDecls, P as node, S as edge, T as merged, _ as PSEUDOS, a as createTokens, b as checkVars, c as tokensOf, d as style, f as token, g as PROPS, h as LAYER, i as createGlobalTheme, j as fail, k as VAR, l as CSSTokenValue, m as FUNCTIONS, n as addTheme, o as isDone, p as CONTEXTS, r as check$1, t as DONE, u as isStyle, v as carried, w as isFallback, x as dropsOf, y as chainDecl } from "./theme-B7ttL9B5.mjs";
 import { D as relation, S as addRuntime, _ as addKernel, i as byOrder, n as addGlobal, r as addLayers, y as kernelWarnings } from "./sheet-rwl57DmD.mjs";
 import { n as loweredOf } from "./lowered-DOJEDRFM.mjs";
 import { i as SCV_CALL, l as groups$1, n as CX_CALL, t as CV_CALL } from "./instrument-QGVM1E1B.mjs";
@@ -524,7 +524,13 @@ const grouped = (c, def, carry) => def.group ? {
 	...carry,
 	markers: [...carry.markers ?? [], [`_g-${c.name}`, "group"]]
 } : carry;
-const ownDecls = (c, emitted) => emitted.map(([p, v]) => [c.own(p), c.own(v)]);
+const ownDecls = (c, emitted) => emitted.map(([p, v, , fallbacks, join]) => fallbacks || join ? [
+	c.own(p),
+	c.own(v),
+	void 0,
+	fallbacks && [...fallbacks],
+	join
+] : [c.own(p), c.own(v)]);
 const argOf = (c, label, def, v, tokens) => {
 	const { name } = c;
 	if (def === "$tokens") {
@@ -767,13 +773,14 @@ const wrapper = (cond) => Object.assign((...styles) => {
 	const carry = carried(styles);
 	const [bare] = carry.bare ?? [];
 	if (bare) throw fail(`cssints: ${cond.text} wraps ${bare[0]}, the marker of kernel ${bare[1]}, with no declaration of its own: a kernel is global CSS keyed to its marker class and cannot be conditional, so the marker would apply everywhere. Put the member outside the condition; a condition can wrap the declarations a member sets (its methods)`);
-	return node(merged(styles.flatMap((n) => n.__cssints.map(([p, v, inner = [], fallbacks]) => {
+	return node(merged(styles.flatMap((n) => n.__cssints.map(([p, v, inner = [], fallbacks, join]) => {
 		if (inner.length >= 4) throw fail(`cssints: a style takes at most 4 conditions (layers ${LAYER[0]} to ${LAYER[4]}); this one has ${inner.length + 1}: ${[cond, ...inner].map((c) => c.text).join(" > ")}`);
 		return [
 			p,
 			v,
 			[cond, ...inner],
-			fallbacks
+			fallbacks,
+			join
 		];
 	}))), carry);
 }, {

package/dist/plugin-types.d.mts

@@ -2,8 +2,242 @@ import { N as Wrap, X as types_d_exports, dm as Part, fm as Style, lm as CheckIn
 import { CSSStyleValue } from "@cssints/css-grammar/values";
 import { Grammar, TokenType } from "@cssints/css-grammar/token";
 import { ValidSelector } from "@cssints/css-grammar/query";
-/** A declaration a member emits: property and value (a custom property, `--_r`, is allowed). */
-type Decl = readonly [prop: string, value: string];
+import { Warning } from "@cssints/css-grammar/support";
+import "effect";
+interface Rule {
+  layer: string;
+  /** Sort key within the layer: the min-width of its conditions, then the places of its pseudo-classes. */
+  cond: number[];
+  /** The at-rule preludes around `css`, outermost first (`@media (width >= 40rem)`). */
+  wrap: string[];
+  prop: string;
+  /** The style rule: `.cls:hover{color:red}`. */
+  css: string;
+  /** The tokens (`--name`) its value reads. */
+  tokens?: string[];
+}
+/** What a plugin member leaves on a style node besides declarations: its name, and the runtime and conflicts it has. */
+interface Plug {
+  name: string;
+  /** What errors call it (the scope that owns `name`), when that is not `name`. */
+  label?: string;
+  marker: string;
+  conflicts?: Conflict;
+  runtime?: Runtime;
+}
+/** A registered runtime, by plugin name: the files whose styles use it. */
+interface RuntimeEntry {
+  runtime: Runtime;
+  users: Set<string>;
+}
+/** A registered kernel: the custom properties it declares, the markers printed for it, the files that use it. */
+interface KernelEntry {
+  kernel: Kernel;
+  vars: string[];
+  markers: Set<string>;
+  users: Set<string>;
+}
+/** A support warning of a declaration in a kernel written as styles, weighed against the runtimes of a style (kernel.ts `addKernel`). */
+interface KernelWarning {
+  prop: string;
+  /** the value as the sheet prints it: `--_x` is `--<scope>-x` */
+  value: string;
+  warning: Warning;
+}
+/** The call site being evaluated, set by `__at` before its expression runs. */
+interface At {
+  file: string;
+  site: number;
+  offset: number;
+}
+/** A token's `@property` rule, by variable name (`--color-primary`). One entry per name across all modules. */
+interface Property {
+  css: string;
+  /** Literals of its type, put in place of `var(--name)` when a value that uses it is checked (TOKEN_TYPES). */
+  probes: readonly string[];
+  /** Where it was declared: `file#site.n`, `file`, and the evaluation (`gen`) that declared it. */
+  by: string;
+  file: string;
+  gen: number;
+}
+/** What a token is worth, by variable name: its literal (an alias or a derived token: the flattened one), and what it stays live as. */
+interface TokenDef {
+  kind: TokenType;
+  /** Whether the custom property inherits: only a token that does can be written on <html> by the runtime of derived tokens. */
+  inherit: boolean;
+  /** `color.bg` for a token of createTokens, else the variable. */
+  path: string;
+  value: string;
+  /** An alias or a derived token: its value with `var(--target)` for each reference, and the variables it refers to. */
+  template?: string;
+  refs?: string[];
+  /** `value` as LightningCSS lowers it for the targets that lack it: the initial value, and the default of a derived token. */
+  fallback?: string;
+  /** A derived token the runtime computes (derived-data.ts): its flattened literal, which a browser that parses it needs no runtime for. */
+  poly?: string;
+}
+/**
+ * A rule of a token set or a theme, in layer _.k after the globals (sheet.ts). `key` orders them: the kind (0 the
+ * `:root` declarations of aliases, 1 themes under a condition, 2 themes under a selector), then the place in the source.
+ * `names` are the variables it sets or reads: a module that uses one of them has the rule in its sheet too (plugin.ts).
+ * `layer`, when set, sends the rule to a **top-level** declared layer of that name instead of `_.k`: a look must rank
+ * above the engine's `:root` fallbacks, and a nested layer ranks below the rules of its parent.
+ * `theme` is what a contrast check reads: the values the theme sets, by variable name, for the selector `label` (inside
+ * `@scope (scope)`, if it has one); `poly` those of them that the runtime of derived tokens computes, with their flattened literals.
+ */
+interface Themed {
+  file: string;
+  key: string;
+  css: string;
+  names: string[];
+  layer?: string;
+  theme?: {
+    label: string;
+    scope?: string;
+    values: Map<string, string>;
+    poly?: Map<string, string>;
+  };
+}
+/** A global rule of a plugin member (`addGlobal`), by its content, with the files whose styles carry it. */
+interface GlobalEntry {
+  global: GlobalRule;
+  users: Set<string>;
+}
+/** A statement `@layer a, b;` to declare: `before` prints it before the engine's `@layer _.k, …;`, so its layers rank below. */
+interface LayersDecl {
+  names: readonly string[];
+  before?: boolean;
+}
+/** A declared statement `@layer a, b;` (`layers()`), by its names joined with `,`, with the files that declared it. */
+interface LayerEntry {
+  names: string[];
+  before: boolean;
+  users: Set<string>;
+}
+/** A `css.check.contrast` call, checked once the module that made it has run, and again at the end of a build. */
+interface Check {
+  at: At;
+  fg: string;
+  bg: string;
+  min: number;
+  gen: number;
+}
+interface RegistryState {
+  /** file -> site index -> replacement expression */
+  sites: Map<string, Map<number, string>>;
+  /** file -> site index -> the declarations of the style it produced: what a cn() with runtime arguments settles (macro.ts `groupOf`) */
+  nodes: Map<string, Map<number, Decl$1[]>>;
+  /** class -> rule; one entry per class across all modules */
+  rules: Map<string, Rule>;
+  /** `layer<TAB>css` -> a global rule: in the sheet of the modules that carry it, in layer _.k unless it names a layer (sheet.ts `addGlobal`) */
+  globals: Map<string, GlobalEntry>;
+  /** the declared top-level layers (sheet.ts `addLayers`) */
+  layers: Map<string, LayerEntry>;
+  /** key -> the kernels of the styles evaluated so far (sheet.ts `addKernel`): for collisions; the sheet reads the entries of a module */
+  kernels: Map<string, KernelEntry>;
+  /** plugin name -> its runtime and the files that use it (delivery.ts) */
+  runtimes: Map<string, RuntimeEntry>;
+  /** scope name -> the hash of its content (scope.ts `register`): a name is unique per process */
+  scopes: Map<string, string>;
+  /** what scope.ts needs of the eval-time library, set by macro.ts: `css` for a kernel written as styles (with `nest` and `vars`), `kernelOf` to check and print it under its class */
+  lib?: {
+    css: object;
+    kernelOf: (what: string, style: CssNode, cls: string) => {
+      css: string;
+      props: string[];
+      kernels?: Kernel[];
+      warnings: KernelWarning[];
+    };
+  };
+  /** the replacement of a site that holds a node of cssints/tui (tui.ts), set when that module loads */
+  tui?: (value: {
+    readonly __tui: unknown;
+  }) => string | undefined;
+  /** the replacement of a site that holds a node of cssints/clay (clay.ts), set when that module loads */
+  clay?: (value: {
+    readonly __clay: unknown;
+  }) => string | undefined;
+  /** the tokens and themes of cssints/tui (tui.ts): a namespace of their own, never in a sheet (cssints-0s1z) */
+  terminal?: Pick<RegistryState, "properties" | "defs" | "themed">;
+  /** the tokens and themes of cssints/clay (clay.ts): a namespace of their own too, never in a sheet */
+  clayTokens?: Pick<RegistryState, "properties" | "defs" | "themed">;
+  /** what the front of "cssints/plugin" calls (scope-engine.ts `engine`), set by macro.ts */
+  engine?: object;
+  /** the typed properties of scopes: checked by their own grammar when called, not by the engine */
+  userProps: Set<string>;
+  /** file -> the evaluation (`gen`) in which its first site ran: its kernels of older ones are forgotten (`__at`) */
+  seen: Map<string, number>;
+  /** name -> the `@property` rule of every token declared so far (token.ts) */
+  properties: Map<string, Property>;
+  /** name -> what each token is worth (token.ts, theme.ts): the contrast check and the theme rules read it */
+  defs: Map<string, TokenDef>;
+  /** `file#site.n` -> the rules of createTokens and createGlobalTheme calls */
+  themed: Map<string, Themed>;
+  /** `file#site` -> the contrast checks */
+  checks: Map<string, Check>;
+  /** the evaluation in progress; tokens of an older one that its file no longer declares are stale */
+  gen: number;
+  /** tokens created at the site being evaluated: two in one site get different private names */
+  tokens: number;
+  /** warnings not yet handed to Vite, each at the site that made it (`warn`) */
+  warnings: Warned[];
+  /** `file of the site \0 key` of the warnings said in this build; in dev, until that file is edited (`forgetWarnings`) */
+  warned: Set<string>;
+  /** `property value feature targets` -> what LightningCSS lowers it to, or false (lowered.ts) */
+  lowered: Map<string, string | false>;
+  /** the files the evaluation in progress read (`dependsOn`): dependencies of the module being evaluated (plugin.ts `depsOf`) */
+  files: Set<string>;
+  at?: At;
+  /** the site `tokens` is counting for: a call in a loop is one site that registers several tokens */
+  site?: string;
+}
+declare global {
+  var __cssints: RegistryState | undefined;
+}
+/** A warning and the site that made it, when there is one. */
+interface Warned {
+  message: string;
+  at?: At | undefined;
+}
+/**
+ * One condition of a style: an at-rule prelude (`@media (width >= 40rem)`), a pseudo-class (`:hover`), an attribute
+ * (`[aria-current="page"]`) or, with `ancestor`, a selector of a marked ancestor (`:where(._g:hover)`), or, with
+ * `nest` (kernels only), a selector around the class (`& > *`, `:root:has(&)`: `&` is the class); with `own`, its subject
+ * is still the element (`.x &`).
+ * `rank` orders the rules of a layer: the min-width of a media or container query in px, the place of a pseudo-class.
+ */
+interface Cond {
+  text: string;
+  rank: number;
+  ancestor?: true;
+  nest?: true;
+  own?: true;
+}
+/**
+ * One declaration: property and value, under the conditions that wrap it (outermost first). `fallbacks` are the other
+ * values of a `firstThatWorks(...)`, best first: the rule prints them before `value`, which is the one wanted. `join`
+ * makes it a list: when two declarations of this property meet in one `cn()` under the same conditions, their values
+ * join with this separator instead of the later one replacing the earlier.
+ */
+type Decl$1 = [prop: string, value: string, conds?: Cond[], fallbacks?: string[], join?: ","];
+/**
+ * What a css.* builder returns: its declarations, and next to them the fixed classes it prints (`markers`, each with
+ * the key of the kernel it belongs to), the kernels it needs, and the plugin members whose runtime and conflicts apply
+ * (`plugs`). `cn()` merges all three. `bare` are the markers of a merged style that came with no declaration of their
+ * own (`pretty()`, `frame()`): a condition around it would wrap nothing of theirs, so it is an error.
+ */
+interface CssNode {
+  __cssints: Decl$1[];
+  markers?: [marker: string, kernel: string][];
+  kernels?: Kernel[];
+  globals?: GlobalRule[];
+  themes?: ThemeRule[];
+  layers?: LayersDecl[];
+  plugs?: Plug[];
+  bare?: [marker: string, kernel: string][];
+}
+/** A declaration a member emits: property and value (a custom property, `--_r`, is allowed); `append()` makes a list. */
+type Decl = readonly [prop: string, value: string, conds?: readonly Cond[], fallbacks?: readonly string[], join?: ","];
 /** A feature of `@mdn/browser-compat-data`: `css.at-rules.container.style_queries_for_custom_properties`. */
 type BcdKey = `css.${string}`;
 /**
@@ -177,6 +411,17 @@ interface Typed<T> {
 }
 /** `arg<T>()`: one value of the TypeScript type `T`. */
 export declare const arg: <T>() => Typed<T>;
+/**
+ * `append("--_x", "a")`: a declaration that is a list. Two declarations of the property that meet in one `cn()` under the
+ * same conditions join their values with `,` instead of the later replacing the earlier (`@cssints/reactive`'s protocol
+ * properties: two `on()`s on one element are one program list). A list beside a plain value of the property is a build
+ * error, and so is a list with `firstThatWorks()`: a list has no alternatives.
+ *
+ * @param {string} prop the property, a custom property for a plugin's own (`--_x` is `--<scope>-x`)
+ * @param {string} value the value of this declaration alone
+ * @returns {Decl} the declaration, its values joined with `,` when another list of the property follows
+ */
+export declare const append: (prop: string, value: string) => Decl;
 /** One argument: a grammar (aliases of the table allowed), `"$tokens"` (a token set), `"$overrides"` (values for the paths of the `$tokens` before it), `"$selector"` (a CSS selector list) or `arg<T>()`. */
 type Leaf = string | Typed<unknown>;
 /** An object argument of named leaves (`"key?"` is optional). */

package/dist/plugin.d.mts

@@ -1,3 +1,3 @@
-import { S as Style, _ as inGroup, a as Entry, b as ship, c as Made, d as Scope, f as Table, g as fn, h as dependsOn, i as Css, l as Members, m as arg, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as lacking, x as Part, y as scope } from "./scope-Oxd_stwQ.mjs";
-import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime, r as Decl, s as Ship } from "./author-types-X4zGpNpU.mjs";
-export { type ArgsDef, type Chain, type Conflict, type Css, type Decl, type Entry, type GlobalRule, type Impl, type Kernel, type KernelDef, type Made, type Members, type Part, type Pending, type Runtime, type Scope, type Ship, type Style, type Table, type ThemeRule, type Typed, arg, dependsOn, fn, inGroup, lacking, scope, ship };
+import { C as Style, S as Part, _ as fn, a as Entry, b as scope, c as Made, d as Scope, f as Table, g as dependsOn, h as arg, i as Css, l as Members, m as append, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as inGroup, x as ship, y as lacking } from "./scope-9RiDANgb.mjs";
+import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime, r as Decl, s as Ship } from "./author-types-CTeNrh2c.mjs";
+export { type ArgsDef, type Chain, type Conflict, type Css, type Decl, type Entry, type GlobalRule, type Impl, type Kernel, type KernelDef, type Made, type Members, type Part, type Pending, type Runtime, type Scope, type Ship, type Style, type Table, type ThemeRule, type Typed, append, arg, dependsOn, fn, inGroup, lacking, scope, ship };

package/dist/plugin.mjs

@@ -2,6 +2,23 @@
 /** `arg<T>()`: one value of the TypeScript type `T`. */
 const arg = () => ({ "~arg": 1 });
 /**
+* `append("--_x", "a")`: a declaration that is a list. Two declarations of the property that meet in one `cn()` under the
+* same conditions join their values with `,` instead of the later replacing the earlier (`@cssints/reactive`'s protocol
+* properties: two `on()`s on one element are one program list). A list beside a plain value of the property is a build
+* error, and so is a list with `firstThatWorks()`: a list has no alternatives.
+*
+* @param {string} prop the property, a custom property for a plugin's own (`--_x` is `--<scope>-x`)
+* @param {string} value the value of this declaration alone
+* @returns {Decl} the declaration, its values joined with `,` when another list of the property follows
+*/
+const append = (prop, value) => [
+	prop,
+	value,
+	void 0,
+	void 0,
+	","
+];
+/**
 * A value member whose `args` is a tuple or `arg<T>()`: `value` gets the arguments as a call member's `build` does. A
 * table cannot type `value` from the `args` beside it (as `build()` does for call members); this call can.
 */
@@ -46,4 +63,4 @@ const ship = (entries) => {
 	});
 	return entries;
 };
-export { arg, dependsOn, fn, inGroup, lacking, scope, ship };
+export { append, arg, dependsOn, fn, inGroup, lacking, scope, ship };

package/dist/{scope-Oxd_stwQ.d.mts → scope-9RiDANgb.d.mts}

@@ -1,4 +1,4 @@
-import { r as Decl, s as Ship, t as BcdKey } from "./author-types-X4zGpNpU.mjs";
+import { r as Decl, s as Ship, t as BcdKey } from "./author-types-CTeNrh2c.mjs";
 import { t as ClassValue } from "./runtime-Cv7hGrWf.mjs";
 import { createRequire } from "node:module";
 import { CSS, CSS as CSS$1, CSSColorValue, CSSColorValue as CSSColorValue$1, CSSImageValue, CSSImageValue as CSSImageValue$1, CSSStyleValue, CSSStyleValue as CSSStyleValue$1, CSSUnitValue, CSSUnitValue as CSSUnitValue$1 } from "@cssints/css-grammar/values";
@@ -3584,6 +3584,17 @@ interface Typed<T> {
 }
 /** `arg<T>()`: one value of the TypeScript type `T`. */
 declare const arg: <T>() => Typed<T>;
+/**
+ * `append("--_x", "a")`: a declaration that is a list. Two declarations of the property that meet in one `cn()` under the
+ * same conditions join their values with `,` instead of the later replacing the earlier (`@cssints/reactive`'s protocol
+ * properties: two `on()`s on one element are one program list). A list beside a plain value of the property is a build
+ * error, and so is a list with `firstThatWorks()`: a list has no alternatives.
+ *
+ * @param {string} prop the property, a custom property for a plugin's own (`--_x` is `--<scope>-x`)
+ * @param {string} value the value of this declaration alone
+ * @returns {Decl} the declaration, its values joined with `,` when another list of the property follows
+ */
+declare const append: (prop: string, value: string) => Decl;
 /** One argument: a grammar (aliases of the table allowed), `"$tokens"` (a token set), `"$overrides"` (values for the paths of the `$tokens` before it), `"$selector"` (a CSS selector list) or `arg<T>()`. */
 type Leaf = string | Typed<unknown>;
 /** An object argument of named leaves (`"key?"` is optional). */
@@ -3810,4 +3821,4 @@ declare const inGroup: (group: string, property: string, value: string) => boole
 declare const ship: (entries: {
   readonly [key: string]: unknown;
 }) => Ship;
-export { Style as S, inGroup as _, Entry as a, ship as b, Made as c, Scope as d, Table as f, fn as g, dependsOn as h, Css as i, Members as l, arg as m, ArgsDef as n, Impl as o, Typed as p, Chain as r, KernelDef as s, AliasesOf as t, Pending as u, lacking as v, Part as x, scope as y };
+export { Style as C, Part as S, fn as _, Entry as a, scope as b, Made as c, Scope as d, Table as f, dependsOn as g, arg as h, Css as i, Members as l, append as m, ArgsDef as n, Impl as o, Typed as p, Chain as r, KernelDef as s, AliasesOf as t, Pending as u, inGroup as v, ship as x, lacking as y };

package/dist/surface.d.mts

@@ -1,4 +1,4 @@
-import { t as AliasesOf } from "./scope-Oxd_stwQ.mjs";
+import { t as AliasesOf } from "./scope-9RiDANgb.mjs";
 /**
  * `surface().color(t.color.canvas).lighten(0.06).ink()`: a background that follows from the surface around it, however
  * many plain wrappers sit between. `color(<color>)` is an absolute base (default: the parent surface); `lighten(step)`,

package/dist/{theme-ClgusumY.mjs → theme-B7ttL9B5.mjs}

@@ -221,15 +221,30 @@ function merged(decls) {
 	const out = [];
 	const at = (d) => (d[2] ?? []).map((c) => c.text).join(" > ");
 	for (const d of decls) {
+		if (d[4] && d[3]) throw fail(`cssints: ${d[0]} is a list (${JSON.stringify(d[1])}) with firstThatWorks(): a list has no alternatives`);
 		const where = at(d);
+		let decl = d;
 		for (let i = out.length - 1; i >= 0; i--) {
 			const o = out[i];
 			if (at(o) !== where) continue;
 			const r = relation(o[0], d[0]);
-			if (r === "same") out.splice(i, 1);
-			else if (r === "overlap") throw fail(`cssints: ${o[0]} and ${d[0]} overlap without one containing the other${where ? ` (under ${where})` : ""}, so the sheet cannot order them by the arguments: set one of them, or the longhands`);
+			if (r === "same") {
+				if (o[4] || d[4]) {
+					if (o[4] !== d[4]) throw fail(`cssints: ${d[0]} is a list ${JSON.stringify(o[4] ? o[1] : d[1])} and a value ${JSON.stringify(o[4] ? d[1] : o[1])}: they cannot be merged${where ? ` (under ${where})` : ""}`);
+					out.splice(i, 1);
+					decl = [
+						d[0],
+						`${o[1]}${o[4]}${decl[1]}`,
+						d[2],
+						void 0,
+						o[4]
+					];
+					continue;
+				}
+				out.splice(i, 1);
+			} else if (r === "overlap") throw fail(`cssints: ${o[0]} and ${d[0]} overlap without one containing the other${where ? ` (under ${where})` : ""}, so the sheet cannot order them by the arguments: set one of them, or the longhands`);
 		}
-		out.push(d);
+		out.push(decl);
 	}
 	return out;
 }

package/dist/tui.mjs

@@ -1,5 +1,5 @@
 import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-ClgusumY.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-B7ttL9B5.mjs";
 import { g as evaluate, h as css } from "./sheet-rwl57DmD.mjs";
 import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";

package/dist/vite.d.mts

@@ -1,6 +1,5 @@
-import { i as GlobalRule } from "./author-types-X4zGpNpU.mjs";
 import { n as ImportError, r as MacroError } from "./errors-jNEiB3ye.mjs";
-import { i as RegistryState, n as At, r as LayersDecl } from "./node-CWwn8PaX.mjs";
+import { d as LayersDecl, f as RegistryState, i as GlobalRule, u as At } from "./author-types-CTeNrh2c.mjs";
 import { Effect } from "effect";
 import { ImportDeclaration } from "oxc-parser";
 import MagicString from "magic-string";

package/docs/API.md

@@ -85,7 +85,7 @@ The static arguments of `cn` are one class string; `prop && p(4)` depends on a r
 
 - **The class names** are a hash of the declaration (and its conditions), so the same declaration gives the same class in every file.
 - **One sheet.** All rules are in `virtual:cssints.css`, each once, sorted by layer, then condition, then shorthand before longhand (`border` before `border-top`, counted from Chrome's own expansion of each shorthand), then class name. So a longhand wins over a shorthand that contains it, whatever the order of the arguments: `cn(pl(2), p(4))` keeps `padding-left: 0.5rem`.
-- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins. A style in a runtime argument is compared with the static arguments at build time, and replaces the classes it overrides while it is active (see "Runtime: `cn`, `cv`").
+- **`cn()` keeps the later of the same property.** `cn(p(4), p(2))` is `p(2)`: the earlier declaration is dropped at build time (also for an alias: `wordWrap` is `overflowWrap`). Under different conditions both stay, because they are in different layers: `cn(md(p(6)), p(2))`. Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: `cn(borderTop("1px solid red"), borderColor("blue"))` both set `border-top-color`; so do a physical and a logical side (`marginLeft` and `marginInline`, `width` and `inlineSize`), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: `cn(border(...), borderInline(...))` is fine, and `borderInline` wins. A style in a runtime argument is compared with the static arguments at build time, and replaces the classes it overrides while it is active (see "Runtime: `cn`, `cv`"). A declaration can be a list (`append()` in `cssints/plugin`): two of them of one property under the same conditions join their values instead of the later replacing the earlier, one beside a plain value of the property is a build error, and a list has no `firstThatWorks()` fallbacks (2026-10-31, cssints-674d).
 - **A layout context** gives one string: `flex().alignItems("center")` is `"_1s47490 _1ob5z5m"`.
 - **Also exported:** `css` (the namespace as a value) and `chain`, `cn`, `cv`, `firstThatWorks`, `media`, `container`, `supports`, `attr`, `within`, `group`, `global`, `token`, `style`, `createTokens`, `createGlobalTheme`, `check`. Nothing is exported for the browser: the runtime is the plugin's.
 
@@ -886,6 +886,7 @@ export const hidden = ring().core; // error: no such method
 - **Call members** (`{ args, uses? }` and a function in `build()`) take their arguments by `args`: a grammar (the parts, joined by a space, as a property takes them: `args: "small | large"`), `arg<T>()` (one value of a TypeScript type, which TypeScript checks and `build` gets as it is: `arg<"home" | "star">()`), or a **tuple of positional arguments**, each a grammar (one part), `"$tokens"` (a token set from `createTokens`), `"$overrides"` (values by path for the tokens of the `$tokens` before it, checked in the types against that token set), `"$selector"` (a CSS selector list, checked in the types for brackets and quotes and at build time as a whole), `arg<T>()`, or at the end one object of named leaves (`{ "size?": "<width>", on: "<color>" }`, a key ending in `?` is optional). `build` gets them as written, grammar parts as checked text. The positional form type-checks within the per-call budget; its cost is that an error lands on the call, with the position and the reason in the message, not on the argument. `build` returns `{ decls?, uses?, globals?, themes?, layers? }`.
 - **`globals`** are global rules that are not classes (`{ rule, layer? }` in the table, or `{ css, layer? }[]` from `build`). A global is identified by its content, not by a name: the same rule from two styles is one, and editing a value replaces it. It is in the sheet of the modules whose styles carry it (as kernels are), and leaves it with them. `layer` sends a rule to a top-level layer of that name (`@layer app`); it must be declared by a `layers` entry (or `layers` from `build`: a list, or `{ layers: [...], before: true }` for layers below the engine's), or by `layers()` in a module imported before. No layer puts it in `_.k`. Unlike a kernel, two globals **may** declare the same custom property; that is what lets a look set the same `--color-*` in several source layers.
 - **`themes`** — `themes: { tokens, overrides, selector, layer?, scope? }[]` from `build` is `createGlobalTheme(tokens, selector, overrides, { layer, scope })` made by a member, through the same path: the paths and values of `overrides` are checked against the types of `tokens` at build time, the aliases that depend on an override are declared again, and `check.contrast` reads the theme with the others. With `args: ["$tokens", "$overrides", ...]` the member takes the token set from its caller and the overrides are checked in the types as well.
+- **`append(prop, value)`** (decided 2026-10-31, cssints-674d) makes a declaration a list: two declarations of that property in one `cn()` under the same conditions join their values with `,` instead of the later replacing the earlier, and a third still appends. It is how a plugin puts several programs on one element: `@cssints/reactive`'s two `on()` calls are `--reactive-on: click toggle open,keydown set tab two`. A list beside a plain value of the property is a build error (appending would be wrong, replacing would drop a program: `cssints: --x is a list "a" and a value "b": they cannot be merged`), and a list has no `firstThatWorks()` alternatives. The separator belongs to the declaration and nothing else reads it: the sheet prints the joined value, the class hash, clay, tui and the devtools see it as one declaration. A `cv()` variant is an alternative, not a list: a list declared in a variant replaces the base's as any declaration does.
 
 ```ts
 import { scope } from "cssints/plugin";
@@ -1222,27 +1223,27 @@ export const typo = mdi("clos"); // error: not an icon of mdi
 
 More plugins on `scope()`, each a package of its own with its rules and limits in its README. Import them with the attribute, like `cssints`.
 
-| Package                                                     | Members                                                                                                  | What it does                                                                                                                                                                                             |
-| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@cssints/fluid`](../packages/fluid/README.md)             | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)`                                         | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error                                                                                        |
-| [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                               | Every Layout primitives as chain members                                                                                                                                                                 |
-| [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                               | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                                               |
-| [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                              | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group                                |
-| [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`, `/madoromi`                                   | DTCG data for `createTokens`                                                                                                                                                                             |
-| [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                                   | Eased colour stops mixed in oklab at build time                                                                                                                                                          |
-| [`@cssints/gradient-2d`](../packages/gradient-2d/README.md) | `meshGradient(mesh)`, `freeformGradient(points)`                                                         | `mesh-gradient()` / `freeform-gradient()` where the browser has them, else a runtime's canvas (this package's algorithms; lines and shapes not yet)                                                      |
-| [`@cssints/color-names`](../packages/color-names/README.md) | `named(name)`, `colorNames.<sector>(name)`, `/nearest`                                                   | The Color Name List (31,939 names) as hex colours; the ten sector members keep an editor's completion short, `nearest()` is the build-time reverse lookup                                                |
-| [`@cssints/motion`](../packages/motion/README.md)           | `motion().preset().duration().delay().easing()`                                                          | Animation presets over `keyframes()`, with reduced motion                                                                                                                                                |
-| [`@cssints/squircle`](../packages/squircle/README.md)       | `squircle().radius()`                                                                                    | `corner-shape: squircle`, else a CSS `mask` of the same shape                                                                                                                                            |
-| [`@cssints/reveal`](../packages/reveal/README.md)           | `reveal().preset().range().duration().easing()`, `appear().preset().range().duration().easing().inOut()` | motion's entrance presets on `animation-timeline: view()` (reveal) or on `timeline-trigger` + `animation-trigger` (appear); for other targets a script plays it once on entry (delivered by the runtime) |
-| [`@cssints/stuck`](../packages/stuck/README.md)             | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)`                                             | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime)                                                 |
-| [`@cssints/balance`](../packages/balance/README.md)         | `balance()`, `pretty()`                                                                                  | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime)                                                                                      |
-| [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                              | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                                                     |
-| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                           | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                                                             |
-| [`@cssints/ramp`](../packages/ramp/README.md)               | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)`                                   | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background                                                                                              |
-| [`@cssints/rybitten`](../packages/rybitten/README.md)       | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)`           | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses                                                           |
-| [`@cssints/skeleton`](../packages/skeleton/README.md)       | `skeleton().radius().color().highlight()`                                                                | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion                                                                                       |
-| [`@cssints/reactive`](../packages/reactive/README.md)       | `state()`, `toggle()`, `set()`, `on()`, `bind()`, `when()`, `inside()`                                   | State as custom properties, events as data on the element: writes only in events, conditions and DOM output in plain CSS, wired by a 0.9 kB runtime shipped to every target (2026-10-31, cssints-zrt2)   |
+| Package                                                     | Members                                                                                                     | What it does                                                                                                                                                                                                                                                                                                                                                               |
+| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@cssints/fluid`](../packages/fluid/README.md)             | `fluid(min, max, { from?, to?, zoom? })`, `fluid.container(...)`                                            | A `clamp()` that grows between two widths, computed at build time; a range that fails WCAG 1.4.4 is a build error                                                                                                                                                                                                                                                          |
+| [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                                  | Every Layout primitives as chain members                                                                                                                                                                                                                                                                                                                                   |
+| [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                                  | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                                                                                                                                                                                                                 |
+| [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                                 | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group                                                                                                                                                                                                  |
+| [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`, `/madoromi`                                      | DTCG data for `createTokens`                                                                                                                                                                                                                                                                                                                                               |
+| [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                                      | Eased colour stops mixed in oklab at build time                                                                                                                                                                                                                                                                                                                            |
+| [`@cssints/gradient-2d`](../packages/gradient-2d/README.md) | `meshGradient(mesh)`, `freeformGradient(points)`                                                            | `mesh-gradient()` / `freeform-gradient()` where the browser has them, else a runtime's canvas (this package's algorithms; lines and shapes not yet)                                                                                                                                                                                                                        |
+| [`@cssints/color-names`](../packages/color-names/README.md) | `named(name)`, `colorNames.<sector>(name)`, `/nearest`                                                      | The Color Name List (31,939 names) as hex colours; the ten sector members keep an editor's completion short, `nearest()` is the build-time reverse lookup                                                                                                                                                                                                                  |
+| [`@cssints/motion`](../packages/motion/README.md)           | `motion().preset().duration().delay().easing()`                                                             | Animation presets over `keyframes()`, with reduced motion                                                                                                                                                                                                                                                                                                                  |
+| [`@cssints/squircle`](../packages/squircle/README.md)       | `squircle().radius()`                                                                                       | `corner-shape: squircle`, else a CSS `mask` of the same shape                                                                                                                                                                                                                                                                                                              |
+| [`@cssints/reveal`](../packages/reveal/README.md)           | `reveal().preset().range().duration().easing()`, `appear().preset().range().duration().easing().inOut()`    | motion's entrance presets on `animation-timeline: view()` (reveal) or on `timeline-trigger` + `animation-trigger` (appear); for other targets a script plays it once on entry (delivered by the runtime)                                                                                                                                                                   |
+| [`@cssints/stuck`](../packages/stuck/README.md)             | `sticky().top()`, `stuck(styles)`, `stuck("bottom")(styles)`                                                | Styles inside a sticky element while it is stuck, by `@container scroll-state()`; for other targets an `IntersectionObserver` (delivered by the runtime)                                                                                                                                                                                                                   |
+| [`@cssints/balance`](../packages/balance/README.md)         | `balance()`, `pretty()`                                                                                     | `text-wrap: balance` / `pretty`; for targets without balance a script balances the lines (delivered by the runtime)                                                                                                                                                                                                                                                        |
+| [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                                 | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                                                                                                                                                                                                                       |
+| [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                              | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                                                                                                                                                                                                                               |
+| [`@cssints/ramp`](../packages/ramp/README.md)               | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)`                                      | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background                                                                                                                                                                                                                                                                |
+| [`@cssints/rybitten`](../packages/rybitten/README.md)       | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)`              | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses                                                                                                                                                                                                                             |
+| [`@cssints/skeleton`](../packages/skeleton/README.md)       | `skeleton().radius().color().highlight()`                                                                   | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion                                                                                                                                                                                                                                                         |
+| [`@cssints/reactive`](../packages/reactive/README.md)       | `state()`, `toggle()`, `set()`, `value()`, `checked()`, `persist()`, `on()`, `bind()`, `when()`, `inside()` | State as custom properties, events as data on the element: writes only in events, conditions and DOM output in plain CSS, wired by a 1.2 kB runtime shipped to every target; `value()`/`checked()` take the field's value, calls of `on()`, `bind()` or `state()` in one `cn()` append, and `persist(value, key)` keeps a state across a reload (2026-10-31, cssints-674d) |
 
 ### Headless: `createField` and `createConfirm` (`@cssints/headless`)
 
@@ -1768,7 +1769,7 @@ createSlider(options?: {
   focus(): void;
   blur(): void;
   keyDown(key: string): boolean; // true when the key was consumed (preventDefault it)
-  pointerDown(position: number): void; // a rail press at a 0..1 fraction of the track
+  pointerDown(position: number): void; // a rail press or a drag move at a 0..1 fraction of the rail
   thumbProps: {
     id;
     role: "slider";
@@ -1782,8 +1783,9 @@ createSlider(options?: {
     onFocus;
     onBlur;
     onKeyDown;
+    onPointerDown;
   };
-  trackProps: { onPointerDown };
+  trackProps: { onPointerDown; onPointerMove; onPointerUp; onPointerCancel; onLostPointerCapture };
 };
 ```
 
@@ -1839,13 +1841,17 @@ createSpinbutton(options?: {
 
 `disabled` is **a widget-level extension of the APG patterns**, and the specs say so: `slider.qnt` lists it under its deliberate omissions, and `spinbutton.qnt` models the steppers' at-bound state only (`DisabledOnlyAtBound`). Neither machine has a `disabled` var, so the DOM tests, not the model, hold the primitive to these rules:
 
-- a disabled slider **keeps the thumb as its tab stop** (`tabindex="0"`, the same choice `createButton` makes with `aria-disabled`) and announces `aria-disabled="true"` on the thumb; every key and every rail press is dropped before it becomes a request, so `onValueChange` never fires and `keyDown` returns `false` (nothing to preventDefault);
+- a disabled slider **keeps the thumb as its tab stop** (`tabindex="0"`, the same choice `createButton` makes with `aria-disabled`) and announces `aria-disabled="true"` on the thumb; every key, rail press and drag is dropped before it becomes a request, so `onValueChange` never fires and `keyDown` returns `false` (nothing to preventDefault);
 - 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.
 
+**Dragging** is the rail press repeated: `pointerdown` on the rail jumps the value to where it landed and starts a drag, and a press on the thumb starts the drag where the value already is (no jump, the thumb is there). While the pointer is held, every `pointermove` asks for the value of the pointer's position on the rail, rounded to `step` and clamped to `min`/`max`, in all four combinations of `orientation` and `direction`: up is more on a vertical rail, and a horizontal rail under `rtl` counts from its right edge, the same reflection the arrow keys use. `pointerup`, `pointercancel` or a lost capture ends the drag. The rail owns the gesture whichever element took the press, so the moves sit on `trackProps` and pointer capture keeps the drag alive off the rail: no document listener, and nothing to clean up on disposal. The thumb must be rendered inside the rail, because that is how its press reaches it. A drag is still a request: it fires `onValueChange` once per distinct value, and a controlled host that ignores the request keeps its value. `trackProps` carries no CSS, so a host that wants a drag instead of a text selection or a page scroll sets `touch-action: none` and `user-select: none` on the rail.
+
+`specs/apg/slider.qnt` fixes a discrete rail press only, so the drag is a second deliberate extension and `slider.browser.test.tsx` is its oracle. The invariant the machine does not carry is **DragFollowsPointer**: while the pointer is held, `aria-valuenow` is the value of the pointer's current position (not an accumulation of moves, so returning the pointer to the press position returns the value), and no move after the release changes anything. The step grid and the clamp the drag shares with the press are the model's; the geometry is the DOM's, and the bridge hands the model a 0..1 fraction.
+
 ### 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.
+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 and per-thumb dragging are not modelled, and the primitive's nearest-thumb rail press, its drag and `disabled` are deliberate extensions of the pattern, with that DOM test as their oracle. Options are plain and read lazily; `value` + `onValueChange` make the widget controlled.
 
 ```ts skip
 createSliderMultiThumb(options?: {
@@ -1856,14 +1862,15 @@ createSliderMultiThumb(options?: {
   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
+  direction?: "ltr" | "rtl"; // "ltr": under rtl the horizontal arrows and the rail flip
+  disabled?: boolean; // aria-disabled on both thumbs; no key, press or drag changes anything
   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
+  pointerDown(index: 0 | 1, position: number): void; // a press or a drag move at a 0..1 fraction of the value axis
   focusThumb(index: 0 | 1): void;
   blur(): void;
   keyDown(key: string): boolean; // true when the key was consumed (preventDefault it)
@@ -1875,15 +1882,28 @@ createSliderMultiThumb(options?: {
     "aria-valuemax"; // the lower thumb: the upper value; the upper thumb: the range's maximum
     "aria-valuetext";
     "aria-orientation";
+    "aria-disabled"; // "true" while disabled, else undefined
     tabindex: 0;
     onFocus;
     onBlur;
     onKeyDown;
+    onPointerDown;
+  };
+  trackProps: {
+    onPointerDown;
+    onPointerMove;
+    onPointerUp;
+    onPointerCancel;
+    onLostPointerCapture;
   };
 };
 ```
 
-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.
+Both thumbs are tab stops in a fixed order (lower, then upper), whatever the values are.
+
+`trackProps` is a rail press and a drag, like the single slider's: `pointerdown` beside the thumbs names the thumb nearest the pointer (a tie goes to the lower, the pair's floor and first tab stop) and moves it to the pointer's position; a press that starts on a thumb drags that thumb from the value it already has, without a jump. While the pointer is held, every `pointermove` asks for that thumb's value at the pointer's position on the rail, rounded to `step` and clamped to the neighbour, in all four combinations of `orientation` and `direction` (up is more on a vertical rail, and a horizontal rail under `rtl` counts from its right edge, as the arrows do). `pointerup`, `pointercancel` or a lost capture ends the drag. The rail owns the gesture whichever element took the press, so the moves sit on `trackProps`; the thumb must be rendered inside the rail, and pointer capture keeps the drag alive off it. A drag is still a request: it fires `onValueChange` once per distinct pair, a controlled host that ignores it keeps its pair, and a thumb clamps at its neighbour so the two can never cross. `focused()` names the thumb the press took and reads synchronously, so a host can move the DOM focus with it. `trackProps` carries no CSS, so a host that wants a drag instead of a page scroll or a text selection sets `touch-action: none` and `user-select: none` on the rail.
+
+`disabled` follows the single slider: both thumbs keep their tab stops and announce `aria-disabled="true"`, and every key, rail press and drag is dropped before it becomes a request. The spec has no `disabled` var, so `slider-multithumb.browser.test.tsx` is its oracle, as it is for the press's nearest thumb (`NearestThumbTakesPress`) and the drag (`DragFollowsPointer`).
 
 ### Headless: `createKnob` (`@cssints/headless`)
 
@@ -2014,6 +2034,40 @@ createTimeline(options: {
 - **Selection.** A click selects and moves the tab stop; ArrowUp / ArrowDown / Home / End move a roving tab stop; Enter or Space selects the focused row. The host moves real DOM focus after an arrow key, as the demo fixture does; `selected` + `onSelect` make it controlled, `select(id)` is the programmatic request.
 - **`status` is `data-status`** on the row, a styling hook for the host's colour. The primitive never invents the label: the host's data holds it.
 
+### Headless: `createDiagramFocus` (`@cssints/headless`)
+
+The readable twin of a canvas: the same nodes and edges, positioned by the host (absolute `div`s, an SVG layer for the edges), as one roving tab stop plus a keyboard cursor over the outgoing edges, with a polite live region saying where the user is. **The APG has no pattern for a diagram** — a graph is not one of the 44 — so there is no Quint spec and no ported scenarios: `packages/headless/test/diagram.browser.test.tsx` is its oracle. It borrows the grid's roving tabindex (exactly one node in the tab order, so Tab leaves the composite), WAI-ARIA's `aria-roledescription="node"` on each `role="button"`, and `createStatus`'s `role="status"` / `aria-live="polite"` region.
+
+```ts skip
+createDiagramFocus(options: {
+  nodes: ReadonlyArray<{ id: string; label: string; x: number; y: number; width?: number; height?: number }> | (() => ...); // x/y: the node's top-left in diagram space; width/height only size its centre (0)
+  edges: ReadonlyArray<{ id: string; from: string; to: string; label?: string }> | (() => ...); // in option order; an edge with a missing endpoint is ignored
+  onActivate?(nodeId: string): void; // Enter or Space on the active node
+  onEdgeActivate?(edgeId: string): void; // Enter on the edge cursor, or a click on an edge
+  labels?: { diagram?: string; edges?: string } | undefined; // the diagram's name in the announcement; the edge noun ("transitions", default "edges")
+  id?: string | undefined; // base for the nodes' element ids (<id>-node-<node id>), which is how a move focuses the node; generated when absent
+}): {
+  active(): string | undefined; // the node holding the tab stop; undefined when the diagram is empty
+  focus(id: string): string | undefined; // programmatic move; a node that is not in `nodes` is a no-op; returns where it landed
+  nodeProps(id: string): { id: string; role: "button"; "aria-roledescription": "node"; "aria-label": string; tabindex: 0 | -1; onFocus; onClick; onKeyDown };
+  edgeProps(id: string): { role: "button"; "aria-label": string; tabindex: -1; onClick }; // "From → To"
+  edgesOf(id: string): ReadonlyArray<{ id: string; from: string; to: string; label?: string }>; // outgoing, in option order
+  edgeCursor(): number; // an index into edgesOf(active()), or -1 while off
+  setEdgeCursor(index: number): void; // the programmatic version; a negative index clears
+  status(): string; // "Payment. 2 edges: to Pending, to Failed" / "Edge Payment → Pending. Enter to activate"; empty when the diagram is empty
+  statusProps: { role: "status"; "aria-live": "polite" }; // render once, always
+};
+```
+
+- **The layout is the navigation.** An arrow moves to the nearest node whose centre is in that direction's half-plane (right is `dx > 0`, up is `dy < 0`), by smallest squared distance, ties by id; when nothing lies that way it wraps to the opposite end of that axis (right to the leftmost node, down to the topmost, ties by id), so every arrow does something. Home / End are the first and last node in option order. The arrows compare **centres**, which is why `width`/`height` exist at all.
+- **A diagram is never drag-only.** The pointer path is the host's drawing; the keyboard path is the arrows plus Enter / Space (`onActivate`) and `e`, so a graph that was drawn with a mouse is still readable and operable from the keyboard.
+- **`e` opens the outgoing edges.** The cursor starts on the first edge of `edgesOf(active)` and the region says "Edge Payment → Pending. Enter to activate". Arrows move the cursor and wrap, Enter (or Space) fires `onEdgeActivate`, Escape — or any other navigation key — leaves the cursor. Edges are `role="button"` with `tabindex="-1"`: the keyboard path to an edge is the cursor, not a Tab stop, so 40 transitions do not add 40 stops.
+- **The live region is the announcement.** `status()` is derived from the active node and the cursor, so it changes with every move (that is what makes a screen reader read it). Render `statusProps` once and always; a region that mounts with its text announces nothing.
+- **Exactly one node is in the tab order.** `nodeProps` sets `tabindex="0"` on the active node and `-1` on the rest, and `onFocus` moves the tab stop to whatever node took focus, so a host that focuses the node it selects keeps the two in step. Tab then leaves the diagram (there is no `Tab` handling and no sentinels).
+- **Focus follows the tab stop by itself.** `nodeProps` also carries an element `id` (`<base>-node-<node id>`, the base from `options.id` or generated), so an arrow, Home / End or `focus(id)` focuses the node it landed on: the host spreads the props and needs no effect, and the tab stop and `document.activeElement` cannot disagree. A host that renders a node outside the document (a portal on another document) moves focus itself.
+- **The lists are getters.** Pass `() => nodes()` and the arrays are read at attribute-read time: an async model arrives without rebuilding the primitive, and the tab stop keeps its node while that node exists (else it falls back to the first). A node id that is not in `nodes` is a no-op in `nodeProps` and `focus`; an edge whose endpoint is missing is ignored everywhere.
+- **The host owns the DOM.** Nothing is measured, nothing is positioned and nothing is focused by the primitive; the host renders the nodes where its layout put them, the edges on its SVG layer, and the `role="status"` paragraph.
+
 ### Publishing a library (decided 2026-10-02, cssints-0l3f)
 
 A package written on cssints ships JavaScript that still has the attribute, and its `.d.ts`. The app that installs it evaluates the package with its own engine: one sheet, the app's browserslist and themes, and a token, a kernel or an `@property` of the package is made once however many modules use it. Nothing is declared: the engine recognises a file by `with { type: "cssints" }`, the same marker as in app code.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssints",
-  "version": "0.22.0",
+  "version": "0.24.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.22.0",
+    "@cssints/css-grammar": "^0.24.0",
     "culori": "^4.0.2",
     "effect": "4.0.6",
     "happy-dom": "^20.14.5",

package/dist/author-types-X4zGpNpU.d.mts

@@ -1,88 +0,0 @@
-/** A declaration a member emits: property and value (a custom property, `--_r`, is allowed). */
-type Decl = readonly [prop: string, value: string];
-/** A feature of `@mdn/browser-compat-data`: `css.at-rules.container.style_queries_for_custom_properties`. */
-type BcdKey = `css.${string}`;
-/**
- * Global rules, registered once by `key` (`name@version`) in layer `_.k`; `atProperty` (the `@property` rules of its
- * custom properties) goes at the top of the sheet. A target lacking a `requires` feature gets a support warning, never an
- * error; `{ key, exact: true }` also counts a partial implementation as lacking (relative colour, whose channel scales
- * differ in Chrome 119-121 and Safari 16.4-17.6). Two members share a kernel by pointing at the same object; the same key with other CSS is a build error, as is
- * a custom property or a marker that two keys share.
- */
-interface Kernel {
-  key: string;
-  css: string;
-  atProperty?: string;
-  requires?: (BcdKey | {
-    key: BcdKey;
-    exact: true;
-  })[];
-}
-/**
- * A global rule a member contributes. It is identified by its content (`layer` and `css`): the same rule from two
- * styles is one, an edit of it replaces the old one, and it is in the sheet of the modules whose styles carry it, until
- * they stop. It goes to layer `_.k` with the kernels. Unlike a kernel, two globals **may** declare the same custom
- * property: a look sets the same `--color-*` in several source layers, which is the point of fill-through. Use it for a
- * rule that is not a class.
- */
-interface GlobalRule {
-  css: string;
-  /**
-   * A top-level `@layer` of this name to put the rule in (a rule that must beat the engine's `:root` fallbacks). The
-   * layer must be declared: by `layers` of the same `Made`, or by `layers()` in a module this one imports. Omitted:
-   * layer `_.k`.
-   */
-  layer?: string;
-}
-/**
- * A theme a member contributes, as `createGlobalTheme(tokens, selector, overrides, { layer, scope })` makes one: the
- * same checks (the paths and values of `overrides` against the types of `tokens`, a layer that is declared), the
- * aliases that depend on an override declared again, and `check.contrast` reads it. `tokens` is a token set of
- * `createTokens()` that the member got from its caller (a closure: the arguments of a member are joined into one string).
- */
-interface ThemeRule {
-  tokens: object;
-  overrides: object;
-  selector: string;
-  layer?: string;
-  /** A selector: the rule goes inside `@scope (<scope>) { ... }`. */
-  scope?: string;
-}
-/** One element family of a runtime: the nearest `marker` ancestor's computed `read` is copied into `write`. */
-interface ParentVar {
-  marker: string;
-  read: `--${string}`;
-  write: `--${string}`;
-  /** A property that changes when a CSS condition (`:hover`, a media query) changes `read`: its transition re-runs the copy. */
-  watch?: `--${string}`;
-}
-/**
- * The runtime half of a member. The client module that holds a site with the member imports
- * `virtual:cssints/runtime/<name>`, which is empty unless a browserslist target lacks a feature in `polyfills` (and, with
- * `parentVars`, has `@property`, which the script stands on); then it imports `script`, configures `cssints/parent-vars`,
- * and `css` (the fallback rules) is added to the sheet in layer `_.k`. A `requires` of the member's kernel that is in
- * `polyfills` warns only for the targets the runtime does not reach.
- */
-interface Runtime {
-  polyfills: BcdKey[];
-  parentVars?: ParentVar[];
-  css?: string;
-  /** The plugin's browser script, a module specifier the app resolves (`"@cssints/balance/runtime"`): imported, never evaluated at build time. */
-  script?: string;
-}
-/**
- * A value a site ships as a JavaScript object of its own: `ship({ owner, open })` (`@cssints/reactive`'s `state()`, whose
- * owner is a style and whose sources are data). Each `Style` becomes its class string, an array or an object keeps its
- * shape, and anything else is its JSON.
- */
-interface Ship {
-  readonly "~ship": {
-    readonly [key: string]: unknown;
-  };
-}
-/** A build error when one `cn()` holds the member's marker and a property listed here (a name, or a pattern). */
-interface Conflict {
-  props: (string | RegExp)[];
-  message: string;
-}
-export { Kernel as a, ThemeRule as c, GlobalRule as i, Conflict as n, Runtime as o, Decl as r, Ship as s, BcdKey as t };