@urbicon-ui/blocks 6.30.1 → 6.32.0

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',

package/dist/primitives/Slider/slider.variants.d.ts

@@ -2,7 +2,7 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const sliderVariants: ((props?: {
     intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    appearance?: "default" | "rail" | undefined;
+    variant?: "default" | "rail" | undefined;
     disabled?: boolean | undefined;
     messageType?: "error" | "helper" | undefined;
     error?: boolean | undefined;
@@ -11,7 +11,7 @@ export declare const sliderVariants: ((props?: {
     wrapper: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -22,7 +22,7 @@ export declare const sliderVariants: ((props?: {
     header: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -33,7 +33,7 @@ export declare const sliderVariants: ((props?: {
     label: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -44,7 +44,7 @@ export declare const sliderVariants: ((props?: {
     valueText: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -55,7 +55,7 @@ export declare const sliderVariants: ((props?: {
     base: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -66,7 +66,7 @@ export declare const sliderVariants: ((props?: {
     track: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -77,7 +77,7 @@ export declare const sliderVariants: ((props?: {
     range: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -88,7 +88,7 @@ export declare const sliderVariants: ((props?: {
     thumb: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -99,7 +99,7 @@ export declare const sliderVariants: ((props?: {
     mark: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -110,7 +110,7 @@ export declare const sliderVariants: ((props?: {
     boundaryTick: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -121,7 +121,7 @@ export declare const sliderVariants: ((props?: {
     rangeStatus: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -132,7 +132,7 @@ export declare const sliderVariants: ((props?: {
     rangeStatusIcon: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
@@ -143,7 +143,7 @@ export declare const sliderVariants: ((props?: {
     message: (props?: ({
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        appearance?: "default" | "rail" | undefined;
+        variant?: "default" | "rail" | undefined;
         disabled?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;

package/dist/primitives/Slider/slider.variants.js

@@ -80,7 +80,7 @@ export const sliderVariants = tv({
                 thumb: 'w-7 h-7'
             }
         },
-        // Appearance contract (mirrors Toggle's `dot` and SegmentGroup's `text`).
+        // Variant contract (mirrors Toggle's `dot` and SegmentGroup's `text`).
         //   default → classic pill slider: filled range + 20px thumb with a
         //             white center, border in the intent color, shadow + scale on
         //             hover. Ideal for mobile and content-light contexts where the
@@ -95,7 +95,7 @@ export const sliderVariants = tv({
         // so the tv() pipeline override can cleanly strip the size stage
         // (h-1/2/3, w-3.5 …) — variants and compounds sit in different stages,
         // and only compounds reliably win against variants.
-        appearance: {
+        variant: {
             default: {},
             rail: {}
         },
@@ -147,18 +147,18 @@ export const sliderVariants = tv({
         }
     },
     compoundVariants: [
-        // ─── rail appearance: structural overrides ──────────────────────────
-        // Strips the default-appearance pill chrome from track, range and
+        // ─── rail variant: structural overrides ──────────────────────────
+        // Strips the default-variant pill chrome from track, range and
         // thumb. tv() applies compoundVariants after base variants, so the
         // h-px / rounded-none / border-0 overrides win against the size and
         // intent stages without us having to repeat them per-size.
         {
-            appearance: 'rail',
+            variant: 'rail',
             class: {
                 track: 'h-px rounded-none bg-border-default',
                 range: 'h-px rounded-none',
                 thumb: [
-                    // Reset default-appearance chrome
+                    // Reset default-variant chrome
                     'rounded-full border-0 bg-current shadow-none',
                     // Fixed 8×8 visual — rail is size-invariant by design (analogue
                     // to Toggle dot, which keeps the same dot size across sm/md/lg).
@@ -177,17 +177,17 @@ export const sliderVariants = tv({
         // bg-current picks up the text-color set here, so we map intent →
         // text-color once instead of overriding bg-primary/secondary/…
         // for every intent.
-        { appearance: 'rail', intent: 'primary', class: { thumb: 'text-primary' } },
-        { appearance: 'rail', intent: 'secondary', class: { thumb: 'text-secondary' } },
-        { appearance: 'rail', intent: 'success', class: { thumb: 'text-success' } },
-        { appearance: 'rail', intent: 'warning', class: { thumb: 'text-warning' } },
-        { appearance: 'rail', intent: 'danger', class: { thumb: 'text-danger' } },
-        { appearance: 'rail', intent: 'neutral', class: { thumb: 'text-neutral' } }
+        { variant: 'rail', intent: 'primary', class: { thumb: 'text-primary' } },
+        { variant: 'rail', intent: 'secondary', class: { thumb: 'text-secondary' } },
+        { variant: 'rail', intent: 'success', class: { thumb: 'text-success' } },
+        { variant: 'rail', intent: 'warning', class: { thumb: 'text-warning' } },
+        { variant: 'rail', intent: 'danger', class: { thumb: 'text-danger' } },
+        { variant: 'rail', intent: 'neutral', class: { thumb: 'text-neutral' } }
     ],
     defaultVariants: {
         intent: 'primary',
         size: 'md',
-        appearance: 'default',
+        variant: 'default',
         disabled: false,
         error: false,
         messageType: 'helper',

package/dist/primitives/Toggle/Toggle.svelte

@@ -15,7 +15,7 @@
     tier,
     size = 'md',
     intent = 'primary',
-    appearance = 'default',
+    variant = 'default',
     disabled = false,
     required = false,
     name,
@@ -70,7 +70,7 @@
     tier: effectiveTier,
     size,
     intent,
-    appearance,
+    variant,
     checked,
     disabled,
     error: !!error,

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

@@ -90,7 +90,7 @@ export interface ToggleProps extends Omit<ToggleVariants, 'checked' | 'error'>,
      *
      * @default 'default'
      */
-    appearance?: ToggleVariants['appearance'];
+    variant?: ToggleVariants['variant'];
 }
 export { default as Toggle } from './Toggle.svelte';
 export { type ToggleVariants, toggleVariants } from './toggle.variants.js';

package/dist/primitives/Toggle/toggle.variants.d.ts

@@ -3,7 +3,7 @@ export declare const toggleVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
     intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-    appearance?: "default" | "dot" | undefined;
+    variant?: "default" | "dot" | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
@@ -25,7 +25,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
@@ -37,7 +37,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
@@ -49,7 +49,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
@@ -61,7 +61,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
@@ -73,7 +73,7 @@ export declare const toggleVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
-        appearance?: "default" | "dot" | undefined;
+        variant?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;