@widgetic/design-system 0.5.21 → 0.5.23

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>

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

@@ -24,7 +24,7 @@
 </script>
 
 <ScrollAreaPrimitive.Root bind:ref dir={$textDirection} {...restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+	<ScrollAreaPrimitive.Viewport class="h-full w-full" style="border-radius: inherit">
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}

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

@@ -5,8 +5,6 @@
 	import { cn } from "../../../utils.js";
 	import { useTextDirection } from "../../textDirection.js";
 
-	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
-	// alignment inside a menu of a right to left screen.
 	const textDirection = useTextDirection();
 
 	let {
@@ -27,7 +25,7 @@
 		{sideOffset}
 		dir={$textDirection}
 		class={cn(
-			"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 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in 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",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/select/select-item.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Select Option (component set 170:135, node 170:135). -->
 <script lang="ts" module>
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	export type SelectItemProps = WithoutChild<SelectPrimitive.ItemProps>;
 </script>
 
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
-		import { cn } from "../../../utils.js";
+	import IconCheck from "@tabler/icons-svelte/icons/check";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -21,7 +22,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"relative flex h-8 w-full cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[highlighted]:bg-accent data-[selected]:bg-brand-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -29,7 +30,7 @@
 	{#snippet children({ selected, highlighted })}
 		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if selected}
-				<Check class="size-4" />
+				<IconCheck class="size-4 stroke-[1.333]" aria-hidden="true" />
 			{/if}
 		</span>
 		{#if childrenProp}

package/dist/components/ui/select/select-scroll-down-button.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 		import { cn } from "../../../utils.js";
 
 	let {
@@ -19,5 +19,5 @@
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronDown class="size-4" />
+	<IconChevronDown class="size-4 stroke-[1.333]" aria-hidden="true" />
 </SelectPrimitive.ScrollDownButton>

package/dist/components/ui/select/select-scroll-up-button.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronUp from "lucide-svelte/icons/chevron-up";
+	import IconChevronUp from "@tabler/icons-svelte/icons/chevron-up";
 		import { cn } from "../../../utils.js";
 
 	let {
@@ -19,5 +19,5 @@
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronUp class="size-4" />
+	<IconChevronUp class="size-4 stroke-[1.333]" aria-hidden="true" />
 </SelectPrimitive.ScrollUpButton>

package/dist/components/ui/select/select-trigger.svelte

@@ -1,10 +1,11 @@
+<!-- Figma: Select (328:135) and Select Trigger (268:97). -->
 <script lang="ts" module>
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	export type SelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps>;
 </script>
 
 <script lang="ts">
-		import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -18,11 +19,11 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-start text-body 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-[placeholder]:text-muted-foreground aria-invalid:border-destructive [&>span]:line-clamp-1",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-4 opacity-50" />
+	<IconChevronDown class="size-4 shrink-0 stroke-[1.333] opacity-50" aria-hidden="true" />
 </SelectPrimitive.Trigger>

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

@@ -0,0 +1,2 @@
+import Root from "./skeleton.svelte";
+export { Root, Root as Skeleton };

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

@@ -0,0 +1,2 @@
+import Root from "./skeleton.svelte";
+export { Root, Root as Skeleton };

package/dist/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,24 @@
+<!-- Figma: Skeleton (component set 131:2, node 131:10). -->
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		pulse = "high",
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Figma Pulse: High (default) | Low (50% opacity). */
+		pulse?: "high" | "low";
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		"rounded-lg bg-muted motion-reduce:opacity-100 motion-safe:animate-pulse",
+		pulse === "low" && "opacity-50",
+		className
+	)}
+	aria-hidden="true"
+	{...restProps}
+></div>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Figma Pulse: High (default) | Low (50% opacity). */
+    pulse?: "high" | "low";
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/ui/slider/slider.svelte

@@ -1,14 +1,13 @@
+<!-- Figma: IC Slider (Editor); track input, range primary, 4px track / 16px thumb. -->
 <script lang="ts" module>
 	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 	import { useTextDirection } from "../../textDirection.js";
 
-	// The slider of the library is left to right unless it is told: on a right to left screen the smallest value is at the
-	// right end, like the rest of the screen, and the arrow keys follow.
 	const textDirection = useTextDirection();
 
 	let {
@@ -19,10 +18,6 @@
 	}: SliderProps = $props();
 </script>
 
-<!--
-Discriminated Unions + Destructing (required for bindable) do not
-get along, so we shut typescript up by casting `value` to `never`.
--->
 <SliderPrimitive.Root
 	bind:value={value as never}
 	bind:ref
@@ -31,13 +26,13 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ thumbs })}
-		<span class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
-			<SliderPrimitive.Range class="bg-primary absolute h-full" />
+		<span class="relative h-1 w-full grow overflow-hidden rounded-full bg-input">
+			<SliderPrimitive.Range class="absolute z-10 h-full rounded-full bg-primary" />
 		</span>
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="relative z-20 block size-4 rounded-full border-2 border-primary bg-background 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"
 			/>
 		{/each}
 	{/snippet}