@classic-homes/theme-svelte 0.1.48 → 0.1.50

package/dist/lib/components/Button.svelte

@@ -44,6 +44,7 @@
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
+    /** Allow passing additional HTML attributes (aria-*, data-*, etc.) */
     [key: string]: unknown;
   }
 
@@ -64,33 +65,41 @@
   const classes = $derived(cn(buttonVariants({ variant, size }), className));
 </script>
 
-{#if href}
-  <a {href} class={classes} {...restProps}>
-    {#if loading}
-      <svg
-        class="h-4 w-4 animate-spin"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-      >
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-        ></circle>
-        <path
-          class="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
-      </svg>
-      {#if loadingText}
-        <span>{loadingText}</span>
-        <span class="sr-only">Loading</span>
-      {:else}
-        {@render children()}
-      {/if}
+{#snippet loadingSpinner()}
+  <svg
+    class="h-4 w-4 animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+{/snippet}
+
+{#snippet buttonContent()}
+  {#if loading}
+    {@render loadingSpinner()}
+    {#if loadingText}
+      <span>{loadingText}</span>
+      <span class="sr-only">Loading</span>
     {:else}
       {@render children()}
     {/if}
+  {:else}
+    {@render children()}
+  {/if}
+{/snippet}
+
+{#if href}
+  <a {href} class={classes} {...restProps}>
+    {@render buttonContent()}
   </a>
 {:else}
   <button
@@ -102,30 +111,6 @@
     {onclick}
     {...restProps}
   >
-    {#if loading}
-      <svg
-        class="h-4 w-4 animate-spin"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-      >
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-        ></circle>
-        <path
-          class="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
-      </svg>
-      {#if loadingText}
-        <span>{loadingText}</span>
-        <span class="sr-only">Loading</span>
-      {:else}
-        {@render children()}
-      {/if}
-    {:else}
-      {@render children()}
-    {/if}
+    {@render buttonContent()}
   </button>
 {/if}

package/dist/lib/components/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
 
   interface Props {
     checked?: boolean;
@@ -32,7 +32,7 @@
   }: Props = $props();
 
   // Generate a stable unique ID if none provided (for accessibility)
-  const generatedId = `checkbox-${Math.random().toString(36).substring(2, 11)}`;
+  const generatedId = useId('checkbox');
   const effectiveId = $derived(id ?? generatedId);
 
   function handleCheckedChange(newChecked: boolean | 'indeterminate') {

package/dist/lib/components/DateTimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Popover, Calendar } from 'bits-ui';
   import { tick } from 'svelte';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
   import { parseDate, toISOString } from '../utils/date.js';
   import Label from './Label.svelte';
 
@@ -65,10 +65,9 @@
     hint,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  // Using a random suffix ensures uniqueness if id is not provided
-  const randomSuffix = Math.random().toString(36).substring(2, 9);
-  const componentId = $derived(id || `datetimepicker-${randomSuffix}`);
+  // Generate unique IDs for accessibility using sequential counter
+  const generatedId = useId('datetimepicker');
+  const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 

package/dist/lib/components/FileUpload.svelte

@@ -12,7 +12,7 @@
    * - Accessible with keyboard navigation
    */
   import type { FileMetadata } from '../types/components.js';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
   import Button from './Button.svelte';
 
   interface Props {
@@ -42,8 +42,10 @@
     class?: string;
   }
 
+  const generatedId = useId('file-upload');
+
   let {
-    id = `file-upload-${Math.random().toString(36).slice(2, 9)}`,
+    id = generatedId,
     files = $bindable([]),
     maxFiles = 10,
     maxSizeBytes = 10 * 1024 * 1024, // 10MB

package/dist/lib/components/Label.svelte

@@ -23,7 +23,7 @@
 <LabelPrimitive.Root
   for={htmlFor}
   class={cn(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-700 dark:text-gray-300',
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground',
     disabled && 'opacity-50 cursor-not-allowed',
     className
   )}

package/dist/lib/components/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
   import { validateNonEmptyArray } from '../validation.js';
   import Label from './Label.svelte';
 
@@ -57,10 +57,9 @@
     hint,
   }: Props = $props();
 
-  // Generate unique IDs for accessibility
-  // Using a random suffix ensures uniqueness if id is not provided
-  const randomSuffix = Math.random().toString(36).substring(2, 9);
-  const componentId = $derived(id || `select-${randomSuffix}`);
+  // Generate unique IDs for accessibility using sequential counter
+  const generatedId = useId('select');
+  const componentId = $derived(id || generatedId);
   const hintId = $derived(`${componentId}-hint`);
   const errorId = $derived(`${componentId}-error`);
 
@@ -116,8 +115,128 @@
 
   // Determine if we need a container wrapper
   const hasWrapper = $derived(!!label || !!hint || !!error);
+
+  // Common trigger classes
+  const triggerClasses = $derived(
+    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 [&>span]:line-clamp-1',
+      error && 'border-destructive focus:ring-destructive',
+      className
+    )
+  );
+
+  // Common content classes
+  const contentClasses =
+    'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black 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';
+
+  // Common item classes
+  const itemClasses =
+    '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';
 </script>
 
+{#snippet chevronIcon()}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="h-4 w-4 opacity-50"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+{/snippet}
+
+{#snippet checkIcon()}
+  <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>
+{/snippet}
+
+{#snippet selectItem(option: SelectOption)}
+  <SelectPrimitive.Item
+    value={option.value}
+    label={option.label}
+    disabled={option.disabled}
+    class={itemClasses}
+  >
+    {#if option.value === value}
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        {@render checkIcon()}
+      </span>
+    {/if}
+    {option.label}
+  </SelectPrimitive.Item>
+{/snippet}
+
+{#snippet selectContent()}
+  <SelectPrimitive.Content
+    class={contentClasses}
+    sideOffset={-1}
+    collisionPadding={8}
+    avoidCollisions={true}
+  >
+    <div class="p-1 max-h-[300px] overflow-y-auto">
+      {#each options as item}
+        {#if isGroup(item)}
+          <SelectPrimitive.Group>
+            <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
+              {item.label}
+            </div>
+            {#each item.options as option}
+              {@render selectItem(option)}
+            {/each}
+          </SelectPrimitive.Group>
+        {:else}
+          {@render selectItem(item)}
+        {/if}
+      {/each}
+    </div>
+  </SelectPrimitive.Content>
+{/snippet}
+
+{#snippet selectRoot(ariaLabel: string | undefined)}
+  <SelectPrimitive.Root
+    type="single"
+    {name}
+    {disabled}
+    {required}
+    {value}
+    items={flatItems}
+    onValueChange={handleValueChange}
+  >
+    <SelectPrimitive.Trigger
+      id={componentId}
+      class={triggerClasses}
+      aria-label={ariaLabel}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy}
+    >
+      <span class={value ? '' : 'text-muted-foreground'}>
+        {selectedLabel || placeholder}
+      </span>
+      {@render chevronIcon()}
+    </SelectPrimitive.Trigger>
+
+    {@render selectContent()}
+  </SelectPrimitive.Root>
+{/snippet}
+
 {#if hasWrapper}
   <div class="space-y-2">
     {#if label}
@@ -130,119 +249,7 @@
       </Label>
     {/if}
 
-    <SelectPrimitive.Root
-      type="single"
-      {name}
-      {disabled}
-      {required}
-      {value}
-      items={flatItems}
-      onValueChange={handleValueChange}
-    >
-      <SelectPrimitive.Trigger
-        id={componentId}
-        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 [&>span]:line-clamp-1',
-          error && 'border-destructive focus:ring-destructive',
-          className
-        )}
-        aria-label={!label ? placeholder : undefined}
-        aria-invalid={error ? 'true' : undefined}
-        aria-describedby={describedBy}
-      >
-        <span class={value ? '' : 'text-muted-foreground'}>
-          {selectedLabel || placeholder}
-        </span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-4 w-4 opacity-50"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </SelectPrimitive.Trigger>
-
-      <SelectPrimitive.Content
-        class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black 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">
-          {#each options as item}
-            {#if isGroup(item)}
-              <SelectPrimitive.Group>
-                <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
-                  {item.label}
-                </div>
-                {#each item.options as option}
-                  <SelectPrimitive.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}
-                  </SelectPrimitive.Item>
-                {/each}
-              </SelectPrimitive.Group>
-            {:else}
-              <SelectPrimitive.Item
-                value={item.value}
-                label={item.label}
-                disabled={item.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 item.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}
-                {item.label}
-              </SelectPrimitive.Item>
-            {/if}
-          {/each}
-        </div>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Root>
+    {@render selectRoot(!label ? placeholder : undefined)}
 
     {#if hint && !error}
       <p id={hintId} class="text-sm text-muted-foreground">
@@ -257,117 +264,5 @@
     {/if}
   </div>
 {:else}
-  <SelectPrimitive.Root
-    type="single"
-    {name}
-    {disabled}
-    {required}
-    {value}
-    items={flatItems}
-    onValueChange={handleValueChange}
-  >
-    <SelectPrimitive.Trigger
-      id={componentId}
-      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 [&>span]:line-clamp-1',
-        error && 'border-destructive focus:ring-destructive',
-        className
-      )}
-      aria-label={placeholder}
-      aria-invalid={error ? 'true' : undefined}
-      aria-describedby={describedBy}
-    >
-      <span class={value ? '' : 'text-muted-foreground'}>
-        {selectedLabel || placeholder}
-      </span>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="h-4 w-4 opacity-50"
-      >
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-    </SelectPrimitive.Trigger>
-
-    <SelectPrimitive.Content
-      class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black 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">
-        {#each options as item}
-          {#if isGroup(item)}
-            <SelectPrimitive.Group>
-              <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
-                {item.label}
-              </div>
-              {#each item.options as option}
-                <SelectPrimitive.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}
-                </SelectPrimitive.Item>
-              {/each}
-            </SelectPrimitive.Group>
-          {:else}
-            <SelectPrimitive.Item
-              value={item.value}
-              label={item.label}
-              disabled={item.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 item.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}
-              {item.label}
-            </SelectPrimitive.Item>
-          {/if}
-        {/each}
-      </div>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Root>
+  {@render selectRoot(placeholder)}
 {/if}

package/dist/lib/components/Separator.svelte

@@ -21,7 +21,7 @@
   {orientation}
   {decorative}
   class={cn(
-    'shrink-0 bg-black',
+    'shrink-0 bg-border',
     orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
     className
   )}

package/dist/lib/components/Signature.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
   import { tv, type VariantProps } from 'tailwind-variants';
   import type {
     SignatureData,
@@ -841,8 +841,9 @@
     }
   });
 
-  // Computed IDs
-  const inputId = $derived(id || `signature-${Math.random().toString(36).substring(2, 9)}`);
+  // Computed IDs (using stable sequential ID generation)
+  const generatedInputId = useId('signature');
+  const inputId = $derived(id || generatedInputId);
   const errorId = $derived(`${inputId}-error`);
   const hintId = $derived(`${inputId}-hint`);
   const ariaDescribedBy = $derived(

package/dist/lib/components/Switch.svelte

@@ -11,7 +11,6 @@
     id?: string;
     class?: string;
     onchange?: (checked: boolean) => void;
-    [key: string]: unknown;
   }
 
   let {
@@ -26,36 +25,24 @@
     ...restProps
   }: Props = $props();
 
-  // Track if change was from user interaction (click)
-  let isUserInteraction = false;
-
-  function handleClick() {
-    isUserInteraction = true;
-  }
-
+  // Handle checked state changes from user interaction
+  // The primitive handles the actual state management via bind:checked
   function handleCheckedChange(newChecked: boolean) {
-    // Guard against no-op mutations AND non-user-initiated changes
-    // This prevents prop -> onCheckedChange -> checked = -> ... loops
-    if (!isUserInteraction || newChecked === checked) {
-      isUserInteraction = false;
-      return;
+    // Only fire callback if value actually changed (prevents unnecessary calls)
+    if (newChecked !== checked) {
+      checked = newChecked;
+      onchange?.(newChecked);
     }
-
-    // Only update state and notify if genuine user-initiated change
-    checked = newChecked;
-    onchange?.(newChecked);
-    isUserInteraction = false;
   }
 </script>
 
 <SwitchPrimitive.Root
-  bind:checked
+  {checked}
   {disabled}
   {required}
   {name}
   {value}
   {id}
-  onclick={handleClick}
   onCheckedChange={handleCheckedChange}
   class={cn(
     'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',

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

@@ -7,7 +7,6 @@ interface Props {
     id?: string;
     class?: string;
     onchange?: (checked: boolean) => void;
-    [key: string]: unknown;
 }
 declare const Switch: import("svelte").Component<Props, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;

package/dist/lib/components/Tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
-  import { cn } from '../utils.js';
+  import { cn, useId } from '../utils.js';
   import type { Tab } from '../types/components.js';
 
   interface Props {
@@ -19,10 +19,12 @@
     onValueChange?: (value: string) => void;
   }
 
+  const generatedId = useId('tabs');
+
   let {
     tabs,
     value = $bindable(tabs[0]?.id ?? ''),
-    id = `tabs-${Math.random().toString(36).slice(2, 11)}`,
+    id = generatedId,
     class: className,
     children,
     onValueChange,

package/dist/lib/components/layout/FormPageLayout.svelte

@@ -6,13 +6,14 @@
    * - Centered title and description header
    * - Optional notice cards section
    * - Two-column layout with optional sidebar
-   * - Help text footer
+   * - Help text footer (supports safe HTML - sanitized automatically)
    * - Responsive design (sidebar above main on mobile)
    * - Transparent background by default (inherits from parent layout)
    * - Optional sage background via sageBackground prop
    */
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils.js';
+  import { sanitizeHtml } from '../../notices/sanitize.js';
   import PageHeader from '../PageHeader.svelte';
 
   interface Props {
@@ -82,7 +83,7 @@
     {#if helpText}
       <footer class="mt-8 text-center">
         <p class="text-sm text-gray-500">
-          {@html helpText}
+          {@html sanitizeHtml(helpText)}
         </p>
       </footer>
     {/if}

package/dist/lib/components/layout/FormPageLayout.svelte.d.ts

@@ -5,7 +5,7 @@
    * - Centered title and description header
    * - Optional notice cards section
    * - Two-column layout with optional sidebar
-   * - Help text footer
+   * - Help text footer (supports safe HTML - sanitized automatically)
    * - Responsive design (sidebar above main on mobile)
    * - Transparent background by default (inherits from parent layout)
    * - Optional sage background via sageBackground prop

package/dist/lib/utils.d.ts

@@ -4,3 +4,11 @@ import { type ClassValue } from 'clsx';
  * Uses clsx for conditional classes and tailwind-merge to handle conflicts
  */
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Generate a unique ID with an optional prefix.
+ * IDs are sequential and stable, preventing SSR hydration mismatches.
+ *
+ * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
+ * @returns A unique ID string like 'checkbox-1' or 'ct-1' (ct = classic-theme)
+ */
+export declare function useId(prefix?: string): string;

package/dist/lib/utils.js

@@ -7,3 +7,22 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+/**
+ * Counter for generating unique sequential IDs.
+ * Uses a sequential counter instead of Math.random() to ensure:
+ * - Deterministic IDs that match between SSR and hydration
+ * - Stable IDs across component re-renders
+ * - Accessibility-friendly ID associations
+ */
+let idCounter = 0;
+/**
+ * Generate a unique ID with an optional prefix.
+ * IDs are sequential and stable, preventing SSR hydration mismatches.
+ *
+ * @param prefix - Optional prefix for the ID (e.g., 'checkbox', 'tabs')
+ * @returns A unique ID string like 'checkbox-1' or 'ct-1' (ct = classic-theme)
+ */
+export function useId(prefix) {
+    const id = ++idCounter;
+    return prefix ? `${prefix}-${id}` : `ct-${id}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",
@@ -18,6 +18,9 @@
     },
     "./styles.css": "./dist/styles.css"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist"
   ],