@widgetic/design-system 0.5.22 → 0.5.23

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -22,7 +22,7 @@
 	bind:ref
 	dir={$textDirection}
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
+		"bg-popover text-popover-foreground border-border z-50 min-w-[8rem] rounded-xl border p-1 focus:outline-hidden",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -17,12 +17,12 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		inset && "ps-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ms-auto rtl:-scale-x-100" />
+	<IconChevronRight class="ms-auto stroke-[1.333] rtl:-scale-x-100" />
 </DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/field/field-ids.d.ts

@@ -0,0 +1,7 @@
+export type FieldIds = {
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+};
+export declare function createFieldIds(baseId: string): FieldIds;
+export declare function fieldDescribedBy(hasDescription: boolean, hasError: boolean, ids: FieldIds): string | undefined;

package/dist/components/ui/field/field-ids.js

@@ -0,0 +1,15 @@
+export function createFieldIds(baseId) {
+    return {
+        controlId: `${baseId}-control`,
+        descriptionId: `${baseId}-description`,
+        errorId: `${baseId}-error`,
+    };
+}
+export function fieldDescribedBy(hasDescription, hasError, ids) {
+    const parts = [];
+    if (hasDescription)
+        parts.push(ids.descriptionId);
+    if (hasError)
+        parts.push(ids.errorId);
+    return parts.length > 0 ? parts.join(" ") : undefined;
+}

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

@@ -0,0 +1,62 @@
+<!-- Figma: Field (component set 105:27, node 105:2). -->
+<script lang="ts" module>
+	let fieldAutoId = 0;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { Label } from "../label/index.js";
+	import { createFieldIds, fieldDescribedBy } from "./field-ids.js";
+
+	let {
+		class: className,
+		label,
+		description = undefined,
+		error = undefined,
+		required = false,
+		id: idProp = undefined,
+		control,
+	}: {
+		class?: string;
+		label: string;
+		description?: string;
+		error?: string;
+		required?: boolean;
+		id?: string;
+		control: Snippet<
+			[
+				{
+					id: string;
+					describedBy: string | undefined;
+					invalid: boolean;
+					"aria-describedby": string | undefined;
+					"aria-invalid": boolean;
+				},
+			]
+		>;
+	} = $props();
+
+	const resolvedId = idProp ?? `field-${++fieldAutoId}`;
+	const ids = createFieldIds(resolvedId);
+	const invalid = $derived(Boolean(error));
+	const describedBy = $derived(fieldDescribedBy(Boolean(description), invalid, ids));
+</script>
+
+<div class={cn("flex w-full flex-col gap-1.5", className)}>
+	<Label for={ids.controlId} class="text-body-medium">
+		{label}{#if required}<span class="text-destructive" aria-hidden="true"> *</span>{/if}
+	</Label>
+	{@render control({
+		id: ids.controlId,
+		describedBy,
+		invalid,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid,
+	})}
+	{#if error}
+		<p id={ids.errorId} class="text-caption text-destructive" role="alert">{error}</p>
+	{:else if description}
+		<p id={ids.descriptionId} class="text-caption text-muted-foreground">{description}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    id?: string;
+    control: Snippet<[
+        {
+            id: string;
+            describedBy: string | undefined;
+            invalid: boolean;
+            "aria-describedby": string | undefined;
+            "aria-invalid": boolean;
+        }
+    ]>;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/ui/field/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./field.svelte";
+export { createFieldIds, fieldDescribedBy, type FieldIds } from "./field-ids.js";
+export { Root, Root as Field };

package/dist/components/ui/field/index.js

@@ -0,0 +1,3 @@
+import Root from "./field.svelte";
+export { createFieldIds, fieldDescribedBy } from "./field-ids.js";
+export { Root, Root as Field };

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -26,7 +26,7 @@
 		{sideOffset}
 		dir={$textDirection}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground border-border z-50 mt-3 w-64 rounded-xl border p-4 outline-hidden",
 			className
 		)}
 		{...restProps}

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

@@ -0,0 +1,72 @@
+<!--
+	Figma: Icon Button (component set 37:3, page Icon Button)
+	With bits-ui triggers, use `{#snippet child({ props })}` and spread `props` onto this button.
+-->
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { VariantProps } from "tailwind-variants";
+
+	export const iconButtonVariants = tv({
+		base: "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		variants: {
+			variant: {
+				ghost:
+					"rounded-lg text-foreground hover:bg-accent hover:text-foreground",
+				secondary:
+					"rounded-lg bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground",
+				outline:
+					"rounded-lg border border-input bg-background text-foreground hover:bg-accent hover:text-foreground",
+				primary:
+					"rounded-full bg-primary text-primary-foreground hover:bg-primary/90",
+				accent:
+					"rounded-full bg-brand text-brand-foreground hover:bg-brand/90",
+			},
+			size: {
+				default: "size-8",
+				sm: "size-7",
+			},
+		},
+		defaultVariants: {
+			variant: "ghost",
+			size: "default",
+		},
+	});
+
+	export type IconButtonVariant = VariantProps<typeof iconButtonVariants>["variant"];
+	export type IconButtonSize = VariantProps<typeof iconButtonVariants>["size"];
+
+	export type IconButtonProps = WithElementRef<HTMLButtonAttributes> & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		variant?: IconButtonVariant;
+		size?: IconButtonSize;
+		/** Required for accessibility (aria-label). */
+		label: string;
+	};
+</script>
+
+<script lang="ts">
+	import { cn, tv } from "../../../utils.js";
+
+	let {
+		class: className,
+		variant = "ghost",
+		size = "default",
+		label,
+		ref = $bindable(null),
+		type = "button",
+		children,
+		...restProps
+	}: IconButtonProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	type={type}
+	aria-label={label}
+	class={cn(iconButtonVariants({ variant, size, className }))}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

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

@@ -0,0 +1,90 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { VariantProps } from "tailwind-variants";
+export declare const iconButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        ghost: string;
+        secondary: string;
+        outline: string;
+        primary: string;
+        accent: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        variant?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    variant: {
+        ghost: string;
+        secondary: string;
+        outline: string;
+        primary: string;
+        accent: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        ghost: string;
+        secondary: string;
+        outline: string;
+        primary: string;
+        accent: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
+    variant: {
+        ghost: string;
+        secondary: string;
+        outline: string;
+        primary: string;
+        accent: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, {
+    variant: {
+        ghost: string;
+        secondary: string;
+        outline: string;
+        primary: string;
+        accent: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type IconButtonVariant = VariantProps<typeof iconButtonVariants>["variant"];
+export type IconButtonSize = VariantProps<typeof iconButtonVariants>["size"];
+export type IconButtonProps = WithElementRef<HTMLButtonAttributes> & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    /** Required for accessibility (aria-label). */
+    label: string;
+};
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "ref">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/ui/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type IconButtonProps, type IconButtonSize, type IconButtonVariant, iconButtonVariants } from "./icon-button.svelte";
+export { Root, Root as IconButton, iconButtonVariants, type IconButtonProps, type IconButtonSize, type IconButtonVariant, };

package/dist/components/ui/icon-button/index.js

@@ -0,0 +1,4 @@
+import Root, { iconButtonVariants, } from "./icon-button.svelte";
+export { Root, 
+//
+Root as IconButton, iconButtonVariants, };

package/dist/components/ui/input/index.d.ts

@@ -1,2 +1,3 @@
 import Root from "./input.svelte";
+export type { InputProps, InputVariant } from "./input.svelte";
 export { Root, Root as Input, };

package/dist/components/ui/input/input.svelte

@@ -1,17 +1,23 @@
+<!-- Figma: Input (component set 43:3, node 43:2). -->
 <script lang="ts" module>
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+
+	export type InputVariant = "outline" | "soft";
 
-	export type InputProps = WithElementRef<HTMLInputAttributes>;
+	export type InputProps = WithElementRef<HTMLInputAttributes> & {
+		variant?: InputVariant;
+	};
 </script>
 
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
+		variant = "outline",
 		...restProps
 	}: InputProps = $props();
 </script>
@@ -19,7 +25,8 @@
 <input
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-9 w-full min-w-0 rounded-lg border border-input bg-background px-3 py-2 text-body text-foreground transition-colors duration-fast file:border-0 file:bg-transparent file:text-body file:font-medium placeholder:text-muted-foreground hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
+		variant === "soft" && "border-transparent bg-accent hover:bg-accent-hover",
 		className
 	)}
 	bind:value

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

@@ -1,6 +1,9 @@
-export type InputProps = WithElementRef<HTMLInputAttributes>;
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { WithElementRef } from "bits-ui";
+export type InputVariant = "outline" | "soft";
+export type InputProps = WithElementRef<HTMLInputAttributes> & {
+    variant?: InputVariant;
+};
 declare const Input: import("svelte").Component<InputProps, {}, "ref" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-otp/input-otp-separator.svelte

@@ -6,7 +6,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { WithElementRef } from "bits-ui";
-	import Dot from "lucide-svelte/icons/dot";
+	import IconMinus from "@tabler/icons-svelte/icons/minus";
 
 	let {
 		ref = $bindable(null),
@@ -19,6 +19,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<Dot />
+		<IconMinus class="size-4 stroke-[1.333] text-muted-foreground" aria-hidden="true" />
 	{/if}
 </div>

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-		import type { ComponentProps } from "svelte";
+	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -19,8 +19,9 @@
 	{cell}
 	bind:ref
 	class={cn(
-		"border-input relative flex h-10 w-10 items-center justify-center border-y border-e text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
-		cell.isActive && "ring-ring ring-offset-background z-10 ring-2",
+		"relative flex h-9 w-9 items-center justify-center rounded-lg border border-input bg-background text-body transition-colors duration-fast first:rounded-s-lg last:rounded-e-lg",
+		cell.isActive &&
+			"z-10 ring-2 ring-ring ring-offset-2 ring-offset-background outline-hidden",
 		className
 	)}
 	{...restProps}
@@ -28,7 +29,7 @@
 	{cell.char}
 	{#if cell.hasFakeCaret}
 		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+			<div class="animate-caret-blink h-4 w-px bg-foreground duration-1000"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>

package/dist/components/ui/input-otp/input-otp-slot.svelte.d.ts

@@ -3,7 +3,7 @@ export type InputOtpSlotProps = ComponentProps<typeof InputOTPPrimitive.Cell>;
 import type { ComponentProps } from "svelte";
 declare const InputOtpSlot: import("svelte").Component<Omit<{
     cell: import("bits-ui").PinInputCell;
-}, "children" | "child"> & {
+}, "child" | "children"> & {
     child?: import("svelte").Snippet<[{
         props: Record<string, unknown>;
     }]> | undefined;

package/dist/components/ui/input-otp/input-otp.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-		import type { ComponentProps } from "svelte";
+	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/label/label.svelte

@@ -1,10 +1,11 @@
+<!-- Figma: Field label (Field 105:27 uses Label/Default). -->
 <script lang="ts" module>
 	import { Label as LabelPrimitive } from "bits-ui";
 	export type LabelProps = LabelPrimitive.RootProps;
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +17,7 @@
 <LabelPrimitive.Root
 	bind:ref
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		"text-label text-foreground peer-disabled:pointer-events-none peer-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -26,7 +26,7 @@
 		{align}
 		dir={$textDirection}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-xl border p-4 outline-hidden",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/progress/progress.svelte

@@ -1,29 +1,43 @@
+<!-- Figma: Progress Bar (component set 270:695, node 270:695). -->
 <script lang="ts" module>
 	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps>;
+	export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps> & {
+		tone?: "default" | "destructive";
+	};
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		max = 100,
 		value,
+		tone = "default",
 		...restProps
 	}: ProgressProps = $props();
+
+	const percent = $derived.by(() => {
+		const maxValue = max ?? 100;
+		if (maxValue <= 0) return 0;
+		const raw = ((value ?? 0) / maxValue) * 100;
+		return Math.min(100, Math.max(0, raw));
+	});
 </script>
 
 <ProgressPrimitive.Root
 	bind:ref
-	class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+	class={cn("relative h-1 w-full overflow-hidden rounded-full bg-muted", className)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
-		class="bg-primary h-full w-full flex-1 -translate-x-(--progress-remaining) transition-all rtl:translate-x-(--progress-remaining)"
-		style={`--progress-remaining: ${100 - (100 * (value ?? 0)) / (max ?? 1)}%`}
+		class={cn(
+			"absolute inset-y-0 start-0 transition-[width] duration-base ease-standard motion-reduce:transition-none",
+			tone === "destructive" ? "bg-destructive" : "bg-primary"
+		)}
+		style={`width: ${percent}%`}
 	></div>
 </ProgressPrimitive.Root>

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

@@ -1,5 +1,7 @@
 import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps>;
-declare const Progress: import("svelte").Component<Omit<Omit<ProgressPrimitive.RootProps, "child">, "children">, {}, "ref">;
+export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps> & {
+    tone?: "default" | "destructive";
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "ref">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -1,10 +1,10 @@
+<!-- Figma: Radio (component set 170:96, node 170:96). -->
 <script lang="ts" module>
 	import { RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type RadioGroupItemProps = WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps>;
 </script>
 
 <script lang="ts">
-		import Circle from "lucide-svelte/icons/circle";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -17,15 +17,15 @@
 <RadioGroupPrimitive.Item
 	bind:ref
 	class={cn(
-		"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"aspect-square size-4 shrink-0 rounded-full border border-input bg-background text-primary transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:border-primary",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div class="flex items-center justify-center">
+		<div class="flex size-full items-center justify-center">
 			{#if checked}
-				<Circle class="size-2.5 fill-current text-current" />
+				<div class="size-2 rounded-full bg-primary" aria-hidden="true"></div>
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -15,6 +15,6 @@
 
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn("text-caption text-muted-foreground w-9 rounded-lg font-normal", className)}
 	{...restProps}
 />

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4 rtl:-scale-x-100" />
+	<IconChevronRight class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <RangeCalendarPrimitive.NextButton

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import IconChevronLeft from "@tabler/icons-svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4 rtl:-scale-x-100" />
+	<IconChevronLeft class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <RangeCalendarPrimitive.PrevButton

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -28,6 +28,9 @@
 >
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
-		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+		class={cn(
+			"bg-muted-foreground/30 hover:bg-muted-foreground/50 relative rounded-full transition-colors duration-fast",
+			orientation === "vertical" && "flex-1"
+		)}
 	/>
 </ScrollAreaPrimitive.Scrollbar>