@aortl/admin-css 0.16.1 → 0.16.2

package/dist/admin.scoped.min.css

@@ -768,5 +768,4 @@
 :scope._ao-text-right, :scope ._ao-text-right{text-align:right}
 :scope._ao-tabular-nums, :scope ._ao-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}
 :scope._ao-ring, :scope ._ao-ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
-:scope._ao-select-all, :scope ._ao-select-all{-webkit-user-select:all;user-select:all}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",
@@ -19,7 +19,8 @@
   "files": [
     "dist",
     "src",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "type": "module",
   "sideEffects": [

package/src/components/accordion.css

@@ -28,8 +28,7 @@
            hover:bg-surface-muted
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
-    /* Let a long label break and shrink rather than forcing the row wider than
-       the item (the chevron sits at `margin-left: auto`). */
+    /* Let a long label break and shrink instead of widening the row. */
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -38,14 +37,11 @@
     display: none;
   }
 
-  /* Keep a leading icon at its intrinsic size; the chevron is the `::after`
-     below, which is already `flex-shrink: 0`. */
   .accordion-summary > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Chevron — pushed to the end with margin-left: auto so any number of
-     leading items (label, optional icon) sit together on the start side. */
+  /* Chevron */
   .accordion-summary::after {
     content: "";
     width: 0.5rem;
@@ -64,16 +60,11 @@
 
   .accordion-content {
     @apply px-4 py-3 text-sm text-text border-t border-border;
-    /* Arbitrary body text — break long tokens instead of overflowing. */
     overflow-wrap: break-word;
   }
 
-  /* Smooth open/close via ::details-content. With interpolate-size enabled
-     on the parent, the height auto ↔ 0 transition animates instead of
-     snapping. content-visibility is pinned to visible so the closed content
-     still contributes to intrinsic width — without this, a shrink-to-fit
-     parent reflows narrower on close. Browsers without ::details-content
-     degrade to the native instant toggle. */
+  /* content-visibility stays visible so the closed content still contributes
+     intrinsic width — without it a shrink-to-fit parent reflows narrower on close. */
   .accordion-item::details-content {
     opacity: 0;
     height: 0;

package/src/components/alert.css

@@ -1,19 +1,13 @@
 @layer components {
   .alert {
     @apply flex flex-col gap-1 w-full px-3 py-2 rounded-md border text-sm text-text;
-    /* Inherited by the title, description, and any bare-text body so long
-       words/URLs break instead of overflowing the (often grid-tracked) body. */
     overflow-wrap: break-word;
   }
 
-  /* Leading icon as a direct child switches the layout to a two-column grid:
-     icon spans all rows on the left, title/description stack on the right.
-     No wrapper needed — works with `<i class="ti …">`, `@tabler/icons-react`,
-     or any other inline SVG. */
+  /* A leading icon switches the layout to a two-column grid: icon left, text right. */
   .alert:has(> :is(i, svg):first-child) {
     display: grid;
-    /* `minmax(0, 1fr)` (not the default `minmax(auto, 1fr)`) lets the text
-       column shrink below its longest word so the body wraps. */
+    /* `minmax(0, 1fr)` lets the text column shrink below its longest word. */
     grid-template-columns: auto minmax(0, 1fr);
     column-gap: 0.5rem;
     row-gap: 0.25rem;
@@ -25,10 +19,7 @@
     line-height: 1.25;
   }
 
-  /* With a title/description, declare two explicit rows so the icon can span
-     them (`grid-row: 1 / -1` only resolves correctly against an explicit grid)
-     and force the text parts into column 2 so the description doesn't wrap
-     under the icon. */
+  /* Explicit rows — the icon's `grid-row: 1 / -1` only resolves against an explicit grid. */
   .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
     grid-template-rows: auto auto;
     align-items: start;
@@ -38,20 +29,14 @@
     grid-row: 1 / -1;
   }
 
-  /* Grid items default to `min-width: auto` and won't shrink below their
-     longest word; `min-width: 0` lets the title/description wrap inside the
-     text column. */
+  /* Grid items default to `min-width: auto` and won't shrink below their longest word. */
   .alert > :is(.alert-title, .alert-description) {
     grid-column: 2;
     min-width: 0;
   }
 
-  /* Solid status fill — the variant color carries the signal, and the title,
-     leading icon, and body all sit on top in the matching `-content` color
-     (white on the colored accents, black on bright yellow). Title/icon inherit
-     that content color from the root, so no per-variant text rule is needed.
-     The description drops to 85% opacity to read as secondary text without
-     introducing a second hue. */
+  /* Solid status fills. Title and icon inherit the `-content` color from the
+     root, so no per-variant text rule is needed. */
   .alert-info {
     @apply bg-info border-info text-info-content;
   }

package/src/components/app-shell.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Layout container — CSS grid with named areas. Sidebar/footer slots are
-     optional; modifier classes adjust the template. The sidebar column uses
-     `auto` so the .sidebar's own width drives it — collapse/peek modes change
-     the sidebar's intrinsic width instead of recomputing the grid here. */
+  /* The sidebar column is `auto` so the .sidebar's own width drives it —
+     collapse/peek modes change the sidebar's intrinsic width, not this grid. */
   .app-shell {
     --app-shell-sidebar-w: 240px;
     --app-shell-sidebar-w-collapsed: 56px;

package/src/components/badge.css

@@ -12,11 +12,7 @@
     flex-shrink: 0;
   }
 
-  /* Variants — solid status fills, matching the alert palette so danger/
-     success/etc. stay coherent across status indicators and chips in tables.
-     Each sits on the full-strength status color with the matching `-content`
-     text (white on the colored accents, black on bright yellow). The bare
-     `.badge` (no modifier) renders the neutral look, folded into the base. */
+  /* Variants — solid status fills matching the alert palette; bare `.badge` is the neutral look. */
   .badge-info {
     @apply bg-info text-info-content border-info;
   }

package/src/components/breadcrumbs.css

@@ -1,9 +1,6 @@
 @layer components {
   .breadcrumbs {
     @apply text-sm text-text-muted;
-    /* Crumb labels are often free-form entity names/slugs — let a long one
-       break rather than overflow the (flex-wrap) row. Inherited by every item;
-       crumb/separator icons stay `flex-shrink: 0` below. */
     overflow-wrap: break-word;
   }
 
@@ -18,15 +15,11 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
-  /* `aria-current` on the last item promotes it to body text weight. Non-links
-     stay non-interactive — same selector matches both <a aria-current> and
-     <span aria-current>. */
   .breadcrumb-item[aria-current="page"] {
     @apply text-text font-medium pointer-events-none;
   }
 
-  /* Slash separator. Use `<span class="breadcrumb-separator">` between items;
-     swap content via a child icon when you want a chevron instead. */
+  /* An empty separator renders a slash; a child icon replaces it. */
   .breadcrumb-separator {
     @apply inline-flex items-center text-text-muted/60 select-none;
   }
@@ -40,9 +33,7 @@
     height: 0.875rem;
   }
 
-  /* Setting a width on a flex item doesn't stop it from shrinking, so pin the
-     shrink factor too — keeps crumb and separator icons from squishing when a
-     long label tightens the row. */
+  /* A width alone doesn't stop a flex item from shrinking. */
   .breadcrumb-item > :is(i, svg),
   .breadcrumb-separator > :is(i, svg) {
     flex-shrink: 0;

package/src/components/button-group.css

@@ -7,11 +7,8 @@
     @apply rounded-none relative focus-visible:z-10;
   }
 
-  /* Split-button support: a <details class="menu"> child sits in the strip
-     alongside .btn children, with its .menu-trigger getting the same edge
-     treatment as the buttons around it. inline-flex on the details makes
-     the <summary> stretch vertically to match sibling .btn heights, so an
-     icon-only trigger doesn't end up shorter than its neighbours. */
+  /* Split buttons: a <details class="menu"> sits in the strip; inline-flex
+     stretches its <summary> to match sibling .btn heights. */
   .btn-group > .menu {
     @apply relative focus-visible:z-10;
     display: inline-flex;
@@ -21,10 +18,7 @@
     @apply rounded-none;
   }
 
-  /* Horizontal-only: overlap left edges, round outer left/right corners,
-     and paint the seam between adjacent items as a left-side divider.
-     Scoped with :not(.btn-group-vertical) so vertical groups (which share
-     the .btn-group class) don't inherit horizontal edge treatment. */
+  /* Horizontal-only — vertical groups also carry .btn-group, hence the :not() scope. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
     @apply -ml-px;
@@ -40,11 +34,8 @@
     @apply rounded-r-lg;
   }
 
-  /* Divider between adjacent items so same-coloured siblings (e.g. a
-     split button) read as separate actions. currentColor + color-mix
-     means the divider works across every .btn variant — light on
-     coloured buttons, dark on ghost/secondary — without per-variant
-     rules. */
+  /* Seam divider — color-mix on currentColor adapts to every .btn variant
+     without per-variant rules. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
     border-left-color: color-mix(in oklab, currentColor 25%, transparent);
@@ -78,11 +69,8 @@
     border-top-color: color-mix(in oklab, currentColor 25%, transparent);
   }
 
-  /* Full width — the group stretches across its container instead of
-     shrinking to its content. Horizontal groups split the row evenly so
-     every item is the same width regardless of label length; vertical
-     groups already stretch their items to the group's width, so widening
-     the group is enough. Mirrors the `fullWidth` treatment on tabs. */
+  /* Full width — horizontal items split the row evenly; vertical items
+     already stretch, so widening the group is enough. */
   .btn-group-full-width:not(.btn-group-vertical) {
     @apply flex w-full;
   }

package/src/components/button.css

@@ -10,16 +10,12 @@
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Keep leading/trailing icons at their intrinsic size — a flex item defaults
-     to `flex-shrink: 1`, so a narrow flex container would otherwise squish the
-     glyph horizontally before wrapping or truncating the label. */
+  /* Don't let a narrow container squish the glyph before the label wraps. */
   .btn > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Variants — the bare `.btn` (no modifier) is the low-emphasis default, so
-     most admin buttons need no variant class. The colored variants reset the
-     border to transparent since the base now carries a visible one. */
+  /* Variants — bare `.btn` is the low-emphasis default; most buttons need no variant class. */
   .btn-primary {
     @apply bg-primary text-primary-content border-transparent hover:bg-primary-hover;
   }
@@ -28,11 +24,7 @@
     @apply bg-transparent text-text border-transparent hover:bg-surface-muted;
   }
 
-  /* Muted — fills with the page background (`surface`) so it sits flush
-     instead of reading as a raised control, mirroring `card-muted`. The
-     default `.btn` is one step up (`surface-muted`); hover lifts the muted
-     button to that resting fill. For de-emphasised actions that should
-     recede into the page. */
+  /* Fills with the page background so it sits flush instead of raised — mirrors `card-muted`. */
   .btn-muted {
     @apply bg-surface hover:bg-surface-muted;
   }
@@ -50,14 +42,11 @@
     @apply text-base px-5 py-2.5 gap-2.5;
   }
 
-  /* Modifiers */
   .btn-full-width {
     @apply w-full;
   }
 
-  /* Icon-only — equalises padding so the button reads as a square. The React
-     wrapper adds this automatically when `.btn` has an icon but no text
-     children; vanilla callers add it themselves. Pair with `aria-label`. */
+  /* Icon-only — equalises padding so the button reads as a square. Pair with `aria-label`. */
   .btn-square {
     @apply px-2;
   }
@@ -70,11 +59,8 @@
     @apply px-2.5;
   }
 
-  /* Loading state — paints a spinner via ::before, so no extra markup is
-     required. Sized in `em` so it tracks btn-sm / btn-lg. Pair with the
-     `disabled` attribute (or the React wrapper, which sets it for you) for
-     keyboard a11y; the visual disable lives here so vanilla still feels right
-     without it. */
+  /* Spinner via ::before, `em`-sized so it tracks btn-sm / btn-lg. Pair with
+     the `disabled` attribute for keyboard a11y. */
   .btn-loading {
     @apply opacity-50 cursor-not-allowed pointer-events-none;
   }
@@ -91,9 +77,7 @@
     animation: spinner-spin 0.6s linear infinite;
   }
 
-  /* Suppress a leading icon while loading so we don't show two glyphs.
-     Trailing icons stay visible — they may convey structural meaning
-     (e.g. a dropdown chevron on a split-button trigger). */
+  /* Hide the leading icon while loading; trailing icons (e.g. a dropdown chevron) stay. */
   .btn-loading > :is(i, svg):first-child {
     display: none;
   }

package/src/components/card.css

@@ -5,10 +5,7 @@
            border border-border
            rounded-xl
            shadow-xs;
-    /* Let long unbreakable tokens (IDs, URLs, file paths) break instead of
-       overflowing the body, and let the card shrink inside a flex/grid track
-       rather than forcing it wide. Inherited by title/description/body.
-       Mirrors `.alert`. */
+    /* min-width: 0 lets the card shrink inside a flex/grid track instead of forcing it wide. */
     overflow-wrap: break-word;
     min-width: 0;
   }
@@ -19,28 +16,22 @@
 
   .card-title {
     @apply flex items-center gap-2 text-lg font-semibold leading-tight;
-    /* Flex item — let it shrink so a long title wraps rather than widening the
-       card. `overflow-wrap` is inherited from `.card`. */
+    /* Let a long title wrap instead of widening the card. */
     min-width: 0;
   }
 
-  /* Header row: title on the left, toolbar pushed to the trailing edge. */
   .card-header {
     @apply flex items-center gap-2;
   }
 
-  /* Trailing cluster of header controls (close, edit, …). The title's bold,
-     descender-less type sits visually high in its line box, so geometric
-     centering reads slightly low — nudge the controls up to the optical centre.
-     `card-title` is always `text-lg`, so this offset is constant. */
+  /* -mt-0.5 nudges the controls up to the optical centre — the bold title type
+     sits high in its line box. */
   .card-toolbar {
     @apply flex items-center gap-1 ml-auto -mt-0.5;
   }
 
-  /* Toolbar buttons run small (usually `btn-sm`, whose icons inherit `text-xs`);
-     bump the glyph to 1rem so the controls stay easy to scan and hit. Both
-     bundles size icons off `font-size` — the Tabler webfont (`<i>`) and React's
-     `size="1em"` SVG — so this single rule enlarges both identically. */
+  /* font-size enlarges both icon flavours identically — the Tabler webfont and
+     React's `size="1em"` SVG. */
   .card-toolbar :is(i, svg) {
     font-size: 1.25rem;
   }
@@ -53,7 +44,6 @@
     @apply flex flex-wrap items-center gap-2 mt-auto pt-2;
   }
 
-  /* Modifiers */
   .card-compact .card-body {
     @apply p-3 gap-2;
   }
@@ -62,17 +52,12 @@
     @apply shadow-none border-border-strong;
   }
 
-  /* Neutral variant — sits flush with the page (`--color-surface`, the same
-     fill as `html`/`.app-shell`) instead of the raised `surface-muted` of a
-     default card. For de-emphasised or grouped panels that shouldn't pop off
-     the background. No accent, no status meaning. */
+  /* Fills with the page background so the panel sits flush instead of raised. */
   .card-muted {
     @apply bg-surface;
   }
 
-  /* Color variants — tinted surface + matching border, mirroring Alert. The
-     title (and any leading icon, via `currentColor`) picks up the accent for
-     fast scanning. */
+  /* Color variants — tinted surface + accent title, mirroring Alert. */
   .card-primary {
     @apply bg-primary-muted border-primary-muted;
   }
@@ -109,7 +94,6 @@
     @apply text-danger;
   }
 
-  /* `card-warning` keeps its title at `text-text`: the warning accent is
-     yellow-400 in both modes and fails AA contrast on the muted yellow
-     surface. The tinted bg still carries the warning signal. */
+  /* No `.card-warning .card-title` rule — the yellow-400 accent fails AA on
+     the muted yellow surface. */
 }

package/src/components/chart.css

@@ -1,30 +1,14 @@
 @layer components {
   /*
-   * Charts — three pure-CSS primitives driven entirely by inline custom
-   * properties (never data-* attributes: CSS can't read an attribute as a
-   * number for calc() cross-browser yet). No JS, no axes/ticks/gridlines.
-   * They serve two altitudes: dense inline micro-viz (a swatch in a table
-   * cell) and compact dashboard cards.
-   *
-   * Data contract:
-   *   - bars:  container `--chart-max` (default 100), each bar `--value`;
-   *            the fill sizes to `var(--value) / var(--chart-max) * 100%`.
-   *   - stack: each segment `--value`, sized by `flex` (no max — the ratios
-   *            are intrinsic to the flex grow factors).
-   *   - donut: one pre-built cumulative conic-gradient stop string in
-   *            `--donut-segments` (CSS can't sum a variable-length sibling
-   *            list, so the string arrives whole).
-   *
-   * Colour: single-series follows `currentColor` (default `--color-info`,
-   * recoloured by the `.chart-success`/etc. variants like `.progress`).
-   * Multi-series colours are set inline per bar/segment (`--bar-color` /
-   * `--segment-color` / legend `--legend-color`); there is no chart token
-   * layer. role="img" + aria-label carries the semantics; a native `title`
-   * on each bar/segment gives a hover read-out.
+   * Pure-CSS charts driven by inline custom properties — not data-*
+   * attributes (CSS can't read an attribute as a number for calc()).
+   * Contract: bars — container `--chart-max` (default 100), each bar
+   * `--value`; stack — each segment `--value` (flex-grow ratios, no max);
+   * donut — `--donut-segments` holds a pre-built cumulative conic-gradient
+   * stop string (CSS can't sum a variable-length sibling list).
+   * Single-series colour rides currentColor; multi-series is set inline via
+   * `--bar-color` / `--segment-color` / `--legend-color`.
    */
-
-  /* Shared base — sizing knobs + the single-series fill colour. Any chart
-     type reads these; size modifiers below just remap them. */
   .chart {
     --chart-max: 100;
     --chart-height: 8rem; /* bar track cross-axis size (md) */
@@ -33,9 +17,7 @@
     color: var(--color-info);
   }
 
-  /* Single-series semantic variants — recolour currentColor, like progress.
-     `info` is the base colour (`.chart` above), so it needs no class — the
-     default `variant="info"` simply emits no modifier. */
+  /* `info` is the base colour (`.chart`), so the default variant emits no class. */
   .chart-success {
     color: var(--color-success);
   }
@@ -46,16 +28,9 @@
     color: var(--color-danger);
   }
 
-  /* --------------------------------------------------------------------- *
-   * BAR CHART — horizontal (default)                                      *
-   * --------------------------------------------------------------------- *
-   * Three-column grid: [label | track (1fr) | value]. Each `.chart-bar` is
-   * a `subgrid` spanning all three, so the label gutter and the value column
-   * stay aligned across every row. The fill lives in the `1fr` track — a
-   * definite width once the grid resolves, which is exactly what lets its
-   * `inline-size: %` transition (see the transition note). Values sit in the
-   * trailing column, so a short bar never clips its number and a full bar
-   * never overflows. */
+  /* Bar chart (horizontal) — grid [label | track (1fr) | value]; each bar is
+     a subgrid row so columns align across rows. The 1fr track gives the fill
+     a definite width, which is what lets its % inline-size transition. */
   .chart-bars {
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -71,8 +46,7 @@
     align-items: center;
   }
 
-  /* Category label — only emitted when the datum carries one. The empty
-     `auto` column collapses to 0 when no bar has a label. */
+  /* The auto column collapses to 0 when no bar has a label. */
   .chart-bar-label {
     @apply text-xs text-text-muted;
     grid-column: 1;
@@ -91,15 +65,13 @@
     inline-size: calc(var(--value) / var(--chart-max) * 100%);
     background: var(--bar-color, currentColor);
     border-radius: 2px;
-    /* Transition the resolved length (NOT --value, which isn't registered):
-       a percentage length transitions because the track has a definite size.
-       Both axes are listed so the vertical fill animates too. */
+    /* Transition the resolved length, not --value (unregistered — won't
+       animate); both axes so the vertical fill animates too. */
     transition:
       inline-size 200ms ease,
       block-size 200ms ease;
   }
 
-  /* Value label — trailing aligned column. Opt-in via `.chart-values`. */
   .chart-bar-value {
     @apply text-xs text-text-muted tabular-nums;
     grid-column: 3;
@@ -111,13 +83,9 @@
     display: none;
   }
 
-  /* --------------------------------------------------------------------- *
-   * BAR CHART — vertical modifier                                         *
-   * --------------------------------------------------------------------- *
-   * Flex row of equal columns inside a fixed-height box. Each column is a
-   * flex column [value | track | label]; the track (`flex: 1`) gets a
-   * definite block-size so the fill's `block-size: %` resolves and animates.
-   * Bars grow up from the floor (`justify-content: end`). */
+  /* Bar chart (vertical) — flex row of columns in a fixed-height box; the
+     flex:1 track gets a definite block-size so the fill's % block-size
+     resolves and animates. */
   .chart-bars-vertical {
     display: flex;
     flex-direction: row;
@@ -163,12 +131,7 @@
     padding: 0;
   }
 
-  /* --------------------------------------------------------------------- *
-   * STACKED / PROPORTION BAR                                              *
-   * --------------------------------------------------------------------- *
-   * A single rounded track partitioned by `flex: var(--value)`. No max
-   * needed — proportions are the flex-grow ratios. A hairline in the
-   * surface colour separates adjacent segments. */
+  /* Stacked / proportion bar */
   .chart-stack {
     display: flex;
     flex-direction: row;
@@ -189,18 +152,10 @@
     box-shadow: -1px 0 0 0 var(--color-surface);
   }
 
-  /* --------------------------------------------------------------------- *
-   * DONUT / PIE                                                           *
-   * --------------------------------------------------------------------- *
-   * A conic-gradient circle with the centre punched out by a radial-gradient
-   * mask. `--donut-thickness` is the ring width as a % of the diameter; the
-   * hole's inner radius is `50% - thickness`, so thickness=50% leaves no hole
-   * (a solid pie). The same stop position twice gives a crisp ring edge.
-   *
-   * The centre label must NOT be a child of the ring — `mask` clips the whole
-   * subtree, so a child sitting in the hole would be invisible. It's a sibling
-   * overlay: the figure is an inline-grid and both the ring and the label
-   * occupy the same cell. */
+  /* Donut / pie — conic-gradient ring, centre punched out by a radial-gradient
+     mask. `--donut-thickness` is the ring width as a % of the diameter (50% =
+     solid pie). The centre label must be a sibling overlay, never a child —
+     `mask` clips the whole subtree. */
   .chart-donut-figure {
     position: relative;
     inline-size: var(--chart-size);
@@ -232,7 +187,6 @@
     inline-size: 100%;
   }
 
-  /* Solid pie — no hole. */
   .chart-donut-pie {
     --donut-thickness: 50%;
   }
@@ -244,9 +198,7 @@
     pointer-events: none;
   }
 
-  /* --------------------------------------------------------------------- *
-   * LEGEND (donut + stack)                                                *
-   * --------------------------------------------------------------------- */
+  /* Legend (donut + stack) */
   .chart-legend {
     @apply flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted;
     list-style: none;
@@ -266,9 +218,7 @@
     flex-shrink: 0;
   }
 
-  /* --------------------------------------------------------------------- *
-   * SIZES — remap the cross-axis / diameter knobs                         *
-   * --------------------------------------------------------------------- */
+  /* Sizes */
   .chart-sm {
     --chart-height: 4rem;
     --chart-size: 4rem;
@@ -278,11 +228,7 @@
     --chart-size: 12rem;
   }
 
-  /* --------------------------------------------------------------------- *
-   * INLINE — micro-viz that sits in running text / a table cell           *
-   * --------------------------------------------------------------------- *
-   * Inline-flex, baseline-nudged, and em-relative so the swatch tracks the
-   * surrounding font size. */
+  /* Inline micro-viz — em-relative so it tracks the surrounding font size. */
   .chart-inline {
     display: inline-flex;
     vertical-align: middle;
@@ -298,9 +244,6 @@
     inline-size: 6em;
   }
 
-  /* --------------------------------------------------------------------- *
-   * REDUCED MOTION                                                        *
-   * --------------------------------------------------------------------- */
   @media (prefers-reduced-motion: reduce) {
     .chart-bar-fill,
     .chart-segment {

package/src/components/checkbox.css

@@ -25,11 +25,8 @@
     @apply inline-flex items-center justify-center size-3 text-primary-content;
   }
 
-  /* Native input variant: state is driven by :checked / :indeterminate, the
-     glyph is masked onto ::after. Mirrors the Base UI button variant above so a
-     vanilla <input class="checkbox"> renders identically (indeterminate reads
-     the same as checked, matching the data-* rule). The mask is the same
-     checkmark polyline the React indicator draws. */
+  /* Native input variant — must render identically to the Base UI button rules
+     above (same checkmark polyline; indeterminate reads as checked). */
   input.checkbox {
     @apply appearance-none border-border-strong hover:border-text-muted;
     --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
@@ -49,12 +46,9 @@
     mask: var(--checkbox-check) center / contain no-repeat;
   }
 
-  /* A <label> wrapping a checkbox + text lays out inline with a small gap.
-     Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
   label:has(> .checkbox) {
     @apply inline-flex items-center gap-2 cursor-pointer;
-    /* Let a long label break and shrink beside the `shrink-0` box instead of
-       overflowing a narrow form column. The box stays put; the text wraps. */
+    /* Long labels wrap beside the shrink-0 box instead of overflowing. */
     overflow-wrap: break-word;
     min-width: 0;
   }

package/src/components/code-block.css

@@ -9,10 +9,8 @@
     overflow: auto;
   }
 
-  /* Opt out of wrapping for log-style content where long lines should
-     scroll horizontally instead of breaking. Pair with an inline
-     `max-height` to clamp vertical growth — `overflow: auto` above
-     turns into a scrollbar automatically. */
+  /* Long lines scroll horizontally instead of breaking; pair with an inline
+     `max-height` to clamp vertical growth. */
   .code-block-nowrap {
     white-space: pre;
     word-wrap: normal;