@urbicon-ui/blocks 6.21.0 → 6.21.2

package/dist/primitives/RadioGroup/radioGroup.variants.d.ts

@@ -1,35 +1,17 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const radioGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
-    orientation: {
-        horizontal: {
-            group: string;
-        };
-        vertical: {
-            group: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    error: {
-        true: {
-            message: string;
-        };
-    };
-    disabled: {
-        true: {};
-    };
-}> | undefined) => {
+export declare const radioGroupVariants: ((props?: {
+    orientation?: "horizontal" | "vertical" | undefined;
+    required?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
+} | undefined) => {
     root: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
         required?: boolean | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         orientation?: "horizontal" | "vertical" | undefined;
@@ -37,8 +19,7 @@ export declare const radioGroupVariants: (props?: import("../../utils/variants.j
         error?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     label: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
@@ -46,8 +27,7 @@ export declare const radioGroupVariants: (props?: import("../../utils/variants.j
         error?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     message: (props?: ({
         orientation?: "horizontal" | "vertical" | undefined;
@@ -55,78 +35,20 @@ export declare const radioGroupVariants: (props?: import("../../utils/variants.j
         error?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
-export declare const radioItemVariants: (props?: import("../../utils/variants.js").TVProps<{
-    tier: {
-        commit: {
-            indicator: string;
-            dot: string;
-        };
-        modify: {
-            indicator: string;
-            dot: string;
-        };
-    };
-    size: {
-        xs: {
-            item: string;
-            indicator: string;
-            dot: string;
-            label: string;
-            description: string;
-        };
-        sm: {
-            item: string;
-            indicator: string;
-            dot: string;
-            label: string;
-            description: string;
-        };
-        md: {
-            item: string;
-            indicator: string;
-            dot: string;
-            label: string;
-            description: string;
-        };
-        lg: {
-            item: string;
-            indicator: string;
-            dot: string;
-            label: string;
-            description: string;
-        };
-    };
-    intent: {
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-        neutral: {};
-    };
-    variant: {
-        outlined: {};
-        filled: {};
-        ghost: {};
-    };
-    checked: {
-        true: {
-            dot: string;
-        };
-    };
-    disabled: {
-        true: {
-            item: string;
-        };
-    };
-    error: {
-        true: {};
-    };
-}> | undefined) => {
+export declare const radioItemVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    variant?: "ghost" | "filled" | "outlined" | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+} | undefined) => {
     item: (props?: ({
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | "xs" | undefined;
@@ -136,8 +58,7 @@ export declare const radioItemVariants: (props?: import("../../utils/variants.js
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     indicator: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -148,8 +69,7 @@ export declare const radioItemVariants: (props?: import("../../utils/variants.js
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     dot: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -160,8 +80,7 @@ export declare const radioItemVariants: (props?: import("../../utils/variants.js
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -172,8 +91,7 @@ export declare const radioItemVariants: (props?: import("../../utils/variants.js
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     description: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -184,9 +102,10 @@ export declare const radioItemVariants: (props?: import("../../utils/variants.js
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
 export type RadioItemVariants = VariantProps<typeof radioItemVariants>;

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -2,7 +2,7 @@
   import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import { getTierContext } from '../../utils';
+  import { edgeEnabledIndex, getTierContext, nextEnabledIndex } from '../../utils';
   import { segmentGroupVariants, type SegmentGroupVariants } from './segmentgroup.variants';
   import { setSegmentGroupContext } from './segmentGroup.context';
   import type { SegmentGroupContext, SegmentGroupProps } from './index';
@@ -189,37 +189,45 @@
     return () => ro.disconnect();
   });
 
+  // A disabled SegmentItem renders a `<button disabled>`, which can't hold focus,
+  // so roving navigation must skip it — otherwise selection strands on an
+  // unfocusable segment (aria-checked set, focus stuck on the previous one). The
+  // index math lives in the shared roving helpers (utils/roving).
   function handleKeyDown(event: KeyboardEvent) {
     if (disabled) return;
 
     const itemValues = Array.from(registeredItems.keys());
     const currentIndex = value ? itemValues.indexOf(value) : -1;
+    const isDisabled = (i: number) => {
+      const el = registeredItems.get(itemValues[i]);
+      return !el || (el as HTMLButtonElement).disabled;
+    };
     let newIndex: number;
 
     switch (event.key) {
       case 'ArrowRight':
       case 'ArrowDown':
         event.preventDefault();
-        newIndex = (currentIndex + 1) % itemValues.length;
+        newIndex = nextEnabledIndex(itemValues.length, currentIndex, 1, isDisabled);
         break;
       case 'ArrowLeft':
       case 'ArrowUp':
         event.preventDefault();
-        newIndex = currentIndex - 1 < 0 ? itemValues.length - 1 : currentIndex - 1;
+        newIndex = nextEnabledIndex(itemValues.length, currentIndex, -1, isDisabled);
         break;
       case 'Home':
         event.preventDefault();
-        newIndex = 0;
+        newIndex = edgeEnabledIndex(itemValues.length, 1, isDisabled);
         break;
       case 'End':
         event.preventDefault();
-        newIndex = itemValues.length - 1;
+        newIndex = edgeEnabledIndex(itemValues.length, -1, isDisabled);
         break;
       default:
         return;
     }
 
-    if (newIndex !== currentIndex && itemValues[newIndex]) {
+    if (newIndex !== currentIndex && newIndex >= 0 && itemValues[newIndex]) {
       segmentContext.selectItem(itemValues[newIndex]);
       const newItem = registeredItems.get(itemValues[newIndex]);
       newItem?.focus();

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

@@ -1,51 +1,11 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const segmentGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
-    tier: {
-        commit: {
-            base: string;
-            indicator: string;
-            item: string;
-        };
-        modify: {
-            base: string;
-            indicator: string;
-            item: string;
-        };
-    };
-    appearance: {
-        default: {};
-        text: {
-            base: string;
-            indicator: string;
-            item: string[];
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            item: string;
-        };
-        md: {
-            base: string;
-            item: string;
-        };
-        lg: {
-            base: string;
-            item: string;
-        };
-    };
-    fullWidth: {
-        true: {
-            base: string;
-            item: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-}> | undefined) => {
+export declare const segmentGroupVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    appearance?: "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;
@@ -53,8 +13,7 @@ export declare const segmentGroupVariants: (props?: import("../../utils/variants
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
     indicator: (props?: ({
         tier?: "commit" | "modify" | undefined;
@@ -63,8 +22,7 @@ export declare const segmentGroupVariants: (props?: import("../../utils/variants
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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?: ({
         tier?: "commit" | "modify" | undefined;
@@ -73,9 +31,10 @@ export declare const segmentGroupVariants: (props?: import("../../utils/variants
         fullWidth?: boolean | undefined;
         disabled?: boolean | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | 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;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type SegmentGroupVariants = VariantProps<typeof segmentGroupVariants>;
 /** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */

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

@@ -79,10 +79,11 @@ export const segmentGroupVariants = tv({
         appearance: {
             default: {},
             text: {
-                // Radius flattening (`rounded-none`) lives in compoundVariants
-                // below so it strips the tier-stage `rounded-{commit|modify}`
-                // cleanly — tv() only strips across stages, not within them.
-                base: 'bg-transparent p-0 gap-1',
+                // Radius flattening (`rounded-none`) and track-padding reset (`p-0`)
+                // live in compoundVariants below so they strip the tier-stage
+                // `rounded-{commit|modify}` and the size-stage `p-*` — those axes
+                // are declared after this one and would win the fold otherwise.
+                base: 'bg-transparent gap-1',
                 indicator: 'hidden',
                 item: [
                     'border-b-[1.5px] border-b-transparent',
@@ -124,12 +125,11 @@ export const segmentGroupVariants = tv({
         }
     },
     compoundVariants: [
-        // Text-appearance flattens the corner radius regardless of tier. This
-        // sits in compoundVariants so it strips the `rounded-{commit|modify}`
-        // emitted by the tier variant — tv() does not dedupe within a single
-        // variant stage, only across stages, so the override has to live one
-        // stage later.
-        { appearance: 'text', class: { base: 'rounded-none', item: 'rounded-none' } },
+        // Text-appearance 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,
         // but still WCAG 2.5.5 AA (≥ 24px tap height). For touch-first contexts
         // the `default` appearance should be used — text is primarily intended

package/dist/primitives/Select/Select.svelte

@@ -38,6 +38,7 @@
     mint = 'none',
     onValueChange,
     open = $bindable(false),
+    onOpenChange,
     usePortal = true,
     syncWidth = true,
     customTrigger,
@@ -101,7 +102,7 @@
   const labelId = $derived(label ? `${uid}-label` : undefined);
   const ff = useFormField(() => ({
     fieldId: uid,
-    hint: helper,
+    helper,
     error,
     required,
     disabled
@@ -235,12 +236,21 @@
     syncWidth: () => syncWidth
   });
 
+  // Single mutation point for internally-driven open changes, so
+  // `onOpenChange` fires exactly once per transition (and never when the
+  // consumer writes `bind:open` directly).
+  function setOpen(next: boolean) {
+    if (open === next) return;
+    open = next;
+    onOpenChange?.(next);
+  }
+
   function toggle() {
     if (disabled) return;
     // Pointer-driven open (trigger onclick). Mark modality so the open effect
     // doesn't pre-highlight the first row for a mouse/touch user.
     if (!open) openedViaKeyboard = false;
-    open = !open;
+    setOpen(!open);
     if (!open) activeIndex = -1;
   }
 
@@ -271,7 +281,7 @@
       dispatchValueChange?.(nextValue);
     }
     if (effectiveCloseOnSelect) {
-      open = false;
+      setOpen(false);
       activeIndex = -1;
       focusTrigger();
     }
@@ -297,7 +307,7 @@
   //                  explicitly intent to focus elsewhere)
   function dismissByEscape() {
     if (!closeOnEscape) return false;
-    open = false;
+    setOpen(false);
     activeIndex = -1;
     onEscape?.();
     return true;
@@ -319,7 +329,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else {
           activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
         }
@@ -328,7 +338,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else {
           activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
         }
@@ -338,7 +348,7 @@
         event.preventDefault();
         if (!open) {
           openedViaKeyboard = true;
-          open = true;
+          setOpen(true);
         } else if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
           selectOption(enabledOptions[activeIndex]);
         }
@@ -353,7 +363,7 @@
         // Tab leaves the widget — close (focus moves on via the default tab),
         // independent of closeOnEscape/closeOnClickOutside.
         if (open) {
-          open = false;
+          setOpen(false);
           activeIndex = -1;
         }
         break;
@@ -382,7 +392,7 @@
       !listboxRef.contains(target)
     ) {
       if (!closeOnClickOutside) return;
-      open = false;
+      setOpen(false);
       activeIndex = -1;
       onClickOutside?.();
     }
@@ -725,9 +735,9 @@
     >
       {error}
     </div>
-  {:else if ff.hintId}
+  {:else if ff.helperId}
     <div
-      id={ff.hintId}
+      id={ff.helperId}
       class={unstyled
         ? (slotClasses?.message ?? '')
         : styles.message({ class: slotClasses?.message })}

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

@@ -164,6 +164,13 @@ interface SelectBaseProps<T extends SelectValue = string> extends Omit<SelectVar
      * the Select wrapper). @default false
      */
     open?: boolean;
+    /**
+     * Fires when the listbox opens or closes from user interaction (trigger
+     * click, keyboard, selection, Escape, Tab-out, outside click). Receives the
+     * new open state — use it e.g. to lazy-load options on first open. Not
+     * called when the consumer writes `bind:open` directly.
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * When true, the listbox is rendered into the browser top layer via the native
      * `popover` API, so it cannot be clipped by `overflow: auto` ancestors. When