@classic-homes/theme-svelte 1.22.2 → 1.22.4

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -45,6 +45,8 @@
     autoCollapse?: boolean;
     /** IDs of expandable items alongside this one */
     siblingIds?: string[];
+    /** Rendered inside another item's submenu panel (internal) */
+    nested?: boolean;
   }
 
   let {
@@ -62,6 +64,7 @@
     onMouseLeave,
     autoCollapse = false,
     siblingIds = [],
+    nested = false,
   }: Props = $props();
 
   // Highlight matching text in item names
@@ -99,11 +102,11 @@
     return cn(
       isLight &&
         !active &&
-        'text-foreground bg-background hover:bg-accent hover:text-accent-foreground',
+        'text-foreground bg-transparent hover:bg-accent hover:text-accent-foreground',
       isLight && active && 'bg-primary/10 text-primary',
       !isLight &&
         !active &&
-        'text-sidebar-foreground bg-sidebar hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        'text-sidebar-foreground bg-transparent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
       !isLight && active && 'bg-sidebar-primary text-sidebar-primary-foreground',
       disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
     );
@@ -266,9 +269,12 @@
     <div
       class={cn(
         'group flex w-full items-center rounded-md',
-        isLight && !item.active && 'bg-background hover:bg-accent',
+        // Inside a submenu panel rows sit on the panel's grey, so no rest fill
+        isLight && !item.active && (nested ? 'bg-transparent' : 'bg-background'),
+        isLight && !item.active && 'hover:bg-accent',
         isLight && item.active && 'bg-primary/10',
-        !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
+        !isLight && !item.active && (nested ? 'bg-transparent' : 'bg-sidebar'),
+        !isLight && !item.active && 'hover:bg-sidebar-accent',
         !isLight && item.active && 'bg-sidebar-primary'
       )}
     >
@@ -372,54 +378,64 @@
     </div>
 
     {#if isExpanded}
-      <ul
-        class="mt-1 space-y-1 pl-4 overflow-hidden"
+      <!-- Submenu panel: an inset grey surface at the top level so open children
+           read as separate from the main list. Deeper levels get a left rail
+           instead, so the grey never stacks darker -->
+      <div
+        class={cn(
+          'mt-1 overflow-hidden',
+          !nested && 'ml-3 rounded-md p-1',
+          !nested && (isLight ? 'bg-muted/50' : 'bg-sidebar-accent/30')
+        )}
         transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
       >
-        {#each item.children ?? [] as child (child.id)}
-          <li>
-            {#if child.children?.length}
-              <!-- A nested category: same expandable row, one level deeper -->
-              <SidebarNavItem
-                item={child}
-                {isLight}
-                {isMobile}
-                {icon}
-                {searchQuery}
-                {onNavigate}
-                {autoCollapse}
-                siblingIds={expandableChildIds}
-              />
-            {:else}
-              <a
-                href={child.disabled ? undefined : child.href}
-                class={cn(
-                  'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-                  getItemStateClasses(child.active, child.disabled)
-                )}
-                target={child.external ? '_blank' : undefined}
-                rel={child.external ? 'noopener noreferrer' : undefined}
-                aria-current={child.active ? 'page' : undefined}
-                aria-disabled={child.disabled || undefined}
-                tabindex={child.disabled ? -1 : undefined}
-                onclick={(e) => {
-                  if (child.disabled) {
-                    e.preventDefault();
-                    return;
-                  }
-                  onNavigate?.(child);
-                }}
-              >
-                {@render navIcon(child)}
-                {@render highlightedName(child.name, highlightText(child.name, searchQuery))}
-                {@render navBadge(child.badge)}
-                {#if child.external}{@render externalIndicator()}{/if}
-              </a>
-            {/if}
-          </li>
-        {/each}
-      </ul>
+        <ul class={cn('space-y-1', nested && 'ml-3 border-l border-outline/40 pl-1')}>
+          {#each item.children ?? [] as child (child.id)}
+            <li>
+              {#if child.children?.length}
+                <!-- A nested category: same expandable row, one level deeper -->
+                <SidebarNavItem
+                  item={child}
+                  {isLight}
+                  {isMobile}
+                  {icon}
+                  {searchQuery}
+                  {onNavigate}
+                  {autoCollapse}
+                  siblingIds={expandableChildIds}
+                  nested
+                />
+              {:else}
+                <a
+                  href={child.disabled ? undefined : child.href}
+                  class={cn(
+                    'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+                    getItemStateClasses(child.active, child.disabled)
+                  )}
+                  target={child.external ? '_blank' : undefined}
+                  rel={child.external ? 'noopener noreferrer' : undefined}
+                  aria-current={child.active ? 'page' : undefined}
+                  aria-disabled={child.disabled || undefined}
+                  tabindex={child.disabled ? -1 : undefined}
+                  onclick={(e) => {
+                    if (child.disabled) {
+                      e.preventDefault();
+                      return;
+                    }
+                    onNavigate?.(child);
+                  }}
+                >
+                  {@render navIcon(child)}
+                  {@render highlightedName(child.name, highlightText(child.name, searchQuery))}
+                  {@render navBadge(child.badge)}
+                  {#if child.external}{@render externalIndicator()}{/if}
+                </a>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      </div>
     {/if}
   </div>
 {:else}
@@ -428,9 +444,12 @@
   <div
     class={cn(
       'group flex w-full items-center rounded-md',
-      isLight && !item.active && 'bg-background hover:bg-accent',
+      // Inside a section panel rows sit on the panel's grey, so no rest fill
+      isLight && !item.active && (nested ? 'bg-transparent' : 'bg-background'),
+      isLight && !item.active && 'hover:bg-accent',
       isLight && item.active && 'bg-primary/10',
-      !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
+      !isLight && !item.active && (nested ? 'bg-transparent' : 'bg-sidebar'),
+      !isLight && !item.active && 'hover:bg-sidebar-accent',
       !isLight && item.active && 'bg-sidebar-primary'
     )}
   >

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte.d.ts

@@ -32,6 +32,8 @@ interface Props {
     autoCollapse?: boolean;
     /** IDs of expandable items alongside this one */
     siblingIds?: string[];
+    /** Rendered inside another item's submenu panel (internal) */
+    nested?: boolean;
 }
 declare const SidebarNavItem: import("svelte").Component<Props, {}, "">;
 type SidebarNavItem = ReturnType<typeof SidebarNavItem>;

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -145,32 +145,39 @@
       {/each}
     </ul>
   {:else if isExpanded}
-    <!-- Collapsible and expanded: animate -->
-    <ul
-      class="space-y-1 px-2 overflow-hidden"
-      id={`sidebar-section-${section.id}`}
+    <!-- Collapsible and expanded: the same inset grey panel as an open submenu
+         (SidebarNavItem), so a section's pages read as inside it. Its items are
+         `nested`: no rest fill over the grey, and their own submenus get the rail -->
+    <div
+      class={cn(
+        'mx-2 overflow-hidden rounded-md p-1',
+        isLight ? 'bg-muted/50' : 'bg-sidebar-accent/30'
+      )}
       transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
     >
-      {#each section.items as item}
-        <li>
-          <SidebarNavItem
-            {item}
-            {isLight}
-            {collapsed}
-            {isMobile}
-            {icon}
-            {searchQuery}
-            {enablePinning}
-            {pinIcon}
-            {isPinnedSection}
-            {onNavigate}
-            onMouseEnter={onItemMouseEnter}
-            onMouseLeave={onItemMouseLeave}
-            {autoCollapse}
-            siblingIds={expandableItemIds}
-          />
-        </li>
-      {/each}
-    </ul>
+      <ul class="space-y-1" id={`sidebar-section-${section.id}`}>
+        {#each section.items as item}
+          <li>
+            <SidebarNavItem
+              {item}
+              {isLight}
+              {collapsed}
+              {isMobile}
+              {icon}
+              {searchQuery}
+              {enablePinning}
+              {pinIcon}
+              {isPinnedSection}
+              {onNavigate}
+              onMouseEnter={onItemMouseEnter}
+              onMouseLeave={onItemMouseLeave}
+              {autoCollapse}
+              siblingIds={expandableItemIds}
+              nested
+            />
+          </li>
+        {/each}
+      </ul>
+    </div>
   {/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.22.2",
+  "version": "1.22.4",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",