@lyeve-labs/ui-kit 0.23.3 → 0.25.0

package/dist/internal/panel.js

@@ -73,7 +73,7 @@ export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain px
  * the active ring follow the row's own corners.
  */
 export const PANEL_OPTION = 'flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-start text-sm ' +
-    'transition-colors duration-150 outline-none hover:bg-surface-2 ' +
+    'transition-colors outline-none hover:bg-surface-2 ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 /**
  * The active descendant.
@@ -134,10 +134,19 @@ export function panelOption(state) {
 }
 /** Marks the scrolling region inside a surface, so placePanel can find it. */
 export const PANEL_LIST_ATTR = 'data-panel-list';
+/**
+ * The attribute's value when the region is capped by the room alone.
+ *
+ * The token cap is sized for a list of rows, and a calendar is not one: six
+ * weeks of days stand taller than the token, so under it every month would
+ * scroll by a few rows. Such a region still takes the room as its cap, so
+ * inside a short modal it scrolls rather than being cut.
+ */
+export const PANEL_LIST_UNCAPPED = 'uncapped';
 /** The classes that put the surface under its anchor. */
-export const PANEL_BELOW = 'top-full mt-1';
+export const PANEL_BELOW = 'top-full mt-1 origin-top';
 /** The classes that put the surface over its anchor. */
-export const PANEL_ABOVE = 'bottom-full mb-1';
+export const PANEL_ABOVE = 'bottom-full mb-1 origin-bottom';
 /**
  * Breathing room between the panel and the edge it is measured against, so a
  * panel that fits exactly does not sit on the edge of the window or the modal.
@@ -183,7 +192,8 @@ function swap(node, remove, add) {
  * under the modal's scroll edge that nobody can reach without scrolling
  * first. Whichever side wins, the list's max-height is the smaller of the
  * token cap and the room on that side, written as a CSS min so the token stays
- * the cap without this code knowing its value.
+ * the cap without this code knowing its value. A region marked uncapped takes
+ * the room alone.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the
@@ -221,7 +231,8 @@ export function placePanel(node) {
         // taken out of the room so the whole panel fits and not only its list.
         const chrome = Math.max(0, node.offsetHeight - list.offsetHeight);
         const room = Math.max(0, Math.round((flip ? above : below) - chrome));
-        list.style.maxHeight = `min(var(--spacing-panel-max), ${room}px)`;
+        const capped = list.getAttribute(PANEL_LIST_ATTR) !== PANEL_LIST_UNCAPPED;
+        list.style.maxHeight = capped ? `min(var(--spacing-panel-max), ${room}px)` : `${room}px`;
     }
     measure();
     const scroller = clip ?? window;

package/dist/internal/scroll-edges.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Which edges of a horizontal scroll box have content behind them.
+ *
+ * Table and Tabs both fade the edge the content continues past, because a
+ * phone paints its scrollbar only while a finger is moving and the column or
+ * the tab past the edge is otherwise unannounced. The arithmetic is the same
+ * in both and lives here so a third scroller cannot get it subtly different.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+export interface ScrollEdges {
+    before: boolean;
+    after: boolean;
+}
+/** The three metrics the answer is read from; an element has all of them. */
+export interface ScrollMetrics {
+    scrollWidth: number;
+    clientWidth: number;
+    scrollLeft: number;
+}
+export declare function scrollEdges(el: ScrollMetrics): ScrollEdges;
+/**
+ * The fade itself: a dark gradient on the edge, outside the scroll box so it
+ * does not scroll away with the content it describes. Dark rather than a
+ * palette colour, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the colour to fade to; the
+ * scrims use black at an alpha for the same reason and it reads in both
+ * themes. The direction is logical, so a right-to-left page fades the other
+ * way.
+ */
+export declare const SCROLL_EDGE = "pointer-events-none absolute inset-y-px w-6";
+export declare const SCROLL_EDGE_START = "start-0 bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent";
+export declare const SCROLL_EDGE_END = "end-0 bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent";

package/dist/internal/scroll-edges.js

@@ -0,0 +1,33 @@
+/**
+ * Which edges of a horizontal scroll box have content behind them.
+ *
+ * Table and Tabs both fade the edge the content continues past, because a
+ * phone paints its scrollbar only while a finger is moving and the column or
+ * the tab past the edge is otherwise unannounced. The arithmetic is the same
+ * in both and lives here so a third scroller cannot get it subtly different.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+export function scrollEdges(el) {
+    const slack = el.scrollWidth - el.clientWidth;
+    // A sub-pixel layout leaves scrollLeft a fraction short of its own maximum
+    // at the far end, so an exact comparison never reports the end as reached.
+    if (slack <= 1)
+        return { before: false, after: false };
+    // A right-to-left box reports the offset as a negative number, and the two
+    // edges are the same two edges either way round.
+    const travelled = Math.abs(el.scrollLeft);
+    return { before: travelled > 1, after: travelled < slack - 1 };
+}
+/**
+ * The fade itself: a dark gradient on the edge, outside the scroll box so it
+ * does not scroll away with the content it describes. Dark rather than a
+ * palette colour, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the colour to fade to; the
+ * scrims use black at an alpha for the same reason and it reads in both
+ * themes. The direction is logical, so a right-to-left page fades the other
+ * way.
+ */
+export const SCROLL_EDGE = 'pointer-events-none absolute inset-y-px w-6';
+export const SCROLL_EDGE_START = 'start-0 bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent';
+export const SCROLL_EDGE_END = 'end-0 bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent';

package/dist/internal/touch.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The two ways a control reaches 44px under a finger, named once so a
+ * component picks one by name rather than respelling the classes.
+ *
+ * Both compile to nothing under a mouse. `pointer: coarse` is the query, and
+ * the theme file is where it is declared: the `coarse:` variant, the 44px
+ * value of `--spacing-control` and the `hit-area` utility all live beside the
+ * palette so a consumer's build emits them.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * The control grows. For a control whose visual may take the finger's size:
+ * a button, a tab, a sidebar row, a menu item. It reads the control token, so
+ * the button and the input beside it grow together and stay level.
+ */
+export declare const TOUCH_GROW = "coarse:min-h-control coarse:min-w-control";
+/**
+ * The control stays as drawn and its hit box grows. For a control that is
+ * small on purpose: a switch, a checkbox, a breadcrumb, a pager step, a close
+ * cross, an icon inside an input. The element must be positioned, so
+ * `relative` comes with it. An element that is `absolute` already takes
+ * HIT_AREA_POSITIONED instead: two position utilities on one element resolve
+ * by stylesheet order, not by the order they are written.
+ */
+export declare const HIT_AREA = "relative hit-area";
+/** The same hit box on an element that positions itself already. */
+export declare const HIT_AREA_POSITIONED = "hit-area";

package/dist/internal/touch.js

@@ -0,0 +1,28 @@
+/**
+ * The two ways a control reaches 44px under a finger, named once so a
+ * component picks one by name rather than respelling the classes.
+ *
+ * Both compile to nothing under a mouse. `pointer: coarse` is the query, and
+ * the theme file is where it is declared: the `coarse:` variant, the 44px
+ * value of `--spacing-control` and the `hit-area` utility all live beside the
+ * palette so a consumer's build emits them.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * The control grows. For a control whose visual may take the finger's size:
+ * a button, a tab, a sidebar row, a menu item. It reads the control token, so
+ * the button and the input beside it grow together and stay level.
+ */
+export const TOUCH_GROW = 'coarse:min-h-control coarse:min-w-control';
+/**
+ * The control stays as drawn and its hit box grows. For a control that is
+ * small on purpose: a switch, a checkbox, a breadcrumb, a pager step, a close
+ * cross, an icon inside an input. The element must be positioned, so
+ * `relative` comes with it. An element that is `absolute` already takes
+ * HIT_AREA_POSITIONED instead: two position utilities on one element resolve
+ * by stylesheet order, not by the order they are written.
+ */
+export const HIT_AREA = 'relative hit-area';
+/** The same hit box on an element that positions itself already. */
+export const HIT_AREA_POSITIONED = 'hit-area';

package/dist/motion.d.ts

@@ -0,0 +1,63 @@
+import type { AnimationConfig } from 'svelte/animate';
+import type { TransitionConfig } from 'svelte/transition';
+export type Rung = 'fast' | 'base' | 'slow' | 'progress';
+export type Curve = 'enter' | 'exit' | 'move';
+/** What `theme.css` declares, for a document that has not loaded it. */
+export declare const FALLBACK: {
+    readonly duration: {
+        fast: number;
+        base: number;
+        slow: number;
+        progress: number;
+    };
+    readonly ease: {
+        enter: number[];
+        exit: number[];
+        move: number[];
+    };
+};
+/**
+ * What a preset hands Svelte. The function form is resolved once the element
+ * is in the DOM, with the direction the animation is really playing in; under
+ * `transition:` the directive itself only ever says `both`, so this is the
+ * one way a single directive can tune its exit apart from its entrance.
+ */
+export type Motion = TransitionConfig | ((opts?: {
+    direction: 'in' | 'out';
+}) => TransitionConfig);
+/** A `--duration-*` token in milliseconds, or its fallback. */
+export declare function duration(rung: Rung): number;
+/**
+ * A cubic bezier as the function Svelte samples, from its four control
+ * points. Solves x for t by Newton's method with a bisection fallback, the
+ * same shape WebKit's UnitBezier takes, so the curve a transition follows is
+ * the curve the stylesheet names.
+ */
+export declare function bezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number;
+/** An `--ease-*` token as a function, or its fallback. */
+export declare function easing(curve: Curve): (x: number) => number;
+/** True when the document asked for no motion, or cannot play any. */
+export declare function still(node: Element): boolean;
+/** A centred dialog: rises a little and settles to full size. */
+export declare const dialog: (node: Element) => Motion;
+/** The scrim behind a dialog or drawer, on the same clock as its surface. */
+export declare const scrim: (node: Element) => Motion;
+/**
+ * A panel docked to a viewport edge: the whole panel slides in from its own
+ * edge. No fade, since a surface arriving from off screen is never half there.
+ */
+export declare function drawer(node: Element, params?: {
+    side?: 'left' | 'right';
+}): Motion;
+/** A menu, listbox, tooltip or date grid anchored to its trigger. */
+export declare const popover: (node: Element) => Motion;
+/** One toast arriving in the stack, and leaving it. */
+export declare const toast: (node: Element) => Motion;
+/**
+ * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
+ * flip measures the move; the kit supplies the clock.
+ */
+export declare function reorder(node: Element, positions: {
+    from: DOMRect;
+    to: DOMRect;
+}, _params?: unknown): AnimationConfig;

package/dist/motion.js

@@ -0,0 +1,165 @@
+/**
+ * The entrances and exits, as Svelte transitions that read the motion tokens.
+ *
+ *     <div in:motion.dialog out:motion.dialog>
+ *     <div transition:motion.popover>
+ *     <li animate:motion.reorder>
+ *
+ * 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
+ * the same function serves both directions, so an entrance and its exit are
+ * written once and cannot drift apart.
+ *
+ * Every preset takes its duration and curve from `theme.css` at the moment it
+ * runs, so a consumer that retunes a token retunes these too. The numbers
+ * below are the fallback for a document that has not loaded the stylesheet,
+ * and a test holds them equal to the tokens.
+ *
+ * Two cases return no duration at all. A reader who asked for reduced motion
+ * gets the state change and none of the travel; the reduced-motion block in
+ * theme.css cannot reach these, because Svelte drives them through the Web
+ * Animations API and not through a stylesheet. And a document with no
+ * `Element.animate`, which is every jsdom test, mounts and unmounts at once,
+ * exactly as it did before the exits existed.
+ *
+ * This is the one module that may import `svelte/animate`, `svelte/easing`
+ * or `svelte/transition`. A component that reaches for them directly has
+ * chosen its own numbers, which is the thing the tokens exist to end.
+ */
+import { flip } from 'svelte/animate';
+/** What `theme.css` declares, for a document that has not loaded it. */
+export const FALLBACK = {
+    duration: { fast: 120, base: 200, slow: 320, progress: 500 },
+    ease: {
+        enter: [0.22, 1, 0.36, 1],
+        exit: [0.32, 0, 0.67, 0],
+        move: [0.65, 0, 0.35, 1],
+    },
+};
+/** How the two directions of one surface relate: one rung faster on the way out. */
+const EXIT_RUNG = {
+    fast: 'fast',
+    base: 'fast',
+    slow: 'base',
+    progress: 'base',
+};
+function token(name) {
+    if (typeof document === 'undefined')
+        return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+/** A `--duration-*` token in milliseconds, or its fallback. */
+export function duration(rung) {
+    const m = /^(\d*\.?\d+)(ms|s)$/.exec(token(`--duration-${rung}`));
+    if (!m)
+        return FALLBACK.duration[rung];
+    return m[2] === 's' ? Number(m[1]) * 1000 : Number(m[1]);
+}
+/**
+ * A cubic bezier as the function Svelte samples, from its four control
+ * points. Solves x for t by Newton's method with a bisection fallback, the
+ * same shape WebKit's UnitBezier takes, so the curve a transition follows is
+ * the curve the stylesheet names.
+ */
+export function bezier(x1, y1, x2, y2) {
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
+    const sampleY = (t) => ((ay * t + by) * t + cy) * t;
+    const slopeX = (t) => (3 * ax * t + 2 * bx) * t + cx;
+    const solve = (x) => {
+        let t = x;
+        for (let i = 0; i < 8; i += 1) {
+            const dx = sampleX(t) - x;
+            if (Math.abs(dx) < 1e-6)
+                return t;
+            const slope = slopeX(t);
+            if (Math.abs(slope) < 1e-6)
+                break;
+            t -= dx / slope;
+        }
+        let lo = 0;
+        let hi = 1;
+        t = x;
+        while (lo < hi) {
+            const s = sampleX(t);
+            if (Math.abs(s - x) < 1e-6)
+                return t;
+            if (x > s)
+                lo = t;
+            else
+                hi = t;
+            t = (lo + hi) / 2;
+        }
+        return t;
+    };
+    return (x) => (x <= 0 ? 0 : x >= 1 ? 1 : sampleY(solve(x)));
+}
+const curves = new Map();
+/** An `--ease-*` token as a function, or its fallback. */
+export function easing(curve) {
+    const raw = token(`--ease-${curve}`);
+    const m = /^cubic-bezier\(\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^)]+)\)$/.exec(raw);
+    const points = m ? m.slice(1, 5).map(Number) : FALLBACK.ease[curve];
+    const key = points.join(',');
+    let fn = curves.get(key);
+    if (!fn) {
+        fn = bezier(points[0], points[1], points[2], points[3]);
+        curves.set(key, fn);
+    }
+    return fn;
+}
+/** True when the document asked for no motion, or cannot play any. */
+export function still(node) {
+    if (typeof node.animate !== 'function')
+        return true;
+    return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * 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.
+ */
+function surface(rung, css) {
+    return (node) => {
+        if (still(node))
+            return { duration: 0 };
+        return ({ direction } = { direction: 'in' }) => {
+            const leaving = direction === 'out';
+            return {
+                duration: duration(leaving ? EXIT_RUNG[rung] : rung),
+                easing: easing(leaving ? 'exit' : 'enter'),
+                css,
+            };
+        };
+    };
+}
+/** A centred dialog: rises a little and settles to full size. */
+export const dialog = surface('slow', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
+/** The scrim behind a dialog or drawer, on the same clock as its surface. */
+export const scrim = surface('slow', (t) => `opacity: ${t}`);
+/**
+ * A panel docked to a viewport edge: the whole panel slides in from its own
+ * edge. No fade, since a surface arriving from off screen is never half there.
+ */
+export function drawer(node, params = {}) {
+    const sign = params.side === 'left' ? -1 : 1;
+    return surface('slow', (_t, u) => `transform: translateX(${sign * 100 * u}%)`)(node);
+}
+/** A menu, listbox, tooltip or date grid anchored to its trigger. */
+export const popover = surface('base', (t, u) => `opacity: ${t}; transform: translateY(${-4 * u}px) scale(${0.96 + 0.04 * t})`);
+/** One toast arriving in the stack, and leaving it. */
+export const toast = surface('base', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
+/**
+ * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
+ * flip measures the move; the kit supplies the clock.
+ */
+export function reorder(node, positions, _params) {
+    if (still(node))
+        return { duration: 0 };
+    return flip(node, positions, { duration: duration('base'), easing: easing('move') });
+}

package/dist/styles/theme.css

@@ -115,24 +115,59 @@
   --z-index-toast: 600; /* transient status                   */
   --z-index-skip-link: 700; /* the first tab stop in the document */
 
-  /* -- Motion - how long a transition or an entrance runs -------- *
-   *  Four durations shipped as literals inside the animate-[...]
-   *  utility of the component that used them, so the only way to
-   *  read the kit's motion was to grep four components. They are
-   *  stated here at the values they already ran at.
+  /* -- Motion - four durations, three curves, one rule for exits -- *
+   *  Named for what they are used for, so the choice is made by
+   *  reading the name:
+   *
+   *    fast      a state change in place: colour, opacity, border,
+   *              shadow, focus
+   *    base      movement in place (a knob, a chevron, a collapse, a
+   *              tab indicator) and a small surface arriving (menu,
+   *              popover, tooltip, toast)
+   *    slow      a large surface arriving (dialog, drawer)
+   *    progress  a value moving (a progress bar's width)
+   *
+   *    enter     arriving: starts fast and settles
+   *    exit      leaving: starts slow and accelerates away
+   *    move      changing in place
+   *
+   *  An exit runs one rung faster than its entrance and on exit:
+   *  slow in, base out; base in, fast out. Entrances and exits move
+   *  only opacity and transform.
    *
    *  Tailwind builds no utility from a --duration-* token: there is
-   *  no such theme namespace, and `duration-collapse` compiles to
-   *  nothing at all. Each one is read through var() from an
-   *  arbitrary utility instead, which is why they are listed in
-   *  VAR_ONLY in theme-tokens.test.ts.
+   *  no such theme namespace, and `duration-fast` would compile to
+   *  nothing. The @utility rules after this block declare the four
+   *  by hand, which is why the tokens are listed in VAR_ONLY in
+   *  theme-tokens.test.ts. --ease-* is a real namespace and the
+   *  three curves become ease-enter, ease-exit and ease-move on
+   *  their own.
+   *
+   *  Every transition-* utility reads the two --default-* values, so
+   *  `transition-colors` alone is complete. Before this a component
+   *  wrote `duration-150` fifty times to say the same thing.
    *
    *  The reduced-motion block at the foot of this file overrides
-   *  every one of them and stays the authority on whether they run. */
-  --duration-modal-in: 120ms; /* Modal, the centred entrance   */
-  --duration-toast-in: 140ms; /* Toaster, one toast arriving   */
-  --duration-drawer-in: 150ms; /* Drawer, either edge           */
-  --duration-collapse: 200ms; /* Accordion and Collapsible     */
+   *  every one of them and stays the authority on whether they run;
+   *  the Svelte presets in motion.ts honour the same preference for
+   *  the entrances and exits that run outside CSS.                    */
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 320ms;
+  --duration-progress: 500ms;
+
+  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.32, 0, 0.67, 0);
+  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
+
+  --default-transition-duration: var(--duration-fast);
+  --default-transition-timing-function: var(--ease-move);
+
+  /* The one entrance that is a CSS animation. A panel inside <details> is
+   * shown and removed by the browser, so a Svelte transition never sees it
+   * leave; it plays this on the way in and nothing on the way out. Every
+   * other surface enters and leaves through the presets in motion.ts. */
+  --animate-popover-in: popover-in var(--duration-base) var(--ease-enter);
 
   /* ── Typography · families ───────────────────────────────────── */
   --font-sans:
@@ -242,7 +277,8 @@
   --spacing-input-y: 0.5rem; /* 8px  - input vertical padding     */
   /* 38px - the height of every single-line control. Stated once so an Input,
    * a Select and a NumberInput sitting in the same row line up. Derived from
-   * the 13px/1.25 control text plus input-y padding and a 1px border. */
+   * the 13px/1.25 control text plus input-y padding and a 1px border. Under a
+   * coarse pointer it is 44px; see the touch-target block below the palette. */
   --spacing-control: 2.375rem;
   --spacing-panel-max: 15rem; /* 240px - the scroll cap on a floating option list */
   /* 56px - the app header bar, and the sidebar's brand row above the nav.
@@ -257,6 +293,58 @@
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
 }
 
+/*
+ * Touch targets.
+ *
+ * Measured over 48 admin routes at 400px: 2,007 of 2,097 visible controls
+ * were under the 44px SC 2.5.5 asks of a finger, and the kit owned 96% of
+ * them, because the control height above is 38px and it is right at 38px on
+ * a desktop. The size a pointer needs is a property of the pointer, not of
+ * the screen width, so the fix keys on `pointer: coarse` and a mouse never
+ * sees it: the desktop visual is unchanged to the pixel.
+ *
+ * Two mechanisms, chosen per control by whether the visual may grow.
+ *
+ * The token moves. Under a coarse pointer `--spacing-control` is 44px, so
+ * every single-line field, and every control that states `min-h-control`
+ * under the `coarse:` variant (Button, Tabs, a sidebar row, a menu item),
+ * grows to the finger's size and the row they share still lines up.
+ *
+ * `hit-area` does not move the visual. A switch, a checkbox, a breadcrumb, a
+ * pager button, a close cross and an icon inside an input are drawn small on
+ * purpose and grown to 44px would push their neighbours around; each one
+ * draws an invisible box centred on itself that is never smaller than the
+ * control size, and a tap on the box lands on the control. The element must
+ * be positioned (`relative`, or `absolute` where it already is) for the box
+ * to centre on it; the utility does not set position itself, because a
+ * position it set would fight the `absolute` an input's clear button relies
+ * on. Two neighbours' boxes may overlap; the later one in document order
+ * wins the overlap, which is the spacing exception SC 2.5.8 allows for.
+ */
+@custom-variant coarse (@media (pointer: coarse));
+
+@media (pointer: coarse) {
+  :root {
+    --spacing-control: 2.75rem; /* 44px */
+  }
+}
+
+@utility hit-area {
+  @media (pointer: coarse) {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 100%;
+      height: 100%;
+      min-width: var(--spacing-control);
+      min-height: var(--spacing-control);
+      translate: -50% -50%;
+    }
+  }
+}
+
 /* ── Soft Light · activated by html[data-theme="light"] ──────────────────── */
 html[data-theme='light'] {
   --color-ink: #f6f7f9;
@@ -290,61 +378,41 @@ html[data-theme='light'] {
 }
 
 /*
- * The entrance keyframes, declared here and not in the components that play
- * them.
- *
- * Modal, Drawer and Toaster each held their own `@keyframes` in a scoped
- * `<style>` block and started it from a Tailwind `animate-[...]` class. Svelte
- * renames a scoped keyframe to `svelte-<hash>-<name>` and rewrites only the
- * references inside that same style block, so the class asked the browser for
- * `modal-in` while the only rule declared was `svelte-ta60gp-modal-in`. An
- * animation-name that resolves to nothing is not an error: the element simply
- * appears, and all four entrances had been dead in every consumer.
- *
- * A keyframe named from a class has to be global, and the file every consumer
- * already imports is the one place it can be global from.
+ * The four durations as utilities. A --duration-* token generates nothing
+ * (see the motion section of the @theme block), so each is declared here the
+ * way Tailwind's own duration-* is: the custom property it sets is what the
+ * transition-* utilities read, and the longhand covers an element that
+ * writes `transition` by hand.
  */
-@keyframes modal-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+@utility duration-fast {
+  --tw-duration: var(--duration-fast);
+  transition-duration: var(--duration-fast);
 }
-
-@keyframes drawer-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+@utility duration-base {
+  --tw-duration: var(--duration-base);
+  transition-duration: var(--duration-base);
 }
-
-@keyframes drawer-in-left {
-  from {
-    opacity: 0;
-    transform: translateX(-16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+@utility duration-slow {
+  --tw-duration: var(--duration-slow);
+  transition-duration: var(--duration-slow);
+}
+@utility duration-progress {
+  --tw-duration: var(--duration-progress);
+  transition-duration: var(--duration-progress);
 }
 
-@keyframes toast-in {
+/*
+ * Declared here and not in the component that plays it. Svelte renames a
+ * scoped keyframe to `svelte-<hash>-<name>` and rewrites only the references
+ * inside that same style block, so a class asking for `popover-in` would find
+ * no rule and the element would simply appear. A keyframe named from a class
+ * has to be global, and the file every consumer imports is the one place it
+ * can be global from. It draws the same frame as the popover preset.
+ */
+@keyframes popover-in {
   from {
     opacity: 0;
-    transform: translateX(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
+    transform: translateY(-4px) scale(0.96);
   }
 }
 

package/package.json

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