@classic-homes/theme-svelte 1.22.3 → 1.24.0

package/dist/lib/components/Tabs.svelte

@@ -3,6 +3,7 @@
   import { setContext } from 'svelte';
   import { cn } from '../utils.js';
   import type { Tab } from '../types/components.js';
+  import Select from './Select.svelte';
 
   interface Props {
     /** Array of tab definitions */
@@ -32,6 +33,12 @@
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;
+    /**
+     * What to do when the tabs are wider than their container.
+     * - `auto` (default): show a full-width Select of the tabs instead
+     * - `never`: keep the tab row and wrap it onto more lines
+     */
+    collapse?: 'auto' | 'never';
   }
 
   const uid = $props.id();
@@ -45,40 +52,41 @@
     class: className,
     children,
     onValueChange,
+    collapse = 'auto',
   }: Props = $props();
 
   // Store references to tab button elements for direct focus management
   let tabRefs: Record<string, HTMLButtonElement | undefined> = $state({});
 
-  // Horizontal-scroll handling for tab lists wider than their container
+  // Collapse to a Select when the tab row is wider than the container. The
+  // row stays rendered (hidden) while collapsed, so it can still be measured
+  // and so TabPanel's aria-labelledby keeps pointing at a real tab element.
+  let root: HTMLDivElement | undefined = $state();
   let tabList: HTMLDivElement | undefined = $state();
-  let canScrollLeft = $state(false);
-  let canScrollRight = $state(false);
-
-  function updateScrollShadows() {
-    if (!tabList) return;
-    canScrollLeft = tabList.scrollLeft > 1;
-    canScrollRight = tabList.scrollLeft + tabList.clientWidth < tabList.scrollWidth - 1;
-  }
-
-  // Scroll only the tab list (never the page) so deep-linked tabs are visible
-  function scrollTabIntoView(el: HTMLButtonElement) {
-    if (!tabList) return;
-    const listRect = tabList.getBoundingClientRect();
-    const rect = el.getBoundingClientRect();
-    if (rect.left < listRect.left) {
-      tabList.scrollLeft += rect.left - listRect.left - 8;
-    } else if (rect.right > listRect.right) {
-      tabList.scrollLeft += rect.right - listRect.right + 8;
-    }
-  }
+  let collapsed = $state(false);
 
   $effect(() => {
-    const el = tabRefs[value];
-    if (el) scrollTabIntoView(el);
-    updateScrollShadows();
+    if (collapse !== 'auto' || !root || !tabList) {
+      collapsed = false;
+      return;
+    }
+    const rootEl = root;
+    const listEl = tabList;
+    const measure = () => {
+      collapsed = listEl.scrollWidth > rootEl.clientWidth;
+    };
+    measure();
+    // Fires on container resize and when tab labels change the row's width
+    const observer = new ResizeObserver(measure);
+    observer.observe(rootEl);
+    observer.observe(listEl);
+    return () => observer.disconnect();
   });
 
+  const selectOptions = $derived(
+    tabs.map((t) => ({ value: t.id, label: t.label, disabled: t.disabled }))
+  );
+
   // Context for TabPanel children. Getters read the props directly, so the
   // active panel is right on the first render and during SSR (an $effect
   // would only fill it in after hydration).
@@ -133,27 +141,25 @@
   }
 </script>
 
-<div class={cn('w-full', className)}>
-  <!-- Tab List -->
-  <div class="relative inline-flex max-w-full">
-    {#if canScrollLeft}
-      <div
-        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 rounded-l-md bg-gradient-to-r from-muted to-transparent"
-        aria-hidden="true"
-      ></div>
-    {/if}
-    {#if canScrollRight}
-      <div
-        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 rounded-r-md bg-gradient-to-l from-muted to-transparent"
-        aria-hidden="true"
-      ></div>
-    {/if}
+<div bind:this={root} class={cn('w-full min-w-0', className)}>
+  {#if collapsed}
+    <Select {value} options={selectOptions} onValueChange={selectTab} aria-label={label} />
+  {/if}
+
+  <!-- Tab List (kept for measuring while collapsed; zero height and inert) -->
+  <div
+    class={cn(collapsed && 'invisible h-0 overflow-hidden')}
+    inert={collapsed}
+    aria-hidden={collapsed ? 'true' : undefined}
+  >
     <div
       bind:this={tabList}
-      onscroll={updateScrollShadows}
       role="tablist"
       aria-label={label}
-      class="inline-flex h-10 max-w-full items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      class={cn(
+        'inline-flex items-center rounded-md bg-muted p-1 text-muted-foreground',
+        collapse === 'never' ? 'max-w-full flex-wrap' : 'h-10 w-max'
+      )}
     >
       {#each tabs as tab, index (tab.id)}
         <button

package/dist/lib/components/Tabs.svelte.d.ts

@@ -28,6 +28,12 @@ interface Props {
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;
+    /**
+     * What to do when the tabs are wider than their container.
+     * - `auto` (default): show a full-width Select of the tabs instead
+     * - `never`: keep the tab row and wrap it onto more lines
+     */
+    collapse?: 'auto' | 'never';
 }
 declare const Tabs: import("svelte").Component<Props, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;

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

@@ -444,9 +444,12 @@
   <div
     class={cn(
       'group flex w-full items-center rounded-md',
-      isLight && !item.active && 'bg-background hover:bg-accent',
+      // Inside a section panel rows sit on the panel's grey, so no rest fill
+      isLight && !item.active && (nested ? 'bg-transparent' : 'bg-background'),
+      isLight && !item.active && 'hover:bg-accent',
       isLight && item.active && 'bg-primary/10',
-      !isLight && !item.active && 'bg-sidebar hover:bg-sidebar-accent',
+      !isLight && !item.active && (nested ? 'bg-transparent' : 'bg-sidebar'),
+      !isLight && !item.active && 'hover:bg-sidebar-accent',
       !isLight && item.active && 'bg-sidebar-primary'
     )}
   >

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

@@ -145,32 +145,39 @@
       {/each}
     </ul>
   {:else if isExpanded}
-    <!-- Collapsible and expanded: animate -->
-    <ul
-      class="space-y-1 px-2 overflow-hidden"
-      id={`sidebar-section-${section.id}`}
+    <!-- Collapsible and expanded: the same inset grey panel as an open submenu
+         (SidebarNavItem), so a section's pages read as inside it. Its items are
+         `nested`: no rest fill over the grey, and their own submenus get the rail -->
+    <div
+      class={cn(
+        'mx-2 overflow-hidden rounded-md p-1',
+        isLight ? 'bg-muted/50' : 'bg-sidebar-accent/30'
+      )}
       transition:slide={{ duration: sidebarStore.animate ? 200 : 0 }}
     >
-      {#each section.items as item}
-        <li>
-          <SidebarNavItem
-            {item}
-            {isLight}
-            {collapsed}
-            {isMobile}
-            {icon}
-            {searchQuery}
-            {enablePinning}
-            {pinIcon}
-            {isPinnedSection}
-            {onNavigate}
-            onMouseEnter={onItemMouseEnter}
-            onMouseLeave={onItemMouseLeave}
-            {autoCollapse}
-            siblingIds={expandableItemIds}
-          />
-        </li>
-      {/each}
-    </ul>
+      <ul class="space-y-1" id={`sidebar-section-${section.id}`}>
+        {#each section.items as item}
+          <li>
+            <SidebarNavItem
+              {item}
+              {isLight}
+              {collapsed}
+              {isMobile}
+              {icon}
+              {searchQuery}
+              {enablePinning}
+              {pinIcon}
+              {isPinnedSection}
+              {onNavigate}
+              onMouseEnter={onItemMouseEnter}
+              onMouseLeave={onItemMouseLeave}
+              {autoCollapse}
+              siblingIds={expandableItemIds}
+              nested
+            />
+          </li>
+        {/each}
+      </ul>
+    </div>
   {/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.22.3",
+  "version": "1.24.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",