@aortl/admin-react 0.18.3 → 0.18.4

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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
@@ -98,12 +105,13 @@ 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.3...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

package/dist/Tabs.d.ts

@@ -9,8 +9,10 @@ export interface TabsProps extends ComponentProps<typeof BaseTabs.Root> {
     fullWidth?: boolean;
     /** Let the list wrap to multiple rows instead of overflowing; each tab stays on one line. */
     wrap?: boolean;
+    /** Fill the active segment with the primary color. Only affects `variant="boxed"`. */
+    primary?: boolean;
 }
-declare function TabsRoot({ variant, size, fullWidth, wrap, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsRoot({ variant, size, fullWidth, wrap, primary, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export type TabsListProps = ComponentProps<typeof BaseTabs.List>;
 declare function TabsList({ className, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
 export interface TabsTabProps extends ComponentProps<typeof BaseTabs.Tab> {

package/dist/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAoB,EACpB,IAAW,EACX,SAAiB,EACjB,IAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,2CAgBX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC;IACvE,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAOpE;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEnE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAExD;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAoB,EACpB,IAAW,EACX,SAAiB,EACjB,IAAY,EACZ,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,2CAiBX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC;IACvE,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAOpE;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEnE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAExD;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}

package/dist/admin.scoped.css

@@ -1934,11 +1934,11 @@
 :scope._ao-btn-group, :scope ._ao-btn-group {
     display: inline-flex;
   }
-:scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
+:scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn, :scope._ao-btn-group > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group > ._ao-indicator > ._ao-btn {
     position: relative;
     border-radius: 0;
   }
-:scope:is(._ao-btn-group > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn):focus-visible {
+:scope:is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible {
       z-index: 10;
     }
 :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
@@ -1953,22 +1953,22 @@
 :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
     border-radius: 0;
   }
-:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) {
+:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) {
     margin-left: -1px;
   }
-:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger {
+:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn {
     border-top-left-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger {
+:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn {
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
-:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
+:scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
     border-left-color: currentColor;
   }
 @supports (color: color-mix(in lab, red, red)) {
-  :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
+  :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
       border-left-color: color-mix(in oklab, currentColor 25%, transparent);
   }
     }
@@ -1976,25 +1976,31 @@
     display: inline-flex;
     flex-direction: column;
   }
-:scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn {
+:scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn, :scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
     justify-content: flex-start;
   }
-:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) {
+:scope._ao-btn-group-vertical > ._ao-indicator, :scope ._ao-btn-group-vertical > ._ao-indicator {
+    width: auto;
+  }
+:scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
+    width: 100%;
+  }
+:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) {
     margin-top: -1px;
   }
-:scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger {
+:scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
   }
-:scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger {
+:scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
+:scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
     border-top-color: currentColor;
   }
 @supports (color: color-mix(in lab, red, red)) {
-  :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
+  :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
       border-top-color: color-mix(in oklab, currentColor 25%, transparent);
   }
     }
@@ -2002,9 +2008,12 @@
     display: flex;
     width: 100%;
   }
-:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu {
+:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator {
     flex: 1;
   }
+:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn {
+    width: 100%;
+  }
 :scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical {
     width: 100%;
   }
@@ -4810,6 +4819,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);
   }
+:scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-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) {
     :scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
       anchor-scope: --tab-thumb;
@@ -4859,6 +4874,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;
     }
+    :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-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);
+    }
+    :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list::before, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-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);
+    }
   }
 :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
     display: flex;

package/dist/index.cjs

@@ -2352,14 +2352,15 @@ var Navbar = Object.assign(NavbarRoot, {
 });
 //#endregion
 //#region src/Tabs.tsx
-function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, wrap = false, className, ...rest }) {
+function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, wrap = false, primary = false, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
 		className: cn([
 			"tabs",
 			variant !== "bordered" && `tabs-${variant}`,
 			size !== "md" && `tabs-${size}`,
 			fullWidth && "tabs-full-width",
-			wrap && "tabs-wrap"
+			wrap && "tabs-wrap",
+			primary && "tabs-primary"
 		], className),
 		...rest
 	});