@classic-homes/theme-svelte 1.17.0 → 1.18.0

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

@@ -27,4 +27,13 @@ describe('DropdownMenu trigger', () => {
         }
         expect(button.classList.contains('custom')).toBe(true);
     });
+    it('adds a disclosure chevron only with showChevron', () => {
+        const { unmount } = render(DropdownMenu, { props: { items, trigger } });
+        expect(screen.getByRole('button', { name: 'Menu' }).querySelector('svg')).toBeNull();
+        unmount();
+        render(DropdownMenu, { props: { items, trigger, triggerVariant: 'ghost', showChevron: true } });
+        const chevron = screen.getByRole('button', { name: 'Menu' }).querySelector('svg');
+        expect(chevron).not.toBeNull();
+        expect(chevron?.getAttribute('aria-hidden')).toBe('true');
+    });
 });

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

@@ -70,4 +70,17 @@ describe('sidebar mobile semantics', () => {
         sidebarStore.setMobile(false);
         expect(sidebarStore.isOpen).toBe(false);
     });
+    it('does not animate expansion until the frames after initialize', async () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-sections`, JSON.stringify(['a']));
+        // A fresh store instance would start false; the singleton may already be settled
+        // from earlier tests, so check the reset-on-initialize path via a new appId.
+        sidebarStore.animate = false;
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isSectionExpanded('a')).toBe(true);
+        expect(sidebarStore.animate).toBe(false);
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(sidebarStore.animate).toBe(true);
+    });
 });

package/dist/lib/components/DropdownMenu.svelte

@@ -50,6 +50,11 @@
     triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
   }
 
   let {
@@ -64,6 +69,7 @@
     triggerVariant,
     triggerSize = 'sm',
     triggerLabel,
+    showChevron = false,
   }: Props = $props();
 
   function handleOpenChange(newOpen: boolean) {
@@ -130,6 +136,17 @@
         aria-label={triggerLabel}
       >
         {@render trigger()}
+        {#if showChevron}
+          <Icon
+            name="chevron-down"
+            size={16}
+            class={cn(
+              'ml-1 shrink-0 opacity-60 transition-transform duration-200 motion-reduce:transition-none',
+              open && 'rotate-180'
+            )}
+            aria-hidden="true"
+          />
+        {/if}
       </button>
     {/snippet}
   </DropdownMenuPrimitive.Trigger>

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

@@ -44,6 +44,11 @@ interface Props {
     triggerSize?: ButtonVariants['size'];
     /** Accessible name for the trigger `<button>` (for icon-only triggers) */
     triggerLabel?: string;
+    /**
+     * Show a disclosure chevron after the trigger content, turned while the menu is open,
+     * so a text trigger (e.g. header navigation) reads as a menu rather than a link.
+     */
+    showChevron?: boolean;
 }
 declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

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

@@ -165,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' &&
@@ -179,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(() => {
@@ -252,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'
   );
@@ -286,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}

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

@@ -346,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"
@@ -371,7 +372,10 @@
     </div>
 
     {#if isExpanded}
-      <ul class="mt-1 space-y-1 pl-4 overflow-hidden" transition:slide={{ duration: 200 }}>
+      <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>
             {#if child.children?.length}

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

@@ -78,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'
@@ -90,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"
@@ -147,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>

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

@@ -13,6 +13,12 @@ declare class SidebarStore {
     expandedSections: Set<string>;
     expandedItems: Set<string>;
     pinnedItems: Set<string>;
+    /**
+     * Whether expand/collapse should animate. False until the frame after `initialize`,
+     * so restoring saved sections (and any defaults or reveals applied on mount) appears
+     * at once instead of every section sliding open on each page load.
+     */
+    animate: boolean;
     /**
      * Whether the store has been initialized
      */

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

@@ -27,6 +27,12 @@ class SidebarStore {
         this.expandedSections = $state(new Set());
         this.expandedItems = $state(new Set());
         this.pinnedItems = $state(new Set());
+        /**
+         * Whether expand/collapse should animate. False until the frame after `initialize`,
+         * so restoring saved sections (and any defaults or reveals applied on mount) appears
+         * at once instead of every section sliding open on each page load.
+         */
+        this.animate = $state(false);
         _SidebarStore_initialized.set(this, false);
         _SidebarStore_loadedFromStorage.set(this, false);
         _SidebarStore_loadedExpansionFromStorage.set(this, false);
@@ -114,6 +120,13 @@ class SidebarStore {
         catch {
             // localStorage not available
         }
+        // Two frames: effects that apply defaults run after this one, before the next paint.
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => requestAnimationFrame(() => (this.animate = true)));
+        }
+        else {
+            this.animate = true;
+        }
     }
     /**
      * Get the current app ID

package/package.json

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