@classic-homes/theme-docs 0.0.23 → 0.0.24

package/dist/lib/components/TocPanel.svelte

@@ -4,10 +4,11 @@
    *
    * Provides a mobile flyout panel and optional desktop sidebar for the
    * TableOfContents component. Features a paper folder tab trigger on mobile
-   * that slides out a panel from the right side.
+   * that slides out a panel from the right side. The tab is physically attached
+   * to the panel so they move together as one unit.
    */
   import { onMount } from 'svelte';
-  import { fly, fade } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
   import { cn } from '../utils.js';
   import TableOfContents from './TableOfContents.svelte';
 
@@ -41,19 +42,25 @@
   }: Props = $props();
 
   let open = $state(false);
-  let closeButtonRef = $state<HTMLButtonElement | null>(null);
+  let tabButtonRef = $state<HTMLButtonElement | null>(null);
   let previousActiveElement: HTMLElement | null = null;
 
-  function openPanel() {
-    // Store the currently focused element to restore focus when closing
-    previousActiveElement = document.activeElement as HTMLElement;
-    open = true;
+  function toggle() {
+    if (open) {
+      open = false;
+      // Restore focus to the tab when closing
+      previousActiveElement?.focus();
+    } else {
+      // Store the currently focused element to restore focus when closing
+      previousActiveElement = document.activeElement as HTMLElement;
+      open = true;
+    }
   }
 
   function close() {
     open = false;
-    // Restore focus to the element that opened the panel
-    previousActiveElement?.focus();
+    // Focus the tab button when closing via backdrop/escape
+    tabButtonRef?.focus();
   }
 
   function handleKeydown(event: KeyboardEvent) {
@@ -63,14 +70,6 @@
     }
   }
 
-  // Focus the close button when panel opens
-  $effect(() => {
-    if (open && closeButtonRef) {
-      // Small delay to ensure the panel is rendered
-      setTimeout(() => closeButtonRef?.focus(), 0);
-    }
-  });
-
   onMount(() => {
     // Add global escape key listener
     document.addEventListener('keydown', handleKeydown);
@@ -92,63 +91,104 @@
       '2xl': 'hidden 2xl:block',
     }[breakpoint]
   );
-</script>
 
-<!-- Mobile TOC Tab Trigger - Paper folder tab style -->
-{#if html && !open}
-  <button
-    class={cn(breakpointHide, 'toc-tab-trigger')}
-    onclick={openPanel}
-    aria-label="Open table of contents"
-  >
-    <span class="toc-tab-text">
-      {title}
-    </span>
-  </button>
-{/if}
+  // Tailwind classes for the attached tab button
+  const tabClasses = [
+    // Positioning - absolute to panel container, sticks out on left
+    'absolute top-[30%] right-full',
+    '-translate-y-1/2',
+    // Tab shape - compact
+    'py-5 px-2',
+    // Visual styling - white background with black border
+    'bg-background',
+    'border border-foreground border-r-0',
+    'rounded-l',
+    'shadow-[-2px_0_8px_-2px_rgba(0,0,0,0.1)]',
+    // Typography
+    'font-sans leading-normal',
+    // Interactions
+    'cursor-pointer',
+    'hover:bg-muted',
+    // Focus
+    'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2',
+  ].join(' ');
 
-<!-- Mobile TOC Flyout Panel -->
-{#if html && open}
-  <!-- Backdrop -->
-  <button
-    class={cn(breakpointHide, 'toc-backdrop')}
-    onclick={close}
-    aria-label="Close table of contents"
-    transition:fade={{ duration: 200 }}
-  ></button>
+  // Tailwind classes for the backdrop
+  const backdropClasses = [
+    'fixed inset-0 z-[60]',
+    'bg-black/50',
+    'cursor-pointer',
+    'focus-visible:outline-none',
+  ].join(' ');
+
+  // Tailwind classes for the close button in header
+  const closeButtonClasses = [
+    'inline-flex items-center justify-center',
+    'w-9 h-9',
+    'rounded-md',
+    'text-muted-foreground',
+    'bg-transparent border-0 p-0 m-0',
+    'cursor-pointer',
+    'transition-colors duration-150 ease-in-out',
+    'hover:bg-muted hover:text-foreground',
+    'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2',
+  ].join(' ');
+</script>
 
-  <!-- Panel -->
+<!-- Mobile TOC Panel with attached tab - always rendered, slides via CSS transform -->
+{#if html}
+  <!-- Backdrop - only shown when open -->
+  {#if open}
+    <button
+      class={cn(breakpointHide, backdropClasses)}
+      onclick={close}
+      aria-label="Close table of contents"
+      transition:fade={{ duration: 300 }}
+    ></button>
+  {/if}
+
+  <!-- Panel container with attached tab -->
   <div
-    class={cn(breakpointHide, 'toc-panel', mobileClass)}
-    transition:fly={{ x: 320, duration: 300 }}
+    class={cn(breakpointHide, 'toc-panel-container', open && 'toc-panel-open', mobileClass)}
     {...restProps}
   >
-    <div class="toc-panel-header">
-      <span class="text-sm font-medium text-foreground">{title}</span>
-      <button
-        bind:this={closeButtonRef}
-        class="toc-close-button"
-        onclick={close}
-        aria-label="Close table of contents"
-      >
-        <svg
-          class="h-5 w-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    </div>
-    <div class="p-5">
-      <TableOfContents {html} {maxDepth} title="" />
+    <!-- Tab - physically attached to panel -->
+    <button
+      bind:this={tabButtonRef}
+      class={tabClasses}
+      onclick={toggle}
+      aria-label={open ? 'Close table of contents' : 'Open table of contents'}
+      aria-expanded={open}
+    >
+      <span class="toc-tab-text">
+        {title}
+      </span>
+    </button>
+
+    <!-- Panel content -->
+    <div class="toc-panel-content">
+      <div class="toc-panel-header">
+        <span class="text-sm font-medium text-foreground">{title}</span>
+        <button class={closeButtonClasses} onclick={close} aria-label="Close table of contents">
+          <svg
+            class="h-5 w-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="p-5">
+        <TableOfContents {html} {maxDepth} title="" />
+      </div>
     </div>
   </div>
 {/if}
@@ -167,31 +207,11 @@
 {/if}
 
 <style>
-  /* Paper folder tab trigger - positioned on right edge */
-  .toc-tab-trigger {
-    position: fixed;
-    top: 25%;
-    right: 0;
-    transform: translateY(-50%);
-    z-index: 21;
-    /* Tab shape - taller for vertical text */
-    padding: 1rem 0.375rem;
-    /* Visual styling */
-    background-color: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-right: none;
-    border-radius: 0.5rem 0 0 0.5rem;
-    box-shadow: -2px 0 8px -2px rgba(0, 0, 0, 0.1);
-    /* Hover effect */
-    transition:
-      background-color 0.15s ease,
-      padding-right 0.15s ease;
-  }
-
-  .toc-tab-trigger:hover {
-    background-color: hsl(var(--muted));
-    padding-right: 0.5rem;
-  }
+  /*
+   * Non-button styles that don't conflict with Tailwind preflight.
+   * Button styles are applied via Tailwind utility classes in the script
+   * to ensure proper specificity with postcss-cascade-layers.
+   */
 
   /* Vertical text for folder tab */
   .toc-tab-text {
@@ -199,33 +219,40 @@
     writing-mode: vertical-rl;
     text-orientation: mixed;
     transform: rotate(180deg);
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
     white-space: nowrap;
-    letter-spacing: 0.025em;
+    letter-spacing: 0.05em;
   }
 
-  /* Backdrop overlay */
-  .toc-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 20;
-  }
-
-  /* Flyout panel */
-  .toc-panel {
+  /* Panel container - holds both tab and panel, slides as one unit */
+  .toc-panel-container {
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     width: 20rem;
     max-width: 85vw;
+    z-index: 61;
+    /* Start off-screen (translated right by panel width) */
+    transform: translateX(100%);
+    /* Smooth slide animation */
+    transition: transform 0.3s ease-in-out;
+  }
+
+  /* When open, slide into view */
+  .toc-panel-open {
+    transform: translateX(0);
+  }
+
+  /* Panel content area */
+  .toc-panel-content {
+    height: 100%;
+    width: 100%;
     background-color: hsl(var(--card));
     border-left: 1px solid hsl(var(--border));
     box-shadow: -4px 0 16px -4px rgba(0, 0, 0, 0.15);
-    z-index: 22;
     overflow-y: auto;
     overscroll-behavior: contain;
   }
@@ -241,23 +268,4 @@
     background-color: hsl(var(--card));
     border-bottom: 1px solid hsl(var(--border));
   }
-
-  /* Close button */
-  .toc-close-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 0.375rem;
-    color: hsl(var(--muted-foreground));
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-  }
-
-  .toc-close-button:hover {
-    background-color: hsl(var(--muted));
-    color: hsl(var(--foreground));
-  }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-docs",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Markdown documentation components for the Classic theme system",
   "type": "module",
   "main": "./dist/lib/index.js",