@urbicon-ui/blocks 6.30.1 → 6.32.0

package/dist/components/Calendar/Calendar.svelte

@@ -178,10 +178,6 @@
     view === 'year' || view === 'agenda' ? 'month' : view
   );
 
-  // --- Uncontrolled fallback ---
-  let internalValue = $state<CalendarProps['value']>(undefined);
-  const effectiveValue = $derived(value !== undefined ? value : internalValue);
-
   // --- Extra disable predicate (min/max handled by the controller) ---
   const disabledDatesSet = $derived(new Set(disabledDates.map((d) => toIso(d))));
   function checkExtraDisabled(date: Date): boolean {
@@ -210,7 +206,7 @@
       return selectionMode;
     },
     get selection() {
-      return effectiveValue as DateGridSelection | undefined;
+      return value as DateGridSelection | undefined;
     },
     get rangeStart() {
       return undefined;
@@ -255,12 +251,13 @@
       onMonthChange?.(anchor.getMonth(), anchor.getFullYear());
     }
     onDateClick?.(date);
+    // Always assign the $bindable — no controlled/uncontrolled split. With
+    // `bind:value` the write-back reaches the consumer even from the empty
+    // (undefined) initial, the only type-correct "no selection"; without a
+    // binding Svelte 5 keeps the write local until the parent passes a new
+    // prop value, so uncontrolled and callback-driven usage work unchanged.
     const next = selection as CalendarProps['value'];
-    if (value !== undefined) {
-      value = next;
-    } else {
-      internalValue = next;
-    }
+    value = next;
     onValueChange?.(next!);
   }
 
@@ -351,10 +348,10 @@
 
   // --- Derived: selected date for event list ---
   const selectedDateForList = $derived.by(() => {
-    if (!effectiveValue) return null;
-    if (effectiveValue instanceof Date) return effectiveValue;
-    if (Array.isArray(effectiveValue)) return effectiveValue[effectiveValue.length - 1] ?? null;
-    return effectiveValue.start;
+    if (!value) return null;
+    if (value instanceof Date) return value;
+    if (Array.isArray(value)) return value[value.length - 1] ?? null;
+    return value.start;
   });
 
   // --- Event helpers ---
@@ -500,15 +497,14 @@
       return selectedDateForList;
     },
     get selectedDates() {
-      if (!effectiveValue) return [];
-      if (effectiveValue instanceof Date) return [effectiveValue];
-      if (Array.isArray(effectiveValue)) return effectiveValue;
-      return [effectiveValue.start, effectiveValue.end];
+      if (!value) return [];
+      if (value instanceof Date) return [value];
+      if (Array.isArray(value)) return value;
+      return [value.start, value.end];
     },
     get selectedRange() {
-      if (!effectiveValue || effectiveValue instanceof Date || Array.isArray(effectiveValue))
-        return null;
-      return effectiveValue as DateRange;
+      if (!value || value instanceof Date || Array.isArray(value)) return null;
+      return value as DateRange;
     },
     get events() {
       return expandedEvents;

package/dist/components/Calendar/CalendarAgendaView.svelte

@@ -82,9 +82,15 @@
   aria-label={bt('calendar.agendaView')}
   onkeydown={handleKeydown}
   {@attach swipeable({
-    onSwipeLeft: () => ctx.navigate(1),
-    onSwipeRight: () => ctx.navigate(-1),
-    enabled: ctx.swipeable
+    // Direction-gated like the header arrows (the DateGridScaffold pattern): a
+    // swipe at the bound is inert — no navDirection flip, no clamped no-op emit.
+    onSwipeLeft: () => {
+      if (ctx.canGoForward) ctx.navigate(1);
+    },
+    onSwipeRight: () => {
+      if (ctx.canGoBack) ctx.navigate(-1);
+    },
+    enabled: ctx.swipeable && !ctx.disabled
   })}
   style="overflow: hidden;"
 >

package/dist/components/Calendar/CalendarDayView.svelte

@@ -54,9 +54,15 @@
   aria-label={dateLabel}
   onkeydown={handleKeydown}
   {@attach swipeable({
-    onSwipeLeft: () => ctx.navigate(1),
-    onSwipeRight: () => ctx.navigate(-1),
-    enabled: ctx.swipeable
+    // Direction-gated like the header arrows (the DateGridScaffold pattern): a
+    // swipe at the bound is inert — no navDirection flip, no clamped no-op emit.
+    onSwipeLeft: () => {
+      if (ctx.canGoForward) ctx.navigate(1);
+    },
+    onSwipeRight: () => {
+      if (ctx.canGoBack) ctx.navigate(-1);
+    },
+    enabled: ctx.swipeable && !ctx.disabled
   })}
 >
   <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">

package/dist/components/Calendar/CalendarGrid.svelte

@@ -72,9 +72,15 @@
   onmouseleave={() => ctx.setHoveredDate(null)}
   style="overflow: hidden; position: relative;"
   {@attach swipeable({
-    onSwipeLeft: () => ctx.navigate(1),
-    onSwipeRight: () => ctx.navigate(-1),
-    enabled: ctx.swipeable
+    // Direction-gated like the header arrows (the DateGridScaffold pattern): a
+    // swipe at the bound is inert — no navDirection flip, no clamped no-op emit.
+    onSwipeLeft: () => {
+      if (ctx.canGoForward) ctx.navigate(1);
+    },
+    onSwipeRight: () => {
+      if (ctx.canGoBack) ctx.navigate(-1);
+    },
+    enabled: ctx.swipeable && !ctx.disabled
   })}
 >
   <CalendarWeekdayHeader />

package/dist/components/Calendar/CalendarWeekGrid.svelte

@@ -99,9 +99,15 @@
   onkeydown={handleKeydown}
   style="overflow: hidden;"
   {@attach swipeable({
-    onSwipeLeft: () => ctx.navigate(1),
-    onSwipeRight: () => ctx.navigate(-1),
-    enabled: ctx.swipeable
+    // Direction-gated like the header arrows (the DateGridScaffold pattern): a
+    // swipe at the bound is inert — no navDirection flip, no clamped no-op emit.
+    onSwipeLeft: () => {
+      if (ctx.canGoForward) ctx.navigate(1);
+    },
+    onSwipeRight: () => {
+      if (ctx.canGoBack) ctx.navigate(-1);
+    },
+    enabled: ctx.swipeable && !ctx.disabled
   })}
 >
   <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">

package/dist/components/Calendar/CalendarYearGrid.svelte

@@ -85,9 +85,18 @@
   onkeydown={handleKeydown}
   style="overflow: hidden;"
   {@attach swipeable({
-    onSwipeLeft: () => ctx.navigate(1),
-    onSwipeRight: () => ctx.navigate(-1),
-    enabled: ctx.swipeable
+    // Direction-gated like the header arrows (the DateGridScaffold pattern): a
+    // swipe at the bound is inert — no navDirection flip, no clamped no-op
+    // emit. In year view the gate is month-granular (the controller maps year
+    // onto month bounds): whenever it blocks, the year step would have clamped
+    // back onto the displayed month/year anyway — never a real change.
+    onSwipeLeft: () => {
+      if (ctx.canGoForward) ctx.navigate(1);
+    },
+    onSwipeRight: () => {
+      if (ctx.canGoBack) ctx.navigate(-1);
+    },
+    enabled: ctx.swipeable && !ctx.disabled
   })}
 >
   <div class="grid [&>*]:col-start-1 [&>*]:row-start-1">

package/dist/components/CommandPalette/commandPalette.variants.js

@@ -15,11 +15,16 @@ export const commandPaletteVariants = tv({
         ],
         inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',
         clearButton: 'text-text-quaternary hover:text-text-secondary',
-        list: 'max-h-72 overflow-y-auto p-1.5',
-        groupLabel: ['px-2 py-1.5 text-2xs font-semibold uppercase tracking-wide text-text-quaternary'],
-        // tier: modify — palette items are selectable actions.
+        // `p-1` + `space-y-0.5` = the shared listbox rhythm (XC-9): 4px edge
+        // inset, 2px item-to-item gap — same as Select/Combobox/Menu panels.
+        list: 'max-h-72 overflow-y-auto p-1 space-y-0.5',
+        // `px-3` shares the item's horizontal inset; the micro-typo (2xs,
+        // quaternary) is the palette's own command-surface voice.
+        groupLabel: ['px-3 py-1.5 text-2xs font-semibold uppercase tracking-wide text-text-quaternary'],
+        // tier: modify — palette items are selectable actions. Rhythm = the md
+        // listbox baseline (px-3 py-2 text-sm min-h-2.5rem, gap-2 — XC-9).
         item: [
-            'flex w-full items-center gap-3 rounded-modify px-3 py-2 text-sm',
+            'flex w-full items-center gap-2 rounded-modify px-3 py-2 text-sm min-h-[2.5rem]',
             'transition-colors cursor-pointer'
         ],
         itemHighlighted: 'bg-primary-subtle text-primary',

package/dist/primitives/Accordion/accordion.variants.d.ts

@@ -1,40 +1,40 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const accordionVariants: ((props?: {
-    variant?: "default" | "ghost" | "separated" | undefined;
+    variant?: "default" | "ghost" | "card" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     item: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     trigger: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     chevron: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     contentInner: (props?: ({
-        variant?: "default" | "ghost" | "separated" | undefined;
+        variant?: "default" | "ghost" | "card" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Accordion/accordion.variants.js

@@ -27,13 +27,13 @@ export const accordionVariants = tv({
         contentInner: 'pb-4 text-text-secondary'
     },
     // Variant contract (see docs/MIGRATION-v5.md §2):
-    //   default   → hairlines between items (divide-y)
-    //   separated → items as standalone blocks with spacing, no borders
-    //   ghost     → no separators, hover-tint per item
+    //   default → hairlines between items (divide-y)
+    //   card    → items as standalone card blocks with spacing, no borders
+    //   ghost   → no separators, hover-tint per item
     variants: {
         variant: {
             default: {},
-            separated: {
+            card: {
                 base: 'divide-y-0 space-y-2',
                 item: 'rounded-contain bg-surface-quiet px-4'
             },

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

@@ -33,7 +33,7 @@ export interface AccordionContext {
  *
  * @example
  * ```svelte
- * <Accordion type="multiple" variant="separated" bind:value={openItems}>
+ * <Accordion type="multiple" variant="card" bind:value={openItems}>
  *   <AccordionItem value="section-1" title="Section 1">Content</AccordionItem>
  *   <AccordionItem value="section-2" title="Section 2">Content</AccordionItem>
  * </Accordion>
@@ -43,7 +43,7 @@ export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<H
     /** Allow single or multiple items open at once @default 'single' */
     type?: 'single' | 'multiple';
     /** Visual style @default 'default' */
-    variant?: 'default' | 'separated' | 'ghost';
+    variant?: 'default' | 'card' | 'ghost';
     /** Size @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     /** Controlled open item(s) – string for single, string[] for multiple */

package/dist/primitives/Button/Button.svelte

@@ -106,8 +106,23 @@
   }
 </script>
 
+<!--
+  restProps spreads FIRST so component-owned state wins (COMPONENT-API-CONVENTIONS
+  §restProps ordering). The ARIA/selection attributes after the spread are
+  conditional merges, not plain overrides: an explicit `undefined` after a spread
+  REMOVES the attribute in Svelte, so a naive `role={ariaProps.role}` would strip
+  a standalone consumer's own `role="link"`. Each merge lets the ButtonGroup
+  selection wiring (role/aria-checked/data-value) and the modeled state
+  (pressed/disabled/loading) win when the component has something to say, and
+  falls back to the consumer's restProps value when it doesn't. Inside a
+  selection group aria-pressed is forced off even against restProps — a selection
+  role announces via aria-checked, and doubling up is an ARIA violation.
+  `type`/`disabled`/`class`/`onclick` are destructured (never in restProps);
+  a consumer onclick is composed inside handleClick.
+-->
 <button
   bind:this={buttonElement}
+  {...restProps}
   {type}
   disabled={effectiveDisabled}
   class={[
@@ -118,13 +133,14 @@
       : styles.base({ class: [slotClasses?.base, className] })
   ]}
   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}
-  {...restProps}
+  role={ariaProps.role ?? restProps.role}
+  aria-checked={ariaProps['aria-checked'] ?? restProps['aria-checked']}
+  data-value={ariaProps['data-value'] ?? restProps['data-value']}
+  aria-pressed={ariaProps.role
+    ? undefined
+    : effectiveActive || effectivePressed || restProps['aria-pressed']}
+  aria-disabled={effectiveDisabled || (restProps['aria-disabled'] ?? false)}
+  aria-busy={loading || (restProps['aria-busy'] ?? false)}
 >
   <span
     class={unstyled

package/dist/primitives/Combobox/Combobox.svelte

@@ -895,9 +895,17 @@
       {@render customOption(opt, selected)}
     {:else}
       <span class="flex-1 truncate">{opt.label}</span>
-      {#if selected}
-        <CheckMarkIcon class="text-primary h-4 w-4 shrink-0" />
-      {/if}
+      <!--
+        Always rendered (reserved space) and faded in via opacity — parity
+        with Select's optionCheck mechanic, so selecting never shifts layout.
+      -->
+      <CheckMarkIcon
+        class={unstyled
+          ? (slotClasses?.optionCheck ?? '')
+          : styles.optionCheck({
+              class: [slotClasses?.optionCheck, selected ? 'opacity-100' : undefined]
+            })}
+      />
     {/if}
   </button>
 {/snippet}

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -105,6 +105,15 @@ export declare const comboboxVariants: ((props?: {
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    optionCheck: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     group: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;

package/dist/primitives/Combobox/combobox.variants.js

@@ -34,13 +34,21 @@ export const comboboxVariants = tv({
             'flex w-full items-center gap-2 rounded-modify px-3 py-2 text-left',
             'text-text-primary cursor-pointer select-none',
             'transition-colors duration-[var(--blocks-duration-fast)]',
-            'focus-visible:outline-none'
+            'focus-visible:outline-none',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
         ],
         optionActive: 'bg-surface-hover',
         optionSelected: 'bg-surface-selected font-medium',
-        // Grouped options (parity with Select). `group` is a bare container; the
-        // label is a quiet, uppercase section header.
-        group: '',
+        // Trailing selected-check (parity with Select `optionCheck`): always
+        // rendered with reserved space, fades in via opacity — no layout shift
+        // when a row becomes selected. Sized one step with the option per size.
+        optionCheck: [
+            'shrink-0 text-primary opacity-0 transition-opacity duration-[var(--blocks-duration-fast)]'
+        ],
+        // Grouped options (parity with Select). `group` carries the same
+        // item-to-item rhythm as the flat listbox (`space-y-0.5` there lives on
+        // the `listbox` slot); the label is a quiet, uppercase section header.
+        group: 'space-y-0.5',
         groupLabel: 'px-3 py-1.5 text-xs font-medium text-text-tertiary uppercase tracking-wider',
         noResults: 'px-3 py-4 text-center text-sm text-text-tertiary',
         // Async-search in-flight message (queryFn). Mirrors noResults so both listbox
@@ -137,11 +145,15 @@ export const comboboxVariants = tv({
             // The multi-mode tokenizer (`control`/`search`/`tag`) tracks the same
             // ladder: `control` uses `min-h-*` (not `h-*`) so it grows as tags wrap,
             // and reserves right padding (`pr-*`) for the absolute chevron/clear.
+            // Option rows follow the shared listbox item rhythm (XC-9); the group
+            // label always shares the option's horizontal inset.
             xs: {
                 // `pointer-coarse:text-base` floors the input to 16px on touch-primary
                 // devices so iOS Safari doesn't auto-zoom (and never un-zoom) on focus.
                 input: 'h-7 px-2 pr-7 text-xs pointer-coarse:text-base',
                 option: 'px-2 py-1 text-xs min-h-[1.75rem]',
+                optionCheck: 'w-3 h-3',
+                groupLabel: 'px-2',
                 control: 'min-h-7 gap-1 px-1.5 py-1 pr-7',
                 search: 'text-xs pointer-coarse:text-base',
                 tag: 'text-xs px-1.5 py-0.5',
@@ -151,6 +163,8 @@ export const comboboxVariants = tv({
                 // See `xs` — floor to 16px on touch to avoid iOS Safari focus-zoom.
                 input: 'h-8 px-3 pr-8 text-sm pointer-coarse:text-base',
                 option: 'px-2 py-1.5 text-sm min-h-[2rem]',
+                optionCheck: 'w-3.5 h-3.5',
+                groupLabel: 'px-2',
                 control: 'min-h-8 gap-1 px-2 py-1 pr-8',
                 search: 'text-sm pointer-coarse:text-base',
                 tag: 'text-xs px-2 py-0.5',
@@ -159,6 +173,7 @@ export const comboboxVariants = tv({
             md: {
                 input: 'h-10 px-3 pr-8 text-base',
                 option: 'px-3 py-2 text-sm min-h-[2.5rem]',
+                optionCheck: 'w-4 h-4',
                 control: 'min-h-10 gap-1.5 px-2 py-1.5 pr-8',
                 search: 'text-base',
                 tag: 'text-sm px-2 py-0.5',
@@ -167,6 +182,7 @@ export const comboboxVariants = tv({
             lg: {
                 input: 'h-12 px-4 pr-10 text-lg',
                 option: 'px-3 py-2.5 text-base min-h-[3rem]',
+                optionCheck: 'w-5 h-5',
                 control: 'min-h-12 gap-2 px-3 py-2 pr-10',
                 search: 'text-lg',
                 tag: 'text-base px-2.5 py-1',
@@ -175,6 +191,8 @@ export const comboboxVariants = tv({
             xl: {
                 input: 'h-14 px-6 pr-12 text-xl',
                 option: 'px-4 py-3 text-lg min-h-[3.5rem]',
+                optionCheck: 'w-6 h-6',
+                groupLabel: 'px-4',
                 control: 'min-h-14 gap-2 px-4 py-2.5 pr-12',
                 search: 'text-xl',
                 tag: 'text-lg px-3 py-1',

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

@@ -138,8 +138,8 @@ interface ComboboxBaseProps<T extends SelectValue = string> extends ComboboxVari
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv() styles. Slots: base | label | requiredMark |
      *  inputWrapper | input | message | helper | listbox | option | optionActive | optionSelected |
-     *  group | groupLabel | loading | noResults | clear | chevron | control | search | tag |
-     *  tagLabel | tagRemove */
+     *  optionCheck | group | groupLabel | loading | noResults | clear | chevron | control | search |
+     *  tag | tagLabel | tagRemove */
     slotClasses?: Partial<Record<ComboboxSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Combobox: {...} }}>`.

package/dist/primitives/Menu/menu.variants.js

@@ -27,7 +27,9 @@ export const menuVariants = tv({
         header: ['sticky top-0 z-10 bg-surface-elevated', 'px-2 py-1 border-b border-border-hairline'],
         section: ['px-3 py-1.5 text-xs font-medium text-text-tertiary'],
         divider: ['my-1 h-px bg-border-hairline'],
-        items: ['py-1 space-y-0.5'],
+        // No extra `py` — the `content` slot's `p-1` is the single edge inset
+        // (symmetric 4px, same rhythm as the Select/Combobox listboxes, XC-9).
+        items: ['space-y-0.5'],
         // tier: modify — menu items are momentary affordances inside the contain panel.
         item: [
             'flex w-full items-center gap-2 rounded-modify text-left',
@@ -35,7 +37,9 @@ export const menuVariants = tv({
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary/50',
             'cursor-pointer select-none'
         ],
-        indicator: ['mr-2 inline-flex items-center self-center'],
+        // No `mr-*` — the item's `gap-2` owns the icon↔label distance (8px, the
+        // same gap every listbox row in the library uses).
+        indicator: ['inline-flex items-center self-center'],
         submenu: ['ml-4 mt-2 border-l border-border-hairline pl-2'],
         footer: [
             'sticky bottom-0 z-10 bg-surface-elevated',
@@ -57,11 +61,15 @@ export const menuVariants = tv({
                 content: 'min-w-48'
             }
         },
-        // Size for menu items
+        // Size for menu items. Typo tracks the Button ladder (text-sm/base/lg —
+        // Action-family items read like the Button that opened them); py/min-h
+        // sit on the shared listbox baseline (2 / 2.5 / 3 rem, XC-9). The section
+        // header always shares the item's horizontal inset (px-3 lives on the
+        // `section` slot base for md).
         itemSize: {
-            sm: { item: 'px-2 py-1.5 text-sm min-h-[2rem]' },
+            sm: { item: 'px-2 py-1.5 text-sm min-h-[2rem]', section: 'px-2' },
             md: { item: 'px-3 py-2 text-base min-h-[2.5rem]' },
-            lg: { item: 'px-4 py-2.5 text-lg min-h-[3rem]' }
+            lg: { item: 'px-4 py-2.5 text-lg min-h-[3rem]', section: 'px-4' }
         },
         disabled: {
             true: {

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -12,7 +12,7 @@
     value = $bindable(),
     onValueChange,
     size = 'md',
-    appearance = 'default',
+    variant = 'default',
     tier,
     fullWidth = false,
     disabled = false,
@@ -52,7 +52,7 @@
 
   const variantProps: SegmentGroupVariants = $derived({
     size,
-    appearance,
+    variant,
     tier: effectiveTier,
     fullWidth,
     disabled
@@ -111,8 +111,8 @@
     get size() {
       return size;
     },
-    get appearance() {
-      return appearance;
+    get variant() {
+      return variant;
     },
     get tier() {
       return effectiveTier;

package/dist/primitives/SegmentGroup/SegmentItem.svelte

@@ -28,7 +28,7 @@
 
   const variantProps: SegmentGroupVariants = $derived({
     size: ctx.size,
-    appearance: ctx.appearance,
+    variant: ctx.variant,
     tier: ctx.tier
   });
 

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

@@ -11,7 +11,7 @@ export interface SegmentGroupContext {
     selectItem: (value: string) => void;
     isActive: (value: string) => boolean;
     readonly size: NonNullable<SegmentGroupVariants['size']>;
-    readonly appearance: NonNullable<SegmentGroupVariants['appearance']>;
+    readonly variant: NonNullable<SegmentGroupVariants['variant']>;
     readonly tier: InteractiveTier;
     readonly disabled: boolean;
     readonly unstyled: boolean;

package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts

@@ -1,14 +1,14 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const segmentGroupVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
-    appearance?: "text" | "default" | undefined;
+    variant?: "text" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     fullWidth?: boolean | undefined;
     disabled?: boolean | undefined;
 } | undefined) => {
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
-        appearance?: "text" | "default" | undefined;
+        variant?: "text" | "default" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -17,7 +17,7 @@ export declare const segmentGroupVariants: ((props?: {
     }) | undefined) => string;
     indicator: (props?: ({
         tier?: "commit" | "modify" | undefined;
-        appearance?: "text" | "default" | undefined;
+        variant?: "text" | "default" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const segmentGroupVariants: ((props?: {
     }) | undefined) => string;
     item: (props?: ({
         tier?: "commit" | "modify" | undefined;
-        appearance?: "text" | "default" | undefined;
+        variant?: "text" | "default" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;