@classic-homes/theme-svelte 1.7.2 → 1.8.1

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,12 @@ 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. A real box, not an ::after overlay: iPadOS trackpad
+            // hit-testing missed the pseudo-element but honours padding.
+            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 +85,33 @@ 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 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

@@ -34,6 +34,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 */
@@ -55,6 +62,7 @@
     logoSubtitle,
     logoEnvironment,
     headerEnd,
+    mobileNavEnd,
     strongFooterBorder = false,
     darkFooter = false,
     headerSearch,
@@ -102,11 +110,12 @@
         <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). A real
+            // box rather than an ::after overlay: iPadOS trackpad hit-testing
+            // landed below the text with the pseudo-element, but honours padding.
+            '-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 +132,18 @@
     {/snippet}
 
     {#snippet end()}
-      {#if headerEnd}
+      {#if headerEnd && mobileNavEnd}
+        <!-- Desktop only: the mobile drawer carries mobileNavEnd instead -->
+        <div class="hidden md:contents">
+          {@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 +164,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

@@ -27,6 +27,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.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",