@mitcsutt/kiln-ui 0.3.0 → 0.5.0

package/dist/components/layout/Box/Box.js

@@ -6,18 +6,19 @@ import a from "./Box.module.js";
 import { forwardRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/components/layout/Box/Box.tsx
-var c = o(function({ padding: o, paddingX: c, paddingY: l, surface: u = "none", border: d = !1, radius: f = "none", as: p = "div", hideBelow: m, hideAbove: h, className: g, style: _, ...v }, y) {
-	return /* @__PURE__ */ s(p, {
-		ref: y,
+var c = o(function({ padding: o, paddingX: c, paddingY: l, surface: u = "none", adaptTones: d = !1, border: f = !1, radius: p = "none", as: m = "div", hideBelow: h, hideAbove: g, className: _, style: v, ...y }, b) {
+	return /* @__PURE__ */ s(m, {
+		ref: b,
 		className: e(a.box, i({
-			hideBelow: m,
-			hideAbove: h
-		}), g),
+			hideBelow: h,
+			hideAbove: g
+		}), _),
 		"data-surface": u === "none" ? void 0 : u,
-		"data-border": d || void 0,
-		"data-radius": f === "none" ? void 0 : f,
-		style: t(n("box-p", o, r), n("box-px", c, r), n("box-py", l, r), _),
-		...v
+		"data-adapt-tones": d || void 0,
+		"data-border": f || void 0,
+		"data-radius": p === "none" ? void 0 : p,
+		style: t(n("box-p", o, r), n("box-px", c, r), n("box-py", l, r), v),
+		...y
 	});
 });
 //#endregion

package/dist/components/layout/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":["styles","Box_module_default","Box","forwardRef","Comp","rest","cx","visibilityClass","className","surface","border","radius","mergeStyles","responsiveVars","padding","space","paddingX","paddingY","style"],"sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Box.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type BoxElement =\n  'div' | 'span' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'li'\nexport type BoxSurface = 'none' | 'canvas' | 'surface' | 'sunken' | 'raised' | 'inverse'\nexport type BoxRadius = 'none' | 'field' | 'surface' | 'media'\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Padding on every side. Responsive. */\n  padding?: Responsive<Space>\n  /** Inline (left/right) padding; overrides `padding` on that axis. Responsive. */\n  paddingX?: Responsive<Space>\n  /** Block (top/bottom) padding; overrides `padding` on that axis. Responsive. */\n  paddingY?: Responsive<Space>\n  /** Background fill. `inverse` also re-points ink and line colours for its children. */\n  surface?: BoxSurface\n  /** Hairline border in `--color-line`. One edge treatment per element — a border *or* a fill. */\n  border?: boolean\n  /** Corner radius, by role. */\n  radius?: BoxRadius\n  as?: BoxElement\n}\n\n/**\n * Padding, a surface and an edge, and nothing else. The escape hatch when no other layout fits.\n *\n * @remarks\n * `Box` adds padding, a background surface, a border and a radius to its content. Reach for\n * `Stack`, `Inline` or `Grid` to arrange things, and for `Card` when something is a self-contained\n * object. `Box` is for the wells and frames left over.\n *\n * @privateRemarks\n * The escape hatch: padding, a surface and an edge — nothing else. Reach for\n * Stack/Inline/Grid for arrangement and Card for self-contained objects first.\n *\n * <Box padding={{ base: 4, md: 5 }} surface=\"sunken\" radius=\"surface\">…</Box>\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    padding,\n    paddingX,\n    paddingY,\n    surface = 'none',\n    border = false,\n    radius = 'none',\n    as: Comp = 'div',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.box, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface === 'none' ? undefined : surface}\n      data-border={border || undefined}\n      data-radius={radius === 'none' ? undefined : radius}\n      style={mergeStyles(\n        responsiveVars('box-p', padding, space),\n        responsiveVars('box-px', paddingX, space),\n        responsiveVars('box-py', paddingY, space),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA0CA,IAAaE,IAAMC,EAAkC,SACnD,EACE,YACA,aACA,aACA,aAAU,QACV,YAAS,IACT,YAAS,QACT,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,KAAKO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC9E,gBAAcC,MAAY,SAAS,KAAA,IAAYA;EAC/C,eAAaC,KAAU,KAAA;EACvB,eAAaC,MAAW,SAAS,KAAA,IAAYA;EAC7C,OAAOC,EACLC,EAAe,SAASC,GAASC,CAAK,GACtCF,EAAe,UAAUG,GAAUD,CAAK,GACxCF,EAAe,UAAUI,GAAUF,CAAK,GACxCG,CACF;EACA,GAAIb;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Box.js","names":["styles","Box_module_default","Box","forwardRef","Comp","rest","cx","visibilityClass","className","surface","adaptTones","border","radius","mergeStyles","responsiveVars","padding","space","paddingX","paddingY","style"],"sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space, type CategoryColor } from '#utils/tokens'\nimport styles from './Box.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type BoxElement =\n  'div' | 'span' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'li'\nexport type BoxSurface =\n  | 'none'\n  | 'canvas'\n  | 'surface'\n  | 'sunken'\n  | 'raised'\n  | 'inverse'\n  | 'accent'\n  | `cat-${CategoryColor}`\nexport type BoxRadius = 'none' | 'field' | 'surface' | 'media'\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Padding on every side. Responsive. */\n  padding?: Responsive<Space>\n  /** Inline (left/right) padding; overrides `padding` on that axis. Responsive. */\n  paddingX?: Responsive<Space>\n  /** Block (top/bottom) padding; overrides `padding` on that axis. Responsive. */\n  paddingY?: Responsive<Space>\n  /**\n   * Background fill. `inverse`, `accent` and the categorical `cat-1` to `cat-8` (one person's or\n   * team's colour, matching their `Tag`) also re-point ink, line and accent colours for its\n   * children, so they stay legible on the fill.\n   */\n  surface?: BoxSurface\n  /**\n   * On an `inverse`, `accent` or categorical fill, re-point the status tones too, so tone text\n   * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on\n   * the fill. On `accent` and categorical fills tone text becomes the fill's ink, so the sign,\n   * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so\n   * tones keep the page's colours. No effect on other surfaces.\n   */\n  adaptTones?: boolean\n  /** Hairline border in `--color-line`. One edge treatment per element — a border *or* a fill. */\n  border?: boolean\n  /** Corner radius, by role. */\n  radius?: BoxRadius\n  as?: BoxElement\n}\n\n/**\n * Padding, a surface and an edge, and nothing else. The escape hatch when no other layout fits.\n *\n * @remarks\n * `Box` adds padding, a background surface, a border and a radius to its content. Reach for\n * `Stack`, `Inline` or `Grid` to arrange things, and for `Card` when something is a self-contained\n * object. `Box` is for the wells and frames left over.\n *\n * @privateRemarks\n * The escape hatch: padding, a surface and an edge — nothing else. Reach for\n * Stack/Inline/Grid for arrangement and Card for self-contained objects first.\n *\n * <Box padding={{ base: 4, md: 5 }} surface=\"sunken\" radius=\"surface\">…</Box>\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    padding,\n    paddingX,\n    paddingY,\n    surface = 'none',\n    adaptTones = false,\n    border = false,\n    radius = 'none',\n    as: Comp = 'div',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.box, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface === 'none' ? undefined : surface}\n      data-adapt-tones={adaptTones || undefined}\n      data-border={border || undefined}\n      data-radius={radius === 'none' ? undefined : radius}\n      style={mergeStyles(\n        responsiveVars('box-p', padding, space),\n        responsiveVars('box-px', paddingX, space),\n        responsiveVars('box-py', paddingY, space),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA8DA,IAAaE,IAAMC,EAAkC,SACnD,EACE,YACA,aACA,aACA,aAAU,QACV,gBAAa,IACb,YAAS,IACT,YAAS,QACT,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,KAAKO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC9E,gBAAcC,MAAY,SAAS,KAAA,IAAYA;EAC/C,oBAAkBC,KAAc,KAAA;EAChC,eAAaC,KAAU,KAAA;EACvB,eAAaC,MAAW,SAAS,KAAA,IAAYA;EAC7C,OAAOC,EACLC,EAAe,SAASC,GAASC,CAAK,GACtCF,EAAe,UAAUG,GAAUD,CAAK,GACxCF,EAAe,UAAUI,GAAUF,CAAK,GACxCG,CACF;EACA,GAAId;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/Box/Box.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.module.js","names":["box","Box_module_default"],"sources":["../../../../src/components/layout/Box/Box.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. Axis padding (--box-px/-py)\n * falls back to the all-sides value (--box-p) per breakpoint.\n *\n * --box-fill / --box-on (read-only): the fill and ink of an `inverse` Box.\n */\n.box {\n  --_p: var(--box-p-base, 0px);\n  --_px: var(--box-px-base, var(--_p));\n  --_py: var(--box-py-base, var(--_p));\n\n  display: block;\n  min-inline-size: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--_px);\n}\n\n@media (min-width: 40em) {\n  .box {\n    --_p: var(--box-p-sm, 0px);\n    --_px: var(--box-px-sm, var(--_p));\n    --_py: var(--box-py-sm, var(--_p));\n  }\n}\n@media (min-width: 48em) {\n  .box {\n    --_p: var(--box-p-md, 0px);\n    --_px: var(--box-px-md, var(--_p));\n    --_py: var(--box-py-md, var(--_p));\n  }\n}\n@media (min-width: 64em) {\n  .box {\n    --_p: var(--box-p-lg, 0px);\n    --_px: var(--box-px-lg, var(--_p));\n    --_py: var(--box-py-lg, var(--_p));\n  }\n}\n@media (min-width: 80em) {\n  .box {\n    --_p: var(--box-p-xl, 0px);\n    --_px: var(--box-px-xl, var(--_p));\n    --_py: var(--box-py-xl, var(--_p));\n  }\n}\n\n/* Surfaces */\n.box[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.box[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.box[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.box[data-surface='raised'] {\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n}\n/* Inverse re-points the colour roles for descendants — same approach as Section. */\n.box[data-surface='inverse'] {\n  --box-fill: var(--color-surface-inverse);\n  --box-on: var(--color-ink-inverse);\n  --color-ink: var(--box-on);\n  --color-ink-muted: color-mix(in oklab, var(--box-on) 76%, var(--box-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--box-on) 60%, var(--box-fill));\n  --color-line: color-mix(in oklab, var(--box-on) 22%, var(--box-fill));\n  --color-line-strong: color-mix(in oklab, var(--box-on) 45%, var(--box-fill));\n  --color-canvas: var(--box-fill);\n  --color-surface: color-mix(in oklab, var(--box-on) 7%, var(--box-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n  --color-surface-raised: color-mix(in oklab, var(--box-on) 4%, var(--box-fill));\n  --color-focus: var(--box-on);\n  --color-accent-text: var(--box-on);\n  --canvas-image: none;\n\n  background-color: var(--box-fill);\n  color: var(--box-on);\n}\n.box[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--box-on);\n  --color-ink-inverse: var(--box-fill);\n}\n\n.box[data-border] {\n  border: var(--border-width) solid var(--color-line);\n}\n\n.box[data-radius='field'] {\n  border-radius: var(--radius-field);\n}\n.box[data-radius='surface'] {\n  border-radius: var(--radius-surface);\n}\n.box[data-radius='media'] {\n  border-radius: var(--radius-media);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.box[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Box.module.js","names":["box","Box_module_default"],"sources":["../../../../src/components/layout/Box/Box.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. Axis padding (--box-px/-py)\n * falls back to the all-sides value (--box-p) per breakpoint.\n *\n * --box-fill / --box-on (read-only): the fill and ink of an `inverse`, `accent` or categorical Box.\n */\n.box {\n  --_p: var(--box-p-base, 0px);\n  --_px: var(--box-px-base, var(--_p));\n  --_py: var(--box-py-base, var(--_p));\n\n  display: block;\n  min-inline-size: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--_px);\n}\n\n@media (min-width: 40em) {\n  .box {\n    --_p: var(--box-p-sm, 0px);\n    --_px: var(--box-px-sm, var(--_p));\n    --_py: var(--box-py-sm, var(--_p));\n  }\n}\n@media (min-width: 48em) {\n  .box {\n    --_p: var(--box-p-md, 0px);\n    --_px: var(--box-px-md, var(--_p));\n    --_py: var(--box-py-md, var(--_p));\n  }\n}\n@media (min-width: 64em) {\n  .box {\n    --_p: var(--box-p-lg, 0px);\n    --_px: var(--box-px-lg, var(--_p));\n    --_py: var(--box-py-lg, var(--_p));\n  }\n}\n@media (min-width: 80em) {\n  .box {\n    --_p: var(--box-p-xl, 0px);\n    --_px: var(--box-px-xl, var(--_p));\n    --_py: var(--box-py-xl, var(--_p));\n  }\n}\n\n/* Surfaces */\n.box[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.box[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.box[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.box[data-surface='raised'] {\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n}\n/* Inverse, accent and categorical fills re-point the colour roles for descendants — same approach as Section. */\n.box[data-surface='inverse'] {\n  --box-fill: var(--color-surface-inverse);\n  --box-on: var(--color-ink-inverse);\n}\n.box[data-surface='accent'] {\n  --box-fill: var(--color-accent);\n  --box-on: var(--color-accent-ink);\n}\n.box[data-surface='cat-1'] {\n  --box-fill: var(--color-cat-1);\n}\n.box[data-surface='cat-2'] {\n  --box-fill: var(--color-cat-2);\n}\n.box[data-surface='cat-3'] {\n  --box-fill: var(--color-cat-3);\n}\n.box[data-surface='cat-4'] {\n  --box-fill: var(--color-cat-4);\n}\n.box[data-surface='cat-5'] {\n  --box-fill: var(--color-cat-5);\n}\n.box[data-surface='cat-6'] {\n  --box-fill: var(--color-cat-6);\n}\n.box[data-surface='cat-7'] {\n  --box-fill: var(--color-cat-7);\n}\n.box[data-surface='cat-8'] {\n  --box-fill: var(--color-cat-8);\n}\n.box[data-surface^='cat-'] {\n  --box-on: var(--color-cat-ink);\n}\n.box:is([data-surface='inverse'], [data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink: var(--box-on);\n  --color-ink-muted: color-mix(in oklab, var(--box-on) 76%, var(--box-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--box-on) 60%, var(--box-fill));\n  --color-line: color-mix(in oklab, var(--box-on) 22%, var(--box-fill));\n  --color-line-strong: color-mix(in oklab, var(--box-on) 45%, var(--box-fill));\n  --color-canvas: var(--box-fill);\n  --color-surface: color-mix(in oklab, var(--box-on) 7%, var(--box-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n  --color-surface-raised: color-mix(in oklab, var(--box-on) 4%, var(--box-fill));\n  --color-focus: var(--box-on);\n  --color-accent-text: var(--box-on);\n  --canvas-image: none;\n\n  background-color: var(--box-fill);\n  color: var(--box-on);\n}\n/* An accent or categorical fill only clears AA against its own ink: no headroom for muted steps. */\n.box:is([data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink-muted: var(--box-on);\n  --color-ink-subtle: var(--box-on);\n  --color-surface: var(--box-fill);\n  --color-surface-sunken: var(--box-fill);\n  --color-surface-raised: var(--box-fill);\n}\n.box:is([data-surface='inverse'], [data-surface^='cat-']) > * {\n  --color-surface-inverse: var(--box-on);\n  --color-ink-inverse: var(--box-fill);\n}\n/* On an accent fill the accent itself becomes the fill's ink, so a primary action still stands out. */\n.box[data-surface='accent'] > * {\n  --color-accent: var(--box-on);\n  --color-accent-hover: color-mix(in oklab, var(--box-on) 82%, var(--box-fill));\n  --color-accent-ink: var(--box-fill);\n  --color-accent-soft: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n}\n\n/*\n * Opt-in (`adaptTones`, so existing bands keep the page's tones): status tones follow the band,\n * like the accent text does. An accent or categorical fill only clears AA against its own ink,\n * so tone text there is that ink (the sign, glyph or label carries the status) and soft tone\n * fills are the fill itself, like the nested surfaces. An inverse band has headroom, so each\n * tone keeps its hue, mixed toward the band's ink until it reads on the fill.\n * Solid tone fills keep their own ink and need no change.\n */\n.box[data-adapt-tones]:is([data-surface='accent'], [data-surface^='cat-']) {\n  --tone-positive-text: var(--box-on);\n  --tone-caution-text: var(--box-on);\n  --tone-critical-text: var(--box-on);\n  --tone-info-text: var(--box-on);\n  --tone-positive-soft: var(--box-fill);\n  --tone-caution-soft: var(--box-fill);\n  --tone-critical-soft: var(--box-fill);\n  --tone-info-soft: var(--box-fill);\n}\n.box[data-adapt-tones][data-surface='inverse'] {\n  --tone-positive-text: color-mix(in oklab, var(--tone-positive) 40%, var(--box-on));\n  --tone-caution-text: color-mix(in oklab, var(--tone-caution) 40%, var(--box-on));\n  --tone-critical-text: color-mix(in oklab, var(--tone-critical) 40%, var(--box-on));\n  --tone-info-text: color-mix(in oklab, var(--tone-info) 40%, var(--box-on));\n  --tone-positive-soft: color-mix(in oklab, var(--tone-positive) 18%, var(--box-fill));\n  --tone-caution-soft: color-mix(in oklab, var(--tone-caution) 18%, var(--box-fill));\n  --tone-critical-soft: color-mix(in oklab, var(--tone-critical) 18%, var(--box-fill));\n  --tone-info-soft: color-mix(in oklab, var(--tone-info) 18%, var(--box-fill));\n}\n\n.box[data-border] {\n  border: var(--border-width) solid var(--color-line);\n}\n\n.box[data-radius='field'] {\n  border-radius: var(--radius-field);\n}\n.box[data-radius='surface'] {\n  border-radius: var(--radius-surface);\n}\n.box[data-radius='media'] {\n  border-radius: var(--radius-media);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.box[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/Divider/Divider.d.ts

@@ -7,7 +7,10 @@ export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     orientation?: DividerOrientation;
     /** Heavier rule in `--color-line-strong` at `--border-width-strong`. */
     strong?: boolean;
-    /** Text set into a horizontal rule, e.g. "Earlier this week". It also names the separator. */
+    /**
+     * Content set into a horizontal rule, e.g. "Earlier this week". It's real content, read like
+     * any text, and may be a block (a `Stack` of lines); the rules either side are decorative.
+     */
     label?: ReactNode;
     /** Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. */
     labelPosition?: 'start' | 'center';
@@ -26,6 +29,9 @@ export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
  * `Divider` separates groups. For a rule between every item of a list, use `Stack dividers`
  * instead, which spaces the rules for you.
  *
+ * A labelled divider is a band rather than a separator: its label is content that screen readers
+ * read in place, and the rules either side of it are decorative.
+ *
  * @privateRemarks
  * A hairline rule between groups of content. Prefer `Stack dividers` for rules
  * between every item of a list.

package/dist/components/layout/Divider/Divider.js

@@ -3,33 +3,31 @@ import { mergeStyles as t } from "../../../utils/responsive.js";
 import { space as n } from "../../../utils/tokens.js";
 import { visibilityClass as r } from "../../../utils/visibility.js";
 import i from "./Divider.module.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/layout/Divider/Divider.tsx
-var c = a(function({ orientation: a = "horizontal", strong: c = !1, label: l, labelPosition: u = "start", spacing: d, decorative: f = !1, hideBelow: p, hideAbove: m, className: h, style: g, ..._ }, v) {
-	let y = o(), b = l != null && l !== !1 && a === "horizontal";
-	return /* @__PURE__ */ s("div", {
-		ref: v,
+var s = a(function({ orientation: a = "horizontal", strong: s = !1, label: c, labelPosition: l = "start", spacing: u, decorative: d = !1, hideBelow: f, hideAbove: p, className: m, style: h, ...g }, _) {
+	let v = c != null && c !== !1 && a === "horizontal";
+	return /* @__PURE__ */ o("div", {
+		ref: _,
 		className: e(i.divider, r({
-			hideBelow: p,
-			hideAbove: m
-		}), h),
-		role: f ? "none" : "separator",
-		"aria-orientation": !f && a === "vertical" ? "vertical" : void 0,
-		"aria-labelledby": !f && b ? y : void 0,
+			hideBelow: f,
+			hideAbove: p
+		}), m),
+		role: d || v ? "none" : "separator",
+		"aria-orientation": !d && a === "vertical" ? "vertical" : void 0,
 		"data-orientation": a,
-		"data-strong": c || void 0,
-		"data-label-position": b ? u : void 0,
-		style: t(d === void 0 ? void 0 : { "--divider-spacing": n(d) }, g),
-		..._,
-		children: b ? /* @__PURE__ */ s("span", {
-			id: y,
+		"data-strong": s || void 0,
+		"data-label-position": v ? l : void 0,
+		style: t(u === void 0 ? void 0 : { "--divider-spacing": n(u) }, h),
+		...g,
+		children: v ? /* @__PURE__ */ o("div", {
 			className: i.label,
-			children: l
+			children: c
 		}) : null
 	});
 });
 //#endregion
-export { c as Divider };
+export { s as Divider };
 
 //# sourceMappingURL=Divider.js.map

package/dist/components/layout/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","names":["styles","Divider_module_default","Divider","forwardRef","rest","labelId","useId","hasLabel","label","orientation","cx","visibilityClass","className","decorative","strong","labelPosition","mergeStyles","spacing","space","style"],"sources":["../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Divider.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport interface DividerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VisibilityProps {\n  /** Default `horizontal`. A vertical rule stretches to its flex/grid row. */\n  orientation?: DividerOrientation\n  /** Heavier rule in `--color-line-strong` at `--border-width-strong`. */\n  strong?: boolean\n  /** Text set into a horizontal rule, e.g. \"Earlier this week\". It also names the separator. */\n  label?: ReactNode\n  /** Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. */\n  labelPosition?: 'start' | 'center'\n  /** Margin on both sides of the rule (block axis if horizontal, inline if vertical). */\n  spacing?: Space\n  /**\n   * Purely visual: hide it from assistive tech. Use when the rule only repeats a\n   * boundary that headings or landmarks already convey.\n   */\n  decorative?: boolean\n}\n\n/**\n * A hairline rule between groups of content, optionally labelled, horizontal or vertical.\n *\n * @remarks\n * `Divider` separates groups. For a rule between every item of a list, use `Stack dividers`\n * instead, which spaces the rules for you.\n *\n * @privateRemarks\n * A hairline rule between groups of content. Prefer `Stack dividers` for rules\n * between every item of a list.\n *\n * <Divider label=\"Earlier this week\" spacing={6} />\n */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(\n  {\n    orientation = 'horizontal',\n    strong = false,\n    label,\n    labelPosition = 'start',\n    spacing,\n    decorative = false,\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const hasLabel =\n    label !== undefined && label !== null && label !== false && orientation === 'horizontal'\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.divider, visibilityClass({ hideBelow, hideAbove }), className)}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={!decorative && orientation === 'vertical' ? 'vertical' : undefined}\n      aria-labelledby={!decorative && hasLabel ? labelId : undefined}\n      data-orientation={orientation}\n      data-strong={strong || undefined}\n      data-label-position={hasLabel ? labelPosition : undefined}\n      style={mergeStyles(\n        spacing === undefined\n          ? undefined\n          : ({ '--divider-spacing': space(spacing) } as CSSProperties),\n        style,\n      )}\n      {...rest}\n    >\n      {hasLabel ? (\n        <span id={labelId} className={styles.label}>\n          {label}\n        </span>\n      ) : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;AAyCA,IAAaE,IAAUC,EAAyC,SAC9D,EACE,iBAAc,cACd,YAAS,IACT,UACA,mBAAgB,SAChB,YACA,gBAAa,IACb,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IACJC,KAAiC,QAAQA,MAAU,MAASC,MAAgB;CAC9E,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGV,EAAO,SAASW,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,MAAMC,IAAa,SAAS;EAC5B,oBAAkB,CAACA,KAAcJ,MAAgB,aAAa,aAAa,KAAA;EAC3E,mBAAiB,CAACI,KAAcN,IAAWF,IAAU,KAAA;EACrD,oBAAkBI;EAClB,eAAaK,KAAU,KAAA;EACvB,uBAAqBP,IAAWQ,IAAgB,KAAA;EAChD,OAAOC,EACLC,MAAY,KAAA,IACR,KAAA,IACC,EAAE,qBAAqBC,EAAMD,CAAO,EAAE,GAC3CE,CACF;EACA,GAAIf;EAEH,UAAAG,IACC,kBAAC,QAAD;GAAM,IAAIF;GAAS,WAAWL,EAAO;GAClC,UAAAQ;EACG,CAAA,IACJ;CACD,CAAA;AAET,CAAC"}
+{"version":3,"file":"Divider.js","names":["styles","Divider_module_default","Divider","forwardRef","rest","hasLabel","label","orientation","cx","visibilityClass","className","decorative","strong","labelPosition","mergeStyles","spacing","space","style"],"sources":["../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Divider.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport interface DividerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VisibilityProps {\n  /** Default `horizontal`. A vertical rule stretches to its flex/grid row. */\n  orientation?: DividerOrientation\n  /** Heavier rule in `--color-line-strong` at `--border-width-strong`. */\n  strong?: boolean\n  /**\n   * Content set into a horizontal rule, e.g. \"Earlier this week\". It's real content, read like\n   * any text, and may be a block (a `Stack` of lines); the rules either side are decorative.\n   */\n  label?: ReactNode\n  /** Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. */\n  labelPosition?: 'start' | 'center'\n  /** Margin on both sides of the rule (block axis if horizontal, inline if vertical). */\n  spacing?: Space\n  /**\n   * Purely visual: hide it from assistive tech. Use when the rule only repeats a\n   * boundary that headings or landmarks already convey.\n   */\n  decorative?: boolean\n}\n\n/**\n * A hairline rule between groups of content, optionally labelled, horizontal or vertical.\n *\n * @remarks\n * `Divider` separates groups. For a rule between every item of a list, use `Stack dividers`\n * instead, which spaces the rules for you.\n *\n * A labelled divider is a band rather than a separator: its label is content that screen readers\n * read in place, and the rules either side of it are decorative.\n *\n * @privateRemarks\n * A hairline rule between groups of content. Prefer `Stack dividers` for rules\n * between every item of a list.\n *\n * <Divider label=\"Earlier this week\" spacing={6} />\n */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(\n  {\n    orientation = 'horizontal',\n    strong = false,\n    label,\n    labelPosition = 'start',\n    spacing,\n    decorative = false,\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const hasLabel =\n    label !== undefined && label !== null && label !== false && orientation === 'horizontal'\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.divider, visibilityClass({ hideBelow, hideAbove }), className)}\n      // A labelled band's label is content, which a separator's children can't be.\n      role={decorative || hasLabel ? 'none' : 'separator'}\n      aria-orientation={!decorative && orientation === 'vertical' ? 'vertical' : undefined}\n      data-orientation={orientation}\n      data-strong={strong || undefined}\n      data-label-position={hasLabel ? labelPosition : undefined}\n      style={mergeStyles(\n        spacing === undefined\n          ? undefined\n          : ({ '--divider-spacing': space(spacing) } as CSSProperties),\n        style,\n      )}\n      {...rest}\n    >\n      {hasLabel ? <div className={styles.label}>{label}</div> : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;AA+CA,IAAaE,IAAUC,EAAyC,SAC9D,EACE,iBAAc,cACd,YAAS,IACT,UACA,mBAAgB,SAChB,YACA,gBAAa,IACb,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IACJC,KAAiC,QAAQA,MAAU,MAASC,MAAgB;CAC9E,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGR,EAAO,SAASS,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAElF,MAAMC,KAAcN,IAAW,SAAS;EACxC,oBAAkB,CAACM,KAAcJ,MAAgB,aAAa,aAAa,KAAA;EAC3E,oBAAkBA;EAClB,eAAaK,KAAU,KAAA;EACvB,uBAAqBP,IAAWQ,IAAgB,KAAA;EAChD,OAAOC,EACLC,MAAY,KAAA,IACR,KAAA,IACC,EAAE,qBAAqBC,EAAMD,CAAO,EAAE,GAC3CE,CACF;EACA,GAAIb;EAEH,UAAAC,IAAW,kBAAC,OAAD;GAAK,WAAWL,EAAO;GAAQ,UAAAM;EAAW,CAAA,IAAI;CACvD,CAAA;AAET,CAAC"}

package/dist/components/layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from 'react';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type ScrollAreaAxis = 'x' | 'y' | 'both';
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement>, VisibilityProps {
+    /**
+     * Names the area. With a name (this, or `aria-labelledby`) it becomes a labelled region that
+     * keyboard users can focus and scroll with the arrow keys.
+     */
+    label?: string;
+    /**
+     * Which way it scrolls. On `x` and `both` the content keeps its natural width, so a row of cards
+     * scrolls instead of squeezing. `y` and `both` scroll once a parent gives the area a height (a
+     * grid row, a pane). Default `x`.
+     */
+    axis?: ScrollAreaAxis;
+}
+/**
+ * A scroll container for content wider or taller than the page, such as a bracket, a timeline or
+ * a wide board, that keyboard users can reach and scroll.
+ *
+ * @remarks
+ * `ScrollArea` lets one wide thing scroll on its own instead of pushing the page sideways. Give it
+ * a `label` and it's a named region in the tab order, so someone without a mouse or touch screen
+ * can focus it and scroll with the arrow keys. The scrollbar takes the theme's line colour.
+ *
+ * A data table doesn't need one: `Table` scrolls sideways itself, and takes the same `label`.
+ *
+ * @privateRemarks
+ * The labelled, focusable scroll wrapper Table already has, for anything that isn't a table
+ * (axe's scrollable-region-focusable). Focusable only when named, so an unnamed one never adds
+ * an anonymous tab stop. `role` is an expression, which jsx-a11y's no-noninteractive-tabindex
+ * exempts (allowExpressionValues), so the tabIndex stays lint-clean.
+ *
+ * <ScrollArea label="Knockout bracket"><Bracket /></ScrollArea>
+ */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/ScrollArea/ScrollArea.js

@@ -0,0 +1,25 @@
+import { cx as e } from "../../../utils/cx.js";
+import { visibilityClass as t } from "../../../utils/visibility.js";
+import n from "./ScrollArea.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/ScrollArea/ScrollArea.tsx
+var a = r(function({ label: r, axis: a = "x", hideBelow: o, hideAbove: s, className: c, ...l }, u) {
+	let d = r !== void 0 || l["aria-labelledby"] !== void 0;
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		className: e(n.scrollArea, t({
+			hideBelow: o,
+			hideAbove: s
+		}), c),
+		"data-axis": a,
+		role: d ? "region" : void 0,
+		"aria-label": r,
+		tabIndex: d ? 0 : void 0,
+		...l
+	});
+});
+//#endregion
+export { a as ScrollArea };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/layout/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":["styles","ScrollArea_module_default","ScrollArea","forwardRef","rest","named","label","cx","visibilityClass","className","axis"],"sources":["../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport styles from './ScrollArea.module.css'\n\nexport type ScrollAreaAxis = 'x' | 'y' | 'both'\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement>, VisibilityProps {\n  /**\n   * Names the area. With a name (this, or `aria-labelledby`) it becomes a labelled region that\n   * keyboard users can focus and scroll with the arrow keys.\n   */\n  label?: string\n  /**\n   * Which way it scrolls. On `x` and `both` the content keeps its natural width, so a row of cards\n   * scrolls instead of squeezing. `y` and `both` scroll once a parent gives the area a height (a\n   * grid row, a pane). Default `x`.\n   */\n  axis?: ScrollAreaAxis\n}\n\n/**\n * A scroll container for content wider or taller than the page, such as a bracket, a timeline or\n * a wide board, that keyboard users can reach and scroll.\n *\n * @remarks\n * `ScrollArea` lets one wide thing scroll on its own instead of pushing the page sideways. Give it\n * a `label` and it's a named region in the tab order, so someone without a mouse or touch screen\n * can focus it and scroll with the arrow keys. The scrollbar takes the theme's line colour.\n *\n * A data table doesn't need one: `Table` scrolls sideways itself, and takes the same `label`.\n *\n * @privateRemarks\n * The labelled, focusable scroll wrapper Table already has, for anything that isn't a table\n * (axe's scrollable-region-focusable). Focusable only when named, so an unnamed one never adds\n * an anonymous tab stop. `role` is an expression, which jsx-a11y's no-noninteractive-tabindex\n * exempts (allowExpressionValues), so the tabIndex stays lint-clean.\n *\n * <ScrollArea label=\"Knockout bracket\"><Bracket /></ScrollArea>\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  { label, axis = 'x', hideBelow, hideAbove, className, ...rest },\n  ref,\n) {\n  const named = label !== undefined || rest['aria-labelledby'] !== undefined\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.scrollArea, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-axis={axis}\n      role={named ? 'region' : undefined}\n      aria-label={label}\n      tabIndex={named ? 0 : undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAwCA,IAAaE,IAAaC,EAA4C,SACpE,EAAE,UAAO,UAAO,KAAK,cAAW,cAAW,cAAW,GAAGC,KACzD,GACA;CACA,IAAMC,IAAQC,MAAU,KAAA,KAAaF,EAAK,uBAAuB,KAAA;CACjE,OACE,kBAAC,OAAD;EACO;EACL,WAAWG,EAAGP,EAAO,YAAYQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EACrF,aAAWC;EACX,MAAML,IAAQ,WAAW,KAAA;EACzB,cAAYC;EACZ,UAAUD,IAAQ,IAAI,KAAA;EACtB,GAAID;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/ScrollArea/ScrollArea.module.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/ScrollArea/ScrollArea.module.css
+var e = "kiln-ScrollArea__scrollArea", t = { scrollArea: e };
+//#endregion
+export { t as default, e as scrollArea };
+
+//# sourceMappingURL=ScrollArea.module.js.map

package/dist/components/layout/ScrollArea/ScrollArea.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.module.js","names":["scrollArea","ScrollArea_module_default"],"sources":["../../../../src/components/layout/ScrollArea/ScrollArea.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --scroll-area-thumb  default var(--color-line-strong) — the scrollbar's thumb\n *\n * Scrolling stays inside the area on its own axis (overscroll-behavior), so reaching the end\n * of a wide bracket doesn't swipe the browser back a page.\n */\n.scrollArea {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--scroll-area-thumb, var(--color-line-strong)) transparent;\n}\n.scrollArea[data-axis='y'] {\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior-x: auto;\n  overscroll-behavior-y: contain;\n}\n.scrollArea[data-axis='both'] {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n/*\n * Sideways, the content keeps at least its natural width instead of squeezing to fit, so a row\n * of cards scrolls rather than shrinking; content narrower than the area still fills it.\n */\n.scrollArea:not([data-axis='y']) > * {\n  min-inline-size: max-content;\n}\n.scrollArea:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.scrollArea[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './ScrollArea.js';
+export type { ScrollAreaProps, ScrollAreaAxis } from './ScrollArea.js';

package/dist/components/layout/Section/Section.d.ts

@@ -1,9 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type Responsive } from '../../../utils/responsive.js';
-import { type Space } from '../../../utils/tokens.js';
+import { type Space, type CategoryColor } from '../../../utils/tokens.js';
 import { type VisibilityProps } from '../../../utils/visibility.js';
 export type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer';
-export type SectionSurface = 'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent';
+export type SectionSurface = 'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent' | `cat-${CategoryColor}`;
 export type SectionDivider = 'top' | 'bottom' | 'both';
 export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
     /**
@@ -12,10 +12,19 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityPro
      */
     space?: Responsive<Space>;
     /**
-     * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse` and
-     * `accent` re-point the ink, line and focus colours so children stay legible.
+     * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse`, `accent` and
+     * the categorical `cat-1` to `cat-8` re-point the ink, line and focus colours so children
+     * stay legible.
      */
     surface?: SectionSurface;
+    /**
+     * On an `inverse`, `accent` or categorical band, re-point the status tones too, so tone text
+     * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on
+     * the band. On `accent` and categorical bands tone text becomes the band's ink, so the sign,
+     * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so
+     * tones keep the page's colours. No effect on other surfaces.
+     */
+    adaptTones?: boolean;
     /** A hairline across the full bleed at the top, bottom or both edges. */
     divider?: SectionDivider;
     as?: SectionElement;
@@ -31,9 +40,11 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityPro
  *
  * ## Surfaces and bands
  *
- * `surface` is `canvas`, `surface`, `sunken`, `inverse` or `accent`. On `inverse` and `accent`,
- * the colour roles flip for everything inside, so text, links, focus rings and buttons stay
- * legible with no extra props. `divider` adds a rule at the `top`, `bottom` or `both`.
+ * `surface` is `canvas`, `surface`, `sunken`, `inverse`, `accent`, or a categorical `cat-1` to
+ * `cat-8` (a band in one person's or team's colour, matching their `Tag`). On `inverse`, `accent`
+ * and the categorical bands, the colour roles flip for everything inside, so text, links, focus
+ * rings and buttons stay legible with no extra props. Add `adaptTones` to flip the status tones
+ * too. `divider` adds a rule at the `top`, `bottom` or `both`.
  *
  * @privateRemarks
  * A full-bleed band of vertical rhythm. Put a `Container` inside for width.

package/dist/components/layout/Section/Section.js

@@ -6,17 +6,18 @@ import a from "./Section.module.js";
 import { forwardRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/components/layout/Section/Section.tsx
-var c = o(function({ space: o, surface: c, divider: l, as: u = "section", hideBelow: d, hideAbove: f, className: p, style: m, ...h }, g) {
-	return /* @__PURE__ */ s(u, {
-		ref: g,
+var c = o(function({ space: o, surface: c, adaptTones: l = !1, divider: u, as: d = "section", hideBelow: f, hideAbove: p, className: m, style: h, ...g }, _) {
+	return /* @__PURE__ */ s(d, {
+		ref: _,
 		className: e(a.section, i({
-			hideBelow: d,
-			hideAbove: f
-		}), p),
+			hideBelow: f,
+			hideAbove: p
+		}), m),
 		"data-surface": c,
-		"data-divider": l,
-		style: t(n("section-space", o, r), m),
-		...h
+		"data-adapt-tones": l || void 0,
+		"data-divider": u,
+		style: t(n("section-space", o, r), h),
+		...g
 	});
 });
 //#endregion

package/dist/components/layout/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["styles","Section_module_default","Section","forwardRef","spaceProp","Comp","rest","cx","visibilityClass","className","surface","divider","mergeStyles","responsiveVars","space","style"],"sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Section.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\nexport type SectionSurface = 'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent'\nexport type SectionDivider = 'top' | 'bottom' | 'both'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Block padding (top and bottom), as a step on the space scale. Responsive.\n   * Vary it: adjacent sections should not share the same step. Default `8`.\n   */\n  space?: Responsive<Space>\n  /**\n   * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse` and\n   * `accent` re-point the ink, line and focus colours so children stay legible.\n   */\n  surface?: SectionSurface\n  /** A hairline across the full bleed at the top, bottom or both edges. */\n  divider?: SectionDivider\n  as?: SectionElement\n}\n\n/**\n * A full-bleed band of vertical space, with an optional surface and rules. Put a Container inside\n * it for width.\n *\n * @remarks\n * `Section` is how a page gets its rhythm: each band pads itself top and bottom with a step from\n * the space scale, and can paint a surface across the full width. Width is the `Container`'s job,\n * so a section is almost always `Section` then `Container`.\n *\n * ## Surfaces and bands\n *\n * `surface` is `canvas`, `surface`, `sunken`, `inverse` or `accent`. On `inverse` and `accent`,\n * the colour roles flip for everything inside, so text, links, focus rings and buttons stay\n * legible with no extra props. `divider` adds a rule at the `top`, `bottom` or `both`.\n *\n * @privateRemarks\n * A full-bleed band of vertical rhythm. Put a `Container` inside for width.\n *\n * <Section space={{ base: 7, md: 9 }} surface=\"sunken\" divider=\"both\">\n *   <Container>…</Container>\n * </Section>\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    space: spaceProp,\n    surface,\n    divider,\n    as: Comp = 'section',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.section, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface}\n      data-divider={divider}\n      style={mergeStyles(responsiveVars('section-space', spaceProp, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAiDA,IAAaE,IAAUC,EAAsC,SAC3D,EACE,OAAOC,GACP,YACA,YACA,IAAIC,IAAO,WACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGP,EAAO,SAASQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,gBAAcC;EACd,gBAAcC;EACd,OAAOC,EAAYC,EAAe,iBAAiBT,GAAWU,CAAK,GAAGC,CAAK;EAC3E,GAAIT;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Section.js","names":["styles","Section_module_default","Section","forwardRef","spaceProp","Comp","rest","cx","visibilityClass","className","surface","adaptTones","divider","mergeStyles","responsiveVars","space","style"],"sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space, type CategoryColor } from '#utils/tokens'\nimport styles from './Section.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\nexport type SectionSurface =\n  'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent' | `cat-${CategoryColor}`\nexport type SectionDivider = 'top' | 'bottom' | 'both'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Block padding (top and bottom), as a step on the space scale. Responsive.\n   * Vary it: adjacent sections should not share the same step. Default `8`.\n   */\n  space?: Responsive<Space>\n  /**\n   * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse`, `accent` and\n   * the categorical `cat-1` to `cat-8` re-point the ink, line and focus colours so children\n   * stay legible.\n   */\n  surface?: SectionSurface\n  /**\n   * On an `inverse`, `accent` or categorical band, re-point the status tones too, so tone text\n   * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on\n   * the band. On `accent` and categorical bands tone text becomes the band's ink, so the sign,\n   * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so\n   * tones keep the page's colours. No effect on other surfaces.\n   */\n  adaptTones?: boolean\n  /** A hairline across the full bleed at the top, bottom or both edges. */\n  divider?: SectionDivider\n  as?: SectionElement\n}\n\n/**\n * A full-bleed band of vertical space, with an optional surface and rules. Put a Container inside\n * it for width.\n *\n * @remarks\n * `Section` is how a page gets its rhythm: each band pads itself top and bottom with a step from\n * the space scale, and can paint a surface across the full width. Width is the `Container`'s job,\n * so a section is almost always `Section` then `Container`.\n *\n * ## Surfaces and bands\n *\n * `surface` is `canvas`, `surface`, `sunken`, `inverse`, `accent`, or a categorical `cat-1` to\n * `cat-8` (a band in one person's or team's colour, matching their `Tag`). On `inverse`, `accent`\n * and the categorical bands, the colour roles flip for everything inside, so text, links, focus\n * rings and buttons stay legible with no extra props. Add `adaptTones` to flip the status tones\n * too. `divider` adds a rule at the `top`, `bottom` or `both`.\n *\n * @privateRemarks\n * A full-bleed band of vertical rhythm. Put a `Container` inside for width.\n *\n * <Section space={{ base: 7, md: 9 }} surface=\"sunken\" divider=\"both\">\n *   <Container>…</Container>\n * </Section>\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    space: spaceProp,\n    surface,\n    adaptTones = false,\n    divider,\n    as: Comp = 'section',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.section, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface}\n      data-adapt-tones={adaptTones || undefined}\n      data-divider={divider}\n      style={mergeStyles(responsiveVars('section-space', spaceProp, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA6DA,IAAaE,IAAUC,EAAsC,SAC3D,EACE,OAAOC,GACP,YACA,gBAAa,IACb,YACA,IAAIC,IAAO,WACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGP,EAAO,SAASQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,gBAAcC;EACd,oBAAkBC,KAAc,KAAA;EAChC,gBAAcC;EACd,OAAOC,EAAYC,EAAe,iBAAiBV,GAAWW,CAAK,GAAGC,CAAK;EAC3E,GAAIV;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/Section/Section.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.module.js","names":["section","Section_module_default"],"sources":["../../../../src/components/layout/Section/Section.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens:\n *   --section-fill / --section-on   (read-only) the band's fill and ink on inverse/accent\n *   --section-space-default   block padding when `space` is unset (default var(--space-8))\n *   --section-divider-color   hairline colour for `divider` (default var(--color-line))\n */\n.section {\n  --_space: var(--section-space-base, var(--section-space-default, var(--space-8)));\n  --_rule: var(--border-width) solid var(--section-divider-color, var(--color-line));\n\n  display: block;\n  position: relative;\n  min-inline-size: 0;\n  padding-block: var(--_space);\n}\n\n@media (min-width: 40em) {\n  .section {\n    --_space: var(--section-space-sm, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 48em) {\n  .section {\n    --_space: var(--section-space-md, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 64em) {\n  .section {\n    --_space: var(--section-space-lg, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 80em) {\n  .section {\n    --_space: var(--section-space-xl, var(--section-space-default, var(--space-8)));\n  }\n}\n\n.section[data-divider='top'],\n.section[data-divider='both'] {\n  border-block-start: var(--_rule);\n}\n.section[data-divider='bottom'],\n.section[data-divider='both'] {\n  border-block-end: var(--_rule);\n}\n\n/* Surfaces */\n.section[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.section[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.section[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n\n/*\n * Inverse and accent bands re-point the colour roles for every descendant, so text,\n * hairlines, focus rings and nested controls (an outline or solid Button) stay legible\n * without per-child props. Mixes are taken against the band's own fill.\n *\n * Swapping a pair (e.g. ink <-> ink-inverse) can't happen on one element — it would be\n * a var() cycle — so the band publishes its fill/ink as --section-fill/--section-on and\n * the swapped roles are set on its children.\n */\n.section[data-surface='inverse'] {\n  --section-fill: var(--color-surface-inverse);\n  --section-on: var(--color-ink-inverse);\n}\n.section[data-surface='accent'] {\n  --section-fill: var(--color-accent);\n  --section-on: var(--color-accent-ink);\n}\n.section:is([data-surface='inverse'], [data-surface='accent']) {\n  --color-ink: var(--section-on);\n  --color-ink-muted: color-mix(in oklab, var(--section-on) 76%, var(--section-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--section-on) 60%, var(--section-fill));\n  --color-line: color-mix(in oklab, var(--section-on) 22%, var(--section-fill));\n  --color-line-strong: color-mix(in oklab, var(--section-on) 45%, var(--section-fill));\n  --color-canvas: var(--section-fill);\n  --color-surface: color-mix(in oklab, var(--section-on) 7%, var(--section-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n  --color-surface-raised: color-mix(in oklab, var(--section-on) 4%, var(--section-fill));\n  --color-focus: var(--section-on);\n  --color-accent-text: var(--section-on);\n  --canvas-image: none;\n\n  background-color: var(--section-fill);\n  color: var(--section-on);\n}\n/* An accent fill only clears AA against its own ink (~4.5-5:1), so there is no headroom\n   for muted/subtle steps there: secondary text uses the full band ink, and nested\n   surfaces stay the band fill (edges come from the line tokens) so text on them keeps AA. */\n.section[data-surface='accent'] {\n  --color-ink-muted: var(--section-on);\n  --color-ink-subtle: var(--section-on);\n  --color-surface: var(--section-fill);\n  --color-surface-sunken: var(--section-fill);\n  --color-surface-raised: var(--section-fill);\n}\n.section[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--section-on);\n  --color-ink-inverse: var(--section-fill);\n}\n/* On an accent band the accent itself becomes the band's ink, so a primary action still stands out. */\n.section[data-surface='accent'] > * {\n  --color-accent: var(--section-on);\n  --color-accent-hover: color-mix(in oklab, var(--section-on) 82%, var(--section-fill));\n  --color-accent-ink: var(--section-fill);\n  --color-accent-soft: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.section[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Section.module.js","names":["section","Section_module_default"],"sources":["../../../../src/components/layout/Section/Section.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens:\n *   --section-fill / --section-on   (read-only) the band's fill and ink on inverse/accent\n *   --section-space-default   block padding when `space` is unset (default var(--space-8))\n *   --section-divider-color   hairline colour for `divider` (default var(--color-line))\n */\n.section {\n  --_space: var(--section-space-base, var(--section-space-default, var(--space-8)));\n  --_rule: var(--border-width) solid var(--section-divider-color, var(--color-line));\n\n  display: block;\n  position: relative;\n  min-inline-size: 0;\n  padding-block: var(--_space);\n}\n\n@media (min-width: 40em) {\n  .section {\n    --_space: var(--section-space-sm, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 48em) {\n  .section {\n    --_space: var(--section-space-md, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 64em) {\n  .section {\n    --_space: var(--section-space-lg, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 80em) {\n  .section {\n    --_space: var(--section-space-xl, var(--section-space-default, var(--space-8)));\n  }\n}\n\n.section[data-divider='top'],\n.section[data-divider='both'] {\n  border-block-start: var(--_rule);\n}\n.section[data-divider='bottom'],\n.section[data-divider='both'] {\n  border-block-end: var(--_rule);\n}\n\n/* Surfaces */\n.section[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.section[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.section[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n\n/*\n * Inverse and accent bands re-point the colour roles for every descendant, so text,\n * hairlines, focus rings and nested controls (an outline or solid Button) stay legible\n * without per-child props. Mixes are taken against the band's own fill.\n *\n * Swapping a pair (e.g. ink <-> ink-inverse) can't happen on one element — it would be\n * a var() cycle — so the band publishes its fill/ink as --section-fill/--section-on and\n * the swapped roles are set on its children.\n */\n.section[data-surface='inverse'] {\n  --section-fill: var(--color-surface-inverse);\n  --section-on: var(--color-ink-inverse);\n}\n.section[data-surface='accent'] {\n  --section-fill: var(--color-accent);\n  --section-on: var(--color-accent-ink);\n}\n.section[data-surface='cat-1'] {\n  --section-fill: var(--color-cat-1);\n}\n.section[data-surface='cat-2'] {\n  --section-fill: var(--color-cat-2);\n}\n.section[data-surface='cat-3'] {\n  --section-fill: var(--color-cat-3);\n}\n.section[data-surface='cat-4'] {\n  --section-fill: var(--color-cat-4);\n}\n.section[data-surface='cat-5'] {\n  --section-fill: var(--color-cat-5);\n}\n.section[data-surface='cat-6'] {\n  --section-fill: var(--color-cat-6);\n}\n.section[data-surface='cat-7'] {\n  --section-fill: var(--color-cat-7);\n}\n.section[data-surface='cat-8'] {\n  --section-fill: var(--color-cat-8);\n}\n.section[data-surface^='cat-'] {\n  --section-on: var(--color-cat-ink);\n}\n.section:is([data-surface='inverse'], [data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink: var(--section-on);\n  --color-ink-muted: color-mix(in oklab, var(--section-on) 76%, var(--section-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--section-on) 60%, var(--section-fill));\n  --color-line: color-mix(in oklab, var(--section-on) 22%, var(--section-fill));\n  --color-line-strong: color-mix(in oklab, var(--section-on) 45%, var(--section-fill));\n  --color-canvas: var(--section-fill);\n  --color-surface: color-mix(in oklab, var(--section-on) 7%, var(--section-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n  --color-surface-raised: color-mix(in oklab, var(--section-on) 4%, var(--section-fill));\n  --color-focus: var(--section-on);\n  --color-accent-text: var(--section-on);\n  --canvas-image: none;\n\n  background-color: var(--section-fill);\n  color: var(--section-on);\n}\n/* An accent or categorical fill only clears AA against its own ink, so there is no headroom\n   for muted/subtle steps there: secondary text uses the full band ink, and nested\n   surfaces stay the band fill (edges come from the line tokens) so text on them keeps AA. */\n.section:is([data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink-muted: var(--section-on);\n  --color-ink-subtle: var(--section-on);\n  --color-surface: var(--section-fill);\n  --color-surface-sunken: var(--section-fill);\n  --color-surface-raised: var(--section-fill);\n}\n.section[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--section-on);\n  --color-ink-inverse: var(--section-fill);\n}\n/* On an accent band the accent itself becomes the band's ink, so a primary action still stands out. */\n.section[data-surface='accent'] > * {\n  --color-accent: var(--section-on);\n  --color-accent-hover: color-mix(in oklab, var(--section-on) 82%, var(--section-fill));\n  --color-accent-ink: var(--section-fill);\n  --color-accent-soft: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n}\n\n/*\n * Opt-in (`adaptTones`, so existing bands keep the page's tones): status tones follow the band,\n * like the accent text does. An accent or categorical fill only clears AA against its own ink,\n * so tone text there is that ink (the sign, glyph or label carries the status) and soft tone\n * fills are the fill itself, like the nested surfaces. An inverse band has headroom, so each\n * tone keeps its hue, mixed toward the band's ink until it reads on the fill.\n * Solid tone fills keep their own ink and need no change.\n */\n.section[data-adapt-tones]:is([data-surface='accent'], [data-surface^='cat-']) {\n  --tone-positive-text: var(--section-on);\n  --tone-caution-text: var(--section-on);\n  --tone-critical-text: var(--section-on);\n  --tone-info-text: var(--section-on);\n  --tone-positive-soft: var(--section-fill);\n  --tone-caution-soft: var(--section-fill);\n  --tone-critical-soft: var(--section-fill);\n  --tone-info-soft: var(--section-fill);\n}\n.section[data-adapt-tones][data-surface='inverse'] {\n  --tone-positive-text: color-mix(in oklab, var(--tone-positive) 40%, var(--section-on));\n  --tone-caution-text: color-mix(in oklab, var(--tone-caution) 40%, var(--section-on));\n  --tone-critical-text: color-mix(in oklab, var(--tone-critical) 40%, var(--section-on));\n  --tone-info-text: color-mix(in oklab, var(--tone-info) 40%, var(--section-on));\n  --tone-positive-soft: color-mix(in oklab, var(--tone-positive) 18%, var(--section-fill));\n  --tone-caution-soft: color-mix(in oklab, var(--tone-caution) 18%, var(--section-fill));\n  --tone-critical-soft: color-mix(in oklab, var(--tone-critical) 18%, var(--section-fill));\n  --tone-info-soft: color-mix(in oklab, var(--tone-info) 18%, var(--section-fill));\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.section[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/navigation/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { Accordion as AccordionPrimitive } from 'radix-ui';
 export type AccordionVariant = 'divided' | 'contained';
 export type AccordionSize = 'sm' | 'md';
@@ -13,6 +13,11 @@ export type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimit
 export interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
     /** Heading level wrapping the trigger, for the document outline. Default 3. */
     level?: 2 | 3 | 4 | 5 | 6;
+    /**
+     * A figure or badge at the end of the trigger, just before the chevron, like a score beside
+     * a match. Keep it phrasing content (`Numeral`, `Badge`, `Text`): it's inside a button.
+     */
+    trailing?: ReactNode;
 }
 export type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
 /**

package/dist/components/navigation/Accordion/Accordion.js

@@ -27,21 +27,29 @@ var u = i("md"), d = a(function({ variant: t = "divided", size: n = "md", classN
 		className: e(r.item, t),
 		...n
 	});
-}), p = a(function({ level: i = 3, className: a, children: d, ...f }, p) {
-	let m = o(u), h = n(i);
+}), p = a(function({ level: i = 3, trailing: a, className: d, children: f, ...p }, m) {
+	let h = o(u), g = n(i);
 	return /* @__PURE__ */ s(l.Header, {
 		asChild: !0,
-		children: /* @__PURE__ */ s(h, {
+		children: /* @__PURE__ */ s(g, {
 			className: r.header,
 			children: /* @__PURE__ */ c(l.Trigger, {
-				ref: p,
-				className: e(r.trigger, a),
-				"data-size": m,
-				...f,
-				children: [/* @__PURE__ */ s("span", {
-					className: r.triggerLabel,
-					children: d
-				}), /* @__PURE__ */ s(t, { className: r.chevron })]
+				ref: m,
+				className: e(r.trigger, d),
+				"data-size": h,
+				"data-trailing": a !== void 0 || void 0,
+				...p,
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: r.triggerLabel,
+						children: f
+					}),
+					a === void 0 ? null : /* @__PURE__ */ s("span", {
+						className: r.triggerTrailing,
+						children: a
+					}),
+					/* @__PURE__ */ s(t, { className: r.chevron })
+				]
 			})
 		})
 	});

package/dist/components/navigation/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["Accordion","AccordionPrimitive","styles","Accordion_module_default","SizeContext","createContext","AccordionRoot","forwardRef","rest","props","size","Accordion","cx","className","variant","AccordionItem","AccordionTrigger","useContext","Heading","headingTag","level","ChevronDownIcon","AccordionContent","Accordion$1"],"sources":["../../../../src/components/navigation/Accordion/Accordion.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, type ComponentPropsWithoutRef } from 'react'\nimport { Accordion as AccordionPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ChevronDownIcon } from '#icons'\nimport styles from './Accordion.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type AccordionVariant = 'divided' | 'contained'\nexport type AccordionSize = 'sm' | 'md'\n\ninterface AccordionOwnProps {\n  /** `divided` (default): hairlines between items, no box. `contained`: a bordered surface. */\n  variant?: AccordionVariant\n  /** `sm` for inline notes (\"Why is this invoice overdue?\"); `md` for FAQs and sections. */\n  size?: AccordionSize\n}\n\nexport type AccordionProps = (\n  AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps\n) &\n  AccordionOwnProps\n\nconst SizeContext = createContext<AccordionSize>('md')\n\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { variant = 'divided', size = 'md', className, ...rest },\n  ref,\n) {\n  const props = rest.type === 'single' ? { collapsible: true, ...rest } : rest // single items can close by default\n  return (\n    <SizeContext.Provider value={size}>\n      <AccordionPrimitive.Root\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n      />\n    </SizeContext.Provider>\n  )\n})\n\nexport type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n\nconst AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...rest },\n  ref,\n) {\n  return <AccordionPrimitive.Item ref={ref} className={cx(styles.item, className)} {...rest} />\n})\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> {\n  /** Heading level wrapping the trigger, for the document outline. Default 3. */\n  level?: 2 | 3 | 4 | 5 | 6\n}\n\nconst AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ level = 3, className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    const Heading = headingTag(level)\n    return (\n      <AccordionPrimitive.Header asChild>\n        <Heading className={styles.header}>\n          <AccordionPrimitive.Trigger\n            ref={ref}\n            className={cx(styles.trigger, className)}\n            data-size={size}\n            {...rest}\n          >\n            <span className={styles.triggerLabel}>{children}</span>\n            <ChevronDownIcon className={styles.chevron} />\n          </AccordionPrimitive.Trigger>\n        </Heading>\n      </AccordionPrimitive.Header>\n    )\n  },\n)\n\nexport type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nconst AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  function AccordionContent({ className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    return (\n      <AccordionPrimitive.Content\n        ref={ref}\n        className={cx(styles.content, className)}\n        data-size={size}\n        {...rest}\n      >\n        <div className={styles.contentInner}>{children}</div>\n      </AccordionPrimitive.Content>\n    )\n  },\n)\n\n/**\n * Expandable sections with a turning chevron. Also Kiln's disclosure, for a single \"why?\" note.\n *\n * @remarks\n * `Accordion` stacks sections whose content expands under their heading. It's Radix Accordion\n * underneath, so triggers are buttons inside headings, and arrow keys move between them.\n *\n * @privateRemarks\n * Radix Accordion: expandable sections with a rotating chevron and a height animation.\n * Also the library's disclosure: use one `type=\"single\"` item for an inline \"why?\" note.\n * Single accordions are `collapsible` unless you pass `collapsible={false}`.\n *\n * <Accordion type=\"single\">\n *   <Accordion.Item value=\"scoring\">\n *     <Accordion.Trigger>How scoring works</Accordion.Trigger>\n *     <Accordion.Content>…</Accordion.Content>\n *   </Accordion.Item>\n * </Accordion>\n */\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n})\n"],"mappings":";;;;;;;;AAsBA,IAAMI,IAAcC,EAA6B,IAAI,GAE/CC,IAAgBC,EAA2C,SAC/D,EAAE,aAAU,WAAW,UAAO,MAAM,cAAW,GAAGC,KAClD,GACA;CACA,IAAMC,IAAQD,EAAK,SAAS,WAAW;EAAE,aAAa;EAAM,GAAGA;CAAK,IAAIA;CACxE,OACE,kBAACJ,EAAY,UAAb;EAAsB,OAAOM;EAC3B,UAAA,kBAACT,EAAmB,MAApB;GACO;GACL,WAAWW,EAAGV,EAAO,MAAMW,CAAS;GACpC,gBAAcC;GACd,aAAWJ;GACX,GAAID;EACL,CAAA;CACmB,CAAA;AAE1B,CAAC,GAIKM,IAAgBR,EAA+C,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAACP,EAAmB,MAApB;EAA8B;EAAK,WAAWW,EAAGV,EAAO,MAAMW,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC9F,CAAC,GASKQ,IAAmBT,EACvB,SAA0B,EAAE,WAAQ,GAAG,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAC1E,IAAME,IAAOO,EAAWb,CAAW,GAC7Bc,IAAUC,EAAWC,CAAK;CAChC,OACE,kBAACnB,EAAmB,QAApB;EAA2B,SAAA;EACzB,UAAA,kBAACiB,GAAD;GAAS,WAAWhB,EAAO;GACzB,UAAA,kBAACD,EAAmB,SAApB;IACO;IACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;IACvC,aAAWH;IACX,GAAIF;IAJN,UAAA,CAME,kBAAC,QAAD;KAAM,WAAWN,EAAO;KAAe;IAAe,CAAA,GACtD,kBAACmB,GAAD,EAAiB,WAAWnB,EAAO,QAAU,CAAA,CACnB;;EACrB,CAAA;CACgB,CAAA;AAE/B,CACF,GAIMoB,IAAmBf,EACvB,SAA0B,EAAE,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAC/D,IAAME,IAAOO,EAAWb,CAAW;CACnC,OACE,kBAACH,EAAmB,SAApB;EACO;EACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;EACvC,aAAWH;EACX,GAAIF;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAWN,EAAO;GAAe;EAAc,CAAA;CAC1B,CAAA;AAEhC,CACF,GAqBaF,IAAY,OAAO,OAAOM,GAAe;CACpD,MAAMS;CACN,SAASC;CACT,SAASM;AACX,CAAC"}
+{"version":3,"file":"Accordion.js","names":["Accordion","AccordionPrimitive","styles","Accordion_module_default","SizeContext","createContext","AccordionRoot","forwardRef","rest","props","size","Accordion","cx","className","variant","AccordionItem","AccordionTrigger","useContext","Heading","headingTag","level","trailing","ChevronDownIcon","AccordionContent","Accordion$1"],"sources":["../../../../src/components/navigation/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\nimport { Accordion as AccordionPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ChevronDownIcon } from '#icons'\nimport styles from './Accordion.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type AccordionVariant = 'divided' | 'contained'\nexport type AccordionSize = 'sm' | 'md'\n\ninterface AccordionOwnProps {\n  /** `divided` (default): hairlines between items, no box. `contained`: a bordered surface. */\n  variant?: AccordionVariant\n  /** `sm` for inline notes (\"Why is this invoice overdue?\"); `md` for FAQs and sections. */\n  size?: AccordionSize\n}\n\nexport type AccordionProps = (\n  AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps\n) &\n  AccordionOwnProps\n\nconst SizeContext = createContext<AccordionSize>('md')\n\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { variant = 'divided', size = 'md', className, ...rest },\n  ref,\n) {\n  const props = rest.type === 'single' ? { collapsible: true, ...rest } : rest // single items can close by default\n  return (\n    <SizeContext.Provider value={size}>\n      <AccordionPrimitive.Root\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n      />\n    </SizeContext.Provider>\n  )\n})\n\nexport type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n\nconst AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...rest },\n  ref,\n) {\n  return <AccordionPrimitive.Item ref={ref} className={cx(styles.item, className)} {...rest} />\n})\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> {\n  /** Heading level wrapping the trigger, for the document outline. Default 3. */\n  level?: 2 | 3 | 4 | 5 | 6\n  /**\n   * A figure or badge at the end of the trigger, just before the chevron, like a score beside\n   * a match. Keep it phrasing content (`Numeral`, `Badge`, `Text`): it's inside a button.\n   */\n  trailing?: ReactNode\n}\n\nconst AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ level = 3, trailing, className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    const Heading = headingTag(level)\n    return (\n      <AccordionPrimitive.Header asChild>\n        <Heading className={styles.header}>\n          <AccordionPrimitive.Trigger\n            ref={ref}\n            className={cx(styles.trigger, className)}\n            data-size={size}\n            data-trailing={trailing !== undefined || undefined}\n            {...rest}\n          >\n            <span className={styles.triggerLabel}>{children}</span>\n            {trailing !== undefined ? (\n              <span className={styles.triggerTrailing}>{trailing}</span>\n            ) : null}\n            <ChevronDownIcon className={styles.chevron} />\n          </AccordionPrimitive.Trigger>\n        </Heading>\n      </AccordionPrimitive.Header>\n    )\n  },\n)\n\nexport type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nconst AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  function AccordionContent({ className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    return (\n      <AccordionPrimitive.Content\n        ref={ref}\n        className={cx(styles.content, className)}\n        data-size={size}\n        {...rest}\n      >\n        <div className={styles.contentInner}>{children}</div>\n      </AccordionPrimitive.Content>\n    )\n  },\n)\n\n/**\n * Expandable sections with a turning chevron. Also Kiln's disclosure, for a single \"why?\" note.\n *\n * @remarks\n * `Accordion` stacks sections whose content expands under their heading. It's Radix Accordion\n * underneath, so triggers are buttons inside headings, and arrow keys move between them.\n *\n * @privateRemarks\n * Radix Accordion: expandable sections with a rotating chevron and a height animation.\n * Also the library's disclosure: use one `type=\"single\"` item for an inline \"why?\" note.\n * Single accordions are `collapsible` unless you pass `collapsible={false}`.\n *\n * <Accordion type=\"single\">\n *   <Accordion.Item value=\"scoring\">\n *     <Accordion.Trigger>How scoring works</Accordion.Trigger>\n *     <Accordion.Content>…</Accordion.Content>\n *   </Accordion.Item>\n * </Accordion>\n */\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n})\n"],"mappings":";;;;;;;;AA4BA,IAAMI,IAAcC,EAA6B,IAAI,GAE/CC,IAAgBC,EAA2C,SAC/D,EAAE,aAAU,WAAW,UAAO,MAAM,cAAW,GAAGC,KAClD,GACA;CACA,IAAMC,IAAQD,EAAK,SAAS,WAAW;EAAE,aAAa;EAAM,GAAGA;CAAK,IAAIA;CACxE,OACE,kBAACJ,EAAY,UAAb;EAAsB,OAAOM;EAC3B,UAAA,kBAACT,EAAmB,MAApB;GACO;GACL,WAAWW,EAAGV,EAAO,MAAMW,CAAS;GACpC,gBAAcC;GACd,aAAWJ;GACX,GAAID;EACL,CAAA;CACmB,CAAA;AAE1B,CAAC,GAIKM,IAAgBR,EAA+C,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAACP,EAAmB,MAApB;EAA8B;EAAK,WAAWW,EAAGV,EAAO,MAAMW,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC9F,CAAC,GAcKQ,IAAmBT,EACvB,SAA0B,EAAE,WAAQ,GAAG,aAAU,cAAW,aAAU,GAAGC,KAAQ,GAAK;CACpF,IAAME,IAAOO,EAAWb,CAAW,GAC7Bc,IAAUC,EAAWC,CAAK;CAChC,OACE,kBAACnB,EAAmB,QAApB;EAA2B,SAAA;EACzB,UAAA,kBAACiB,GAAD;GAAS,WAAWhB,EAAO;GACzB,UAAA,kBAACD,EAAmB,SAApB;IACO;IACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;IACvC,aAAWH;IACX,iBAAeW,MAAa,KAAA,KAAa,KAAA;IACzC,GAAIb;IALN,UAAA;KAOE,kBAAC,QAAD;MAAM,WAAWN,EAAO;MAAe;KAAe,CAAA;KACrDmB,MAAa,KAAA,IAEV,OADF,kBAAC,QAAD;MAAM,WAAWnB,EAAO;MAAkB,UAAAmB;KAAe,CAAA;KAE3D,kBAACC,GAAD,EAAiB,WAAWpB,EAAO,QAAU,CAAA;IACnB;;EACrB,CAAA;CACgB,CAAA;AAE/B,CACF,GAIMqB,IAAmBhB,EACvB,SAA0B,EAAE,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAC/D,IAAME,IAAOO,EAAWb,CAAW;CACnC,OACE,kBAACH,EAAmB,SAApB;EACO;EACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;EACvC,aAAWH;EACX,GAAIF;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAWN,EAAO;GAAe;EAAc,CAAA;CAC1B,CAAA;AAEhC,CACF,GAqBaF,IAAY,OAAO,OAAOM,GAAe;CACpD,MAAMS;CACN,SAASC;CACT,SAASO;AACX,CAAC"}

package/dist/components/navigation/Accordion/Accordion.module.js

@@ -1,17 +1,18 @@
 //#region src/components/navigation/Accordion/Accordion.module.css
-var e = "kiln-Accordion__root", t = "kiln-Accordion__item", n = "kiln-Accordion__header", r = "kiln-Accordion__trigger", i = "kiln-Accordion__chevron", a = "kiln-Accordion__triggerLabel", o = "kiln-Accordion__content", s = "kiln-Accordion__open", c = "kiln-Accordion__close", l = "kiln-Accordion__contentInner", u = {
+var e = "kiln-Accordion__root", t = "kiln-Accordion__item", n = "kiln-Accordion__header", r = "kiln-Accordion__trigger", i = "kiln-Accordion__chevron", a = "kiln-Accordion__triggerLabel", o = "kiln-Accordion__triggerTrailing", s = "kiln-Accordion__content", c = "kiln-Accordion__open", l = "kiln-Accordion__close", u = "kiln-Accordion__contentInner", d = {
 	root: e,
 	item: t,
 	header: n,
 	trigger: r,
 	chevron: i,
 	triggerLabel: a,
-	content: o,
-	open: s,
-	close: c,
-	contentInner: l
+	triggerTrailing: o,
+	content: s,
+	open: c,
+	close: l,
+	contentInner: u
 };
 //#endregion
-export { i as chevron, c as close, o as content, l as contentInner, u as default, n as header, t as item, s as open, e as root, r as trigger, a as triggerLabel };
+export { i as chevron, l as close, s as content, u as contentInner, d as default, n as header, t as item, c as open, e as root, r as trigger, a as triggerLabel, o as triggerTrailing };
 
 //# sourceMappingURL=Accordion.module.js.map

package/dist/components/navigation/Accordion/Accordion.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.module.js","names":["root","item","header","trigger","chevron","triggerLabel","content","open","close","contentInner","Accordion_module_default"],"sources":["../../../../src/components/navigation/Accordion/Accordion.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --accordion-radius   contained variant, default var(--radius-surface)\n *   --accordion-bg       contained variant, default var(--color-surface)\n *   --accordion-shadow   contained variant, default var(--shadow-surface)\n */\n.root {\n  --_px: 0px;\n\n  min-inline-size: 0;\n}\n\n.root[data-variant='contained'] {\n  --_px: var(--space-4);\n\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--accordion-radius, var(--radius-surface));\n  background: var(--accordion-bg, var(--color-surface));\n  box-shadow: var(--accordion-shadow, var(--shadow-surface));\n}\n\n.item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.header {\n  all: unset;\n  display: flex;\n}\n\n.trigger {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-block-size: max(2.75rem, var(--control-lg));\n  padding-block: var(--space-3);\n  padding-inline: var(--_px);\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  text-align: start;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n.trigger[data-size='sm'] {\n  /* Small = an inline note: the chevron follows the label instead of hugging the far edge. */\n  justify-content: flex-start;\n  gap: var(--space-2);\n  min-block-size: max(2.75rem, var(--control-sm));\n  padding-block: var(--space-2);\n  font-size: var(--text-sm);\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:disabled) .chevron {\n    color: var(--color-ink);\n  }\n  .root[data-variant='contained'] .trigger:hover:not(:disabled) {\n    background: var(--color-surface-sunken);\n  }\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n  border-radius: var(--radius-field);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.triggerLabel {\n  min-inline-size: 0;\n}\n\n.chevron {\n  flex: none;\n  font-size: 1.25rem;\n  color: var(--color-ink-subtle);\n  transition:\n    rotate var(--dur-2) var(--ease-spring),\n    color var(--dur-1) var(--ease-out);\n}\n.trigger[data-size='sm'] .chevron {\n  font-size: 1rem;\n}\n.trigger[data-state='open'] .chevron {\n  rotate: 180deg;\n  color: var(--color-ink);\n}\n\n/* ── Content: height animates to Radix's measured value ─────────────────── */\n.content {\n  overflow: hidden;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n.content[data-state='open'] {\n  animation: open var(--dur-3) var(--ease-out);\n}\n.content[data-state='closed'] {\n  animation: close var(--dur-2) var(--ease-out);\n}\n.contentInner {\n  padding-block-end: var(--space-4);\n  padding-inline: var(--_px);\n  padding-inline-end: calc(var(--_px) + 1.25rem + var(--space-4));\n}\n.content[data-size='sm'] .contentInner {\n  padding-block-end: var(--space-3);\n  padding-inline-end: var(--_px);\n}\n\n@keyframes open {\n  from {\n    block-size: 0;\n  }\n  to {\n    block-size: var(--radix-accordion-content-height);\n  }\n}\n@keyframes close {\n  from {\n    block-size: var(--radix-accordion-content-height);\n  }\n  to {\n    block-size: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .content[data-state='open'],\n  .content[data-state='closed'] {\n    animation: none;\n  }\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Accordion.module.js","names":["root","item","header","trigger","chevron","triggerLabel","triggerTrailing","content","open","close","contentInner","Accordion_module_default"],"sources":["../../../../src/components/navigation/Accordion/Accordion.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --accordion-radius   contained variant, default var(--radius-surface)\n *   --accordion-bg       contained variant, default var(--color-surface)\n *   --accordion-shadow   contained variant, default var(--shadow-surface)\n */\n.root {\n  --_px: 0px;\n\n  min-inline-size: 0;\n}\n\n.root[data-variant='contained'] {\n  --_px: var(--space-4);\n\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--accordion-radius, var(--radius-surface));\n  background: var(--accordion-bg, var(--color-surface));\n  box-shadow: var(--accordion-shadow, var(--shadow-surface));\n}\n\n.item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.header {\n  all: unset;\n  display: flex;\n}\n\n.trigger {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-block-size: max(2.75rem, var(--control-lg));\n  padding-block: var(--space-3);\n  padding-inline: var(--_px);\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  text-align: start;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n.trigger[data-size='sm'] {\n  /* Small = an inline note: the chevron follows the label instead of hugging the far edge. */\n  justify-content: flex-start;\n  gap: var(--space-2);\n  min-block-size: max(2.75rem, var(--control-sm));\n  padding-block: var(--space-2);\n  font-size: var(--text-sm);\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:disabled) .chevron {\n    color: var(--color-ink);\n  }\n  .root[data-variant='contained'] .trigger:hover:not(:disabled) {\n    background: var(--color-surface-sunken);\n  }\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n  border-radius: var(--radius-field);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n/* The label fills the trigger, so its content can spread to the chevron or `trailing`. */\n.triggerLabel {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n.trigger[data-size='sm'] .triggerLabel {\n  flex: 0 1 auto;\n}\n/* With a trailing figure, even a small trigger's label fills, so the figures in a list line up. */\n.trigger[data-size='sm'][data-trailing] .triggerLabel {\n  flex: 1 1 auto;\n}\n.triggerTrailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.chevron {\n  flex: none;\n  font-size: 1.25rem;\n  color: var(--color-ink-subtle);\n  transition:\n    rotate var(--dur-2) var(--ease-spring),\n    color var(--dur-1) var(--ease-out);\n}\n.trigger[data-size='sm'] .chevron {\n  font-size: 1rem;\n}\n.trigger[data-state='open'] .chevron {\n  rotate: 180deg;\n  color: var(--color-ink);\n}\n\n/* ── Content: height animates to Radix's measured value ─────────────────── */\n.content {\n  overflow: hidden;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n.content[data-state='open'] {\n  animation: open var(--dur-3) var(--ease-out);\n}\n.content[data-state='closed'] {\n  animation: close var(--dur-2) var(--ease-out);\n}\n.contentInner {\n  padding-block-end: var(--space-4);\n  padding-inline: var(--_px);\n  padding-inline-end: calc(var(--_px) + 1.25rem + var(--space-4));\n}\n.content[data-size='sm'] .contentInner {\n  padding-block-end: var(--space-3);\n  padding-inline-end: var(--_px);\n}\n\n@keyframes open {\n  from {\n    block-size: 0;\n  }\n  to {\n    block-size: var(--radix-accordion-content-height);\n  }\n}\n@keyframes close {\n  from {\n    block-size: var(--radix-accordion-content-height);\n  }\n  to {\n    block-size: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .content[data-state='open'],\n  .content[data-state='closed'] {\n    animation: none;\n  }\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/navigation/NavLinks/NavLinks.d.ts

@@ -13,7 +13,10 @@ export interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityPr
      * vertical (vertical items are already a full control tall).
      */
     gap?: Space;
-    /** `md` (default) for page headers; `sm` for dense toolbars, footers and sub-navs. */
+    /**
+     * `md` (default), body-size labels for page headers; `sm`, one step smaller, for sidebars,
+     * dense toolbars, footers and sub-navs. Neither drops to the caption steps.
+     */
     size?: NavLinksSize;
 }
 export interface NavLinksItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, VisibilityProps {