@classic-homes/theme-svelte 0.1.4 → 0.1.6

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

@@ -1,27 +1,93 @@
 /**
-   * Header - Application header component
+   * Header - Unified application header component
+   *
+   * A flexible header component that supports both dashboard and public layouts.
    *
    * Features:
    * - Hamburger menu button for mobile
-   * - Customizable start and end slots
-   * - Optional navigation slot with uppercase styling
-   * - Responsive design
+   * - Collapse/expand button for desktop sidebar
+   * - Customizable start, nav, and end slots
+   * - Mobile navigation drawer support
+   * - Optional page title
+   * - Backdrop blur support
+   * - Configurable responsive breakpoint (sm, md, lg)
+   * - Responsive design with container width options
    * - Stronger border styling to match brand guidelines
+   *
+   * @example Dashboard layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={isMobile}
+   *   menuOpen={sidebarOpen}
+   *   onMenuClick={() => toggleSidebar()}
+   *   showCollapseButton={!isMobile}
+   *   sidebarCollapsed={!sidebarOpen}
+   *   onCollapseClick={() => toggleSidebar()}
+   *   title="Dashboard"
+   * />
+   * ```
+   *
+   * @example Public layout usage:
+   * ```svelte
+   * <Header
+   *   showMenuButton={true}
+   *   menuOpen={mobileMenuOpen}
+   *   onMenuClick={() => mobileMenuOpen = !mobileMenuOpen}
+   *   mobileBreakpoint="md"
+   *   backdropBlur
+   *   elevated
+   *   maxWidth="7xl"
+   * >
+   *   {#snippet start()}
+   *     <a href="/"><Logo /></a>
+   *   {/snippet}
+   *   {#snippet nav()}
+   *     <NavLinks />
+   *   {/snippet}
+   *   {#snippet mobileNav()}
+   *     <MobileNavDrawer />
+   *   {/snippet}
+   * </Header>
+   * ```
    */
 import type { Snippet } from 'svelte';
+import type { HeaderSearchConfig } from '../../types/layout.js';
+type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {
     /** Whether to show hamburger menu button (mobile) */
     showMenuButton?: boolean;
+    /** Whether the mobile menu is currently open (for aria-expanded) */
+    menuOpen?: boolean;
     /** Callback when menu button is clicked */
     onMenuClick?: () => void;
-    /** Custom start content (left side) */
+    /** Whether to show collapse/expand button (desktop sidebar toggle) */
+    showCollapseButton?: boolean;
+    /** Whether the sidebar is collapsed (for aria-expanded and icon direction) */
+    sidebarCollapsed?: boolean;
+    /** Callback when collapse button is clicked */
+    onCollapseClick?: () => void;
+    /** Page title displayed in header */
+    title?: string;
+    /** Custom start content (left side, after menu/collapse buttons) */
     start?: Snippet;
     /** Navigation content (center/right on desktop, hidden on mobile) */
     nav?: Snippet;
     /** Custom end content (right side) */
     end?: Snippet;
+    /** Mobile navigation drawer content (appears below header bar when menu is open) */
+    mobileNav?: Snippet;
+    /** Breakpoint at which to switch between mobile and desktop layouts */
+    mobileBreakpoint?: Breakpoint;
     /** Use stronger/thicker border */
     strongBorder?: boolean;
+    /** Enable backdrop blur effect */
+    backdropBlur?: boolean;
+    /** Use elevated z-index (z-50 instead of z-30) */
+    elevated?: boolean;
+    /** Constrain content to max-width container */
+    maxWidth?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+    /** Search configuration */
+    search?: HeaderSearchConfig;
     /** Additional classes */
     class?: string;
 }

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

@@ -10,10 +10,11 @@
    * - Strong border options for brand consistency
    */
   import type { Snippet } from 'svelte';
-  import type { NavItem, NavSection } from '../../types/layout.js';
+  import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
   import { cn } from '../../utils.js';
   import AppShell from './AppShell.svelte';
   import Footer from './Footer.svelte';
+  import Header from './Header.svelte';
   import LogoMain from '../LogoMain.svelte';
 
   interface Props {
@@ -37,6 +38,8 @@
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
     darkFooter?: boolean;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
   }
@@ -52,6 +55,7 @@
     headerEnd,
     strongFooterBorder = false,
     darkFooter = false,
+    headerSearch,
     children,
   }: Props = $props();
 
@@ -59,12 +63,17 @@
 </script>
 
 <AppShell>
-  <!-- Header -->
-  <header
-    class="sticky top-0 z-50 border-b border-black bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+  <Header
+    showMenuButton={navigation.length > 0}
+    menuOpen={mobileMenuOpen}
+    onMenuClick={() => (mobileMenuOpen = !mobileMenuOpen)}
+    mobileBreakpoint="md"
+    backdropBlur
+    elevated
+    maxWidth="7xl"
+    search={headerSearch}
   >
-    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-      <!-- Logo -->
+    {#snippet start()}
       <a href="/" class="flex items-center">
         {#if logo}
           {@render logo()}
@@ -78,90 +87,55 @@
           />
         {/if}
       </a>
+    {/snippet}
 
-      <!-- Desktop Navigation -->
-      {#if navigation.length > 0}
-        <nav class="hidden md:flex md:items-center md:gap-6">
-          {#each navigation as item}
+    {#snippet nav()}
+      {#each navigation as item}
+        <a
+          href={item.href}
+          class={cn(
+            'text-sm font-bold uppercase transition-colors 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>
+      {/each}
+    {/snippet}
+
+    {#snippet end()}
+      {#if headerEnd}
+        {@render headerEnd()}
+      {/if}
+    {/snippet}
+
+    {#snippet mobileNav()}
+      <ul class="space-y-2 border-b border-black px-4 py-4">
+        {#each navigation as item}
+          <li>
             <a
               href={item.href}
               class={cn(
-                'text-sm font-bold uppercase transition-colors hover:text-primary',
-                item.active ? 'text-primary' : 'text-muted-foreground'
+                'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
+                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>
-          {/each}
-        </nav>
-      {/if}
-
-      <!-- Header End (Actions) -->
-      <div class="flex items-center gap-4">
-        {#if headerEnd}
-          {@render headerEnd()}
-        {/if}
-
-        <!-- Mobile Menu Button -->
-        {#if navigation.length > 0}
-          <button
-            class="rounded-md p-2 hover:bg-accent hover:text-accent-foreground md:hidden"
-            onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
-            aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-            aria-expanded={mobileMenuOpen}
-          >
-            {#if mobileMenuOpen}
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            {:else}
-              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            {/if}
-          </button>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Mobile Navigation -->
-    {#if mobileMenuOpen && navigation.length > 0}
-      <nav class="border-t border-black px-4 py-4 md:hidden">
-        <ul class="space-y-2">
-          {#each navigation as item}
-            <li>
-              <a
-                href={item.href}
-                class={cn(
-                  'block rounded-md px-3 py-2 text-sm font-bold uppercase transition-colors',
-                  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}
-                onclick={() => (mobileMenuOpen = false)}
-              >
-                {item.name}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      </nav>
-    {/if}
-  </header>
+          </li>
+        {/each}
+      </ul>
+    {/snippet}
+  </Header>
 
   <!-- Main Content -->
   <main id="main-content" class="flex-1 bg-content-bg">

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

@@ -9,7 +9,7 @@
    * - Strong border options for brand consistency
    */
 import type { Snippet } from 'svelte';
-import type { NavItem, NavSection } from '../../types/layout.js';
+import type { NavItem, NavSection, HeaderSearchConfig } from '../../types/layout.js';
 interface Props {
     /** Navigation items for header */
     navigation?: NavItem[];
@@ -31,6 +31,8 @@ interface Props {
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
     darkFooter?: boolean;
+    /** Header search configuration */
+    headerSearch?: HeaderSearchConfig;
     /** Main content */
     children: Snippet;
 }

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

@@ -3,7 +3,7 @@
    * QuickLinks - Quick navigation links section for sidebar
    *
    * Features:
-   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (stacked centered icons only)
    * - Light/dark variant support
    * - External link indicator
    * - Custom icon renderer support
@@ -16,37 +16,41 @@
   interface Props {
     /** Array of quick link items */
     links: QuickLink[];
-    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     display?: 'list' | 'icons';
     /** Visual variant - light (default) or dark */
     variant?: 'light' | 'dark';
     /** Custom icon renderer */
     icon?: Snippet<[QuickLink]>;
+    /** Accessible label for the navigation region */
+    ariaLabel?: string;
     /** Additional classes */
     class?: string;
   }
 
-  let { links, display = 'list', variant = 'light', icon, class: className }: Props = $props();
+  let {
+    links,
+    display = 'list',
+    variant = 'light',
+    icon,
+    ariaLabel = 'Quick links',
+    class: className,
+  }: Props = $props();
 
   const isLight = $derived(variant === 'light');
 </script>
 
 {#if links.length > 0}
   <div
-    class={cn(
-      display === 'list'
-        ? 'flex flex-col gap-1'
-        : 'flex flex-row items-center justify-center gap-2',
-      className
-    )}
+    class={cn('flex flex-col gap-1', display === 'icons' && 'items-center', className)}
     role="navigation"
-    aria-label="Quick links"
+    aria-label={ariaLabel}
   >
     {#each links as link}
       <a
         href={link.href}
         class={cn(
-          'flex items-center transition-colors',
+          'flex items-center transition-all duration-300 motion-reduce:transition-none overflow-hidden',
           // List mode styles
           display === 'list' && 'gap-3 rounded-md px-3 py-2 text-sm',
           display === 'list' &&
@@ -56,7 +60,7 @@
             !isLight &&
             'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
           // Icon mode styles
-          display === 'icons' && 'rounded-md p-2',
+          display === 'icons' && 'rounded-md p-2 gap-0',
           display === 'icons' &&
             isLight &&
             'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
@@ -87,24 +91,40 @@
           </span>
         {/if}
 
-        {#if display === 'list'}
-          <span class="flex-1 truncate">{link.label}</span>
+        <span
+          class={cn(
+            'truncate whitespace-nowrap transition-all duration-300 motion-reduce:transition-none',
+            display === 'icons' ? 'w-0 opacity-0 flex-none' : 'flex-1 opacity-100'
+          )}
+        >
+          {link.label}
+        </span>
 
-          {#if link.external}
-            <svg
-              class="h-4 w-4 shrink-0 opacity-50"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          {/if}
+        {#if link.badge !== undefined && display === 'list'}
+          <span
+            class="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground whitespace-nowrap"
+          >
+            {link.badge}
+          </span>
+        {/if}
+
+        {#if link.external}
+          <svg
+            class={cn(
+              'h-4 w-4 shrink-0 transition-all duration-300',
+              display === 'icons' ? 'hidden' : 'opacity-50'
+            )}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
         {/if}
       </a>
     {/each}

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

@@ -2,7 +2,7 @@
    * QuickLinks - Quick navigation links section for sidebar
    *
    * Features:
-   * - Two display modes: 'list' (stacked with labels) and 'icons' (horizontal icons only)
+   * - Two display modes: 'list' (stacked with labels) and 'icons' (stacked centered icons only)
    * - Light/dark variant support
    * - External link indicator
    * - Custom icon renderer support
@@ -13,12 +13,14 @@ import type { QuickLink } from '../../types/layout.js';
 interface Props {
     /** Array of quick link items */
     links: QuickLink[];
-    /** Display mode: 'list' for stacked with labels, 'icons' for horizontal icons only */
+    /** Display mode: 'list' for stacked with labels, 'icons' for stacked centered icons only */
     display?: 'list' | 'icons';
     /** Visual variant - light (default) or dark */
     variant?: 'light' | 'dark';
     /** Custom icon renderer */
     icon?: Snippet<[QuickLink]>;
+    /** Accessible label for the navigation region */
+    ariaLabel?: string;
     /** Additional classes */
     class?: string;
 }