@classic-homes/theme-svelte 0.1.49 → 0.1.51

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') {