@classic-homes/theme-svelte 1.8.1 → 1.8.2

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/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/package.json

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