@classic-homes/theme-svelte 1.7.2 → 1.8.2

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

@@ -23,11 +23,20 @@ const footerLinks = [
         ],
     },
 ];
-function renderLayout() {
+function renderLayout(extra = {}) {
     return render(PublicLayout, {
-        props: { navigation, footerLinks, children: textSnippet('Page content') },
+        props: { navigation, footerLinks, children: textSnippet('Page content'), ...extra },
     });
 }
+/** A drawer CTA that calls the `close` argument PublicLayout hands to mobileNavEnd. */
+function ctaSnippet(label) {
+    return createRawSnippet((args) => ({
+        render: () => `<button type="button">${label}</button>`,
+        setup: (el) => {
+            el.addEventListener('click', () => args().close());
+        },
+    }));
+}
 /**
  * jsdom has no layout engine, so getBoundingClientRect() returns zeros and target
  * size cannot be measured here. These assert the classes that produce a 44x44px
@@ -44,10 +53,11 @@ describe('PublicLayout accessibility', () => {
         const links = [...nav.querySelectorAll(':scope > a')];
         expect(links).toHaveLength(navigation.length);
         for (const link of links) {
-            // 20px text line box + 2 x 12px inset = 44px, with no layout shift
-            expect(link.className).toContain('relative');
-            expect(link.className).toContain('after:absolute');
-            expect(link.className).toContain('after:-inset-3');
+            // 20px text line box + 2 x 12px padding = 44px border box; -m-3 cancels
+            // 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:');
         }
     });
     it('should give the logo link a 44px-tall touch target', () => {
@@ -74,6 +84,45 @@ describe('PublicLayout accessibility', () => {
             expect(link.className).toContain('py-3');
         }
     });
+    it('should render headerEnd unwrapped when there is no mobileNavEnd', () => {
+        renderLayout({ headerEnd: textSnippet('Service Request') });
+        const cta = screen.getByText('Service Request');
+        expect(cta.parentElement?.className).not.toContain('hidden');
+    });
+    it('should hide headerEnd below the mobile breakpoint when mobileNavEnd is given', () => {
+        renderLayout({
+            headerEnd: textSnippet('Service Request'),
+            mobileNavEnd: ctaSnippet('Drawer CTA'),
+        });
+        const cta = screen.getByText('Service Request');
+        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'),
+            mobileNavEnd: ctaSnippet('Drawer CTA'),
+        });
+        expect(screen.queryByRole('button', { name: 'Drawer CTA' })).toBeNull();
+        await userEvent.click(screen.getByRole('button', { name: 'Open menu' }));
+        const drawerNav = screen.getByRole('navigation', { name: 'Mobile navigation' });
+        const cta = screen.getByRole('button', { name: 'Drawer CTA' });
+        expect(drawerNav.contains(cta)).toBe(true);
+        await userEvent.click(cta);
+        expect(screen.queryByRole('navigation', { name: 'Mobile navigation' })).toBeNull();
+    });
     it('should cue hover for a trackpad pointer that reports hover: none', () => {
         renderLayout();
         const nav = screen.getByRole('navigation', { name: 'Main navigation' });

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 */
@@ -34,6 +42,13 @@
     logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /**
+     * Content rendered at the bottom of the mobile drawer (e.g. a CTA button).
+     * When provided, `headerEnd` is hidden below the mobile breakpoint so a
+     * wide button no longer competes with the logo on phone widths. Receives
+     * `close` so the drawer can be dismissed after navigation.
+     */
+    mobileNavEnd?: Snippet<[{ close: () => void }]>;
     /** Use strong accent border on footer (10px top border) */
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
@@ -48,6 +63,7 @@
 
   let {
     navigation = [],
+    mobileBreakpoint = 'md',
     showFooter = true,
     footerLinks = [],
     copyright,
@@ -55,6 +71,7 @@
     logoSubtitle,
     logoEnvironment,
     headerEnd,
+    mobileNavEnd,
     strongFooterBorder = false,
     darkFooter = false,
     headerSearch,
@@ -63,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>
@@ -70,7 +94,7 @@
     showMenuButton={navigation.length > 0}
     menuOpen={mobileMenuOpen}
     onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
-    mobileBreakpoint="md"
+    {mobileBreakpoint}
     backdropBlur
     elevated
     maxWidth="7xl"
@@ -102,11 +126,10 @@
         <a
           href={item.href}
           class={cn(
-            'relative text-sm font-bold uppercase hover:text-primary',
-            // Touch target expansion (invisible, extends clickable area to 44x44px).
-            // -inset-3 exactly fills the nav's gap-6, so the space between links is
-            // no longer dead: adjacent expansions meet without overlapping.
-            "after:absolute after:-inset-3 after:content-['']",
+            // 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.
@@ -123,13 +146,18 @@
     {/snippet}
 
     {#snippet end()}
-      {#if headerEnd}
+      {#if headerEnd && mobileNavEnd}
+        <!-- Desktop only: the mobile drawer carries mobileNavEnd instead -->
+        <div class={desktopOnly[mobileBreakpoint]}>
+          {@render headerEnd()}
+        </div>
+      {:else if headerEnd}
         {@render headerEnd()}
       {/if}
     {/snippet}
 
     {#snippet mobileNav()}
-      <ul class="space-y-2 border-b border-black px-4 py-4">
+      <ul class={cn('space-y-2 px-4 py-4', !mobileNavEnd && 'border-b border-black')}>
         {#each navigation as item}
           <li>
             <a
@@ -150,6 +178,11 @@
           </li>
         {/each}
       </ul>
+      {#if mobileNavEnd}
+        <div class="border-b border-black px-4 pb-4">
+          {@render mobileNavEnd({ close: () => (mobileMenuOpen = false) })}
+        </div>
+      {/if}
     {/snippet}
   </Header>
 

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 */
@@ -27,6 +34,15 @@ interface Props {
     logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /**
+     * Content rendered at the bottom of the mobile drawer (e.g. a CTA button).
+     * When provided, `headerEnd` is hidden below the mobile breakpoint so a
+     * wide button no longer competes with the logo on phone widths. Receives
+     * `close` so the drawer can be dismissed after navigation.
+     */
+    mobileNavEnd?: Snippet<[{
+        close: () => void;
+    }]>;
     /** Use strong accent border on footer (10px top border) */
     strongFooterBorder?: boolean;
     /** Use dark footer variant */

package/package.json

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