@classic-homes/theme-svelte 1.22.4 → 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/package.json

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