@urbicon-ui/blocks 6.29.2 → 6.30.1

package/dist/primitives/Button/Button.svelte

@@ -120,6 +120,7 @@
   onclick={handleClick}
   role={ariaProps.role}
   aria-checked={ariaProps['aria-checked']}
+  data-value={ariaProps['data-value']}
   aria-pressed={ariaProps.role ? undefined : effectiveActive || effectivePressed || undefined}
   aria-disabled={effectiveDisabled}
   aria-busy={loading}

package/dist/primitives/ButtonGroup/ButtonGroup.svelte

@@ -66,15 +66,26 @@
     }
   });
 
-  // 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[] = [];
+  // Bumped (deferred to a microtask — registration runs during the child's
+  // render, where a synchronous $state write would be state_unsafe_mutation)
+  // whenever a Button registers, so the roving effect below re-runs for
+  // buttons mounted *after* the group's initial render. Without it a
+  // runtime-added radio kept its native tabbability until the next selection
+  // change — a second tab stop in the radiogroup.
+  let registryVersion = $state(0);
+  let registryBumpQueued = false;
+
+  function noteRegistration() {
+    if (registryBumpQueued) return;
+    registryBumpQueued = true;
+    queueMicrotask(() => {
+      registryBumpQueued = false;
+      registryVersion++;
+    });
+  }
 
   function registerButton(buttonValue: string | undefined) {
-    if (buttonValue && !buttonOrder.includes(buttonValue)) buttonOrder.push(buttonValue);
+    noteRegistration();
     return {
       get isSelected() {
         return buttonValue ? selectedValues.has(buttonValue) : false;
@@ -100,17 +111,18 @@
         onSelectionChange?.(value, Array.from(selectedValues));
       },
       getButtonProps() {
-        // 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.
+        // A value-less Button is an action button, not a selection option, so
+        // it gets no radio/checkbox role. Selection options additionally carry
+        // their value as `data-value`, committed in the same render as the
+        // role — the radiogroup resolves the selected radio by *matching
+        // value* against the queried elements, so duplicate values and
+        // runtime-mounted/removed buttons can never drift an index space.
         if (selection === 'none' || !buttonValue) return {};
         const checked = selectedValues.has(buttonValue);
         return {
           role: selection === 'single' ? ('radio' as const) : ('checkbox' as const),
-          'aria-checked': checked
+          'aria-checked': checked,
+          'data-value': buttonValue
         };
       }
     };
@@ -165,24 +177,29 @@
       : [];
   }
 
-  // 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;
+  // Position of the selected radio within the queried elements: each radio
+  // carries its value as `data-value` (same render commit as its role), and
+  // the *selected* one is read from the reactive selection — not the DOM's
+  // aria-checked, which a parent effect can observe before the child
+  // <Button>s commit it. Matching by value (not by a parallel registration
+  // index) keeps duplicates and runtime-mounted/removed buttons correct: the
+  // tab stop sticks to the element whose value is selected, wherever it sits.
+  function selectedRadioIndex(radios: readonly HTMLButtonElement[]): number {
+    return radios.findIndex((radio) => {
+      const v = radio.dataset.value;
+      return v !== undefined && selectedValues.has(v);
+    });
   }
 
   $effect(() => {
+    // `registryVersion` re-runs the assignment when Buttons mount after the
+    // group's initial render (the DOM query itself is not reactive).
+    void registryVersion;
     if (selection !== 'single' || !containerElement) return;
     const radios = rovingRadios();
     if (radios.length === 0) return;
 
-    const checkedIndex = selectedRadioIndex();
+    const checkedIndex = selectedRadioIndex(radios);
     // Nothing selected yet → the first enabled radio holds the tab stop, so the
     // group stays reachable with Tab (standard radiogroup entry behaviour).
     const activeIndex =
@@ -194,11 +211,12 @@
       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.
+    // 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. Queried fresh at teardown time so
+    // radios mounted since this run are restored too.
     return () => {
-      for (const radio of radios) radio.removeAttribute('tabindex');
+      for (const radio of rovingRadios()) radio.removeAttribute('tabindex');
     };
   });
 
@@ -212,7 +230,7 @@
     const radios = rovingRadios();
     if (radios.length === 0) return;
 
-    const currentIndex = selectedRadioIndex();
+    const currentIndex = selectedRadioIndex(radios);
     const isDisabled = (i: number) => radios[i].disabled;
     let newIndex: number;
 

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

@@ -102,6 +102,12 @@ export interface ButtonGroupContext {
         getButtonProps: () => {
             role?: 'radio' | 'checkbox';
             'aria-checked'?: boolean;
+            /**
+             * The Button's selection value, exposed on the element so the group can
+             * resolve the selected radio by matching value instead of by position
+             * (robust against duplicate values and runtime add/remove).
+             */
+            'data-value'?: string;
         };
     };
 }

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -28,6 +28,7 @@
     id: idProp,
     mint = 'none',
     onCheckedChange,
+    onchange: userOnChange,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -103,7 +104,7 @@
     }
   });
 
-  function handleChange(event: Event) {
+  function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
     if (disabled) return;
     if (indeterminate) indeterminate = false;
     // Read the new value directly from the input — `bind:checked`
@@ -111,6 +112,14 @@
     const next = (event.target as HTMLInputElement).checked;
     checked = next;
     onCheckedChange?.(next);
+    // Forward the consumer's native onchange — Checkbox's own handler sits
+    // after `{...restProps}` on the <input>, so without this it would be
+    // silently swallowed (the exact failure that broke Table's selection
+    // wiring, d7b4dfe; Textarea's oninput forward is the precedent).
+    // `onCheckedChange(checked)` stays the canonical callback; the forward
+    // runs after the internal state write so the consumer observes the
+    // committed value.
+    userOnChange?.(event);
   }
 </script>
 

package/dist/primitives/Combobox/Combobox.svelte

@@ -36,6 +36,7 @@
     debounceMs = 250,
     loadingText = 'Loading…',
     onError,
+    seedOptions = [],
     tier,
     variant = 'outlined',
     size = 'md',
@@ -129,12 +130,16 @@
   // Single-mode selected option. `undefined` in multi mode, which makes every
   // single-only path keyed on it (the label-restore effect, the query shortcut
   // in `matchesQuery`, the click-outside/chevron label restore) inert without a
-  // per-site `!multiple` guard.
+  // per-site `!multiple` guard. Lookup order: live options → the pick-cache →
+  // the consumer's `seedOptions` (labels for values pre-bound before any
+  // options exist, e.g. async mode on mount) — the seed is last so it can
+  // never shadow a live option.
   const selectedOption = $derived(
     multiple
       ? undefined
       : (allOptions.find((o) => o.value === value) ??
-          (selectedCache && selectedCache.value === value ? selectedCache : undefined))
+          (selectedCache && selectedCache.value === value ? selectedCache : undefined) ??
+          seedOptions.find((o) => o.value === value))
   );
 
   // ── Multi-select state (multiple) ─────────────────────────────────────────
@@ -147,15 +152,16 @@
   // the multi-select analogue of `selectedCache`.
   const tagCache = new SvelteMap<T, ComboboxOption<T>>();
 
-  // Resolved options for the selected values, in selection order. Falls back to
-  // the cache, then to a bare `{ label: String(value) }` for an orphan value
-  // (bound but never in the options) so the tag still renders and stays
-  // removable rather than silently vanishing from the array.
+  // Resolved options for the selected values, in selection order. Lookup order
+  // mirrors `selectedOption`: live options → the pick-cache → `seedOptions`,
+  // then a bare `{ label: String(value) }` for a true orphan (bound but in no
+  // source) so the tag still renders and stays removable rather than silently
+  // vanishing from the array.
   //
-  // The dev-warn is gated to *sync* mode: with `queryFn`, a pre-bound value that
-  // isn't in the current result set is expected, not a bug (there is no API to
-  // seed labels for it), so warning there would cry wolf on a legitimate pattern.
-  // See technical-debt (async pre-selected labels).
+  // The dev-warn covers BOTH modes since `seedOptions` exists: a value that is
+  // in neither the options, the cache, nor the seed is a consumer gap in async
+  // mode too — the warn names the API that closes it. (Before the seed there
+  // was no way to supply async labels, so warning there would have cried wolf.)
   //
   // Warn dedup: `selectedTags` recomputes on every fresh `options` array a
   // parent re-render passes in (the common `options={items.map(…)}` idiom), so
@@ -166,12 +172,16 @@
   const warnedOrphanValues = new Set<T>();
   const selectedTags = $derived.by<ComboboxOption<T>[]>(() =>
     selectedValues.map((v) => {
-      const found = allOptions.find((o) => o.value === v) ?? tagCache.get(v);
+      const found =
+        allOptions.find((o) => o.value === v) ??
+        tagCache.get(v) ??
+        seedOptions.find((o) => o.value === v);
       if (found) return found;
-      if (!queryFn && import.meta.env?.DEV && !warnedOrphanValues.has(v)) {
+      if (import.meta.env?.DEV && !warnedOrphanValues.has(v)) {
         warnedOrphanValues.add(v);
         console.warn(
-          `[Combobox] value ${JSON.stringify(v)} has no matching option — tag falls back to its raw value.`
+          `[Combobox] value ${JSON.stringify(v)} has no matching option — tag falls back to its raw value. ` +
+            'For pre-selected values (e.g. async mode on mount), supply its label via `seedOptions`.'
         );
       }
       return { label: String(v), value: v } satisfies ComboboxOption<T>;

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

@@ -75,6 +75,18 @@ interface ComboboxBaseProps<T extends SelectValue = string> extends ComboboxVari
      * production; it never escapes as an unhandled promise rejection.
      */
     onError?: (error: unknown) => void;
+    /**
+     * Label seed for pre-selected values whose options are not (yet) in the
+     * option list — the async-mode pattern of binding `value` on mount before
+     * any `queryFn` result has arrived. Consulted as the LAST lookup source when
+     * resolving a selected value's label (current options first, then the
+     * pick-cache, then this seed), so it can never shadow a live option, and it
+     * works identically for single and multi selection. Without a matching seed
+     * such a value renders as its raw `String(value)` (and warns DEV-only).
+     * Declarative and idempotent — not a second selection source: `value` alone
+     * decides what is selected; `seedOptions` only supplies labels.
+     */
+    seedOptions?: ComboboxOption<T>[];
     /** Show a clear button when a value is selected. Click or press Escape to reset. @default false */
     clearable?: boolean;
     /** Disable the entire combobox. @default false */

package/dist/utils/overlay.js

@@ -83,6 +83,14 @@ export function focusFirstElement(container) {
     if (!isBrowser)
         return;
     tick().then(() => {
+        // The consumer may have already moved focus inside the overlay — the
+        // focus-the-heading a11y pattern focuses a `tabindex="-1"` element, which
+        // getFocusableElements deliberately excludes, so without this guard the
+        // fallback below would steal exactly that focus a tick later. Mirrors the
+        // contains-guard trapFocus applies to the same case; `contains` includes
+        // the container itself, so a pre-focused panel also stays put.
+        if (container?.contains(document.activeElement))
+            return;
         const focusable = getFocusableElements(container);
         if (focusable.length > 0) {
             focusable[0].focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.29.2",
+  "version": "6.30.1",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -94,8 +94,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.29.2",
-    "@urbicon-ui/shared-types": "6.29.2",
+    "@urbicon-ui/i18n": "6.30.1",
+    "@urbicon-ui/shared-types": "6.30.1",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",