@urbicon-ui/blocks 6.23.0 → 6.25.0

package/dist/primitives/Badge/Badge.svelte

@@ -34,7 +34,7 @@
     onRemove,
     onclick,
     onHover,
-    role = 'status',
+    role,
     ...restProps
   }: BadgeProps = $props();
 
@@ -56,6 +56,12 @@
   const isInteractive = $derived(purpose === 'chip' || interactive || !!onclick);
   const isRemovable = $derived(removable && !isDot);
 
+  // An interactive badge (clickable chip / onclick) carries button semantics:
+  // it is focusable and Enter/Space-activatable, so screen readers must hear a
+  // button, not a `status` region. An explicit `role` always wins; a disabled
+  // badge is inert (pointer-events-none, guarded handlers) so it stays `status`.
+  const effRole = $derived(role ?? (isInteractive && !disabled ? 'button' : 'status'));
+
   const variantProps: BadgeVariants = $derived({
     tier: effectiveTier,
     intent,
@@ -124,7 +130,7 @@
       ? [slotClasses?.base, className].filter(Boolean).join(' ')
       : styles.base({ class: [slotClasses?.base, className] })
   ]}
-  {role}
+  role={effRole}
   data-purpose={purpose}
   tabindex={isInteractive && !disabled ? 0 : undefined}
   onmouseenter={handleMouseEnter}

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

@@ -3,24 +3,13 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { MintProp } from '../../mint/index.js';
 import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants.js';
 /**
- * Shared fields that apply to every Badge variant — `dot` and the
- * label-style variants both accept these.
+ * Shared fields that apply to every Badge arm. `variant`, `purpose`, and the
+ * label-only props (`children` / `counter` / `removable` / `interactive` /
+ * `onRemove`) are declared per-arm instead — that split is what lets *both*
+ * dot spellings (`variant="dot"` and the canonical `purpose="dot"`) forbid the
+ * label-only props at the type level.
  */
-interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
-    /**
-     * The badge's semantic purpose — the canonical axis that resolves what the
-     * badge *is*, since a bare Badge served five overlapping roles. Orchestrates
-     * the low-level visual props so you rarely set them directly:
-     * - `status` — a state marker (Active, Failed); pairs with `intent`.
-     * - `tag` — a neutral inline label (category, version).
-     * - `counter` — a compact numeric pill (replaces the `counter` boolean).
-     * - `dot` — a pure indicator, content hidden (replaces `variant="dot"`).
-     * - `chip` — a removable, interactive filter chip; pair with `removable`.
-     *
-     * Leave unset to drive the badge purely by the low-level props (back-compat).
-     * When set, `purpose` wins over `variant="dot"` / the `counter` boolean.
-     */
-    purpose?: 'status' | 'tag' | 'counter' | 'dot' | 'chip';
+interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter' | 'removable' | 'interactive'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /** Add a pulsing animation to draw attention (e.g. for live indicators). */
     pulse?: boolean;
     /** Visually disable the badge (reduced opacity, no pointer events). */
@@ -29,7 +18,7 @@ interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omi
     border?: boolean;
     /** Anchor the badge absolutely within a `position: relative` parent. */
     placement?: BadgePlacement;
-    /** Click handler. Automatically enables interactive styles. */
+    /** Click handler. Automatically enables interactive styles (and `role="button"`). */
     onclick?: (event: MouseEvent) => void;
     /** Called when the hover state changes. */
     onHover?: (hovered: boolean) => void;
@@ -46,30 +35,73 @@ interface BadgeBaseProps extends Omit<BadgeVariants, 'variant' | 'counter'>, Omi
      * and make the custom look reusable across the project.
      */
     preset?: string;
-    /** ARIA role. Defaults to `"status"`. Use `"alert"` for time-sensitive notifications. */
-    role?: 'status' | 'alert' | 'badge';
+    /**
+     * ARIA role. A static badge is announced as `"status"`; an interactive badge
+     * (`onclick` or `purpose="chip"`, when not `disabled`) defaults to `"button"`
+     * so assistive tech announces its activation semantics. Set explicitly to
+     * override — e.g. `"alert"` for time-sensitive notifications. An explicit
+     * value always wins over the derived default.
+     */
+    role?: 'status' | 'alert' | 'badge' | 'button';
     /** Micro-interaction preset. Only applies when the badge is interactive. */
     mint?: MintProp;
 }
 /**
- * Dot-style badge — a pure indicator. Content is `sr-only` (visually
- * hidden), so `children` / `counter` / `removable` / `interactive` /
- * `onRemove` are excluded by the type: an invisible remove-button or
- * hover-scale on a 2.5 × 2.5 px dot is never the intended UI.
+ * The label-only props a pure-indicator dot forbids. An invisible remove
+ * button, counter shape, or hover-scale on a 2.5 × 2.5 px dot is never the
+ * intended UI, so every dot arm excludes them at the type level.
  */
-interface BadgeDotProps extends BadgeBaseProps {
-    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. */
-    variant: 'dot';
+interface BadgeDotForbiddenProps {
     children?: never;
     counter?: never;
     removable?: never;
     interactive?: never;
     onRemove?: never;
 }
+/**
+ * Dot badge selected by the canonical `purpose="dot"` — a pure indicator whose
+ * content is hidden. `variant` is inert here (the dot look always wins), and
+ * the label-only props are excluded by {@link BadgeDotForbiddenProps}.
+ */
+interface BadgeDotByPurposeProps extends BadgeBaseProps, BadgeDotForbiddenProps {
+    /**
+     * The canonical dot spelling — forces the pure-indicator look regardless of
+     * `variant`. For the label roles use `status` / `tag` / `counter` / `chip`
+     * (their own arm).
+     */
+    purpose: 'dot';
+    /** Inert under `purpose="dot"`; accepted only so a leftover `variant` compiles. */
+    variant?: 'filled' | 'outlined' | 'soft' | 'dot';
+}
+/**
+ * Dot badge selected by the deprecated `variant="dot"`. Prefer `purpose="dot"`.
+ * Same exclusions as {@link BadgeDotByPurposeProps}.
+ */
+interface BadgeDotProps extends BadgeBaseProps, BadgeDotForbiddenProps {
+    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. */
+    variant: 'dot';
+    /** Only the dot purpose is non-contradictory with `variant="dot"`. */
+    purpose?: 'dot';
+}
 /**
  * Label-style badge — accepts content, counter shape, remove button, etc.
  */
 interface BadgeStandardProps extends BadgeBaseProps {
+    /**
+     * The badge's semantic purpose — the canonical axis that resolves what the
+     * badge *is*, since a bare Badge served overlapping roles. Orchestrates the
+     * low-level visual props so you rarely set them directly:
+     * - `status` — a state marker (Active, Failed); pairs with `intent`.
+     * - `tag` — a neutral inline label (category, version).
+     * - `counter` — a compact numeric pill (replaces the `counter` boolean).
+     * - `chip` — a removable, interactive filter chip; pair with `removable`.
+     *
+     * For a pure indicator use `purpose="dot"` (its own arm — it forbids
+     * content / counter / remove). Leave unset to drive the badge purely by the
+     * low-level props (back-compat); when set, `purpose` wins over the `counter`
+     * boolean.
+     */
+    purpose?: 'status' | 'tag' | 'counter' | 'chip';
     /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. @default 'filled' */
     variant?: 'filled' | 'outlined' | 'soft';
     /** Badge content (text, icons, numbers). */
@@ -93,10 +125,13 @@ interface BadgeStandardProps extends BadgeBaseProps {
  * @related Alert
  * @related Toast
  *
- * Badge props are a discriminated union on `variant`: `variant="dot"`
- * forbids `children` / `counter` / `removable` / `interactive` /
- * `onRemove` at the type level, while `filled` / `outlined` / `soft`
- * accept the full surface.
+ * Badge props are a discriminated union. The pure-indicator dot — spelled
+ * canonically as `purpose="dot"` or via the deprecated `variant="dot"` —
+ * forbids `children` / `counter` / `removable` / `interactive` / `onRemove`
+ * at the type level, while the label arms (`filled` / `outlined` / `soft`;
+ * `purpose` `status` / `tag` / `counter` / `chip`) accept the full surface.
+ * An interactive badge (`onclick` or `purpose="chip"`) is announced as a
+ * `button`, a static one as `status` (override via `role`).
  *
  * @example Purpose-driven (canonical) — the intent reads from `purpose`
  * ```svelte
@@ -114,6 +149,6 @@ interface BadgeStandardProps extends BadgeBaseProps {
  * </div>
  * ```
  */
-export type BadgeProps = BadgeDotProps | BadgeStandardProps;
+export type BadgeProps = BadgeDotByPurposeProps | BadgeDotProps | BadgeStandardProps;
 export { default as Badge } from './Badge.svelte';
 export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

package/dist/primitives/Button/Button.svelte

@@ -153,25 +153,15 @@
      `blocks-intent-{name}` class on the button root scopes the glow color
      via `mint/styles.css`. */
 
-  :global(.blocks-button .blocks-ripple) {
-    position: absolute;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.4);
-    pointer-events: none;
-    animation: ripple var(--blocks-duration-slow) var(--blocks-ease-confident);
-    z-index: 1;
-  }
-
-  @keyframes ripple {
-    0% {
-      transform: scale(0);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 0;
-    }
-  }
+  /* The ripple mint owns the ripple end-to-end: `mint/ripple.ts` appends a
+     `<span class="blocks-mint-ripple">` on click and drives it with the Web
+     Animations API, tinted `currentColor` so it resolves per variant/intent —
+     white on a filled button, the intent hue on outlined/ghost. Button used to
+     carry a competing `.blocks-ripple` rule here (a hardcoded
+     `rgba(255,255,255,0.4)` plus its own @keyframes) that no element ever
+     matched — nothing has emitted that class since the initial commit, and it
+     would have been invisible on light variants had it matched. Removed rather
+     than tokenised; see the same note in `mint/styles.css` (XC-12/PAG-1). */
 
   :global(.sr-only) {
     position: absolute;
@@ -185,10 +175,7 @@
     border-width: 0;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :global(.blocks-button .blocks-ripple) {
-      animation: none !important;
-      opacity: 0 !important;
-    }
-  }
+  /* No reduced-motion rule for the ripple here either: `mint/ripple.ts` bails at
+     click time on `prefers-reduced-motion`, and `mint/styles.css` hides
+     `.blocks-mint-ripple` outright — both on the class that actually exists. */
 </style>

package/dist/primitives/ButtonGroup/ButtonGroup.svelte

@@ -247,6 +247,10 @@
   }
 
   const ariaRole = $derived(selection === 'single' ? 'radiogroup' : 'group');
+  // ARIA allows `aria-orientation` on `radiogroup`, not on `group` — emitting it
+  // on the multi-selection arm is an `aria-allowed-attr` violation. The visual
+  // orientation is unaffected; it comes from the variant classes, not from ARIA.
+  const ariaOrientation = $derived(ariaRole === 'radiogroup' ? orientation : undefined);
 </script>
 
 <div
@@ -257,7 +261,7 @@
     : styles.base({ class: [slotClasses?.base, className] })}
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledBy}
-  aria-orientation={orientation}
+  aria-orientation={ariaOrientation}
   aria-disabled={disabled || undefined}
   onkeydown={handleKeyDown}
   {...restProps}

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -126,6 +126,7 @@
     for={id}
   >
     <input
+      {...restProps}
       bind:this={inputRef}
       {id}
       type="checkbox"
@@ -139,7 +140,6 @@
       aria-invalid={ff.invalid ? 'true' : undefined}
       aria-describedby={describedBy}
       onchange={handleChange}
-      {...restProps}
     />
 
     <span

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -42,6 +42,16 @@
   let internalOpen = $state(defaultOpen ?? false);
   const isOpen = $derived(open !== undefined ? open : internalOpen);
 
+  // Single mutation point. Family contract (COMPONENT-API-CONVENTIONS.md
+  // §Open-state vocabulary): the transition is applied optimistically — `open`
+  // (or the uncontrolled seed) is written *before* `onOpenChange` fires, once
+  // per transition. With `bind:open` that write is the propagation. A consumer
+  // passing `open` without `bind:` must mirror every `onOpenChange` back into
+  // its state (Svelte can't distinguish `open={x}` from `bind:open={x}` at
+  // runtime, so a rejected transition is undetectable from in here). To veto
+  // transitions, own them instead: drive `open` from your source of truth and
+  // toggle it from a custom `trigger` snippet — see AccordionItem's
+  // collapsible=false handling.
   function toggle() {
     if (disabled) return;
     const next = !isOpen;

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

@@ -32,11 +32,22 @@ import type { CollapsibleSlots, CollapsibleVariants } from './collapsible.varian
  * ```
  */
 export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    /** Whether the content is visible. Supports bind:open. */
+    /**
+     * Whether the content is visible. Supports bind:open. Trigger-driven transitions
+     * are applied optimistically: `open` is updated first, then `onOpenChange` reports
+     * the change. When passing `open` without `bind:`, mirror every `onOpenChange`
+     * back into your state — an ignored change leaves the component and your source
+     * of truth diverged. To conditionally reject transitions, drive `open` from your
+     * own state and toggle it from a custom `trigger` snippet instead of calling the
+     * provided `toggle`.
+     */
     open?: boolean;
     /** Initial open state for uncontrolled usage @default false */
     defaultOpen?: boolean;
-    /** Callback fired when open state changes */
+    /**
+     * Callback fired once per trigger-driven open transition, after the state is
+     * applied. Not fired for consumer writes via `bind:open`.
+     */
     onOpenChange?: (open: boolean) => void;
     /** Disable the trigger @default false */
     disabled?: boolean;

package/dist/primitives/ConfirmDialog/ConfirmDialog.svelte

@@ -15,6 +15,7 @@
     cancelLabel,
     confirmIntent,
     onConfirm,
+    onError,
     onCancel,
     loading = false,
     closeOnBackdropClick = true,
@@ -39,6 +40,19 @@
       busy = true;
       await onConfirm();
       open = false;
+    } catch (error) {
+      // Failure contract: skip the auto-close (dialog stays open) and re-enable
+      // (busy cleared in `finally`) so the user can retry or cancel. The
+      // rejection is handed to `onError`; without one it is surfaced DEV-only
+      // instead of escaping the ignored onclick promise as an unhandled
+      // rejection (Combobox queryFn / Toast promise precedent). A throwing
+      // `onError` is a consumer bug and deliberately escapes (fail-loud,
+      // mirrors createCronRunner).
+      if (onError) {
+        onError(error);
+      } else if (import.meta.env?.DEV) {
+        console.error('[ConfirmDialog] onConfirm rejected:', error);
+      }
     } finally {
       busy = false;
     }

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
 import type { DialogIntent } from '../Dialog/index.js';
 import type { DialogSlots } from '../Dialog/dialog.variants.js';
 /**
@@ -15,7 +16,8 @@ export type ConfirmIntent = Exclude<DialogIntent, 'neutral'>;
  *
  * `onConfirm` may be `async`; while the returned promise is pending the
  * dialog locks itself (no backdrop dismiss, no escape, confirm button
- * shows a spinner). Auto-closes on resolve.
+ * shows a spinner). Auto-closes on resolve; on reject it stays open and
+ * re-enables, handing the error to `onError`.
  *
  * @tag overlay
  * @related Dialog
@@ -36,7 +38,7 @@ export type ConfirmIntent = Exclude<DialogIntent, 'neutral'>;
  * />
  * ```
  */
-export interface ConfirmDialogProps {
+export interface ConfirmDialogProps extends Omit<HTMLDialogAttributes, 'children' | 'open' | 'title' | 'draggable'> {
     /** Controls visibility. Supports bind:open. */
     open?: boolean;
     /** Heading shown in the dialog header. */
@@ -59,9 +61,19 @@ export interface ConfirmDialogProps {
     cancelLabel?: string;
     /**
      * Confirm handler. May return a promise — the dialog stays open and shows
-     * a loading state while it resolves, then auto-closes on success.
+     * a loading state while it resolves, then auto-closes on success. If the
+     * promise rejects the dialog stays open and re-enables; the rejection is
+     * reported via {@link ConfirmDialogProps.onError}.
      */
     onConfirm?: () => void | Promise<void>;
+    /**
+     * Fired when an async `onConfirm` rejects (or a sync one throws). The
+     * dialog stays open and re-enables so the user can retry or cancel — use
+     * this to surface the failure (toast, inline message). Without a handler
+     * the rejection is logged DEV-only (`console.error`) and swallowed in
+     * production; it never escapes as an unhandled promise rejection.
+     */
+    onError?: (error: unknown) => void;
     /** Fired when the user cancels (button, backdrop, or Escape). */
     onCancel?: () => void;
     /**

package/dist/primitives/Dialog/Dialog.svelte

@@ -6,6 +6,7 @@
   import { onDestroy, tick } from 'svelte';
   import { fade, scale } from 'svelte/transition';
   import { trapFocus, showDialogModal, closeDialogModal } from '../../utils/overlay';
+  import { composeHandlers } from '../../utils/compose-handlers';
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DialogProps } from './index';
@@ -34,6 +35,16 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    // Pulled out of restProps so the `{...restProps}`-first spread (internal
+    // attributes win — see docs/COMPONENT-API-CONVENTIONS.md) can't clobber
+    // them, and so neither side loses: the behavioural handlers below are
+    // composed (internal first, consumer second) and the two ARIA attributes
+    // are merged, rather than one silently replacing the other.
+    onclick: onclickProp,
+    onkeydown: onkeydownProp,
+    onclose: oncloseProp,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: DialogProps = $props();
 
@@ -134,6 +145,14 @@
   const bodyId = `dialog-body-${uid}`;
   const overlayId = `dialog-${uid}`;
 
+  // A rendered `title` owns the labelling; without one, a consumer-supplied
+  // `aria-labelledby` (e.g. a heading inside `children`) is the fallback, so
+  // external labelling survives the restProps-first spread.
+  const labelledBy = $derived(titleId ?? ariaLabelledby);
+  // Merged, not replaced: a consumer's description is supplemental to the
+  // dialog's own body — internal id first, consumer id last (mirrors Input).
+  const describedBy = $derived([bodyId, ariaDescribedby].filter(Boolean).join(' ') || undefined);
+
   const variantProps: DialogVariants = $derived({ size, placement, intent });
   const styles = $derived(dialogVariants(variantProps));
   const slotClasses = $derived(
@@ -176,6 +195,12 @@
     if (closeOnBackdropClick) requestClose();
   }
 
+  // Native `close` event (ESC handled by the UA, form[method=dialog], .close()).
+  // Named rather than inline so it can be composed with a consumer `onclose`.
+  function handleNativeClose() {
+    if (open) requestClose();
+  }
+
   function handleOutroEnd() {
     closeDialogModal(dialogEl, previouslyFocused, releaseScrollLock);
     releaseScrollLock = undefined;
@@ -230,18 +255,16 @@
 
 {#if isVisible}
   <dialog
+    {...restProps}
     bind:this={dialogEl}
     class={unstyled ? (slotClasses?.dialog ?? '') : styles.dialog({ class: slotClasses?.dialog })}
-    onclick={handleBackdropClick}
-    onkeydown={handleKeydown}
-    onclose={() => {
-      if (open) requestClose();
-    }}
-    aria-labelledby={titleId}
-    aria-describedby={bodyId}
+    onclick={composeHandlers(handleBackdropClick, onclickProp)}
+    onkeydown={composeHandlers(handleKeydown, onkeydownProp)}
+    onclose={composeHandlers(handleNativeClose, oncloseProp)}
+    aria-labelledby={labelledBy}
+    aria-describedby={describedBy}
     aria-modal="true"
     data-state={open ? 'open' : 'closed'}
-    {...restProps}
   >
     {#if open}
       <div

package/dist/primitives/Drawer/Drawer.svelte

@@ -6,6 +6,7 @@
   import { onDestroy, tick } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { trapFocus, showDialogModal, closeDialogModal } from '../../utils/overlay';
+  import { composeHandlers } from '../../utils/compose-handlers';
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DrawerProps } from './index';
@@ -34,6 +35,15 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    // Pulled out of restProps so the `{...restProps}`-first spread (internal
+    // attributes win — see docs/COMPONENT-API-CONVENTIONS.md) can't clobber
+    // them, and so neither side loses: the behavioural handlers below are
+    // composed (internal first, consumer second) and the two ARIA attributes
+    // are merged, rather than one silently replacing the other. Mirrors Dialog.
+    onkeydown: onkeydownProp,
+    onclose: oncloseProp,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: DrawerProps = $props();
 
@@ -66,6 +76,14 @@
   const bodyId = `drawer-body-${uid}`;
   const overlayId = `drawer-${uid}`;
 
+  // A rendered `title` owns the labelling; without one, a consumer-supplied
+  // `aria-labelledby` (e.g. a heading inside `children`) is the fallback, so
+  // external labelling survives the restProps-first spread.
+  const labelledBy = $derived(titleId ?? ariaLabelledby);
+  // Merged, not replaced: a consumer's description is supplemental to the
+  // drawer's own body — internal id first, consumer id last (mirrors Input).
+  const describedBy = $derived([bodyId, ariaDescribedby].filter(Boolean).join(' ') || undefined);
+
   const variantProps: DrawerVariants = $derived({ placement, size, intent, accentEdge });
   const styles = $derived(drawerVariants(variantProps));
   const slotClasses = $derived(
@@ -159,6 +177,12 @@
     if (event.key === 'Tab') trapFocus(event, panelElement);
   }
 
+  // Native `close` event (ESC handled by the UA, form[method=dialog], .close()).
+  // Named rather than inline so it can be composed with a consumer `onclose`.
+  function handleNativeClose() {
+    if (open) requestClose();
+  }
+
   function handleOutroEnd() {
     closeDialogModal(dialogElement, previouslyFocused, releaseScrollLock);
     releaseScrollLock = undefined;
@@ -171,17 +195,15 @@
 
 {#if isVisible}
   <dialog
+    {...restProps}
     bind:this={dialogElement}
     class={unstyled ? (slotClasses?.dialog ?? '') : styles.dialog({ class: slotClasses?.dialog })}
-    onkeydown={handleKeydown}
-    onclose={() => {
-      if (open) requestClose();
-    }}
-    aria-labelledby={titleId}
-    aria-describedby={bodyId}
+    onkeydown={composeHandlers(handleKeydown, onkeydownProp)}
+    onclose={composeHandlers(handleNativeClose, oncloseProp)}
+    aria-labelledby={labelledBy}
+    aria-describedby={describedBy}
     aria-modal="true"
     data-state={open ? 'open' : 'closed'}
-    {...restProps}
   >
     {#if open}
       <div

package/dist/primitives/Input/Input.svelte

@@ -43,6 +43,7 @@
     persistVersion = 1,
     persistNamespace,
     onkeydown: userOnKeydown,
+    id: idProp,
     'aria-describedby': ariaDescribedby,
     ...restProps
   }: InputProps = $props();
@@ -118,9 +119,14 @@
   );
 
   // ARIA wiring is shared with every form primitive — see XC-2.
+  // A consumer-supplied `id` wins over the generated one: pairing an Input
+  // with an external `<label for>` is only possible if the id we are handed
+  // actually reaches the `<input>`. `$props.id()` may only appear as a
+  // top-level initializer, hence the two-step derive.
   const propsId = $props.id();
+  const fieldId = $derived(idProp ?? `input-${propsId}`);
   const ff = useFormField(() => ({
-    fieldId: `input-${propsId}`,
+    fieldId,
     helper,
     error,
     required,

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