@lyeve-labs/ui-kit 0.11.0 → 0.11.2

package/dist/components/Button.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import Spinner from './Spinner.svelte';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
   type Size = 'sm' | 'md' | 'lg';
 
-  interface Props {
+  /**
+   * Attributes forwarded to whichever element renders. Naming them, rather than
+   * accepting an open index signature, means a prop the component does not
+   * define fails the build instead of reaching the DOM as a stray attribute.
+   */
+  type Forwarded = Omit<
+    HTMLButtonAttributes & HTMLAnchorAttributes,
+    'type' | 'href' | 'disabled' | 'class' | 'onclick' | 'children'
+  >;
+
+  interface Props extends Forwarded {
     variant?: Variant;
     size?: Size;
     disabled?: boolean;
@@ -16,7 +27,6 @@
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-    [key: string]: unknown;
   }
 
   let {

package/dist/components/Button.svelte.d.ts

@@ -1,7 +1,14 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
 type Size = 'sm' | 'md' | 'lg';
-interface Props {
+/**
+ * Attributes forwarded to whichever element renders. Naming them, rather than
+ * accepting an open index signature, means a prop the component does not
+ * define fails the build instead of reaching the DOM as a stray attribute.
+ */
+type Forwarded = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'type' | 'href' | 'disabled' | 'class' | 'onclick' | 'children'>;
+interface Props extends Forwarded {
     variant?: Variant;
     size?: Size;
     disabled?: boolean;
@@ -12,7 +19,6 @@ interface Props {
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-    [key: string]: unknown;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/Checkbox.svelte

@@ -45,10 +45,10 @@
       {disabled}
       {checked}
       onchange={handleChange}
-      class="peer sr-only"
+      class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
     />
     <span
-      class="w-4 h-4 rounded border transition-colors duration-150 flex items-center justify-center
+      class="pointer-events-none w-4 h-4 rounded border transition-colors duration-150 flex items-center justify-center
         {checked
         ? 'bg-brand border-brand'
         : 'bg-surface-2 border-line peer-focus-visible:border-brand'}"

package/dist/components/Input.svelte

@@ -8,8 +8,19 @@
     controlBorder,
     describedBy,
   } from '../internal/field.js';
+  import type { HTMLInputAttributes } from 'svelte/elements';
 
-  interface Props {
+  /**
+   * Attributes forwarded to the input. Naming them, rather than accepting an
+   * open index signature, means a prop the component does not define fails the
+   * build instead of reaching the DOM as a stray attribute.
+   */
+  type Forwarded = Omit<
+    HTMLInputAttributes,
+    'value' | 'type' | 'placeholder' | 'disabled' | 'required' | 'id' | 'name' | 'class'
+  >;
+
+  interface Props extends Forwarded {
     value?: string;
     label?: string;
     type?: string;
@@ -21,7 +32,6 @@
     id?: string;
     name?: string;
     class?: string;
-    [key: string]: unknown;
   }
 
   let {

package/dist/components/Input.svelte.d.ts

@@ -1,4 +1,11 @@
-interface Props {
+import type { HTMLInputAttributes } from 'svelte/elements';
+/**
+ * Attributes forwarded to the input. Naming them, rather than accepting an
+ * open index signature, means a prop the component does not define fails the
+ * build instead of reaching the DOM as a stray attribute.
+ */
+type Forwarded = Omit<HTMLInputAttributes, 'value' | 'type' | 'placeholder' | 'disabled' | 'required' | 'id' | 'name' | 'class'>;
+interface Props extends Forwarded {
     value?: string;
     label?: string;
     type?: string;
@@ -10,7 +17,6 @@ interface Props {
     id?: string;
     name?: string;
     class?: string;
-    [key: string]: unknown;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/Radio.svelte

@@ -46,10 +46,10 @@
       {disabled}
       checked={group === value}
       onchange={handleChange}
-      class="peer sr-only"
+      class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
     />
     <span
-      class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
+      class="pointer-events-none flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
         {group === value
         ? 'border-brand bg-surface-2'
         : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"

package/dist/components/RadioGroup.svelte

@@ -68,10 +68,10 @@
             disabled={disabled || opt.disabled}
             checked={value === opt.value}
             onchange={() => select(opt)}
-            class="peer sr-only"
+            class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
           />
           <span
-            class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
+            class="pointer-events-none flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
               {value === opt.value
               ? 'border-brand bg-surface-2'
               : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"

package/dist/components/Textarea.svelte

@@ -49,11 +49,6 @@
   } = $props();
 
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
-
-  function handleInput(e: TAE) {
-    value = e.currentTarget.value;
-    oninput?.(e);
-  }
 </script>
 
 <div class="{FIELD_WRAP} {cls}">
@@ -75,9 +70,10 @@
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={describedBy(fieldId, error, hint)}
     class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'}"
-    oninput={handleInput}
-    {onblur}>{value}</textarea
-  >
+    bind:value
+    {oninput}
+    {onblur}
+  ></textarea>
 
   {#if error}
     <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>

package/dist/index.d.ts

@@ -60,4 +60,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.11.0";
+export declare const VERSION = "0.11.2";

package/dist/index.js

@@ -71,4 +71,4 @@ export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.11.0';
+export const VERSION = '0.11.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",