@aortl/admin-css 0.13.0 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",

package/src/components/accordion.css

@@ -34,6 +34,12 @@
     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. */
   .accordion-summary::after {

package/src/components/alert.css

@@ -1,6 +1,9 @@
 @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:
@@ -9,7 +12,9 @@
      or any other inline SVG. */
   .alert:has(> :is(i, svg):first-child) {
     display: grid;
-    grid-template-columns: auto 1fr;
+    /* `minmax(0, 1fr)` (not the default `minmax(auto, 1fr)`) lets the text
+       column shrink below its longest word so the body wraps. */
+    grid-template-columns: auto minmax(0, 1fr);
     column-gap: 0.5rem;
     row-gap: 0.25rem;
     align-items: center;
@@ -33,8 +38,12 @@
     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. */
   .alert > :is(.alert-title, .alert-description) {
     grid-column: 2;
+    min-width: 0;
   }
 
   .alert-info {

package/src/components/badge.css

@@ -7,6 +7,11 @@
            bg-surface-strong text-text;
   }
 
+  /* Keep a status dot or leading glyph round when the label is long. */
+  .badge > :is(i, svg) {
+    flex-shrink: 0;
+  }
+
   /* Variants — match the alert palette so danger/success/etc. stay coherent
      across status indicators and chips in tables. The bare `.badge` (no
      modifier) renders the neutral look, now folded into the base. */

package/src/components/breadcrumbs.css

@@ -35,4 +35,12 @@
     width: 0.875rem;
     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. */
+  .breadcrumb-item > :is(i, svg),
+  .breadcrumb-separator > :is(i, svg) {
+    flex-shrink: 0;
+  }
 }

package/src/components/button.css

@@ -10,6 +10,13 @@
            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. */
+  .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. */
@@ -21,6 +28,15 @@
     @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. */
+  .btn-muted {
+    @apply bg-surface hover:bg-surface-muted;
+  }
+
   .btn-danger {
     @apply bg-danger text-danger-content border-transparent hover:opacity-90;
   }

package/src/components/link.css

@@ -7,6 +7,12 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
   }
 
+  /* 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). */

package/src/components/menu.css

@@ -106,6 +106,12 @@
     @apply opacity-50 cursor-not-allowed;
   }
 
+  /* Don't let a constrained menu width squish a leading/trailing icon. */
+  .menu-trigger > :is(i, svg),
+  .menu-item > :is(i, svg) {
+    flex-shrink: 0;
+  }
+
   .menu-separator {
     @apply h-px my-1 bg-border border-0;
   }

package/src/components/navbar.css

@@ -31,6 +31,12 @@
     @apply bg-primary-muted text-primary;
   }
 
+  /* Keep brand/item icons at their intrinsic size in a crowded bar. */
+  .navbar-brand > :is(i, svg),
+  .navbar-item > :is(i, svg) {
+    flex-shrink: 0;
+  }
+
   /* Right-aligned slot for actions: shop selector, user menu, etc. */
   .navbar-actions {
     @apply flex items-center gap-2 ml-auto;

package/src/components/property-list.css

@@ -28,13 +28,21 @@
     @apply text-text-muted;
   }
 
+  /* `min-width: 0` lets the value's grid track shrink below its content; pair
+     it with `overflow-wrap` so long unbreakable values (IDs, hashes, emails,
+     URLs, file paths) break instead of overflowing the column. */
   .property-list-value {
     gap: 0.5rem;
     min-width: 0;
+    overflow-wrap: break-word;
   }
 
   /* Compact density — tighter rows for sidebar info blocks or very many
      short attributes. */
+  .property-list-compact .property-list-title {
+    @apply mb-1;
+  }
+
   .property-list-compact .property-list-label,
   .property-list-compact .property-list-value {
     padding: 0.125rem 0.5rem;

package/src/components/stat-card.css

@@ -14,6 +14,11 @@
     @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;
+  }
+
   .stat-card-value {
     @apply text-2xl font-bold tabular-nums leading-tight;
   }

package/src/components/tabs.css

@@ -30,6 +30,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. */

package/src/fonts.css

@@ -1,14 +1,16 @@
 /*
  * 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.
+ * 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: optional` — the browser uses the fallback stack from
- * `--font-sans` / `--font-mono` if Plex isn't ready in ~100ms, then
- * caches it for the next page load. No FOUT, no layout shift, and on
- * fast networks the typeface still wins on first paint.
+ * `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.
@@ -19,7 +21,7 @@
   font-family: "IBM Plex Sans";
   font-style: normal;
   font-weight: 400 600;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2)
     format("woff2");
   unicode-range:
@@ -31,7 +33,7 @@
   font-family: "IBM Plex Sans";
   font-style: normal;
   font-weight: 400 600;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2)
     format("woff2");
   unicode-range:
@@ -44,7 +46,7 @@
   font-family: "IBM Plex Mono";
   font-style: normal;
   font-weight: 400;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2)
     format("woff2");
   unicode-range:
@@ -56,7 +58,7 @@
   font-family: "IBM Plex Mono";
   font-style: normal;
   font-weight: 400;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2)
     format("woff2");
   unicode-range:
@@ -67,7 +69,7 @@
   font-family: "IBM Plex Mono";
   font-style: normal;
   font-weight: 500;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2)
     format("woff2");
   unicode-range:
@@ -79,10 +81,37 @@
   font-family: "IBM Plex Mono";
   font-style: normal;
   font-weight: 500;
-  font-display: optional;
+  font-display: swap;
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2)
     format("woff2");
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
     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 */
+@font-face {
+  font-family: "IBM Plex Sans Fallback";
+  src: local("Arial"), local("ArialMT");
+  ascent-override: 101.3184%;
+  descent-override: 27.183%;
+  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");
+  ascent-override: 102.5167%;
+  descent-override: 27.5045%;
+  size-adjust: 99.9837%;
+}

package/src/theme.css

@@ -179,10 +179,11 @@
    * indirection. Override `--font-sans` to swap the entire UI font.
    */
   --font-sans:
-    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    "IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+    Roboto, sans-serif;
   --font-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
-    monospace;
+    "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
 }
 
 @theme static {