Scope sidebar nav rules to the direct child nav

The sidebar rules matched every nav inside .sidebar, so a nested
tablist nav became fixed, column, sidebar-width. Use .sidebar > nav
in the component CSS, all style packs and sidebar.js.

src/css/components/sidebar.css

@@ -8,7 +8,7 @@
     &[aria-hidden=false] {
       @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
     }
-    nav {
+    > nav {
       @apply fixed inset-y-0 z-50 flex w-(--sidebar-mobile-width) flex-col transition-transform duration-300 ease-in-out md:w-(--sidebar-width);
     }
     & + * {
@@ -16,14 +16,14 @@
     }
     &:not([data-side]),
     &[data-side=left] {
-      nav {
+      > nav {
         @apply left-0 border-r;
       }
       & + * {
         @apply relative md:ml-(--sidebar-width);
       }
       &[aria-hidden=true] {
-        nav {
+        > nav {
           @apply -translate-x-full;
         }
         & + * {
@@ -32,14 +32,14 @@
       }
     }
     &[data-side=right] {
-      nav {
+      > nav {
         @apply right-0 border-l;
       }
       & + * {
         @apply relative md:mr-(--sidebar-width);
       }
       &[aria-hidden=true] {
-        nav {
+        > nav {
           @apply translate-x-full;
         }
         & + * {
@@ -47,7 +47,7 @@
         }
       }
     }
-    nav {
+    > nav {
       > header,
       > footer {
         @apply flex flex-col;

src/css/styles/luma.css

@@ -1182,92 +1182,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-xl px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/lyra.css

@@ -1185,92 +1185,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-xs;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-xs;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/maia.css

@@ -1170,92 +1170,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-1;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/mira.css

@@ -1179,92 +1179,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply px-2 py-1;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-px;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-xs;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-muted/20 dark:bg-muted/30 border-input shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-xs;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/nova.css

@@ -1193,92 +1193,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-0;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/rhea.css

@@ -1187,92 +1187,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:var(--radius-xl)];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-xl px-3 text-xs font-medium focus-visible:ring-3 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm duration-200 focus-visible:ring-3 whitespace-nowrap has-[>svg:first-child]:ps-2.5 has-[>svg:last-child]:pe-2.5 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
   }
   /* Progress */

src/css/styles/sera.css

@@ -1203,92 +1203,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2 [--radius:0];
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2 [--radius:0];
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-semibold uppercase tracking-wider focus-visible:ring-2 [&>svg]:size-3.5 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-0.5;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-3.5;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-9 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-8 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-14 px-3 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-3.5;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
   }
   /* Progress */

src/css/styles/vega.css

@@ -1192,92 +1192,92 @@
   }
 
   /* Sidebar */
-  .sidebar nav {
+  .sidebar > nav {
     @apply bg-sidebar text-sidebar-foreground;
   }
 
-  .sidebar nav > header,
-  .sidebar nav > footer {
+  .sidebar > nav > header,
+  .sidebar > nav > footer {
     @apply gap-2 p-2;
   }
 
-  .sidebar nav > section {
+  .sidebar > nav > section {
     @apply gap-2;
   }
 
-  .sidebar nav [role=separator] {
+  .sidebar > nav [role=separator] {
     @apply border-sidebar-border mx-2;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply p-2;
   }
 
-  .sidebar nav h3 {
+  .sidebar > nav h3 {
     @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
   }
 
-  .sidebar nav > section > [role=group] > ul {
+  .sidebar > nav > section > [role=group] > ul {
     @apply gap-1;
   }
 
-  .sidebar nav > section > [role=group] {
+  .sidebar > nav > section > [role=group] {
     @apply text-sm;
   }
 
-  .sidebar nav li > :is(a, button),
-  .sidebar nav li > details > summary {
+  .sidebar > nav li > :is(a, button),
+  .sidebar > nav li > details > summary {
     @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
   }
 
-  .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
-  .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
+  .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
     @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
   }
 
-  .sidebar nav li > :is(a, button):not([data-variant]),
-  .sidebar nav li > details > summary:not([data-variant]),
-  .sidebar nav li > :is(a, button)[data-variant=default],
-  .sidebar nav li > details > summary[data-variant=default] {
+  .sidebar > nav li > :is(a, button):not([data-variant]),
+  .sidebar > nav li > details > summary:not([data-variant]),
+  .sidebar > nav li > :is(a, button)[data-variant=default],
+  .sidebar > nav li > details > summary[data-variant=default] {
     @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button)[data-variant=outline],
-  .sidebar nav li > details > summary[data-variant=outline] {
+  .sidebar > nav li > :is(a, button)[data-variant=outline],
+  .sidebar > nav li > details > summary[data-variant=outline] {
     @apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
   }
 
-  .sidebar nav li > :is(a, button):not([data-size]),
-  .sidebar nav li > details > summary:not([data-size]),
-  .sidebar nav li > :is(a, button)[data-size=default],
-  .sidebar nav li > details > summary[data-size=default] {
+  .sidebar > nav li > :is(a, button):not([data-size]),
+  .sidebar > nav li > details > summary:not([data-size]),
+  .sidebar > nav li > :is(a, button)[data-size=default],
+  .sidebar > nav li > details > summary[data-size=default] {
     @apply h-8 text-sm;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=sm],
-  .sidebar nav li > details > summary[data-size=sm] {
+  .sidebar > nav li > :is(a, button)[data-size=sm],
+  .sidebar > nav li > details > summary[data-size=sm] {
     @apply h-7 text-xs;
   }
 
-  .sidebar nav li > :is(a, button)[data-size=lg],
-  .sidebar nav li > details > summary[data-size=lg] {
+  .sidebar > nav li > :is(a, button)[data-size=lg],
+  .sidebar > nav li > details > summary[data-size=lg] {
     @apply h-12 text-sm;
   }
 
-  .sidebar nav li > details > summary::after {
+  .sidebar > nav li > details > summary::after {
     @apply size-4;
   }
 
-  .sidebar nav li > details::details-content {
+  .sidebar > nav li > details::details-content {
     @apply px-3.5;
   }
 
-  .sidebar nav ul ul {
+  .sidebar > nav ul ul {
     @apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
   }
 
-  .sidebar nav ul ul > li > :is(a, button),
-  .sidebar nav ul ul > li > details > summary {
+  .sidebar > nav ul ul > li > :is(a, button),
+  .sidebar > nav ul ul > li > details > summary {
     @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
   }
   /* Progress */

src/js/sidebar.js

@@ -30,7 +30,7 @@
 
     const handleClick = (event) => {
       const target = event.target;
-      const nav = sidebarComponent.querySelector('nav');
+      const nav = sidebarComponent.querySelector(':scope > nav');
       const isMobile = window.innerWidth < breakpoint;
 
       if (isMobile && target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]')) {