@cueplusplus/ui 0.15.0 → 0.17.0

package/manifest/components/autocomplete.json

@@ -216,24 +216,72 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
+    "--cue-paint-rest-shade",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-from",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-control-step-size",
+    "--cue-style-display-variation",
+    "--cue-style-field-focus-offset",
+    "--cue-style-focus-edge",
+    "--cue-style-focus-width",
+    "--cue-style-heading-ink",
+    "--cue-style-input-face",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-option-ink",
+    "--cue-style-option-selected-ink",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
     "--cue-sunken",
     "--cue-surface-2",
     "--cue-text-body",
     "--cue-text-emphasis",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "A text field that suggests as you type — and accepts what you typed anyway.",
   "examples": [

package/manifest/components/band.json

@@ -5,14 +5,14 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": false,
-  "description": "A full-bleed horizontal section: the page's rhythm, its separation, and a\ncolumn at the measure.\n\nThis is `Footer`'s recipe with the footer taken out of it — a `w-full`\nelement, a rule running edge to edge, and a centred `Container` inside so the\nline reaches the window while the words stop at the measure. `Footer` is\nbuilt on this rather than beside it; the recipe exists once.\n\nEvery dimension it spends belongs to the style axis, so the same markup\ncomposes differently under `[data-style]` without a prop changing: the\nvertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled\nunder `editorial`, trebled under `marketing`), the column is\n`--cue-measure-prose` unless `width` names a fixed rung, and the rule and the\nground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own\ndocumentation before choosing one, because two of the four can come out to\nnothing and they do not vanish symmetrically: `--cue-band-ground` is\n`transparent` on `:root` and on two of the three sets, so a `\"ground\"` paints\nnothing in three of the four states a page can be in, while `--cue-band-rule`\nis `0px` under `marketing` alone. Both are deliberate and nothing warns.\n\n**Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved\nat the element that declares it.** A `<Density>` island nested inside a\nstyled page moves every `--cue-space-*` and the band rhythm does **not**\nfollow it — the island inherits the rhythm already resolved above. Restate\nthe set on the island (`<Density density=\"compact\" styleSet=\"editorial\">`) to\nre-resolve it against that island's rung. Likewise a nested `[data-theme]`\nunder a marketing band paints the **outer** theme's `--cue-surface-1` through\nan already-resolved `--cue-band-ground`.\n\nIt renders a `<section>`, which is not a landmark until it has an accessible\nname — so a band with a heading should carry `aria-labelledby` pointing at\nit, and a band without one costs the document nothing.\n\nStatic markup — no `\"use client\"`.",
+  "description": "A full-bleed horizontal section: the page's rhythm, its separation, and a\ncolumn at the measure.\n\nThis is `Footer`'s recipe with the footer taken out of it — a `w-full`\nelement, a rule running edge to edge, and a centred `Container` inside so the\nline reaches the window while the words stop at the measure. `Footer` is\nbuilt on this rather than beside it; the recipe exists once.\n\nEvery dimension it spends belongs to the style axis, so the same markup\ncomposes differently under `[data-style]` without a prop changing: the\nvertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled\nunder `editorial`, trebled under `marketing` and `graphite`), the column is\n`--cue-measure-prose` unless `width` names a fixed rung, and the rule and the\nground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own\ndocumentation before choosing one, because two of the four can come out to\nnothing and they do not vanish symmetrically: `--cue-band-ground` is\n`transparent` on `:root` and on every set but `marketing` and `kiln`, so a\n`\"ground\"` paints nothing on most pages, while `--cue-band-rule` is `0px`\nunder those two alone. Both are deliberate and nothing warns.\n\n**Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved\nat the element that declares it.** A `<Density>` island nested inside a\nstyled page moves every `--cue-space-*` and the band rhythm does **not**\nfollow it — the island inherits the rhythm already resolved above. Restate\nthe set on the island (`<Density density=\"compact\" styleSet=\"editorial\">`) to\nre-resolve it against that island's rung. Likewise a hand-stamped\n`[data-theme]` element under a marketing page paints the **outer** theme's\n`--cue-surface-1` through an already-resolved `--cue-band-ground`, and its\nrule in the outer theme's border. The library's own theme islands do not: a\nnested `ThemeProvider` that names a theme or a mode, and a `Preview` stage\nwith a theme, a mode or a pairing, restate the set in force beside it, so a\nband inside one paints that island's ground and rule.\n\nIt renders a `<section>`, which is not a landmark until it has an accessible\nname — so a band with a heading should carry `aria-labelledby` pointing at\nit, and a band without one costs the document nothing.\n\nStatic markup — no `\"use client\"`.",
   "props": [
     {
       "name": "separation",
       "type": "\"none\" | \"rule\" | \"ground\" | \"bleed\"",
       "required": false,
       "defaultValue": "rule",
-      "description": "How this band separates itself from the one above it. Defaults to `\"rule\"`.\n\n- **`\"rule\"`** — a line at the top edge, `--cue-band-rule` wide, in\n  `border-border`. What `Footer` has always drawn.\n- **`\"ground\"`** — a ground, `--cue-band-ground`, edge to edge. The one\n  value that touches colour, and it resolves through the single carve-out\n  the token layer allows a style set.\n- **`\"bleed\"`** — neither, and **no column**: the children run the band's\n  full width with no measure and no gutters. The separation is the change\n  of scale, which is what a full-width image or strip does. `width` has\n  nothing to apply to and is ignored.\n- **`\"none\"`** — neither, column kept. Sections separate by rhythm alone,\n  which is `--cue-band-y` and is what `editorial` leads with.\n\n**What a style set makes each of these do, because two of them can come out\nto nothing and there is no way for this component to warn you.** The values\nare the token layer's; `packages/ui/test/chrome/band.test.tsx` holds this\ntable to `packages/tokens/dist/axes.css`, so it cannot quietly stop being\ntrue.\n\n| set | `\"rule\"` draws | `\"ground\"` paints |\n|---|---|---|\n| *(no set)* and `console` | 1px | nothing — the ground is `transparent` |\n| `editorial` | a 0.5px hairline, **which Chromium paints at 1px at every DPR**; only retina WebKit draws it thinner | nothing — `transparent` |\n| `marketing` | **nothing — the rule is `0px`** | `--cue-surface-1` |\n\nRead the diagonal: `\"ground\"` is the marketing separation and `\"rule\"` is\neveryone else's. A band that wants to separate under *every* set separates\nby rhythm, which every set has.",
+      "description": "How this band separates itself from the one above it. Defaults to `\"rule\"`.\n\n- **`\"rule\"`** — a line at the top edge, `--cue-band-rule` wide, in\n  `border-border`. What `Footer` has always drawn.\n- **`\"ground\"`** — a ground, `--cue-band-ground`, edge to edge. The one\n  value that touches colour, and it resolves through the single carve-out\n  the token layer allows a style set.\n- **`\"bleed\"`** — neither, and **no column**: the children run the band's\n  full width with no measure and no gutters. The separation is the change\n  of scale, which is what a full-width image or strip does. `width` has\n  nothing to apply to and is ignored.\n- **`\"none\"`** — neither, column kept. Sections separate by rhythm alone,\n  which is `--cue-band-y` and is what `editorial` leads with.\n\n**What a style set makes each of these do, because two of them can come out\nto nothing and there is no way for this component to warn you.** The values\nare the token layer's; `packages/ui/test/chrome/band.test.tsx` holds this\ntable to `packages/tokens/dist/axes.css`, so it cannot quietly stop being\ntrue.\n\n| set | `\"rule\"` draws | `\"ground\"` paints |\n|---|---|---|\n| *(no set)*, `console`, `tender`, `zine` and `porcelain` | 1px | nothing — the ground is `transparent` |\n| `editorial` | a 0.5px hairline, **which Chromium paints at 1px at every DPR**; only retina WebKit draws it thinner | nothing — `transparent` |\n| `marketing` | **nothing — the rule is `0px`** | `--cue-surface-1` |\n| `kiln` | **nothing — the rule is `0px`**; `Footer` keeps its own, through `--cue-style-footer-rule` | `--cue-sunken`, the recessed ground |\n| `graphite` | 1px, in `--cue-border` | nothing — `transparent` |\n\nRead the diagonal: `\"ground\"` is the marketing and kiln separation and\n`\"rule\"` is everyone else's. A band that wants to separate under *every* set\nseparates by rhythm, which every set has.",
       "control": {
         "kind": "enum",
         "members": [
@@ -74,7 +74,18 @@
     "--cue-band-rule",
     "--cue-band-rule-color",
     "--cue-band-y",
-    "--cue-measure-prose"
+    "--cue-band-y-bottom",
+    "--cue-band-y-top",
+    "--cue-measure-broad",
+    "--cue-measure-prose",
+    "--cue-paint-fade",
+    "--cue-paint-ground-pattern",
+    "--cue-paint-ground-pattern-size",
+    "--cue-paint-texture",
+    "--cue-paint-texture-blend",
+    "--cue-paint-texture-opacity",
+    "--cue-paint-texture-size",
+    "--cue-style-band-width"
   ],
   "summary": "A full-bleed horizontal section: a rule to the window's edge, a column at the measure.",
   "examples": [

package/manifest/components/bento.json

@@ -240,10 +240,11 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-border",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-radius-surface",
     "--cue-space-1",
@@ -251,6 +252,16 @@
     "--cue-space-3",
     "--cue-space-5",
     "--cue-space-8",
+    "--cue-style-data-face",
+    "--cue-style-display-variation",
+    "--cue-style-focus-width",
+    "--cue-style-heading-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-leading",
+    "--cue-style-title-size",
+    "--cue-style-title-tracking",
+    "--cue-style-title-variation",
+    "--cue-style-title-weight",
     "--cue-surface-1",
     "--cue-surface-2",
     "--cue-text-emphasis",

package/manifest/components/breadcrumb.json

@@ -52,10 +52,17 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-radius-control",
     "--cue-space-2",
-    "--cue-text-label"
+    "--cue-style-body-size",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
+    "--cue-style-help-ink",
+    "--cue-text-label",
+    "--cue-text-ui"
   ],
   "summary": "Where you are, and how to get back.",
   "examples": [

package/manifest/components/button.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "The system's primary action control.\n\nA real `<button>` by default, restyled entirely from tokens: height comes\nfrom the density control ladder, colour from the theme's accent/surface ramp.\nThe focus ring is an `outline`, never a `box-shadow`, so it survives inside\n`overflow: hidden` panels.",
+  "description": "The system's primary action control.\n\nA real `<button>` by default, restyled entirely from tokens: height comes\nfrom the density control ladder, colour from the theme's accent/surface ramp.\nThe focus ring is an `outline`, never a `box-shadow`, so it survives inside\n`overflow: hidden` panels.\n\n`className` is merged with `tailwind-merge`, so a caller's `px-2`,\n`font-semibold` or `shadow-none` replaces the class the recipe set for the\nsame property. Only here: `buttonVariants()` concatenates, and says what that\ncosts.",
   "props": [
     {
       "name": "render",
@@ -100,8 +100,9 @@
   },
   "tokensUsed": [
     "--cue-accent",
-    "--cue-accent-fg",
-    "--cue-accent-hover",
+    "--cue-accent-fill",
+    "--cue-accent-fill-fg",
+    "--cue-accent-fill-hover",
     "--cue-border",
     "--cue-border-strong",
     "--cue-control-lg",
@@ -111,15 +112,42 @@
     "--cue-danger-fg",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
+    "--cue-paint-danger-glow-ink",
+    "--cue-paint-glow-blur",
+    "--cue-paint-glow-blur-far",
+    "--cue-paint-glow-ink",
+    "--cue-paint-glow-ink-hover",
+    "--cue-paint-rest-shade",
+    "--cue-paint-shadow-scale",
     "--cue-radius-control",
     "--cue-space-4",
     "--cue-space-5",
     "--cue-space-6",
+    "--cue-style-control-case",
+    "--cue-style-control-face",
+    "--cue-style-control-pad",
+    "--cue-style-control-step-size",
+    "--cue-style-control-tracking",
+    "--cue-style-control-trim",
+    "--cue-style-control-weight",
+    "--cue-style-focus-offset",
+    "--cue-style-focus-width",
+    "--cue-style-outline-edge",
+    "--cue-style-quiet-ink",
+    "--cue-style-secondary-edge",
+    "--cue-style-secondary-ground",
+    "--cue-style-secondary-hover-edge",
+    "--cue-style-secondary-hover-ink",
+    "--cue-style-secondary-ink",
     "--cue-surface-2",
+    "--cue-text-body",
     "--cue-text-emphasis",
+    "--cue-text-label",
     "--cue-text-ui"
   ],
   "summary": "The action control: six variants across three density-sized heights.",

package/manifest/components/calendar.json

@@ -26,17 +26,24 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-radius-control",
     "--cue-space-2",
     "--cue-space-5",
+    "--cue-style-focus-width",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-tracking",
     "--cue-sunken",
     "--cue-surface-3",
     "--cue-text-label",
     "--cue-text-micro",
     "--cue-text-ui",
     "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
     "--cue-tracking-caps-tight"
   ],
   "summary": "A month grid, on react-day-picker.",

package/manifest/components/card.json

@@ -40,7 +40,7 @@
     {
       "name": "Header",
       "usage": "Card.Header",
-      "description": "The card's title block: heading column left, actions right.\n\nCarries no bottom padding of its own, so the body's own `p-(--cue-space-5)`\nis the whole gap between the two. Under `seam` it takes its full padding\nback, because the hairline — not the whitespace — is then the separator.",
+      "description": "The card's title block: heading column left, actions right.\n\nCarries no bottom padding of its own, so the body's own padding is the\nwhole gap between the two. Under `seam` it takes its full padding back,\nbecause the hairline — not the whitespace — is then the separator. Every side\nis `--cue-space-5` times the style set's `--cue-style-card-pad` (1 unless a\nset says otherwise).",
       "props": [
         {
           "name": "actions",
@@ -114,14 +114,41 @@
     "--cue-fg-muted",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rest-shade",
+    "--cue-paint-rim-ink",
+    "--cue-paint-rim-width",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-from",
+    "--cue-paint-stroke-raised-from",
+    "--cue-paint-stroke-raised-to",
+    "--cue-paint-stroke-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-surface",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-card-pad",
+    "--cue-style-description-leading",
+    "--cue-style-description-tracking",
+    "--cue-style-display-variation",
+    "--cue-style-heading-ink",
+    "--cue-style-seam-color",
+    "--cue-style-title-face",
+    "--cue-style-title-leading",
+    "--cue-style-title-size",
+    "--cue-style-title-tracking",
+    "--cue-style-title-variation",
+    "--cue-style-title-weight",
     "--cue-surface-1",
     "--cue-text-emphasis",
+    "--cue-text-label",
     "--cue-text-ui"
   ],
   "summary": "A padded container for one thing: a summary, a setting group, a preview.",

package/manifest/components/carousel.json

@@ -211,8 +211,11 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-border-strong",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-space-2",
-    "--cue-space-4"
+    "--cue-space-4",
+    "--cue-style-focus-width"
   ],
   "summary": "A swipeable strip of slides, on embla.",
   "examples": [

package/manifest/components/channel-matrix.json

@@ -195,22 +195,61 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-display-variation",
+    "--cue-style-focus-width",
+    "--cue-style-heading-ink",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
     "--cue-surface-1",
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
     "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "The channel-by-channel view: 512 addressed cells, repainted imperatively.",
   "examples": [

package/manifest/components/chart-tooltip-content.json

@@ -101,17 +101,54 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-display-variation",
+    "--cue-style-heading-ink",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "The chart tooltip surface: an overlay, styled like every other overlay.",
   "examples": [

package/manifest/components/chat-empty-state.json

@@ -17,8 +17,10 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-style-focus-width",
     "--cue-text-body",
     "--cue-text-emphasis",
     "--cue-text-title"

package/manifest/components/checkbox-group.json

@@ -32,12 +32,26 @@
     "--cue-border-strong",
     "--cue-danger",
     "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
+    "--cue-paint-rest-shade",
+    "--cue-paint-shadow-scale",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
+    "--cue-style-body-weight",
+    "--cue-style-check-edge",
+    "--cue-style-check-radius",
+    "--cue-style-check-size",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
+    "--cue-style-label-ink",
+    "--cue-style-label-weight",
     "--cue-sunken",
     "--cue-text-ui"
   ],

package/manifest/components/checkbox.json

@@ -57,12 +57,26 @@
     "--cue-border-strong",
     "--cue-danger",
     "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
+    "--cue-paint-rest-shade",
+    "--cue-paint-shadow-scale",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
+    "--cue-style-body-weight",
+    "--cue-style-check-edge",
+    "--cue-style-check-radius",
+    "--cue-style-check-size",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
+    "--cue-style-label-ink",
+    "--cue-style-label-weight",
     "--cue-sunken",
     "--cue-text-ui"
   ],

package/manifest/components/chip.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "A compact status/label pill: mono, uppercase, wide-tracked, one line tall.\n\n`tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)\nplus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always\nagree on what \"warn\" looks like.\n\n`variant` sets how loudly it says it. `tinted` is the chip proper — a tone\ntint behind tone ink. `outline` drops the fill and keeps the voice, for a\nchip on an already-busy ground. `tag` drops both: a hairline rim, micro type\nand closed tracking, for the facts that sit *beside* a row's name — a kind, a\nlifecycle, a scope — where a row full of tinted chips would read as a row of\nbuttons. All three keep `h-chip`, so a mixed row still has one baseline.",
+  "description": "A compact status/label pill: mono, uppercase, wide-tracked, one line tall —\nby default, the style set's choice inside one.\n\nA chip speaks in the label voice: it reads the label face\n(`--cue-style-label-face`) and its own case (`--cue-style-chip-case`, which\nfalls back to the label case), so under a sans, sentence-case Look its text\nis sans and sentence case like the captions around it. This reverses the\nearlier ruling that a tag's text is the value being shown and stays mono\n(spec 2026-09-26-looks-fidelity F-15): under a sans Look a mono uppercase\nchip was the most visible console voice left on the page. A consumer that\nwants a chip mono under every set passes `className=\"font-mono uppercase\"`.\n\n`tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)\nplus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always\nagree on what \"warn\" looks like.\n\n`variant` sets how loudly it says it. `tinted` is the chip proper — a tone\ntint behind tone ink. `outline` drops the fill and keeps the voice, for a\nchip on an already-busy ground. `tag` drops both: a hairline rim, micro type\nand closed tracking, for the facts that sit *beside* a row's name — a kind, a\nlifecycle, a scope — where a row full of tinted chips would read as a row of\nbuttons. All three keep `h-chip`, so a mixed row still has one baseline.",
   "props": [
     {
       "name": "interactive",
@@ -113,13 +113,28 @@
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-hair-strong",
     "--cue-info",
     "--cue-ok",
     "--cue-radius-control",
+    "--cue-radius-scale",
     "--cue-space-2",
     "--cue-space-3",
+    "--cue-style-chip-case",
+    "--cue-style-chip-edge",
+    "--cue-style-chip-fill",
+    "--cue-style-chip-height",
+    "--cue-style-chip-pad",
+    "--cue-style-chip-radius",
+    "--cue-style-chip-size",
+    "--cue-style-chip-tracking",
+    "--cue-style-focus-width",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-weight",
     "--cue-surface-2",
     "--cue-text-label",
     "--cue-text-micro",

package/manifest/components/clamp.json

@@ -88,13 +88,15 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-elements-clamp-fade",
     "--cue-elements-clamp-height",
     "--cue-elements-clamp-mask",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-radius-control",
+    "--cue-style-focus-width",
     "--cue-text-ui"
   ],
   "summary": "Long content, cut to a height, dissolving at the cut, with a way back.",

package/manifest/components/code-block.json

@@ -55,10 +55,19 @@
     "--cue-pad-row-x",
     "--cue-pad-row-y",
     "--cue-space-4",
+    "--cue-style-code-weight",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
     "--cue-sunken",
+    "--cue-text-label",
     "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "A block of code with a copy button and no highlighter palette; `language=\"jsx\"` adds emphasis in three inks the theme already has.",
   "examples": [

package/manifest/components/collapsible.json

@@ -88,11 +88,12 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-control-md",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
@@ -101,10 +102,20 @@
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-style-collapse-height",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-quiet-ink",
     "--cue-text-label",
     "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "One section that opens and closes — an accordion of exactly one.",
   "examples": [

package/manifest/components/color-area.json

@@ -28,11 +28,13 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-bg",
     "--cue-border",
     "--cue-fg",
-    "--cue-radius-control"
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-radius-control",
+    "--cue-style-focus-width"
   ],
   "summary": "The two-axis colour field — saturation against brightness by default.",
   "examples": [