@urbicon-ui/blocks 6.22.0 → 6.24.0

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/ButtonGroup/ButtonGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buttonGroupVariants, type ButtonGroupVariants } from '..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { edgeEnabledIndex, nextEnabledIndex } from '../../utils';
   import { getTierContext, setTierContext } from '../../utils/tier-context';
   import type { ButtonGroupContext, ButtonGroupProps } from './index';
   import { setButtonGroupContext } from './buttonGroup.context';
@@ -65,7 +66,15 @@
     }
   });
 
+  // Child Button values in registration (= document) order. Buttons register
+  // during their render pass (before any effect runs), so this is fully
+  // populated in DOM order by the time roving reads it — it lets the radiogroup
+  // map the reactive selection back to a radio's position without the shared
+  // <Button> exposing its value in the DOM.
+  const buttonOrder: string[] = [];
+
   function registerButton(buttonValue: string | undefined) {
+    if (buttonValue && !buttonOrder.includes(buttonValue)) buttonOrder.push(buttonValue);
     return {
       get isSelected() {
         return buttonValue ? selectedValues.has(buttonValue) : false;
@@ -91,8 +100,14 @@
         onSelectionChange?.(value, Array.from(selectedValues));
       },
       getButtonProps() {
-        if (selection === 'none') return {};
-        const checked = buttonValue ? selectedValues.has(buttonValue) : false;
+        // A value-less Button is an action button, not a selection option, so it
+        // gets no radio/checkbox role. This also keeps `rovingRadios()` (which
+        // collects `[role="radio"]`) index-aligned with `buttonOrder` (gated on
+        // `buttonValue`): a value-less radio would otherwise sit in the roving
+        // array but not the order registry, drifting the two index spaces and
+        // misplacing the tab stop / arrow-nav origin.
+        if (selection === 'none' || !buttonValue) return {};
+        const checked = selectedValues.has(buttonValue);
         return {
           role: selection === 'single' ? ('radio' as const) : ('checkbox' as const),
           'aria-checked': checked
@@ -132,17 +147,119 @@
     registerButton
   });
 
+  let containerElement = $state<HTMLDivElement>();
+
+  // Single-select is a WAI-ARIA radiogroup: ONE tab stop, arrow keys move the
+  // selection (roving tabindex). Tab/SegmentGroup drive this from a value→element
+  // registry their own item components populate; ButtonGroup's items are shared
+  // <Button>s (outside this component), so the radiogroup owns the roving from
+  // the container instead — it queries the radio *elements* from the DOM (for
+  // focus + disabled state), reads the *selected* one from reactive state (see
+  // selectedRadioIndex), reuses the shared index math (utils/roving), skips
+  // disabled radios, and drives selection by clicking the target radio (Button's
+  // own click handler does the rest). `multiple`/`none` keep every button
+  // natively tabbable (checkbox-group / plain toolbar convention — not roved).
+  function rovingRadios(): HTMLButtonElement[] {
+    return containerElement
+      ? Array.from(containerElement.querySelectorAll<HTMLButtonElement>('[role="radio"]'))
+      : [];
+  }
+
+  // Position of the selected radio, read from the reactive selection (not the
+  // DOM's aria-checked) so it is correct even on the first paint — a parent
+  // effect can run before the child <Button>s commit their aria, so the DOM
+  // isn't a reliable source there. `buttonOrder` is in document order, matching
+  // the radios queried above.
+  function selectedRadioIndex(): number {
+    for (let i = 0; i < buttonOrder.length; i++) {
+      if (selectedValues.has(buttonOrder[i])) return i;
+    }
+    return -1;
+  }
+
+  $effect(() => {
+    if (selection !== 'single' || !containerElement) return;
+    const radios = rovingRadios();
+    if (radios.length === 0) return;
+
+    const checkedIndex = selectedRadioIndex();
+    // Nothing selected yet → the first enabled radio holds the tab stop, so the
+    // group stays reachable with Tab (standard radiogroup entry behaviour).
+    const activeIndex =
+      checkedIndex >= 0
+        ? checkedIndex
+        : edgeEnabledIndex(radios.length, 1, (i) => radios[i].disabled);
+
+    radios.forEach((radio, i) => {
+      radio.tabIndex = i === activeIndex ? 0 : -1;
+    });
+
+    // Restore native tabbability when the group stops roving (selection flips away
+    // from single, or it unmounts) — otherwise the imposed -1 would strand the
+    // buttons out of the tab order.
+    return () => {
+      for (const radio of radios) radio.removeAttribute('tabindex');
+    };
+  });
+
+  // A disabled radio renders a `<button disabled>`, which can't hold focus, so
+  // arrow navigation must step over it — otherwise selection strands on an
+  // unfocusable radio (aria-checked set, focus stuck on the previous one). The
+  // index math lives in the shared roving helpers (utils/roving).
+  function handleKeyDown(event: KeyboardEvent) {
+    if (disabled || selection !== 'single') return;
+
+    const radios = rovingRadios();
+    if (radios.length === 0) return;
+
+    const currentIndex = selectedRadioIndex();
+    const isDisabled = (i: number) => radios[i].disabled;
+    let newIndex: number;
+
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        newIndex = nextEnabledIndex(radios.length, currentIndex, 1, isDisabled);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        newIndex = nextEnabledIndex(radios.length, currentIndex, -1, isDisabled);
+        break;
+      case 'Home':
+        event.preventDefault();
+        newIndex = edgeEnabledIndex(radios.length, 1, isDisabled);
+        break;
+      case 'End':
+        event.preventDefault();
+        newIndex = edgeEnabledIndex(radios.length, -1, isDisabled);
+        break;
+      default:
+        return;
+    }
+
+    if (newIndex !== currentIndex && newIndex >= 0) {
+      const target = radios[newIndex];
+      target.click(); // Button's own click handler performs the selection
+      target.focus();
+    }
+  }
+
   const ariaRole = $derived(selection === 'single' ? 'radiogroup' : 'group');
 </script>
 
 <div
+  bind:this={containerElement}
   role={ariaRole}
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledBy}
-  aria-disabled={disabled}
+  aria-orientation={orientation}
+  aria-disabled={disabled || undefined}
+  onkeydown={handleKeyDown}
   {...restProps}
 >
   {@render children?.()}

package/dist/primitives/Card/card.variants.js

@@ -66,10 +66,10 @@ export const cardVariants = tv({
                 footer: 'pt-5'
             }
         },
-        // Opt-in slot separators. Default `false` (Lighter): header/footer
+        // Opt-in slot separators. Default `false`: header/footer
         // sit flush against the body, the slots are separated by spacing
         // only. Set `dividers={true}` for traditional card-with-header look.
-        // Uses `border-hairline` (Lighter token) — leiser als border-subtle.
+        // Uses `border-hairline` — leiser als border-subtle.
         dividers: {
             true: {
                 header: 'border-b border-border-hairline',

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -32,6 +32,7 @@
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
     preset,
+    'aria-describedby': ariaDescribedby,
     ...restProps
   }: CheckboxProps = $props();
 
@@ -51,6 +52,14 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint rendered
+  // outside the component) merges with the internal error/helper chain instead
+  // of replacing it — internal descriptions first, the consumer's supplemental
+  // one last (mirrors the Input role model, XC-2).
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
@@ -117,6 +126,7 @@
     for={id}
   >
     <input
+      {...restProps}
       bind:this={inputRef}
       {id}
       type="checkbox"
@@ -128,9 +138,8 @@
       class="peer sr-only"
       aria-checked={indeterminate ? 'mixed' : undefined}
       aria-invalid={ff.invalid ? 'true' : undefined}
-      aria-describedby={ff.describedBy}
+      aria-describedby={describedBy}
       onchange={handleChange}
-      {...restProps}
     />
 
     <span

package/dist/primitives/Combobox/Combobox.svelte

@@ -56,6 +56,8 @@
     slotClasses: slotClassesProp = {},
     preset,
     id: idProp,
+    'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     ...restProps
   }: ComboboxProps<T> = $props();
 
@@ -80,6 +82,15 @@
     disabled
   }));
 
+  // Consumer-supplied `aria-describedby` (e.g. an external hint) merges with the
+  // internal error/helper chain instead of being dropped — restProps land on the
+  // wrapper div, so without this the description would never reach the focusable
+  // input. Internal descriptions first, the consumer's supplemental one last
+  // (mirrors Select + Input).
+  const describedBy = $derived(
+    [ff.describedBy, ariaDescribedby].filter(Boolean).join(' ') || undefined
+  );
+
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
@@ -207,6 +218,18 @@
     filteredGroups ? filteredGroups.flatMap((g) => g.options) : allOptions.filter(matchesQuery)
   );
 
+  // Flat index of each option within `filtered`, precomputed so the grouped
+  // render path reads an option's keyboard-cursor index in O(1) instead of
+  // `filtered.indexOf(opt)` per option (O(n²) per keystroke on a large grouped
+  // list). Same first-occurrence semantics as `indexOf`.
+  const filteredIndexByOption = $derived.by(() => {
+    const map = new Map<ComboboxOption<T>, number>();
+    filtered.forEach((opt, i) => {
+      if (!map.has(opt)) map.set(opt, i);
+    });
+    return map;
+  });
+
   // Debounced query runner. The effect tracks `query` (+ debounceMs); each change
   // resets the timer, and the fetch runs a tick later so bursty typing collapses
   // into one request. A per-run AbortController lets a newer query cancel an
@@ -750,7 +773,7 @@
             {noResultsText}
           </div>
         {:else if filteredGroups}
-          {#each filteredGroups as group (group.label)}
+          {#each filteredGroups as group, i (`${group.label}-${i}`)}
             <div
               class={unstyled
                 ? (slotClasses?.group ?? '')
@@ -766,7 +789,7 @@
                 {group.label}
               </div>
               {#each group.options as opt (opt.value)}
-                {@render optionButton(opt, filtered.indexOf(opt))}
+                {@render optionButton(opt, filteredIndexByOption.get(opt) ?? -1)}
               {/each}
             </div>
           {/each}
@@ -855,6 +878,14 @@
   wiring lives in one place. `required` is single-mode only — in multi the input
   is transient search text (cleared after each pick), so a native `required` on
   it would wrongly block submit even with tags selected.
+
+  A consumer `aria-label` is forwarded onto the input (destructured out of
+  restProps so it never lands on the role-less wrapper `<div>` — axe
+  aria-prohibited-attr), but ONLY when no visible `label` renders. Unlike Select —
+  which names its trigger via `aria-labelledby` (HIGHER ARIA precedence than
+  aria-label) — Combobox names the input via a native `<label for>` (LOWER
+  precedence than aria-label), so an unconditional aria-label would override a
+  visible label. Gating on `label` keeps the visible label authoritative.
 -->
 {#snippet searchField(cls: string)}
   <input
@@ -867,7 +898,8 @@
     aria-activedescendant={activeDescendant}
     aria-autocomplete="list"
     aria-invalid={ff.invalid ? 'true' : undefined}
-    aria-describedby={ff.describedBy}
+    aria-describedby={describedBy}
+    aria-label={label ? undefined : ariaLabel}
     autocomplete="off"
     class={cls}
     placeholder={effectivePlaceholder}

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';
 /**
@@ -36,7 +37,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. */

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

@@ -41,10 +41,10 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     /** Vertical placement within the viewport. Use 'top' for command-palette style positioning. @default 'center' */
     placement?: DialogVariants['placement'];
     /**
-     * Semantic purpose marker (e.g. `danger` for destructive actions). After the
-     * Lighter-Refactor, the Dialog itself no longer paints an accent bar — the
-     * value is exposed on the panel as `data-intent="…"` so consumers can hook
-     * presets, CSS overrides, or icon/title color via their own snippets.
+     * Semantic purpose marker (e.g. `danger` for destructive actions). The
+     * Dialog itself no longer paints an accent bar — the value is exposed on
+     * the panel as `data-intent="…"` so consumers can hook presets, CSS
+     * overrides, or icon/title color via their own snippets.
      * @default 'neutral'
      */
     intent?: DialogVariants['intent'];