@aortl/admin-css 0.16.1 → 0.17.0

package/src/components/sidebar.css

@@ -7,8 +7,7 @@
     transition: width 150ms ease;
   }
 
-  /* Hidden checkbox that drives the collapsed state via :has(). Lives inside
-     <Sidebar.CollapseToggle>, but :has() finds it from anywhere in .sidebar. */
+  /* Hidden checkbox; :has() reads the collapsed state from anywhere in .sidebar. */
   .sidebar-toggle {
     position: absolute;
     width: 1px;
@@ -24,7 +23,6 @@
     width: var(--app-shell-sidebar-w-collapsed, 56px);
   }
 
-  /* Hide labels, group headings, badges, and tree panels in collapsed mode. */
   .sidebar:has(.sidebar-toggle:checked) .sidebar-label,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-group-label,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-badge,
@@ -33,7 +31,6 @@
     display: none;
   }
 
-  /* Center the icon in collapsed mode. */
   .sidebar:has(.sidebar-toggle:checked) .sidebar-item,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-subitem,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger {
@@ -93,7 +90,6 @@
            bg-surface-strong text-text-muted;
   }
 
-  /* Native <details> for tree groups. */
   .sidebar-collapsible {
     @apply flex flex-col;
     interpolate-size: allow-keywords;
@@ -136,8 +132,7 @@
     overflow: hidden;
   }
 
-  /* Smooth panel expansion via ::details-content (modern browsers).
-     Older browsers degrade to the native instant toggle. */
+  /* Browsers without ::details-content degrade to the instant native toggle. */
   .sidebar-collapsible::details-content {
     opacity: 0;
     height: 0;

package/src/components/spinner.css

@@ -1,7 +1,5 @@
 @layer components {
-  /* Border-driven spinner — the top edge takes the host's `currentColor` while
-     the rest stays muted, producing a visible rotating arc. Inline-block so it
-     drops into `.btn`, `.field-label`, etc., without disturbing flow layout. */
+  /* The currentColor top edge over a muted ring reads as a rotating arc. */
   .spinner {
     display: inline-block;
     width: 1rem;
@@ -25,7 +23,6 @@
     border-width: 3px;
   }
 
-  /* Honour reduced-motion — pause rather than spin frantically. */
   @media (prefers-reduced-motion: reduce) {
     .spinner {
       animation-duration: 2s;

package/src/components/stat-card.css

@@ -1,11 +1,6 @@
 @layer components {
-  /* A KPI tile is a `.card` shell with no inner `.card-body` — label / value /
-     detail stack directly on the card. Pair `.stat-card` with `.card` in the
-     markup so it inherits the surface, border, radius, and shadow, plus every
-     card modifier: `.card-bordered`, `.card-compact`, and the color variants
-     (`.card-primary`, `.card-muted`, …). `.stat-card` only adds the flat inner
-     padding/gap and the inverted hierarchy (the value dominates, the label is a
-     small annotation). */
+  /* Pairs with `.card` in the markup (no inner `.card-body`) — inherits its
+     surface and modifiers; this class only adds the flat padding/gap. */
   .stat-card {
     @apply gap-1 p-4;
   }
@@ -14,7 +9,6 @@
     @apply flex items-center gap-2 text-sm text-text-muted font-medium;
   }
 
-  /* Keep the label's leading icon at its intrinsic size. */
   .stat-card-label > :is(i, svg) {
     flex-shrink: 0;
   }
@@ -27,18 +21,13 @@
     @apply text-sm text-text-muted;
   }
 
-  /* `.card-compact` tightens `.card-body`, but a stat card has no body — apply
-     the same padding step to the stat-card root, with a tighter gap to match. */
+  /* `.card-compact` targets `.card-body`; with no body, step the root instead. */
   .card-compact.stat-card {
     @apply p-3 gap-0.5;
   }
 
-  /* Color variants (`.card-primary`, `.card-success`, …) supply the tinted
-     surface + border via `.card`. Here we tint the value to the matching accent
-     — the headline metric is a stat card's analog of `.card-title`, so a status
-     KPI reads its colour at a glance. `warning` is skipped for the same reason
-     `.card-warning` skips its title: yellow-400 fails AA on the muted yellow
-     surface. The tinted surface still carries the warning signal. */
+  /* Tint the value to the card variant's accent. `warning` is skipped like
+     `.card-warning`'s title: yellow-400 fails AA on the muted yellow surface. */
   .card-primary .stat-card-value {
     @apply text-primary;
   }

package/src/components/switch.css

@@ -30,7 +30,7 @@
     @apply translate-x-4;
   }
 
-  /* Native input variant: state is driven by :checked, thumb is ::before. */
+  /* Native input variant. */
   input.switch {
     @apply appearance-none bg-border-strong m-0;
   }
@@ -49,12 +49,10 @@
     @apply translate-x-4;
   }
 
-  /* A <label> wrapping a switch + text lays out inline.
-     Switches are wider than checkboxes/radios so the gap is a touch larger. */
+  /* Switches are wider than checkboxes/radios, so the label gap is larger. */
   label:has(> .switch) {
     @apply inline-flex items-center gap-3 cursor-pointer;
-    /* Let a long setting label break and shrink beside the `shrink-0` track
-       instead of overflowing a narrow settings panel. */
+    /* Let a long label break and shrink beside the shrink-0 track instead of overflowing. */
     overflow-wrap: break-word;
     min-width: 0;
   }

package/src/components/table.css

@@ -3,12 +3,8 @@
     @apply w-full text-sm text-text border-collapse;
   }
 
-  /* Default cell padding/alignment/divider — applied via descendant selectors
-     for hand-written markup AND via explicit classes for cases where the
-     consumer renders a non-<td>/<th> element. :where() keeps specificity at 0
-     so authored utilities and modifiers can win without !important. Covers
-     thead/tbody/tfoot uniformly so a hand-written `<tfoot> <td>` lands on
-     the same padding as the React `.table-cell`. */
+  /* Descendant selectors cover hand-written markup; explicit classes cover
+     non-<td>/<th> renders. :where() keeps specificity 0 so authored utilities win. */
   .table :where(th, td),
   .table-cell,
   .table-header-cell {
@@ -20,27 +16,31 @@
     @apply font-medium text-text-muted bg-surface-muted border-b-border-strong whitespace-nowrap;
   }
 
-  /* Body cells only — let a long unbreakable value (ID, hash, email, URL, file
-     path) break inside the cell instead of widening the column and forcing the
-     whole table into horizontal overflow. Header cells stay `whitespace-nowrap`
-     above. */
+  /* Totals/footer — all tfoot rows are emphasized; the first row carries a
+     strong divider against the body. 2px so border-collapse picks it over the
+     tbody last row's 1px border-b (equal widths resolve to the upper cell). */
+  .table :where(tfoot :is(td, th)) {
+    @apply font-semibold;
+  }
+  .table :where(tfoot tr:first-child :is(td, th)) {
+    @apply border-t-2 border-t-border-strong;
+  }
+
+  /* Body cells only — break long unbreakable values (IDs, hashes, URLs) instead
+     of forcing the table into horizontal overflow. */
   .table :where(td),
   .table-cell {
     overflow-wrap: break-word;
   }
 
-  /* Drop the divider on the very last row, whether it lives in tbody (no
-     tfoot present) or in tfoot — so the table doesn't double-border against
-     a surrounding container. `.table > :last-child` resolves to the final
-     section element (browsers wrap a loose `<tr>` in an implicit <tbody>). */
+  /* No divider on the final row — `> :last-child` is the last section, tbody or
+     tfoot (browsers wrap a loose <tr> in an implicit tbody). */
   .table > :last-child > tr:last-child :where(td),
   .table > :last-child > tr:last-child .table-cell {
     @apply border-b-0;
   }
 
-  /* Alignment — `data-align` works equally for hand-written
-     `<td data-align="right">` and for React's `<Table.Cell align="right">`,
-     so consumers never need a Tailwind utility in their markup. */
+  /* `data-align` serves both hand-written markup and React's `align` prop. */
   .table :where(th, td)[data-align="right"] {
     @apply text-right;
   }
@@ -48,15 +48,12 @@
     @apply text-center;
   }
 
-  /* Right-aligned with tabular-nums so currency/totals columns don't shimmy. */
   .table-cell-numeric {
     @apply text-right tabular-nums;
   }
 
-  /* Narrow first-column gutter for row-level status icons. The inline icon
-     rule normalizes Tabler webfont (`<i class="ti …">`) against React's
-     `<IconCircleCheck size={16}>` SVG so both deliveries land at the same
-     16px box and the same vertical baseline. */
+  /* Status-icon gutter; the child rule normalizes Tabler webfont <i> and React
+     SVG icons to the same 16px box and baseline. */
   .table-cell-gutter {
     @apply w-6 px-0 text-center text-text-muted;
   }
@@ -82,10 +79,8 @@
     @apply px-4 py-3;
   }
 
-  /* Sticky header — requires a scrolling ancestor (e.g.
-     `<div class="overflow-auto" style="max-height: …">`). The wrapper isn't
-     added by the component; it would have no vanilla equivalent and would
-     break compositions like `<details><table>…`. */
+  /* Sticky header — requires a scrolling ancestor. The component adds no wrapper:
+     it'd have no vanilla equivalent and breaks compositions like <details><table>. */
   .table-sticky thead :where(th) {
     @apply sticky top-0 z-10 bg-surface-muted;
   }
@@ -98,9 +93,7 @@
     @apply bg-surface-muted;
   }
 
-  /* Selection — pure CSS via :has(). Fires for native checkboxes,
-     Base UI's checkbox via [data-checked], and the explicit
-     [data-selected] hook for programmatic selection without a checkbox. */
+  /* [data-selected] is the hook for programmatic selection without a checkbox. */
   .table tbody tr:has(input[type="checkbox"]:checked),
   .table tbody tr:has(.checkbox[data-checked]),
   .table tbody tr[data-selected] {
@@ -112,11 +105,9 @@
     @apply bg-primary-muted;
   }
 
-  /* Whole-row link — the first <a> in the row gets its hit-area expanded to
-     fill the row via ::after. Consumer still writes the actual anchor
-     (preserves <Link>, plain <a href>, etc.). Other in-row anchors/buttons
-     should sit above the spanning pseudo-element with `relative` + non-auto
-     z-index; `.btn` already qualifies. */
+  /* The row's first <a> gets its hit-area expanded over the row via ::after;
+     other in-row anchors/buttons need `relative` + non-auto z-index to stay
+     clickable (`.btn` already qualifies). */
   .table-row-link {
     @apply relative cursor-pointer;
   }

package/src/components/tabs.css

@@ -3,10 +3,8 @@
     @apply flex flex-col;
   }
 
-  /* List + tab buttons. Same classes are produced by Base UI (React) and the
-     vanilla radio-input markup, so styling is shared. All selectors are
-     scoped under `.tabs` so generic `class="tab"` markup elsewhere on the
-     page (e.g. Starlight's own <Tabs> component) doesn't pick them up. */
+  /* All selectors are scoped under `.tabs` so generic `class="tab"` markup
+     elsewhere (e.g. Starlight's own <Tabs>) doesn't pick them up. */
   .tabs .tab-list {
     @apply inline-flex items-center gap-1 border-b border-border;
     /* Containing block for the sliding ::before marker (see @supports below) */
@@ -30,14 +28,11 @@
     @apply text-text;
   }
 
-  /* Keep a tab's leading icon at its intrinsic size when the label is long. */
   .tabs .tab > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Vanilla radio-input pattern: hide the inputs visually, treat the following
-     <label class="tab"> as the selected tab when the radio is :checked.
-     Pairs with `:has(input:checked)` below to show the right panel. */
+  /* Vanilla radio pattern: hidden inputs; :checked styles the following label. */
   .tabs .tab-input {
     position: absolute;
     width: 1px;
@@ -57,9 +52,7 @@
     @apply outline-2 outline-offset-2 outline-focus;
   }
 
-  /* Default — underline marker on the active tab. The pseudo sits below the
-     .tab, overlapping the .tab-list bottom border. Applies to any tabs root
-     that isn't .tabs-boxed, so the bare `.tabs` default gets it for free. */
+  /* Default underline marker — the pseudo overlaps the .tab-list bottom border. */
   .tabs:not(.tabs-boxed) .tab {
     position: relative;
   }
@@ -81,13 +74,12 @@
     transform: scaleX(1);
   }
 
-  /* Boxed (segmented control) — adjacent tabs share borders. */
+  /* Boxed (segmented control). */
   .tabs-boxed .tab-list {
     @apply gap-0 p-0.5 border border-border rounded-md bg-surface-muted;
   }
 
-  /* Sit above the sliding thumb (the anchored ::before below) so labels stay
-     legible while it passes behind them. */
+  /* Sit above the sliding thumb (::before below) so labels stay legible. */
   .tabs-boxed .tab {
     @apply rounded relative z-[1];
   }
@@ -98,14 +90,11 @@
     @apply bg-surface text-text shadow-sm;
   }
 
-  /* Sliding active marker — the default, with zero extra DOM. The selected tab
-     becomes a CSS anchor; a single pseudo on the .tab-list tracks it via
-     anchor() insets, and the browser interpolates those insets as the anchor
-     moves between tabs — so vanilla `:checked` markup and React both slide.
-     `anchor-scope` confines the name to each list so multiple tab sets on a
-     page don't cross-anchor; gating the whole block on its support keeps the
-     effect off where it'd misbehave, leaving the per-tab marker above as the
-     fallback. */
+  /* Sliding active marker, zero extra DOM: the selected tab becomes a CSS
+     anchor and a single .tab-list pseudo tracks it via anchor() insets, which
+     the browser interpolates between tabs — vanilla `:checked` and React both
+     slide. `anchor-scope` confines the name per list so multiple tab sets
+     don't cross-anchor; the per-tab marker above remains the fallback. */
   @supports (anchor-scope: --x) {
     .tabs .tab-list {
       anchor-scope: --tab-thumb;
@@ -123,8 +112,7 @@
       position-anchor: --tab-thumb;
     }
 
-    /* Bordered: a 2px bar sliding along the list's bottom edge — replaces the
-       per-tab ::after grow. */
+    /* Bordered: a bar sliding along the bottom edge replaces the per-tab ::after grow. */
     .tabs:not(.tabs-boxed) .tab::after {
       display: none;
     }
@@ -175,7 +163,6 @@
     }
   }
 
-  /* Full width — list stretches across the container, tabs share space evenly. */
   .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
     @apply flex w-full;
   }
@@ -184,7 +171,6 @@
     @apply flex-1 justify-center;
   }
 
-  /* Sizes — cascade to nested tabs. */
   .tabs-sm .tab {
     @apply px-2 h-7 text-xs;
   }
@@ -198,8 +184,7 @@
     @apply pt-3 outline-none;
   }
 
-  /* Vanilla radio-input pattern: only the panel whose data-value matches the
-     checked input is shown. Each .tabs root scopes its own selectors. */
+  /* Vanilla pattern: show only the panel whose data-value matches the checked input. */
   .tabs .tab-panel {
     display: none;
   }
@@ -213,14 +198,11 @@
     display: block;
   }
 
-  /* Base UI path: it renders the panel and applies `hidden`, so the rule
-     above is a no-op there. Reinstate display when the panel is shown by
-     Base UI. */
+  /* Base UI applies `hidden` itself — reinstate display for its panels. */
   .tabs .tab-panel:not([hidden]):not([data-value]) {
     display: block;
   }
 
-  /* Vertical orientation. */
   .tabs[data-orientation="vertical"] {
     @apply flex-row gap-3;
   }

package/src/components/textarea.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 color border + outline only — warning's yellow fails AA as text. */
   .textarea-info {
     @apply border-info hover:border-info focus-visible:outline-info;
   }
@@ -32,16 +31,13 @@
     @apply border-warning hover:border-warning focus-visible:outline-warning;
   }
 
-  /* Grow with content (Chromium 123+; degrades to a fixed resizable box
-     elsewhere). The floor is the larger of the base `min-h-*` and the `rows`
-     attribute; cap growth with a consumer `max-height`. Manual drag-resize is
-     off — height is content-driven. */
+  /* Grow with content (Chromium 123+; fixed box elsewhere). Floor is the larger
+     of `min-h-*` and `rows`; cap with a consumer `max-height`. */
   .textarea-autosize {
     field-sizing: content;
     resize: none;
   }
 
-  /* Sizes */
   .textarea-sm {
     @apply text-xs px-2.5 py-1.5 min-h-16;
   }

package/src/components/tooltip.css

@@ -1,17 +1,9 @@
 @layer components {
-  /*
-   * Two paths, one class.
-   *
-   * React: Base UI portals the popup to <body> and anchors it with floating-ui;
-   * the `.tooltip` class only carries paint + per-side enter/exit transitions
-   * driven by Base UI's `data-side` / `data-starting-style` / `data-ending-style`
-   * attributes.
-   *
-   * Vanilla: `.tooltip-wrap` is a `position: relative` parent that reveals a
-   * nested `.tooltip` on `:hover` / `:focus-within`. No portal, no JS — works in
-   * every modern browser today. The platform-native future is `interesttarget` +
-   * `popover="hint"`, but cross-browser support is still rolling out.
-   */
+  /* Two paths, one class. React: Base UI portals and positions the popup;
+     `.tooltip` carries paint + per-side transitions via Base UI's data attrs.
+     Vanilla: `.tooltip-wrap` reveals a nested `.tooltip` on :hover /
+     :focus-within — no JS. Replace with `interesttarget` + `popover="hint"`
+     once cross-browser support lands. */
   .tooltip {
     @apply inline-block max-w-xs px-2 py-1
            rounded-md
@@ -22,13 +14,11 @@
     text-wrap: balance;
   }
 
-  /* Sizes */
   .tooltip-sm {
     @apply px-1.5 py-0.5;
   }
 
-  /* React (portalled) enter/exit — Base UI sets these data attrs on Popup.
-     150ms ease, matching Dialog. */
+  /* React enter/exit — Base UI sets these data attrs; 150ms matches Dialog. */
   .tooltip {
     transition:
       opacity 150ms ease-out,

package/src/fonts.css

@@ -1,22 +1,10 @@
 /*
- * IBM Plex Sans + Mono — the default UI typeface for this design system.
- *
- * Hosted on Google's CDN (fonts.gstatic.com), latin + latin-ext subsets only.
- * Plex Sans is served as a variable font (one file covers weights 400–600 via
- * the wght axis); Plex Mono ships as discrete weight files.
- *
- * `font-display: swap` paints text immediately. Layout shift on swap is
- * neutralised by the metric-matched fallback faces below ("IBM Plex Sans
- * Fallback" / "IBM Plex Mono Fallback"): they alias a local system font but
- * override its metrics to occupy Plex's exact box, so the swap changes glyph
- * shapes without moving anything. The fallback families are wired into
- * `--font-sans` / `--font-mono` in theme.css, ahead of the generic stack.
- *
- * Opt out by overriding `--font-sans` / `--font-mono`, or by importing
- * admin-css's source files individually and skipping this one.
+ * IBM Plex Sans + Mono from Google's CDN (latin + latin-ext only).
+ * `font-display: swap` paints text immediately; the metric-matched fallback
+ * faces below occupy Plex's exact box, so the swap changes glyph shapes
+ * without layout shift. Opt out by overriding `--font-sans` / `--font-mono`.
  */
 
-/* IBM Plex Sans — variable, weights 400–600 */
 @font-face {
   font-family: "IBM Plex Sans";
   font-style: normal;
@@ -41,7 +29,6 @@
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* IBM Plex Mono — discrete weights 400, 500 */
 @font-face {
   font-family: "IBM Plex Mono";
   font-style: normal;
@@ -89,16 +76,10 @@
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/*
- * Metric-matched fallbacks — a local system font rewritten to Plex's box so
- * the swap above causes no layout shift. The override numbers were computed
- * once from font metrics with @capsizecss/core (`createFontStack`); the project
- * doesn't depend on capsize, so if the primary font ever changes, recompute
- * them with capsize rather than hand-editing. size-adjust holds in every
- * engine; the ascent/descent overrides are ignored by Safari/WebKit, but
- * line-gap is 0 so the residual vertical shift there is negligible.
- */
-/* IBM Plex Sans -> Arial */
+/* Metric-matched fallbacks — override numbers computed with @capsizecss/core
+   `createFontStack` (not a dependency); if the primary font changes, recompute
+   there rather than hand-editing. Safari/WebKit ignores the ascent/descent
+   overrides, but line-gap is 0 so the residual shift there is negligible. */
 @font-face {
   font-family: "IBM Plex Sans Fallback";
   src: local("Arial"), local("ArialMT");
@@ -107,7 +88,6 @@
   line-gap-override: 0%;
   size-adjust: 101.1663%;
 }
-/* IBM Plex Mono -> Courier New */
 @font-face {
   font-family: "IBM Plex Mono Fallback";
   src: local("Courier New"), local("CourierNewPSMT");