@urbicon-ui/blocks 6.24.0 → 6.26.0

package/dist/primitives/JourneyTimeline/journey-timeline.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const journeyTimelineVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+    status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
     focused?: boolean | undefined;
     interactive?: boolean | undefined;
     travelled?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const journeyTimelineVariants: ((props?: {
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const journeyTimelineVariants: ((props?: {
     rail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const journeyTimelineVariants: ((props?: {
     node: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -52,7 +52,7 @@ export declare const journeyTimelineVariants: ((props?: {
     metaColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -65,7 +65,7 @@ export declare const journeyTimelineVariants: ((props?: {
     meta: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const journeyTimelineVariants: ((props?: {
     markerColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -91,7 +91,7 @@ export declare const journeyTimelineVariants: ((props?: {
     marker: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -104,7 +104,7 @@ export declare const journeyTimelineVariants: ((props?: {
     connector: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -117,7 +117,7 @@ export declare const journeyTimelineVariants: ((props?: {
     content: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -130,7 +130,7 @@ export declare const journeyTimelineVariants: ((props?: {
     card: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const journeyTimelineVariants: ((props?: {
     header: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -156,7 +156,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trigger: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -169,7 +169,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trailing: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -182,7 +182,7 @@ export declare const journeyTimelineVariants: ((props?: {
     labelGroup: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -195,7 +195,7 @@ export declare const journeyTimelineVariants: ((props?: {
     title: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -208,7 +208,7 @@ export declare const journeyTimelineVariants: ((props?: {
     subtitle: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -221,7 +221,7 @@ export declare const journeyTimelineVariants: ((props?: {
     segment: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -234,7 +234,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -247,7 +247,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailInner: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -260,7 +260,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailContent: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -273,7 +273,7 @@ export declare const journeyTimelineVariants: ((props?: {
     panel: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
+        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;

package/dist/primitives/JourneyTimeline/journey-timeline.variants.js

@@ -111,13 +111,13 @@ export const journeyTimelineVariants = tv({
         },
         size: {
             sm: {
-                meta: 'text-[11px]',
+                meta: 'text-2xs',
                 marker: 'size-2.5',
                 node: 'gap-x-2.5',
                 card: '-mx-1.5 px-1.5 py-1.5',
                 title: 'text-xs',
-                subtitle: 'text-[11px]',
-                segment: 'text-[11px]',
+                subtitle: 'text-2xs',
+                segment: 'text-2xs',
                 content: 'pb-4',
                 detailContent: 'text-xs pt-2',
                 panel: 'p-3 text-xs'

package/dist/primitives/Menu/Menu.svelte

@@ -8,6 +8,7 @@
   import { getTierContext } from '../../utils/tier-context';
   const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
   import Popover from '../Popover/Popover.svelte';
+  import { popoverMotion } from '../Popover/popover.variants';
   import { setMenuContext, type MenuContext, type MenuRegistryItem } from './menu.context';
   import MenuItemComp from './MenuItem.svelte';
   import MenuSubmenu from './MenuSubmenu.svelte';
@@ -471,6 +472,12 @@
     only painted layer. Without this, the panel renders as two stacked
     surfaces (Popover wrapper + Menu content) and shows a near-empty box
     with double borders.
+
+    The stripped default ALSO carried the enter/exit motion, so the exact
+    fragment (`popoverMotion`) is re-applied via `class` — it survives
+    Popover's `unstyled` by design and animates the transparent wrapper,
+    which fades/scales the Menu chrome inside it. A Menu-level `unstyled`
+    strips it again; consumers rebuild on the panel's `data-state`.
   -->
   <Popover
     bind:open
@@ -479,6 +486,7 @@
     {usePortal}
     autoTrigger={false}
     unstyled
+    class={unstyled ? undefined : popoverMotion}
     syncMinWidth={contextTrigger ? false : syncWidth}
     offsetDistance={effectiveTier === 'commit' ? 8 : 4}
     trigger={contextTrigger ? undefined : triggerContent}

package/dist/primitives/Menu/index.d.ts

@@ -7,18 +7,9 @@ import type { Placement } from '../../utils/floating.js';
 import type { InteractiveTier } from '../../utils/tier-context.js';
 import type { MenuSlots } from './menu.variants.js';
 /**
- * @description Action menu (`role="menu"`) triggered by a button. Items are
- * verbs the user can invoke — Edit, Delete, Share, Export — and dispatch an
- * `onSelect` callback when activated. For picking a value from a list use
- * `Select` (or `Combobox` for searchable). Menu and Select are deliberately
- * disjoint: Menu's ARIA semantics, keyboard model (Tab through items, Enter
- * triggers), and visual chrome match the Action surface family; Select's
- * `role="listbox"` + arrow-navigation match the Form surface family.
- *
- * @tag action
- * @related Select
- * @related Combobox
- * @related Popover
+ * Menu-specific props. The catalog JSDoc (`@description`/`@tag`/`@related`)
+ * lives on `MenuProps` below — the interface docs-gen actually picks up —
+ * so it is not duplicated here.
  *
  * @example Items array with `onSelect` callbacks
  * ```svelte
@@ -172,7 +163,14 @@ export interface MenuSpecificProps<TItem extends MenuItemType = MenuItemType> {
     mint?: MintProp;
 }
 /**
- * @description Action menu triggered by a button with nested items, icons, separators, and keyboard navigation.
+ * @description Action menu (`role="menu"`) triggered by a button, with nested
+ * submenus, sections, icons, and separators. Items are verbs the user can
+ * invoke — Edit, Delete, Share, Export — and dispatch an `onSelect` callback
+ * when activated; Menu holds no selection state. For picking a value from a
+ * list use `Select` (or `Combobox` for searchable). Menu and Select are
+ * deliberately disjoint: Menu's `role="menu"`/`menuitem` semantics with
+ * arrow-key roving and Action-family chrome versus Select's `role="listbox"`
+ * value commitment with Form-family chrome.
  *
  * @tag action
  * @related Select

package/dist/primitives/Popover/Popover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import { useFloatingPanel, floatingPanelHidden } from '../../utils';
+  import { useFloatingPanel, floatingPanelHidden, maxTransitionDurationMs } from '../../utils';
   import { popoverVariants } from './popover.variants';
   import type { PopoverProps } from './index';
 
@@ -21,6 +21,9 @@
     autoTrigger = true,
     size = 'md',
 
+    transitionDuration,
+    transitionEasing,
+
     onOpenChange,
     onClickOutside: onClickOutsideProp,
     onEscape: onEscapeProp,
@@ -47,11 +50,64 @@
     resolveSlotClasses(blocksConfig, 'Popover', preset, { size }, slotClassesProp)
   );
 
+  // Per-instance motion overrides. Set the shared popover CSS variables inline
+  // only when a prop is provided, so the unset default keeps inheriting the
+  // reduced-motion-aware token (mirrors Tooltip's transitionDuration path).
+  const popoverDurationInline = $derived(
+    transitionDuration != null ? `${transitionDuration}ms` : undefined
+  );
+
   let internalTriggerElement = $state<HTMLElement | null>(null);
   let popoverElement = $state<HTMLElement | null>(null);
 
   const effectiveTriggerElement = $derived(triggerElement || internalTriggerElement);
 
+  // ── Exit-motion lag (ACC-3 rest) ───────────────────────────
+  //
+  // Closing used to tear three things down in one flush: `open` flips, the
+  // children block unmounts, and `useFloatingPanel` hides the panel. The CSS
+  // exit transition (see `popoverMotion` in popover.variants.ts) keeps the
+  // *panel element* painted via `allow-discrete`, but the children must
+  // outlive `open` or the panel fades out empty. `exiting` lags the teardown
+  // by the panel's actual computed transition duration — read from the live
+  // style so per-instance props, theme token overrides, and reduced motion all
+  // shorten it automatically. A zero duration (jsdom/node tests, browsers
+  // without the CSS, `unstyled` without rebuilt motion) tears down
+  // synchronously: exactly the pre-motion behaviour.
+  //
+  // `$effect.pre` matters: the flag must be `true` in the SAME flush that
+  // renders `open === false`, otherwise the children unmount one frame before
+  // the lag starts. The `prevOpenForExit` tracker (non-reactive, seeded via
+  // `untrack` like `prevPopoverMode` below) keeps the effect keyed on real
+  // transitions — without it, the `bind:this` assignment would re-run the
+  // effect on mount and flash a closed-by-default popover open for one lag.
+  const EXIT_MOTION_BUFFER_MS = 50;
+  let exiting = $state(false);
+  let exitTimer: ReturnType<typeof setTimeout> | undefined;
+  let prevOpenForExit = untrack(() => open);
+  $effect.pre(() => {
+    if (open === prevOpenForExit) return;
+    prevOpenForExit = open;
+    if (open) {
+      clearTimeout(exitTimer);
+      exiting = false;
+      return;
+    }
+    const ms = maxTransitionDurationMs(untrack(() => popoverElement));
+    if (ms <= 0) return;
+    exiting = true;
+    exitTimer = setTimeout(() => {
+      exiting = false;
+    }, ms + EXIT_MOTION_BUFFER_MS);
+  });
+
+  // While `exiting`, the panel is still fading: keep children mounted and (in
+  // the in-place modes) keep `display` un-hidden. `useFloatingPanel` stays on
+  // the raw `open` on purpose — `hidePopover()` fires immediately and the
+  // discrete transition carries the visual exit, so a re-open during the fade
+  // reverses smoothly instead of waiting out the lag.
+  const panelVisible = $derived(open || exiting);
+
   // ── Floating UI positioning + native show/hide ─────────────
   //
   // Delegated to the shared `useFloatingPanel` helper — the same positioning
@@ -291,6 +347,27 @@
     target?.focus();
   }
 
+  // Un-arm `dismissedByTrigger` at the start of the NEXT pointer gesture,
+  // wherever it lands. Registered as a one-shot capture listener when the
+  // guard arms: capture order (document before trigger) guarantees a stale
+  // flag is cleared before any new arm, and `once` keeps at most one listener
+  // pending. This closes the aborted-click hole (pointerdown on the trigger,
+  // pointer released elsewhere → no click ever consumed the flag → the next
+  // trigger click was swallowed once).
+  function disarmDismissedByTrigger() {
+    dismissedByTrigger = false;
+  }
+
+  // Unmount cleanup for the imperative leftovers: a pending exit-lag timer
+  // and a still-armed disarm listener. Dependency-free → runs once,
+  // teardown on destroy.
+  $effect(() => {
+    return () => {
+      clearTimeout(exitTimer);
+      document.removeEventListener('pointerdown', disarmDismissedByTrigger, true);
+    };
+  });
+
   function handleTriggerPointerDown() {
     // Arm the "this pointerdown already dismissed it" guard only in auto
     // mode, where the browser's light dismiss really closes the popover
@@ -298,7 +375,15 @@
     // re-opening it). In manual mode nothing light-dismisses — the click
     // itself must toggle-close, so arming the guard there left the trigger
     // unable to close its own popover.
-    if (open && popoverMode === 'auto') dismissedByTrigger = true;
+    if (open && popoverMode === 'auto') {
+      dismissedByTrigger = true;
+      // This event has already passed the document's capture phase, so the
+      // listener can only fire on a LATER pointerdown.
+      document.addEventListener('pointerdown', disarmDismissedByTrigger, {
+        capture: true,
+        once: true
+      });
+    }
   }
 
   function handleTriggerClick(event: MouseEvent) {
@@ -361,6 +446,20 @@
       drops over a modal dialog (Codeberg #23).
 -->
 
+<!--
+  `data-state` sits after `{...restProps}` like the other load-bearing
+  attributes: it drives the enter/exit motion CSS (popoverMotion) and is the
+  documented styling hook for consumers rebuilding motion under `unstyled`.
+  `{#if panelVisible}` (not `open`) keeps the children mounted while the exit
+  transition plays; `style:display` follows the same lagged flag so the
+  in-place modes can fade out before they hide.
+
+  `inert` while closed (GuidePanel's pattern): the exit-fading children are
+  still mounted and displayed, so without it a Tab right after dismiss would
+  focus into the visually dismissed panel and Enter could re-fire a consumer
+  action; pointer-events-none (popoverMotion) only covers mouse/touch. Also
+  drops the fading subtree from the a11y tree immediately.
+-->
 <div
   bind:this={popoverElement}
   class={popoverClasses}
@@ -370,12 +469,16 @@
   style:position={panel.strategy}
   style:inset="auto"
   style:margin="0"
-  style:display={floatingPanelHidden(panel, open) ? 'none' : null}
+  style:display={floatingPanelHidden(panel, panelVisible) ? 'none' : null}
+  style:--blocks-popover-duration={popoverDurationInline}
+  style:--blocks-popover-easing={transitionEasing}
+  data-state={open ? 'open' : 'closed'}
+  inert={!open || undefined}
   {role}
   aria-modal={ariaModal || undefined}
   {id}
 >
-  {#if open}
+  {#if panelVisible}
     {@render children()}
   {/if}
 </div>

package/dist/primitives/Popover/index.d.ts

@@ -70,6 +70,19 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     open?: boolean;
     /** When true (default), the trigger wrapper handles click and keyboard to toggle the popover. Set to `false` to manage `open` yourself. */
     autoTrigger?: boolean;
+    /**
+     * Override the enter/exit fade duration in ms. Defaults to the shared token
+     * `--blocks-popover-duration` (150ms; collapses to 1ms under
+     * `prefers-reduced-motion`).
+     */
+    transitionDuration?: number;
+    /**
+     * Override the enter/exit easing as a CSS `<easing-function>` (e.g.
+     * `'linear'`, `'ease-out'`, `'cubic-bezier(0.4,0,0.2,1)'`). Defaults to the
+     * token `--blocks-popover-easing`. A CSS string, not a JS easing fn, because
+     * the popover motion is a pure CSS transition.
+     */
+    transitionEasing?: string;
     /**
      * Whether the popover closes on Escape key. Default `true`.
      * Set to `false` for cases where Escape should be intercepted by an
@@ -98,7 +111,7 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     onEscape?: () => void;
     /** Extra classes merged onto the floating panel element. */
     class?: string;
-    /** Strip all default tv() classes. Combine with `class` or `slotClasses` for full custom styling. */
+    /** Strip all default tv() classes (including the enter/exit motion). Combine with `class` or `slotClasses` for full custom styling; the panel always carries `data-state="open" | "closed"`, so custom motion can rebuild on that hook (see `popoverMotion` in popover.variants.ts for the reference implementation). */
     unstyled?: boolean;
     /** Per-slot class overrides. Available slots: `base` (the floating panel). */
     slotClasses?: Partial<Record<'base', string>>;
@@ -111,4 +124,4 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     preset?: string;
 }
 export { default as Popover } from './Popover.svelte';
-export { type PopoverVariants, popoverVariants } from './popover.variants.js';
+export { type PopoverVariants, popoverMotion, popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/index.js

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export { popoverVariants } from './popover.variants.js';
+export { popoverMotion, popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/popover.variants.d.ts

@@ -1,4 +1,29 @@
 import { type VariantProps } from '../../utils/variants.js';
+/**
+ * CSS-native enter/exit motion for the floating panel (ACC-3 rest), keyed on
+ * the `data-state` attribute Popover always stamps. Kept as its own fragment
+ * because two call sites need exactly these classes: `popoverVariants.base`
+ * below, and Menu — which renders its inner Popover `unstyled` (to avoid a
+ * double surface) and re-applies the fragment via Popover's `class` prop.
+ *
+ * How the two halves work:
+ * - **Enter** — the panel un-hides via `showPopover()` (top layer) or a
+ *   `display` flip (in-place mode), so a plain transition has no before-state;
+ *   `starting:` (`@starting-style`) supplies it.
+ * - **Exit** — `hidePopover()` / a native light dismiss yank the panel to
+ *   `display: none` in the same style recalc that flips `data-state`;
+ *   `transition-discrete` (`transition-behavior: allow-discrete`) on
+ *   `display`/`overlay` keeps it painted (and in the top layer) until the
+ *   fade lands. Popover lags the children-teardown to match — see the
+ *   exit-motion block in Popover.svelte.
+ *
+ * Browsers without `@starting-style`/`allow-discrete` simply skip the motion
+ * and keep today's instant toggle. Duration/easing resolve through the
+ * `--blocks-popover-*` tokens (interaction.css), which reduced motion
+ * collapses to 1ms; `motion-reduce:duration-[1ms]` guards the inline
+ * per-instance override path, which can't see the media query.
+ */
+export declare const popoverMotion: string;
 export declare const popoverVariants: ((props?: import("../../utils/variants.js").TVProps<{
     size: {
         sm: string;

package/dist/primitives/Popover/popover.variants.js

@@ -1,9 +1,44 @@
 import { tv } from '../../utils/variants.js';
+/**
+ * CSS-native enter/exit motion for the floating panel (ACC-3 rest), keyed on
+ * the `data-state` attribute Popover always stamps. Kept as its own fragment
+ * because two call sites need exactly these classes: `popoverVariants.base`
+ * below, and Menu — which renders its inner Popover `unstyled` (to avoid a
+ * double surface) and re-applies the fragment via Popover's `class` prop.
+ *
+ * How the two halves work:
+ * - **Enter** — the panel un-hides via `showPopover()` (top layer) or a
+ *   `display` flip (in-place mode), so a plain transition has no before-state;
+ *   `starting:` (`@starting-style`) supplies it.
+ * - **Exit** — `hidePopover()` / a native light dismiss yank the panel to
+ *   `display: none` in the same style recalc that flips `data-state`;
+ *   `transition-discrete` (`transition-behavior: allow-discrete`) on
+ *   `display`/`overlay` keeps it painted (and in the top layer) until the
+ *   fade lands. Popover lags the children-teardown to match — see the
+ *   exit-motion block in Popover.svelte.
+ *
+ * Browsers without `@starting-style`/`allow-discrete` simply skip the motion
+ * and keep today's instant toggle. Duration/easing resolve through the
+ * `--blocks-popover-*` tokens (interaction.css), which reduced motion
+ * collapses to 1ms; `motion-reduce:duration-[1ms]` guards the inline
+ * per-instance override path, which can't see the media query.
+ */
+export const popoverMotion = [
+    'transition-[opacity,scale,display,overlay] transition-discrete',
+    'duration-[var(--blocks-popover-duration)] ease-[var(--blocks-popover-easing)]',
+    'motion-reduce:duration-[1ms]',
+    // pointer-events-none while closed: during the exit fade the children are
+    // still mounted and painted — without this, a quick click on the fading
+    // panel would fire consumer handlers from a visually dismissed surface.
+    'data-[state=closed]:opacity-0 data-[state=closed]:scale-[0.98] data-[state=closed]:pointer-events-none',
+    'starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-[0.98]'
+].join(' ');
 export const popoverVariants = tv({
     // tier: contain — floating panel surface.
     base: [
         'bg-surface-elevated border border-border-hairline rounded-contain',
         'shadow-[var(--blocks-shadow-md)] backdrop-blur-sm',
+        popoverMotion,
         // `calc(100dvh-4rem)` is the static design cap; Floating UI's `size`
         // middleware (via useFloatingPanel) narrows it to the room actually left
         // between the anchor and the visual viewport edge through

package/dist/primitives/Progress/progress.variants.js

@@ -35,7 +35,7 @@ export const progressVariants = tv({
             xs: {
                 track: 'h-1',
                 fill: 'h-1',
-                circularLabel: 'text-[10px]'
+                circularLabel: 'text-3xs'
             },
             sm: {
                 track: 'h-1.5',

package/dist/primitives/RadioGroup/radioGroup.variants.js

@@ -66,7 +66,7 @@ export const radioItemVariants = tv({
                 indicator: 'w-3.5 h-3.5 mt-px',
                 dot: 'w-1.5 h-1.5',
                 label: 'text-xs',
-                description: 'text-[10px]'
+                description: 'text-3xs'
             },
             sm: {
                 item: 'gap-2',
@@ -157,7 +157,7 @@ export const radioItemVariants = tv({
         {
             checked: true,
             intent: 'warning',
-            class: { indicator: 'bg-warning border-warning', dot: 'bg-neutral-900' }
+            class: { indicator: 'bg-warning border-warning', dot: 'bg-text-on-warning' }
         },
         {
             checked: true,

package/dist/primitives/Select/index.d.ts

@@ -256,7 +256,14 @@ interface SelectBaseProps<T extends SelectValue = string> extends Omit<SelectVar
      * and make the custom look reusable across the project.
      */
     preset?: string;
-    /** Explicit `id` for the component. Auto-generated if omitted. */
+    /**
+     * Explicit `id` for the component. Auto-generated if omitted.
+     *
+     * The id lands on the component's wrapper, which is not a labelable element.
+     * The focusable trigger is derived from it as `` `${id}-trigger` `` — that is
+     * the id an external `<label for>` has to address, since a `for` pointing at
+     * the wrapper focuses nothing.
+     */
     id?: string;
 }
 /**