@lyeve-labs/ui-kit 0.35.0 → 0.35.2

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

@@ -93,7 +93,13 @@
     // is what stops a real click, and it is the only thing that does, so a
     // change arriving any other way (a synthetic event, a script driving the
     // node) would still move the bound value with nothing on screen to say so.
-    if (disabled) return;
+    // bind:checked has already taken the input's new state, so a disabled box
+    // puts the input and the value back.
+    if (disabled) {
+      e.currentTarget.checked = !e.currentTarget.checked;
+      checked = e.currentTarget.checked;
+      return;
+    }
     // The DOM clears indeterminate on the first click. Leaving the prop set
     // would repaint the mixed bar over a box the user has just ticked.
     indeterminate = false;
@@ -102,6 +108,10 @@
   }
 </script>
 
+<!-- bind:checked and not {checked}: a visitor can tick the box before the
+     page hydrates. A one-way prop is written over the input when the page
+     hydrates and clears that tick. The binding reads the input's live state
+     instead, the same way the browser kept it. -->
 {#snippet control()}
   <input
     type="checkbox"
@@ -110,7 +120,7 @@
     {value}
     {required}
     {disabled}
-    {checked}
+    bind:checked
     {indeterminate}
     aria-checked={indeterminate ? 'mixed' : undefined}
     aria-invalid={error ? 'true' : undefined}

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

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

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.0",
+  "version": "0.35.2",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",