@classic-homes/theme-svelte 1.15.3 → 1.17.0

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

@@ -95,6 +95,59 @@
   }
 </script>
 
+{#snippet childLinks(children: NavItem[], depth: number)}
+  {#each children as child (child.id)}
+    {#if child.href}
+      <a
+        href={child.disabled ? undefined : child.href}
+        class={cn(
+          'flex items-center gap-2 rounded-md px-3 py-2 text-sm',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+          isLight
+            ? 'text-foreground hover:bg-accent hover:text-accent-foreground'
+            : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+          child.active &&
+            (isLight
+              ? 'bg-primary/10 text-primary'
+              : 'bg-sidebar-primary text-sidebar-primary-foreground'),
+          child.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+        )}
+        style="margin-left: {0.5 + depth * 0.75}rem"
+        target={child.external ? '_blank' : undefined}
+        rel={child.external ? 'noopener noreferrer' : undefined}
+        aria-disabled={child.disabled || undefined}
+        tabindex={child.disabled ? -1 : undefined}
+        onclick={(e) => {
+          if (child.disabled) {
+            e.preventDefault();
+            return;
+          }
+          onNavigate?.(child);
+        }}
+        role="menuitem"
+      >
+        {child.name}
+        {@render navBadge(child.badge)}
+      </a>
+    {:else if child.children?.length}
+      <!-- A nested group without its own page: a label over its entries -->
+      <div
+        class={cn(
+          'px-3 pt-2 pb-1 text-xs font-semibold',
+          isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
+        )}
+        style="margin-left: {0.5 + depth * 0.75}rem"
+        role="presentation"
+      >
+        {child.name}
+      </div>
+    {/if}
+    {#if child.children?.length}
+      {@render childLinks(child.children, depth + 1)}
+    {/if}
+  {/each}
+{/snippet}
+
 {#snippet navBadge(badge: string | number | undefined)}
   {#if badge !== undefined}
     <span
@@ -169,38 +222,7 @@
       <div
         class={cn('border-t mt-1 pt-1', isLight ? 'border-border' : 'border-sidebar-foreground/20')}
       >
-        {#each item.children as child}
-          <a
-            href={child.disabled ? undefined : child.href}
-            class={cn(
-              'flex items-center gap-2 rounded-md px-3 py-2 text-sm ml-2',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-              isLight
-                ? 'text-foreground hover:bg-accent hover:text-accent-foreground'
-                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-              child.active &&
-                (isLight
-                  ? 'bg-primary/10 text-primary'
-                  : 'bg-sidebar-primary text-sidebar-primary-foreground'),
-              child.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
-            )}
-            target={child.external ? '_blank' : undefined}
-            rel={child.external ? 'noopener noreferrer' : undefined}
-            aria-disabled={child.disabled || undefined}
-            tabindex={child.disabled ? -1 : undefined}
-            onclick={(e) => {
-              if (child.disabled) {
-                e.preventDefault();
-                return;
-              }
-              onNavigate?.(child);
-            }}
-            role="menuitem"
-          >
-            {child.name}
-            {@render navBadge(child.badge)}
-          </a>
-        {/each}
+        {@render childLinks(item.children, 0)}
       </div>
     {/if}
   </div>

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

@@ -3,7 +3,7 @@
    * SidebarNavItem - Individual navigation item component
    *
    * Handles:
-   * - Items with children (expandable submenu)
+   * - Items with children (expandable submenu), nested to any depth
    * - Items without children (simple links/buttons)
    * - Collapsed mode (icons only with flyout)
    * - Disabled and loading states
@@ -13,6 +13,8 @@
   import type { NavItem } from '../../../types/layout.js';
   import { cn } from '../../../utils.js';
   import { sidebarStore } from '../../../stores/sidebar.svelte.js';
+  import Icon, { type IconName } from '../../Icon.svelte';
+  import SidebarNavItem from './SidebarNavItem.svelte';
 
   interface Props {
     /** The navigation item to render */
@@ -39,6 +41,10 @@
     onMouseEnter?: (item: NavItem, event: MouseEvent) => void;
     /** Callback when mouse leaves item (for flyout) */
     onMouseLeave?: () => void;
+    /** Expanding this item closes `siblingIds`, and its children behave the same way */
+    autoCollapse?: boolean;
+    /** IDs of expandable items alongside this one */
+    siblingIds?: string[];
   }
 
   let {
@@ -54,6 +60,8 @@
     onNavigate,
     onMouseEnter,
     onMouseLeave,
+    autoCollapse = false,
+    siblingIds = [],
   }: Props = $props();
 
   // Highlight matching text in item names
@@ -79,9 +87,14 @@
   const isExpanded = $derived(sidebarStore.isItemExpanded(item.id));
 
   function toggleItem() {
-    sidebarStore.toggleItem(item.id);
+    sidebarStore.toggleItem(item.id, autoCollapse ? siblingIds : []);
   }
 
+  // Children that can expand: siblings to each other under autoCollapse
+  const expandableChildIds = $derived(
+    autoCollapse ? (item.children ?? []).filter((c) => c.children?.length).map((c) => c.id) : []
+  );
+
   function getItemStateClasses(active?: boolean, disabled?: boolean): string {
     return cn(
       isLight &&
@@ -142,10 +155,10 @@
       {@render icon(navItem)}
     </span>
   {:else if navItem.icon}
+    <!-- No icon renderer given: draw the named theme icon. Items without an
+         icon render nothing, so they take no gutter. -->
     <span class="h-5 w-5 shrink-0 flex items-center justify-center">
-      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <circle cx="12" cy="12" r="10" stroke-width="2" />
-      </svg>
+      <Icon name={navItem.icon as IconName} size={20} />
     </span>
   {/if}
 {/snippet}
@@ -264,7 +277,7 @@
         <a
           href={item.disabled ? undefined : item.href}
           class={cn(
-            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium',
+            'flex min-w-0 flex-1 items-center gap-3 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',
             'group-hover:underline underline-offset-2',
             isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
@@ -292,7 +305,7 @@
         <button
           type="button"
           class={cn(
-            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left',
+            'flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
             isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
             isLight && item.active && 'text-primary',
@@ -359,33 +372,47 @@
 
     {#if isExpanded}
       <ul class="mt-1 space-y-1 pl-4 overflow-hidden" transition:slide={{ duration: 200 }}>
-        {#each item.children as child}
+        {#each item.children ?? [] as child (child.id)}
           <li>
-            <a
-              href={child.disabled ? undefined : child.href}
-              class={cn(
-                'flex 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 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>
@@ -408,7 +435,7 @@
       <a
         href={item.disabled ? undefined : item.href}
         class={cn(
-          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium relative',
+          'flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-sm font-medium relative',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
           isLight && item.active && 'text-primary',
@@ -455,7 +482,7 @@
       <button
         type="button"
         class={cn(
-          'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left relative',
+          'flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-sm font-medium text-left relative',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight && !item.active && 'text-foreground group-hover:text-accent-foreground',
           isLight && item.active && 'text-primary',

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { NavItem } from '../../../types/layout.js';
+import SidebarNavItem from './SidebarNavItem.svelte';
 interface Props {
     /** The navigation item to render */
     item: NavItem;
@@ -27,6 +28,10 @@ interface Props {
     onMouseEnter?: (item: NavItem, event: MouseEvent) => void;
     /** Callback when mouse leaves item (for flyout) */
     onMouseLeave?: () => void;
+    /** Expanding this item closes `siblingIds`, and its children behave the same way */
+    autoCollapse?: boolean;
+    /** IDs of expandable items alongside this one */
+    siblingIds?: string[];
 }
 declare const SidebarNavItem: import("svelte").Component<Props, {}, "">;
 type SidebarNavItem = ReturnType<typeof SidebarNavItem>;

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

@@ -36,6 +36,10 @@
     onItemMouseEnter?: (item: NavItem, event: MouseEvent) => void;
     /** Callback when mouse leaves an item (for flyout) */
     onItemMouseLeave?: () => void;
+    /** Opening this section (or an item in it) closes its siblings */
+    autoCollapse?: boolean;
+    /** IDs of the sections alongside this one, closed on expand when `autoCollapse` is set */
+    siblingSectionIds?: string[];
   }
 
   let {
@@ -51,12 +55,19 @@
     onNavigate,
     onItemMouseEnter,
     onItemMouseLeave,
+    autoCollapse = false,
+    siblingSectionIds = [],
   }: Props = $props();
 
+  // Items here that can expand: the siblings an expanding item closes under autoCollapse
+  const expandableItemIds = $derived(
+    autoCollapse ? section.items.filter((i) => i.children?.length).map((i) => i.id) : []
+  );
+
   const isExpanded = $derived(sidebarStore.isSectionExpanded(section.id));
 
   function toggleSection() {
-    sidebarStore.toggleSection(section.id);
+    sidebarStore.toggleSection(section.id, autoCollapse ? siblingSectionIds : []);
   }
 </script>
 
@@ -125,6 +136,8 @@
             {onNavigate}
             onMouseEnter={onItemMouseEnter}
             onMouseLeave={onItemMouseLeave}
+            {autoCollapse}
+            siblingIds={expandableItemIds}
           />
         </li>
       {/each}
@@ -151,6 +164,8 @@
             {onNavigate}
             onMouseEnter={onItemMouseEnter}
             onMouseLeave={onItemMouseLeave}
+            {autoCollapse}
+            siblingIds={expandableItemIds}
           />
         </li>
       {/each}

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

@@ -27,6 +27,10 @@ interface Props {
     onItemMouseEnter?: (item: NavItem, event: MouseEvent) => void;
     /** Callback when mouse leaves an item (for flyout) */
     onItemMouseLeave?: () => void;
+    /** Opening this section (or an item in it) closes its siblings */
+    autoCollapse?: boolean;
+    /** IDs of the sections alongside this one, closed on expand when `autoCollapse` is set */
+    siblingSectionIds?: string[];
 }
 declare const SidebarSection: import("svelte").Component<Props, {}, "">;
 type SidebarSection = ReturnType<typeof SidebarSection>;

package/dist/lib/index.d.ts

@@ -7,6 +7,7 @@
  * All components use Svelte 5 runes syntax ($props, $state, $derived, etc.)
  */
 export { default as Button } from './components/Button.svelte';
+export { buttonVariants, type ButtonVariants } from './components/button-variants.js';
 export { default as Input } from './components/Input.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Label } from './components/Label.svelte';

package/dist/lib/index.js

@@ -8,6 +8,7 @@
  */
 // Core UI Components
 export { default as Button } from './components/Button.svelte';
+export { buttonVariants } from './components/button-variants.js';
 export { default as Input } from './components/Input.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Label } from './components/Label.svelte';

package/dist/lib/stores/sidebar.svelte.d.ts

@@ -59,13 +59,13 @@ declare class SidebarStore {
      */
     setMobile(isMobile: boolean): void;
     /**
-     * Toggle section expansion state
+     * Toggle section expansion state. When expanding, sections in `collapseOnExpand` close.
      */
-    toggleSection(sectionId: string): void;
+    toggleSection(sectionId: string, collapseOnExpand?: string[]): void;
     /**
-     * Toggle item expansion state
+     * Toggle item expansion state. When expanding, items in `collapseOnExpand` close.
      */
-    toggleItem(itemId: string): void;
+    toggleItem(itemId: string, collapseOnExpand?: string[]): void;
     /**
      * Check if a section is expanded
      */

package/dist/lib/stores/sidebar.svelte.js

@@ -160,29 +160,37 @@ class SidebarStore {
         }
     }
     /**
-     * Toggle section expansion state
+     * Toggle section expansion state. When expanding, sections in `collapseOnExpand` close.
      */
-    toggleSection(sectionId) {
+    toggleSection(sectionId, collapseOnExpand = []) {
         const newSet = new Set(this.expandedSections);
         if (newSet.has(sectionId)) {
             newSet.delete(sectionId);
         }
         else {
             newSet.add(sectionId);
+            // Accordion behaviour: opening one closes these (its siblings)
+            for (const id of collapseOnExpand)
+                if (id !== sectionId)
+                    newSet.delete(id);
         }
         this.expandedSections = newSet;
         __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistExpansion).call(this);
     }
     /**
-     * Toggle item expansion state
+     * Toggle item expansion state. When expanding, items in `collapseOnExpand` close.
      */
-    toggleItem(itemId) {
+    toggleItem(itemId, collapseOnExpand = []) {
         const newSet = new Set(this.expandedItems);
         if (newSet.has(itemId)) {
             newSet.delete(itemId);
         }
         else {
             newSet.add(itemId);
+            // Accordion behaviour: opening one closes these (its siblings)
+            for (const id of collapseOnExpand)
+                if (id !== itemId)
+                    newSet.delete(id);
         }
         this.expandedItems = newSet;
         __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistExpansion).call(this);

package/package.json

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