@classic-homes/theme-svelte 1.8.1 → 1.9.1

package/dist/__tests__/a11y/PublicLayout.a11y.test.js

@@ -54,8 +54,7 @@ describe('PublicLayout accessibility', () => {
         expect(links).toHaveLength(navigation.length);
         for (const link of links) {
             // 20px text line box + 2 x 12px padding = 44px border box; -m-3 cancels
-            // it in layout. A real box, not an ::after overlay: iPadOS trackpad
-            // hit-testing missed the pseudo-element but honours padding.
+            // it in layout so the nav's gap-6 spacing is unchanged.
             expect(link.className).toContain('p-3');
             expect(link.className).toContain('-m-3');
             expect(link.className).not.toContain('after:');
@@ -99,6 +98,18 @@ describe('PublicLayout accessibility', () => {
         expect(cta.parentElement?.className).toContain('hidden');
         expect(cta.parentElement?.className).toContain('md:contents');
     });
+    it('should switch the header to the drawer at the given mobileBreakpoint', () => {
+        renderLayout({
+            mobileBreakpoint: 'lg',
+            headerEnd: textSnippet('Service Request'),
+            mobileNavEnd: ctaSnippet('Drawer CTA'),
+        });
+        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
+        expect(nav.className).toContain('lg:flex');
+        expect(nav.className).not.toContain('md:flex');
+        expect(screen.getByRole('button', { name: 'Open menu' }).className).toContain('lg:hidden');
+        expect(screen.getByText('Service Request').parentElement?.className).toContain('lg:contents');
+    });
     it('should render mobileNavEnd in the drawer and close it via the close argument', async () => {
         renderLayout({
             headerEnd: textSnippet('Service Request'),

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

@@ -0,0 +1,58 @@
+/**
+ * Sidebar Collapse Tests
+ *
+ * DashboardLayout applies its `sidebarCollapsed` default only when no open
+ * state is persisted. A first session (nothing in localStorage yet) must
+ * still let the user collapse the sidebar — the default must not re-apply
+ * on every toggle and snap it back open.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet, flushSync } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+let appCounter = 0;
+function freshAppId() {
+    return `test-collapse-${++appCounter}`;
+}
+function renderLayout(appId) {
+    return render(DashboardLayout, {
+        props: {
+            navigation: [{ id: 'main', items: [{ id: 'home', name: 'Home', href: '/' }] }],
+            appId,
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+        },
+    });
+}
+describe('sidebar collapse', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+    });
+    it('collapses on a first session with no persisted state', async () => {
+        const appId = freshAppId();
+        renderLayout(appId);
+        expect(sidebarStore.isOpen).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Collapse sidebar' }));
+        flushSync();
+        expect(sidebarStore.isOpen).toBe(false);
+        expect(localStorage.getItem(`classic-theme-sidebar-${appId}-open`)).toBe('false');
+        expect(screen.getByRole('button', { name: 'Expand sidebar' })).toBeInTheDocument();
+    });
+    it('keeps the collapse after a mobile round-trip in a first session', () => {
+        renderLayout(freshAppId());
+        sidebarStore.toggle();
+        flushSync();
+        sidebarStore.setMobile(true);
+        flushSync();
+        sidebarStore.setMobile(false);
+        flushSync();
+        expect(sidebarStore.isOpen).toBe(false);
+    });
+    it('marks state as persisted once the open state is written', () => {
+        sidebarStore.initialize(freshAppId());
+        expect(sidebarStore.hasPersistedState).toBe(false);
+        sidebarStore.close();
+        expect(sidebarStore.hasPersistedState).toBe(true);
+    });
+});

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

@@ -10,7 +10,7 @@
    * - Main content area with proper spacing
    * - Integrated with sidebar store for state management
    */
-  import type { Snippet } from 'svelte';
+  import { untrack, type Snippet } from 'svelte';
   import type {
     NavSection,
     NavItem,
@@ -201,13 +201,18 @@
   $effect(() => {
     sidebarStore.initialize(appId);
 
-    // Only apply prop-based initial state if no persisted state exists
+    // Only apply prop-based initial state if no persisted state exists.
+    // Untracked: open()/close() read `isOpen`, and tracking it would re-run
+    // this effect on every toggle and snap the sidebar back to the default.
     if (!sidebarStore.hasPersistedState && !isMobile) {
-      if (sidebarCollapsed) {
-        sidebarStore.close();
-      } else {
-        sidebarStore.open();
-      }
+      const collapsed = sidebarCollapsed;
+      untrack(() => {
+        if (collapsed) {
+          sidebarStore.close();
+        } else {
+          sidebarStore.open();
+        }
+      });
     }
   });
 

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

@@ -9,7 +9,7 @@
    * - Main content area with proper spacing
    * - Integrated with sidebar store for state management
    */
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { NavSection, NavItem, User, QuickLink, BackLink, HeaderSearchConfig } from '../../types/layout.js';
 type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {

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

@@ -17,9 +17,17 @@
   import Header from './Header.svelte';
   import LogoMain from '../LogoMain.svelte';
 
+  type Breakpoint = 'sm' | 'md' | 'lg';
+
   interface Props {
     /** Navigation items for header */
     navigation?: NavItem[];
+    /**
+     * Breakpoint below which the header shows the hamburger drawer instead of the
+     * inline nav. Default `md` (768px). Pick `lg` when logo + nav + headerEnd need
+     * more than ~768px: at iPad portrait widths (820px) they otherwise overlap.
+     */
+    mobileBreakpoint?: Breakpoint;
     /** Whether to show footer */
     showFooter?: boolean;
     /** Footer link sections */
@@ -55,6 +63,7 @@
 
   let {
     navigation = [],
+    mobileBreakpoint = 'md',
     showFooter = true,
     footerLinks = [],
     copyright,
@@ -71,6 +80,13 @@
   }: Props = $props();
 
   let mobileMenuOpen = $state(false);
+
+  // Full class strings so Tailwind's scanner sees them.
+  const desktopOnly: Record<Breakpoint, string> = {
+    sm: 'hidden sm:contents',
+    md: 'hidden md:contents',
+    lg: 'hidden lg:contents',
+  };
 </script>
 
 <AppShell>
@@ -78,7 +94,7 @@
     showMenuButton={navigation.length > 0}
     menuOpen={mobileMenuOpen}
     onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
-    mobileBreakpoint="md"
+    {mobileBreakpoint}
     backdropBlur
     elevated
     maxWidth="7xl"
@@ -112,9 +128,7 @@
           class={cn(
             // Touch target: p-3 around the 20px line box makes the anchor's own
             // border box 44px tall, and -m-3 cancels it in layout so the nav's
-            // gap-6 is unchanged (adjacent boxes meet without overlapping). A real
-            // box rather than an ::after overlay: iPadOS trackpad hit-testing
-            // landed below the text with the pseudo-element, but honours padding.
+            // gap-6 is unchanged (adjacent boxes meet without overlapping).
             '-m-3 flex items-center p-3 text-sm font-bold uppercase hover:text-primary',
             // iPadOS reports hover:none even with a trackpad attached, so the preset's
             // hoverOnlyWhenSupported gating means hover: never fires there. any-pointer:fine
@@ -134,7 +148,7 @@
     {#snippet end()}
       {#if headerEnd && mobileNavEnd}
         <!-- Desktop only: the mobile drawer carries mobileNavEnd instead -->
-        <div class="hidden md:contents">
+        <div class={desktopOnly[mobileBreakpoint]}>
           {@render headerEnd()}
         </div>
       {:else if headerEnd}

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

@@ -10,9 +10,16 @@
    */
 import type { Snippet } from 'svelte';
 import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
+type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {
     /** Navigation items for header */
     navigation?: NavItem[];
+    /**
+     * Breakpoint below which the header shows the hamburger drawer instead of the
+     * inline nav. Default `md` (768px). Pick `lg` when logo + nav + headerEnd need
+     * more than ~768px: at iPad portrait widths (820px) they otherwise overlap.
+     */
+    mobileBreakpoint?: Breakpoint;
     /** Whether to show footer */
     showFooter?: boolean;
     /** Footer link sections */

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

@@ -18,7 +18,8 @@ declare class SidebarStore {
      */
     get initialized(): boolean;
     /**
-     * Whether the sidebar open state was loaded from localStorage
+     * Whether a sidebar open state exists in localStorage (loaded at
+     * initialize, or written since)
      */
     get hasPersistedState(): boolean;
     /**

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

@@ -45,7 +45,8 @@ class SidebarStore {
         return __classPrivateFieldGet(this, _SidebarStore_initialized, "f");
     }
     /**
-     * Whether the sidebar open state was loaded from localStorage
+     * Whether a sidebar open state exists in localStorage (loaded at
+     * initialize, or written since)
      */
     get hasPersistedState() {
         return __classPrivateFieldGet(this, _SidebarStore_loadedFromStorage, "f");
@@ -340,6 +341,9 @@ _SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new
         return;
     try {
         localStorage.setItem(__classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_getStorageKey).call(this, 'open'), String(this.isOpen));
+        // The key now exists: a caller that applies defaults only when nothing
+        // is persisted must stop doing so, or it undoes the user's toggle.
+        __classPrivateFieldSet(this, _SidebarStore_loadedFromStorage, true, "f");
     }
     catch {
         // localStorage not available

package/package.json

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