@classic-homes/theme-svelte 1.16.0 → 1.18.0

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -71,6 +71,10 @@
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Page footer below the main content, e.g. theme `Footer` with link columns */
+    footer?: Snippet;
+    /** Accordion sidebar: opening a section or item closes the others at its level */
+    sidebarAutoCollapse?: boolean;
     /** Sidebar width when expanded in pixels (default: 256) */
     expandedWidth?: number;
     /** Sidebar width when collapsed in pixels (default: 64) */
@@ -122,6 +126,8 @@
     headerEnd,
     userMenu,
     sidebarFooter,
+    footer,
+    sidebarAutoCollapse = false,
     expandedWidth = 256,
     collapsedWidth = 64,
     searchable = false,
@@ -159,11 +165,10 @@
       : navigation
   );
 
-  // Reactive media query for mobile detection. Initialized synchronously so
-  // the first client paint doesn't flash the desktop layout (256px content
-  // margin + full-width sidebar) before an effect corrects it. Deliberately
-  // reads the initial `mobileBreakpoint` — later changes are handled by the
-  // matchMedia effect below.
+  // Reactive media query for mobile detection. Initialized synchronously so a
+  // client-only render paints the right layout at once. Deliberately reads the
+  // initial `mobileBreakpoint` — later changes are handled by the matchMedia
+  // effect below.
   // svelte-ignore state_referenced_locally
   const initialIsMobile =
     typeof window !== 'undefined' &&
@@ -173,12 +178,23 @@
     sidebarStore.setMobile(initialIsMobile);
   }
 
-  // Suppress the margin transition until after the first paint so any
-  // hydration correction snaps instead of visibly sliding.
+  // Until mounted the layout is responsive in CSS alone: the server cannot know
+  // the viewport, so a JS-sized layout would render as desktop and visibly snap
+  // to mobile on hydration. Server HTML and the hydrating render therefore share
+  // breakpoint classes; once mounted, JS state (collapse, drawer) takes over.
   let mounted = $state(false);
+  // One frame later still: lets the hand-over to JS sizing (e.g. a saved collapsed
+  // sidebar) snap instead of sliding.
+  let animate = $state(false);
 
   $effect(() => {
     mounted = true;
+    if (typeof requestAnimationFrame !== 'function') {
+      animate = true;
+      return;
+    }
+    const frame = requestAnimationFrame(() => (animate = true));
+    return () => cancelAnimationFrame(frame);
   });
 
   $effect(() => {
@@ -246,6 +262,14 @@
     isMobile ? 0 : sidebarStore.isOpen ? expandedWidth : collapsedWidth
   );
 
+  // Pre-mount responsive classes, per breakpoint (literal strings, for Tailwind)
+  const ssrClasses: Record<Breakpoint, { content: string; sidebar: string }> = {
+    sm: { content: 'sm:ml-[var(--dl-sidebar-width)]', sidebar: 'max-sm:-translate-x-full' },
+    md: { content: 'md:ml-[var(--dl-sidebar-width)]', sidebar: 'max-md:-translate-x-full' },
+    lg: { content: 'lg:ml-[var(--dl-sidebar-width)]', sidebar: 'max-lg:-translate-x-full' },
+  };
+  const ssr = $derived(ssrClasses[mobileBreakpoint]);
+
   const contentPaddingClass = $derived(
     contentPadding === 'none' ? '' : contentPadding === 'compact' ? 'p-2 lg:p-4' : 'p-4 lg:p-6'
   );
@@ -269,6 +293,7 @@
     {quickLinksDisplay}
     quickLinkIcon={quickLinkIcon ?? (icon as Snippet<[QuickLink]> | undefined)}
     footer={sidebarFooter}
+    autoCollapse={sidebarAutoCollapse}
     {expandedWidth}
     {collapsedWidth}
     {searchable}
@@ -279,21 +304,25 @@
     {onPinnedChange}
     {pinIcon}
     {appId}
+    class={mounted ? undefined : ssr.sidebar}
   />
 
   <!-- Main Content Area -->
   <div
-    class="flex flex-1 flex-col {mounted
+    class="flex flex-1 flex-col {mounted ? '' : ssr.content} {animate
       ? 'transition-[margin] duration-300 motion-reduce:transition-none'
       : ''}"
-    style="margin-left: {sidebarWidth}px;"
+    style={mounted
+      ? `margin-left: ${sidebarWidth}px;`
+      : `--dl-sidebar-width: ${sidebarCollapsed ? collapsedWidth : expandedWidth}px;`}
   >
     {#if showHeader}
       <Header
-        showMenuButton={isMobile}
-        menuOpen={sidebarStore.isOpen}
+        {mobileBreakpoint}
+        showMenuButton={isMobile || !mounted}
+        menuOpen={mounted && isMobile && sidebarStore.isOpen}
         onMenuClick={() => sidebarStore.toggle()}
-        showCollapseButton={!isMobile}
+        showCollapseButton={!isMobile || !mounted}
         sidebarCollapsed={!sidebarStore.isOpen}
         onCollapseClick={() => sidebarStore.toggle()}
         title={pageTitle}
@@ -334,5 +363,8 @@
     >
       {@render children()}
     </main>
+    {#if footer}
+      {@render footer()}
+    {/if}
   </div>
 </AppShell>

package/dist/lib/components/layout/DashboardLayout.svelte.d.ts

@@ -49,6 +49,10 @@ interface Props {
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Page footer below the main content, e.g. theme `Footer` with link columns */
+    footer?: Snippet;
+    /** Accordion sidebar: opening a section or item closes the others at its level */
+    sidebarAutoCollapse?: boolean;
     /** Sidebar width when expanded in pixels (default: 256) */
     expandedWidth?: number;
     /** Sidebar width when collapsed in pixels (default: 64) */

package/dist/lib/components/layout/Sidebar.svelte

@@ -69,6 +69,11 @@
     collapsedWidth?: number;
     /** Enable search/filter input for navigation */
     searchable?: boolean;
+    /**
+     * Accordion navigation: opening a collapsible section or an item closes the others at
+     * its level (Docusaurus `autoCollapseCategories`). Ignored while searching.
+     */
+    autoCollapse?: boolean;
     /** Placeholder text for search input */
     searchPlaceholder?: string;
     /** Enable pinning feature for navigation items */
@@ -109,6 +114,7 @@
     expandedWidth = 256,
     collapsedWidth = 64,
     searchable = false,
+    autoCollapse = false,
     searchPlaceholder = 'Search...',
     enablePinning = false,
     pinnedSectionTitle = 'Pinned',
@@ -154,14 +160,17 @@
 
   // Helper to find a nav item by ID (including nested children)
   function findNavItemById(sections: NavSection[], itemId: string): NavItem | undefined {
-    for (const section of sections) {
-      for (const item of section.items) {
+    const find = (items: NavItem[]): NavItem | undefined => {
+      for (const item of items) {
         if (item.id === itemId) return item;
-        if (item.children) {
-          const found = item.children.find((child) => child.id === itemId);
-          if (found) return found;
-        }
+        const found = item.children && find(item.children);
+        if (found) return found;
       }
+      return undefined;
+    };
+    for (const section of sections) {
+      const found = find(section.items);
+      if (found) return found;
     }
     return undefined;
   }
@@ -199,23 +208,28 @@
   // Search state
   let searchQuery = $state('');
 
+  // Sections an expanding section closes under autoCollapse
+  const collapsibleSectionIds = $derived(
+    autoCollapse ? roleFilteredNavigation.filter((s) => s.collapsible).map((s) => s.id) : []
+  );
+
   // Filter items by search query
+  // At any depth: an item stays when it or a descendant matches. A matching item keeps all
+  // its children; otherwise only the branches leading to matches remain.
   function filterItemsBySearch(items: NavItem[], query: string): NavItem[] {
-    return items
-      .filter((item) => {
-        const matches = item.name.toLowerCase().includes(query);
-        const childMatches = item.children?.some((child) =>
-          child.name.toLowerCase().includes(query)
-        );
-        return matches || childMatches;
-      })
-      .map((item) => ({
-        ...item,
-        // Keep all children if parent matches, otherwise filter children
-        children: item.name.toLowerCase().includes(query)
-          ? item.children
-          : item.children?.filter((child) => child.name.toLowerCase().includes(query)),
-      }));
+    return items.flatMap((item) => {
+      if (item.name.toLowerCase().includes(query)) return [item];
+      const children = item.children ? filterItemsBySearch(item.children, query) : [];
+      return children.length > 0 ? [{ ...item, children }] : [];
+    });
+  }
+
+  function hasMatchingDescendant(item: NavItem, query: string): boolean {
+    return (
+      item.children?.some(
+        (child) => child.name.toLowerCase().includes(query) || hasMatchingDescendant(child, query)
+      ) ?? false
+    );
   }
 
   // Combined filtered navigation (roles + search)
@@ -270,10 +284,7 @@
       const collectMatchingParents = (items: NavItem[]) => {
         items.forEach((item) => {
           if (item.children) {
-            const hasMatchingChild = item.children.some((child) =>
-              child.name.toLowerCase().includes(query)
-            );
-            if (hasMatchingChild) {
+            if (hasMatchingDescendant(item, query)) {
               itemsToExpand.push(item.id);
             }
             collectMatchingParents(item.children);
@@ -566,6 +577,8 @@
         onNavigate={handleNavigate}
         onItemMouseEnter={handleItemMouseEnter}
         onItemMouseLeave={handleItemMouseLeave}
+        autoCollapse={autoCollapse && !searchQuery.trim()}
+        siblingSectionIds={collapsibleSectionIds}
       />
     {:else}
       {#if searchQuery.trim()}

package/dist/lib/components/layout/Sidebar.svelte.d.ts

@@ -59,6 +59,11 @@ interface Props {
     collapsedWidth?: number;
     /** Enable search/filter input for navigation */
     searchable?: boolean;
+    /**
+     * Accordion navigation: opening a collapsible section or an item closes the others at
+     * its level (Docusaurus `autoCollapseCategories`). Ignored while searching.
+     */
+    autoCollapse?: boolean;
     /** Placeholder text for search input */
     searchPlaceholder?: string;
     /** Enable pinning feature for navigation items */

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',
@@ -333,7 +346,8 @@
       >
         <svg
           class={cn(
-            'h-4 w-4 transition-transform duration-200',
+            'h-4 w-4',
+            sidebarStore.animate && 'transition-transform duration-200',
             isExpanded ? 'rotate-0' : '-rotate-90'
           )}
           fill="none"
@@ -358,34 +372,51 @@
     </div>
 
     {#if isExpanded}
-      <ul class="mt-1 space-y-1 pl-4 overflow-hidden" transition:slide={{ duration: 200 }}>
-        {#each item.children as child}
+      <ul
+        class="mt-1 space-y-1 pl-4 overflow-hidden"
+        transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
+      >
+        {#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 +439,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 +486,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>
 
@@ -67,7 +78,8 @@
       <button
         onclick={toggleSection}
         class={cn(
-          'flex w-full items-center justify-between mb-2 px-4 text-xs font-semibold uppercase tracking-wider rounded-md overflow-hidden',
+          // min-h-8: a 32px target (WCAG 2.5.8 asks 24px); the text-xs line alone is 16px
+          'flex min-h-8 w-full items-center justify-between mb-1 px-4 text-xs font-semibold uppercase tracking-wider rounded-md overflow-hidden',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
           isLight
             ? 'text-muted-foreground hover:text-foreground'
@@ -79,7 +91,8 @@
         <span class="truncate">{section.title}</span>
         <svg
           class={cn(
-            'h-4 w-4 shrink-0 transition-transform duration-200',
+            'h-4 w-4 shrink-0',
+            sidebarStore.animate && 'transition-transform duration-200',
             isExpanded ? 'rotate-0' : '-rotate-90'
           )}
           fill="none"
@@ -125,6 +138,8 @@
             {onNavigate}
             onMouseEnter={onItemMouseEnter}
             onMouseLeave={onItemMouseLeave}
+            {autoCollapse}
+            siblingIds={expandableItemIds}
           />
         </li>
       {/each}
@@ -134,7 +149,7 @@
     <ul
       class="space-y-1 px-2 overflow-hidden"
       id={`sidebar-section-${section.id}`}
-      transition:slide={{ duration: 200 }}
+      transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
     >
       {#each section.items as item}
         <li>
@@ -151,6 +166,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';