@signal9/era-ui 1.1.2

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { ScrollArea } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: ScrollArea.ThumbProps = $props();
+</script>
+
+<ScrollArea.Thumb
+	bind:ref
+	class={cn('rounded-(--era-rd-md) bg-divider hover:bg-muted', className)}
+	{...restProps}
+/>

package/dist/ui/scroll-area/scroll-area-thumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ScrollArea } from 'bits-ui';
+declare const ScrollAreaThumb: import("svelte").Component<ScrollArea.ThumbProps, {}, "ref">;
+type ScrollAreaThumb = ReturnType<typeof ScrollAreaThumb>;
+export default ScrollAreaThumb;

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { ScrollArea } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ScrollArea.ViewportProps = $props();
+</script>
+
+<ScrollArea.Viewport bind:ref class={cn('h-full w-full', className)} {...restProps} />

package/dist/ui/scroll-area/scroll-area-viewport.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ScrollArea } from 'bits-ui';
+declare const ScrollAreaViewport: import("svelte").Component<ScrollArea.ViewportProps, {}, "ref">;
+type ScrollAreaViewport = ReturnType<typeof ScrollAreaViewport>;
+export default ScrollAreaViewport;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { ScrollArea } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		type = 'scroll' as const,
+		class: className,
+		...restProps
+	}: ScrollArea.RootProps = $props();
+</script>
+
+<ScrollArea.Root
+	bind:ref
+	{type}
+	class={cn('relative overflow-hidden rounded-(--era-rd-lg)', className)}
+	{...restProps}
+/>

package/dist/ui/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ScrollArea } from 'bits-ui';
+declare const ScrollArea: import("svelte").Component<ScrollArea.RootProps, {}, "ref">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

package/dist/ui/select/index.d.ts

@@ -0,0 +1,6 @@
+import { Select } from 'bits-ui';
+export declare const Root: typeof Select.Root;
+export { default as Trigger } from './select-trigger.svelte';
+export { default as Value } from './select-value.svelte';
+export { default as Content } from './select-content.svelte';
+export { default as Item } from './select-item.svelte';

package/dist/ui/select/index.js

@@ -0,0 +1,6 @@
+import { Select } from 'bits-ui';
+export const Root = Select.Root;
+export { default as Trigger } from './select-trigger.svelte';
+export { default as Value } from './select-value.svelte';
+export { default as Content } from './select-content.svelte';
+export { default as Item } from './select-item.svelte';

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		sideOffset = 0,
+		...restProps
+	}: PartProps<Select.ContentProps> = $props();
+</script>
+
+<Select.Content
+	bind:ref
+	align="start"
+	class={cn(
+		'z-50 w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		className
+	)}
+	{sideOffset}
+	{...restProps}
+>
+	{@render children?.()}
+</Select.Content>

package/dist/ui/select/select-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Select } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const SelectContent: import("svelte").Component<PartProps<Select.ContentProps>, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	// Pattern A pass-through: children (incl. bits-ui's typed { selected,
+	// highlighted } snippet params) flow through restProps untouched.
+	let { ref = $bindable(null), class: className, ...restProps }: Select.ItemProps = $props();
+</script>
+
+<Select.Item
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		className
+	)}
+	{...restProps}
+/>

package/dist/ui/select/select-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select } from 'bits-ui';
+declare const SelectItem: import("svelte").Component<Select.ItemProps, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Select.TriggerProps> = $props();
+</script>
+
+<Select.Trigger
+	bind:ref
+	class={cn(
+		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-(--era-h-xs) text-muted" />
+</Select.Trigger>

package/dist/ui/select/select-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Select } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const SelectTrigger: import("svelte").Component<PartProps<Select.TriggerProps>, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

package/dist/ui/select/select-value.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Select, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Chip } from '../chip';
+	import { cn } from '../../utils/index.js';
+
+	// bits-ui's Select.Value exposes `selection` (discriminated single/multiple),
+	// `placeholder`, and `disabled` via its children snippet. We recover that
+	// shape from Select.ValueProps' children parameter since bits-ui doesn't
+	// re-export SelectValueSnippetProps at the package root.
+	type SnippetProps =
+		NonNullable<Select.ValueProps['children']> extends Snippet<[infer P]> ? P : never;
+
+	// Aliased so the inner `{#snippet children(...)}` below doesn't shadow it.
+	let {
+		ref = $bindable(null),
+		placeholder,
+		class: className,
+		children: userChildren,
+		...restProps
+	}: WithoutChildrenOrChild<Select.ValueProps> & {
+		children?: Snippet<[SnippetProps]>;
+	} = $props();
+</script>
+
+<Select.Value
+	bind:ref
+	class={cn(
+		'flex min-w-0 flex-1 items-center overflow-hidden text-body leading-none text-fg',
+		className
+	)}
+	{placeholder}
+	{...restProps}
+>
+	{#snippet children(snippet)}
+		{@const sel = snippet.selection}
+		{#if userChildren}
+			{@render userChildren(snippet)}
+		{:else if sel.type === 'multiple' && sel.selected && sel.selected.length > 0}
+			<!--
+				Concentric identity: a chip (h-xxs) nested in the trigger (h-md)
+				wants its left edge at xxs-inset-md from the trigger-left, not at
+				the trigger's own inset-md. The negative margin shifts the chip
+				stack by exactly inset-md − xxs-inset-md = inset-xxs so the first
+				chip's *text* lands at inset-md from trigger-left (its own pl adds
+				inset-xxs back). Don't pair this with a pl on the same element —
+				they cancel and the first chip regresses to inset-md + inset-xxs.
+			-->
+			<div
+				class="-ml-(--era-inset-xxs) flex min-w-0 flex-wrap items-center gap-(--era-xxs-inset-md)"
+			>
+				{#each sel.selected as item (item.value)}
+					<Chip
+						ondismiss={snippet.disabled
+							? undefined
+							: () =>
+									sel.setValue(
+										sel.selected.filter((s) => s.value !== item.value).map((s) => s.value)
+									)}
+					>
+						{item.label}
+					</Chip>
+				{/each}
+			</div>
+		{:else if sel.type === 'single' && sel.selected}
+			<span class="truncate">{sel.selected.label}</span>
+		{:else}
+			<span class="truncate text-muted">{snippet.placeholder}</span>
+		{/if}
+	{/snippet}
+</Select.Value>

package/dist/ui/select/select-value.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Select, type WithoutChildrenOrChild } from 'bits-ui';
+type SnippetProps = NonNullable<Select.ValueProps['children']> extends Snippet<[infer P]> ? P : never;
+type $$ComponentProps = WithoutChildrenOrChild<Select.ValueProps> & {
+    children?: Snippet<[SnippetProps]>;
+};
+declare const SelectValue: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectValue = ReturnType<typeof SelectValue>;
+export default SelectValue;

package/dist/ui/separator/index.d.ts

@@ -0,0 +1 @@
+export { default as Separator } from './separator.svelte';

package/dist/ui/separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './separator.svelte';

package/dist/ui/separator/separator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Separator } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		variant = 'line',
+		orientation,
+		class: className,
+		...restProps
+	}: Separator.RootProps & {
+		/** Use `slant` for inline dividers in breadcrumbs, titles, and compact metadata. */
+		variant?: 'line' | 'slant';
+	} = $props();
+
+	const resolvedOrientation = $derived(
+		variant === 'slant' ? 'vertical' : (orientation ?? 'horizontal')
+	);
+	const variantClass = $derived(
+		variant === 'slant'
+			? 'mx-[0.45em] inline-block h-[0.9em] w-[2px] shrink-0 translate-y-[0.08em] rotate-[18deg] rounded-full bg-muted/80 align-middle'
+			: 'bg-3 data-[orientation=horizontal]:mx-(--era-gap) data-[orientation=horizontal]:h-px data-[orientation=vertical]:my-(--era-gap) data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch'
+	);
+</script>
+
+<Separator.Root
+	bind:ref
+	orientation={resolvedOrientation}
+	class={cn(variantClass, className)}
+	{...restProps}
+/>

package/dist/ui/separator/separator.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Separator } from 'bits-ui';
+type $$ComponentProps = Separator.RootProps & {
+    /** Use `slant` for inline dividers in breadcrumbs, titles, and compact metadata. */
+    variant?: 'line' | 'slant';
+};
+declare const Separator: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/ui/sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { Root, Portal, Trigger, Title, Description, Close } from '../dialog/index.js';
+export { default as Content, sheetVariants } from './sheet-content.svelte';

package/dist/ui/sheet/index.js

@@ -0,0 +1,5 @@
+// Sheet is a Dialog anchored to a screen edge. Root/Trigger/Title/Description/
+// Close are the Dialog wrappers verbatim (same behavior); only Content differs
+// (edge-positioned, with a `side` prop).
+export { Root, Portal, Trigger, Title, Description, Close } from '../dialog/index.js';
+export { default as Content, sheetVariants } from './sheet-content.svelte';

package/dist/ui/sheet/sheet-content.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { cn, tv, type PartProps } from '../../utils/index.js';
+
+	// A Sheet is a Dialog pinned to a screen edge — the idiomatic mobile drawer
+	// (bottom for controls, left/right for navigation). Positioning + which
+	// corners round follow the `side`; everything else is the dialog surface.
+	export const sheetVariants = tv({
+		base: 'fixed z-50 flex flex-col gap-(--era-gap) overflow-y-auto bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+		variants: {
+			side: {
+				top: 'inset-x-0 top-0 max-h-[85dvh] rounded-b-(--era-rd-lg)',
+				bottom: 'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--era-rd-lg)',
+				left: 'inset-y-0 left-0 w-[min(20rem,85vw)] rounded-r-(--era-rd-lg)',
+				right: 'inset-y-0 right-0 w-[min(20rem,85vw)] rounded-l-(--era-rd-lg)'
+			}
+		},
+		defaultVariants: { side: 'bottom' }
+	});
+</script>
+
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		side = 'bottom',
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Dialog.ContentProps> & {
+		/** Screen edge the sheet is anchored to. */
+		side?: 'top' | 'right' | 'bottom' | 'left';
+	} = $props();
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<Dialog.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+		{@render children?.()}
+	</Dialog.Content>
+</Dialog.Portal>

package/dist/ui/sheet/sheet-content.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type PartProps } from '../../utils/index.js';
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "fixed z-50 flex flex-col gap-(--era-gap) overflow-y-auto bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur", {
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "fixed z-50 flex flex-col gap-(--era-gap) overflow-y-auto bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur", unknown, unknown, undefined>>;
+import { Dialog } from 'bits-ui';
+type $$ComponentProps = PartProps<Dialog.ContentProps> & {
+    /** Screen edge the sheet is anchored to. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

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

@@ -0,0 +1 @@
+export { default as Skeleton } from './skeleton.svelte';

package/dist/ui/skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from './skeleton.svelte';

package/dist/ui/skeleton/skeleton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { cn, tv } from '../../utils/index.js';
+
+	export const skeletonVariants = tv({
+		base: 'animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)',
+		variants: {
+			variant: {
+				line: 'h-(--era-text) w-full rounded-(--era-rd-md)',
+				circle: 'size-(--era-h-lg) rounded-full',
+				block: 'h-24 w-full rounded-(--era-rd-md)'
+			}
+		},
+		defaultVariants: { variant: 'line' }
+	});
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		variant = 'line',
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		variant?: 'line' | 'circle' | 'block';
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(skeletonVariants({ variant }), className)} {...restProps}></div>
+
+<style>
+	@keyframes skeleton-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+</style>

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

@@ -0,0 +1,27 @@
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: string;
+        circle: string;
+        block: string;
+    };
+}, undefined, "animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)", {
+    variant: {
+        line: string;
+        circle: string;
+        block: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: string;
+        circle: string;
+        block: string;
+    };
+}, undefined, "animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)", unknown, unknown, undefined>>;
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    variant?: 'line' | 'circle' | 'block';
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/ui/slider/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './slider-root.svelte';
+export { default as Range } from './slider-range.svelte';
+export { default as Thumb } from './slider-thumb.svelte';
+export { default as Tick } from './slider-tick.svelte';
+export { default as TickLabel } from './slider-tick-label.svelte';
+export { default as ThumbLabel } from './slider-thumb-label.svelte';

package/dist/ui/slider/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './slider-root.svelte';
+export { default as Range } from './slider-range.svelte';
+export { default as Thumb } from './slider-thumb.svelte';
+export { default as Tick } from './slider-tick.svelte';
+export { default as TickLabel } from './slider-tick-label.svelte';
+export { default as ThumbLabel } from './slider-thumb-label.svelte';

package/dist/ui/slider/slider-range.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		trackClass,
+		progress,
+		...restProps
+	}: Slider.RangeProps & {
+		trackClass?: string;
+		/**
+		 * Optional secondary fill (0–1) painted underneath the active range —
+		 * e.g. buffered fraction on a media seek bar. Clamped to [0, 1] and
+		 * rendered with reduced opacity so the active range stays dominant.
+		 */
+		progress?: number;
+	} = $props();
+
+	const progressPct = $derived(
+		typeof progress === 'number' ? Math.max(0, Math.min(1, progress)) * 100 : null
+	);
+</script>
+
+<span
+	class={cn(
+		'relative h-[calc(var(--era-sp)/2)] w-full grow cursor-pointer overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		trackClass
+	)}
+>
+	{#if progressPct !== null}
+		<span
+			aria-hidden="true"
+			class="pointer-events-none absolute inset-y-0 left-0 bg-fg/30"
+			style="width: {progressPct}%"
+		></span>
+	{/if}
+	<Slider.Range bind:ref class={cn('absolute h-full bg-fg', className)} {...restProps} />
+</span>

package/dist/ui/slider/slider-range.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Slider } from 'bits-ui';
+type $$ComponentProps = Slider.RangeProps & {
+    trackClass?: string;
+    /**
+     * Optional secondary fill (0–1) painted underneath the active range —
+     * e.g. buffered fraction on a media seek bar. Clamped to [0, 1] and
+     * rendered with reduced opacity so the active range stays dominant.
+     */
+    progress?: number;
+};
+declare const SliderRange: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SliderRange = ReturnType<typeof SliderRange>;
+export default SliderRange;

package/dist/ui/slider/slider-root.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(0),
+		class: className,
+		...restProps
+	}: Slider.RootProps = $props();
+
+	// Slider.RootProps is a discriminated union (single vs. multiple) whose
+	// `value` types disagree (number vs. number[]). Spreading rest into
+	// Slider.Root then collides with the bindable, producing
+	// "union too complex to represent". Cast escapes the typecheck; runtime
+	// behavior is identical because bits-ui handles both branches uniformly.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const restPropsAsAny = $derived(restProps as any);
+</script>
+
+<Slider.Root
+	bind:ref
+	bind:value
+	class={cn(
+		'relative flex w-full touch-none items-center select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className
+	)}
+	{...restPropsAsAny}
+/>

package/dist/ui/slider/slider-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider } from 'bits-ui';
+declare const SliderRoot: import("svelte").Component<Slider.RootProps, {}, "value" | "ref">;
+type SliderRoot = ReturnType<typeof SliderRoot>;
+export default SliderRoot;

package/dist/ui/slider/slider-thumb-label.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Slider.ThumbLabelProps = $props();
+</script>
+
+<Slider.ThumbLabel
+	bind:ref
+	class={cn('text-body text-muted data-[active]:text-fg', className)}
+	{...restProps}
+/>

package/dist/ui/slider/slider-thumb-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider } from 'bits-ui';
+declare const SliderThumbLabel: import("svelte").Component<Slider.ThumbLabelProps, {}, "ref">;
+type SliderThumbLabel = ReturnType<typeof SliderThumbLabel>;
+export default SliderThumbLabel;

package/dist/ui/slider/slider-thumb.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Slider.ThumbProps = $props();
+</script>
+
+<Slider.Thumb
+	bind:ref
+	class={cn(
+		"relative block size-(--era-h-xs) cursor-pointer rounded-(--era-rd-xs) bg-fg shadow-(--era-shadow) transition-transform duration-(--era-duration) will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
+		className
+	)}
+	{...restProps}
+/>

package/dist/ui/slider/slider-thumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider } from 'bits-ui';
+declare const SliderThumb: import("svelte").Component<Slider.ThumbProps, {}, "ref">;
+type SliderThumb = ReturnType<typeof SliderThumb>;
+export default SliderThumb;

package/dist/ui/slider/slider-tick-label.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Slider.TickLabelProps = $props();
+</script>
+
+<Slider.TickLabel
+	bind:ref
+	class={cn('text-body text-muted data-[bounded]:text-fg', className)}
+	{...restProps}
+/>

package/dist/ui/slider/slider-tick-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider } from 'bits-ui';
+declare const SliderTickLabel: import("svelte").Component<Slider.TickLabelProps, {}, "ref">;
+type SliderTickLabel = ReturnType<typeof SliderTickLabel>;
+export default SliderTickLabel;

package/dist/ui/slider/slider-tick.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Slider } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Slider.TickProps = $props();
+</script>
+
+<Slider.Tick
+	bind:ref
+	class={cn(
+		'h-[calc(var(--era-sp)/2)] w-px bg-divider-faded data-[bounded]:bg-(--era-surface-bg-elevated)',
+		className
+	)}
+	{...restProps}
+/>