@cueplusplus/ui 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,263 @@
 # @cueplusplus/ui
 
+## 0.16.0
+
+### Minor Changes
+
+- 42021e4: Every overlay draws its shadow from a composite a look pack can move.
+
+  Dialogs, menus, popovers, tooltips, toasts, drawers, sheets, the command palette, the
+  select and combobox popups and the log viewer's jump button all drew
+  `shadow-[0_8px_24px_rgba(0,0,0,0.4)]` — the same literal in four places. They now share
+  one four-layer recipe: a hairline, a contact shadow, a bloom and an inset top light.
+
+  **Nothing looks different.** At the defaults three of the four layers are transparent and
+  the bloom is that exact literal. Measured rather than asserted: in Chromium the recipe and
+  the literal render byte for byte; in WebKit 42 channels of roughly 264,000 differ by 1/255,
+  which is compositing rounding and below what a display can show.
+
+  What it buys is that `--cue-paint-shadow-scale` moves the whole ladder at once and any
+  layer switches off by letting its ink resolve to `transparent` — so a pack can give every
+  floating surface a deeper shadow, a tighter one, or a lit top edge, without touching a
+  component.
+
+  Overlays also adopt the gradient stroke deferred from the previous release, and keep their
+  own rim colour while doing it: the recipe's stops fall back to `--cue-border-overlay`, not
+  `--cue-border`, because some themes match that token to the surface on purpose so the rim
+  vanishes.
+
+  `AppWindowFrame` keeps its literal shadow. Its bloom is twice as dark as every other
+  surface's, and giving it the shared recipe would have lightened it.
+
+- 6e2fd3b: Every edge fade in the library follows one token.
+
+  `Tabs`, `Toolbar`, `SegmentedControl`, `ScrollableTabsList` and `AppBar` soften their
+  overflowing edges with a mask that reached in a fixed 24px. That distance is
+  `--cue-paint-fade-length` now, so a `[data-paint]` pack can make every one of them
+  shorter or longer at once.
+
+  **Nothing looks different.** The token's default is the same 24px, measured pixel for
+  pixel in Chromium and WebKit — with a 64px override in the same test, so the comparison
+  is one that could have failed.
+
+  `edgeFadeMask(edges, fadePx)` is unchanged when you pass a reach of your own: an explicit
+  number still wins, because a caller that has measured its own fade is not asking for the
+  axis's.
+
+- 40c9de0: `AppBar`'s frosted glass is a look pack's to change, and a consumer's backdrop utilities still work.
+
+  The bar drew `bg-surface-1/95 backdrop-blur`. It now spends `--cue-paint-glass-filter` and
+  `--cue-paint-glass-ink`, so a `[data-paint]` pack can make the chrome heavier, clearer, or
+  tinted — or turn the blur off entirely — without touching the component.
+
+  **Nothing looks different**, measured pixel for pixel against what the bar drew before, in
+  Chromium and WebKit, over a hard-edged background so the blur has something to smear.
+
+  **And `className` still composes.** This is the part worth knowing if you style `AppBar`
+  from outside: passing `backdrop-brightness-50` or `backdrop-saturate-150` through
+  `className` adds to the bar's blur rather than replacing it. The obvious implementation —
+  a plain `backdrop-filter` declaration — would have silently deleted the blur the moment you
+  passed any backdrop utility of your own. That case is now a test.
+
+  The opaque fallback behind `@supports not (backdrop-filter: …)` is unchanged: a browser
+  without backdrop filters still gets a solid bar rather than a translucent one over the page.
+
+- e53619a: The first look pack: `halo`, and the glow it paints.
+
+  `<ThemeProvider paint="halo">` — or `data-paint="halo"` on any element — gives primary
+  buttons a soft two-stop glow in the theme's own accent, doubling on hover. It is the first
+  value the paint axis has other than `none`, so it is also the first time the axis changes
+  what a page looks like rather than only standing ready to.
+
+  **Nothing changes unless you ask.** Unstamped, both stops have zero blur and a transparent
+  ink, so the button renders exactly as it did — measured pixel for pixel in Chromium and
+  WebKit, alongside the other half of the same test: that stamping `halo` does change it.
+
+  A pack names no colour of its own. `halo`'s two inks are a share of `--cue-accent`, so it
+  reads correctly under all ten shipped themes rather than carrying one palette's blue into
+  the others.
+
+  Two fixes ride along. `--cue-paint-glow-blur` and `-blur-far` were validated against the
+  rim's 0–4px rule, so no usable halo radius was accepted — the first pack to set one was
+  refused at 12px. They take 0–64px now. And `Button`'s `primary` tone is the only component
+  that spends the glow; every other tone is untouched.
+
+- 3d0c3fd: A seventh look pack: `grain`, a fine fractal noise over every surface.
+
+  `<ThemeProvider paint="grain">`, or `<Density paint="grain">` over a subtree, lays a
+  200×200 fractal-noise tile across the surfaces that carry the texture recipe. It is the
+  quietest pack in the catalogue by design — 12% opacity, no blend mode — and it is the
+  only one that spends `--cue-paint-texture`, a name the library has carried since the
+  texture slice with nothing able to use it.
+
+  Measured from greptile.com, whose ground is an `feTurbulence fractalNoise` data URI at
+  0.85 baseFrequency over five octaves, composited at roughly 12% effective opacity across
+  every pixel of the site. The tile here is that filter at those parameters, generated
+  rather than copied: it is 331 bytes of SVG inline in the pack, so nothing is fetched and
+  no asset ships.
+
+  **It is deliberately below the bar.** Every other pack clears the threshold this system
+  sets for shipping one; `grain` reaches about 62% of its site and ships anyway, as the
+  proof that a pack is worth having for what it refuses as much as for what it paints. Its
+  `refuses` note names the four of six screens it cannot claim, the twelve divider forms
+  and the band-frame furniture that belong to components rather than to a finish, the
+  hexagon control silhouette, and the handwriting type stack.
+
+  Nothing changes for a page that does not ask for it: `grain` is opt-in like every pack,
+  and the provider still stamps no `data-paint` at all.
+
+- 4d851a0: `Panel` and `Card` can take an inset ring, and a `Band`'s ground can take a repeating pattern.
+
+  Two more devices reach the paint axis, which means every one of its thirty-one names is now
+  spent by something: `--cue-paint-rim-width` and `-rim-ink` draw a hairline ring inside a
+  panel's or a card's radius, and `--cue-paint-ground-pattern` with `-size` lays a repeating
+  geometry under a band's content.
+
+  **Nothing changes unless you ask.** The ring's width is `0px` and its ink is transparent;
+  the pattern is `none`. Measured pixel for pixel in Chromium and WebKit, with both devices
+  switched on in the same tests so the comparisons are ones that could have failed.
+
+  The ring is a `box-shadow`, so a `Band` or a `Card` that already draws one cannot take it —
+  and **form controls deliberately do not**. `forced-colors: active` discards shadows
+  entirely, and a control's ring is a focus indicator: it stays a real outline, which is what
+  a forced-colors user actually sees.
+
+  A pattern and a texture are different layers and compose: a pattern is the host's own
+  background image, a texture is noise on a pseudo-element above it.
+
+- 5fcc6b4: Form controls and cards draw their border as a gradient stroke, so a look pack can tint it.
+
+  `Input`, `Textarea`, `Select`, `Combobox`, `Autocomplete`, `SearchInput`, `OTPField`,
+  `InputGroup`, the date and colour fields, `MusicalTimeInput` and the rest of the recessed
+  control family — and `Card` — now paint their line from two background layers with a
+  transparent border between them, rather than from `border border-border`.
+
+  **Nothing looks different.** At the defaults both gradient stops are `--cue-border` and a
+  one-colour gradient paints a flat field, so the line is the same one device-pixel of the
+  same colour over the same fill. That is measured rather than asserted: the straight edges
+  and the interior are pixel-identical in Chromium and WebKit, and with square corners the
+  two are identical everywhere. On a rounded corner they differ by sub-pixel antialiasing —
+  invisible at 1×, and bounded by the test rather than claimed away.
+
+  What it buys is that `--cue-paint-stroke-from`, `-to`, `-angle` and `-width` now reach
+  every one of those surfaces, so a `[data-paint]` pack can give the whole family a gradient
+  edge, a thicker rule or a different angle without touching a component.
+
+  A seamed `Card` keeps its old border: its fill is `--cue-border` — the gaps between its
+  rows _are_ the line — and the recipe is keyed by fill.
+
+  `Toggle` and `ToggleGroup` also lose ten custom properties from their published manifests.
+  They never painted them: the entries came from a type-only import of the control chassis,
+  and the manifest lists what a component spends. `--cue-sunken`, `--cue-focus` and
+  `--cue-border` were among them, so this was wrong before the gradient stroke existed.
+
+- bcd0738: A `Band`'s ground can carry a grain or pattern overlay.
+
+  `<Band separation="ground">` now spends `--cue-paint-texture`, `-texture-size`,
+  `-texture-opacity` and `-texture-blend`, so a `[data-paint]` pack can lay a noise tile or
+  a repeating pattern over the band's ground without touching the component.
+
+  **Nothing changes unless you ask.** At the defaults `texture` is `none` and the overlay
+  paints nothing — measured against the same band with _no_ overlay element at all, which is
+  the comparison that matters, since the change adds a `::before` where there was none.
+
+  The overlay is `pointer-events-none` and covers its host exactly, so it never intercepts a
+  click or disturbs the band's own background.
+
+  `--cue-paint-texture` takes a `data:` URI or an absolute `https://` URL and nothing else —
+  the token layer ships no binary, and the build says so by name if you try something else.
+
+### Patch Changes
+
+- ac712b3: `ThemeProvider`'s `nonce` now documents what it does not reach, which matters more than what it does.
+
+  Nothing about the prop's behaviour changes. What changes is that its documentation — the prop's
+  own docblock, and so the manifest an agent reads — stops promising coverage it never had. If you
+  serve a nonce-based Content-Security-Policy, five things are worth checking:
+
+  - **Your pre-paint `<script>` needs the nonce by hand.** `prepaintScript()` returns the script's
+    text; the element is yours, and Next.js never nonces a plain `<script>`.
+  - **The density layer reads the nonce from this prop only.** Not from an outer `CSPProvider`, and
+    not from an outer `ThemeProvider` — a nested provider that sets its own `overrides.densities`
+    needs its own `nonce`. If you render your own `CSPProvider` and leave this prop unset, Base UI's
+    pre-hydration `<script>` takes its nonce in server-rendered HTML and its scrollbar rule takes it
+    wherever React creates that rule in the browser; the density layer, if you set
+    `overrides.densities`, is not covered.
+  - **A server-rendered ScrollArea's Base UI style ships without a nonce under Next.js 16**, whatever
+    this prop or your own `CSPProvider` says: React's server renderer (19.2, and the canary Next.js 16
+    bundles) writes that element's nonce only from a style-specific render option that Next does not
+    pass. Allow it by hash —
+    `'sha256-kLmvWqfziFavKtqHqRsb90f006UAK2Dmd0It5Iz2KFA='` for Base UI 1.7.0 — or switch Base UI's
+    element off and ship its two rules yourself.
+  - **Re-rendering your own `CSPProvider` inside needs the nonce on it.** If you turn on Base UI's
+    `disableStyleElements`, render `<CSPProvider nonce={nonce} disableStyleElements>` inside
+    `ThemeProvider`'s children — with the nonce, or Base UI's pre-hydration `<script>` below it loses
+    it.
+  - **A policy whose `style-src` (or, without one, `default-src`) carries a nonce or a hash, or lacks
+    `'unsafe-inline'`, needs an explicit `style-src-attr 'unsafe-inline'`.** A nonce cannot cover a
+    style attribute, the provider root and many components carry one, and a nonce or hash in the
+    governing list makes the browser ignore `'unsafe-inline'`.
+
+  This also corrects three earlier notes. 0.14.1 said Base UI's element appears wherever a Select, a
+  Popover or a ScrollArea does: a Popover never renders it, and a Select renders it only once its popup
+  mounts in the browser. 0.14.0 said nothing else in this library emits a `<style>` element:
+  `ThemeConfigurator` does, with no nonce. And 0.14.0 said `style-src-attr` is `'unsafe-inline'` or
+  `'none'` and that only `'none'` drops the root's declarations: a nonce in `style-src` drops them too
+  when no `style-src-attr` is set, and `'unsafe-hashes'` with a hash of each value is a third form. `docs/CONSUMING.md` §4.5 has the whole of it, including
+  `paint="grain"` needing `img-src data:`, statically rendered pages, and rolling out under
+  `Content-Security-Policy-Report-Only` first.
+
+- 3fc83a6: Four more look packs: `hatch`, `lift`, `frost` and `bevel`.
+
+  `<ThemeProvider paint="frost">` — or `data-paint` on any element — now picks from six
+  finishes rather than two:
+
+  - **`hatch`** lays a faint diagonal weave under a band's ground and puts a hairline ring on
+    the panels and cards above it.
+  - **`lift`** deepens the shadow ladder and adds a lit top edge, so overlays read as sitting
+    above the page rather than in it.
+  - **`frost`** is heavy glass on the chrome, a long edge fade, and a shadow that reads as
+    distance.
+  - **`bevel`** gives surfaces a gradient edge that catches light at the top and loses it at
+    the bottom, with a lighter glass over the chrome.
+
+  **No pack names a colour of its own.** Every ink is a share of the theme's own palette, so
+  each of the six reads correctly under all ten shipped themes rather than carrying one
+  site's blue into the others — and the build refuses a literal hue by name if one is ever
+  written.
+
+  Each pack is a complete statement of a finish rather than a diff against whatever is above
+  it, so switching between them — or nesting one inside another — changes only what the pack
+  is for. `paint="none"` inside a packed subtree really does reset it, and still renders
+  identically to no pack at all.
+
+  `@cueplusplus/ui`'s manifest records the four new pack values against the three components that stamp the axis, which is how the studio and the docs playground know to offer them.
+
+- f12d280: The READMEs now describe the package you install, not the one from three releases ago.
+
+  `@cueplusplus/tokens`'s README opened by calling itself "two of the system's three DOM axes" and
+  called `axes.css` "the two axes". It is four of five — density, font, style set and paint live
+  here, and the fifth, `[data-theme]`, is the theme packages' — so its axis table gains `[data-style]`
+  (page composition, 13 names) and `[data-paint]` (the finish, 18 names and 13 inks, off until a page
+  stamps it), its export table names `STYLE_SETS`, `PAINTS`, the style and paint contracts and the
+  paint inks beside the rest, and its quick start says the rule that applies to `DENSITIES` applies
+  to all four: build a picker from the exported list, never a hand-written one.
+
+  `@cueplusplus/ui`'s quick start now says what the provider's four axes each change, that `paint` is
+  off until you pass a pack, and where the seven packs and a nonce-based Content-Security-Policy are
+  written up — including that `paint="grain"` needs `img-src data:`. It also says which axes a
+  subtree can change: `<Density>` re-scopes `density`, `styleSet` and `paint`, and the font pairing is
+  the root's alone, because it lives on `<html>`.
+
+- Updated dependencies [e53619a]
+- Updated dependencies [840aa92]
+- Updated dependencies [4eb3b42]
+- Updated dependencies [3fc83a6]
+- Updated dependencies [3d0c3fd]
+- Updated dependencies [0371094]
+- Updated dependencies [f12d280]
+  - @cueplusplus/tokens@0.16.0
+
 ## 0.15.0
 
 ### Minor Changes

package/README.md

@@ -53,6 +53,32 @@ To stop the defaults flashing on first paint, add `prepaintScript()` beside the
 both the same array — [§4 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#4-the-provider)
 is the whole layout.
 
+Beside `theme` and `mode`, the provider takes four axes, and each one changes a single thing:
+`density` the geometry, `font` the typeface pairing, `styleSet` the page composition, and `paint`
+the finish — rims, strokes, elevation, glow, glass, texture and edge fades. `paint` is off unless
+you ask for it: the provider stamps no `data-paint`, so a page looks exactly as it did until you
+pass one of `none`, `halo`, `hatch`, `lift`, `frost`, `bevel` or `grain`. Any subtree can take its
+own with `<Density paint="frost">` — the same island that re-scopes `density` and `styleSet`. The
+font pairing is the one axis a subtree cannot change: it lives on `<html>`, so it is the root's.
+
+```tsx
+import cue from "@cueplusplus/theme-cue";
+import { ThemeProvider } from "@cueplusplus/ui/system";
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={[cue]} theme="cue" density="compact" mode="system" paint="halo">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+The seven packs, where each was measured from and what each refuses:
+<https://ui.cueplusplus.com/docs/paint>. Serving a nonce-based Content-Security-Policy? Read
+[§4.5 of `CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#45-content-security-policy-the-nonce-prop-and-what-it-does-not-reach)
+before you ship it — `paint="grain"` alone needs `img-src data:`.
+
 ## What it ships
 
 Common components come from the root entry. Groups that need an optional peer have a subpath of

package/dist/chat/message-list.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { ChevronDownGlyph } from "./_glyphs.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/message-list.tsx
@@ -131,7 +132,7 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 		}), behind ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-slot": "message-list-jump",
-			className: "absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `absolute bottom-(--cue-space-4) left-1/2 flex -translate-x-1/2 cursor-pointer items-center gap-(--cue-space-2) rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent`,
 			onClick: jumpToLatest,
 			children: [/* @__PURE__ */ jsx(ChevronDownGlyph, { className: "size-icon-sm" }), jumpLabel]
 		}) : null]

package/dist/chrome/_tabs-scroll.d.ts

@@ -56,8 +56,24 @@ declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, cli
  * overflowing edge is often the gap between two tabs, and fading empty space is
  * invisible — hence the chevron buttons in the component.
  *
+ * **The default reach is a custom property, not a number**, so a look pack can
+ * lengthen or shorten every edge fade in the library at once. It is written as
+ * `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+ * ink or a paint name is declared with a `:root` default here but the mask is
+ * also built by this function in isolation — a test calling it with no DOM
+ * would otherwise produce a gradient with an unresolvable stop.
+ *
+ * `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+ * so the swap renders identically: measured pixel for pixel in Chromium and
+ * WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+ * see a difference.
+ *
+ * An explicit `fadePx` still wins, and stays a plain number: a caller that has
+ * measured its own reach is not asking for the axis's.
+ *
  * @param edges Which edges overflow, from {@link computeScrollEdges}.
- * @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+ * @param fadePx How far the fade reaches in. Omitted, it follows
+ * `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
  * @returns A `linear-gradient(...)` value, or `undefined` when nothing
  * overflows — no mask property at all, rather than a fully opaque one, so the
  * common case creates no compositing layer.

package/dist/chrome/_tabs-scroll.js

@@ -59,15 +59,32 @@ function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
 * overflowing edge is often the gap between two tabs, and fading empty space is
 * invisible — hence the chevron buttons in the component.
 *
+* **The default reach is a custom property, not a number**, so a look pack can
+* lengthen or shorten every edge fade in the library at once. It is written as
+* `var(--cue-paint-fade-length,24px)` with the fallback spelled out, because an
+* ink or a paint name is declared with a `:root` default here but the mask is
+* also built by this function in isolation — a test calling it with no DOM
+* would otherwise produce a gradient with an unresolvable stop.
+*
+* `--cue-paint-fade-length` is `24px` at `:root` and {@link TAB_FADE_PX} is 24,
+* so the swap renders identically: measured pixel for pixel in Chromium and
+* WebKit, with a 64px pack changing 15,360 channels to prove the probe could
+* see a difference.
+*
+* An explicit `fadePx` still wins, and stays a plain number: a caller that has
+* measured its own reach is not asking for the axis's.
+*
 * @param edges Which edges overflow, from {@link computeScrollEdges}.
-* @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+* @param fadePx How far the fade reaches in. Omitted, it follows
+* `--cue-paint-fade-length`, whose own default is {@link TAB_FADE_PX}.
 * @returns A `linear-gradient(...)` value, or `undefined` when nothing
 * overflows — no mask property at all, rather than a fully opaque one, so the
 * common case creates no compositing layer.
 */
-function edgeFadeMask(edges, fadePx = 24) {
+function edgeFadeMask(edges, fadePx) {
 	if (!edges.start && !edges.end) return void 0;
-	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${fadePx}px` : "black 0px"}, ${edges.end ? `black calc(100% - ${fadePx}px), transparent 100%` : "black 100%"})`;
+	const reach = fadePx === void 0 ? `var(--cue-paint-fade-length,24px)` : `${fadePx}px`;
+	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${reach}` : "black 0px"}, ${edges.end ? `black calc(100% - ${reach}), transparent 100%` : "black 100%"})`;
 }
 //#endregion
 export { TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/app-bar.js

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { Link } from "../layout/link.js";
 import { Separator } from "../primitives/separator.js";
 import { EdgeScrollNav } from "./_edge-scroller.js";
+import { GLASS_CLASSES } from "../system/_paint-glass.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/app-bar.tsx
@@ -53,7 +54,7 @@ const AppBarRoot = React.forwardRef(function AppBarRoot({ className, sticky = tr
 	return /* @__PURE__ */ jsx("header", {
 		ref,
 		"data-slot": "app-bar",
-		className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-4) border-b border-border bg-surface-1/95 px-(--cue-space-5) backdrop-blur", sticky ? "sticky top-0 z-40" : null, className),
+		className: cn(`flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-4) border-b border-border px-(--cue-space-5) ${GLASS_CLASSES}`, sticky ? "sticky top-0 z-40" : null, className),
 		...elementProps
 	});
 });

package/dist/chrome/band.js

@@ -1,6 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
+import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
+import { GROUND_PATTERN_CLASSES } from "../system/_paint-ground-pattern.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/band.tsx
@@ -28,7 +30,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const SEPARATION_PAINT = {
 	rule: "border-(--cue-band-rule-color)",
-	ground: "bg-(--cue-band-ground)",
+	ground: `bg-(--cue-band-ground) ${GROUND_PATTERN_CLASSES} ${TEXTURE_CLASSES}`,
 	bleed: null,
 	none: null
 };

package/dist/chrome/panel.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RIM_INSET } from "../system/_paint-rim.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/panel.tsx
@@ -28,7 +29,7 @@ const Panel = React.forwardRef(function Panel({ className, ...elementProps }, re
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "panel",
-		className: cn("overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1", className),
+		className: cn(`overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1 ${RIM_INSET}`, className),
 		...elementProps
 	});
 });

package/dist/color/color-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 import { ColorFieldProps, InputProps } from "react-aria-components";
 //#region src/color/color-field.d.ts

package/dist/color/color-picker.d.ts

@@ -1,5 +1,6 @@
 import { ColorFormat } from "./_convert.js";
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 //#region src/color/color-picker.d.ts
 interface ColorPickerProps {

package/dist/date/date-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 import { DateFieldProps, DateInputProps, DateValue } from "react-aria-components";
 //#region src/date/date-field.d.ts

package/dist/date/date-picker.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import { CalendarProps } from "./calendar.js";
 import * as React from "react";
 //#region src/date/date-picker.d.ts

package/dist/date/date-range-picker.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import { CalendarProps } from "./calendar.js";
 import * as React from "react";
 import { DateRange } from "react-day-picker";

package/dist/date/time-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 import { DateInputProps, TimeFieldProps, TimeValue } from "react-aria-components";
 //#region src/date/time-field.d.ts

package/dist/forms/_chassis-size.d.ts

@@ -0,0 +1,22 @@
+//#region src/forms/_chassis-size.d.ts
+/**
+ * The rung of the density control ladder a form control sits on.
+ *
+ * Named `FormControlSize` rather than `ControlSize` because
+ * `@cueplusplus/ui/system` already exports a `ControlSize` for
+ * `useControlHeight`, and the root barrel re-exports both.
+ *
+ * **Its own module, and the reason is the manifest.** `@repo/docgen`
+ * attributes a custom property to a component by the FILE its class string
+ * lives in, and it does not distinguish a type-only import from a value one.
+ * While this type lived in `_chassis.ts`, `Toggle` and `ToggleGroup` — which
+ * import nothing from there but the type and paint their own `toggleVariants`
+ * box — advertised `--cue-paint-stroke-*` in their published manifests. Found
+ * in review of the stroke slice; the manifest is a public contract, so a
+ * component claiming a token it never paints is wrong in the way that matters.
+ *
+ * Nothing but a type may join this file, for the same reason.
+ */
+type FormControlSize = "sm" | "md" | "lg";
+//#endregion
+export { FormControlSize };

package/dist/forms/_chassis.d.ts

@@ -1,13 +1,6 @@
 import { ClassProp, VariantProps } from "../lib/cva.js";
+import { FormControlSize } from "./_chassis-size.js";
 //#region src/forms/_chassis.d.ts
-/**
- * The rung of the density control ladder a form control sits on.
- *
- * Named `FormControlSize` rather than `ControlSize` because
- * `@cueplusplus/ui/system` already exports a `ControlSize` for
- * `useControlHeight`, and the root barrel re-exports both.
- */
-type FormControlSize = "sm" | "md" | "lg";
 /**
  * Everything the recessed control chassis paints except the box itself.
  *
@@ -97,7 +90,7 @@ type FormControlSize = "sm" | "md" | "lg";
  * `focus-visible:outline-solid` re-declares the outline style the sibling
  * `outline-none` switched off — see the note on `buttonChassis`.
  */
-declare const controlSurface = "w-full rounded-(--radius-control) border border-border bg-sunken font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+declare const controlSurface = "w-full rounded-(--radius-control) border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -161,4 +154,4 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  */
 declare const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
 //#endregion
-export { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };
+export { ControlVariantProps, type FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -1,4 +1,5 @@
 import { cva } from "../lib/cva.js";
+import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 //#region src/forms/_chassis.ts
 /**
 * Everything the recessed control chassis paints except the box itself.
@@ -89,7 +90,7 @@ import { cva } from "../lib/cva.js";
 * `focus-visible:outline-solid` re-declares the outline style the sibling
 * `outline-none` switched off — see the note on `buttonChassis`.
 */
-const controlSurface = "w-full rounded-(--radius-control) border border-border bg-sunken font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+const controlSurface = `w-full rounded-(--radius-control) ${STROKE_SUNKEN} font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *

package/dist/forms/autocomplete.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/autocomplete.d.ts
 interface AutocompleteProps {

package/dist/forms/combobox.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/combobox.d.ts
 /** One row in a {@link Combobox} or {@link MultiSelect}. */

package/dist/forms/env-var-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/env-var-input.d.ts
 /**

package/dist/forms/index.d.ts

@@ -1,4 +1,5 @@
-import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./_chassis.js";
 import { Autocomplete, AutocompleteProps } from "./autocomplete.js";
 import { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from "./button-group.js";
 import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./checkbox.js";

package/dist/forms/input-group.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/input-group.d.ts
 interface InputGroupProps extends React.ComponentPropsWithoutRef<"div"> {

package/dist/forms/input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/forms/input.d.ts

package/dist/forms/multi-select.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { ComboboxOption } from "./combobox.js";
 import * as React from "react";
 //#region src/forms/multi-select.d.ts

package/dist/forms/otp-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/forms/otp-field.d.ts

package/dist/forms/password-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { InputProps } from "./input.js";
 import * as React from "react";
 //#region src/forms/password-input.d.ts

package/dist/forms/scrub-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/scrub-input.d.ts
 interface ScrubInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "onDragStart" | "onDragEnd"> {