@urbicon-ui/blocks 6.30.1 → 6.31.0

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/JourneyTimeline/journey-timeline.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const journeyTimelineVariants: ((props?: {
     orientation?: "horizontal" | "vertical" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+    status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
     focused?: boolean | undefined;
     interactive?: boolean | undefined;
     travelled?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const journeyTimelineVariants: ((props?: {
     base: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -26,7 +26,7 @@ export declare const journeyTimelineVariants: ((props?: {
     rail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const journeyTimelineVariants: ((props?: {
     node: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -52,7 +52,7 @@ export declare const journeyTimelineVariants: ((props?: {
     metaColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -65,7 +65,7 @@ export declare const journeyTimelineVariants: ((props?: {
     meta: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -78,7 +78,7 @@ export declare const journeyTimelineVariants: ((props?: {
     markerColumn: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -91,7 +91,7 @@ export declare const journeyTimelineVariants: ((props?: {
     marker: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -104,7 +104,7 @@ export declare const journeyTimelineVariants: ((props?: {
     connector: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -117,7 +117,7 @@ export declare const journeyTimelineVariants: ((props?: {
     content: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -130,7 +130,7 @@ export declare const journeyTimelineVariants: ((props?: {
     card: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const journeyTimelineVariants: ((props?: {
     header: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -156,7 +156,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trigger: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -169,7 +169,7 @@ export declare const journeyTimelineVariants: ((props?: {
     trailing: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -182,7 +182,7 @@ export declare const journeyTimelineVariants: ((props?: {
     labelGroup: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -195,7 +195,7 @@ export declare const journeyTimelineVariants: ((props?: {
     title: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -208,7 +208,7 @@ export declare const journeyTimelineVariants: ((props?: {
     subtitle: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -221,7 +221,7 @@ export declare const journeyTimelineVariants: ((props?: {
     segment: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -234,7 +234,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detail: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -247,7 +247,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailInner: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -260,7 +260,7 @@ export declare const journeyTimelineVariants: ((props?: {
     detailContent: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;
@@ -273,7 +273,7 @@ export declare const journeyTimelineVariants: ((props?: {
     panel: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        status?: "complete" | "active" | "pending" | "attention" | "blocked" | "skipped" | undefined;
+        status?: "active" | "blocked" | "attention" | "complete" | "pending" | "skipped" | undefined;
         focused?: boolean | undefined;
         interactive?: boolean | undefined;
         travelled?: boolean | undefined;

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;

package/dist/primitives/SegmentGroup/segmentgroup.variants.js

@@ -33,12 +33,12 @@ export const segmentGroupVariants = tv({
             'group-data-[collapsed]:w-full group-data-[collapsed]:justify-start',
             'font-medium whitespace-nowrap cursor-pointer select-none',
             // `border-0` (not `border-none`) — keeps `border-style: solid` so the
-            // text-appearance can add `border-b-[1.5px]` without a style conflict.
+            // text-variant can add `border-b-[1.5px]` without a style conflict.
             'border-0 bg-transparent',
             // Note: weight is intentionally not transitioned and not bumped on
             // active. Changing font weight on selection caused horizontal
             // reflow of sibling items (knob-strips wrapping mid-row). The
-            // indicator (default appearance) / underline (text appearance)
+            // indicator (default variant) / underline (text variant)
             // already signal active state — the colour shift below adds the
             // semantic emphasis without altering layout.
             'transition-colors duration-[var(--blocks-duration-fast)] ease-out',
@@ -49,7 +49,7 @@ export const segmentGroupVariants = tv({
             'data-[state=active]:text-text-primary'
         ]
     },
-    // Appearance contract (see docs/ARCHITECTURE.md §Component Styling
+    // Variant contract (see docs/ARCHITECTURE.md §Component Styling
     // for the surface-token hierarchy and docs/COMPONENT-FAMILIES.md §Navigation):
     //   default → classic pill-track look with an animated indicator
     //   text    → no box frame; items are bare buttons, the active one
@@ -61,8 +61,8 @@ export const segmentGroupVariants = tv({
         // canonical pill-track surface in the 3-tier vocabulary. `modify`
         // produces a soft-rectangle track + indicator + item for compact
         // inline-toolbar contexts (usually inherited from a wrapping
-        // `<Toolbar tier="modify">` via TierContext). When `appearance="text"`
-        // the tier is moot — the appearance override flattens the track to
+        // `<Toolbar tier="modify">` via TierContext). When `variant="text"`
+        // the tier is moot — the variant override flattens the track to
         // `rounded-none` and the items wear their underline instead.
         tier: {
             commit: {
@@ -76,7 +76,7 @@ export const segmentGroupVariants = tv({
                 item: 'rounded-modify'
             }
         },
-        appearance: {
+        variant: {
             default: {},
             text: {
                 // Radius flattening (`rounded-none`) and track-padding reset (`p-0`)
@@ -89,7 +89,7 @@ export const segmentGroupVariants = tv({
                     'border-b-[1.5px] border-b-transparent',
                     'data-[state=active]:border-b-primary',
                     'data-[state=active]:bg-transparent data-[state=active]:shadow-none',
-                    // text-appearance overrides the base `font-medium` so SegmentGroup
+                    // text-variant overrides the base `font-medium` so SegmentGroup
                     // text sits at the same weight as adjacent Select/Input values in
                     // editorial knob-strip contexts. Active state remains distinct via
                     // border-b-primary + text-text-primary — no need for weight to
@@ -125,22 +125,22 @@ export const segmentGroupVariants = tv({
         }
     },
     compoundVariants: [
-        // Text-appearance flattens the corner radius (regardless of tier) and
+        // Text-variant flattens the corner radius (regardless of tier) and
         // zeroes the track padding (regardless of size). Compounds resolve after
         // every variant axis, so these deterministically replace the tier-stage
         // `rounded-{commit|modify}` and the size-stage `p-*`.
-        { appearance: 'text', class: { base: 'rounded-none p-0', item: 'rounded-none' } },
-        // Text-appearance sizing: padding/sizing more compact than the pill-track,
+        { variant: 'text', class: { base: 'rounded-none p-0', item: 'rounded-none' } },
+        // Text-variant sizing: padding/sizing more compact than the pill-track,
         // but still WCAG 2.5.5 AA (≥ 24px tap height). For touch-first contexts
-        // the `default` appearance should be used — text is primarily intended
+        // the `default` variant should be used — text is primarily intended
         // for cursor-driven toolbar/knob-strip contexts.
-        { appearance: 'text', size: 'sm', class: { item: 'px-2 py-1.5 text-xs' } },
-        { appearance: 'text', size: 'md', class: { item: 'px-2.5 py-2 text-sm' } },
-        { appearance: 'text', size: 'lg', class: { item: 'px-3 py-2.5 text-base' } }
+        { variant: 'text', size: 'sm', class: { item: 'px-2 py-1.5 text-xs' } },
+        { variant: 'text', size: 'md', class: { item: 'px-2.5 py-2 text-sm' } },
+        { variant: 'text', size: 'lg', class: { item: 'px-3 py-2.5 text-base' } }
     ],
     defaultVariants: {
         tier: 'commit',
-        appearance: 'default',
+        variant: 'default',
         size: 'md',
         fullWidth: false,
         disabled: false

package/dist/primitives/Select/select.variants.js

@@ -55,7 +55,10 @@ export const selectVariants = tv({
             'bg-surface-base transition-colors duration-[var(--blocks-duration-fast)]',
             '[&_svg]:opacity-0 [&_svg]:transition-opacity [&_svg]:duration-[var(--blocks-duration-fast)]'
         ],
-        group: [],
+        // `space-y-0.5` keeps grouped options on the same item-to-item rhythm as
+        // the flat listbox (whose spacing lives on the `listbox` slot) — without
+        // it, adjacent selected-highlights inside a group touch (XC-9).
+        group: ['space-y-0.5'],
         groupLabel: ['px-3 py-1.5 text-xs font-medium text-text-tertiary uppercase tracking-wider'],
         label: ['block font-medium text-text-secondary text-sm'],
         message: ['text-xs']
@@ -84,21 +87,26 @@ export const selectVariants = tv({
         size: {
             // Full xs–xl scale, mirroring Input's h-7…h-14 ladder (form-family
             // symmetry: a dense form should not pair an xs Input with an sm Select).
+            // Option inset (`px`) and the group label track the shared listbox item
+            // rhythm (XC-9): px-2 below md, px-3 at md/lg (slot base), px-4 at xl —
+            // the group header always shares the item's horizontal inset.
             xs: {
                 trigger: 'h-7 pl-2 pr-7 text-xs gap-1.5',
                 chevron: 'w-3 h-3',
                 clear: 'right-1.5 p-0.5 [&_svg]:w-3 [&_svg]:h-3',
-                option: 'py-1 text-xs min-h-[1.75rem]',
+                option: 'px-2 py-1 text-xs min-h-[1.75rem]',
                 optionCheck: 'w-3 h-3',
-                optionCheckbox: 'w-3 h-3 [&_svg]:w-2 [&_svg]:h-2'
+                optionCheckbox: 'w-3 h-3 [&_svg]:w-2 [&_svg]:h-2',
+                groupLabel: 'px-2'
             },
             sm: {
                 trigger: 'h-8 pl-3 pr-8 text-sm gap-2',
                 chevron: 'w-3.5 h-3.5',
                 clear: 'right-2 p-0.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
-                option: 'py-1.5 text-sm min-h-[2rem]',
+                option: 'px-2 py-1.5 text-sm min-h-[2rem]',
                 optionCheck: 'w-3.5 h-3.5',
-                optionCheckbox: 'w-3.5 h-3.5 [&_svg]:w-2.5 [&_svg]:h-2.5'
+                optionCheckbox: 'w-3.5 h-3.5 [&_svg]:w-2.5 [&_svg]:h-2.5',
+                groupLabel: 'px-2'
             },
             md: {
                 trigger: 'h-10 pl-4 pr-10 text-base gap-2',
@@ -120,9 +128,10 @@ export const selectVariants = tv({
                 trigger: 'h-14 pl-6 pr-14 text-xl gap-3',
                 chevron: 'w-6 h-6',
                 clear: 'right-5 p-1 [&_svg]:w-6 [&_svg]:h-6',
-                option: 'py-3 text-lg min-h-[3.5rem]',
+                option: 'px-4 py-3 text-lg min-h-[3.5rem]',
                 optionCheck: 'w-6 h-6',
-                optionCheckbox: 'w-5 h-5 [&_svg]:w-4 [&_svg]:h-4'
+                optionCheckbox: 'w-5 h-5 [&_svg]:w-4 [&_svg]:h-4',
+                groupLabel: 'px-4'
             }
         },
         open: {
@@ -153,6 +162,11 @@ export const selectVariants = tv({
         },
         selected: {
             true: {
+                // Form-family selected signature (parity with Combobox `optionSelected`):
+                // persistent value marking = `bg-surface-selected font-medium` + primary
+                // check. The keyboard/hover cursor (`bg-surface-hover`, call-site class)
+                // still wins the bg bucket, so the cursor stays visible on selected rows.
+                option: 'bg-surface-selected font-medium',
                 optionCheck: 'opacity-100',
                 optionCheckbox: 'border-primary bg-primary text-text-on-primary [&_svg]:opacity-100'
             }

package/dist/primitives/Slider/Slider.svelte

@@ -21,7 +21,7 @@
     helper,
     intent = 'primary',
     size = 'md',
-    appearance = 'default',
+    variant = 'default',
     disabled = false,
     name,
     validRange,
@@ -231,7 +231,7 @@
   const variantProps: SliderVariants = $derived({
     intent,
     size,
-    appearance,
+    variant,
     disabled: disabled || undefined,
     error: !!error || undefined,
     messageType: error ? 'error' : 'helper',