@lyeve-labs/ui-kit 0.25.0 → 0.25.1

package/README.md

@@ -196,16 +196,17 @@ leaves through the same presets the kit's overlays use:
 </script>
 
 {#if open}
-  <div transition:motion.popover>...</div>
+  <div transition:motion.popover|global>...</div>
 {/if}
 
 {#each items as item (item.id)}
-  <li transition:motion.toast animate:motion.reorder>...</li>
+  <li transition:motion.toast|global animate:motion.reorder>...</li>
 {/each}
 ```
 
 `dialog`, `scrim`, `drawer`, `popover` and `toast` read the tokens at run
-time, so retuning a token retunes them, and every one of them plays nothing
+time; the `|global` modifier is what lets the exit play when a parent block
+removes the surface, so keep it. They so retuning a token retunes them, and every one of them plays nothing
 for a reader who has asked for reduced motion. Do not write `duration-150`,
 `ease-out` or `transition-all` beside a kit class: they are a fifth speed and
 a fourth curve, and the kit's own test suite refuses them.

package/dist/components/Autocomplete.svelte

@@ -235,7 +235,7 @@
     {/if}
 
     {#if box.open}
-      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
         <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
           {#each rows as option, index (option.value)}
             {@const isSelected = option.value === value}

package/dist/components/DatePicker.svelte

@@ -254,7 +254,7 @@
         role="dialog"
         aria-label="Choose date"
         use:placePanel
-        transition:motion.popover
+        transition:motion.popover|global
         class="{PANEL_SURFACE} w-68"
       >
         <div class="overflow-y-auto overscroll-contain p-3" data-panel-list={PANEL_LIST_UNCAPPED}>

package/dist/components/Drawer.svelte

@@ -65,12 +65,12 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
-      transition:motion.scrim
+      transition:motion.scrim|global
     ></button>
 
     <div
       use:overlay
-      transition:motion.drawer={{ side }}
+      transition:motion.drawer|global={{ side }}
       class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
         {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"

package/dist/components/Dropdown.svelte

@@ -256,7 +256,7 @@
       bind:this={menuEl}
       role="menu"
       use:placePanel
-      transition:motion.popover
+      transition:motion.popover|global
       class="{PANEL_SURFACE} min-w-36 {align === 'right' ? 'end-0' : 'start-0'}"
     >
       <div class={PANEL_LIST} data-panel-list>

package/dist/components/Modal.svelte

@@ -60,12 +60,12 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
-      transition:motion.scrim
+      transition:motion.scrim|global
     ></button>
 
     <div
       use:overlay
-      transition:motion.dialog
+      transition:motion.dialog|global
       class="relative flex max-h-[calc(100dvh-2rem)] w-full {widths[size]} flex-col
              overflow-hidden rounded-xl border border-line bg-surface shadow-2xl"
       role="dialog"

package/dist/components/MultiSelect.svelte

@@ -254,7 +254,7 @@
     </div>
 
     {#if box.open}
-      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
         {#if searchable}
           <div class="border-b border-line p-2">
             <input

package/dist/components/Select.svelte

@@ -409,7 +409,7 @@
       <input type="hidden" {name} {disabled} value={value ?? ''} />
 
       {#if box.open}
-        <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+        <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
           {#if searchable}
             <div class="border-b border-line p-2">
               <!--

package/dist/components/Toaster.svelte

@@ -27,7 +27,7 @@
 >
   {#each toast.items as t (t.id)}
     <div
-      transition:motion.toast
+      transition:motion.toast|global
       animate:motion.reorder
       class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
              bg-surface ps-0 pe-3 py-3 shadow-xl"

package/dist/components/dialog/Dialog.svelte

@@ -93,7 +93,7 @@
   <!-- Backdrop -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    transition:motion.scrim
+    transition:motion.scrim|global
     class="absolute inset-0 bg-black/60 backdrop-blur-sm"
     onclick={handleBackdropClick}
     onkeydown={(e: KeyboardEvent) => {
@@ -107,7 +107,7 @@
   <div
     bind:this={dialogEl}
     use:overlay
-    transition:motion.dialog
+    transition:motion.dialog|global
     class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
 			bg-surface border border-line rounded-xl shadow-2xl
 			transition-transform duration-slow

package/dist/index.d.ts

@@ -92,4 +92,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, 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.25.0";
+export declare const VERSION = "0.25.1";

package/dist/index.js

@@ -102,4 +102,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.25.0';
+export const VERSION = '0.25.1';

package/dist/motion.js

@@ -1,10 +1,15 @@
 /**
  * The entrances and exits, as Svelte transitions that read the motion tokens.
  *
- *     <div in:motion.dialog out:motion.dialog>
- *     <div transition:motion.popover>
+ *     <div transition:motion.dialog|global>
+ *     <div transition:motion.popover|global>
  *     <li animate:motion.reorder>
  *
+ * `|global` is not optional. A Svelte transition is local by default and
+ * plays only when its own block toggles; a page that wraps a Modal in its own
+ * `{#if}` to reset the form each time removes the whole component, and a
+ * local exit never runs. Global plays it on any ancestor change.
+ *
  * A CSS animation plays an entrance and nothing else: the element it ran on
  * is gone the moment `{#if}` turns false, so a dialog that eased open snapped
  * shut. A Svelte transition keeps the element until the exit has played, and

package/package.json

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