@godxjp/ui 19.1.0 → 19.2.0

package/dist/styles/core.css

@@ -0,0 +1,21 @@
+
+@import "sonner/dist/styles.css";
+@import "react-day-picker/style.css";
+@import "./base.css";
+@import "./shell-layout.css";
+@import "./motion.css";
+@import "./layout.css";
+@import "./control.css";
+@import "./toggle.css";
+@import "./logo-layout.css";
+@import "./card-layout.css";
+@import "./text-layout.css";
+@import "./table-layout.css";
+@import "./dialog-layout.css";
+@import "./alert-layout.css";
+@import "./badge-layout.css";
+@import "./data-display-layout.css";
+@import "./data-entry-layout.css";
+@import "./form-layout.css";
+@import "./navigation-layout.css";
+@import "./chart-layout.css";

package/dist/styles/data-display-layout.css

@@ -9,7 +9,6 @@
     justify-content: center;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    /* Tint washes over the role background (default transparent = no-op, rule #44). */
     background:
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
       var(--avatar-background, hsl(var(--muted)));
@@ -18,10 +17,6 @@
     font-weight: var(--font-weight-medium);
   }
 
-  /* Entity-header mark — `<Avatar shape="square">` (gh#249). Opt-in ONLY: without the attribute the
-   * avatar above is untouched. Geometry and colour are token-owned (rule #45); the brand fill is
-   * handed down through --avatar-background so the fallback slot picks it up with no extra rule,
-   * and a service that only wants a neutral square overrides --avatar-square-background. */
   .ui-avatar[data-shape="square"] {
     inline-size: var(--avatar-square-size);
     block-size: var(--avatar-square-size);
@@ -30,11 +25,6 @@
     color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
   }
 
-  /* CAPABILITY MEDALLION — `<Avatar appearance="tinted">` (gh#12). The tinted companion of the
-   * solid entity mark: same box, same radius, a soft role wash instead of a solid fill and the
-   * glyph in the role itself. Declared AFTER the square rule (equal specificity) so it retints
-   * either shape. The glyph rule is scoped to this appearance ON PURPOSE — a global
-   * `.ui-avatar svg` would outrank the per-call-site icon classes existing avatars already use. */
   .ui-avatar[data-appearance="tinted"] {
     --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
     color: var(--avatar-tinted-foreground, hsl(var(--primary)));
@@ -61,14 +51,6 @@
     background: var(--avatar-background, hsl(var(--muted)));
   }
 
-  /* PRESENCE (gh#309) — the realtime reachability dot on the mark itself.
-   *
-   * Opt-in ONLY: with no `presence` prop the avatar emits neither the attribute nor the node, so
-   * every existing call site keeps today's DOM and today's clip. WITH it the ROOT stops clipping —
-   * the dot straddles the mark's edge, which is exactly why a consumer could never place it from
-   * outside — and the clip moves down onto the image/fallback, which is where it was doing the real
-   * work. `border-radius: inherit` keeps that clip correct for both shapes: --radius-pill for a
-   * person, --avatar-square-radius for an entity mark. */
   .ui-avatar[data-presence] {
     overflow: visible;
   }
@@ -79,16 +61,6 @@
     border-radius: inherit;
   }
 
-  /* NEVER COLOUR-ALONE (WCAG 1.4.1). Three independent encodings ride together: the localized
-   * sr-only string inside this span, a semantic ROLE colour, and a SHAPE — filled · half-filled ·
-   * barred · hollow — so the four states stay apart in greyscale, for a deuteranope, and under
-   * forced colors. `box-sizing: border-box` makes --avatar-presence-size the OUTER diameter, so the
-   * state stroke never changes the dot's footprint between states.
-   *
-   * The dot is a state, not an event: nothing here animates, so there is nothing for
-   * prefers-reduced-motion to switch off. Presence is deliberately NOT a live region either — a
-   * roster of 40 avatars resyncing over a socket would flood a screen reader; announcing a CHANGE is
-   * the consumer's call, in the consumer's own live region. */
   [data-slot="avatar-presence"] {
     position: absolute;
     inset-block-end: var(--avatar-presence-inset);
@@ -102,20 +74,16 @@
     border: var(--avatar-presence-stroke-width) solid transparent;
     border-radius: var(--radius-pill);
     background-origin: border-box;
-    /* Separator ring — chrome, therefore a knob (#44). It is what keeps the dot legible over a busy
-     * photo; a service that puts the avatar on a coloured surface retunes the colour once. */
+
     box-shadow: 0 0 0 var(--avatar-presence-ring-width)
       hsl(var(--avatar-presence-ring-color, var(--background)));
   }
 
-  /* ONLINE — a SOLID disc. */
   [data-slot="avatar-presence"][data-presence="online"] {
     border-color: hsl(var(--avatar-presence-online-color, var(--success)));
     background-color: hsl(var(--avatar-presence-online-color, var(--success)));
   }
 
-  /* AWAY — a HALF-FILLED disc (block-end half), the one silhouette that survives greyscale next to
-   * both the solid and the hollow states. */
   [data-slot="avatar-presence"][data-presence="away"] {
     border-color: hsl(var(--avatar-presence-away-color, var(--warning)));
     background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
@@ -126,15 +94,11 @@
     );
   }
 
-  /* BUSY (do-not-disturb) — a solid disc CUT by a horizontal bar. */
   [data-slot="avatar-presence"][data-presence="busy"] {
     border-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
     background-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
   }
 
-  /* `inset: 0; margin: auto` centres the bar in BOTH axes with no translate, so it stays centred
-   * under dir="rtl" (a start-anchored `translate(-50%)` would slide it off-centre when the inline
-   * axis flips). */
   [data-slot="avatar-presence"][data-presence="busy"]::before {
     content: "";
     position: absolute;
@@ -146,19 +110,11 @@
     background: hsl(var(--avatar-presence-ring-color, var(--background)));
   }
 
-  /* OFFLINE — a HOLLOW ring. Distinct from an ABSENT `presence`, which draws nothing at all: absent
-   * means "this entity has no presence concept" (an organization mark), offline means "known to be
-   * unreachable" — the same distinction ListRow draws between an omitted and a `false` `unread`. */
   [data-slot="avatar-presence"][data-presence="offline"] {
     border-color: hsl(var(--avatar-presence-offline-color, var(--muted-foreground)));
     background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
   }
 
-  /* FORCED COLORS — the UA replaces author colours, and box-shadow is dropped outright, so the
-   * separator ring would vanish into the mark and all four states would collapse to one swatch.
-   * System-colour keywords ARE honoured inside this block, so re-draw the ring as an outline and
-   * re-state each silhouette in Canvas / CanvasText: the shape encoding survives, which is the half
-   * of WCAG 1.4.1 that a colour-only dot loses here first. */
   @media (forced-colors: active) {
     [data-slot="avatar-presence"] {
       border-color: CanvasText;
@@ -207,9 +163,6 @@
     background: hsl(var(--destructive));
   }
 
-  /* Over-capacity: keep the destructive fill but lay a diagonal hatch over it so an over-limit bar
-   * (value > 100, width still capped at 100%) is visually distinct from a full one. Placed after the
-   * tone rules so background-color wins; background-image carries the stripes. */
   .ui-progress[data-over] .ui-progress-bar {
     background-color: hsl(var(--destructive));
     background-image: repeating-linear-gradient(
@@ -296,8 +249,6 @@
     column-gap: var(--space-stack-md);
   }
 
-  /* Spacing lives INSIDE the item (not a flex gap between items) so the rail line
-     spans the full item height and the connector stays continuous dot-to-dot. */
   .ui-timeline-body {
     padding-bottom: var(--space-stack-md);
   }
@@ -326,13 +277,11 @@
     line-height: 1;
   }
 
-  /* done → success fill. */
   .ui-timeline-dot[data-status="done"] {
     background: var(--timeline-dot-done-background, hsl(var(--success)));
     color: hsl(var(--success-foreground));
   }
 
-  /* current → primary fill + ring (also the legacy data-current shorthand). */
   .ui-timeline-dot[data-status="current"],
   .ui-timeline-dot[data-current="true"] {
     background: var(--timeline-dot-current-background, hsl(var(--primary)));
@@ -340,7 +289,6 @@
     box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
   }
 
-  /* pending → muted outline on the surface (no fill). */
   .ui-timeline-dot[data-status="pending"] {
     border-color: hsl(var(--border));
     background: hsl(var(--background));
@@ -352,7 +300,6 @@
     height: 0.75rem;
   }
 
-  /* current pip glyph for variant="status" (filled inner dot). */
   .ui-timeline-pip {
     display: block;
     width: 0.5rem;
@@ -368,7 +315,6 @@
     background: hsl(var(--border));
   }
 
-  /* The segment below a done/current step reads as travelled (completed). */
   .ui-timeline-line[data-completed="true"] {
     background: var(--timeline-line-completed-background, hsl(var(--primary)));
   }
@@ -402,7 +348,6 @@
   }
 }
 
-/* Accordion */
 .ui-accordion-item {
   border-bottom: 1px solid hsl(var(--border));
 }
@@ -450,7 +395,6 @@
   padding-bottom: var(--space-4);
 }
 
-/* HoverCard */
 .ui-hover-card-content {
   z-index: 50;
   width: 16rem;
@@ -518,7 +462,6 @@
   height: var(--carousel-arrow-icon-size);
 }
 
-/* Dot indicators — horizontal, centered row of round dots; the active one fills + widens. */
 .ui-carousel-dots {
   display: flex;
   flex-wrap: wrap;
@@ -548,7 +491,6 @@
   background: hsl(var(--primary));
 }
 
-/* Vertical orientation — stack the dots into a column beside the track. */
 .ui-carousel[data-orientation="vertical"] .ui-carousel-dots {
   flex-direction: column;
 }
@@ -558,7 +500,6 @@
   height: var(--space-5);
 }
 
-/* Vertical orientation (opts.axis === "y") — flips the track and the arrow positions. */
 .ui-carousel[data-orientation="vertical"] .ui-carousel-content {
   flex-direction: column;
   margin-inline: 0;
@@ -589,14 +530,7 @@
 }
 
 @layer components {
-  /* ListRow — single-line entity row (indicator · leading · title/description · trailing) for
-   * short lists inside a flush CardContent. Rows separate with a quiet divider; the last row
-   * leaves the Card border to close the list. Logical properties throughout (RTL-safe).
-   *
-   * Overflow contract (#224): the row itself may shrink (min-inline-size: 0) and WRAPS, the
-   * content column keeps only `min(--list-row-body-min-width, 100%)` — so it can always shrink
-   * below its intrinsic width and truncate/wrap — and the trailing actions wrap onto their own
-   * line instead of pushing the row (and the page root) wider than the viewport. */
+
   [data-slot="list-row"] {
     display: flex;
     min-inline-size: 0;
@@ -606,8 +540,7 @@
     padding: var(--list-row-padding-y) var(--list-row-padding-x);
     background: var(--list-row-read-background, transparent);
   }
-  /* Unread emphasis surface — paired with the indicator dot + its sr-only text, never colour
-   * alone (WCAG 1.4.1). */
+
   [data-slot="list-row"][data-unread] {
     background: var(--list-row-unread-background, hsl(var(--muted)));
   }
@@ -624,7 +557,7 @@
     inline-size: var(--list-row-indicator-size);
     block-size: var(--list-row-indicator-size);
     border-radius: var(--radius-pill);
-    /* Read rows keep the gutter (titles stay on one optical axis) but paint nothing. */
+
     background: transparent;
   }
   [data-slot="list-row"][data-unread] [data-slot="list-row-indicator"] {
@@ -643,16 +576,10 @@
     flex: 1 1 var(--list-row-body-min-width, 12rem);
     flex-direction: column;
   }
-  /* `overflow="wrap"` — the title/description wrap instead of truncating; `anywhere` also lowers
-   * the min-content width so an unbroken token (URL, long JA/VI compound) can't widen the row. */
+
   [data-slot="list-row"][data-overflow="wrap"] [data-slot="list-row-body"] {
     overflow-wrap: anywhere;
   }
-  /* `density="compact"` (#246) — the compact inline-actions geometry: tighter block padding and
-   * column gap plus a LOWER body threshold, so a 36px avatar, the title/description and one or two
-   * small trailing Buttons stay inline inside the canonical 326px content column at 390px. It only
-   * LOWERS thresholds; the #224 overflow contract above is untouched (the row still wraps, the body
-   * is still clamped with min(…, 100%)), so a compact row can never widen the page root. */
   [data-slot="list-row"][data-density="compact"] {
     gap: var(--list-row-compact-gap, var(--space-2));
     padding: var(--list-row-compact-padding-y, var(--space-2))
@@ -685,9 +612,6 @@
     }
   }
 
-  /* CredentialReveal — one-time secret surface: caution banner, masked/revealed value row with
-   * copy/reveal/download actions, and an optional acknowledge footer. Density-aware via the
-   * --control-height tier; colours/spacing read semantic role tokens only. */
   .ui-credential-reveal {
     display: flex;
     flex-direction: column;
@@ -735,8 +659,6 @@
     justify-content: flex-end;
   }
 
-  /* QrCode — a quiet, scanner-safe SVG surface with an ISO/IEC-style four-module quiet zone
-   * supplied by the encoder. Sizing is natural rather than stretched across its container. */
   .ui-qr-code {
     display: block;
     inline-size: var(--qr-code-size-md);
@@ -756,20 +678,14 @@
 }
 
 @layer components {
-  /* PERMISSION MATRIX — `.ui-permission-matrix` was a bare hook with no rule anywhere, so every
-   * constant sat on the component (#319). */
   .ui-permission-matrix-table {
     min-inline-size: var(--permission-matrix-min-width);
   }
 
-  /* Sticky first column: the scrolling grid passes UNDER it, so it needs an opaque ground.
-   * Scoped through the matrix root because `[data-slot="table-head"]` sets its own background at
-   * the same specificity — an unscoped rule would win only by import order, which is not a
-   * property worth depending on. */
   .ui-permission-matrix .ui-permission-matrix-pin {
     position: sticky;
     inset-inline-start: 0;
-    /* Above the scrolling cells, below any portaled overlay (--overlay-z-index). */
+
     z-index: 20;
     background-color: inherit;
     border-inline-end: 1px solid hsl(var(--border));
@@ -796,10 +712,7 @@
 }
 
 @layer components {
-  /* SCROLL AREA — the custom scrollbar rail (#319). There was no `.ui-scroll*` rule anywhere: the
-   * rail's whole geometry lived on the component as Tailwind literals, so a service could not
-   * retune it. Logical sizing (inline-/block-size) keeps the rail correct in RTL and in vertical
-   * writing modes; the thumb radius is a knob so a sharp-cornered theme squares it once. */
+
   .ui-scroll-area-bar {
     padding: var(--scroll-area-bar-padding);
   }
@@ -816,3 +729,171 @@
     border-radius: var(--scroll-area-thumb-radius);
   }
 }
+
+@layer components {
+
+  :is(.ui-code-block, .ui-prose pre) {
+    margin: 0;
+    overflow: auto;
+    border-radius: var(--code-block-radius);
+    background: hsl(var(--muted));
+    padding: var(--code-block-space-inset);
+    color: hsl(var(--foreground));
+    font-family: var(--font-mono);
+    font-size: var(--code-block-font-size);
+    line-height: var(--code-block-line-height);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    tab-size: 2;
+  }
+
+  :is(.ui-code-block, .ui-prose pre) > code {
+    font: inherit;
+    background: transparent;
+    padding: 0;
+  }
+
+  .ui-code-block[data-wrap="false"] {
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+
+  .ui-code-block[data-size="xs"] {
+    font-size: var(--code-block-font-size-xs);
+  }
+
+  .ui-code-block[data-max-height="sm"] {
+    max-block-size: var(--code-block-max-height-sm);
+  }
+
+  .ui-code-block[data-max-height="md"] {
+    max-block-size: var(--code-block-max-height-md);
+  }
+
+  .ui-code-block[data-max-height="lg"] {
+    max-block-size: var(--code-block-max-height-lg);
+  }
+
+  .ui-prose {
+    font-size: var(--prose-font-size);
+    line-height: var(--prose-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  .ui-prose[data-size="sm"] {
+    font-size: var(--prose-font-size-sm);
+  }
+
+  .ui-prose[data-image-size="original"] {
+    overflow-x: auto;
+  }
+
+  .ui-prose > * {
+    margin-block: 0;
+  }
+
+  .ui-prose > * + * {
+    margin-block-start: var(--prose-space-block);
+  }
+
+  .ui-prose :is(h1, h2, h3, h4) {
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    text-wrap: balance;
+  }
+
+  .ui-prose > :is(h1, h2, h3, h4) + * {
+    margin-block-start: var(--prose-space-block);
+  }
+
+  .ui-prose > * + :is(h1, h2, h3, h4) {
+    margin-block-start: var(--prose-heading-space-block-start);
+  }
+
+  .ui-prose h1 {
+    font-size: var(--heading-h1);
+  }
+
+  .ui-prose h2 {
+    font-size: var(--heading-h2);
+  }
+
+  .ui-prose h3 {
+    font-size: var(--heading-h3);
+  }
+
+  .ui-prose h4 {
+    font-size: var(--heading-h4);
+  }
+
+  .ui-prose :is(ul, ol) {
+    padding-inline-start: var(--prose-list-space-inline);
+  }
+
+  .ui-prose ul {
+    list-style: disc;
+  }
+
+  .ui-prose ol {
+    list-style: decimal;
+  }
+
+  .ui-prose li + li {
+    margin-block-start: var(--prose-list-item-space);
+  }
+
+  .ui-prose li > :is(ul, ol) {
+    margin-block-start: var(--prose-list-item-space);
+  }
+
+  .ui-prose blockquote {
+    border-inline-start: var(--prose-quote-border-width) solid hsl(var(--border));
+    padding-inline-start: var(--prose-quote-space-inline);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-prose :not(pre) > code {
+    font-family: var(--font-mono);
+    font-size: var(--prose-code-font-size);
+    background: hsl(var(--muted));
+    padding-inline: var(--prose-code-space-inline);
+    border-radius: var(--prose-code-radius);
+  }
+
+  .ui-prose a {
+    color: hsl(var(--primary));
+    text-decoration: underline;
+  }
+
+  .ui-prose table {
+    inline-size: 100%;
+    border-collapse: collapse;
+  }
+
+  .ui-prose :is(th, td) {
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    text-align: start;
+    vertical-align: top;
+  }
+
+  .ui-prose th {
+    font-weight: var(--font-weight-medium);
+    background: hsl(var(--muted));
+  }
+
+  .ui-prose img {
+    max-inline-size: 100%;
+    block-size: auto;
+    border-radius: var(--prose-image-radius);
+  }
+
+  .ui-prose[data-image-size="original"] img {
+    max-inline-size: none;
+  }
+
+  .ui-prose hr {
+    border: 0;
+    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
+  }
+}

package/dist/styles/data-entry-layout.css

@@ -69,27 +69,6 @@
     opacity: 0.7;
   }
 
-  .ui-time-input {
-    width: 100%;
-    min-height: var(--control-height);
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--input));
-    background: hsl(var(--background));
-    padding-inline: var(--space-3);
-    padding-block: 0;
-    font-size: var(--font-size-base);
-    color: hsl(var(--foreground));
-    outline: none;
-  }
-
-  .ui-time-input:focus-visible {
-    border-color: hsl(var(--focus-ring-color, var(--ring)));
-  }
-
-  .ui-time-input[aria-invalid="true"] {
-    border-color: hsl(var(--destructive));
-  }
-
   .ui-password-strength {
     display: grid;
     gap: var(--space-1);
@@ -163,12 +142,6 @@
 }
 
 @layer components {
-  /* UPLOAD — five variants (dropzone · button · picture · picture-card · avatar) that used to
-   * carry their entire box as Tailwind literals on the component: 66 of them, the worst file in
-   * the library (#319). A service could not resize the avatar, dial back the dropzone's generous
-   * inset, or align the file row to its own grid without forking. Every constant is now a knob
-   * (rule #45); colour scrims are role-mirror knobs resolved at the CALL SITE so a scoped
-   * [data-tenant]/.dark override reaches them (docs/TOKENS.md). */
 
   .ui-upload-dropzone {
     cursor: pointer;
@@ -253,7 +226,6 @@
     font-size: var(--upload-tile-label-font-size);
   }
 
-  /* Busy scrim — one share of the surface role, resolved here so a scoped theme reaches it. */
   .ui-upload-overlay {
     position: absolute;
     inset: 0;
@@ -380,8 +352,6 @@
     color: hsl(var(--muted-foreground));
   }
 
-  /* Sits ON the photo, so the wash is a fixed dark scrim rather than a surface role — it must
-   * stay legible over an arbitrary user image in either theme. */
   .ui-upload-avatar-change {
     position: absolute;
     inset-inline: 0;
@@ -466,7 +436,6 @@
     margin-inline-end: var(--space-2);
   }
 
-  /* Disabled affordances share the one system alpha rather than a per-variant literal. */
   .ui-upload-dropzone[data-disabled],
   .ui-upload-tile-add[data-disabled],
   .ui-upload-avatar[data-disabled] {
@@ -474,12 +443,6 @@
     opacity: var(--disabled-opacity);
   }
 
-  /* ── BranchScopePicker (gh#319) ────────────────────────────────────────────────
-   * `.ui-branch-scope-picker` shipped as a bare hook: the class existed but no rule did, so all
-   * of the control's geometry sat on the component as Tailwind literals. It composes RadioGroup +
-   * CheckboxGroup + SearchInput and has no field box of its own, so none of the control-affix
-   * machinery applies — these four rules are the whole surface. Every measure is a documented
-   * token (#45); see tokens/components/data-entry.css for why each default is a flat rem. */
   .ui-branch-scope-picker {
     display: flex;
     flex-direction: column;
@@ -492,11 +455,6 @@
     gap: var(--branch-scope-picker-badges-gap);
   }
 
-  /* The `mode="selected"` subset, indented under its radio by a rule on the inline-start edge.
-   * Logical properties throughout, so the indent flips with the writing direction (the utilities
-   * this replaces, `border-s-2 ps-4`, already did). The colour is left to the global
-   * `* { border-color: hsl(var(--border)) }` so a scoped [data-tenant]/.dark override of
-   * `--border` still reaches it. */
   .ui-branch-scope-picker-subset {
     display: flex;
     flex-direction: column;
@@ -505,9 +463,6 @@
     border-inline-start-width: var(--branch-scope-picker-subset-border-width);
   }
 
-  /* A bounded scroll region — the component gives it `tabIndex={0}` + a group name so it stays
-   * keyboard-reachable (WCAG 2.1.1 / axe scrollable-region-focusable) even when every checkbox
-   * in it is disabled. The cap is the token; the overflow is not negotiable. */
   .ui-branch-scope-picker-list {
     max-block-size: var(--branch-scope-picker-list-max-height);
     overflow-y: auto;

package/dist/styles/density.css

@@ -1,19 +1,4 @@
-/*
- * DENSITY — named presets of the global `--scaling` factor (foundation.css).
- * One knob: density sets `--scaling`, and every size token (spacing grid, control
- * / table / checkbox / switch heights, radius, and everything derived from them)
- * rescales in proportion. Two entry points, same variable:
- *   • `<PageContainer density>` → `.ui-density-*` class (scoped to a descendant,
- *     wins for its subtree by proximity).
- *   • the density AXIS → `:root[data-density="*"]` on <html> (AppProvider density
- *     prop), so it cascades app-wide incl. portalled overlays. For a value off the
- *     three presets, set `--scaling` directly (AppProvider `scaling` prop).
- *
- * INTENTIONALLY UNLAYERED — do NOT wrap in `@layer components`. `--scaling` has an
- * unlayered `:root` default (foundation.css); a layered `:root[data-density]` would
- * always lose to it regardless of specificity, making the axis a no-op on <html>.
- * Unlayered, `:root[data-density="x"]` (0,2,0) beats the `:root` default (0,1,0).
- */
+
 
 .ui-density-compact,
 :root[data-density="compact"] {
@@ -30,20 +15,6 @@
   --scaling: 1.08;
 }
 
-/*
- * A DESCENDANT density scope (`.ui-density-*` from `<PageContainer density>`) must
- * RE-DERIVE every --scaling-tied token, not just flip --scaling. CSS substitutes
- * `var(--scaling)` at the element that DECLARES a token, so the size tokens declared
- * at `:root` (foundation/control/table) are baked with the ROOT --scaling and inherit
- * as fixed values — a subtree that only sets a new --scaling can't retune them. (Same
- * reason `.ui-scale-fixed` re-declares the whole list.) Mirror that list here, scaled
- * by the LOCAL --scaling, so controls/spacing in the subtree actually resize. The
- * `:root[data-density]` selectors above need ONLY --scaling: they re-declare on the
- * same element as the :root token formulas, so those re-resolve there.
- *
- * density.css is a registered tier-definition file (check-control-sizing), so the
- * `calc(var(--control-height) ± …)` tier offsets are permitted here.
- */
 .ui-density-compact,
 .ui-density-default,
 .ui-density-comfortable {