@aortl/admin-css 0.16.2 → 0.17.0

package/package.json

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

package/src/components/alert.css

@@ -14,13 +14,25 @@
     align-items: center;
   }
 
+  /* A trailing action switches to grid even without an icon. */
+  .alert:has(> .alert-action) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 0.5rem;
+    row-gap: 0.25rem;
+    align-items: center;
+  }
+  .alert:has(> :is(i, svg):first-child):has(> .alert-action) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
   .alert > :is(i, svg):first-child {
     font-size: 1rem;
     line-height: 1.25;
   }
 
-  /* 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) {
+  /* Replaces the icon-gated explicit-rows rule — rows whenever anything spans them. */
+  .alert:has(> .alert-title):is(:has(> :is(i, svg):first-child), :has(> .alert-action)) {
     grid-template-rows: auto auto;
     align-items: start;
   }
@@ -29,11 +41,23 @@
     grid-row: 1 / -1;
   }
 
-  /* Grid items default to `min-width: auto` and won't shrink below their longest word. */
+  /* The column-2 pin becomes icon-gated so title/description auto-place into
+     column 1 in an action-only grid. min-width stays unconditional. */
   .alert > :is(.alert-title, .alert-description) {
-    grid-column: 2;
     min-width: 0;
   }
+  .alert:has(> :is(i, svg):first-child) > :is(.alert-title, .alert-description) {
+    grid-column: 2;
+  }
+
+  /* `-2` is the last explicit column in both grids; spans both rows, centered. */
+  .alert > .alert-action {
+    @apply font-medium whitespace-nowrap;
+    grid-column: -2;
+    grid-row: 1 / -1;
+    justify-self: end;
+    align-self: center;
+  }
 
   /* Solid status fills. Title and icon inherit the `-content` color from the
      root, so no per-variant text rule is needed. */
@@ -60,4 +84,10 @@
   .alert-description {
     opacity: 0.85;
   }
+
+  /* `.link`'s blue is illegible on the solid fills; inherit the variant's content
+     color. Underline + weight carry the affordance. */
+  .alert .link {
+    @apply text-current hover:text-current hover:opacity-85 focus-visible:outline-current;
+  }
 }

package/src/components/avatar.css

@@ -0,0 +1,36 @@
+@layer components {
+  .avatar {
+    @apply relative inline-flex items-center justify-center
+           size-8 rounded-full overflow-hidden
+           bg-surface-strong text-text-muted
+           text-xs font-medium leading-none tracking-tight
+           select-none shrink-0;
+  }
+
+  /* Layered over the initials so they show until the image loads (no JS). */
+  .avatar > img {
+    @apply absolute inset-0 size-full object-cover;
+  }
+
+  .avatar-square {
+    @apply rounded-md;
+  }
+
+  .avatar-sm {
+    @apply size-6 text-[0.625rem];
+  }
+  .avatar-lg {
+    @apply size-10 text-sm;
+  }
+
+  /* Overlapping stack — later siblings paint on top. */
+  .avatar-group {
+    @apply inline-flex items-center;
+  }
+  .avatar-group > .avatar {
+    @apply ring-2 ring-surface;
+  }
+  .avatar-group > .avatar + .avatar {
+    @apply -ms-2;
+  }
+}

package/src/components/badge.css

@@ -34,6 +34,42 @@
     @apply bg-primary text-primary-content;
   }
 
+  /* Soft — composable modifier, pairs with a variant class; bare `.badge` is already the soft neutral. */
+  .badge-soft.badge-info {
+    @apply bg-info-muted text-info border-info-muted;
+  }
+  .badge-soft.badge-success {
+    @apply bg-success-muted text-success border-success-muted;
+  }
+  /* Yellow accent text fails contrast on the tinted surface — same constraint as stat-card. */
+  .badge-soft.badge-warning {
+    @apply bg-warning-muted text-text border-warning-muted;
+  }
+  .badge-soft.badge-danger {
+    @apply bg-danger-muted text-danger border-danger-muted;
+  }
+  .badge-soft.badge-primary {
+    @apply bg-primary-muted text-text border-primary-muted;
+  }
+
+  /* Remove button — sized to the chip; hover wash from `currentColor` works on solid, soft, and neutral fills. */
+  .badge-remove {
+    @apply inline-flex items-center justify-center shrink-0
+           size-3.5 -mr-1 rounded-full
+           text-inherit cursor-pointer
+           transition-colors duration-150
+           focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus;
+  }
+  .badge-remove:hover {
+    background-color: color-mix(in oklab, currentColor 15%, transparent);
+  }
+  .badge-sm .badge-remove {
+    @apply size-3 -mr-0.5;
+  }
+  .badge-lg .badge-remove {
+    @apply size-4.5 -mr-1.5;
+  }
+
   /* Sizes (md is the default; modifiers override) */
   .badge-sm {
     @apply h-4 px-1.5 text-[0.625rem] gap-0.5;

package/src/components/brand-tile.css

@@ -6,4 +6,40 @@
            bg-system-accent text-system-accent-content
            shrink-0 select-none;
   }
+
+  /* Glyph sizing moves into CSS so vanilla drops the inline font-size
+     and React renders icons at 1em. */
+  .brand-tile > :is(i, svg) {
+    font-size: 14px;
+  }
+
+  .brand-tile-lg {
+    @apply size-10 rounded-md text-sm;
+  }
+  .brand-tile-lg > :is(i, svg) {
+    font-size: 20px;
+  }
+
+  /* Soft tints — *-muted fill, colored glyph. */
+  .brand-tile-soft {
+    @apply bg-system-accent-muted text-system-accent;
+  }
+  .brand-tile-info {
+    @apply bg-info-muted text-info;
+  }
+  .brand-tile-success {
+    @apply bg-success-muted text-success;
+  }
+  .brand-tile-danger {
+    @apply bg-danger-muted text-danger;
+  }
+
+  /* Image tile (shop logo) — :has() flips the accent fill to a bordered
+     surface; object-contain keeps arbitrary-ratio logos uncropped. */
+  .brand-tile:has(> img) {
+    @apply bg-surface border border-border p-0.5;
+  }
+  .brand-tile > img {
+    @apply size-full object-contain rounded-[inherit];
+  }
 }

package/src/components/card.css

@@ -96,4 +96,42 @@
 
   /* No `.card-warning .card-title` rule — the yellow-400 accent fails AA on
      the muted yellow surface. */
+
+  /* Full-bleed media. Sibling of .card-body; first/last placement picks up the
+     card's corner rounding without overflow on the root. */
+  .card-media {
+    @apply block w-full shrink-0 overflow-hidden;
+  }
+  .card-media:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  .card-media:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-media > :is(img, video) {
+    @apply block w-full h-full object-cover;
+  }
+
+  /* Scroll region — header/actions pin, body scrolls; consumer sets the height.
+     Direct-child header/actions gain padding + a divider since inside
+     .card-body they carry none. */
+  .card-scroll > .card-header {
+    @apply shrink-0 px-5 py-3 border-b border-border;
+  }
+  .card-scroll > .card-body {
+    @apply flex-1 min-h-0 overflow-y-auto;
+  }
+  .card-scroll > .card-body:last-child {
+    /* Keep the scrollbar inside the rounded corners when there's no footer. */
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-scroll > .card-actions {
+    @apply shrink-0 px-5 py-3 border-t border-border;
+  }
+  .card-compact.card-scroll > :is(.card-header, .card-actions) {
+    @apply px-3 py-2;
+  }
 }

package/src/components/index.css

@@ -4,6 +4,7 @@
 @import "./container.css";
 @import "./badge.css";
 @import "./brand-tile.css";
+@import "./avatar.css";
 @import "./kbd.css";
 @import "./indicator.css";
 @import "./spinner.css";
@@ -11,11 +12,13 @@
 @import "./breadcrumbs.css";
 @import "./pagination.css";
 @import "./property-list.css";
+@import "./separator.css";
 @import "./button.css";
 @import "./button-group.css";
 @import "./link.css";
 @import "./input.css";
 @import "./input-group.css";
+@import "./input-icon.css";
 @import "./textarea.css";
 @import "./checkbox.css";
 @import "./radio.css";

package/src/components/indicator.css

@@ -15,6 +15,18 @@
   .indicator:has(> .card) {
     --indicator-offset: 6px;
   }
+  .indicator:has(> .avatar) {
+    --indicator-offset: 5px;
+  }
+  .indicator:has(> .avatar-sm) {
+    --indicator-offset: 3px;
+  }
+  .indicator:has(> .avatar-lg) {
+    --indicator-offset: 6px;
+  }
+  .indicator:has(> .avatar-square) {
+    --indicator-offset: 2px;
+  }
 
   .indicator-item {
     @apply absolute z-[1] whitespace-nowrap;

package/src/components/input-icon.css

@@ -0,0 +1,46 @@
+@layer components {
+  /* Overlay wrapper — the .input child keeps its own border, background,
+     and focus outline; icons float above it, :has() padding clears them. */
+  .input-icon {
+    @apply relative inline-flex w-full items-center text-sm text-text-muted;
+    --input-icon-inset: calc(var(--spacing) * 3); /* matches .input px-3 */
+    --input-icon-pad: calc(var(--spacing) * 9);
+  }
+
+  .input-icon:has(> .input-sm) {
+    @apply text-xs;
+    --input-icon-inset: calc(var(--spacing) * 2.5);
+    --input-icon-pad: calc(var(--spacing) * 8);
+  }
+
+  .input-icon:has(> .input-lg) {
+    @apply text-base;
+    --input-icon-inset: calc(var(--spacing) * 4);
+    --input-icon-pad: calc(var(--spacing) * 10);
+  }
+
+  /* Clicks pass through the icon to the input beneath it. */
+  .input-icon > :where(i, svg) {
+    @apply absolute top-1/2 -translate-y-1/2 pointer-events-none;
+  }
+
+  .input-icon > :where(i, svg):first-child {
+    left: var(--input-icon-inset);
+  }
+
+  .input-icon > .input ~ :where(i, svg) {
+    right: var(--input-icon-inset);
+  }
+
+  .input-icon:has(> :where(i, svg):first-child) > .input {
+    padding-left: var(--input-icon-pad);
+  }
+
+  .input-icon:has(> .input ~ :where(i, svg)) > .input {
+    padding-right: var(--input-icon-pad);
+  }
+
+  .input-icon:has(> .input:disabled) > :where(i, svg) {
+    @apply opacity-50;
+  }
+}

package/src/components/separator.css

@@ -0,0 +1,13 @@
+@layer components {
+  /* Works on <hr> (border reset) and any block element. Margins are zeroed —
+     spacing comes from the parent's gap or margin utilities. */
+  .separator {
+    @apply block h-px w-full m-0 shrink-0 border-0 bg-border;
+  }
+
+  .separator-vertical {
+    @apply w-px h-auto self-stretch;
+    /* Visible outside a stretching flex/grid cross axis. */
+    min-height: 1lh;
+  }
+}

package/src/components/table.css

@@ -16,6 +16,16 @@
     @apply font-medium text-text-muted bg-surface-muted border-b-border-strong whitespace-nowrap;
   }
 
+  /* 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),