@aortl/admin-css 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -4,6 +4,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.21.0] - 2026-09-25
+
+### Added
+
+- `Button` types the HTML invoker attributes `commandfor` and `command`, which `@types/react` doesn't declare yet, so the documented `Dialog` and `Drawer` invoker examples type-check. (react)
+- `systemAccent` on `BrandTile` and `Navbar`, as on `AdminRoot` and `AppShell`: sets `--color-system-accent` inline. (react)
+- `maxWidth` on `Container` sets `--container-max` inline, overriding the `size` preset. (react)
+- `useConfirm()`, a promise-based `window.confirm`: `await confirm({ title, description, confirmLabel, cancelLabel, variant })` resolves `true` on Confirm and `false` on Cancel, Esc, or unmount. `<AdminRoot>` hosts the dialog, a `size="sm"` `Dialog` with no light dismiss that renders only while a confirm is pending, and queues concurrent calls in order. `variant: "danger"` renders a danger confirm button and focuses Cancel. Throws outside `<AdminRoot>`. (react)
+- `variant` and `size` on `Menu.Trigger` style the trigger as a `Button` (`_ao-btn`, square without children), for button-styled and split-button menus. A raw `className="btn"` on the trigger rendered unstyled under the scoped bundle, since the `_ao-` prefix is added only to admin's own classes. (react)
+
+### Changed
+
+- The asterisk on a `.field-label` follows the control's own `required` (via `:has()`) when the label is a direct child of the `.field`, so pages whose required controls lacked `[data-required]` now show one: React forms without `<Field required>`, and Django templates without crispy's `.asteriskField` (crispy labels are unchanged). `[data-required]` / `<Field required>` still add it, for controls with no native `required`, a wrapped label, or a nested field holding both its own and a sub-field's required control. `[data-required="false"]`, which `<Field required={false}>` now renders, removes it. (both)
+
+### Fixed
+
+- Containers are no longer capped at Tailwind's breakpoint widths. `admin.css` and `admin.scoped.css` shipped Tailwind's `.container` utility, whose later `utilities` layer overrode `max-width` on every `.container` and `<Container>`: the default, `container-sm`/`-lg`/`-fluid`, and per-instance `--container-max`. Container widths change as a result: wider at most viewports, and `90rem` in place of `96rem` at the widest. Tailwind builds that import the source CSS generated the same utility; `theme.css` now excludes it with `@source not inline("container")`, which needs Tailwind v4.1+. (css)
+- The checked `Switch` thumb no longer vanishes in dark mode. It was `paper` on the `primary` track, which is also paper in dark mode; the checked thumb now uses `primary-content`, as `ToggleButton`'s mini switch already did. (css)
+
+### Removed
+
+- Stray Tailwind utilities in `admin.css` and `admin.scoped.css`: `.flex`, `.grid`, `.block`, `.inline`, `.hidden`, `.sr-only`, `.relative`, `.absolute`, `.fixed`, `.sticky`, `.flex-1`, `.overflow-hidden`, `.rounded`, `.text-right`, `.tabular-nums` and a few more. The build scanned the repo for class-like strings and emitted whatever matched. Vanilla pages that relied on any of them without `admin.utilities.css` must add that bundle. `Dialog` and `Drawer` headers without a title and `Sidebar.CollapseToggle` used two of them; `.dialog-close` now pins itself to the header end with `margin-inline-start: auto`, and the toggle drops its redundant `sr-only` label (the checkbox keeps its `aria-label`). `admin.utilities.css` also loses `.transform`, which its safelist never included. (both)
+
+## [0.20.1] - 2026-07-30
+
+### Fixed
+
+- `Select` and `Tooltip` popups no longer paint behind host chrome. Base UI positions them in a `position: fixed` wrapper with `z-index: auto`, so an `<AdminRoot>` embedded in a page whose own elements carry a positive `z-index` hid its own dropdowns. Both positioners now carry a `.popup-layer` class: `z-index: var(--z-popup, 1000)`. Declare `--z-popup` on `.admin-root` or any ancestor to slot popups into a host's own stacking scale. (both)
+
 ## [0.20.0] - 2026-07-06
 
 ### Added
@@ -133,12 +162,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Make `primary` a high-contrast neutral and move blue to `info`. (both)
 - Use solid color fills for `Alert` and `Badge` status variants. (both)
 
-[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.20.0...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.21.0...HEAD
 [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
 [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
 [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
 
+[0.21.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.20.1...v0.21.0
+[0.20.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.20.0...v0.20.1
 [0.20.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.1...v0.20.0
 [0.19.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.19.0...v0.19.1
 [0.19.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.5...v0.19.0

package/dist/admin.css

@@ -370,109 +370,7 @@
     display: none !important;
   }
 }
-@layer utilities {
-  .collapse {
-    visibility: collapse;
-  }
-  .visible {
-    visibility: visible;
-  }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .relative {
-    position: relative;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .my-4 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .block {
-    display: block;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline {
-    display: inline;
-  }
-  .table {
-    display: table;
-  }
-  .table-cell {
-    display: table-cell;
-  }
-  .flex-1 {
-    flex: 1;
-  }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .rounded {
-    border-radius: 0.25rem;
-  }
-  .rounded-md {
-    border-radius: var(--radius-md);
-  }
-  .text-right {
-    text-align: right;
-  }
-  .tabular-nums {
-    --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
-  }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-}
+@layer utilities;
 @font-face {
   font-family: "IBM Plex Sans";
   font-style: normal;
@@ -2777,6 +2675,7 @@
   .switch[data-checked] .switch-thumb {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
+    background-color: var(--color-primary-content);
   }
   input.switch {
     margin: calc(var(--spacing) * 0);
@@ -2803,6 +2702,7 @@
   input.switch:checked::before {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
+    background-color: var(--color-primary-content);
   }
   label:has(> .switch) {
     display: inline-flex;
@@ -3648,6 +3548,7 @@
     border-bottom-right-radius: inherit;
   }
   .dialog-close {
+    margin-inline-start: auto;
     display: inline-flex;
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -3750,6 +3651,11 @@
     }
   }
 }
+@layer components {
+  .popup-layer {
+    z-index: var(--z-popup, 1000);
+  }
+}
 @layer components {
   .field {
     display: flex;
@@ -3771,7 +3677,7 @@
     font-weight: var(--font-weight-medium);
     color: var(--color-text);
   }
-  .field-label[data-required]::after {
+  .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: " *";
     color: var(--color-danger);
   }
@@ -5594,43 +5500,29 @@
     }
   }
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
+@property --tw-leading {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ordinal {
+@property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
-@property --tw-slashed-zero {
+@property --tw-border-style {
   syntax: "*";
   inherits: false;
+  initial-value: solid;
 }
-@property --tw-numeric-figure {
+@property --tw-outline-style {
   syntax: "*";
   inherits: false;
+  initial-value: solid;
 }
-@property --tw-numeric-spacing {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
 }
-@property --tw-numeric-fraction {
+@property --tw-tracking {
   syntax: "*";
   inherits: false;
 }
@@ -5699,29 +5591,23 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-leading {
+@property --tw-ordinal {
   syntax: "*";
   inherits: false;
 }
-@property --tw-font-weight {
+@property --tw-slashed-zero {
   syntax: "*";
   inherits: false;
 }
-@property --tw-border-style {
+@property --tw-numeric-figure {
   syntax: "*";
   inherits: false;
-  initial-value: solid;
 }
-@property --tw-duration {
+@property --tw-numeric-spacing {
   syntax: "*";
   inherits: false;
 }
-@property --tw-tracking {
+@property --tw-numeric-fraction {
   syntax: "*";
   inherits: false;
 }
@@ -5743,16 +5629,12 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
-      --tw-ordinal: initial;
-      --tw-slashed-zero: initial;
-      --tw-numeric-figure: initial;
-      --tw-numeric-spacing: initial;
-      --tw-numeric-fraction: initial;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -5767,12 +5649,11 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-border-style: solid;
-      --tw-duration: initial;
-      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;