sv5ui 1.1.2 → 1.2.0

package/dist/RadioGroup/radio-group.variants.d.ts

@@ -52,6 +52,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -141,6 +159,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -230,6 +266,24 @@ export declare const radioGroupVariants: import("tailwind-variants").TVReturnTyp
             wrapper: string;
         };
     };
+    variant: {
+        list: string;
+        card: {
+            item: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            item: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
     orientation: {
         horizontal: {
             fieldset: string;
@@ -323,6 +377,24 @@ export declare const radioGroupDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                item: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                item: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         orientation: {
             horizontal: {
                 fieldset: string;
@@ -412,6 +484,24 @@ export declare const radioGroupDefaults: {
                 wrapper: string;
             };
         };
+        variant: {
+            list: string;
+            card: {
+                item: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                item: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
         orientation: {
             horizontal: {
                 fieldset: string;

package/dist/RadioGroup/radio-group.variants.js

@@ -15,10 +15,10 @@ export const radioGroupVariants = tv({
         ],
         indicator: [
             'flex items-center justify-center rounded-full',
-            'after:content-[""] after:block after:rounded-full after:bg-white'
+            'after:content-[""] after:block after:rounded-full after:bg-surface'
         ],
-        loadingIcon: 'shrink-0 animate-spin text-white',
-        wrapper: 'ms-2',
+        loadingIcon: 'shrink-0 animate-spin text-surface',
+        wrapper: '',
         label: 'block font-medium text-on-surface',
         description: 'text-on-surface-variant'
     },
@@ -75,6 +75,24 @@ export const radioGroupVariants = tv({
                 wrapper: 'text-base'
             }
         },
+        variant: {
+            list: '',
+            card: {
+                item: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                item: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
         orientation: {
             horizontal: {
                 fieldset: 'flex-row'
@@ -149,11 +167,62 @@ export const radioGroupVariants = tv({
             class: {
                 base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface focus-visible:outline-outline'
             }
-        }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { item: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { item: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { item: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { item: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { item: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { item: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { item: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { item: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { item: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { item: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { item: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { item: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { item: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { item: 'cursor-not-allowed' } }
     ],
     defaultVariants: {
         color: 'primary',
         size: 'md',
+        variant: 'list',
+        indicator: 'start',
         orientation: 'vertical'
     }
 });

package/dist/Select/Select.svelte

@@ -22,6 +22,7 @@
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         value = $bindable(),
         open = $bindable(false),
         onOpenChange,
@@ -102,11 +103,13 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
 
     // ---- ARIA ----
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const fid = formFieldContext.ariaId
-        return hasError ? `${fid}-error` : `${fid}-description ${fid}-help`
-    })
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
 
     // ---- Items lookup (O(1) via Map) ----
     const itemsMap = $derived(
@@ -329,7 +332,7 @@
     {value}
     onValueChange={(val) => (value = val)}
 >
-    <div class={rootClass}>
+    <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}
             <span class={leadingClass}>
                 {@render leadingSlot()}

package/dist/Select/Select.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { SelectProps } from './select.types.js';
 export type Props = SelectProps;
 import { Select } from 'bits-ui';
-declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open">;
+declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "value" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/Select/select.types.d.ts

@@ -86,6 +86,10 @@ type ContentProps = Pick<SelectContentPropsWithoutHTML, 'side' | 'sideOffset' |
  * @see https://bits-ui.com/docs/components/select
  */
 export interface SelectProps extends RootProps, ContentProps {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * The currently selected value. Supports two-way binding with `bind:value`.
      */