@classic-homes/theme-svelte 0.1.4 → 0.1.5

package/dist/lib/components/layout/sidebar/SidebarFlyout.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  /**
+   * SidebarFlyout - Flyout menu for collapsed sidebar items
+   *
+   * Features entrance animation and keyboard navigation
+   */
+  import { fly } from 'svelte/transition';
+  import type { NavItem } from '../../../types/layout.js';
+  import { cn } from '../../../utils.js';
+
+  interface Props {
+    /** The item to show in the flyout */
+    item: NavItem;
+    /** Top position in pixels */
+    top: number;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters flyout */
+    onMouseEnter?: () => void;
+    /** Callback when mouse leaves flyout */
+    onMouseLeave?: () => void;
+  }
+
+  let { item, top, isLight = true, onNavigate, onMouseEnter, onMouseLeave }: Props = $props();
+
+  let flyoutElement = $state<HTMLElement | null>(null);
+
+  // Get all focusable elements within the flyout
+  function getFocusableElements(): HTMLElement[] {
+    if (!flyoutElement) return [];
+    const elements = flyoutElement.querySelectorAll<HTMLElement>(
+      'a[href]:not([disabled]):not([tabindex="-1"]), button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    return Array.from(elements);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      onMouseLeave?.();
+      return;
+    }
+
+    // Focus trap - cycle through focusable elements
+    if (event.key === 'Tab') {
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) return;
+
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
+
+      if (event.shiftKey) {
+        // Shift+Tab: go backwards
+        if (document.activeElement === firstElement || document.activeElement === flyoutElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab: go forwards
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+      return;
+    }
+
+    // Arrow key navigation within flyout
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const items = flyoutElement?.querySelectorAll('[role="menuitem"]');
+      if (!items || items.length === 0) return;
+
+      const currentIndex = Array.from(items).findIndex((el) => el === document.activeElement);
+
+      if (event.key === 'ArrowDown') {
+        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        (items[nextIndex] as HTMLElement).focus();
+      } else {
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        (items[prevIndex] as HTMLElement).focus();
+      }
+    }
+  }
+</script>
+
+{#snippet navBadge(badge: string | number | undefined)}
+  {#if badge !== undefined}
+    <span
+      class="ml-auto rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground"
+    >
+      {badge}
+    </span>
+  {/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={flyoutElement}
+  class={cn(
+    'fixed left-16 min-w-48 rounded-md border shadow-lg z-[calc(var(--z-sidebar,50)+10)]',
+    'motion-reduce:transition-none',
+    isLight ? 'bg-background border-border' : 'bg-sidebar border-sidebar-foreground/20'
+  )}
+  style="top: {top}px;"
+  role="menu"
+  tabindex="0"
+  onmouseenter={onMouseEnter}
+  onmouseleave={onMouseLeave}
+  onkeydown={handleKeydown}
+  transition:fly={{ x: -10, duration: 150 }}
+>
+  <div class="p-2">
+    <!-- Item name as header -->
+    <div
+      class={cn(
+        'px-3 py-2 text-sm font-medium',
+        isLight ? 'text-foreground' : 'text-sidebar-foreground'
+      )}
+    >
+      {#if item.href && !item.disabled}
+        <a
+          href={item.href}
+          class="hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 rounded"
+          target={item.external ? '_blank' : undefined}
+          rel={item.external ? 'noopener noreferrer' : undefined}
+          onclick={() => onNavigate?.(item)}
+        >
+          {item.name}
+          {#if item.external}
+            <span class="text-xs opacity-50">(opens in new tab)</span>
+          {/if}
+        </a>
+      {:else}
+        <span class={item.disabled ? 'opacity-50' : ''}>
+          {item.name}
+        </span>
+      {/if}
+    </div>
+
+    <!-- Children if present -->
+    {#if item.children && item.children.length > 0}
+      <div
+        class={cn('border-t mt-1 pt-1', isLight ? 'border-border' : 'border-sidebar-foreground/20')}
+      >
+        {#each item.children as child}
+          <a
+            href={child.disabled ? undefined : child.href}
+            class={cn(
+              'flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ml-2',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+              isLight
+                ? 'text-foreground hover:bg-accent hover:text-accent-foreground'
+                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+              child.active &&
+                (isLight
+                  ? 'bg-primary/10 text-primary'
+                  : 'bg-sidebar-primary text-sidebar-primary-foreground'),
+              child.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+            )}
+            target={child.external ? '_blank' : undefined}
+            rel={child.external ? 'noopener noreferrer' : undefined}
+            aria-disabled={child.disabled || undefined}
+            tabindex={child.disabled ? -1 : undefined}
+            onclick={(e) => {
+              if (child.disabled) {
+                e.preventDefault();
+                return;
+              }
+              onNavigate?.(child);
+            }}
+            role="menuitem"
+          >
+            {child.name}
+            {@render navBadge(child.badge)}
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/lib/components/layout/sidebar/SidebarFlyout.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { NavItem } from '../../../types/layout.js';
+interface Props {
+    /** The item to show in the flyout */
+    item: NavItem;
+    /** Top position in pixels */
+    top: number;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Callback when a navigation item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters flyout */
+    onMouseEnter?: () => void;
+    /** Callback when mouse leaves flyout */
+    onMouseLeave?: () => void;
+}
+declare const SidebarFlyout: import("svelte").Component<Props, {}, "">;
+type SidebarFlyout = ReturnType<typeof SidebarFlyout>;
+export default SidebarFlyout;

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+  /**
+   * SidebarNavItem - Individual navigation item component
+   *
+   * Handles:
+   * - Items with children (expandable submenu)
+   * - Items without children (simple links/buttons)
+   * - Collapsed mode (icons only with flyout)
+   * - Disabled and loading states
+   */
+  import { slide } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import type { NavItem } from '../../../types/layout.js';
+  import { cn } from '../../../utils.js';
+  import { sidebarStore } from '../../../stores/sidebar.svelte.js';
+
+  interface Props {
+    /** The navigation item to render */
+    item: NavItem;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Custom icon renderer */
+    icon?: Snippet<[NavItem]>;
+    /** Search query for text highlighting */
+    searchQuery?: string;
+    /** Callback when item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters item (for flyout) */
+    onMouseEnter?: (item: NavItem, event: MouseEvent) => void;
+    /** Callback when mouse leaves item (for flyout) */
+    onMouseLeave?: () => void;
+  }
+
+  let {
+    item,
+    isLight = true,
+    collapsed = false,
+    isMobile = false,
+    icon,
+    searchQuery = '',
+    onNavigate,
+    onMouseEnter,
+    onMouseLeave,
+  }: Props = $props();
+
+  // Highlight matching text in item names
+  function highlightText(
+    text: string,
+    query: string
+  ): { before: string; match: string; after: string } | null {
+    if (!query.trim()) return null;
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    const index = lowerText.indexOf(lowerQuery);
+    if (index === -1) return null;
+    return {
+      before: text.slice(0, index),
+      match: text.slice(index, index + query.length),
+      after: text.slice(index + query.length),
+    };
+  }
+
+  const itemHighlight = $derived(highlightText(item.name, searchQuery));
+
+  const hasChildren = $derived(item.children && item.children.length > 0);
+  const isExpanded = $derived(sidebarStore.isItemExpanded(item.id));
+
+  function toggleItem() {
+    sidebarStore.toggleItem(item.id);
+  }
+
+  function getItemStateClasses(active?: boolean, disabled?: boolean): string {
+    return cn(
+      isLight && !active && 'text-foreground hover:bg-accent hover:text-accent-foreground',
+      isLight && active && 'bg-primary/10 text-primary',
+      !isLight && !active && 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+      !isLight && active && 'bg-sidebar-primary text-sidebar-primary-foreground',
+      disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+    );
+  }
+
+  function handleClick(e: MouseEvent) {
+    if (item.disabled) {
+      e.preventDefault();
+      return;
+    }
+    onNavigate?.(item);
+  }
+
+  function handleMouseEnter(e: MouseEvent) {
+    onMouseEnter?.(item, e);
+  }
+</script>
+
+<!-- Reusable snippets -->
+{#snippet navIcon(navItem: NavItem)}
+  {#if navItem.loading}
+    <span class="h-5 w-5 shrink-0 flex items-center justify-center">
+      <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        />
+      </svg>
+    </span>
+  {:else if icon}
+    <span class="h-5 w-5 shrink-0">
+      {@render icon(navItem)}
+    </span>
+  {:else if navItem.icon}
+    <span class="h-5 w-5 shrink-0 flex items-center justify-center">
+      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <circle cx="12" cy="12" r="10" stroke-width="2" />
+      </svg>
+    </span>
+  {/if}
+{/snippet}
+
+{#snippet navBadge(badge: string | number | undefined)}
+  {#if badge !== undefined}
+    <span class="rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground">
+      {badge}
+    </span>
+  {/if}
+{/snippet}
+
+{#snippet externalIndicator()}
+  <svg class="h-4 w-4 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>
+{/snippet}
+
+{#snippet highlightedName(
+  name: string,
+  highlight: { before: string; match: string; after: string } | null
+)}
+  {#if highlight}
+    <span class="flex-1 truncate">
+      {highlight.before}<mark class="bg-yellow-200 dark:bg-yellow-900 text-inherit rounded px-0.5"
+        >{highlight.match}</mark
+      >{highlight.after}
+    </span>
+  {:else}
+    <span class="flex-1 truncate">{name}</span>
+  {/if}
+{/snippet}
+
+{#if hasChildren && !collapsed}
+  <!-- Item with children - expandable submenu -->
+  <div>
+    <div
+      class={cn(
+        'flex w-full items-center rounded-md transition-colors overflow-hidden',
+        isLight && !item.active && 'hover:bg-accent',
+        isLight && item.active && 'bg-primary/10',
+        !isLight && !item.active && 'hover:bg-sidebar-accent',
+        !isLight && item.active && 'bg-sidebar-primary'
+      )}
+    >
+      {#if item.href}
+        <!-- Navigable parent: link for main content -->
+        <a
+          href={item.disabled ? undefined : item.href}
+          class={cn(
+            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+            isLight && !item.active && 'text-foreground hover:text-accent-foreground',
+            isLight && item.active && 'text-primary',
+            !isLight && !item.active && 'hover:text-sidebar-accent-foreground',
+            !isLight && item.active && 'text-sidebar-primary-foreground',
+            item.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+          )}
+          target={item.external ? '_blank' : undefined}
+          rel={item.external ? 'noopener noreferrer' : undefined}
+          aria-current={item.active ? 'page' : undefined}
+          aria-disabled={item.disabled || undefined}
+          tabindex={item.disabled ? -1 : undefined}
+          onclick={handleClick}
+        >
+          {@render navIcon(item)}
+          {@render highlightedName(item.name, itemHighlight)}
+          {@render navBadge(item.badge)}
+          {#if item.external}{@render externalIndicator()}{/if}
+        </a>
+      {:else}
+        <!-- Non-navigable parent: button for entire main area -->
+        <button
+          type="button"
+          class={cn(
+            'flex flex-1 items-center gap-3 px-3 py-2 text-sm font-medium transition-colors overflow-hidden text-left',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+            isLight && !item.active && 'text-foreground',
+            isLight && item.active && 'text-primary',
+            !isLight && !item.active && '',
+            !isLight && item.active && 'text-sidebar-primary-foreground',
+            item.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+          )}
+          onclick={() => !item.disabled && toggleItem()}
+          aria-expanded={isExpanded}
+          aria-disabled={item.disabled || undefined}
+          disabled={item.disabled}
+        >
+          {@render navIcon(item)}
+          {@render highlightedName(item.name, itemHighlight)}
+          {@render navBadge(item.badge)}
+        </button>
+      {/if}
+
+      <!-- Separate expand/collapse toggle button -->
+      <button
+        type="button"
+        class={cn(
+          'flex items-center justify-center p-2 transition-colors rounded-md',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+          isLight ? 'hover:bg-accent/50' : 'hover:bg-sidebar-accent/50'
+        )}
+        onclick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleItem();
+        }}
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? `Collapse ${item.name}` : `Expand ${item.name}`}
+      >
+        <svg
+          class={cn(
+            'h-4 w-4 transition-transform duration-200',
+            isExpanded ? 'rotate-0' : '-rotate-90'
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+    </div>
+
+    {#if isExpanded}
+      <ul
+        class="mt-1 space-y-1 pl-4 motion-reduce:transition-none overflow-hidden"
+        transition:slide={{ duration: 200 }}
+      >
+        {#each item.children as child}
+          <li>
+            <a
+              href={child.disabled ? undefined : child.href}
+              class={cn(
+                'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors overflow-hidden',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+                getItemStateClasses(child.active, child.disabled)
+              )}
+              target={child.external ? '_blank' : undefined}
+              rel={child.external ? 'noopener noreferrer' : undefined}
+              aria-current={child.active ? 'page' : undefined}
+              aria-disabled={child.disabled || undefined}
+              tabindex={child.disabled ? -1 : undefined}
+              onclick={(e) => {
+                if (child.disabled) {
+                  e.preventDefault();
+                  return;
+                }
+                onNavigate?.(child);
+              }}
+            >
+              {@render navIcon(child)}
+              {@render highlightedName(child.name, highlightText(child.name, searchQuery))}
+              {@render navBadge(child.badge)}
+              {#if child.external}{@render externalIndicator()}{/if}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+{:else}
+  <!-- Regular item or collapsed item -->
+  {#if item.href}
+    <!-- Item with href - render as link -->
+    <a
+      href={item.disabled ? undefined : item.href}
+      class={cn(
+        'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors overflow-hidden relative',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+        getItemStateClasses(item.active, item.disabled),
+        collapsed && !isMobile && 'justify-center px-2'
+      )}
+      target={item.external ? '_blank' : undefined}
+      rel={item.external ? 'noopener noreferrer' : undefined}
+      aria-current={item.active ? 'page' : undefined}
+      aria-disabled={item.disabled || undefined}
+      tabindex={item.disabled ? -1 : undefined}
+      title={collapsed && !isMobile
+        ? item.external
+          ? `${item.name} (opens in new tab)`
+          : item.name
+        : undefined}
+      onclick={handleClick}
+      onmouseenter={handleMouseEnter}
+      onmouseleave={onMouseLeave}
+    >
+      {@render navIcon(item)}
+
+      {#if !collapsed || isMobile}
+        {@render highlightedName(item.name, itemHighlight)}
+        {@render navBadge(item.badge)}
+        {#if item.external}{@render externalIndicator()}{/if}
+      {/if}
+
+      <!-- Visual indicator for collapsed items with children -->
+      {#if collapsed && !isMobile && hasChildren}
+        <span class="absolute bottom-0.5 right-0.5">
+          <svg class="h-2 w-2 opacity-50" fill="currentColor" viewBox="0 0 8 8">
+            <path d="M0 0 L8 4 L0 8 Z" />
+          </svg>
+        </span>
+      {/if}
+    </a>
+  {:else}
+    <!-- Item without href (parent with children only, or placeholder) - render as button -->
+    <button
+      type="button"
+      class={cn(
+        'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors overflow-hidden w-full text-left relative',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+        getItemStateClasses(item.active, item.disabled),
+        collapsed && !isMobile && 'justify-center px-2'
+      )}
+      title={collapsed && !isMobile ? item.name : undefined}
+      aria-haspopup={hasChildren ? 'menu' : undefined}
+      aria-disabled={item.disabled || undefined}
+      disabled={item.disabled}
+      onmouseenter={handleMouseEnter}
+      onmouseleave={onMouseLeave}
+    >
+      {@render navIcon(item)}
+
+      {#if !collapsed || isMobile}
+        {@render highlightedName(item.name, itemHighlight)}
+        {@render navBadge(item.badge)}
+      {/if}
+
+      <!-- Visual indicator for collapsed items with children -->
+      {#if collapsed && !isMobile && hasChildren}
+        <span class="absolute bottom-0.5 right-0.5">
+          <svg class="h-2 w-2 opacity-50" fill="currentColor" viewBox="0 0 8 8">
+            <path d="M0 0 L8 4 L0 8 Z" />
+          </svg>
+        </span>
+      {/if}
+    </button>
+  {/if}
+{/if}

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { NavItem } from '../../../types/layout.js';
+interface Props {
+    /** The navigation item to render */
+    item: NavItem;
+    /** Whether using light variant */
+    isLight?: boolean;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+    /** Whether currently on mobile */
+    isMobile?: boolean;
+    /** Custom icon renderer */
+    icon?: Snippet<[NavItem]>;
+    /** Search query for text highlighting */
+    searchQuery?: string;
+    /** Callback when item is clicked */
+    onNavigate?: (item: NavItem) => void;
+    /** Callback when mouse enters item (for flyout) */
+    onMouseEnter?: (item: NavItem, event: MouseEvent) => void;
+    /** Callback when mouse leaves item (for flyout) */
+    onMouseLeave?: () => void;
+}
+declare const SidebarNavItem: import("svelte").Component<Props, {}, "">;
+type SidebarNavItem = ReturnType<typeof SidebarNavItem>;
+export default SidebarNavItem;