@kayord/ui 2.0.3 → 2.0.4

package/dist/components/ui/button-group/button-group-separator.svelte

@@ -3,10 +3,16 @@
 	import type { ComponentProps } from "svelte";
 	import { Separator } from "../separator/index.js";
 
-	let { class: className, orientation = "vertical", ...restProps }: ComponentProps<typeof Separator> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
 </script>
 
 <Separator
+	bind:ref
 	data-slot="button-group-separator"
 	{orientation}
 	class={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)}

package/dist/components/ui/button-group/button-group-separator.svelte.d.ts

@@ -8,6 +8,6 @@ declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
     children?: import("svelte").Snippet<[]> | undefined;
     style?: import("bits-ui").StyleProperties | string | null | undefined;
     ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "">;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
 type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
 export default ButtonGroupSeparator;

package/dist/components/ui/button-group/button-group-text.svelte

@@ -1,33 +1,30 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		child,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 	} = $props();
 
-	const classes = $derived(
-		cn(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-			className
-		)
-	);
-
 	const mergedProps = $derived({
 		...restProps,
-		class: classes,
+		class: cn(
+			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+			className
+		),
 	});
 </script>
 
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<div {...mergedProps}>
+	<div bind:this={ref} {...mergedProps}>
 		{@render mergedProps.children?.()}
 	</div>
 {/if}

package/dist/components/ui/button-group/button-group-text.svelte.d.ts

@@ -1,10 +1,11 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     child?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
 };
-declare const ButtonGroupText: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ButtonGroupText: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ButtonGroupText = ReturnType<typeof ButtonGroupText>;
 export default ButtonGroupText;

package/dist/components/ui/button-group/button-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const buttonGroupVariants = tv({
+	export const buttonGroupVariants = tv({
 		base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 		variants: {
 			orientation: {
@@ -20,20 +20,22 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		orientation = "horizontal",
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		orientation?: ButtonGroupOrientation;
 	} = $props();
 </script>
 
 <div
+	bind:this={ref}
 	role="group"
 	data-slot="button-group"
 	data-orientation={orientation}

package/dist/components/ui/button-group/button-group.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: string;
         vertical: string;
@@ -16,10 +16,11 @@ declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
 export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     orientation?: ButtonGroupOrientation;
 };
-declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

package/dist/components/ui/empty/empty-content.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty-content"
 	class={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className)}
 	{...restProps}

package/dist/components/ui/empty/empty-content.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyContent: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const EmptyContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type EmptyContent = ReturnType<typeof EmptyContent>;
 export default EmptyContent;

package/dist/components/ui/empty/empty-description.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
 		"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",

package/dist/components/ui/empty/empty-description.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyDescription: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const EmptyDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type EmptyDescription = ReturnType<typeof EmptyDescription>;
 export default EmptyDescription;

package/dist/components/ui/empty/empty-header.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty-header"
 	class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
 	{...restProps}

package/dist/components/ui/empty/empty-header.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyHeader: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const EmptyHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type EmptyHeader = ReturnType<typeof EmptyHeader>;
 export default EmptyHeader;

package/dist/components/ui/empty/empty-media.svelte

@@ -18,18 +18,20 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		variant = "default",
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & { variant?: EmptyMediaVariant } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty-icon"
 	data-variant={variant}
 	class={cn(emptyMediaVariants({ variant }), className)}

package/dist/components/ui/empty/empty-media.svelte.d.ts

@@ -16,10 +16,11 @@ export declare const emptyMediaVariants: import("tailwind-variants").TVReturnTyp
     };
 }, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: EmptyMediaVariant;
 };
-declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type EmptyMedia = ReturnType<typeof EmptyMedia>;
 export default EmptyMedia;

package/dist/components/ui/empty/empty-title.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div data-slot="empty-title" class={cn("text-lg font-medium tracking-tight", className)} {...restProps}>
+<div bind:this={ref} data-slot="empty-title" class={cn("text-lg font-medium tracking-tight", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/empty/empty-title.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const EmptyTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const EmptyTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type EmptyTitle = ReturnType<typeof EmptyTitle>;
 export default EmptyTitle;

package/dist/components/ui/empty/empty.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="empty"
 	class={cn(
 		"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",

package/dist/components/ui/empty/empty.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const Empty: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const Empty: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type Empty = ReturnType<typeof Empty>;
 export default Empty;

package/dist/components/ui/field/field-content.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="field-content"
 	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
 	{...restProps}

package/dist/components/ui/field/field-content.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldContent: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const FieldContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type FieldContent = ReturnType<typeof FieldContent>;
 export default FieldContent;

package/dist/components/ui/field/field-description.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLParagraphElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
 <p
+	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
 		"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",

package/dist/components/ui/field/field-description.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldDescription: import("svelte").Component<HTMLAttributes<HTMLParagraphElement>, {}, "">;
+declare const FieldDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
 type FieldDescription = ReturnType<typeof FieldDescription>;
 export default FieldDescription;

package/dist/components/ui/field/field-error.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		errors,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		children?: Snippet;
 		errors?: { message?: string }[];
 	} = $props();
@@ -34,6 +35,7 @@
 
 {#if hasContent}
 	<div
+		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
 		class={cn("text-destructive text-sm font-normal", className)}

package/dist/components/ui/field/field-error.svelte.d.ts

@@ -1,11 +1,12 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     children?: Snippet;
     errors?: {
         message?: string;
     }[];
 };
-declare const FieldError: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const FieldError: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type FieldError = ReturnType<typeof FieldError>;
 export default FieldError;

package/dist/components/ui/field/field-group.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
 		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",

package/dist/components/ui/field/field-group.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldGroup: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const FieldGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type FieldGroup = ReturnType<typeof FieldGroup>;
 export default FieldGroup;

package/dist/components/ui/field/field-legend.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		variant = "legend",
 		children,
 		...restProps
-	}: HTMLAttributes<HTMLLegendElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
 		variant?: "legend" | "label";
 	} = $props();
 </script>
 
 <legend
+	bind:this={ref}
 	data-slot="field-legend"
 	data-variant={variant}
 	class={cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className)}

package/dist/components/ui/field/field-legend.svelte.d.ts

@@ -1,7 +1,8 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = HTMLAttributes<HTMLLegendElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
     variant?: "legend" | "label";
 };
-declare const FieldLegend: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const FieldLegend: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type FieldLegend = ReturnType<typeof FieldLegend>;
 export default FieldLegend;

package/dist/components/ui/field/field-separator.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Separator } from "../separator/index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		children?: Snippet;
 	} = $props();
 
@@ -16,6 +17,7 @@
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
 	class={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}

package/dist/components/ui/field/field-separator.svelte.d.ts

@@ -1,8 +1,9 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     children?: Snippet;
 };
-declare const FieldSeparator: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const FieldSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type FieldSeparator = ReturnType<typeof FieldSeparator>;
 export default FieldSeparator;

package/dist/components/ui/field/field-set.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLFieldsetAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLFieldsetAttributes = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
 </script>
 
 <fieldset
+	bind:this={ref}
 	data-slot="field-set"
 	class={cn(
 		"flex flex-col gap-6",

package/dist/components/ui/field/field-set.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLFieldsetAttributes } from "svelte/elements";
-declare const FieldSet: import("svelte").Component<HTMLFieldsetAttributes, {}, "">;
+declare const FieldSet: import("svelte").Component<WithElementRef<HTMLFieldsetAttributes>, {}, "ref">;
 type FieldSet = ReturnType<typeof FieldSet>;
 export default FieldSet;

package/dist/components/ui/field/field-title.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="field-title"
 	class={cn(
 		"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",

package/dist/components/ui/field/field-title.svelte.d.ts

@@ -1,4 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const FieldTitle: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const FieldTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type FieldTitle = ReturnType<typeof FieldTitle>;
 export default FieldTitle;

package/dist/components/ui/field/field.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const fieldVariants = tv({
+	export const fieldVariants = tv({
 		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
 		variants: {
 			orientation: {
@@ -27,20 +27,22 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		orientation = "vertical",
 		children,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		orientation?: FieldOrientation;
 	} = $props();
 </script>
 
 <div
+	bind:this={ref}
 	role="group"
 	data-slot="field"
 	data-orientation={orientation}