@urbicon-ui/blocks 6.24.0 → 6.26.0

package/dist/primitives/Avatar/Avatar.svelte

@@ -42,35 +42,42 @@
 
   const isInteractive = $derived(clickable || interactive || !!onclick);
 
-  function getRandomColor(name?: string): string {
-    if (!name) return '#4b5563'; // gray-600
+  // The identity palette lives in `style/semantic.css` (--color-avatar-1..12),
+  // so a brand rethemes it without touching this component and dark mode
+  // resolves through light-dark() like every other token. Spelled out one
+  // `var()` per slot rather than built from a template string: Tailwind's
+  // scanner only keeps @theme variables it can see referenced in the source,
+  // and a computed `--color-avatar-${n}` is invisible to it — the same reason
+  // `internal/charts/utils.ts` enumerates its chart palette literally.
+  const identityPalette = [
+    'var(--color-avatar-1)',
+    'var(--color-avatar-2)',
+    'var(--color-avatar-3)',
+    'var(--color-avatar-4)',
+    'var(--color-avatar-5)',
+    'var(--color-avatar-6)',
+    'var(--color-avatar-7)',
+    'var(--color-avatar-8)',
+    'var(--color-avatar-9)',
+    'var(--color-avatar-10)',
+    'var(--color-avatar-11)',
+    'var(--color-avatar-12)'
+  ];
 
-    // Tailwind *-700 shades — dark enough that white text hits WCAG AA 4.5:1
-    // on every hue. Lighter shades (*-500) used before produced ~3:1 contrast.
-    const colors = [
-      '#b91c1c', // red-700
-      '#c2410c', // orange-700
-      '#b45309', // amber-700
-      '#a16207', // yellow-700
-      '#4d7c0f', // lime-700
-      '#15803d', // green-700
-      '#047857', // emerald-700
-      '#0e7490', // cyan-700
-      '#0369a1', // sky-700
-      '#1d4ed8', // blue-700
-      '#4338ca', // indigo-700
-      '#6d28d9', // violet-700
-      '#7e22ce', // purple-700
-      '#a21caf', // fuchsia-700
-      '#be185d' // pink-700
-    ];
+  // Deterministic name → slot. The same name must always land on the same hue,
+  // so this stays a pure function of `name` with no randomness despite the
+  // `randomColor` prop name.
+  function getIdentityColor(name?: string): string | undefined {
+    // No name means no identity to encode — fall through to the `frame` slot's
+    // neutral surface tokens instead of inventing a grey.
+    if (!name) return undefined;
 
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
       hash = name.charCodeAt(i) + ((hash << 5) - hash);
     }
 
-    return colors[Math.abs(hash) % colors.length];
+    return identityPalette[Math.abs(hash) % identityPalette.length];
   }
 
   function getInitials(name?: string): string {
@@ -83,7 +90,7 @@
       .slice(0, 2);
   }
 
-  const randomBg = $derived(randomColor ? getRandomColor(name) : undefined);
+  const randomBg = $derived(randomColor ? getIdentityColor(name) : undefined);
 
   const variantProps: AvatarVariants = $derived({
     size,
@@ -107,8 +114,15 @@
   // Inline property names stay kebab-case — a previous camelCase
   // `backgroundColor` was silently ignored by browsers, dropping the avatar back
   // to surface-interactive + white text.
+  //
+  // The initials take `--color-text-on-dark`, the palette's contrast partner: it
+  // flips white → neutral-900 in step with the fills going dark → light, so the
+  // initials stay legible in both modes. A literal `white` (the previous value)
+  // only worked because the old fills were frozen dark in dark mode too.
   const frameStyle = $derived(
-    randomColor && randomBg ? `background-color: ${randomBg}; color: white` : undefined
+    randomColor && randomBg
+      ? `background-color: ${randomBg}; color: var(--color-text-on-dark)`
+      : undefined
   );
 
   // `ringColor` recolours the ring on the outer `base`. The ring is a

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

@@ -34,7 +34,7 @@ export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDiv
     children?: Snippet;
     /** Custom ring color (CSS value). Overrides `ringIntent` when set. */
     ringColor?: string;
-    /** Derive a deterministic background color from `name`. The same name always produces the same color, making it easy to visually distinguish users without images. Overrides `intent`. */
+    /** Derive a deterministic background color from `name`. The same name always produces the same color, making it easy to visually distinguish users without images. Overrides `intent`. Picks from the 12-slot identity palette (`--color-avatar-1` … `--color-avatar-12`), which resolves light/dark automatically — override those tokens to rebrand it. Without a `name` there is no identity to encode, so the avatar keeps its neutral surface. */
     randomColor?: boolean;
     /** Mark the avatar as clickable (adds hover/focus styles and keyboard support). Alias for the `interactive` variant. */
     clickable?: boolean;

package/dist/primitives/Badge/badge.variants.js

@@ -307,7 +307,7 @@ export const badgeVariants = tv({
             intent: 'warning',
             variant: 'filled',
             class: {
-                base: 'bg-warning text-text-on-surface border-warning'
+                base: 'bg-warning text-text-on-warning border-warning'
             }
         },
         {

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/Button/button.variants.js

@@ -175,7 +175,7 @@ export const buttonVariants = tv({
             intent: 'warning',
             variant: 'filled',
             class: {
-                base: 'bg-warning text-text-on-surface border-warning hover:bg-warning-hover active:bg-warning-active'
+                base: 'bg-warning text-text-on-warning border-warning hover:bg-warning-hover active:bg-warning-active'
             }
         },
         {
@@ -369,7 +369,7 @@ export const buttonVariants = tv({
             active: true,
             variant: 'outlined',
             intent: 'warning',
-            class: { base: 'bg-warning text-text-on-surface border-warning hover:bg-warning-hover' }
+            class: { base: 'bg-warning text-text-on-warning border-warning hover:bg-warning-hover' }
         },
         {
             active: true,

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.variants.js

@@ -146,7 +146,7 @@ export const checkboxVariants = tv({
             checked: true,
             intent: 'warning',
             class: {
-                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+                box: 'bg-warning border-warning text-text-on-warning group-hover:bg-warning-hover group-active:bg-warning-active'
             }
         },
         {
@@ -189,7 +189,7 @@ export const checkboxVariants = tv({
             indeterminate: true,
             intent: 'warning',
             class: {
-                box: 'bg-warning border-warning text-text-on-surface group-hover:bg-warning-hover group-active:bg-warning-active'
+                box: 'bg-warning border-warning text-text-on-warning group-hover:bg-warning-hover group-active:bg-warning-active'
             }
         },
         {

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

@@ -16,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
@@ -60,9 +61,19 @@ export interface ConfirmDialogProps extends Omit<HTMLDialogAttributes, 'children
     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
@@ -256,6 +279,10 @@
           easing: motion.easing
         }}
       ></div>
+      <!-- tabindex=-1: focus target of last resort — focusFirstElement falls back
+           to the panel when children contain nothing focusable (untitled dialog),
+           keeping the element-level ESC handler + Tab trap live. Negative, so it
+           never joins the Tab cycle. -->
       <div
         bind:this={panelEl}
         class={unstyled
@@ -263,6 +290,7 @@
           : styles.panel({ class: [slotClasses?.panel, className] })}
         data-intent={intent}
         role="document"
+        tabindex="-1"
         style:translate={dragX !== 0 || dragY !== 0 ? `${dragX}px ${dragY}px` : undefined}
         transition:scale={{
           duration: motion.enterDuration,

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
@@ -196,6 +218,10 @@
           easing: motion.easing
         }}
       ></div>
+      <!-- tabindex=-1: focus target of last resort — focusFirstElement falls back
+           to the panel when children contain nothing focusable (untitled drawer
+           with hideCloseButton), keeping the element-level ESC handler + Tab trap
+           live. Negative, so it never joins the Tab cycle. -->
       <div
         bind:this={panelElement}
         class={unstyled
@@ -203,6 +229,7 @@
           : styles.panel({ class: [slotClasses?.panel, className] })}
         data-intent={intent}
         role="document"
+        tabindex="-1"
         transition:fly={flyParams}
         onoutroend={handleOutroEnd}
       >

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,