@cueplusplus/ui 0.13.0

package/dist/theming/serialize.d.ts

@@ -0,0 +1,167 @@
+import { Density } from "@cueplusplus/tokens";
+import { RESOLVED_MONO, THEME_NAME_PATTERN as THEME_NAME_PATTERN$1 } from "@cueplusplus/theme-base";
+//#region src/theming/serialize.d.ts
+/**
+ * Turning a resolved token map back into the stylesheet the tokens build would
+ * have written.
+ *
+ * This module exists so there is exactly **one** spelling of the output format.
+ * The spec's whole third-party theming story is "tier 2 always compiles down to
+ * tier 1" — a generated theme has to be indistinguishable from a hand-authored
+ * `[data-theme]` block, or a consumer ends up with two vocabularies and the
+ * generator becomes a toy. So the shapes below mirror `build.mjs` deliberately,
+ * comments included: same selector form, same declaration order, same section
+ * breaks. The generator-versus-build parity that `test/theming/presets.test.ts`
+ * used to diff is unguarded for this plan — the shipped preset copy that test
+ * compared against was deleted with it — and Plan 4 restores the comparison
+ * once `@cueplusplus/tokens` stops emitting presets of its own.
+ *
+ * It is also the only place that touches raw strings, which makes it the place
+ * to stop injection. A theme name lands inside an attribute selector and a font
+ * stack lands inside a declaration; both are checked here rather than trusted.
+ */
+/** The one custom-property prefix this design system emits. */
+declare const CUE_TOKEN_PREFIX = "--cue-";
+/**
+ * Check a theme name and hand it back.
+ *
+ * @param name - The proposed theme name.
+ * @returns The same name, once it is known to be safe to interpolate.
+ * @throws TypeError if the name is not a CSS identifier.
+ * @example
+ * assertThemeName("acme-dark"); // → "acme-dark"
+ */
+declare function assertThemeName(name: string): string;
+/**
+ * Check a free-text declaration value and hand it back.
+ *
+ * @param name - The token the value belongs to, for the error message.
+ * @param value - The proposed value.
+ * @returns The same value, once it is known to stay inside its declaration.
+ * @throws TypeError if the value could end the declaration or the block.
+ * @example
+ * assertCssValue("font-mono", '"Berkeley Mono", monospace');
+ */
+declare function assertCssValue(name: string, value: string): string;
+/**
+ * The custom property a token is emitted as.
+ *
+ * Idempotent, so code that already holds `--cue-bg` can pass it straight back
+ * through instead of stripping the prefix first.
+ *
+ * @param name - A bare token name, or an already-prefixed property.
+ * @returns The `--cue-*` custom property name.
+ * @example
+ * tokenProperty("surface-1"); // → "--cue-surface-1"
+ */
+declare function tokenProperty(name: string): string;
+interface ThemeSelectorOptions {
+  /** Cross with the mode axis. Only `"light"` needs a selector; dark is the base block. */
+  mode?: "dark" | "light";
+  /** Cross with the density axis. Used only for the radius multiplier. */
+  density?: Density;
+  /**
+   * Emit the descendant form beside the compound one, as `"A, B"`.
+   *
+   * Only meaningful together with `density`, and it exists because the two axes
+   * do **not** always land on the same element. The compound
+   * `[data-theme="x"][data-density="y"]` matches only a node carrying both
+   * attributes — the provider root, and nothing else. A `<Density>` island
+   * stamps `data-density` on a `<div>` *inside* that root, and
+   * `useControlHeight`'s measuring probe hangs off `document.body`, outside it
+   * entirely; both therefore carry a density with no theme beside it, and both
+   * were silently missing the crossed value. The descendant form
+   * `[data-theme="x"] [data-density="y"]` covers exactly those, and the pair is
+   * emitted rather than the descendant alone because the descendant does not
+   * match the root itself.
+   */
+  pair?: boolean;
+}
+/**
+ * The selector a theme's declarations live under.
+ *
+ * Attribute selectors, not classes, because the two axes have to compose: a
+ * `[data-theme]` on the root and another on a portal, a `[data-mode]` crossed
+ * over either, all at the same specificity so later blocks win predictably.
+ *
+ * @param name - The theme name. Not re-checked — {@link assertThemeName} owns that.
+ * @param options - Which axes to cross with.
+ * @returns The CSS selector.
+ * @example
+ * themeSelector("acme", { mode: "light" }); // → '[data-theme="acme"][data-mode="light"]'
+ * themeSelector("acme", { density: "compact", pair: true });
+ * // → '[data-theme="acme"] [data-density="compact"]:where([data-cue-theme="acme"]), [data-theme="acme"] [data-density="compact"]:where(:not([data-cue-theme]):not([data-theme]:not([data-theme="acme"])):not([data-theme="acme"] [data-theme]:not([data-theme="acme"]) *)), [data-theme="acme"][data-density="compact"]'
+ */
+declare function themeSelector(name: string, options?: ThemeSelectorOptions): string;
+/**
+ * The derived colours every theme block carries, as `[token, value]` pairs.
+ *
+ * They are `color-mix()` expressions over `var(--cue-*)` rather than resolved
+ * literals, and they are emitted **inside** the theme block rather than once on
+ * `:root`, for the same reason the build does it: a custom property's `var()`
+ * references are substituted at the element that declares it, so a `:root`-level
+ * mix would freeze the default theme's accent into every nested theme.
+ *
+ * This is deliberately a second copy of the `DERIVED` table in
+ * `packages/tokens/build.mjs`. It has to be one: that table runs at publish time
+ * over DTCG files under Style Dictionary, this one runs in a browser over a
+ * palette somebody just typed, and neither package can import the other's. What
+ * keeps a copy from drifting is not discipline but
+ * `test/theming/serialize.test.ts`, which compares this list against the
+ * compiled stylesheet in both directions — a derivation added to one side alone
+ * fails there rather than in a consumer's app six weeks later.
+ */
+declare const DERIVED_TOKEN_TEMPLATES: ReadonlyArray<readonly [string, string]>;
+/**
+ * {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
+ *
+ * @returns The sixteen derived declarations, keyed by custom property.
+ * @example
+ * derivedTokens()["--cue-accent-soft"];
+ */
+declare function derivedTokens(): Record<string, string>;
+/** One run of declarations, optionally introduced by a comment. */
+interface ThemeBlockSection {
+  /** Comment printed above the run. Omit on the first section. */
+  comment?: string;
+  /** `[property, value]` pairs, in emission order. */
+  declarations: ReadonlyArray<readonly [string, string]>;
+}
+/** One CSS rule of a generated theme. */
+interface ThemeBlock {
+  /** The selector the rule declares under. */
+  selector: string;
+  /** Emitted as `color-scheme`, ahead of the custom properties. Omit to skip it. */
+  colorScheme?: "dark" | "light" | "light dark";
+  /** The declarations, grouped into commented sections. */
+  sections: readonly ThemeBlockSection[];
+}
+/**
+ * One rule, printed.
+ *
+ * Empty sections vanish rather than leaving a comment with nothing under it —
+ * which is what makes "emit the fonts section only if there are fonts" a
+ * data decision instead of a branch at every call site.
+ *
+ * @param block - Selector, colour scheme and sections.
+ * @returns The rule, without a trailing newline.
+ * @example
+ * serializeThemeBlock({ selector: ":root", sections: [{ declarations: [["--cue-bg", "#000"]] }] });
+ */
+declare function serializeThemeBlock(block: ThemeBlock): string;
+interface SerializeThemeCssOptions {
+  /** Text of the leading `/*! … *\/` banner. Omit for a bare stylesheet. */
+  banner?: string;
+}
+/**
+ * A whole generated stylesheet: banner, then one rule per block.
+ *
+ * @param blocks - The rules, in cascade order — later blocks win ties.
+ * @param options - Banner text.
+ * @returns The stylesheet, newline-terminated.
+ * @example
+ * serializeThemeCss(blocks, { banner: "@cueplusplus/ui — createTheme()" });
+ */
+declare function serializeThemeCss(blocks: readonly ThemeBlock[], options?: SerializeThemeCssOptions): string;
+//#endregion
+export { CUE_TOKEN_PREFIX, DERIVED_TOKEN_TEMPLATES, RESOLVED_MONO, SerializeThemeCssOptions, THEME_NAME_PATTERN$1 as THEME_NAME_PATTERN, ThemeBlock, ThemeBlockSection, ThemeSelectorOptions, assertCssValue, assertThemeName, derivedTokens, serializeThemeBlock, serializeThemeCss, themeSelector, tokenProperty };

package/dist/theming/serialize.js

@@ -0,0 +1,241 @@
+import { RESOLVED_MONO, THEME_NAME_PATTERN as THEME_NAME_PATTERN$1 } from "@cueplusplus/theme-base";
+//#region src/theming/serialize.ts
+/**
+* Turning a resolved token map back into the stylesheet the tokens build would
+* have written.
+*
+* This module exists so there is exactly **one** spelling of the output format.
+* The spec's whole third-party theming story is "tier 2 always compiles down to
+* tier 1" — a generated theme has to be indistinguishable from a hand-authored
+* `[data-theme]` block, or a consumer ends up with two vocabularies and the
+* generator becomes a toy. So the shapes below mirror `build.mjs` deliberately,
+* comments included: same selector form, same declaration order, same section
+* breaks. The generator-versus-build parity that `test/theming/presets.test.ts`
+* used to diff is unguarded for this plan — the shipped preset copy that test
+* compared against was deleted with it — and Plan 4 restores the comparison
+* once `@cueplusplus/tokens` stops emitting presets of its own.
+*
+* It is also the only place that touches raw strings, which makes it the place
+* to stop injection. A theme name lands inside an attribute selector and a font
+* stack lands inside a declaration; both are checked here rather than trusted.
+*/
+/** The one custom-property prefix this design system emits. */
+const CUE_TOKEN_PREFIX = "--cue-";
+/**
+* Characters a value may never contain: the ones that end a declaration, end a
+* block, or open a comment.
+*
+* Colour anchors do not need this — they are parsed by culori and re-emitted, so
+* a value that is not a colour never reaches the output. Font stacks are the
+* exception: they are free text by nature, and pass through verbatim.
+*/
+const UNSAFE_VALUE = /[;{}]|\/\*/;
+/**
+* Check a theme name and hand it back.
+*
+* @param name - The proposed theme name.
+* @returns The same name, once it is known to be safe to interpolate.
+* @throws TypeError if the name is not a CSS identifier.
+* @example
+* assertThemeName("acme-dark"); // → "acme-dark"
+*/
+function assertThemeName(name) {
+	if (!THEME_NAME_PATTERN$1.test(name)) throw new TypeError(`theme name must be a CSS identifier (letters, digits and dashes, starting with a letter), got ${JSON.stringify(name)}`);
+	return name;
+}
+/**
+* Check a free-text declaration value and hand it back.
+*
+* @param name - The token the value belongs to, for the error message.
+* @param value - The proposed value.
+* @returns The same value, once it is known to stay inside its declaration.
+* @throws TypeError if the value could end the declaration or the block.
+* @example
+* assertCssValue("font-mono", '"Berkeley Mono", monospace');
+*/
+function assertCssValue(name, value) {
+	if (UNSAFE_VALUE.test(value)) throw new TypeError(`${name} may not contain ";", "{", "}" or "/*" — got ${JSON.stringify(value)}`);
+	return value;
+}
+/**
+* The custom property a token is emitted as.
+*
+* Idempotent, so code that already holds `--cue-bg` can pass it straight back
+* through instead of stripping the prefix first.
+*
+* @param name - A bare token name, or an already-prefixed property.
+* @returns The `--cue-*` custom property name.
+* @example
+* tokenProperty("surface-1"); // → "--cue-surface-1"
+*/
+function tokenProperty(name) {
+	return name.startsWith("--cue-") ? name : `${CUE_TOKEN_PREFIX}${name}`;
+}
+/**
+* The selector a theme's declarations live under.
+*
+* Attribute selectors, not classes, because the two axes have to compose: a
+* `[data-theme]` on the root and another on a portal, a `[data-mode]` crossed
+* over either, all at the same specificity so later blocks win predictably.
+*
+* @param name - The theme name. Not re-checked — {@link assertThemeName} owns that.
+* @param options - Which axes to cross with.
+* @returns The CSS selector.
+* @example
+* themeSelector("acme", { mode: "light" }); // → '[data-theme="acme"][data-mode="light"]'
+* themeSelector("acme", { density: "compact", pair: true });
+* // → '[data-theme="acme"] [data-density="compact"]:where([data-cue-theme="acme"]), [data-theme="acme"] [data-density="compact"]:where(:not([data-cue-theme]):not([data-theme]:not([data-theme="acme"])):not([data-theme="acme"] [data-theme]:not([data-theme="acme"]) *)), [data-theme="acme"][data-density="compact"]'
+*/
+function themeSelector(name, options = {}) {
+	const { mode, density, pair } = options;
+	const themeAttr = `[data-theme="${name}"]`;
+	const theme = `${themeAttr}${mode === "light" ? "[data-mode=\"light\"]" : ""}`;
+	if (density === void 0) return theme;
+	const crossed = `[data-density="${density}"]`;
+	if (pair !== true) return `${theme}${crossed}`;
+	return `${`${theme} ${crossed}:where([data-cue-theme="${name}"])`}, ${`${theme} ${crossed}:where(:not([data-cue-theme]):not([data-theme]:not(${themeAttr})):not(${themeAttr} [data-theme]:not(${themeAttr}) *))`}, ${theme}${crossed}`;
+}
+/** The tone vocabulary that gets a soft fill and a soft border in every theme. */
+const STATUSES = [
+	"ok",
+	"busy",
+	"warn",
+	"danger",
+	"info"
+];
+/**
+* The live hue — a token still arriving, a tool still running, a cursor that
+* has not stopped.
+*
+* Not a member of {@link STATUSES}, because a status is something a `Chip` or a
+* `StatusDot` can be *told to be* and "streaming" is not a tone a caller picks:
+* it is a property of a surface while the model is talking. What it shares with
+* the statuses is the shape of its family — a full-strength ink, a soft fill and
+* a rim — so it derives alongside them. `packages/tokens/build.mjs` carries the
+* same pair of constants for the same reason; see the note on
+* {@link DERIVED_TOKEN_TEMPLATES}.
+*/
+const STREAM = "stream";
+/** Every tone that earns a derived soft fill and a derived rim. */
+const TINTED = [...STATUSES, STREAM];
+/**
+* The three shares of the foreground the list idioms are ruled with.
+*
+* `--cue-border` is an authored anchor, and what a preset authors is a *box
+* edge* — the line around a card, an input, a panel. Repeated down thirty rows a
+* box edge reads as a stack of boxes rather than as a list, so a rule between
+* things is drawn lighter than the edge around a thing.
+*
+* Mixed from `--cue-fg` rather than authored, which is what makes them hold for
+* a preset `createTheme()` produced from a palette nobody vetted: the rules keep
+* their relationship to the type they separate whatever the palette turned out
+* to be, in both modes, with nothing to get wrong.
+*
+* `row-hover` is the same measurement from the other side — the faintest wash
+* that still reads as one row picked out of a list. It does not replace the
+* surface ramp: a row sitting *on* a surface still lifts to the next rung
+* (`hover:bg-surface-2`), which is what this library's own rows do. This is for
+* rows drawn directly on `--cue-bg`, where the next rung is a visible step.
+*/
+const HAIRLINE_TEMPLATES = [
+	["hair", "color-mix(in oklch, var(--cue-fg) 6%, transparent)"],
+	["hair-strong", "color-mix(in oklch, var(--cue-fg) 12%, transparent)"],
+	["row-hover", "color-mix(in oklch, var(--cue-fg) 3.5%, transparent)"]
+];
+/**
+* The derived colours every theme block carries, as `[token, value]` pairs.
+*
+* They are `color-mix()` expressions over `var(--cue-*)` rather than resolved
+* literals, and they are emitted **inside** the theme block rather than once on
+* `:root`, for the same reason the build does it: a custom property's `var()`
+* references are substituted at the element that declares it, so a `:root`-level
+* mix would freeze the default theme's accent into every nested theme.
+*
+* This is deliberately a second copy of the `DERIVED` table in
+* `packages/tokens/build.mjs`. It has to be one: that table runs at publish time
+* over DTCG files under Style Dictionary, this one runs in a browser over a
+* palette somebody just typed, and neither package can import the other's. What
+* keeps a copy from drifting is not discipline but
+* `test/theming/serialize.test.ts`, which compares this list against the
+* compiled stylesheet in both directions — a derivation added to one side alone
+* fails there rather than in a consumer's app six weeks later.
+*/
+const DERIVED_TOKEN_TEMPLATES = [
+	["accent-soft", "color-mix(in oklch, var(--cue-accent) 14%, transparent)"],
+	...TINTED.flatMap((tone) => [[`${tone}-soft`, `color-mix(in oklch, var(--cue-${tone}) 12%, transparent)`], [`${tone}-border`, `color-mix(in oklch, var(--cue-${tone}) 35%, transparent)`]]),
+	...HAIRLINE_TEMPLATES
+];
+/**
+* {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
+*
+* @returns The sixteen derived declarations, keyed by custom property.
+* @example
+* derivedTokens()["--cue-accent-soft"];
+*/
+function derivedTokens() {
+	return Object.fromEntries(DERIVED_TOKEN_TEMPLATES.map(([name, value]) => [tokenProperty(name), value]));
+}
+/**
+* One rule, printed.
+*
+* Empty sections vanish rather than leaving a comment with nothing under it —
+* which is what makes "emit the fonts section only if there are fonts" a
+* data decision instead of a branch at every call site.
+*
+* @param block - Selector, colour scheme and sections.
+* @returns The rule, without a trailing newline.
+* @example
+* serializeThemeBlock({ selector: ":root", sections: [{ declarations: [["--cue-bg", "#000"]] }] });
+*/
+function serializeThemeBlock(block) {
+	const lines = [];
+	if (block.colorScheme !== void 0) lines.push(`  color-scheme: ${block.colorScheme};`);
+	for (const section of block.sections) {
+		if (section.declarations.length === 0) continue;
+		if (section.comment !== void 0) {
+			if (lines.length > 0) lines.push("");
+			lines.push(`  /* ${section.comment} */`);
+		}
+		for (const [name, value] of section.declarations) lines.push(`  ${name}: ${value};`);
+	}
+	return `${block.selector} {\n${lines.join("\n")}\n}`;
+}
+/** Indent a complete rule once so it can live inside an at-rule. */
+function indentRule(rule) {
+	return rule.split("\n").map((line) => `  ${line}`).join("\n");
+}
+/**
+* Alias resolved dark/light palettes onto the preserved logical `system` mode.
+*
+* Both `createTheme()` and the configurator call this function. Keeping the
+* selector and media-query spelling here prevents exported overrides from
+* drifting away from generated custom themes.
+*
+* @internal Used by package-owned theme serializers; not part of the public
+* `@cueplusplus/ui/theming` barrel.
+*/
+function serializeSystemModeAliases(theme, aliases) {
+	const name = assertThemeName(theme);
+	return aliases.map(({ mode, colorScheme, sections }) => {
+		return `@media (prefers-color-scheme: ${mode}) {\n${indentRule(serializeThemeBlock({
+			selector: `[data-theme="${name}"][data-mode="system"]`,
+			colorScheme,
+			sections
+		}))}\n}`;
+	}).join("\n\n");
+}
+/**
+* A whole generated stylesheet: banner, then one rule per block.
+*
+* @param blocks - The rules, in cascade order — later blocks win ties.
+* @param options - Banner text.
+* @returns The stylesheet, newline-terminated.
+* @example
+* serializeThemeCss(blocks, { banner: "@cueplusplus/ui — createTheme()" });
+*/
+function serializeThemeCss(blocks, options = {}) {
+	const rules = blocks.map(serializeThemeBlock);
+	return `${[...options.banner === void 0 ? [] : [`/*! ${options.banner}\n * Generated by createTheme(). Do not edit by hand.\n */`], ...rules].join("\n\n")}\n`;
+}
+//#endregion
+export { CUE_TOKEN_PREFIX, DERIVED_TOKEN_TEMPLATES, RESOLVED_MONO, THEME_NAME_PATTERN$1 as THEME_NAME_PATTERN, assertCssValue, assertThemeName, derivedTokens, serializeSystemModeAliases, serializeThemeBlock, serializeThemeCss, themeSelector, tokenProperty };

package/manifest/components/accordion.json

@@ -0,0 +1,173 @@
+{
+  "name": "Accordion",
+  "slug": "accordion",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A stack of sections, one (or several) open at a time.\n\nWraps Base UI's `Accordion`, so the disclosure ARIA, keyboard handling and\nopen-state bookkeeping are the primitive's. This layer adds the console skin:\nhairline separation, mono summary rows on the control ladder, and a height\ntransition that respects `prefers-reduced-motion`.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Item",
+    "Header",
+    "Trigger",
+    "Panel"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Accordion.Root",
+      "description": "Groups the sections and owns which of them are open.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the accordion frame.",
+          "control": {
+            "kind": "string"
+          }
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseAccordion.Root.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Item",
+      "usage": "Accordion.Item",
+      "description": "One section.\n\nSeparation is a hairline the section draws above itself, dropped on the first\none — so a stack shows rules *between* sections and none against the rim of\nwhatever contains them. Same rule as `Row`, for the same reason.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the section.",
+          "control": {
+            "kind": "string"
+          }
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseAccordion.Item.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Header",
+      "usage": "Accordion.Header",
+      "description": "The heading that labels a section's panel. An `<h3>` with no type of its own.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the heading.",
+          "control": {
+            "kind": "string"
+          }
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseAccordion.Header.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Trigger",
+      "usage": "Accordion.Trigger",
+      "description": "The summary row that opens a section.\n\nA mono row on the control ladder, padded to the same gutters as a `Row`, with\na caret that rotates off the trigger's own `data-panel-open` — nothing in\nReact has to know the section is open for the arrow to turn.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the summary row.",
+          "control": {
+            "kind": "string"
+          }
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseAccordion.Trigger.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Panel",
+      "usage": "Accordion.Panel",
+      "description": "A section's body.\n\nHeight is animated from `--accordion-panel-height`, which Base UI measures.\nThe animating element carries no padding — padding is part of the box height,\nso it would be counted into the `0 → measured` transition and make the panel\njump at both ends — hence the inner body element.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the animating box. Padding belongs on `bodyClassName`.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the padded body inside it.",
+          "control": {
+            "kind": "string"
+          }
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseAccordion.Panel.Props, \"className\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-control-md",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-leading-ui",
+    "--cue-pad-row-x",
+    "--cue-space-1",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-text-ui"
+  ],
+  "summary": "A stack of sections, one (or several) open at a time.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Accordion.Root>\n  <Accordion.Item value=\"routing\">\n    <Accordion.Header><Accordion.Trigger>routing</Accordion.Trigger></Accordion.Header>\n    <Accordion.Panel>…</Accordion.Panel>\n  </Accordion.Item>\n</Accordion.Root>\n<Accordion.Root multiple defaultValue={[\"routing\"]}>…</Accordion.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/accordion",
+  "mdUrl": "/docs/components/accordion.md",
+  "jsonUrl": "/r/components/accordion.json",
+  "specimens": [
+    {
+      "title": "Accordion",
+      "group": "layout",
+      "components": [
+        "Accordion"
+      ],
+      "code": "<Accordion.Root className=\"w-full max-w-[36rem]\" defaultValue={[\"patch\"]}>\n  <Accordion.Item value=\"patch\">\n    <Accordion.Header>\n      <Accordion.Trigger>Patch</Accordion.Trigger>\n    </Accordion.Header>\n    <Accordion.Panel>48 fixtures across 4 universes.</Accordion.Panel>\n  </Accordion.Item>\n  <Accordion.Item value=\"cues\">\n    <Accordion.Header>\n      <Accordion.Trigger>Cues</Accordion.Trigger>\n    </Accordion.Header>\n    <Accordion.Panel>12 cues, last edited 4 minutes ago.</Accordion.Panel>\n  </Accordion.Item>\n  <Accordion.Item value=\"network\" disabled>\n    <Accordion.Header>\n      <Accordion.Trigger>Network</Accordion.Trigger>\n    </Accordion.Header>\n    <Accordion.Panel>Art-Net on 10.0.0.42.</Accordion.Panel>\n  </Accordion.Item>\n</Accordion.Root>",
+      "note": "Hairline-separated items with mono summary rows. Several can be open at once.",
+      "interaction": "the whole header row is the trigger; the panel animates its height and stills under prefers-reduced-motion."
+    }
+  ],
+  "todo": true
+}