@classic-homes/theme-svelte 1.15.3 → 1.17.0

package/dist/lib/components/button-variants.d.ts

@@ -0,0 +1,119 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        md: string;
+        lg: string;
+        icon: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/lib/components/button-variants.js

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+/**
+ * Button styles, shared by Button and anything that renders a button-like
+ * control it cannot nest a Button inside (e.g. DropdownMenu's trigger).
+ */
+export const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',
+            secondary: 'border-2 border-secondary-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover focus-visible:ring-destructive',
+            outline: 'border-2 border-outline bg-transparent text-foreground hover:border-outline-hover hover:bg-primary hover:text-primary-foreground',
+            ghost: 'hover:bg-muted-hover hover:text-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-10 px-4 py-2',
+            sm: 'h-9 rounded-md px-3 text-sm',
+            md: 'h-10 px-4 py-2',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});

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

@@ -71,6 +71,10 @@
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Page footer below the main content, e.g. theme `Footer` with link columns */
+    footer?: Snippet;
+    /** Accordion sidebar: opening a section or item closes the others at its level */
+    sidebarAutoCollapse?: boolean;
     /** Sidebar width when expanded in pixels (default: 256) */
     expandedWidth?: number;
     /** Sidebar width when collapsed in pixels (default: 64) */
@@ -122,6 +126,8 @@
     headerEnd,
     userMenu,
     sidebarFooter,
+    footer,
+    sidebarAutoCollapse = false,
     expandedWidth = 256,
     collapsedWidth = 64,
     searchable = false,
@@ -269,6 +275,7 @@
     {quickLinksDisplay}
     quickLinkIcon={quickLinkIcon ?? (icon as Snippet<[QuickLink]> | undefined)}
     footer={sidebarFooter}
+    autoCollapse={sidebarAutoCollapse}
     {expandedWidth}
     {collapsedWidth}
     {searchable}
@@ -334,5 +341,8 @@
     >
       {@render children()}
     </main>
+    {#if footer}
+      {@render footer()}
+    {/if}
   </div>
 </AppShell>

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

@@ -49,6 +49,10 @@ interface Props {
     userMenu?: Snippet<[User]>;
     /** Sidebar footer content */
     sidebarFooter?: Snippet;
+    /** Page footer below the main content, e.g. theme `Footer` with link columns */
+    footer?: Snippet;
+    /** Accordion sidebar: opening a section or item closes the others at its level */
+    sidebarAutoCollapse?: boolean;
     /** Sidebar width when expanded in pixels (default: 256) */
     expandedWidth?: number;
     /** Sidebar width when collapsed in pixels (default: 64) */

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

@@ -69,6 +69,11 @@
     collapsedWidth?: number;
     /** Enable search/filter input for navigation */
     searchable?: boolean;
+    /**
+     * Accordion navigation: opening a collapsible section or an item closes the others at
+     * its level (Docusaurus `autoCollapseCategories`). Ignored while searching.
+     */
+    autoCollapse?: boolean;
     /** Placeholder text for search input */
     searchPlaceholder?: string;
     /** Enable pinning feature for navigation items */
@@ -109,6 +114,7 @@
     expandedWidth = 256,
     collapsedWidth = 64,
     searchable = false,
+    autoCollapse = false,
     searchPlaceholder = 'Search...',
     enablePinning = false,
     pinnedSectionTitle = 'Pinned',
@@ -154,14 +160,17 @@
 
   // Helper to find a nav item by ID (including nested children)
   function findNavItemById(sections: NavSection[], itemId: string): NavItem | undefined {
-    for (const section of sections) {
-      for (const item of section.items) {
+    const find = (items: NavItem[]): NavItem | undefined => {
+      for (const item of items) {
         if (item.id === itemId) return item;
-        if (item.children) {
-          const found = item.children.find((child) => child.id === itemId);
-          if (found) return found;
-        }
+        const found = item.children && find(item.children);
+        if (found) return found;
       }
+      return undefined;
+    };
+    for (const section of sections) {
+      const found = find(section.items);
+      if (found) return found;
     }
     return undefined;
   }
@@ -199,23 +208,28 @@
   // Search state
   let searchQuery = $state('');
 
+  // Sections an expanding section closes under autoCollapse
+  const collapsibleSectionIds = $derived(
+    autoCollapse ? roleFilteredNavigation.filter((s) => s.collapsible).map((s) => s.id) : []
+  );
+
   // Filter items by search query
+  // At any depth: an item stays when it or a descendant matches. A matching item keeps all
+  // its children; otherwise only the branches leading to matches remain.
   function filterItemsBySearch(items: NavItem[], query: string): NavItem[] {
-    return items
-      .filter((item) => {
-        const matches = item.name.toLowerCase().includes(query);
-        const childMatches = item.children?.some((child) =>
-          child.name.toLowerCase().includes(query)
-        );
-        return matches || childMatches;
-      })
-      .map((item) => ({
-        ...item,
-        // Keep all children if parent matches, otherwise filter children
-        children: item.name.toLowerCase().includes(query)
-          ? item.children
-          : item.children?.filter((child) => child.name.toLowerCase().includes(query)),
-      }));
+    return items.flatMap((item) => {
+      if (item.name.toLowerCase().includes(query)) return [item];
+      const children = item.children ? filterItemsBySearch(item.children, query) : [];
+      return children.length > 0 ? [{ ...item, children }] : [];
+    });
+  }
+
+  function hasMatchingDescendant(item: NavItem, query: string): boolean {
+    return (
+      item.children?.some(
+        (child) => child.name.toLowerCase().includes(query) || hasMatchingDescendant(child, query)
+      ) ?? false
+    );
   }
 
   // Combined filtered navigation (roles + search)
@@ -270,10 +284,7 @@
       const collectMatchingParents = (items: NavItem[]) => {
         items.forEach((item) => {
           if (item.children) {
-            const hasMatchingChild = item.children.some((child) =>
-              child.name.toLowerCase().includes(query)
-            );
-            if (hasMatchingChild) {
+            if (hasMatchingDescendant(item, query)) {
               itemsToExpand.push(item.id);
             }
             collectMatchingParents(item.children);
@@ -458,11 +469,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+) -->
@@ -561,6 +577,8 @@
         onNavigate={handleNavigate}
         onItemMouseEnter={handleItemMouseEnter}
         onItemMouseLeave={handleItemMouseLeave}
+        autoCollapse={autoCollapse && !searchQuery.trim()}
+        siblingSectionIds={collapsibleSectionIds}
       />
     {:else}
       {#if searchQuery.trim()}

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

@@ -59,6 +59,11 @@ interface Props {
     collapsedWidth?: number;
     /** Enable search/filter input for navigation */
     searchable?: boolean;
+    /**
+     * Accordion navigation: opening a collapsible section or an item closes the others at
+     * its level (Docusaurus `autoCollapseCategories`). Ignored while searching.
+     */
+    autoCollapse?: boolean;
     /** Placeholder text for search input */
     searchPlaceholder?: string;
     /** Enable pinning feature for navigation items */