@godxjp/ui 19.1.0 → 19.3.1

package/dist/tokens/components/legal-document.css

@@ -1,71 +1,46 @@
-/* LegalDocumentShell component tokens — the long-form legal/policy document surface
- * (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky
- * table-of-contents rail.
- *
- * Rule #45 — every service-tunable constant is a knob: the readable measure, the rail
- * width/offset, the section rhythm and the body leading are exactly the values a service
- * theme wants to re-tune to match its design grid, so NONE of them are hard-coded in
- * `src/styles/layout.css`.
- *
- * Rule #44 — chrome is a token, default QUIET: every divider (`*-border`) defaults to
- * `none`. A service opts IN via theme, e.g.
- *   --legal-document-toc-border: 1px solid hsl(var(--border));
- *
- * Colour knobs whose default is a ROLE token are declared `initial` here with the role
- * default at the CALL SITE (`var(--knob, var(--role))`) — see docs/TOKENS.md ·
- * "Role-mirror knobs MUST be `initial`" — so a scoped `[data-tenant]` / `.dark`
- * override of the role still reaches them.
- */
+
 
 :root {
-  /* ── Geometry ─────────────────────────────────────────────────────────────── */
-  /* Readable document measure. Caps the header, the section column and the footer so
-   * a 1440px viewport still reads at ~75-90 characters per line. */
-  /* Section anchor ring needs a gap so the mark does not touch the heading
-   * (outline form — styles/focus-ring.css). */
+
   --legal-document-section-focus-ring-offset: var(--space-1);
 
   --legal-document-measure-max-width: 46rem;
-  /* Rail ↔ document column gutter (two-column mode only). */
+
   --legal-document-column-gap: var(--space-10);
-  /* Sticky table-of-contents rail width (two-column mode only). */
+
   --legal-document-toc-width: 15rem;
-  /* Distance the pinned rail keeps from the top of the scrollport. */
+
   --legal-document-toc-inset-block-start: var(--space-6);
-  /* Cap for a long contents list so the rail never outgrows the viewport. */
+
   --legal-document-toc-max-height: calc(100dvh - var(--space-12));
   --legal-document-toc-gap: var(--space-1);
   --legal-document-toc-item-padding: var(--space-1) var(--space-2);
   --legal-document-toc-item-radius: var(--radius);
   --legal-document-toc-title-font-size: var(--font-size-2xs);
   --legal-document-toc-font-size: var(--font-size-xs);
-  /* Leading marker on the active contents entry — a non-colour affordance so the
-   * active state is never colour-only (WCAG 1.4.1). */
+
   --legal-document-toc-marker-width: var(--stroke-md);
-  /* Gap between the `documentNavigation` slot and the contents list inside the rail. */
+
   --legal-document-nav-gap: var(--space-4);
   --legal-document-header-gap: var(--space-2);
   --legal-document-meta-gap: var(--space-2);
   --legal-document-meta-font-size: var(--font-size-xs);
   --legal-document-section-gap: var(--space-10);
   --legal-document-section-title-gap: var(--space-3);
-  /* Long-form leading — legal prose reads looser than UI text. */
+
   --legal-document-body-line-height: 1.8;
-  /* `scroll-margin-block-start` on every section: the offset a hash jump / anchor
-   * activation leaves above the heading so it is not hidden under sticky chrome. */
+
   --legal-document-scroll-offset: var(--space-6);
   --legal-document-footer-gap: var(--space-4);
 
-  /* ── Chrome — quiet by default (rule #44) ─────────────────────────────────── */
   --legal-document-toc-border: none;
   --legal-document-header-border: none;
   --legal-document-footer-border: none;
 
-  /* ── Role-mirror knobs — `initial` here, role default at the call site ─────── */
-  --legal-document-meta-foreground: initial; /* default = hsl(var(--muted-foreground)) */
-  --legal-document-summary-foreground: initial; /* default = hsl(var(--muted-foreground)) */
-  --legal-document-toc-foreground: initial; /* default = hsl(var(--muted-foreground)) */
-  --legal-document-toc-active-foreground: initial; /* default = hsl(var(--foreground)) */
-  --legal-document-toc-active-background: initial; /* default = hsl(var(--accent)) */
-  --legal-document-toc-marker-color: initial; /* default = hsl(var(--primary)) */
+  --legal-document-meta-foreground: initial;
+  --legal-document-summary-foreground: initial;
+  --legal-document-toc-foreground: initial;
+  --legal-document-toc-active-foreground: initial;
+  --legal-document-toc-active-background: initial;
+  --legal-document-toc-marker-color: initial;
 }

package/dist/tokens/components/list-row.css

@@ -1,52 +1,27 @@
-/* ListRow component tokens — a single-line entity row for short lists inside a Card
- * (sessions / API tokens / linked accounts / passkeys / notifications …). Sits in a flush
- * CardContent; rows separate with a quiet divider (#44 — chrome defaults to the calm
- * semantic border). */
+
 :root {
   --list-row-padding-y: var(--space-3);
   --list-row-padding-x: var(--space-4);
   --list-row-gap: var(--space-3);
-  /* Row divider — `initial` so the --border default re-resolves at the call site under a scoped
-   * theme (a :root binding to a role var freezes at :root). Default = 1px solid hsl(var(--border)). */
+
   --list-row-border: initial;
-  /* Inline size the content column keeps before the trailing actions wrap onto their own line
-   * (#45 — a service retunes the stack threshold to its grid). Clamped with min(…, 100%) at the
-   * call site, so a container narrower than the knob can never force page-root overflow (#224). */
+
   --list-row-body-min-width: 12rem;
-  /* Gap BETWEEN trailing actions — they also wrap among themselves at narrow widths (#224). */
+
   --list-row-trailing-gap: var(--space-2);
-  /* ── Compact inline-actions geometry (`density="compact"`, #246) ──────────────────────────
-   * The canonical invitation / history row: a 36px leading avatar, a shrinkable title +
-   * description body and one or two small trailing Buttons, all on ONE line inside the canonical
-   * 358px card (326px content after the row's own inline inset) at a 390px viewport. These knobs
-   * only LOWER the geometry — the #224 wrap contract (row + trailing cluster wrap, body clamped
-   * with min(…, 100%)) is untouched, so a cluster that genuinely cannot fit still wraps instead of
-   * widening the page root.
-   * Declared `initial` so the spacing defaults re-resolve at the CALL SITE — --space-2 is
-   * density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would
-   * freeze compact rows at the :root density (docs/TOKENS.md — the :root freeze rule).
-   * Defaults = var(--space-2) block padding · var(--list-row-padding-x) inline padding ·
-   * var(--space-2) gap. */
+
   --list-row-compact-padding-y: initial;
-  /* Inline inset defaults to the default row axis so compact and default rows in the same Card keep
-   * one optical axis; a service retunes it to its own grid (#45). */
+
   --list-row-compact-padding-x: initial;
   --list-row-compact-gap: initial;
-  /* Compact body threshold — small enough that avatar + body + two compact Buttons fit the
-   * canonical column (36 + 8 + 96 + 8 + 146 = 294 ≤ 326), and still a readable measure. */
+
   --list-row-compact-body-min-width: 6rem;
-  /* Read (default) row surface — `initial`, documented default = transparent, i.e. the Card
-   * surface shows through untouched (#44 — chrome defaults to the quietest state). */
+
   --list-row-read-background: initial;
-  /* Unread emphasis surface (`unread` rows) — `initial` so the --muted default re-resolves at the
-   * call site under a scoped theme. Documented default = hsl(var(--muted)), the same quiet
-   * emphasis role the table header uses; it keeps the xs muted description line at WCAG AA
-   * (4.63:1 light / 5.47:1 dark), which hsl(var(--accent)) would not (4.23:1 light). */
+
   --list-row-unread-background: initial;
-  /* Unread indicator dot fill — `initial` so the --primary default re-resolves at the call site
-   * under a scoped theme. Documented default = hsl(var(--primary)). */
+
   --list-row-indicator-color: initial;
-  /* Diameter of the read/unread indicator dot; the gutter is reserved on read rows too so the
-   * titles of a mixed list stay on one optical axis. */
+
   --list-row-indicator-size: var(--space-2);
 }

package/dist/tokens/components/logo.css

@@ -1,7 +1,4 @@
-/* Logo component tokens — the product brand-mark box (a glyph on the primary fill), used in the
- * app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a
- * service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary
- * role tokens directly, so a re-themed --primary re-tints the mark automatically. */
+
 :root {
   --logo-radius: var(--radius);
   --logo-size-xs: 1.25rem;
@@ -12,71 +9,19 @@
   --logo-font-size-sm: var(--font-size-xs);
   --logo-font-size-md: var(--font-size-sm);
   --logo-font-size-lg: var(--font-size-base);
-  /* Semantic identity fill reads the --brand IDENTITY role: independent of --primary (a re-themed
-   * action colour never recolours the mark) AND of --success (the 若竹 STATUS green stays on
-   * badges/progress/"saved" text — the mark used to borrow it and rendered ΔE76 ≈ 17.5 off the
-   * canonical emerald, gh#250). Services retune the role once for every Logo.
-   * ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
-   * (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --brand actually
-   * reaches the mark instead of freezing at the :root value (docs/TOKENS.md ·
-   * "Role-mirror knobs MUST be `initial`"). Documented defaults:
-   *   --logo-success-background = hsl(var(--brand))
-   *   --logo-success-foreground = hsl(var(--logo-identity-foreground))
-   *   --logo-godx-color         = hsl(var(--brand)) */
+
   --logo-success-background: initial;
   --logo-success-foreground: initial;
   --logo-godx-color: initial;
 
-  /* Identity-fill INK — the ink `mark="glyph"` sets its (caller-supplied) TEXT in when it sits on
-   * the --brand identity fill. This is deliberately NOT --brand-foreground.
-   *
-   * --brand-foreground is the identity artwork's KNOCKOUT colour, not an ink: it tracks
-   * --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background)
-   * because `<Logo mark="godx">` punches its inner bar as an evenodd HOLE and the email mark has to
-   * paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11
-   * (3:1, non-text) — and at 3.67:1 on the emerald it does.
-   *
-   * The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px
-   * bold is NOT "large text" — that needs 18.66px bold / 24px), and the knockout white measured
-   * 3.67:1 → a genuine AA failure. This ink is 48 9% 9% (#191815), the same near-black spine the
-   * DARK theme already inked the glyph with, so it is theme-INVARIANT: dark renders byte-identically
-   * (6.89:1, unchanged) and light rises 3.67 → 4.74:1. A service that re-themes --brand to a dark
-   * fill overrides --logo-success-foreground (the public knob) to re-invert the ink.
-   *
-   * NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to
-   * freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it. */
   --logo-identity-foreground: 48 9% 9%;
 
-  /* ── Identity-mark box (`<Logo mark="godx" />`) ──────────────────────────────────────────────
-   * The `size` prop drives the identity mark exactly like it drives the boxed glyph — a public
-   * prop that renders identically at every tier is a silent no-op, and the godx LOCKUP already
-   * scaled its wordmark per tier, so a fixed mark broke the mark↔wordmark proportion at
-   * `size="lg"` (gh#163 follow-up). The godx artwork is a horizontal capsule inside a square
-   * viewBox, so it carries less optical weight than the fully-filled glyph box: each tier sits
-   * +0.25rem above its --logo-size-* sibling. `md` is 2rem — the historical fixed value — so
-   * every existing default-size identity surface renders byte-identically.
-   *
-   * --logo-godx-size is the PIN: declared `initial` (guaranteed-invalid) here with the per-tier
-   * default at the CALL SITE (logo-layout.css), so it is inert by default and a service that
-   * sets it once freezes the mark at that box on EVERY tier — the same call-site pattern the
-   * role-mirror colour knobs use (docs/TOKENS.md). Retune a single tier via --logo-godx-size-*.
-   * Documented default: --logo-godx-size = unset (tiers apply). */
   --logo-godx-size-xs: 1.5rem;
   --logo-godx-size-sm: 1.75rem;
   --logo-godx-size-md: 2rem;
   --logo-godx-size-lg: 2.5rem;
   --logo-godx-size: initial;
 
-  /* ── Wordmark / lockup (`<Logo wordmark="GoDX" />`) ─────────────────────────────────────────
-   * The readable product name set beside the mark. The package ships NO wordmark artwork: the
-   * wordmark is typeset in the design-system display face, so a service retunes face, weight,
-   * tracking, size and the mark↔wordmark gap here instead of writing page CSS. The colour is a
-   * role-mirror knob whose default is the IDENTITY role --brand (never --primary, never the
-   * --success status green): the GoDX/`success` lockup is canonical emerald out of the box, and
-   * every other lockup reads --foreground.
-   * Documented defaults: --logo-wordmark-font-family = var(--font-family-display);
-   * --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--brand)) on the
-   * godx / tone="success" lockup. */
   --logo-wordmark-gap: var(--space-2);
   --logo-wordmark-font-size-xs: var(--font-size-xs);
   --logo-wordmark-font-size-sm: var(--font-size-sm);

package/dist/tokens/components/navigation.css

@@ -1,24 +1,14 @@
-/* Navigation primitive tokens: pagination, filters, compact pickers. */
+
 
 :root {
   --pagination-gap: var(--space-inline-sm);
   --pagination-item-gap: var(--space-inline-xs);
-  /* Size-changer trigger MIN width (gh#286) - the trigger sizes to its content (w-max) so
-   * localized labels (ja 100/ページ) never clip; this token only keeps short labels from
-   * collapsing below the control rhythm. */
+
   --pagination-size-width: 5.5rem;
-  /* Inline padding on a page button. The button keeps min-width: var(--control-height), so this
-   * only takes effect once a number outgrows that box. Deliberately --space-1 rather than
-   * --space-2: at the wider value a two-digit label (14.8px of text + 2 * 8px + 2px border) came
-   * to 32.8px and pushed the common 1–2 digit buttons off square by 0.8px. */
+
   --pagination-page-padding-x: var(--space-1);
   --pagination-total-font-size: var(--font-size-sm);
-  /* Chevron glyph inside the `simple` form's Prev/Next Buttons (#319). Those are size="sm"
-   * Buttons, so `.ui-button--sm svg` would draw them at --control-icon-size-sm; the component
-   * pinned them larger with a literal `size-4` class instead, because in simple mode the chevron
-   * IS the control — there is no label beside it to carry the affordance. The knob keeps that
-   * deliberate override themeable (rule #45) and tracks the default control-icon tier, so it now
-   * follows density like every other control glyph instead of staying a flat 1rem. */
+
   --pagination-icon-size: var(--control-icon-size);
   --filter-bar-gap: var(--space-3);
   --filter-bar-padding-y: var(--space-2);
@@ -29,20 +19,11 @@
   --steps-inline-item-gap: var(--space-1);
   --steps-inline-font-size: var(--font-size-xs);
   --steps-inline-separator-size: var(--control-icon-size-sm);
-  /* Inline-step emphasis (gh#12). The step number's weight and tint are separate knobs so a
-   * service can express progression the canonical way — an accent TINT at normal weight — instead
-   * of the original bold. --steps-inline-index-color / --steps-inline-separator-color are
-   * role-mirror knobs (docs/TOKENS.md): `initial` so their defaults (the inherited step colour and
-   * the --muted-foreground role) resolve at the CALL SITE and a scoped [data-tenant]/.dark
-   * override still reaches them. Defaults reproduce today's row byte for byte. */
+
   --steps-inline-index-font-weight: var(--font-weight-bold);
-  --steps-inline-index-color: initial; /* default = currentColor at the call site */
-  --steps-inline-separator-color: initial; /* default = hsl(var(--muted-foreground)) */
+  --steps-inline-index-color: initial;
+  --steps-inline-separator-color: initial;
 
-  /* AppSettingPicker `compact` (gh#217) — the small, content-hugging labelled trigger used in an
-   * auth/legal footer, where the square icon-only default reads as a stray button and the full
-   * labelled trigger is too tall. Box height comes from the official --control-height-sm tier (never
-   * a literal / ad-hoc calc), and every other knob is themeable (rule #45). */
   --app-setting-picker-compact-control-height: var(--control-height-sm);
   --app-setting-picker-compact-padding-x: var(--space-2);
   --app-setting-picker-compact-gap: var(--space-1);
@@ -52,104 +33,51 @@
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
-  /* Tabs `line` active indicator (gh#248) — the ONLY selected-state decoration the line variant
-   * paints. The surrounding active ring belongs to the default/card lists, so `:focus-visible`
-   * keeps its own distinct keyboard ring here (WCAG 2.4.7). `--tabs-indicator-background` is a
-   * role-mirror knob: `initial` so hsl(var(--primary)) re-resolves at the CALL SITE under a scoped
-   * [data-tenant]/.dark theme (a :root binding to a role var would freeze at :root).
-   * Default = hsl(var(--primary)) · 2px thick · flush with the trigger edge (offset 0 = quietest,
-   * rule #44); a service raises the offset to park the bar on a thicker strip hairline. */
   --tabs-indicator-background: initial;
   --tabs-indicator-size: 2px;
   --tabs-indicator-offset: 0px;
 
-  /* TABS BOX GEOMETRY (#319) — the strip↔panel gap and the whole `line` trigger box were Tailwind
-   * scale literals on tabs.tsx, so a service could only retune the tab rhythm by forking the
-   * component (rule #45).
-   * Every default below is a RAW rem/px, deliberately NOT a --space-* step: the classes they
-   * replace (`gap-2`, `p-0`, `rounded-none`, `px-4`, `py-2`) read Tailwind's own --spacing grid,
-   * which this repo does NOT density-scale, so a --space-* default would silently resize the tabs
-   * under a compact/comfortable density. A service that WANTS a knob to follow density simply
-   * points it at var(--space-2) itself. */
-
-  /* Gap between the tab strip and the panel below it. */
   --tabs-root-gap: 0.5rem;
-  /* Inset of the `line` strip. The default/pill strip keeps its own padding box; the line strip is
-   * a flat underlined rail, so its default is the quietest value — none (rule #44). Raise it to
-   * give the rail breathing room above its hairline. */
+
   --tabs-list-line-space-inset: 0px;
-  /* `line` trigger box. Square corners because the selected state is the token-owned ::after bar,
-   * never a pill; the hit box is wider/taller than the pill trigger so the underline spans a real
-   * column of the rail. */
+
   --tabs-trigger-line-radius: 0px;
   --tabs-trigger-line-padding-x: 1rem;
   --tabs-trigger-line-padding-y: 0.5rem;
 
-  /* Menu item hover/highlight tint — `initial` so the --accent default re-resolves at the call site
-   * under a scoped theme (a :root binding to a role var freezes at :root).
-   * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */
   --menubar-item-hover-background: initial;
   --menubar-item-hover-foreground: initial;
 
-  /* Sticky offset for the pinned filter strip (Toolbar `sticky`, #197). Default 0 (chrome,
-   * rule #44); raise it so the strip parks below a fixed topbar. */
   --filter-bar-sticky-offset: 0px;
-  /* Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial`
-   * so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme. */
+
   --filter-bar-sticky-background: initial;
-  /* Scrollbar gutter reserved under a `overflow="scroll"` filter strip (#216) so the inline
-   * scrollbar never overlaps the controls. Rule #45 — a service theme retunes it to its grid
-   * (0 on an overlay-scrollbar platform). */
+
   --filter-bar-scroll-padding-y: var(--space-1);
 
-  /* FilterBar typed model (gh#258) — token-owned geometry so every list page gets the SAME
-   * search width, filter width, chip rhythm and section stacking without page-local CSS.
-   * All are rule-#45 knobs: a service theme retunes them once, props/className override per
-   * instance. Below 640px the strip stacks (search/filters full-width); the widths apply from
-   * the 640px breakpoint up, always clamped by min(100%, …) so a narrow container never
-   * overflows at 390px with long JA/EN/VI labels. */
   --filter-bar-search-width: 20rem;
   --filter-bar-filter-width: var(--filter-picker-width-md);
   --filter-bar-chip-gap: var(--space-2);
   --filter-bar-section-gap: var(--space-2);
 
-  /* MENU SURFACES — one row rhythm shared by ContextMenu, Menubar and DropdownMenu. All three are
-   * the same Radix popup surface; the row height was a literal `2rem` in the CSS and DropdownMenu
-   * had not been converted at all, so it carried the whole box as Tailwind literals on the
-   * component (#319). A service tunes the menu rhythm once here instead of three times. */
   --menu-item-height: var(--band-height-md);
   --menu-item-radius: var(--radius-sm);
   --menu-item-space-inline: var(--space-2);
   --menu-item-space-gap: var(--space-2);
   --menu-item-font-size: var(--font-size-base);
-  /* Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so
-   * labels stay aligned with their checked siblings. */
+
   --menu-item-inset-space-inline-start: var(--space-8);
   --menu-indicator-size: 0.875rem;
   --menu-indicator-inset-inline-start: var(--space-2);
   --menu-icon-size: var(--icon-size-md);
   --menu-content-space-inset: var(--space-1);
   --menu-content-min-width: 10rem;
-  /* DropdownMenu is anchored to a small trigger, so it opens narrower than a context menu. */
+
   --dropdown-content-min-width: 8rem;
   --menu-separator-space-block: var(--space-1);
   --menu-separator-space-inline: calc(var(--space-1) * -1);
 
-  /* NAVIGATION MENU — the disclosure chevron on a top-level trigger. It was a bare `0.9rem` in
-   * navigation-layout.css: no token, so unreachable from an app (gh#326), and 14.4px, so off the
-   * icon scale AND off the pixel grid. A stroked chevron drawn into a 14.4px box lands its path
-   * on half pixels at 1x, which is a rendering defect rather than a rounding preference, so this
-   * SNAPS to the nearest step — --icon-size-sm, 14px, −0.4px. The nearest step upward is 16px
-   * (+1.6px) and would also fight the `opacity: 0.7` that makes this chevron deliberately quiet.
-   * `sm` rather than `md` is the same call the other quiet chevrons in the system already made
-   * (--month-picker-separator-icon-size, --steps-inline-separator-size). NOT
-   * --scaling-multiplied: the literal it replaces did not track density. */
   --navigation-menu-trigger-icon-size: var(--icon-size-sm);
 
-  /* STEPS — the full (non-inline) variant. `--steps-inline-*` already covers the compact inline
-   * form; the marker, connector and text rhythm of the main variant were still literal on the
-   * component (#319), so a service could not resize the dot, retighten the vertical run, or move
-   * the horizontal connector to match its own grid. */
   --steps-dot-size: 0.625rem;
   --steps-dot-process-ring-width: var(--stroke-xl);
   --steps-marker-border-width: var(--stroke-md);
@@ -159,21 +87,16 @@
   --steps-title-font-size: var(--font-size-sm);
   --steps-title-font-size-compact: var(--font-size-xs);
   --steps-subtitle-font-size: var(--font-size-xs);
-  /* Vertical run: gap between marker and text, and the drop to the next step. */
+
   --steps-vertical-space-gap: var(--space-3);
   --steps-vertical-space-block-end: var(--space-8);
   --steps-vertical-text-space-block-start: var(--space-1);
-  /* Horizontal run: the text sits under the marker, and the connector spans the gap between
-   * two markers — inset by the marker radius on each side so it never runs under a marker. */
+
   --steps-horizontal-text-space-block-start: var(--space-2);
   --steps-horizontal-text-space-inline: var(--space-2);
   --steps-connector-inset: 1.25rem;
   --steps-connector-space-block-start: var(--space-4);
 
-  /* APP SETTING PICKER — per-kind trigger widths (#319). Each picker is sized to the longest
-   * value it can show: a timezone name is far wider than a theme name. These were literal
-   * `sm:w-*` steps in a lookup table, so a service whose locale renders longer labels (a German
-   * timezone list, a Japanese density label) could not widen just the one that overflows. */
   --app-setting-picker-locale-width: 10rem;
   --app-setting-picker-timezone-width: 14rem;
   --app-setting-picker-date-format-width: 11rem;
@@ -182,8 +105,7 @@
   --app-setting-picker-brand-width: 11rem;
   --app-setting-picker-density-width: 10rem;
   --app-setting-picker-font-size-width: 9rem;
-  /* Below this the trigger hugs its content instead of taking the per-kind width, so a picker
-   * dropped into a narrow topbar never stretches the bar (gh#165). */
+
   --app-setting-picker-width-breakpoint: 40rem;
   --app-setting-picker-icon-size: var(--icon-size-md);
   --app-setting-picker-icon-rest-alpha: 0.7;

package/dist/tokens/components/scroll-area.css

@@ -1,21 +1,5 @@
-/* SCROLL AREA — the bottom-anchoring contract (gh#311).
- *
- * The rail geometry (--scroll-area-bar-size / --scroll-area-bar-padding / --scroll-area-thumb-radius)
- * lives with the other data-display knobs in ./data-display.css, because it is styled from
- * styles/data-display-layout.css. What lives HERE is the one constant that is read by JavaScript
- * rather than by CSS, so it needs no layout rule to hang off.
- */
+
 :root {
-  /* How close to the bottom edge the reader still counts as "following the stream" for
-   * `<ScrollArea anchor="bottom">`. Inside this band new content keeps the viewport pinned to the
-   * newest item; one pixel beyond it the reader is reading history and anchoring NEVER moves them
-   * again until they come back (WCAG 3.2.5 — no change of context on request of the machine).
-   *
-   * It is a rule #45 knob because the right distance is a function of the row height a service
-   * renders: one line of a dense audit log is ~20px, a chat bubble with an avatar is ~64px, and
-   * "one row from the bottom" is what the reader actually means. Expressed in rem on purpose — it
-   * then tracks the user's font size, so the band is still one row at 200% zoom (WCAG 1.4.4)
-   * instead of collapsing to a third of a row. The `anchorOffset` prop overrides it per instance;
-   * px/rem/em are all accepted. */
+
   --scroll-area-anchor-offset: 3rem;
 }

package/dist/tokens/components/separator.css

@@ -1,42 +1,20 @@
-/* Separator component tokens (gh#308) — the tokenized rule AND the LABELLED rule that a `label`
- * interrupts: a message stream's day divider, an unread "new messages" watermark, an auth
- * conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider,
- * whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the
- * `--auth-shell-divider-*` layer — so a service that retuned its login divider silently retuned
- * every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them.
- *
- * Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding
- * padding. A service opts IN to a louder watermark from its theme, never by forking CSS. */
+
 :root {
-  /* Rule weight, both orientations and both halves of a labelled rule. */
+
   --separator-rule-size: var(--stroke-hairline);
-  /* Rule colour. Role-mirror knob → declared `initial` so the --border default re-resolves at the
-   * CALL SITE under a scoped [data-tenant] / .dark theme (docs/TOKENS.md — the :root freeze rule).
-   * Documented default = hsl(var(--border)). */
+
   --separator-rule-color: initial;
-  /* Gap between the label and each rule half. `initial` so the default re-resolves at the call
-   * site: --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree, so a
-   * :root binding would freeze the gap at the :root density. Documented default = var(--space-3). */
+
   --separator-label-gap: initial;
-  /* Length of the SHORT rule half when labelAlign is `start` / `end` — the label's inset from the
-   * inline edge (the Slack/Mattermost stream convention). It is a grid track on the INLINE axis,
-   * so it flips with the writing direction under dir="rtl" with no extra rule. `initial` for the
-   * same density reason as the gap. Documented default = var(--space-6). */
+
   --separator-label-inset: initial;
-  /* Label type ramp (#46) — steps of the modular scale, never a literal. `xs` is the quiet
-   * stream/divider voice; --separator-label-line-height keeps ja/vi descenders and tone marks
-   * intact (cf. #254); --separator-label-font-weight lets a service raise an unread watermark
-   * without touching the day divider. */
+
   --separator-label-font-size: var(--font-size-xs);
   --separator-label-line-height: var(--line-height-normal);
   --separator-label-font-weight: var(--font-weight-medium);
-  /* Label colour. Role-mirror → `initial`; documented default = hsl(var(--muted-foreground)). */
+
   --separator-label-color: initial;
-  /* Per-tone rule + label colours. `tone` re-points BOTH the rule and the label — never the rule
-   * alone — so an attention rule such as an unread watermark is not colour-only (WCAG 1.4.1) and
-   * survives forced-colors. All role-mirror → `initial`; documented defaults are the matching
-   * semantic role. `muted` deliberately mirrors the quiet default so a service can still split the
-   * two voices later without a breaking change. */
+
   --separator-tone-muted-rule-color: initial;
   --separator-tone-muted-label-color: initial;
   --separator-tone-primary-rule-color: initial;

package/dist/tokens/components/sheet.css

@@ -1,19 +1,8 @@
-/* Sheet RESPONSIVE (drawer / detail-panel) geometry.
- *
- * Lives in its own tier file rather than in feedback.css because these two knobs are the
- * *responsive* contract (`SheetContent responsive="auto"`), not the static panel chrome —
- * see feedback.css for --sheet-width-default / --sheet-pad-* / --sheet-overlay-background.
- */
+
 
 :root {
-  /* Viewport width at and below which `SheetContent responsive="auto"` renders the mobile bottom
-   * sheet instead of the desktop side panel. Read at runtime by useSheetResponsiveMode() (a CSS
-   * @media cannot resolve a custom property), so a service moves the drawer breakpoint from ONE
-   * knob for every overlay that opts into the responsive contract — Sheet and OrgSwitcher alike.
-   * 48rem = 768px mirrors the library's canonical mobile line (useIsMobile). Accepts px/rem/em. */
+
   --sheet-responsive-breakpoint-width: 48rem;
-  /* Block size cap for the responsive BOTTOM presentation only (never for a plain
-   * `side="bottom"` sheet, which stays content-sized). Keeps the sheet below the viewport so the
-   * SheetBody scrolls and the page behind it stays visible/dismissable. */
+
   --sheet-bottom-max-height: 85dvh;
 }