@aortl/admin-css 0.18.2 → 0.18.4

package/CHANGELOG.md

@@ -4,6 +4,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.18.4] - 2026-06-29
+
+### Added
+
+- `Tabs` `primary` prop (`.tabs-primary`) fills the active segment of a boxed segmented control with the primary color. (both)
+- `.btn-group` members can be wrapped in `.indicator` to float a badge or status dot at a button's corner; the seam, rounding, and full-width/vertical sizing logic now drills through the wrapper. (css)
+
+## [0.18.3] - 2026-06-29
+
+### Added
+
+- `Tabs.Tab` `icon` prop (leading glyph via `renderIcon`); tab SVG icons are pinned to the label size (`.tabs .tab > svg`), so non-Tabler sets (e.g. Heroicons) render uniformly. (both)
+- `Tabs` `wrap` prop (`.tabs-wrap`) lets the list wrap onto new rows instead of overflowing, keeping each tab's label on one line. (both)
+
 ## [0.18.2] - 2026-06-29
 
 ### Added
@@ -91,12 +105,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.18.2...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.4...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.18.4]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.3...v0.18.4
+[0.18.3]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...v0.18.3
 [0.18.2]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.1...v0.18.2
 [0.18.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.0...v0.18.1
 [0.18.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.17.0...v0.18.0

package/dist/admin.css

@@ -1836,7 +1836,7 @@
   .btn-group {
     display: inline-flex;
   }
-  .btn-group > .btn {
+  .btn-group > .btn, .btn-group > .indicator > .btn {
     position: relative;
     border-radius: 0;
     &:focus-visible {
@@ -1853,18 +1853,18 @@
   .btn-group > .menu > .menu-trigger {
     border-radius: 0;
   }
-  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child), .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
+  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child), .btn-group:not(.btn-group-vertical) > .menu:not(:first-child), .btn-group:not(.btn-group-vertical) > .indicator:not(:first-child) {
     margin-left: -1px;
   }
-  .btn-group:not(.btn-group-vertical) > .btn:first-child, .btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger {
+  .btn-group:not(.btn-group-vertical) > .btn:first-child, .btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger, .btn-group:not(.btn-group-vertical) > .indicator:first-child > .btn {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .btn-group:not(.btn-group-vertical) > .btn:last-child, .btn-group:not(.btn-group-vertical) > .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, .btn-group:not(.btn-group-vertical) > .indicator:last-child > .btn {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-  .btn-group:not(.btn-group-vertical) > .btn:not(:first-child), .btn-group:not(.btn-group-vertical) > .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, .btn-group:not(.btn-group-vertical) > .indicator:not(:first-child) > .btn {
     border-left-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       border-left-color: color-mix(in oklab, currentColor 25%, transparent);
@@ -1874,21 +1874,27 @@
     display: inline-flex;
     flex-direction: column;
   }
-  .btn-group-vertical > .btn {
+  .btn-group-vertical > .btn, .btn-group-vertical > .indicator > .btn {
     justify-content: flex-start;
   }
-  .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child) {
+  .btn-group-vertical > .indicator {
+    width: auto;
+  }
+  .btn-group-vertical > .indicator > .btn {
+    width: 100%;
+  }
+  .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child), .btn-group-vertical > .indicator:not(:first-child) {
     margin-top: -1px;
   }
-  .btn-group-vertical > .btn:first-child, .btn-group-vertical > .menu:first-child > .menu-trigger {
+  .btn-group-vertical > .btn:first-child, .btn-group-vertical > .menu:first-child > .menu-trigger, .btn-group-vertical > .indicator:first-child > .btn {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
   }
-  .btn-group-vertical > .btn:last-child, .btn-group-vertical > .menu:last-child > .menu-trigger {
+  .btn-group-vertical > .btn:last-child, .btn-group-vertical > .menu:last-child > .menu-trigger, .btn-group-vertical > .indicator:last-child > .btn {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child) > .menu-trigger {
+  .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child) > .menu-trigger, .btn-group-vertical > .indicator:not(:first-child) > .btn {
     border-top-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       border-top-color: color-mix(in oklab, currentColor 25%, transparent);
@@ -1898,9 +1904,12 @@
     display: flex;
     width: 100%;
   }
-  .btn-group-full-width:not(.btn-group-vertical) > .btn, .btn-group-full-width:not(.btn-group-vertical) > .menu {
+  .btn-group-full-width:not(.btn-group-vertical) > .btn, .btn-group-full-width:not(.btn-group-vertical) > .menu, .btn-group-full-width:not(.btn-group-vertical) > .indicator {
     flex: 1;
   }
+  .btn-group-full-width:not(.btn-group-vertical) > .indicator > .btn {
+    width: 100%;
+  }
   .btn-group-full-width.btn-group-vertical {
     width: 100%;
   }
@@ -4681,6 +4690,10 @@
   .tabs .tab > :is(i, svg) {
     flex-shrink: 0;
   }
+  .tabs .tab > svg {
+    width: 1em;
+    height: 1em;
+  }
   .tabs .tab-input {
     position: absolute;
     width: 1px;
@@ -4736,6 +4749,12 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .tabs-boxed.tabs-primary .tab[data-selected], .tabs-boxed.tabs-primary .tab[aria-selected="true"], .tabs-boxed.tabs-primary .tab-input:checked + .tab {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   @supports (anchor-scope: --x) {
     .tabs .tab-list {
       anchor-scope: --tab-thumb;
@@ -4785,6 +4804,17 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition: top 180ms ease, right 180ms ease, bottom 180ms ease, left 180ms ease;
     }
+    .tabs-boxed.tabs-primary .tab[data-selected], .tabs-boxed.tabs-primary .tab[aria-selected="true"], .tabs-boxed.tabs-primary .tab-input:checked + .tab {
+      background-color: transparent;
+      color: var(--color-primary-content);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .tabs-boxed.tabs-primary .tab-list::before {
+      background-color: var(--color-primary);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
   }
   .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
     display: flex;
@@ -4794,6 +4824,12 @@
     flex: 1;
     justify-content: center;
   }
+  .tabs-wrap .tab-list {
+    flex-wrap: wrap;
+  }
+  .tabs-wrap .tab {
+    white-space: nowrap;
+  }
   .tabs-sm .tab {
     height: calc(var(--spacing) * 7);
     padding-inline: calc(var(--spacing) * 2);