@lyeve-labs/ui-kit 0.10.1 → 0.11.2

package/dist/components/AccordionItem.svelte

@@ -21,35 +21,65 @@
   >('accordion');
 
   let open = $derived(ctx?.isOpen(id) ?? false);
+  const panelId = $derived(`accordion-panel-${id}`);
+  const headerId = $derived(`accordion-header-${id}`);
 </script>
 
 <div class="bg-surface {cls}">
-  <button
-    type="button"
-    onclick={() => ctx?.toggle(id)}
-    aria-expanded={open}
-    class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium
-      text-fg transition-colors duration-150 hover:bg-surface-2/50"
-  >
-    <span>{title}</span>
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="shrink-0 text-faint transition-transform {open ? 'rotate-180' : ''}"
-      aria-hidden="true"
+  <h3 class="m-0">
+    <button
+      type="button"
+      id={headerId}
+      onclick={() => ctx?.toggle(id)}
+      aria-expanded={open}
+      aria-controls={panelId}
+      class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium
+        text-fg transition-colors duration-150 hover:bg-surface-2/50
+        outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50
+        {open ? 'bg-surface-2/40' : ''}"
     >
-      <path d="M6 9l6 6 6-6" />
-    </svg>
-  </button>
-  {#if open}
-    <div class="px-5 pb-4 text-sm text-muted">
-      {@render children()}
+      <span>{title}</span>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="shrink-0 text-faint transition-transform duration-200 ease-out {open
+          ? 'rotate-180'
+          : ''}"
+        aria-hidden="true"
+      >
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    </button>
+  </h3>
+
+  <!--
+    A panel opens to the height of its own content, which no fixed value knows.
+    Animating grid-template-rows from 0fr to 1fr resolves to that height in CSS
+    alone - no measuring, no reflow on every frame, and nothing to get wrong when
+    the content changes. The inner element carries the overflow so the text is
+    clipped rather than spilling while the row grows.
+  -->
+  <div
+    class="grid transition-[grid-template-rows] duration-200 ease-out {open
+      ? 'grid-rows-[1fr]'
+      : 'grid-rows-[0fr]'}"
+  >
+    <div class="overflow-hidden">
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={headerId}
+        inert={!open}
+        class="px-5 pb-4 pt-1 text-sm text-muted"
+      >
+        {@render children()}
+      </div>
     </div>
-  {/if}
+  </div>
 </div>

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/MultiSelect.svelte

@@ -196,7 +196,8 @@
               disabled={opt.disabled}
               onclick={() => toggle(opt)}
               class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-fg transition-colors duration-150
-                hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed"
+                hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed
+                outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50"
             >
               <span
                 class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors duration-150

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/Table.svelte

@@ -22,7 +22,7 @@
   <table
     class="w-full text-sm text-left
       {fixed ? 'table-fixed' : ''}
-      [&_thead_tr]:border-b [&_thead_tr]:border-line
+      [&_thead_tr]:border-b [&_thead_tr]:border-line [&_thead]:bg-surface-2/40
       [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-xs
         [&_thead_th]:font-medium [&_thead_th]:text-faint
         [&_thead_th]:uppercase [&_thead_th]:tracking-wider [&_thead_th]:whitespace-nowrap
@@ -30,7 +30,7 @@
       [&_tbody_tr]:border-b [&_tbody_tr]:border-line [&_tbody_tr:last-child]:border-0
       {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
       {hoverable
-      ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors duration-150'
+      ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150'
       : ''}"
   >
     {@render children()}

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/components/Toaster.svelte

@@ -43,7 +43,7 @@
       <p class="flex-1 text-sm text-fg leading-snug">{t.message}</p>
       <button
         type="button"
-        class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
+        class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50"
         aria-label="Dismiss"
         onclick={() => toast.dismiss(t.id)}
       >

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.10.1";
+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.10.1';
+export const VERSION = '0.11.2';

package/dist/styles/theme.css

@@ -171,4 +171,24 @@ html[data-theme='light'] {
   :focus:not(:focus-visible) {
     outline: none;
   }
+
+  /*
+   * Every animation in the kit ran regardless of what the reader asked for:
+   * the drawer slid, the toast flew in, the pulse and ping looped forever.
+   * Honouring the preference once here covers every component, including any
+   * added later, which is the only way it stays honoured.
+   *
+   * Durations are not zeroed. An animation that finishes in 1ms still fires its
+   * animationend, so components that wait on one keep working.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 1ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.10.1",
+  "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>",

package/src/lib/styles/theme.css

@@ -171,4 +171,24 @@ html[data-theme='light'] {
   :focus:not(:focus-visible) {
     outline: none;
   }
+
+  /*
+   * Every animation in the kit ran regardless of what the reader asked for:
+   * the drawer slid, the toast flew in, the pulse and ping looped forever.
+   * Honouring the preference once here covers every component, including any
+   * added later, which is the only way it stays honoured.
+   *
+   * Durations are not zeroed. An animation that finishes in 1ms still fires its
+   * animationend, so components that wait on one keep working.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 1ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }