@aortl/admin-css 0.12.1 → 0.13.1

package/src/components/link.css

@@ -0,0 +1,32 @@
+@layer components {
+  .link {
+    @apply inline-flex items-center gap-1
+           text-primary underline underline-offset-2
+           rounded-sm transition-colors duration-150
+           hover:text-primary-hover
+           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). */
+  .link-external {
+    --link-external-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
+  }
+
+  .link-external::after {
+    content: "";
+    flex: none;
+    width: 0.85em;
+    height: 0.85em;
+    background-color: currentColor;
+    -webkit-mask: var(--link-external-arrow) center / contain no-repeat;
+    mask: var(--link-external-arrow) center / contain no-repeat;
+  }
+}

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/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/components/textarea.css

@@ -18,6 +18,29 @@
     @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. */
+  .textarea-info {
+    @apply border-info hover:border-info focus-visible:outline-info;
+  }
+
+  .textarea-success {
+    @apply border-success hover:border-success focus-visible:outline-success;
+  }
+
+  .textarea-warning {
+    @apply border-warning hover:border-warning focus-visible:outline-warning;
+  }
+
+  /* Grow with content (Chromium 123+; degrades to a fixed resizable box
+     elsewhere). `min-h-*` / the `rows` attribute stays the floor; cap growth
+     with a consumer `max-height`. Manual drag-resize is off — height is
+     content-driven. */
+  .textarea-autosize {
+    field-sizing: content;
+    resize: none;
+  }
+
   /* Sizes */
   .textarea-sm {
     @apply text-xs px-2.5 py-1.5 min-h-16;