@lyeve-labs/ui-kit 0.10.0 → 0.11.0

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/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/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/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.0";
+export declare const VERSION = "0.11.0";

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.0';
+export const VERSION = '0.11.0';

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,10 +1,10 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",
-  "homepage": "https://ui.lyeve.com",
+  "homepage": "https://ui-kit.lyeve.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lyeve-labs/ui-kit.git"

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;
+    }
+  }
 }