@adia-ai/web-components 0.6.33 → 0.6.34

package/components/modal/modal.css

@@ -9,24 +9,24 @@
 
 @scope (modal-ui) {
   :where(:scope) {
-    --modal-width:          32rem;
-    --modal-radius:         var(--a-radius-lg);
-    --modal-bg:             var(--a-bg-subtle);
-    --modal-border:         var(--a-border-subtle);
-    --modal-shadow:         var(--a-shadow-lg);
-    --modal-backdrop:       var(--a-scrim-dialog);
-    --modal-duration:       var(--a-duration);
-    --modal-easing:         var(--a-easing-out);
-    --modal-heading-size:   var(--a-ui-lg);
-    --modal-heading-weight: var(--a-weight-semibold);
-    --modal-header-fg:      var(--a-fg);
-    --modal-close-fg:       var(--a-fg-muted);
-    --modal-close-hover:    var(--a-fg);
-    --modal-pad-header:     var(--a-space-3);
-    --modal-pad-body:       var(--a-space-4);
-    --modal-pad-footer:     var(--a-space-3);
-    --modal-font-family:    var(--a-font-family);
-    --modal-footer-gap:     var(--a-space-2);
+    --modal-width-default:          32rem;
+    --modal-radius-default:         var(--a-radius-lg);
+    --modal-bg-default:             var(--a-bg-subtle);
+    --modal-border-default:         var(--a-border-subtle);
+    --modal-shadow-default:         var(--a-shadow-lg);
+    --modal-backdrop-default:       var(--a-scrim-dialog);
+    --modal-duration-default:       var(--a-duration);
+    --modal-easing-default:         var(--a-easing-out);
+    --modal-heading-size-default:   var(--a-ui-lg);
+    --modal-heading-weight-default: var(--a-weight-semibold);
+    --modal-header-fg-default:      var(--a-fg);
+    --modal-close-fg-default:       var(--a-fg-muted);
+    --modal-close-hover-default:    var(--a-fg);
+    --modal-pad-header-default:     var(--a-space-3);
+    --modal-pad-body-default:       var(--a-space-4);
+    --modal-pad-footer-default:     var(--a-space-3);
+    --modal-font-family-default:    var(--a-font-family);
+    --modal-footer-gap-default:     var(--a-space-2);
   }
 
   :scope {
@@ -35,9 +35,9 @@
   }
 
   /* ── Size variants ── */
-  :scope[size="sm"] { --modal-width: min(24rem, 90vw); }
-  :scope[size="md"] { --modal-width: min(32rem, 90vw); }
-  :scope[size="lg"] { --modal-width: min(48rem, 90vw); }
+  :scope[size="sm"] { --modal-width-default: min(24rem, 90vw); }
+  :scope[size="md"] { --modal-width-default: min(32rem, 90vw); }
+  :scope[size="lg"] { --modal-width-default: min(48rem, 90vw); }
 
   /* ═══════ Closed ═══════ */
   :scope > [slot="dialog"]:not([open]) { display: none; }
@@ -63,9 +63,9 @@
 
   /* ═══════ Backdrop ═══════ */
   :scope > [slot="dialog"]::backdrop {
-    background: var(--modal-backdrop);
+    background: var(--modal-backdrop, var(--modal-backdrop-default));
     opacity: 0;
-    transition: opacity var(--modal-duration) var(--modal-easing);
+    transition: opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
   }
   :scope > [slot="dialog"][data-open]::backdrop    { opacity: 1; }
   :scope > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
@@ -75,14 +75,14 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    width: var(--modal-width);
+    width: var(--modal-width, var(--modal-width-default));
     max-height: 85vh;
-    background: var(--modal-bg);
-    color: var(--modal-header-fg);
-    font-family: var(--modal-font-family);
-    border: 1px solid var(--modal-border);
-    border-radius: var(--modal-radius);
-    box-shadow: var(--modal-shadow);
+    background: var(--modal-bg, var(--modal-bg-default));
+    color: var(--modal-header-fg, var(--modal-header-fg-default));
+    font-family: var(--modal-font-family, var(--modal-font-family-default));
+    border: 1px solid var(--modal-border, var(--modal-border-default));
+    border-radius: var(--modal-radius, var(--modal-radius-default));
+    box-shadow: var(--modal-shadow, var(--modal-shadow-default));
     overflow: hidden;
     opacity: 0;
     transform: scale(0.95);
@@ -90,16 +90,16 @@
 
   /* ═══════ Open animation ═══════ */
   :scope > [slot="dialog"][data-open] > [slot="panel"] {
-    transition: transform var(--modal-duration) var(--modal-easing),
-                opacity var(--modal-duration) var(--modal-easing);
+    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
+                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
     transform: scale(1);
     opacity: 1;
   }
 
   /* ═══════ Close animation ═══════ */
   :scope > [slot="dialog"][data-closing] > [slot="panel"] {
-    transition: transform var(--modal-duration) var(--modal-easing),
-                opacity var(--modal-duration) var(--modal-easing);
+    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
+                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
     transform: scale(0.95);
     opacity: 0;
   }
@@ -109,11 +109,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--modal-pad-header) var(--modal-pad-body);
-    border-bottom: 1px solid var(--modal-border);
-    font-size: var(--modal-heading-size);
-    font-weight: var(--modal-heading-weight);
-    color: var(--modal-header-fg);
+    padding: var(--modal-pad-header, var(--modal-pad-header-default)) var(--modal-pad-body, var(--modal-pad-body-default));
+    border-bottom: 1px solid var(--modal-border, var(--modal-border-default));
+    font-size: var(--modal-heading-size, var(--modal-heading-size-default));
+    font-weight: var(--modal-heading-weight, var(--modal-heading-weight-default));
+    color: var(--modal-header-fg, var(--modal-header-fg-default));
     flex-shrink: 0;
   }
   :scope [slot="header"]::before {
@@ -128,7 +128,7 @@
 
   /* ═══════ Body ═══════ */
   :scope [slot="body"] {
-    padding: var(--modal-pad-body);
+    padding: var(--modal-pad-body, var(--modal-pad-body-default));
     flex: 1;
     overflow: auto;
   }
@@ -138,9 +138,9 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--modal-footer-gap);
-    padding: var(--modal-pad-footer) var(--modal-pad-body);
-    border-top: 1px solid var(--modal-border);
+    gap: var(--modal-footer-gap, var(--modal-footer-gap-default));
+    padding: var(--modal-pad-footer, var(--modal-pad-footer-default)) var(--modal-pad-body, var(--modal-pad-body-default));
+    border-top: 1px solid var(--modal-border, var(--modal-border-default));
     flex-shrink: 0;
   }
 }

package/components/nav/nav.css

@@ -6,36 +6,36 @@
 @scope (nav-ui) {
   :where(:scope) {
     /* Shared */
-    --nav-gap:       var(--a-space-1);
-    --nav-px:        var(--a-space-2);
-    --nav-py:        var(--a-space-2);
-    --nav-font-size: var(--a-ui-size);
-    --nav-bg:        transparent;
-    --nav-divider-bg: var(--a-border-subtle);
-    --nav-divider-my: var(--a-space-1);
+    --nav-gap-default:       var(--a-space-1);
+    --nav-px-default:        var(--a-space-2);
+    --nav-py-default:        var(--a-space-2);
+    --nav-font-size-default: var(--a-ui-size);
+    --nav-bg-default:        transparent;
+    --nav-divider-bg-default: var(--a-border-subtle);
+    --nav-divider-my-default: var(--a-space-1);
 
     /* Primary-variant collapse */
-    --nav-width:           auto;
-    --nav-width-collapsed: 48px;
-    --nav-duration: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
-    --nav-easing:   var(--a-easing, ease);
+    --nav-width-default:           auto;
+    --nav-width-collapsed-default: 48px;
+    --nav-duration-default: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
+    --nav-easing-default:   var(--a-easing, ease);
 
     /* Group-heading kicker */
-    --nav-label-fg:        var(--a-fg-muted);
-    --nav-label-font-size: var(--a-kicker-sm);
-    --nav-label-weight:    var(--a-weight-medium);
-    --nav-label-px:        var(--a-space-2);
-    --nav-label-py:        var(--a-space-3) var(--a-space-1);
+    --nav-label-fg-default:        var(--a-fg-muted);
+    --nav-label-font-size-default: var(--a-kicker-sm);
+    --nav-label-weight-default:    var(--a-weight-medium);
+    --nav-label-px-default:        var(--a-space-2);
+    --nav-label-py-default:        var(--a-space-3) var(--a-space-1);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--nav-gap);
-    padding: var(--nav-py) var(--nav-px);
-    background: var(--nav-bg);
-    font-size: var(--nav-font-size);
+    gap: var(--nav-gap, var(--nav-gap-default));
+    padding: var(--nav-py, var(--nav-py-default)) var(--nav-px, var(--nav-px-default));
+    background: var(--nav-bg, var(--nav-bg-default));
+    font-size: var(--nav-font-size, var(--nav-font-size-default));
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -47,30 +47,30 @@
   /* ── Primary variant (default) ── */
 
   :scope:not([variant="section"]) {
-    width: var(--nav-width);
-    transition: width var(--nav-duration) var(--nav-easing);
+    width: var(--nav-width, var(--nav-width-default));
+    transition: width var(--nav-duration, var(--nav-duration-default)) var(--nav-easing, var(--nav-easing-default));
   }
 
   :scope:not([variant="section"])[collapsed] {
-    width: var(--nav-width-collapsed);
-    --nav-px: var(--a-space-1);
+    width: var(--nav-width-collapsed, var(--nav-width-collapsed-default));
+    --nav-px-default: var(--a-space-1);
   }
 
   /* Container-query collapse — when nav lives in a sidebar that goes
      narrow, behave as if [collapsed] regardless of attribute. */
   @container sidebar (max-width: 96px) {
     :scope:not([variant="section"]) {
-      --nav-px: var(--a-space-1);
+      --nav-px-default: var(--a-space-1);
     }
   }
 
   /* Group label kicker (group header text inside nav-group) */
   [data-nav-label] {
     display: block;
-    padding: var(--nav-label-py) var(--nav-label-px);
-    font-size: var(--nav-label-font-size);
-    font-weight: var(--nav-label-weight);
-    color: var(--nav-label-fg);
+    padding: var(--nav-label-py, var(--nav-label-py-default)) var(--nav-label-px, var(--nav-label-px-default));
+    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
+    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
+    color: var(--nav-label-fg, var(--nav-label-fg-default));
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;
@@ -81,17 +81,17 @@
   [data-nav-divider] {
     border: none;
     height: 1px;
-    background: var(--nav-divider-bg);
-    margin: var(--nav-divider-my) 0;
+    background: var(--nav-divider-bg, var(--nav-divider-bg-default));
+    margin: var(--nav-divider-my, var(--nav-divider-my-default)) 0;
   }
 
   /* Auto-dividers between groups when [divider] set */
   :scope[divider] > nav-group-ui + nav-group-ui,
   :scope[divider] > nav-item-ui + nav-group-ui,
   :scope[divider] > nav-group-ui + nav-item-ui {
-    border-top: 1px solid var(--nav-divider-bg);
-    margin-top: var(--nav-divider-my);
-    padding-top: var(--nav-divider-my);
+    border-top: 1px solid var(--nav-divider-bg, var(--nav-divider-bg-default));
+    margin-top: var(--nav-divider-my, var(--nav-divider-my-default));
+    padding-top: var(--nav-divider-my, var(--nav-divider-my-default));
   }
 
   /* Spacer — pushes items below to bottom */
@@ -113,18 +113,18 @@
   /* ── Section variant ── */
 
   :scope[variant="section"] {
-    --nav-px: 0;
-    --nav-py: 0;
+    --nav-px-default: 0;
+    --nav-py-default: 0;
   }
 
   /* Heading rendered from [heading] attribute on section variant. */
   :scope[variant="section"][heading]:not([heading=""])::before {
     content: attr(heading);
     display: block;
-    padding: var(--nav-label-py) var(--nav-label-px);
-    font-size: var(--nav-label-font-size);
-    font-weight: var(--nav-label-weight);
-    color: var(--nav-label-fg);
+    padding: var(--nav-label-py, var(--nav-label-py-default)) var(--nav-label-px, var(--nav-label-px-default));
+    font-size: var(--nav-label-font-size, var(--nav-label-font-size-default));
+    font-weight: var(--nav-label-weight, var(--nav-label-weight-default));
+    color: var(--nav-label-fg, var(--nav-label-fg-default));
     text-transform: uppercase;
     letter-spacing: 0.06em;
     white-space: nowrap;

package/components/nav-group/nav-group.css

@@ -1,25 +1,25 @@
 @scope (nav-group-ui) {
   :where(:scope) {
-    --nav-group-row-height:    var(--a-size);
-    --nav-group-row-height-sm: var(--a-size-sm);
-    --nav-group-row-height-lg: var(--a-size-lg);
-    --nav-group-row-px:        var(--a-ui-px);
-    --nav-group-row-gap:       var(--a-space-1);
-    --nav-group-row-radius:    var(--a-radius-md);
-    --nav-group-font-size:     var(--a-ui-size);
-    --nav-group-font-size-sm:  var(--a-ui-sm);
-    --nav-group-font-size-lg:  var(--a-ui-lg);
-    --nav-group-font-weight:   var(--a-weight-normal);
-    --nav-group-fg:            var(--a-fg);
-    --nav-group-fg-hover:      var(--a-fg-strong);
-    --nav-group-fg-muted:      var(--a-fg-muted);
-    --nav-group-fg-selected:   var(--a-fg-strong);
-    --nav-group-bg-hover:      var(--a-bg-muted);
-    --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
-    --nav-group-badge-size:    var(--a-ui-sm);
+    --nav-group-row-height-default:    var(--a-size);
+    --nav-group-row-height-sm-default: var(--a-size-sm);
+    --nav-group-row-height-lg-default: var(--a-size-lg);
+    --nav-group-row-px-default:        var(--a-ui-px);
+    --nav-group-row-gap-default:       var(--a-space-1);
+    --nav-group-row-radius-default:    var(--a-radius-md);
+    --nav-group-font-size-default:     var(--a-ui-size);
+    --nav-group-font-size-sm-default:  var(--a-ui-sm);
+    --nav-group-font-size-lg-default:  var(--a-ui-lg);
+    --nav-group-font-weight-default:   var(--a-weight-normal);
+    --nav-group-fg-default:            var(--a-fg);
+    --nav-group-fg-hover-default:      var(--a-fg-strong);
+    --nav-group-fg-muted-default:      var(--a-fg-muted);
+    --nav-group-fg-selected-default:   var(--a-fg-strong);
+    --nav-group-bg-hover-default:      var(--a-bg-muted);
+    --nav-group-icon-size-default:     calc(var(--nav-group-row-height, var(--nav-group-row-height-default)) - var(--a-space-2));
+    --nav-group-badge-size-default:    var(--a-ui-sm);
 
     --nav-item-child-height:    var(--a-size-sm);
-    --nav-item-child-font:      var(--nav-group-font-size);
+    --nav-item-child-font:      var(--nav-group-font-size, var(--nav-group-font-size-default));
   }
 
   :scope {
@@ -35,29 +35,29 @@
   :scope[open]::after {
     content: '';
     position: absolute;
-    left: calc(var(--nav-group-row-px) + var(--nav-group-icon-size) / 2);
+    left: calc(var(--nav-group-row-px, var(--nav-group-row-px-default)) + var(--nav-group-icon-size, var(--nav-group-icon-size-default)) / 2);
     transform: translateX(-50%);
-    top: var(--nav-group-row-height);
-    bottom: calc(var(--nav-group-row-height) / 2);
+    top: var(--nav-group-row-height, var(--nav-group-row-height-default));
+    bottom: calc(var(--nav-group-row-height, var(--nav-group-row-height-default)) / 2);
     width: 1px;
     background: var(--nav-group-indent-rail-bg);
     pointer-events: none;
   }
   :scope[open] > [slot="header"],
  :scope[open] > [slot="header"] [slot="icon"] {
-    color: var(--nav-group-fg-selected);
+    color: var(--nav-group-fg-selected, var(--nav-group-fg-selected-default));
   }
 
   /* Header row */
   [slot="header"] {
     display: flex;
     align-items: center;
-    gap: var(--nav-group-row-gap);
-    height: var(--nav-group-row-height);
-    padding: 0 var(--nav-group-row-px);
-    border-radius: var(--nav-group-row-radius);
-    font-size: var(--nav-group-font-size);
-    color: var(--nav-group-fg);
+    gap: var(--nav-group-row-gap, var(--nav-group-row-gap-default));
+    height: var(--nav-group-row-height, var(--nav-group-row-height-default));
+    padding: 0 var(--nav-group-row-px, var(--nav-group-row-px-default));
+    border-radius: var(--nav-group-row-radius, var(--nav-group-row-radius-default));
+    font-size: var(--nav-group-font-size, var(--nav-group-font-size-default));
+    color: var(--nav-group-fg, var(--nav-group-fg-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
@@ -68,25 +68,25 @@
   }
 
   [slot="header"]:hover {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
+    background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   [slot="header"]:hover [slot="icon"] {
-    color: var(--nav-group-fg-hover);
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   [slot="header"]:focus-visible {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
+    background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
     outline: none;
   }
 
   [slot="header"] [slot="icon"] {
-    width: var(--nav-group-icon-size);
-    height: var(--nav-group-icon-size);
+    width: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
+    height: var(--nav-group-icon-size, var(--nav-group-icon-size-default));
     flex-shrink: 0;
-    color: var(--nav-group-fg-muted);
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     transition: color var(--nav-duration-fast) var(--nav-easing);
     display: flex;
     align-items: center;
@@ -106,8 +106,8 @@
   }
 
   [slot="header"] [slot="badge"] {
-    font-size: var(--nav-group-badge-size);
-    color: var(--nav-group-fg-muted);
+    font-size: var(--nav-group-badge-size, var(--nav-group-badge-size-default));
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     background: var(--nav-group-badge-bg);
     padding: 1px var(--nav-group-badge-px);
     border-radius: var(--nav-group-badge-radius);
@@ -116,7 +116,7 @@
 
   [slot="header"] [slot="caret"] {
     /*--a-icon-size: 0.5rem;*/
-    color: var(--nav-group-fg-muted);
+    color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
     transition:
       transform var(--nav-duration-fast) var(--nav-easing),
       color var(--nav-duration-fast) var(--nav-easing);
@@ -127,7 +127,7 @@
   }
 
   [slot="header"]:hover [slot="caret"] {
-    color: var(--nav-group-fg-hover);
+    color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
   }
 
   :scope:not([open]) > [slot="header"] [slot="caret"] {
@@ -192,13 +192,13 @@
 
   /* ── Size variants ── */
   :scope[size="sm"] {
-    --nav-group-row-height: var(--nav-group-row-height-sm);
-    --nav-group-font-size:  var(--nav-group-font-size-sm);
+    --nav-group-row-height-default: var(--nav-group-row-height-sm, var(--nav-group-row-height-sm-default));
+    --nav-group-font-size-default:  var(--nav-group-font-size-sm, var(--nav-group-font-size-sm-default));
   }
 
   :scope[size="lg"] {
-    --nav-group-row-height: var(--nav-group-row-height-lg);
-    --nav-group-font-size:  var(--nav-group-font-size-lg);
+    --nav-group-row-height-default: var(--nav-group-row-height-lg, var(--nav-group-row-height-lg-default));
+    --nav-group-font-size-default:  var(--nav-group-font-size-lg, var(--nav-group-font-size-lg-default));
   }
 }
 
@@ -222,7 +222,7 @@ nav-group-ui [slot="popover"] {
 nav-group-ui [slot="popover-label"] {
   padding: var(--a-space-1) var(--a-space-2);
   font-weight: var(--a-weight-medium);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   font-size: var(--a-ui-tiny);
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -231,7 +231,7 @@ nav-group-ui [slot="popover-label"] {
 nav-group-ui [slot="popover"] [role="option"] {
   padding: var(--a-space-1) var(--a-space-2);
   border-radius: var(--a-radius);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -240,8 +240,8 @@ nav-group-ui [slot="popover"] [role="option"] {
 }
 
 nav-group-ui [slot="popover"] [role="option"]:hover {
-  background: var(--nav-group-bg-hover);
-  color: var(--nav-group-fg-hover);
+  background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+  color: var(--nav-group-fg-hover, var(--nav-group-fg-hover-default));
 }
 
 /* Selected / current option — mirrors the main rail's nav-item selection:
@@ -249,8 +249,8 @@ nav-group-ui [slot="popover"] [role="option"]:hover {
 nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
 nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
   position: relative;
-  background: var(--nav-group-bg-hover);
-  color: var(--nav-group-fg-selected);
+  background: var(--nav-group-bg-hover, var(--nav-group-bg-hover-default));
+  color: var(--nav-group-fg-selected, var(--nav-group-fg-selected-default));
   font-weight: var(--a-weight-medium);
 }
 
@@ -283,7 +283,7 @@ nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
   padding: var(--a-space-3) var(--a-space-2) var(--a-space-1);
   font-size: var(--a-kicker-sm, var(--a-ui-tiny));
   font-weight: var(--a-weight-medium);
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
   text-transform: uppercase;
   letter-spacing: 0.06em;
   cursor: default;
@@ -295,7 +295,7 @@ nav-group-ui[variant="section"] > [slot="header"]:focus-visible,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:hover,
 nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:focus-visible {
   background: transparent;
-  color: var(--nav-group-fg-muted);
+  color: var(--nav-group-fg-muted, var(--nav-group-fg-muted-default));
 }
 
 nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],