@aortl/admin-css 0.16.2 → 0.18.0

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/drawer.css

@@ -0,0 +1,81 @@
+@layer components {
+  /* A Dialog variant: the same native <dialog> machinery (showModal, ::backdrop,
+     @starting-style, allow-discrete transitions), edge-anchored instead of
+     centred. `.drawer` overrides `.dialog`'s centring; it imports after dialog.css
+     so equal-specificity rules win. The base opacity fade still applies. */
+  .drawer {
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+    height: 100dvh;
+    width: min(28rem, 100vw);
+    /* Default: anchored to the inline-end (right in LTR) edge. */
+    margin-inline-start: auto;
+    transform: translateX(100%);
+  }
+  .drawer[open] {
+    transform: translateX(0);
+  }
+  @starting-style {
+    .drawer[open] {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Inline-start (left in LTR) edge. */
+  .drawer-start {
+    margin-inline-start: 0;
+    margin-inline-end: auto;
+    transform: translateX(-100%);
+  }
+  @starting-style {
+    .drawer-start[open] {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* Bottom sheet. */
+  .drawer-bottom {
+    width: 100vw;
+    height: auto;
+    max-height: 85dvh;
+    margin-block-start: auto;
+    margin-inline: 0;
+    transform: translateY(100%);
+  }
+  .drawer-bottom[open] {
+    transform: translateY(0);
+  }
+  @starting-style {
+    .drawer-bottom[open] {
+      transform: translateY(100%);
+    }
+  }
+
+  /* Sizes adjust the cross-axis extent. */
+  .drawer-sm {
+    width: min(20rem, 100vw);
+  }
+  .drawer-lg {
+    width: min(36rem, 100vw);
+  }
+  .drawer-bottom.drawer-sm {
+    width: 100vw;
+    max-height: 50dvh;
+  }
+  .drawer-bottom.drawer-lg {
+    width: 100vw;
+    max-height: 95dvh;
+  }
+
+  /* Slide is decorative — drop it under reduced motion, keep the opacity fade. */
+  @media (prefers-reduced-motion: reduce) {
+    .drawer {
+      transition:
+        display 150ms allow-discrete,
+        overlay 150ms allow-discrete,
+        opacity 150ms ease-out;
+    }
+  }
+}

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,14 @@
 @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 "./number-input.css";
 @import "./textarea.css";
 @import "./checkbox.css";
 @import "./radio.css";
@@ -23,7 +27,10 @@
 @import "./select.css";
 @import "./card.css";
 @import "./stat-card.css";
+@import "./item.css";
+@import "./timeline.css";
 @import "./dialog.css";
+@import "./drawer.css";
 @import "./field.css";
 @import "./file-input.css";
 @import "./footer.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,65 @@
+@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);
+  }
+
+  /* Decorative glyphs pass clicks through; an interactive trailing button doesn't. */
+  .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);
+  }
+
+  /* Trailing slot — a glyph or an interactive `.input-action` button after the input. */
+  .input-icon > .input ~ :where(i, svg, .input-action) {
+    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-action)) > .input {
+    padding-right: var(--input-icon-pad);
+  }
+
+  .input-icon:has(> .input:disabled) > :where(i, svg) {
+    @apply opacity-50;
+  }
+
+  /* Interactive trailing control (clear, password reveal). Positioned like the
+     trailing glyph but clickable, with a currentColor hover wash. */
+  .input-action {
+    @apply absolute top-1/2 -translate-y-1/2
+           inline-flex items-center justify-center
+           size-5 rounded
+           text-text-muted cursor-pointer
+           bg-transparent border-0
+           hover:text-text
+           focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus;
+  }
+  .input-action:hover {
+    background-color: color-mix(in oklab, currentColor 12%, transparent);
+  }
+  .input-icon:has(> .input:disabled) > .input-action {
+    @apply opacity-50 pointer-events-none;
+  }
+}

package/src/components/item.css

@@ -0,0 +1,76 @@
+@layer components {
+  /* Compact low-chrome row between Table and Card: media | content | actions.
+     For settings rows, member lists, notifications, search results. */
+  .item {
+    @apply flex items-center gap-3 w-full px-3 py-2 text-sm text-text;
+  }
+
+  .item-media {
+    @apply flex items-center shrink-0 text-text-muted;
+  }
+  .item-media > :is(i, svg) {
+    font-size: 1.25rem;
+  }
+
+  /* min-w-0 lets the text column shrink so long values wrap instead of pushing
+     the actions off the row. */
+  .item-content {
+    @apply flex flex-col gap-0.5 flex-1 min-w-0;
+  }
+  .item-title {
+    @apply font-medium leading-tight;
+    overflow-wrap: break-word;
+  }
+  .item-description {
+    @apply text-text-muted leading-snug;
+    text-wrap: pretty;
+  }
+
+  .item-actions {
+    @apply flex items-center gap-2 shrink-0 relative z-[1];
+    margin-inline-start: auto;
+  }
+
+  /* Variants — keep it flat: default / outline / muted only. */
+  .item-outline {
+    @apply border border-border rounded-lg;
+  }
+  .item-muted {
+    @apply bg-surface-muted rounded-lg;
+  }
+
+  /* Sizes */
+  .item-sm {
+    @apply gap-2 px-2 py-1.5 text-xs;
+  }
+  .item-lg {
+    @apply gap-4 px-4 py-3 text-base;
+  }
+
+  /* Divided stack. */
+  .item-group {
+    @apply flex flex-col;
+  }
+  .item-group > .item:not(:last-child) {
+    @apply border-b border-border;
+  }
+  .item-group-bordered {
+    @apply border border-border rounded-lg overflow-hidden;
+  }
+
+  /* Clickable row — the first nested <a> fills the row via ::after; actions keep
+     their own stacking context so they stay clickable (same trick as table-row-link). */
+  .item-link {
+    @apply relative cursor-pointer;
+  }
+  .item-link:hover {
+    @apply bg-surface-muted;
+  }
+  .item-link a:first-of-type::after {
+    content: "";
+    @apply absolute inset-0;
+  }
+  .item-link:focus-within {
+    @apply outline-2 -outline-offset-2 outline-focus;
+  }
+}

package/src/components/menu.css

@@ -102,6 +102,21 @@
     flex-shrink: 0;
   }
 
+  /* Checkbox/radio items — a leading indicator column whose check shows only when
+     aria-checked. In vanilla, set role=menuitemcheckbox/menuitemradio + aria-checked;
+     the gutter is always reserved so labels stay aligned across the group. */
+  .menu-item-indicator {
+    @apply inline-flex items-center justify-center shrink-0;
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+  .menu-item-indicator > :is(i, svg) {
+    opacity: 0;
+  }
+  .menu-item[aria-checked="true"] .menu-item-indicator > :is(i, svg) {
+    opacity: 1;
+  }
+
   .menu-separator {
     @apply h-px my-1 bg-border border-0;
   }

package/src/components/number-input.css

@@ -0,0 +1,64 @@
+@layer components {
+  /* React's Base UI Root is a transparent wrapper; the visual group is `.number-input`. */
+  .number-input-root {
+    display: contents;
+  }
+
+  /* Connected group: − | input | +, mirroring .input-group's look. */
+  .number-input {
+    @apply inline-flex w-full items-stretch
+           rounded-lg border border-border bg-surface
+           transition-colors duration-150
+           focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-focus;
+  }
+  .number-input:hover {
+    @apply border-border-strong;
+  }
+
+  /* Borderless field: right-aligned tabular digits, native spinners hidden. */
+  .number-input-field {
+    @apply flex-1 min-w-0 w-full px-3 py-2
+           bg-transparent text-sm leading-none text-text text-right tabular-nums
+           border-0 outline-none
+           placeholder:text-text-muted
+           disabled:opacity-50 disabled:cursor-not-allowed;
+    -moz-appearance: textfield;
+  }
+  .number-input-field::-webkit-inner-spin-button,
+  .number-input-field::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Stepper buttons. */
+  .number-input-step {
+    @apply inline-flex items-center justify-center shrink-0
+           w-8 text-text-muted bg-transparent
+           cursor-pointer select-none border-0
+           hover:bg-surface-muted hover:text-text
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  .number-input-step:first-child {
+    @apply border-r border-border rounded-l-lg;
+  }
+  .number-input-step:last-child {
+    @apply border-l border-border rounded-r-lg;
+  }
+  .number-input-step > :is(i, svg) {
+    font-size: 0.875rem;
+  }
+
+  /* Sizes */
+  .number-input-sm .number-input-field {
+    @apply text-xs px-2.5 py-1.5;
+  }
+  .number-input-sm .number-input-step {
+    @apply w-7;
+  }
+  .number-input-lg .number-input-field {
+    @apply text-base px-4 py-2.5;
+  }
+  .number-input-lg .number-input-step {
+    @apply w-9;
+  }
+}

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/stat-card.css

@@ -21,6 +21,39 @@
     @apply text-sm text-text-muted;
   }
 
+  /* Trend delta — caret drawn from borders (no icon dependency) plus a value.
+     `data-trend` rotates the caret; `data-intent` colors it, kept independent
+     because up is not always good (a rising error rate is bad). */
+  .stat-card-trend {
+    @apply inline-flex items-center gap-1 text-sm font-medium tabular-nums text-text-muted;
+  }
+  .stat-card-trend::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-inline: 0.3em solid transparent;
+    border-block-end: 0.42em solid currentColor;
+  }
+  .stat-card-trend[data-trend="down"]::before {
+    border-block-end: 0;
+    border-block-start: 0.42em solid currentColor;
+  }
+  .stat-card-trend[data-trend="flat"]::before {
+    width: 0.55em;
+    border-inline: 0;
+    border-block-end: 0;
+    border-block-start: 0.16em solid currentColor;
+  }
+  .stat-card-trend[data-intent="positive"] {
+    @apply text-success;
+  }
+  .stat-card-trend[data-intent="negative"] {
+    @apply text-danger;
+  }
+  .stat-card-trend[data-intent="neutral"] {
+    @apply text-text-muted;
+  }
+
   /* `.card-compact` targets `.card-body`; with no body, step the root instead. */
   .card-compact.stat-card {
     @apply p-3 gap-0.5;

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),
@@ -111,4 +121,48 @@
   .table-row-link:focus-within {
     @apply outline-2 -outline-offset-2 outline-focus;
   }
+
+  /* Compact density — mirrors table-relaxed at the tight end. */
+  .table-compact :where(th, td),
+  .table-compact .table-cell,
+  .table-compact .table-header-cell {
+    @apply px-2 py-1 text-xs;
+  }
+
+  /* Empty state — a centered, muted message row (author sets colspan). */
+  .table :where(td).table-empty,
+  .table-empty {
+    @apply text-center text-text-muted py-8;
+  }
+  /* No hover affordance on the empty-state row. */
+  .table tbody tr:has(> .table-empty):hover :where(td) {
+    background-color: transparent;
+  }
+
+  /* Pinned first column — sticky against horizontal scroll. Requires an
+     overflow-x ancestor (the table adds no wrapper, same stance as table-sticky).
+     Each row state repaints the cell so scrolled content doesn't bleed through. */
+  .table-pin-col :where(thead th, tbody td, tfoot :is(td, th)):first-child {
+    position: sticky;
+    inset-inline-start: 0;
+  }
+  .table-pin-col tbody td:first-child {
+    z-index: 1;
+    background-color: var(--color-surface);
+  }
+  /* Header corner sits above the body column and the sticky header row. */
+  .table-pin-col :where(thead th):first-child {
+    z-index: 11;
+  }
+  .table-pin-col.table-striped tbody tr:nth-child(even) td:first-child {
+    background-color: var(--color-surface-muted);
+  }
+  .table-pin-col tbody tr:hover td:first-child {
+    background-color: var(--color-surface-muted);
+  }
+  .table-pin-col tbody tr:has(input[type="checkbox"]:checked) td:first-child,
+  .table-pin-col tbody tr:has(.checkbox[data-checked]) td:first-child,
+  .table-pin-col tbody tr[data-selected] td:first-child {
+    background-color: var(--color-primary-muted);
+  }
 }

package/src/components/timeline.css

@@ -0,0 +1,113 @@
+@layer components {
+  /* Vertical event rail: an indicator gutter and a content column per <li>, with
+     a connector line drawn down the gutter that stops at the last item. */
+  .timeline {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .timeline-item {
+    display: grid;
+    grid-template-columns: 1.5rem 1fr;
+    column-gap: 0.75rem;
+    padding-bottom: 1rem;
+    position: relative;
+  }
+  .timeline-item:last-child {
+    padding-bottom: 0;
+  }
+
+  /* Connector — vertical line centred in the gutter, hidden on the last item. */
+  .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    inset-block: 0.75rem 0;
+    inset-inline-start: 0.75rem;
+    width: 2px;
+    transform: translateX(-50%);
+    background-color: var(--color-border);
+  }
+
+  .timeline-indicator {
+    grid-column: 1;
+    align-self: start;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    position: relative;
+    z-index: 1;
+  }
+  .timeline-dot {
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background-color: var(--color-border-strong);
+    box-shadow: 0 0 0 3px var(--color-surface);
+  }
+  /* Surface backing masks the connector running behind an icon indicator. */
+  .timeline-indicator > :is(i, svg) {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    background-color: var(--color-surface);
+    border-radius: 9999px;
+  }
+
+  .timeline-content {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+    padding-block: 0.125rem 0;
+  }
+  .timeline-title {
+    @apply text-sm font-medium text-text leading-tight;
+  }
+  .timeline-time {
+    @apply text-xs text-text-muted tabular-nums;
+  }
+  .timeline-description {
+    @apply text-sm text-text-muted;
+    text-wrap: pretty;
+  }
+
+  /* Status accents on the dot. */
+  .timeline-item-info .timeline-dot {
+    background-color: var(--color-info);
+  }
+  .timeline-item-success .timeline-dot {
+    background-color: var(--color-success);
+  }
+  .timeline-item-warning .timeline-dot {
+    background-color: var(--color-warning);
+  }
+  .timeline-item-danger .timeline-dot {
+    background-color: var(--color-danger);
+  }
+
+  /* Numbered variant — the gutter holds a numbered/checked marker (steps rail). */
+  .timeline-numbered .timeline-item {
+    grid-template-columns: 1.75rem 1fr;
+  }
+  .timeline-numbered .timeline-item:not(:last-child)::before {
+    inset-inline-start: 0.875rem;
+    inset-block: 1.75rem 0;
+  }
+  .timeline-numbered .timeline-indicator {
+    height: 1.75rem;
+  }
+  .timeline-marker {
+    @apply inline-flex items-center justify-center
+           size-7 rounded-full text-xs font-semibold tabular-nums
+           bg-surface-strong text-text-muted;
+    box-shadow: 0 0 0 3px var(--color-surface);
+  }
+  /* Completed and current steps fill with the primary ink. */
+  .timeline-item-success .timeline-marker,
+  .timeline-item-current .timeline-marker {
+    @apply bg-primary text-primary-content;
+  }
+}