@classic-homes/theme-svelte 1.16.0 → 1.17.0

package/dist/__tests__/alert-dialog-dismiss.test.js

@@ -0,0 +1,54 @@
+/**
+ * AlertDialog: however it closes — Cancel, confirm, Escape — exactly one of
+ * onConfirm / onCancel runs, so `{#if x}<AlertDialog open onCancel=…>` callers
+ * can reset their state on Escape too.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, tick } from 'svelte';
+import AlertDialog from '../lib/components/AlertDialog.svelte';
+let instance = null;
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    document.body.innerHTML = '';
+});
+async function mountOpen() {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    instance = mount(AlertDialog, {
+        target: document.body,
+        props: { open: true, title: 'Delete?', onConfirm, onCancel },
+    });
+    flushSync();
+    await tick();
+    const button = (label) => [...document.querySelectorAll('button')].find((b) => b.textContent?.trim() === label);
+    return { onConfirm, onCancel, button };
+}
+describe('AlertDialog dismiss', () => {
+    it('calls onCancel once on Cancel', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Cancel').click();
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+    it('calls onConfirm once and not onCancel on confirm', async () => {
+        const { onConfirm, onCancel, button } = await mountOpen();
+        button('Continue').click();
+        flushSync();
+        await tick();
+        expect(onConfirm).toHaveBeenCalledTimes(1);
+        expect(onCancel).not.toHaveBeenCalled();
+    });
+    it('calls onCancel on Escape', async () => {
+        const { onConfirm, onCancel } = await mountOpen();
+        const content = document.querySelector('[role="alertdialog"]');
+        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        flushSync();
+        await tick();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onConfirm).not.toHaveBeenCalled();
+    });
+});

package/dist/__tests__/dropdown-trigger.test.js

@@ -0,0 +1,30 @@
+/**
+ * DropdownMenu trigger styling
+ *
+ * `triggerVariant` styles the trigger <button> as a Button variant, so a menu
+ * in a header looks like the buttons beside it without app-side classes.
+ * Without it the trigger stays unstyled, as before.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DropdownMenu from '../lib/components/DropdownMenu.svelte';
+import { buttonVariants } from '../lib/components/button-variants.js';
+const trigger = createRawSnippet(() => ({ render: () => '<span>Menu</span>' }));
+const items = [{ label: 'One', href: '/one' }];
+describe('DropdownMenu trigger', () => {
+    it('is unstyled by default', () => {
+        render(DropdownMenu, { props: { items, trigger, triggerClass: 'custom' } });
+        expect(screen.getByRole('button', { name: 'Menu' }).className).toBe('custom');
+    });
+    it('takes Button variant classes from triggerVariant, plus triggerClass', () => {
+        render(DropdownMenu, {
+            props: { items, trigger, triggerVariant: 'ghost', triggerClass: 'custom' },
+        });
+        const button = screen.getByRole('button', { name: 'Menu' });
+        for (const cls of buttonVariants({ variant: 'ghost', size: 'sm' }).split(' ')) {
+            expect(button.classList.contains(cls)).toBe(true);
+        }
+        expect(button.classList.contains('custom')).toBe(true);
+    });
+});

package/dist/__tests__/sidebar-docs-parity.test.js

@@ -0,0 +1,134 @@
+/**
+ * Sidebar features docs sites need (Docusaurus parity)
+ *
+ * - Items nest to any depth: a child with its own children renders as an expandable row
+ *   instead of being dropped.
+ * - Search filters and expands at every depth.
+ * - `sidebarAutoCollapse`: opening a section or item closes the others at its level.
+ * - DashboardLayout renders a page `footer` below the main content.
+ */
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const navigation = [
+    {
+        id: 'setup',
+        title: 'Setup',
+        collapsible: true,
+        expanded: true,
+        items: [
+            {
+                id: 'platforms',
+                name: 'Platforms',
+                expanded: true,
+                children: [
+                    { id: 'mac', name: 'macOS', href: '/setup/mac' },
+                    {
+                        id: 'linux',
+                        name: 'Linux',
+                        expanded: true,
+                        children: [
+                            { id: 'debian', name: 'Debian', href: '/setup/linux/debian', active: true },
+                            {
+                                id: 'rhel',
+                                name: 'RHEL',
+                                children: [{ id: 'rhel9', name: 'RHEL 9', href: '/setup/linux/rhel/9' }],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'tools',
+                name: 'Tools',
+                children: [{ id: 'cli', name: 'CLI', href: '/setup/cli' }],
+            },
+        ],
+    },
+    {
+        id: 'reference',
+        title: 'Reference',
+        collapsible: true,
+        expanded: false,
+        items: [{ id: 'api', name: 'API', href: '/reference/api' }],
+    },
+];
+function renderLayout(props = {}) {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-parity-${Math.random()}`,
+            navigation,
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+            ...props,
+        },
+    });
+}
+describe('sidebar docs parity', () => {
+    beforeAll(() => {
+        var _a;
+        // Expanding rows runs svelte's slide transition (Web Animations), which jsdom lacks
+        (_a = Element.prototype).animate ?? (_a.animate = vi.fn(() => ({
+            cancel: vi.fn(),
+            finish: vi.fn(),
+            onfinish: null,
+            oncancel: null,
+        })));
+    });
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+        sidebarStore.setDefaultItems([]);
+        sidebarStore.setDefaultSections([]);
+    });
+    it('renders categories nested deeper than one level', () => {
+        renderLayout();
+        const debian = screen.getByRole('link', { name: 'Debian' });
+        expect(debian).toHaveAttribute('aria-current', 'page');
+        // RHEL is a third-level category: an expandable row, collapsed by default
+        const rhel = screen.getByRole('button', { name: 'Expand RHEL' });
+        expect(screen.queryByRole('link', { name: 'RHEL 9' })).toBeNull();
+        return fireEvent.click(rhel).then(() => {
+            expect(screen.getByRole('link', { name: 'RHEL 9' })).toHaveAttribute('href', '/setup/linux/rhel/9');
+        });
+    });
+    it('finds and reveals matches at any depth when searching', async () => {
+        renderLayout({ searchable: true });
+        const search = screen.getByRole('searchbox');
+        await fireEvent.input(search, { target: { value: 'rhel 9' } });
+        // The search input is debounced
+        await vi.waitFor(() => expect(screen.getByRole('link', { name: /RHEL 9/ })).toBeInTheDocument());
+        expect(screen.queryByRole('link', { name: /macOS/ })).toBeNull();
+        expect(screen.queryByRole('link', { name: /Debian/ })).toBeNull();
+    });
+    it('closes sibling items and sections when sidebarAutoCollapse is on', async () => {
+        renderLayout({ sidebarAutoCollapse: true });
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(false);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: /Reference/ }));
+        expect(sidebarStore.isSectionExpanded('reference')).toBe(true);
+        expect(sidebarStore.isSectionExpanded('setup')).toBe(false);
+    });
+    it('leaves siblings open by default', async () => {
+        renderLayout();
+        await fireEvent.click(screen.getByRole('button', { name: 'Expand Tools' }));
+        expect(sidebarStore.isItemExpanded('platforms')).toBe(true);
+        expect(sidebarStore.isItemExpanded('tools')).toBe(true);
+    });
+    it('renders a page footer below the main content', () => {
+        const { container } = renderLayout({
+            footer: createRawSnippet(() => ({
+                render: () => '<footer>© Classic Homes</footer>',
+            })),
+        });
+        const main = container.querySelector('main#main-content');
+        const footer = screen.getByRole('contentinfo');
+        expect(footer).toHaveTextContent('© Classic Homes');
+        expect(main.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+        expect(within(main).queryByRole('contentinfo')).toBeNull();
+    });
+});

package/dist/__tests__/sidebar-items.test.js

@@ -0,0 +1,59 @@
+/**
+ * Sidebar item rendering
+ *
+ * - An item with an `icon` name and no custom icon renderer draws the theme
+ *   Icon (it used to draw a placeholder circle). An item without an icon
+ *   reserves no icon space.
+ * - Item links can shrink, so a long name truncates instead of widening the
+ *   sidebar into a horizontal scroll.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+const ARROW_LEFT_PATH = 'M19 12H5M12 19l-7-7 7-7';
+function renderLayout() {
+    return render(DashboardLayout, {
+        props: {
+            appId: `test-items-${Math.random()}`,
+            navigation: [
+                {
+                    id: 'main',
+                    items: [
+                        { id: 'back', name: 'Back', href: '/', icon: 'arrow-left' },
+                        {
+                            id: 'plain',
+                            name: 'A rather long page name that will not fit the sidebar',
+                            href: '/plain',
+                        },
+                    ],
+                },
+            ],
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+        },
+    });
+}
+describe('sidebar items', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+    });
+    it('draws the named theme icon when no icon renderer is given', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: 'Back' });
+        expect(link.querySelector('svg circle')).toBeNull();
+        expect(link.querySelector('svg path')?.getAttribute('d')).toBe(ARROW_LEFT_PATH);
+    });
+    it('reserves no icon space for an item without an icon', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.querySelector('svg')).toBeNull();
+        expect(link.querySelector('span.h-5.w-5')).toBeNull();
+    });
+    it('lets item links shrink so long names truncate', () => {
+        renderLayout();
+        const link = screen.getByRole('link', { name: /A rather long page name/ });
+        expect(link.classList.contains('min-w-0')).toBe(true);
+    });
+});

package/dist/lib/components/AlertDialog.svelte

@@ -62,19 +62,36 @@
     children,
   }: Props = $props();
 
+  // Each time the dialog opens, exactly one of onConfirm / onCancel runs when it
+  // closes. Escape and overlay clicks count as cancel, so callers that mount the
+  // dialog as `{#if x}<AlertDialog open onCancel={() => (x = null)} />` reset
+  // their state however it was dismissed.
+  let settled = false;
+  $effect.pre(() => {
+    if (open) settled = false;
+  });
+
+  function settle(confirmed: boolean) {
+    if (settled) return;
+    settled = true;
+    if (confirmed) onConfirm?.();
+    else onCancel?.();
+  }
+
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
+    if (!newOpen) settle(false);
     onOpenChange?.(newOpen);
   }
 
   function handleCancel() {
-    onCancel?.();
+    settle(false);
     open = false;
     onOpenChange?.(false);
   }
 
   function handleConfirm() {
-    onConfirm?.();
+    settle(true);
     open = false;
     onOpenChange?.(false);
   }

package/dist/lib/components/Button.svelte

@@ -1,37 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
-  import { tv, type VariantProps } from 'tailwind-variants';
-
-  const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
-        secondary:
-          'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
-        outline:
-          'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
-        ghost: 'hover:bg-muted-hover hover:text-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3 text-sm',
-        md: 'h-10 px-4 py-2',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  });
-
-  type ButtonVariants = VariantProps<typeof buttonVariants>;
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   interface Props {
     variant?: ButtonVariants['variant'];

package/dist/lib/components/Button.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
-    [key: string]: unknown;
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "icon" | undefined;
-    type?: "button" | "submit" | "reset";
+import { type ButtonVariants } from './button-variants.js';
+interface Props {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    type?: 'button' | 'submit' | 'reset';
     href?: string;
     disabled?: boolean;
     loading?: boolean;
@@ -12,6 +12,9 @@ declare const Button: import("svelte").Component<{
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-}, {}, "">;
+    /** Allow passing additional HTML attributes (aria-*, data-*, etc.) */
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/lib/components/DropdownMenu.svelte

@@ -3,6 +3,7 @@
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import Icon, { type IconName } from './Icon.svelte';
+  import { buttonVariants, type ButtonVariants } from './button-variants.js';
 
   export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
@@ -40,6 +41,13 @@
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
   }
@@ -53,6 +61,8 @@
     onOpenChange,
     class: className,
     triggerClass,
+    triggerVariant,
+    triggerSize = 'sm',
     triggerLabel,
   }: Props = $props();
 
@@ -111,7 +121,14 @@
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   <DropdownMenuPrimitive.Trigger>
     {#snippet child({ props })}
-      <button type="button" {...props} class={triggerClass} aria-label={triggerLabel}>
+      <button
+        type="button"
+        {...props}
+        class={triggerVariant
+          ? cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClass)
+          : triggerClass}
+        aria-label={triggerLabel}
+      >
         {@render trigger()}
       </button>
     {/snippet}

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import { type IconName } from './Icon.svelte';
+import { type ButtonVariants } from './button-variants.js';
 export interface DropdownMenuItem {
     type?: 'item' | 'separator' | 'label';
     label?: string;
@@ -34,6 +35,13 @@ interface Props {
     class?: string;
     /** Classes for the trigger `<button>` (style it here rather than nesting a button in `trigger`) */
     triggerClass?: string;
+    /**
+     * Style the trigger as a Button variant (e.g. `ghost` for header navigation).
+     * Unset leaves the trigger unstyled, as before; `triggerClass` still applies on top.
+     */
+    triggerVariant?: ButtonVariants['variant'];
+    /** Button size for the trigger, when `triggerVariant` is set. Default: `sm`. */
+    triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
 }

package/dist/lib/components/button-variants.d.ts

@@ -0,0 +1,119 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/lib/components/button-variants.js

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
+            secondary: 'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
+            outline: 'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
+            ghost: 'hover:bg-muted-hover hover:text-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-10 px-4 py-2',
+            sm: 'h-9 rounded-md px-3 text-sm',
+            md: 'h-10 px-4 py-2',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});

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,
@@ -269,6 +275,7 @@
     {quickLinksDisplay}
     quickLinkIcon={quickLinkIcon ?? (icon as Snippet<[QuickLink]> | undefined)}
     footer={sidebarFooter}
+    autoCollapse={sidebarAutoCollapse}
     {expandedWidth}
     {collapsedWidth}
     {searchable}
@@ -334,5 +341,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',
@@ -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.16.0",
+  "version": "1.17.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",