@aortl/admin-css 0.16.0 → 0.16.2

package/src/components/card.css

@@ -5,6 +5,9 @@
            border border-border
            rounded-xl
            shadow-xs;
+    /* min-width: 0 lets the card shrink inside a flex/grid track instead of forcing it wide. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .card-body {
@@ -13,25 +16,22 @@
 
   .card-title {
     @apply flex items-center gap-2 text-lg font-semibold leading-tight;
+    /* 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;
   }
@@ -44,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;
   }
@@ -53,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;
   }
@@ -100,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,10 +46,11 @@
     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;
+    /* Long labels wrap beside the shrink-0 box instead of overflowing. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   label:has(> .checkbox:disabled),

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;

package/src/components/container.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Page content region — a centered, max-width column that also owns the
-     vertical rhythm between stacked page sections. Drop it inside the bare
-     `.app-shell-main` (which has no padding of its own). Width presets just
-     set `--container-max`; override the var per-instance to deviate. */
+  /* Goes inside the bare `.app-shell-main` (no padding of its own); override
+     `--container-max` per-instance to deviate from the presets. */
   .container {
     @apply flex flex-col gap-6 w-full mx-auto px-6 py-6;
     max-width: var(--container-max, 90rem);
@@ -16,17 +14,15 @@
     --container-max: 115rem;
   }
 
-  /* Full-bleed: edge-to-edge within `main`, padding retained. */
   .container-fluid {
     --container-max: none;
   }
 
-  /* Denser vertical rhythm + tighter block padding for packed screens. */
   .container-compact {
     @apply gap-4 py-4;
   }
 
-  /* Less horizontal padding on small viewports — reuses the shell breakpoint. */
+  /* Reuses the shell breakpoint. */
   @media (max-width: 48rem) {
     .container {
       @apply px-4;

package/src/components/dialog.css

@@ -9,6 +9,9 @@
     width: calc(100% - 2rem);
     max-width: 32rem;
     max-height: calc(100dvh - 2rem);
+    /* Long tokens (filenames, IDs) break instead of pushing past max-width;
+       inherited by title + description. */
+    overflow-wrap: break-word;
     opacity: 1;
     transform: translateY(0) scale(1);
     transition:
@@ -18,9 +21,8 @@
       transform 150ms ease-out;
   }
 
-  /* `display: flex` only when open — without this gate, our flex rule would
-     override the UA `dialog:not([open]) { display: none }` and the dialog
-     would render in-flow before showModal() was ever called. */
+  /* Gate on [open] — an unconditional flex would override the UA's
+     `dialog:not([open]) { display: none }` and render the dialog in-flow. */
   .dialog[open] {
     display: flex;
   }
@@ -33,7 +35,6 @@
       background 150ms ease-out;
   }
 
-  /* Entry — animate from these values up to the open state. */
   @starting-style {
     .dialog[open] {
       opacity: 0;
@@ -60,22 +61,22 @@
 
   .dialog-title {
     @apply flex-1 flex items-center gap-2 text-lg font-semibold leading-tight m-0;
+    /* Let a long title shrink and wrap rather than widen the header. */
+    min-width: 0;
   }
 
   .dialog-description {
     @apply px-5 -mt-2 mb-3 text-sm text-text-muted;
   }
 
-  /* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
-     its content (a flex item's default `min-height: auto` would refuse to), so
-     tall content scrolls here while the header/footer stay pinned. */
+  /* min-h-0 beats the flex default `min-height: auto` so tall content scrolls
+     here while the header/footer stay pinned. */
   .dialog-body {
     @apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
   }
 
-  /* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
-     becomes the dialog's sole flex child — make it the flex column so the body's
-     `flex-1 min-h-0` still resolves and scrolls. */
+  /* In the form-dialog pattern the form is the sole flex child; it must carry
+     the flex column so the body's `flex-1 min-h-0` still scrolls. */
   .dialog > form {
     @apply flex flex-col min-h-0 flex-1;
   }
@@ -85,9 +86,8 @@
            px-5 py-3
            border-t border-border
            bg-surface-muted;
-    /* Inherits the dialog's bottom-corner radius so the muted background
-       doesn't square off past the parent's rounded corners — previously
-       handled by `overflow: hidden` on `.dialog`, which clipped popups. */
+    /* Keep the muted background inside the parent's rounded corners — don't
+       use `overflow: hidden` on `.dialog` for this; it clips popups. */
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }

package/src/components/field.css

@@ -1,10 +1,11 @@
 @layer components {
   .field {
     @apply flex flex-col gap-1.5;
+    /* Long operator-/validation-supplied tokens break instead of overflowing;
+       inherited by label, description, and error. */
+    overflow-wrap: break-word;
   }
 
-  /* Horizontal layout — pairs a control (typically a switch) with its label
-     on one row. Use when the label belongs beside the control, not above it. */
   .field-row {
     @apply flex-row items-center gap-3;
   }
@@ -30,8 +31,7 @@
     @apply text-xs text-danger leading-relaxed;
   }
 
-  /* When the field is in an invalid state, tint the contained control.
-     Base UI applies data-invalid on the Field root once validation fails. */
+  /* Base UI sets data-invalid on the Field root when validation fails. */
   .field[data-invalid] .input,
   .field[data-invalid] .textarea,
   .field[data-invalid] .select,

package/src/components/footer.css

@@ -1,7 +1,6 @@
 @layer components {
-  /* 2px top stripe mirrors the navbar's bottom stripe — both default to
-     a neutral gray via `--color-system-accent` and brand-shift together
-     when the consuming app overrides that variable at :root. */
+  /* The top stripe mirrors the navbar's bottom stripe; both brand-shift
+     together when the app overrides `--color-system-accent` at :root. */
   .footer {
     @apply flex flex-wrap items-center justify-between gap-3 px-4 py-3
            bg-surface-muted text-text-muted

package/src/components/indicator.css

@@ -1,23 +1,13 @@
 @layer components {
-  /*
-   * Wrapper for placing a small floating element (badge, count, status dot)
-   * at a corner or edge of another element — notification badges on icon
-   * buttons, status dots on avatars, "new" markers on tiles.
-   *
-   * Composition is driven by CSS custom properties so a horizontal modifier
-   * (start/center/end) and a vertical modifier (top/middle/bottom) compose
-   * naturally without needing a 3×3 grid of explicit selectors.
-   */
+  /* Floats a small element (badge, dot) at a corner/edge of an anchor.
+     Placement is var-driven so a horizontal and a vertical modifier compose
+     without a 3×3 grid of selectors. */
   .indicator {
     @apply relative inline-flex w-max;
   }
 
-  /*
-   * Auto-offset for common rounded anchors so the indicator aligns with the
-   * visual corner instead of the geometric box corner. Roughly half the
-   * anchor's border-radius. Override per-instance by passing the `offset`
-   * prop or setting `--indicator-offset` inline.
-   */
+  /* Auto-offset (~half the anchor's border-radius) aligns with the visual
+     corner of rounded anchors; override `--indicator-offset` inline. */
   .indicator:has(> .btn),
   .indicator:has(> .input) {
     --indicator-offset: 2px;
@@ -32,14 +22,9 @@
     bottom: var(--indicator-bottom, auto);
     inset-inline-start: var(--indicator-start, auto);
     inset-inline-end: var(--indicator-end, 0);
-    /*
-     * Two composed translates: the first half-overlaps the corner; the second
-     * pulls the item back toward the anchor center by `--indicator-offset`
-     * (default 0). The pull direction is set per-modifier so it tracks the
-     * placement automatically — e.g. `top-end` pulls left-and-down. Useful
-     * for anchors with rounded corners: try `--indicator-offset: 4px` for a
-     * `rounded-md` button.
-     */
+    /* The first translate half-overlaps the corner; the second pulls back
+       toward the anchor centre by `--indicator-offset`, direction set
+       per-modifier. */
     transform: translate(var(--indicator-tx, 50%), var(--indicator-ty, -50%))
       translate(
         var(--indicator-offset-x, calc(-1 * var(--indicator-offset, 0px))),
@@ -87,11 +72,7 @@
     --indicator-offset-y: calc(-1 * var(--indicator-offset, 0px));
   }
 
-  /*
-   * Status dot — a small saturated circle for label-less presence/status.
-   * A `.badge` with no content is still a pill (fixed height, horizontal
-   * padding); a dot needs to actually be round.
-   */
+  /* Status dot — an empty `.badge` is still a pill; a dot must be round. */
   .indicator-dot {
     @apply inline-block w-2 h-2 rounded-full bg-text-muted;
   }

package/src/components/input-group.css

@@ -3,9 +3,8 @@
     @apply inline-flex w-full;
   }
 
-  /* Clear all corners, then re-apply the outer ones on the first/last
-     child. Equal-specificity rules win because input-group.css imports
-     after input.css. */
+  /* Equal-specificity override of `.input`'s radius — works only because
+     input-group.css imports after input.css. */
   .input-group > * {
     @apply rounded-none;
   }
@@ -18,13 +17,11 @@
     @apply rounded-r-lg;
   }
 
-  /* Collapse the shared edge between adjacent children. */
   .input-group > :not(:first-child) {
     margin-left: -1px;
   }
 
-  /* Float the focused element so its outline ring and accented border
-     can't be clipped by its neighbour's overlapping edge. */
+  /* Lift above the neighbour's overlapping edge so the focus ring isn't clipped. */
   .input-group > :focus,
   .input-group > :focus-within {
     @apply relative z-10;

package/src/components/input.css

@@ -18,8 +18,7 @@
     @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
-  /* Status variants — border + focus outline only; text stays `text-text`, so
-     warning's yellow accent (which fails AA as text) is fine here. */
+  /* Status variants tint border + outline only — warning's yellow fails AA as text. */
   .input-info {
     @apply border-info hover:border-info focus-visible:outline-info;
   }
@@ -41,9 +40,7 @@
     @apply text-base px-4 py-2.5;
   }
 
-  /* Native date/time picker glyph. The browser handles dark-mode coloring
-     via the inherited `color-scheme` set on [data-theme]; we just tone the
-     glyph down at rest and brighten it on hover so it reads as interactive. */
+  /* Dark-mode glyph coloring comes free via the inherited `color-scheme`. */
   .input::-webkit-calendar-picker-indicator {
     @apply opacity-60 cursor-pointer hover:opacity-100;
   }

package/src/components/kbd.css

@@ -1,6 +1,5 @@
 @layer components {
-  /* A single keyboard chip — one modifier or key. Stack inside a `.kbd-group`
-     for multi-key chords. */
+  /* One key per chip; stack inside `.kbd-group` for chords. */
   .kbd {
     @apply inline-flex items-center justify-center
            min-w-[1.25em] h-[1.4em] px-[0.35em]
@@ -10,15 +9,12 @@
            whitespace-nowrap tabular-nums;
   }
 
-  /* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so
-     selectors can target the whole binding as a unit. */
+  /* Always emitted by the React `<Kbd>` so selectors can target the whole binding. */
   .kbd-group {
     @apply inline-flex items-center gap-1 align-middle;
   }
 
-  /* Inside an action surface (button, menu item), the chip derives its
-     colour from the host so it stays legible on any variant without
-     fighting the surrounding chrome. */
+  /* Derive the chip colour from the host so it stays legible on any variant. */
   .btn .kbd,
   .menu-item .kbd {
     color: currentColor;
@@ -26,20 +22,18 @@
     border-color: color-mix(in srgb, currentColor 22%, transparent);
   }
 
-  /* Subtle dimming for the leading cluster on a button so the label keeps
-     visual priority. The cluster, not each chip, so a `Ctrl S` reads as
-     a single unit. */
+  /* Dim the cluster (not each chip, so the chord reads as one unit) to keep
+     the label's visual priority. */
   .btn > .kbd-group {
     opacity: 0.85;
   }
 
-  /* Right-pin the binding inside menu items — matches native menu convention. */
+  /* Matches native menu convention. */
   .menu-item > .kbd-group {
     margin-inline-start: auto;
   }
 
-  /* Right-pin inside vertical button groups only. Standalone buttons keep the
-     inline-trailing layout (chip sits next to the label). */
+  /* Vertical groups only — standalone buttons keep the chip beside the label. */
   .btn-group-vertical > .btn > .kbd-group {
     margin-inline-start: auto;
   }

package/src/components/link.css

@@ -5,17 +5,15 @@
            rounded-sm transition-colors duration-150
            hover:text-link-hover
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
+    /* Links are often the URL itself — break instead of overflowing a narrow cell. */
+    overflow-wrap: break-word;
   }
 
-  /* Keep a leading icon from squishing when the link text wraps. The trailing
-     external arrow is already `flex: none` below. */
   .link > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* External affordance: a trailing ↗ rendered from CSS so it ships identically
-     in both bundles — no JS, no icon-font dependency. The arrow is a masked box
-     tinted with `currentColor`, so it tracks the link's color (incl. hover). */
+  /* Trailing ↗ drawn in CSS — no JS or icon-font dependency in either bundle. */
   .link-external {
     --link-external-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
   }