@classic-homes/theme-svelte 1.42.3 → 1.43.0

package/dist/lib/components/MultiSelect.svelte

@@ -47,6 +47,12 @@
     onSearch?: (query: string) => void;
     /** Debounce delay in ms for search callback (default: 300) */
     debounceMs?: number;
+    /**
+     * Selected tags shown before the rest fold into a "+N more" toggle
+     * (default 6), so a long selection (e.g. a select-all) doesn't push the
+     * layout down. `Infinity` always shows every tag.
+     */
+    maxVisibleTags?: number;
     /** Additional class for the trigger */
     class?: string;
   }
@@ -68,6 +74,7 @@
     loading = false,
     onSearch,
     debounceMs = 300,
+    maxVisibleTags = 6,
     class: className,
   }: Props = $props();
 
@@ -85,11 +92,23 @@
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let open = $state(false);
 
-  // Get labels for selected values
-  const selectedLabels = $derived(
-    value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean) as string[]
+  // The selected values that have an option, with their labels (tag order = pick order)
+  const selectedTags = $derived(
+    value.flatMap((v) => {
+      const label = options.find((opt) => opt.value === v)?.label;
+      return label ? [{ value: v, label }] : [];
+    })
   );
 
+  // Past maxVisibleTags the rest fold behind a "+N more" toggle.
+  let tagsExpanded = $state(false);
+  const tagLimit = $derived(Math.max(0, maxVisibleTags));
+  const hiddenTagCount = $derived(Math.max(0, selectedTags.length - tagLimit));
+  const visibleTags = $derived(
+    tagsExpanded || hiddenTagCount === 0 ? selectedTags : selectedTags.slice(0, tagLimit)
+  );
+  const tagsId = $derived(`${componentId}-tags`);
+
   // Always filter options locally based on search query
   const filteredOptions = $derived.by(() => {
     if (!searchQuery) return options;
@@ -203,10 +222,11 @@
 
   <div class={cn('w-full', className)}>
     <!-- Selected tags -->
-    {#if selectedLabels.length > 0}
-      <div class="flex flex-wrap gap-1 mb-2">
-        {#each value as selectedValue}
-          {@const labelText = options.find((o) => o.value === selectedValue)?.label}
+    {#if selectedTags.length > 0}
+      <div id={tagsId} class="flex flex-wrap gap-1 mb-2">
+        {#each visibleTags as tag (tag.value)}
+          {@const selectedValue = tag.value}
+          {@const labelText = tag.label}
           {#if labelText}
             <span
               class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground"
@@ -237,6 +257,17 @@
             </span>
           {/if}
         {/each}
+        {#if hiddenTagCount > 0}
+          <button
+            type="button"
+            onclick={() => (tagsExpanded = !tagsExpanded)}
+            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-primary underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            aria-expanded={tagsExpanded}
+            aria-controls={tagsId}
+          >
+            {tagsExpanded ? 'Show less' : `+${hiddenTagCount} more`}
+          </button>
+        {/if}
       </div>
     {/if}
 

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

@@ -36,6 +36,12 @@ interface Props {
     onSearch?: (query: string) => void;
     /** Debounce delay in ms for search callback (default: 300) */
     debounceMs?: number;
+    /**
+     * Selected tags shown before the rest fold into a "+N more" toggle
+     * (default 6), so a long selection (e.g. a select-all) doesn't push the
+     * layout down. `Infinity` always shows every tag.
+     */
+    maxVisibleTags?: number;
     /** Additional class for the trigger */
     class?: string;
 }

package/package.json

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