@classic-homes/theme-svelte 0.1.21 → 0.1.22

package/dist/lib/components/Combobox.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 ComboboxOption {
     value: string;
@@ -28,6 +30,10 @@
     name?: string;
     /** Element ID */
     id?: string;
+    /** Label text for the combobox */
+    label?: string;
+    /** Hint text displayed below the combobox */
+    hint?: string;
     /** Error message to display */
     error?: string;
     /** Whether async data is loading */
@@ -50,6 +56,8 @@
     required = false,
     name,
     id,
+    label,
+    hint,
     error,
     loading = false,
     onSearch,
@@ -57,6 +65,15 @@
     class: className,
   }: Props = $props();
 
+  // Generate unique IDs for accessibility
+  const randomSuffix = generateId('combobox').split('-').pop();
+  const componentId = $derived(id || `combobox-${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);
@@ -104,86 +121,187 @@
       if (debounceTimer) clearTimeout(debounceTimer);
     };
   });
+
+  // Determine if we need a container wrapper
+  const hasWrapper = $derived(!!label || !!hint || !!error);
 </script>
 
-<ComboboxPrimitive.Root
-  type="single"
-  {disabled}
-  {required}
-  {name}
-  bind:open
-  onOpenChange={handleOpenChange}
-  onValueChange={handleValueChange}
-  {value}
->
-  <div class="relative">
-    <ComboboxPrimitive.Input
-      {id}
-      placeholder={selectedLabel || 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',
-        className
-      )}
-      aria-invalid={error ? 'true' : undefined}
-    />
-  </div>
+{#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}
+      </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}
+    <ComboboxPrimitive.Root
+      type="single"
+      {disabled}
+      {required}
+      {name}
+      bind:open
+      onOpenChange={handleOpenChange}
+      onValueChange={handleValueChange}
+      {value}
+    >
+      <div class="relative">
+        <ComboboxPrimitive.Input
+          id={componentId}
+          placeholder={selectedLabel || 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',
+            className
+          )}
+          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}
+              <ComboboxPrimitive.Item
+                value={option.value}
+                label={option.label}
+                disabled={option.disabled}
+                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"
+              >
+                {#if option.value === value}
+                  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    <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>
+                  </span>
+                {/if}
+                {option.label}
+              </ComboboxPrimitive.Item>
+            {/each}
+          {/if}
         </div>
-      {:else}
-        {#each filteredOptions as option}
-          <ComboboxPrimitive.Item
-            value={option.value}
-            label={option.label}
-            disabled={option.disabled}
-            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"
-          >
-            {#if option.value === value}
-              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                <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>
-              </span>
-            {/if}
-            {option.label}
-          </ComboboxPrimitive.Item>
-        {/each}
-      {/if}
+      </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Root>
+
+    {#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}
+  <ComboboxPrimitive.Root
+    type="single"
+    {disabled}
+    {required}
+    {name}
+    bind:open
+    onOpenChange={handleOpenChange}
+    onValueChange={handleValueChange}
+    {value}
+  >
+    <div class="relative">
+      <ComboboxPrimitive.Input
+        id={componentId}
+        placeholder={selectedLabel || 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',
+          className
+        )}
+        aria-invalid={error ? 'true' : undefined}
+        aria-describedby={describedBy}
+      />
     </div>
-  </ComboboxPrimitive.Content>
-</ComboboxPrimitive.Root>
 
-{#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}
+            <ComboboxPrimitive.Item
+              value={option.value}
+              label={option.label}
+              disabled={option.disabled}
+              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"
+            >
+              {#if option.value === value}
+                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <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>
+                </span>
+              {/if}
+              {option.label}
+            </ComboboxPrimitive.Item>
+          {/each}
+        {/if}
+      </div>
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Root>
 {/if}

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

@@ -22,6 +22,10 @@ interface Props {
     name?: string;
     /** Element ID */
     id?: string;
+    /** Label text for the combobox */
+    label?: string;
+    /** Hint text displayed below the combobox */
+    hint?: string;
     /** Error message to display */
     error?: string;
     /** Whether async data is loading */