@classic-homes/theme-svelte 1.15.2 → 1.16.0

package/dist/__tests__/public-layout-drawer.test.js

@@ -0,0 +1,116 @@
+/**
+ * PublicLayout mobileNavStyle="drawer": the hamburger opens the Sidebar drawer
+ * over the page instead of expanding a dropdown inside the header (which pushed
+ * the page down and, once scrolled, sat on the header's translucent bar).
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+import PublicLayout from '../lib/components/layout/PublicLayout.svelte';
+const children = createRawSnippet(() => ({ render: () => '<p>Page</p>' }));
+const navigation = [
+    { id: 'inventory', name: 'Inventory', href: '/inventory', active: true },
+    { id: 'pricing', name: 'Pricing', href: '/pricing' },
+];
+let instance = null;
+let host;
+function phoneWidth(matches) {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+        matches: query.startsWith('(max-width') ? matches : false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+}
+function mountLayout(props) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    instance = mount(PublicLayout, { target: host, props: { navigation, children, ...props } });
+    flushSync();
+    const hamburger = () => host.querySelector('button[aria-label="Open menu"]');
+    return {
+        open: () => {
+            hamburger().click();
+            flushSync();
+        },
+        drawer: () => host.querySelector('aside[aria-label="Main navigation"]'),
+        dropdown: () => host.querySelector('nav[aria-label="Mobile navigation"]'),
+        header: () => host.querySelector('header'),
+    };
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    vi.restoreAllMocks();
+});
+describe('PublicLayout drawer nav', () => {
+    it('opens the Sidebar drawer over the page on a phone', () => {
+        phoneWidth(true);
+        const layout = mountLayout({ mobileNavStyle: 'drawer' });
+        // Closed drawer is off-canvas (jsdom does not reflect `inert`)
+        expect(layout.drawer()?.className).toContain('-translate-x-full');
+        layout.open();
+        expect(layout.drawer()?.className).not.toContain('-translate-x-full');
+        expect(layout.drawer()?.textContent).toContain('Pricing');
+        // No dropdown inside the header
+        expect(layout.dropdown()?.textContent ?? '').not.toContain('Pricing');
+        // Drawer and scrim lift over the elevated header and page sheets
+        const layer = layout.drawer().parentElement;
+        expect(layer.style.getPropertyValue('--z-sidebar')).toBe('70');
+        expect(layer.querySelector('[aria-hidden="true"].fixed.inset-0')).not.toBeNull();
+    });
+    it('renders no drawer above the breakpoint', () => {
+        phoneWidth(false);
+        const layout = mountLayout({ mobileNavStyle: 'drawer' });
+        expect(layout.drawer()).toBeNull();
+    });
+    it('keeps the dropdown by default, on a solid background', () => {
+        phoneWidth(true);
+        const layout = mountLayout({});
+        layout.open();
+        expect(layout.drawer()).toBeNull();
+        expect(layout.dropdown()?.textContent).toContain('Pricing');
+        expect(layout.dropdown()?.className).toContain('bg-background');
+        expect(layout.header().className).toContain('z-50');
+    });
+    it('gives a parent with children a chevron menu in the header, and keeps the link', () => {
+        phoneWidth(false);
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        instance = mount(PublicLayout, {
+            target: host,
+            props: {
+                children,
+                navigation: [
+                    {
+                        id: 'inventory',
+                        name: 'Inventory',
+                        href: '/inventory',
+                        active: true,
+                        children: [
+                            { id: 'inventory-community', name: 'Community', href: '/inventory?view=community' },
+                            {
+                                id: 'inventory-collection',
+                                name: 'Collection',
+                                href: '/inventory?view=collection',
+                            },
+                        ],
+                    },
+                    { id: 'pricing', name: 'Pricing', href: '/pricing' },
+                ],
+            },
+        });
+        flushSync();
+        const link = host.querySelector('header a[href="/inventory"]');
+        expect(link?.getAttribute('aria-current')).toBe('page');
+        const trigger = host.querySelector('header button[aria-label="Inventory options"]');
+        expect(trigger).not.toBeNull();
+        // Only parents with children get one
+        expect(host.querySelector('header button[aria-label="Pricing options"]')).toBeNull();
+    });
+});

package/dist/lib/components/DataPanel.svelte

@@ -280,6 +280,16 @@
    */
   const isMobileCard = $derived(variant === 'card' && isMobile);
 
+  /**
+   * Bottom padding of the phone card: the home-indicator inset less the
+   * header's own 12px bottom padding and 8px more. The whole 34px iPhone inset
+   * stood the collapsed card 106px tall; this keeps the title about 26px above
+   * the screen edge, clear of the indicator, at 86px. The strip below the
+   * header is padding, so a swipe that starts there never reaches the header's
+   * pointer handler.
+   */
+  const CARD_SAFE_AREA_PAD = 'max(0px, calc(env(safe-area-inset-bottom, 0px) - 20px))';
+
   // Whether the panel is currently presented as a modal dialog (detached, or an
   // expanded mobile card). In that state we trap focus for a11y parity with React.
   // A desktop card is a non-modal floating sheet with no scrim, so it must not
@@ -1193,15 +1203,15 @@
         // Full-width phone sheet at its expanded height; `height` above is how
         // much of it shows. The part below the fold is slid off-screen with
         // `translate` (composited, and it composes with the mount keyframe's
-        // `transform`). The safe-area inset is added to the sheet and padded
+        // `transform`). CARD_SAFE_AREA_PAD is added to the sheet and padded
         // out, so the collapsed header sits above the home indicator instead
         // of inside the strip iOS claims for its swipe-to-leave gesture.
         return {
           bottom: '0',
           left: `${defaultLeftOffset}px`,
           width: `${defaultCardWidth}px`,
-          height: `calc(${cardExpandedHeight}px + env(safe-area-inset-bottom, 0px))`,
-          'padding-bottom': 'env(safe-area-inset-bottom, 0px)',
+          height: `calc(${cardExpandedHeight}px + ${CARD_SAFE_AREA_PAD})`,
+          'padding-bottom': CARD_SAFE_AREA_PAD,
           translate: `0 ${Math.max(0, cardExpandedHeight - height)}px`,
         };
       }

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

@@ -283,7 +283,9 @@
 
   <!-- Mobile Navigation Drawer (appears below header bar when open) -->
   {#if mobileNav && menuOpen}
-    <nav class={cn(bp.mobileNavHide)} aria-label="Mobile navigation">
+    <!-- Solid, unlike the translucent bar: the dropdown overlays the page once
+         the sticky header has scrolled -->
+    <nav class={cn(bp.mobileNavHide, 'bg-background')} aria-label="Mobile navigation">
       {@render mobileNav()}
     </nav>
   {/if}

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

@@ -8,7 +8,10 @@
    * - Main content area
    * - Responsive design
    * - Strong border options for brand consistency
+   * - Mobile nav as a dropdown under the header bar, or (`mobileNavStyle="drawer"`)
+   *   the slide-out Sidebar drawer DashboardLayout apps use
    */
+  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
   import { cn } from '../../utils.js';
@@ -16,6 +19,9 @@
   import Footer from './Footer.svelte';
   import Header from './Header.svelte';
   import LogoMain from '../LogoMain.svelte';
+  import Sidebar from './Sidebar.svelte';
+  import DropdownMenu from '../DropdownMenu.svelte';
+  import Icon, { type IconName } from '../Icon.svelte';
 
   type Breakpoint = 'sm' | 'md' | 'lg';
 
@@ -28,6 +34,14 @@
      * more than ~768px: at iPad portrait widths (820px) they otherwise overlap.
      */
     mobileBreakpoint?: Breakpoint;
+    /**
+     * How the hamburger opens the nav below `mobileBreakpoint`. `dropdown`
+     * (default) expands under the header bar, pushing the page down when the
+     * header is at the top. `drawer` slides the Sidebar in over the page with a
+     * scrim - the same drawer, focus trap, Escape and swipe-to-close as
+     * DashboardLayout apps.
+     */
+    mobileNavStyle?: 'dropdown' | 'drawer';
     /** Whether to show footer */
     showFooter?: boolean;
     /** Footer link sections */
@@ -64,6 +78,7 @@
   let {
     navigation = [],
     mobileBreakpoint = 'md',
+    mobileNavStyle = 'dropdown',
     showFooter = true,
     footerLinks = [],
     copyright,
@@ -81,6 +96,27 @@
 
   let mobileMenuOpen = $state(false);
 
+  const breakpointPx: Record<Breakpoint, number> = { sm: 640, md: 768, lg: 1024 };
+
+  // The drawer only exists below the breakpoint: the Sidebar is a fixed
+  // desktop column otherwise. Starts false, so SSR and the first paint render
+  // no drawer; the hamburger it pairs with is hidden above the breakpoint.
+  let belowBreakpoint = $state(false);
+  onMount(() => {
+    const query = window.matchMedia(`(max-width: ${breakpointPx[mobileBreakpoint] - 0.02}px)`);
+    const update = () => {
+      belowBreakpoint = query.matches;
+      if (!query.matches) mobileMenuOpen = false;
+    };
+    update();
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+  });
+
+  const useDrawer = $derived(mobileNavStyle === 'drawer');
+  const drawerNavigation = $derived<NavSection[]>([{ id: 'main', items: navigation }]);
+  const closeMenu = () => (mobileMenuOpen = false);
+
   // Full class strings so Tailwind's scanner sees them.
   const desktopOnly: Record<Breakpoint, string> = {
     sm: 'hidden sm:contents',
@@ -89,6 +125,51 @@
   };
 </script>
 
+<!-- One header nav link -->
+{#snippet navLink(item: NavItem)}
+  <a
+    href={item.href}
+    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).
+      '-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
+      // matches when any attached pointer is precise, giving trackpad users a cue.
+      '[@media(any-pointer:fine)]:[&:hover]:text-primary',
+      item.active ? 'text-primary' : 'text-muted-foreground'
+    )}
+    target={item.external ? '_blank' : undefined}
+    rel={item.external ? 'noopener noreferrer' : undefined}
+    aria-current={item.active ? 'page' : undefined}
+  >
+    {item.name}
+  </a>
+{/snippet}
+
+<!-- The drawer's footer: mobileNavEnd, closing the drawer after use -->
+{#snippet drawerFooter()}
+  {@render mobileNavEnd?.({ close: closeMenu })}
+{/snippet}
+
+<!-- The drawer's logo: PublicLayout's own logo, closing the drawer on tap -->
+{#snippet drawerLogo()}
+  <a href={logoHref} onclick={closeMenu} class="flex items-center">
+    {#if logo}
+      {@render logo()}
+    {:else}
+      <LogoMain
+        variant="horizontal"
+        color="dark"
+        size="md"
+        subtitle={logoSubtitle}
+        environment={logoEnvironment}
+      />
+    {/if}
+  </a>
+{/snippet}
+
 <AppShell>
   <Header
     showMenuButton={navigation.length > 0}
@@ -123,25 +204,34 @@
 
     {#snippet nav()}
       {#each navigation as item}
-        <a
-          href={item.href}
-          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).
-            '-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
-            // matches when any attached pointer is precise, giving trackpad users a cue.
-            '[@media(any-pointer:fine)]:[&:hover]:text-primary',
-            item.active ? 'text-primary' : 'text-muted-foreground'
-          )}
-          target={item.external ? '_blank' : undefined}
-          rel={item.external ? 'noopener noreferrer' : undefined}
-          aria-current={item.active ? 'page' : undefined}
-        >
-          {item.name}
-        </a>
+        {#if item.children?.length}
+          <!-- Parent link plus a chevron menu of its children (e.g. the same
+               page opened in another view). The drawer shows the same children
+               as an expandable sub-list. -->
+          <div class="flex items-center gap-0.5">
+            {@render navLink(item)}
+            <DropdownMenu
+              items={item.children.map((child) => ({
+                label: child.name,
+                href: child.href,
+                icon: child.icon as IconName | undefined,
+              }))}
+              align="end"
+              triggerLabel={`${item.name} options`}
+              triggerClass={cn(
+                '-my-3 -mr-2 flex items-center rounded-md p-2 hover:text-primary',
+                '[@media(any-pointer:fine)]:[&:hover]:text-primary',
+                item.active ? 'text-primary' : 'text-muted-foreground'
+              )}
+            >
+              {#snippet trigger()}
+                <Icon name="chevron-down" size={16} aria-hidden="true" />
+              {/snippet}
+            </DropdownMenu>
+          </div>
+        {:else}
+          {@render navLink(item)}
+        {/if}
       {/each}
     {/snippet}
 
@@ -156,36 +246,53 @@
       {/if}
     {/snippet}
 
+    <!-- Dropdown style only; the drawer renders after the header -->
     {#snippet mobileNav()}
-      <ul class={cn('space-y-2 px-4 py-4', !mobileNavEnd && 'border-b border-black')}>
-        {#each navigation as item}
-          <li>
-            <a
-              href={item.href}
-              class={cn(
-                'block rounded-md px-3 py-3 text-sm font-bold uppercase',
-                item.active
-                  ? 'bg-primary/10 text-primary'
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-              )}
-              target={item.external ? '_blank' : undefined}
-              rel={item.external ? 'noopener noreferrer' : undefined}
-              aria-current={item.active ? 'page' : undefined}
-              onclick={() => (mobileMenuOpen = false)}
-            >
-              {item.name}
-            </a>
-          </li>
-        {/each}
-      </ul>
-      {#if mobileNavEnd}
-        <div class="border-b border-black px-4 pb-4">
-          {@render mobileNavEnd({ close: () => (mobileMenuOpen = false) })}
-        </div>
+      {#if !useDrawer}
+        <ul class={cn('space-y-2 px-4 py-4', !mobileNavEnd && 'border-b border-black')}>
+          {#each navigation as item}
+            <li>
+              <a
+                href={item.href}
+                class={cn(
+                  'block rounded-md px-3 py-3 text-sm font-bold uppercase',
+                  item.active
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+                target={item.external ? '_blank' : undefined}
+                rel={item.external ? 'noopener noreferrer' : undefined}
+                aria-current={item.active ? 'page' : undefined}
+                onclick={() => (mobileMenuOpen = false)}
+              >
+                {item.name}
+              </a>
+            </li>
+          {/each}
+        </ul>
+        {#if mobileNavEnd}
+          <div class="border-b border-black px-4 pb-4">
+            {@render mobileNavEnd({ close: () => (mobileMenuOpen = false) })}
+          </div>
+        {/if}
       {/if}
     {/snippet}
   </Header>
 
+  {#if useDrawer && belowBreakpoint}
+    <!-- --z-sidebar 70 (scrim 60): over the elevated header (z-50) and any
+         page-level sheet or panel, which sit at z-50 and below -->
+    <div class="contents" style="--z-sidebar: 70">
+      <Sidebar
+        navigation={drawerNavigation}
+        isMobile
+        mobileOpen={mobileMenuOpen}
+        onClose={closeMenu}
+        logo={drawerLogo}
+        footer={mobileNavEnd ? drawerFooter : undefined}
+      />
+    </div>
+  {/if}
   <!-- Main Content -->
   <main id="main-content" class="flex-1 bg-content-bg">
     {@render children()}

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

@@ -1,13 +1,3 @@
-/**
-   * PublicLayout - Layout for public-facing pages
-   *
-   * Features:
-   * - Header with navigation (uppercase bold links)
-   * - Footer with link sections
-   * - Main content area
-   * - Responsive design
-   * - Strong border options for brand consistency
-   */
 import type { Snippet } from 'svelte';
 import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
 type Breakpoint = 'sm' | 'md' | 'lg';
@@ -20,6 +10,14 @@ interface Props {
      * more than ~768px: at iPad portrait widths (820px) they otherwise overlap.
      */
     mobileBreakpoint?: Breakpoint;
+    /**
+     * How the hamburger opens the nav below `mobileBreakpoint`. `dropdown`
+     * (default) expands under the header bar, pushing the page down when the
+     * header is at the top. `drawer` slides the Sidebar in over the page with a
+     * scrim - the same drawer, focus trap, Escape and swipe-to-close as
+     * DashboardLayout apps.
+     */
+    mobileNavStyle?: 'dropdown' | 'drawer';
     /** Whether to show footer */
     showFooter?: boolean;
     /** Footer link sections */

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

@@ -458,11 +458,16 @@
   }
 </script>
 
-<!-- Mobile Overlay: z-40 positions below sidebar (z-50) but above main content.
+<!-- Mobile Overlay: 10 below the sidebar (--z-sidebar, default 50, so z-40) but
+     above main content; a host that lifts --z-sidebar lifts the scrim with it.
      Not focusable: the drawer traps focus and handles Escape itself. -->
 {#if isMobile && mobileOpen}
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-  <div class="fixed inset-0 z-40 bg-black/50" onclick={() => onClose?.()} aria-hidden="true"></div>
+  <div
+    class="fixed inset-0 z-[calc(var(--z-sidebar,50)_-_10)] bg-black/50"
+    onclick={() => onClose?.()}
+    aria-hidden="true"
+  ></div>
 {/if}
 
 <!-- Sidebar: z-50 positions above overlay and content, below modals (z-100+) -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",
@@ -30,6 +30,7 @@
     "clean": "node ../../scripts/rm.mjs dist",
     "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
+    "test:shard": "vitest run --shard=$VITEST_SHARD",
     "test:watch": "vitest",
     "test:a11y": "vitest run src/__tests__/a11y/"
   },
@@ -72,6 +73,7 @@
     "zod": "^3.23.0"
   },
   "devDependencies": {
+    "@classic-homes/notifications": "*",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/jest-dom": "^6.6.0",