@lyeve-labs/ui-kit 0.35.1 → 0.36.0

package/README.md

@@ -175,7 +175,7 @@ in `styles.css` beside the palette:
 
 | Token                 | Value                            | For                                                                                                            |
 | --------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `--duration-fast`     | 120ms                            | a state change in place: color, opacity, border, shadow, focus                                                |
+| `--duration-fast`     | 120ms                            | a state change in place: color, opacity, border, shadow, focus                                                 |
 | `--duration-base`     | 200ms                            | movement in place (a knob, a chevron, a collapse) and a small surface arriving (menu, popover, tooltip, toast) |
 | `--duration-slow`     | 320ms                            | a large surface arriving (dialog, drawer)                                                                      |
 | `--duration-progress` | 500ms                            | a value moving (a progress bar's width)                                                                        |

package/dist/components/Autocomplete.svelte

@@ -181,10 +181,15 @@
   {/if}
 
   <div class="relative" bind:this={fieldEl} use:anchor>
+    <!-- The form posts the chosen option's value. The visible input holds the
+         label, or the words being typed, so it carries no name: a form read it
+         as the value and posted "Alpha" where the option was "a". -->
+    {#if name}
+      <input type="hidden" {name} {disabled} value={value ?? ''} />
+    {/if}
     <input
       bind:this={inputEl}
       id={fieldId}
-      {name}
       {placeholder}
       {disabled}
       {required}

package/dist/components/Button.svelte

@@ -7,7 +7,7 @@
   import { TOUCH_GROW } from '../internal/touch.js';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
-  type Size = 'sm' | 'md' | 'lg';
+  type Size = 'sm' | 'md' | 'lg' | 'icon';
 
   /**
    * Attributes forwarded to whichever element renders. Naming them, rather than
@@ -96,10 +96,18 @@
       'border border-line-strong text-fg hover:border-brand hover:text-brand active:bg-brand/10',
   };
 
+  /*
+   * `icon` is a square for a button whose only content is an icon: the icon
+   * sets the size and the box adds 8px round it, so a 16px icon makes the 32px
+   * square the header controls use. Without it, an icon-only control beside
+   * ThemeToggle had to copy ThemeToggle's classes, and every copy drifted on
+   * its own. Name the button with `aria-label`, which also becomes its hint.
+   */
   const sizes: Record<Size, string> = {
     sm: 'px-3 py-1.5 text-sm gap-1.5 rounded-md',
     md: 'px-4 py-2 text-sm gap-2 rounded-lg',
     lg: 'px-5 py-2.5 text-base gap-2 rounded-lg',
+    icon: 'p-2 rounded-lg',
   };
 
   const spinnerSize = $derived(size === 'lg' ? 18 : 15);
@@ -113,7 +121,8 @@
    *
    * TOUCH_GROW: under a coarse pointer the button takes the control height,
    * which is 44px there, so a button and the input beside it grow together.
-   * A mouse sees 36px, 32px and 44px by size, as before.
+   * A mouse sees 36px, 32px and 44px by size, as before, and an icon-only
+   * button its icon plus 16px.
    */
   const cls = $derived(
     `inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors ` +

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

@@ -1,7 +1,7 @@
 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';
+type Size = 'sm' | 'md' | 'lg' | 'icon';
 /**
  * Attributes forwarded to whichever element renders. Naming them, rather than
  * accepting an open index signature, means a prop the component does not

package/dist/components/CopyField.svelte

@@ -99,7 +99,9 @@
       {value}
       onfocus={(e) => e.currentTarget.select()}
       aria-describedby={describedBy(fieldId, failed ? COPY_FAILED_MESSAGE : undefined, hint)}
-      class="h-full min-w-0 flex-1 truncate bg-transparent px-3 text-sm text-fg outline-none {mono ? 'font-mono' : ''}"
+      class="h-full min-w-0 flex-1 truncate bg-transparent px-3 text-sm text-fg outline-none {mono
+        ? 'font-mono'
+        : ''}"
     />
     {@render actions?.()}
     {#if secret}

package/dist/components/Textarea.svelte

@@ -76,7 +76,9 @@
     {placeholder}
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={describedBy(fieldId, error, hint)}
-    class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'} {mono ? 'font-mono' : ''}"
+    class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'} {mono
+      ? 'font-mono'
+      : ''}"
     bind:value
     {oninput}
     {onblur}

package/dist/components/ThemeToggle.svelte

@@ -15,7 +15,7 @@
    * implies the state.
    */
   import { Monitor, Moon, Sun } from '@lucide/svelte';
-  import { TOUCH_GROW } from '../internal/touch.js';
+  import Button from './Button.svelte';
   import {
     THEME_PREFERENCES,
     getThemePreference,
@@ -81,13 +81,17 @@
   }
 </script>
 
-<button
-  type="button"
+<!-- The kit's icon-only Button, so a control set beside this one takes the
+     same box by naming the same size, and the name shows on hover as well as
+     to a screen reader. -->
+<Button
+  variant="ghost"
+  size="icon"
   onclick={advance}
   data-print="hide"
   data-theme-preference={preference}
   aria-label="Theme: {LABEL[preference]}. Switch to {LABEL[upcoming]}."
-  class="{TOUCH_GROW} rounded-lg p-2 text-faint transition-colors hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg {klass}"
+  class={klass}
 >
   <!-- The icon shows the state the control is in, not the one it moves to. It
        showed the destination while the label named the same destination, which
@@ -99,4 +103,4 @@
   {:else}
     <Sun size={16} aria-hidden="true" />
   {/if}
-</button>
+</Button>

package/dist/components/dialog/ConfirmDialog.svelte

@@ -44,7 +44,9 @@
   );
   // An identifier the message refers to. Set apart in monospace on its own
   // line rather than inside the sentence, where a UUID wraps mid-string.
-  let detail = $derived(typeof entry.meta?.confirmDetail === 'string' ? entry.meta.confirmDetail : '');
+  let detail = $derived(
+    typeof entry.meta?.confirmDetail === 'string' ? entry.meta.confirmDetail : '',
+  );
 
   async function handleConfirm() {
     if (loading) return;

package/dist/index.d.ts

@@ -100,4 +100,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.35.1";
+export declare const VERSION = "0.36.0";

package/dist/index.js

@@ -108,4 +108,4 @@ export * as motion from './motion.js';
 // ── 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.35.1';
+export const VERSION = '0.36.0';

package/dist/internal/CopyGlyph.svelte

@@ -20,10 +20,19 @@
   const HIDDEN = 'scale-50 opacity-0 duration-fast ease-exit';
 </script>
 
-<span class="grid place-items-center" data-copy-state={copied ? 'copied' : 'idle'} aria-hidden="true">
-  <Copy {size} class="col-start-1 row-start-1 transition-[opacity,transform] {copied ? HIDDEN : SHOWN}" />
+<span
+  class="grid place-items-center"
+  data-copy-state={copied ? 'copied' : 'idle'}
+  aria-hidden="true"
+>
+  <Copy
+    {size}
+    class="col-start-1 row-start-1 transition-[opacity,transform] {copied ? HIDDEN : SHOWN}"
+  />
   <Check
     {size}
-    class="col-start-1 row-start-1 text-success transition-[opacity,transform] {copied ? SHOWN : HIDDEN}"
+    class="col-start-1 row-start-1 text-success transition-[opacity,transform] {copied
+      ? SHOWN
+      : HIDDEN}"
   />
 </span>

package/dist/motion.js

@@ -125,9 +125,25 @@ export function still(node) {
         return true;
     return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
+/**
+ * A frame with the element's own transform put in front of the preset's.
+ *
+ * An animation replaces the inline style it animates, it does not add to it.
+ * Under `animate:`, Svelte holds a leaving item where it stood with an inline
+ * `translate(...)` set just before the exit starts. An exit that animates
+ * `transform` alone would replace that and draw the item from the list's
+ * corner. A frame that does not move `transform` is returned as it is.
+ */
+function composeTransform(frame, own) {
+    if (!own || own === 'none')
+        return frame;
+    return frame.replace(/transform:\s*([^;]+)/, (_match, preset) => `transform: ${own} ${preset}`);
+}
 /**
  * One transition from the rung its entrance runs at and the frame it draws.
  * The exit is derived, never chosen: one rung faster, on the exit curve.
+ * The element's inline transform is read when the transition starts, after
+ * Svelte has pinned a leaving list item, and kept in every frame.
  */
 function surface(rung, css) {
     return (node) => {
@@ -135,10 +151,11 @@ function surface(rung, css) {
             return { duration: 0 };
         return ({ direction } = { direction: 'in' }) => {
             const leaving = direction === 'out';
+            const own = node.style?.transform ?? '';
             return {
                 duration: duration(leaving ? EXIT_RUNG[rung] : rung),
                 easing: easing(leaving ? 'exit' : 'enter'),
-                css,
+                css: own ? (t, u) => composeTransform(css(t, u), own) : css,
             };
         };
     };

package/package.json

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