@classic-homes/theme-svelte 0.1.21 → 0.1.23

package/dist/lib/components/MultiSelect.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
+  import { generateId, computeDescribedBy } from '../utils/form.js';
   import Spinner from './Spinner.svelte';
+  import Label from './Label.svelte';
 
   export interface MultiSelectOption {
     value: string;
@@ -28,6 +30,10 @@
     name?: string;
     /** Element ID */
     id?: string;
+    /** Label text for the multiselect */
+    label?: string;
+    /** Hint text displayed below the multiselect */
+    hint?: string;
     /** Error message to display */
     error?: string;
     /** Maximum number of selections allowed */
@@ -52,6 +58,8 @@
     required = false,
     name,
     id,
+    label,
+    hint,
     error,
     max,
     loading = false,
@@ -60,6 +68,15 @@
     class: className,
   }: Props = $props();
 
+  // Generate unique IDs for accessibility
+  const randomSuffix = generateId('multiselect').split('-').pop();
+  const componentId = $derived(id || `multiselect-${randomSuffix}`);
+  const hintId = $derived(`${componentId}-hint`);
+  const errorId = $derived(`${componentId}-error`);
+
+  // Compute aria-describedby based on hint and error
+  const describedBy = $derived(computeDescribedBy(hintId, errorId, !!hint, !!error));
+
   let searchQuery = $state('');
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let open = $state(false);
@@ -118,129 +135,273 @@
       if (debounceTimer) clearTimeout(debounceTimer);
     };
   });
+
+  // Determine if we need a container wrapper
+  const hasWrapper = $derived(!!label || !!hint || !!error);
 </script>
 
-<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 label = options.find((o) => o.value === selectedValue)?.label}
-        {#if label}
-          <span
-            class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
-          >
-            {label}
-            <button
-              type="button"
-              onclick={() => removeValue(selectedValue)}
-              class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-              {disabled}
-              aria-label={`Remove ${label}`}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="M18 6 6 18" />
-                <path d="m6 6 12 12" />
-              </svg>
-            </button>
-          </span>
+{#if hasWrapper}
+  <div class="space-y-2">
+    {#if label}
+      <Label for={componentId} {disabled}>
+        {label}
+        {#if required}
+          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+          <span class="sr-only">(required)</span>
         {/if}
-      {/each}
-    </div>
-  {/if}
-
-  <ComboboxPrimitive.Root
-    type="multiple"
-    {disabled}
-    {required}
-    {name}
-    bind:open
-    onOpenChange={handleOpenChange}
-    onValueChange={handleValueChange}
-    {value}
-  >
-    <div class="relative">
-      <ComboboxPrimitive.Input
-        {id}
-        placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
-        oninput={handleSearchInput}
-        onfocus={() => (open = true)}
-        onclick={() => (open = true)}
-        class={cn(
-          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          error && 'border-destructive focus:ring-destructive'
-        )}
-        aria-invalid={error ? 'true' : undefined}
-      />
-    </div>
+      </Label>
+    {/if}
 
-    <ComboboxPrimitive.Content
-      class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-      sideOffset={-1}
-      collisionPadding={8}
-      avoidCollisions={true}
-    >
-      <div class="p-1 max-h-[300px] overflow-y-auto">
-        {#if loading}
-          <div class="flex items-center justify-center py-6">
-            <Spinner size="sm" />
-            <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
-          </div>
-        {:else if filteredOptions.length === 0}
-          <div class="py-6 text-center text-sm text-muted-foreground">
-            {emptyMessage}
-          </div>
-        {:else}
-          {#each filteredOptions as option}
-            {@const isSelected = value.includes(option.value)}
-            {@const isDisabledByMax = maxReached && !isSelected}
-            <ComboboxPrimitive.Item
-              value={option.value}
-              label={option.label}
-              disabled={option.disabled || isDisabledByMax}
-              class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
-            >
-              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                {#if isSelected}
+    <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 labelText}
+              <span
+                class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+              >
+                {labelText}
+                <button
+                  type="button"
+                  onclick={() => removeValue(selectedValue)}
+                  class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                  {disabled}
+                  aria-label={`Remove ${labelText}`}
+                >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
+                    width="14"
+                    height="14"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    class="h-4 w-4"
                   >
-                    <polyline points="20 6 9 17 4 12" />
+                    <path d="M18 6 6 18" />
+                    <path d="m6 6 12 12" />
                   </svg>
-                {:else}
-                  <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
-                {/if}
+                </button>
               </span>
-              {option.label}
-            </ComboboxPrimitive.Item>
+            {/if}
           {/each}
-        {/if}
+        </div>
+      {/if}
+
+      <ComboboxPrimitive.Root
+        type="multiple"
+        {disabled}
+        {required}
+        {name}
+        bind:open
+        onOpenChange={handleOpenChange}
+        onValueChange={handleValueChange}
+        {value}
+      >
+        <div class="relative">
+          <ComboboxPrimitive.Input
+            id={componentId}
+            placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
+            oninput={handleSearchInput}
+            onfocus={() => (open = true)}
+            onclick={() => (open = true)}
+            class={cn(
+              'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              error && 'border-destructive focus:ring-destructive'
+            )}
+            aria-invalid={error ? 'true' : undefined}
+            aria-describedby={describedBy}
+          />
+        </div>
+
+        <ComboboxPrimitive.Content
+          class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          sideOffset={-1}
+          collisionPadding={8}
+          avoidCollisions={true}
+        >
+          <div class="p-1 max-h-[300px] overflow-y-auto">
+            {#if loading}
+              <div class="flex items-center justify-center py-6">
+                <Spinner size="sm" />
+                <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+              </div>
+            {:else if filteredOptions.length === 0}
+              <div class="py-6 text-center text-sm text-muted-foreground">
+                {emptyMessage}
+              </div>
+            {:else}
+              {#each filteredOptions as option}
+                {@const isSelected = value.includes(option.value)}
+                {@const isDisabledByMax = maxReached && !isSelected}
+                <ComboboxPrimitive.Item
+                  value={option.value}
+                  label={option.label}
+                  disabled={option.disabled || isDisabledByMax}
+                  class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+                >
+                  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    {#if isSelected}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="h-4 w-4"
+                      >
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    {:else}
+                      <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                    {/if}
+                  </span>
+                  {option.label}
+                </ComboboxPrimitive.Item>
+              {/each}
+            {/if}
+          </div>
+        </ComboboxPrimitive.Content>
+      </ComboboxPrimitive.Root>
+    </div>
+
+    {#if hint && !error}
+      <p id={hintId} class="text-sm text-muted-foreground">
+        {hint}
+      </p>
+    {/if}
+
+    {#if error}
+      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+        {error}
+      </p>
+    {/if}
+  </div>
+{:else}
+  <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 labelText}
+            <span
+              class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+            >
+              {labelText}
+              <button
+                type="button"
+                onclick={() => removeValue(selectedValue)}
+                class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                {disabled}
+                aria-label={`Remove ${labelText}`}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+              </button>
+            </span>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    <ComboboxPrimitive.Root
+      type="multiple"
+      {disabled}
+      {required}
+      {name}
+      bind:open
+      onOpenChange={handleOpenChange}
+      onValueChange={handleValueChange}
+      {value}
+    >
+      <div class="relative">
+        <ComboboxPrimitive.Input
+          id={componentId}
+          placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
+          oninput={handleSearchInput}
+          onfocus={() => (open = true)}
+          onclick={() => (open = true)}
+          class={cn(
+            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            error && 'border-destructive focus:ring-destructive'
+          )}
+          aria-invalid={error ? 'true' : undefined}
+          aria-describedby={describedBy}
+        />
       </div>
-    </ComboboxPrimitive.Content>
-  </ComboboxPrimitive.Root>
-</div>
-
-{#if error}
-  <p class="text-sm text-destructive mt-1.5" role="alert">
-    {error}
-  </p>
+
+      <ComboboxPrimitive.Content
+        class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        sideOffset={-1}
+        collisionPadding={8}
+        avoidCollisions={true}
+      >
+        <div class="p-1 max-h-[300px] overflow-y-auto">
+          {#if loading}
+            <div class="flex items-center justify-center py-6">
+              <Spinner size="sm" />
+              <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+            </div>
+          {:else if filteredOptions.length === 0}
+            <div class="py-6 text-center text-sm text-muted-foreground">
+              {emptyMessage}
+            </div>
+          {:else}
+            {#each filteredOptions as option}
+              {@const isSelected = value.includes(option.value)}
+              {@const isDisabledByMax = maxReached && !isSelected}
+              <ComboboxPrimitive.Item
+                value={option.value}
+                label={option.label}
+                disabled={option.disabled || isDisabledByMax}
+                class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+              >
+                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  {#if isSelected}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="h-4 w-4"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  {:else}
+                    <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                  {/if}
+                </span>
+                {option.label}
+              </ComboboxPrimitive.Item>
+            {/each}
+          {/if}
+        </div>
+      </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Root>
+  </div>
 {/if}

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

@@ -22,6 +22,10 @@ interface Props {
     name?: string;
     /** Element ID */
     id?: string;
+    /** Label text for the multiselect */
+    label?: string;
+    /** Hint text displayed below the multiselect */
+    hint?: string;
     /** Error message to display */
     error?: string;
     /** Maximum number of selections allowed */