@aortl/admin-css 0.20.1 → 0.21.0

package/package.json

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

package/src/admin.css

@@ -1,8 +1,6 @@
 @layer theme, base, components, utilities;
 
-@import "tailwindcss";
-
-@source "../../admin-react/src/**/*.{ts,tsx}";
+@import "tailwindcss" source(none);
 
 @import "./fonts.css";
 @import "./theme.css";

package/src/components/button.css

@@ -43,6 +43,7 @@
      a background circle so the slide is one background-position. Drawn in
      both states so an off toggle still reads as a toggle. */
   .btn:is([aria-pressed], [data-pressed])::before {
+    /* Off thumb is paper in both modes — it reads on the border-strong track either way. */
     --btn-toggle-thumb: var(--color-paper);
     content: "";
     flex-shrink: 0;
@@ -64,8 +65,8 @@
   }
 
   .btn:is([aria-pressed="true"], [data-pressed])::before {
-    /* Thumb is primary-content, not .switch's paper — paper would vanish on
-       the dark-mode paper track. */
+    /* Thumb is primary-content, not paper — paper would vanish on the
+       dark-mode paper track. */
     --btn-toggle-thumb: var(--color-primary-content);
     background-color: var(--color-primary);
     background-position: calc(100% - 2px) 50%;

package/src/components/dialog.css

@@ -115,9 +115,10 @@
     border-bottom-right-radius: inherit;
   }
 
+  /* ms-auto pins the button to the header's end when there is no title. */
   .dialog-close {
     @apply inline-flex items-center justify-center
-           size-7 shrink-0
+           size-7 shrink-0 ms-auto
            rounded-md text-text-muted
            bg-transparent
            hover:bg-surface-strong hover:text-text

package/src/components/field.css

@@ -14,7 +14,15 @@
     @apply text-sm font-medium text-text leading-none;
   }
 
-  .field-label[data-required]::after {
+  /* A required control marks only its own field's label. Branch 1: top-level fields; branch 2:
+     fields with no required sub-field; a nested field with both needs [data-required]. :where()
+     keeps specificity equal to the [data-required] branch, so one host override beats both. */
+  .field-label[data-required]:not([data-required="false"], :has(.asteriskField))::after,
+  .field:where(
+      :has(:required:not(.field .field :required)),
+      :has(:required):not(:has(.field :required))
+    )
+    > .field-label:not([data-required="false"], :has(.asteriskField))::after {
     content: " *";
     @apply text-danger;
   }

package/src/components/switch.css

@@ -21,13 +21,14 @@
     @apply opacity-50 cursor-not-allowed;
   }
 
+  /* Off thumb is paper in both modes — it reads on the border-strong track either way. */
   .switch-thumb {
     @apply size-4 rounded-full bg-paper shadow-sm
            transition-transform duration-150;
   }
 
   .switch[data-checked] .switch-thumb {
-    @apply translate-x-4;
+    @apply translate-x-4 bg-primary-content;
   }
 
   /* Native input variant. */
@@ -39,6 +40,7 @@
     @apply bg-primary;
   }
 
+  /* Off thumb is paper in both modes — it reads on the border-strong track either way. */
   input.switch::before {
     content: "";
     @apply size-4 rounded-full bg-paper shadow-sm
@@ -46,7 +48,7 @@
   }
 
   input.switch:checked::before {
-    @apply translate-x-4;
+    @apply translate-x-4 bg-primary-content;
   }
 
   /* Switches are wider than checkboxes/radios, so the label gap is larger. */

package/src/theme.css

@@ -6,6 +6,11 @@
  * (--color-primary) or the palette tone underneath it.
  */
 
+/* Tailwind's `container` utility shares container.css's class name and would
+   override it in builds that generate utilities (the docs, Tailwind consumers).
+   Here because theme.css, unlike components/index.css, is never layer-wrapped. */
+@source not inline("container");
+
 @theme static {
   /* Wipe Tailwind's default palette — Flexoki is the single source of truth. */
   --color-*: initial;

package/src/utilities.css

@@ -3,7 +3,7 @@
 @reference "tailwindcss";
 @reference "./theme.css";
 
-@import "tailwindcss/utilities.css" layer(utilities);
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
 
 /*
  * Pre-built utility safelist for the no-build `admin.utilities.css` bundle,