@aortl/admin-css 0.7.1 → 0.8.0

package/src/components/button-group.css

@@ -7,18 +7,6 @@
     @apply rounded-none relative focus-visible:z-10;
   }
 
-  .btn-group > .btn:not(:first-child) {
-    @apply -ml-px;
-  }
-
-  .btn-group > .btn:first-child {
-    @apply rounded-l-lg;
-  }
-
-  .btn-group > .btn:last-child {
-    @apply rounded-r-lg;
-  }
-
   /* Split-button support: a <details class="menu"> child sits in the strip
      alongside .btn children, with its .menu-trigger getting the same edge
      treatment as the buttons around it. inline-flex on the details makes
@@ -29,19 +17,26 @@
     display: inline-flex;
   }
 
-  .btn-group > .menu:not(:first-child) {
-    @apply -ml-px;
-  }
-
   .btn-group > .menu > .menu-trigger {
     @apply rounded-none;
   }
 
-  .btn-group > .menu:first-child > .menu-trigger {
+  /* Horizontal-only: overlap left edges, round outer left/right corners,
+     and paint the seam between adjacent items as a left-side divider.
+     Scoped with :not(.btn-group-vertical) so vertical groups (which share
+     the .btn-group class) don't inherit horizontal edge treatment. */
+  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
+  .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
+    @apply -ml-px;
+  }
+
+  .btn-group:not(.btn-group-vertical) > .btn:first-child,
+  .btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger {
     @apply rounded-l-lg;
   }
 
-  .btn-group > .menu:last-child > .menu-trigger {
+  .btn-group:not(.btn-group-vertical) > .btn:last-child,
+  .btn-group:not(.btn-group-vertical) > .menu:last-child > .menu-trigger {
     @apply rounded-r-lg;
   }
 
@@ -50,8 +45,8 @@
      means the divider works across every .btn variant — light on
      coloured buttons, dark on ghost/secondary — without per-variant
      rules. */
-  .btn-group > .btn:not(:first-child),
-  .btn-group > .menu:not(:first-child) > .menu-trigger {
+  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
+  .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
     border-left-color: color-mix(in srgb, currentColor 25%, transparent);
   }
 
@@ -59,15 +54,27 @@
     @apply inline-flex flex-col;
   }
 
-  .btn-group-vertical > .btn:not(:first-child) {
-    @apply -mt-px ml-0;
+  .btn-group-vertical > .btn {
+    @apply justify-start;
+  }
+
+  .btn-group-vertical > .btn:not(:first-child),
+  .btn-group-vertical > .menu:not(:first-child) {
+    @apply -mt-px;
+  }
+
+  .btn-group-vertical > .btn:first-child,
+  .btn-group-vertical > .menu:first-child > .menu-trigger {
+    @apply rounded-t-lg;
   }
 
-  .btn-group-vertical > .btn:first-child {
-    @apply rounded-t-lg rounded-bl-none;
+  .btn-group-vertical > .btn:last-child,
+  .btn-group-vertical > .menu:last-child > .menu-trigger {
+    @apply rounded-b-lg;
   }
 
-  .btn-group-vertical > .btn:last-child {
-    @apply rounded-b-lg rounded-tr-none;
+  .btn-group-vertical > .btn:not(:first-child),
+  .btn-group-vertical > .menu:not(:first-child) > .menu-trigger {
+    border-top-color: color-mix(in srgb, currentColor 25%, transparent);
   }
 }

package/src/components/dialog.css

@@ -5,7 +5,6 @@
            border border-border
            rounded-xl
            shadow-lg
-           overflow-hidden
            flex-col;
     width: calc(100% - 2rem);
     max-width: 32rem;
@@ -76,6 +75,11 @@
            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. */
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
   }
 
   .dialog-close {

package/src/components/index.css

@@ -3,6 +3,8 @@
 @import "./app-shell.css";
 @import "./badge.css";
 @import "./brand-tile.css";
+@import "./kbd.css";
+@import "./indicator.css";
 @import "./spinner.css";
 @import "./progress.css";
 @import "./breadcrumbs.css";

package/src/components/indicator.css

@@ -0,0 +1,113 @@
+@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.
+   */
+  .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.
+   */
+  .indicator:has(> .btn),
+  .indicator:has(> .input) {
+    --indicator-offset: 2px;
+  }
+  .indicator:has(> .card) {
+    --indicator-offset: 6px;
+  }
+
+  .indicator-item {
+    @apply absolute z-[1] whitespace-nowrap;
+    top: var(--indicator-top, 0);
+    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.
+     */
+    transform: translate(var(--indicator-tx, 50%), var(--indicator-ty, -50%))
+      translate(
+        var(--indicator-offset-x, calc(-1 * var(--indicator-offset, 0px))),
+        var(--indicator-offset-y, var(--indicator-offset, 0px))
+      );
+  }
+
+  /* Horizontal */
+  .indicator-start {
+    --indicator-start: 0;
+    --indicator-end: auto;
+    --indicator-tx: -50%;
+    --indicator-offset-x: var(--indicator-offset, 0px);
+  }
+  .indicator-center {
+    --indicator-start: 50%;
+    --indicator-end: auto;
+    --indicator-tx: -50%;
+    --indicator-offset-x: 0px;
+  }
+  .indicator-end {
+    --indicator-start: auto;
+    --indicator-end: 0;
+    --indicator-tx: 50%;
+    --indicator-offset-x: calc(-1 * var(--indicator-offset, 0px));
+  }
+
+  /* Vertical */
+  .indicator-top {
+    --indicator-top: 0;
+    --indicator-bottom: auto;
+    --indicator-ty: -50%;
+    --indicator-offset-y: var(--indicator-offset, 0px);
+  }
+  .indicator-middle {
+    --indicator-top: 50%;
+    --indicator-bottom: auto;
+    --indicator-ty: -50%;
+    --indicator-offset-y: 0px;
+  }
+  .indicator-bottom {
+    --indicator-top: auto;
+    --indicator-bottom: 0;
+    --indicator-ty: 50%;
+    --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.
+   */
+  .indicator-dot {
+    @apply inline-block w-2 h-2 rounded-full bg-text-muted;
+  }
+  .indicator-dot-info {
+    @apply bg-info;
+  }
+  .indicator-dot-success {
+    @apply bg-success;
+  }
+  .indicator-dot-warning {
+    @apply bg-warning;
+  }
+  .indicator-dot-danger {
+    @apply bg-danger;
+  }
+  .indicator-dot-primary {
+    @apply bg-primary;
+  }
+}

package/src/components/kbd.css

@@ -0,0 +1,47 @@
+@layer components {
+  /* A single keyboard chip — one modifier or key. Stack inside a `.kbd-group`
+     for multi-key chords. */
+  .kbd {
+    @apply inline-flex items-center justify-center
+           min-w-[1.25em] h-[1.4em] px-[0.35em]
+           rounded border border-border
+           bg-surface-strong text-text-muted
+           text-[0.75em] font-mono leading-none align-middle
+           whitespace-nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so
+     selectors can target the whole binding as a unit. */
+  .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. */
+  .btn .kbd,
+  .menu-item .kbd {
+    color: currentColor;
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+    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. */
+  .btn > .kbd-group {
+    opacity: 0.85;
+  }
+
+  /* Right-pin the binding inside menu items — 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). */
+  .btn-group-vertical > .btn > .kbd-group {
+    margin-inline-start: auto;
+  }
+}

package/src/components/menu.css

@@ -59,6 +59,38 @@
            border border-border rounded-lg shadow-md;
   }
 
+  /* CSS anchor positioning makes the popup `position: fixed` so it escapes
+     ancestor `overflow: hidden`/`overflow: auto` clipping — necessary when
+     the menu lives inside a `<dialog>` (top-layer + overflow: hidden) or a
+     scroll-clipped surface like a card body. `anchor-scope` keeps each
+     menu's anchor lookups isolated so multiple menus on the page don't
+     cross-target, and `position-try-fallbacks` flips the popup above the
+     trigger when there isn't room below. Browsers without anchor
+     positioning (Firefox, as of early 2026) fall back to the absolute
+     rules above and clip as before. */
+  @supports (anchor-name: --x) {
+    .menu {
+      anchor-scope: --menu-trigger;
+    }
+    .menu-trigger {
+      anchor-name: --menu-trigger;
+    }
+    .menu-popup {
+      position: fixed;
+      position-anchor: --menu-trigger;
+      top: anchor(bottom);
+      left: anchor(left);
+      position-try-fallbacks: --menu-popup-flip-up;
+    }
+  }
+
+  @position-try --menu-popup-flip-up {
+    top: auto;
+    bottom: anchor(top);
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
   .menu-item {
     @apply flex items-center gap-2 w-full px-3 py-1.5 text-sm leading-none
            text-text bg-transparent

package/src/components/property-list.css

@@ -59,7 +59,7 @@
   }
 
   /* Copy button — always emitted by the Value but kept out of layout entirely
-     unless copyable is active on the list or on this specific value. */
+     unless this specific value opts in. */
   .property-list-copy {
     @apply inline-flex items-center justify-center
            ml-auto rounded
@@ -74,7 +74,6 @@
       color 100ms ease;
   }
 
-  .property-list-copyable .property-list-copy,
   .property-list-value-copyable .property-list-copy {
     display: inline-flex;
     opacity: 0;
@@ -83,8 +82,6 @@
 
   /* Reveal on hover of either the label or the value of a copyable row, on
      button focus, or while feedback is active. */
-  .property-list-copyable .property-list-label:hover + .property-list-value .property-list-copy,
-  .property-list-copyable .property-list-value:hover .property-list-copy,
   .property-list-label:has(+ .property-list-value-copyable):hover
     + .property-list-value
     .property-list-copy,

package/src/theme.css

@@ -33,21 +33,21 @@
   --color-*: initial;
 
   /* Base */
-  --color-paper: #fffcf0;
-  --color-black: #100f0f;
-  --color-base-50: #f2f0e5;
-  --color-base-100: #e6e4d9;
-  --color-base-150: #dad8ce;
-  --color-base-200: #cecdc3;
-  --color-base-300: #b7b5ac;
-  --color-base-400: #9f9d96;
-  --color-base-500: #878580;
-  --color-base-600: #6f6e69;
-  --color-base-700: #575653;
-  --color-base-800: #403e3c;
-  --color-base-850: #343331;
-  --color-base-900: #282726;
-  --color-base-950: #1c1b1a;
+  --color-paper: #ffffff;
+  --color-black: #0f0f0f;
+  --color-base-50: #fafafa;
+  --color-base-100: #f4f4f4;
+  --color-base-150: #e7e7e7;
+  --color-base-200: #d4d4d4;
+  --color-base-300: #b3b3b3;
+  --color-base-400: #9b9b9b;
+  --color-base-500: #848484;
+  --color-base-600: #6c6c6c;
+  --color-base-700: #555555;
+  --color-base-800: #3e3e3e;
+  --color-base-850: #333333;
+  --color-base-900: #272727;
+  --color-base-950: #1b1b1b;
 
   /* Red */
   --color-red-50: #ffe1d5;