@signal9/era-ui 1.1.2

package/dist/ui/popover/popover-close.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Popover, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Popover.CloseProps> &
+		Omit<ButtonVariants, 'active'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Popover.Close {...restProps}>
+	{#snippet child({ props })}
+		<Button bind:ref {...props} {tone} {size} {variant} {icon} class={className}>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Popover.Close>

package/dist/ui/popover/popover-close.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Popover, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Popover.CloseProps> & Omit<ButtonVariants, 'active'> & {
+    children?: Snippet;
+};
+declare const PopoverClose: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;

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

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

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

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

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Popover, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		active,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<Popover.TriggerProps> &
+		ButtonVariants & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<Popover.Trigger {...restProps}>
+	{#snippet child({ props })}
+		<Button
+			bind:ref
+			{...props}
+			{tone}
+			{size}
+			{variant}
+			{icon}
+			{active}
+			class={cn(
+				'data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+				className
+			)}
+		>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Popover.Trigger>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { Popover, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<Popover.TriggerProps> & ButtonVariants & {
+    children?: Snippet;
+};
+declare const PopoverTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

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

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

package/dist/ui/progress/index.js

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

package/dist/ui/progress/progress.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Progress } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = 0,
+		min = 0,
+		max = 100,
+		class: className,
+		...restProps
+	}: Progress.RootProps = $props();
+
+	let percentage = $derived(value != null ? ((value - min) / (max - min)) * 100 : 0);
+</script>
+
+<Progress.Root
+	bind:ref
+	{value}
+	{min}
+	{max}
+	class={cn(
+		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		className
+	)}
+	{...restProps}
+>
+	{#if value != null}
+		<div
+			class="h-full w-full bg-fg transition-transform duration-(--era-duration) ease-(--era-ease)"
+			style="transform: translateX(-{100 - percentage}%)"
+		></div>
+	{:else}
+		<div class="h-full w-1/3 animate-[indeterminate_1.5s_ease-in-out_infinite] bg-fg"></div>
+	{/if}
+</Progress.Root>
+
+<style>
+	@keyframes indeterminate {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(400%);
+		}
+	}
+</style>

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

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

package/dist/ui/provider/axes.d.ts

@@ -0,0 +1,74 @@
+export interface AxisLevel {
+    /** The value written to the data-* attribute. */
+    value: string;
+    /** Display label for pickers. */
+    label: string;
+    /** Optional one-line description of the level. */
+    description?: string;
+}
+export interface AxisMeta {
+    /** Human label for the axis itself (e.g. "Density"). */
+    label: string;
+    /** The data-* attribute this axis drives. */
+    attr: `data-${string}`;
+    /** Persistence / state key (the docs site stores under `t-<key>`). */
+    key: string;
+    /** Default level value. */
+    default: string;
+    /** Must be set on <html> so portalled content inherits it. */
+    onHtml: boolean;
+    /** Selectable levels, in scale order. */
+    levels: readonly AxisLevel[];
+}
+export declare const axisRegistry: {
+    readonly mode: {
+        readonly label: "Density";
+        readonly attr: "data-mode";
+        readonly key: "mode";
+        readonly default: "touch" | "dense" | "balanced" | "spacious";
+        readonly onHtml: true;
+        readonly levels: AxisLevel[];
+    };
+    readonly surface: {
+        readonly label: "Surface";
+        readonly attr: "data-surface";
+        readonly key: "surface";
+        readonly default: "flat" | "glass" | "bevel" | "cartoon";
+        readonly onHtml: true;
+        readonly levels: {
+            value: "flat" | "glass" | "bevel" | "cartoon";
+            label: "Flat" | "Glass" | "Bevel" | "Cartoon";
+            description: "Solid fills, no chrome — the quiet default." | "Frosted, corner-lit translucency with saturated backdrop." | "Chiseled slabs that physically depress on press." | "Inked outlines and sticker shadows that flatten on press.";
+        }[];
+    };
+    readonly corners: {
+        readonly label: "Corners";
+        readonly attr: "data-corners";
+        readonly key: "corners";
+        readonly default: "rounded" | "square";
+        readonly onHtml: true;
+        readonly levels: AxisLevel[];
+    };
+    readonly font: {
+        readonly label: "Font";
+        readonly attr: "data-font";
+        readonly key: "font";
+        readonly default: "mono" | "sans" | "serif";
+        readonly onHtml: true;
+        readonly levels: AxisLevel[];
+    };
+    readonly motion: {
+        readonly label: "Motion";
+        readonly attr: "data-motion";
+        readonly key: "motion";
+        readonly default: "instant" | "normal" | "extra";
+        readonly onHtml: true;
+        readonly levels: {
+            value: "instant" | "normal" | "extra";
+            label: "instant" | "normal" | "extra";
+            description: string;
+        }[];
+    };
+};
+export type AxisKey = keyof typeof axisRegistry;
+export declare const axisKeys: AxisKey[];

package/dist/ui/provider/axes.js

@@ -0,0 +1,70 @@
+/**
+ * Axis registry — the single source of truth for the design system's
+ * selectable axes (density, surface, corners, font, motion). Mirrors
+ * `surfaceRegistry`: metadata only, values derived from the tuples in
+ * modes.ts and from surfaceRegistry, so nothing is duplicated.
+ *
+ * This is a LIBRARY primitive: a consumer can build their own axis switcher
+ * (a settings panel, a command-palette section) by iterating `axisRegistry`
+ * without hard-coding which axes exist or what levels each has. The docs
+ * site's top-bar pickers and the /mode demo page are just consumers of it.
+ *
+ * Each axis maps to a `data-*` attribute the token stylesheets consume.
+ * `onHtml` marks axes that must be set on <html> (not just a wrapper) so
+ * portalled content — dialogs, tooltips, menus — inherits them.
+ */
+import { modes, defaultMode, corners, defaultCorners, fonts, defaultFont, motions, defaultMotion } from './modes.js';
+import { surfaces, defaultSurface, surfaceRegistry } from './surfaces.js';
+const bare = (values) => values.map((v) => ({ value: v, label: v }));
+const motionDesc = {
+    instant: 'No animation — snap.',
+    normal: 'Quick, decisive transitions.',
+    extra: 'Longer, with a gentle overshoot.'
+};
+export const axisRegistry = {
+    mode: {
+        label: 'Density',
+        attr: 'data-mode',
+        key: 'mode',
+        default: defaultMode,
+        onHtml: true,
+        levels: bare(modes)
+    },
+    surface: {
+        label: 'Surface',
+        attr: 'data-surface',
+        key: 'surface',
+        default: defaultSurface,
+        onHtml: true,
+        levels: surfaces.map((s) => ({
+            value: s,
+            label: surfaceRegistry[s].label,
+            description: surfaceRegistry[s].description
+        }))
+    },
+    corners: {
+        label: 'Corners',
+        attr: 'data-corners',
+        key: 'corners',
+        default: defaultCorners,
+        onHtml: true,
+        levels: bare(corners)
+    },
+    font: {
+        label: 'Font',
+        attr: 'data-font',
+        key: 'font',
+        default: defaultFont,
+        onHtml: true,
+        levels: bare(fonts)
+    },
+    motion: {
+        label: 'Motion',
+        attr: 'data-motion',
+        key: 'motion',
+        default: defaultMotion,
+        onHtml: true,
+        levels: motions.map((m) => ({ value: m, label: m, description: motionDesc[m] }))
+    }
+};
+export const axisKeys = Object.keys(axisRegistry);

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

@@ -0,0 +1,6 @@
+export { modes, defaultMode, type Mode } from './modes.js';
+export { surfaces, defaultSurface, surfaceRegistry, type Surface, type SurfaceMeta } from './surfaces.js';
+export { corners, defaultCorners, type Corners } from './modes.js';
+export { fonts, defaultFont, type Font } from './modes.js';
+export { motions, defaultMotion, type Motion } from './modes.js';
+export { axisRegistry, axisKeys, type AxisKey, type AxisMeta, type AxisLevel } from './axes.js';

package/dist/ui/provider/index.js

@@ -0,0 +1,6 @@
+export { modes, defaultMode } from './modes.js';
+export { surfaces, defaultSurface, surfaceRegistry } from './surfaces.js';
+export { corners, defaultCorners } from './modes.js';
+export { fonts, defaultFont } from './modes.js';
+export { motions, defaultMotion } from './modes.js';
+export { axisRegistry, axisKeys } from './axes.js';

package/dist/ui/provider/modes.d.ts

@@ -0,0 +1,12 @@
+export declare const modes: readonly ["dense", "balanced", "spacious", "touch"];
+export type Mode = (typeof modes)[number];
+export declare const defaultMode: Mode;
+export declare const corners: readonly ["rounded", "square"];
+export type Corners = (typeof corners)[number];
+export declare const defaultCorners: Corners;
+export declare const fonts: readonly ["mono", "sans", "serif"];
+export type Font = (typeof fonts)[number];
+export declare const defaultFont: Font;
+export declare const motions: readonly ["instant", "normal", "extra"];
+export type Motion = (typeof motions)[number];
+export declare const defaultMotion: Motion;

package/dist/ui/provider/modes.js

@@ -0,0 +1,14 @@
+export const modes = ['dense', 'balanced', 'spacious', 'touch'];
+export const defaultMode = 'dense';
+// The surface axis lives in surfaces.ts (metadata registry) and is exported
+// from the provider barrel — no runtime re-export here so this file stays
+// importable under plain `node --experimental-strip-types` (which cannot
+// remap .js specifiers to .ts source), as scripts/build-llm-docs.ts does.
+export const corners = ['rounded', 'square'];
+export const defaultCorners = 'rounded';
+export const fonts = ['mono', 'sans', 'serif'];
+export const defaultFont = 'mono';
+// Motion axis — animation timing, orthogonal to density (see motion.css).
+// instant = no motion, normal = default, extra = longer + gentle overshoot.
+export const motions = ['instant', 'normal', 'extra'];
+export const defaultMotion = 'normal';

package/dist/ui/provider/surfaces.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Surface registry — the single source of truth for WHICH surfaces exist
+ * and their metadata. The `surfaces` axis array, the docs matrix page, and
+ * `scripts/check-surfaces.ts` (which verifies this registry stays in sync
+ * with the CSS blocks in src/lib/styles/surfaces/) all derive from it.
+ *
+ * Deliberately metadata-only: token VALUES live in hand-authored CSS
+ * (src/lib/styles/surfaces/*.css) because surface design is sculpting —
+ * generating shadow stacks from config would bureaucratize exactly the
+ * part that needs hand-feel. Centralize the contract, not the values.
+ */
+export interface SurfaceMeta {
+    /** Display label for pickers and docs. */
+    label: string;
+    /** One-line character description. */
+    description: string;
+    /** Whether panels wear a visible frame (drives --era-panel-inset). */
+    /** The CSS file that defines it, relative to src/lib/styles/surfaces/. */
+    css: string;
+}
+export declare const surfaceRegistry: {
+    readonly flat: {
+        readonly label: "Flat";
+        readonly description: "Solid fills, no chrome — the quiet default.";
+        readonly css: "base.css";
+    };
+    readonly glass: {
+        readonly label: "Glass";
+        readonly description: "Frosted, corner-lit translucency with saturated backdrop.";
+        readonly css: "glass.css";
+    };
+    readonly bevel: {
+        readonly label: "Bevel";
+        readonly description: "Chiseled slabs that physically depress on press.";
+        readonly css: "bevel.css";
+    };
+    readonly cartoon: {
+        readonly label: "Cartoon";
+        readonly description: "Inked outlines and sticker shadows that flatten on press.";
+        readonly css: "cartoon.css";
+    };
+};
+export type Surface = keyof typeof surfaceRegistry;
+export declare const surfaces: Surface[];
+export declare const defaultSurface: Surface;

package/dist/ui/provider/surfaces.js

@@ -0,0 +1,24 @@
+export const surfaceRegistry = {
+    flat: {
+        label: 'Flat',
+        description: 'Solid fills, no chrome — the quiet default.',
+        css: 'base.css'
+    },
+    glass: {
+        label: 'Glass',
+        description: 'Frosted, corner-lit translucency with saturated backdrop.',
+        css: 'glass.css'
+    },
+    bevel: {
+        label: 'Bevel',
+        description: 'Chiseled slabs that physically depress on press.',
+        css: 'bevel.css'
+    },
+    cartoon: {
+        label: 'Cartoon',
+        description: 'Inked outlines and sticker shadows that flatten on press.',
+        css: 'cartoon.css'
+    }
+};
+export const surfaces = Object.keys(surfaceRegistry);
+export const defaultSurface = 'flat';

package/dist/ui/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './radio-group-root.svelte';
+export { default as Item } from './radio-group-item.svelte';

package/dist/ui/radio-group/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './radio-group-root.svelte';
+export { default as Item } from './radio-group-item.svelte';

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: RadioGroup.ItemProps = $props();
+</script>
+
+<RadioGroup.Item
+	bind:ref
+	class={cn(
+		'group flex size-(--era-h-xs) shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight)',
+		className
+	)}
+	{...restProps}
+>
+	<span
+		class="block size-1/2 rounded-(--era-rd-md) transition-colors duration-(--era-duration) group-data-[state=checked]:bg-fg"
+	></span>
+</RadioGroup.Item>

package/dist/ui/radio-group/radio-group-item.svelte.d.ts

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

package/dist/ui/radio-group/radio-group-root.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { RadioGroup } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: RadioGroup.RootProps = $props();
+</script>
+
+<RadioGroup.Root
+	bind:ref
+	bind:value
+	class={cn('flex flex-col gap-(--era-gap) data-[orientation=horizontal]:flex-row', className)}
+	{...restProps}
+/>

package/dist/ui/radio-group/radio-group-root.svelte.d.ts

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

package/dist/ui/range-calendar/index.d.ts

@@ -0,0 +1,15 @@
+import { RangeCalendar } from 'bits-ui';
+export declare const Root: typeof RangeCalendar.Root;
+export declare const Day: typeof RangeCalendar.Day;
+export declare const Cell: typeof RangeCalendar.Cell;
+export declare const Grid: typeof RangeCalendar.Grid;
+export declare const GridBody: typeof RangeCalendar.GridBody;
+export declare const GridHead: typeof RangeCalendar.GridHead;
+export declare const HeadCell: typeof RangeCalendar.HeadCell;
+export declare const GridRow: typeof RangeCalendar.GridRow;
+export declare const Header: typeof RangeCalendar.Header;
+export declare const Heading: typeof RangeCalendar.Heading;
+export declare const NextButton: typeof RangeCalendar.NextButton;
+export declare const PrevButton: typeof RangeCalendar.PrevButton;
+export declare const MonthSelect: typeof RangeCalendar.MonthSelect;
+export declare const YearSelect: typeof RangeCalendar.YearSelect;

package/dist/ui/range-calendar/index.js

@@ -0,0 +1,15 @@
+import { RangeCalendar } from 'bits-ui';
+export const Root = RangeCalendar.Root;
+export const Day = RangeCalendar.Day;
+export const Cell = RangeCalendar.Cell;
+export const Grid = RangeCalendar.Grid;
+export const GridBody = RangeCalendar.GridBody;
+export const GridHead = RangeCalendar.GridHead;
+export const HeadCell = RangeCalendar.HeadCell;
+export const GridRow = RangeCalendar.GridRow;
+export const Header = RangeCalendar.Header;
+export const Heading = RangeCalendar.Heading;
+export const NextButton = RangeCalendar.NextButton;
+export const PrevButton = RangeCalendar.PrevButton;
+export const MonthSelect = RangeCalendar.MonthSelect;
+export const YearSelect = RangeCalendar.YearSelect;

package/dist/ui/rating-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './rating-group-root.svelte';
+export { default as Item } from './rating-group-item.svelte';

package/dist/ui/rating-group/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './rating-group-root.svelte';
+export { default as Item } from './rating-group-item.svelte';

package/dist/ui/rating-group/rating-group-item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { RatingGroup } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	// Pattern A pass-through: bits-ui's typed children snippet (the per-item
+	// { state } used to render filled vs empty stars) flows through untouched.
+	let { ref = $bindable(null), class: className, ...restProps }: RatingGroup.ItemProps = $props();
+</script>
+
+<RatingGroup.Item
+	bind:ref
+	class={cn(
+		'inline-flex size-(--era-h-sm) items-center justify-center text-muted hover:text-bright focus:outline-none data-[state=checked]:text-primary',
+		className
+	)}
+	{...restProps}
+/>

package/dist/ui/rating-group/rating-group-item.svelte.d.ts

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

package/dist/ui/rating-group/rating-group-root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { RatingGroup } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	// Pattern A pass-through: bind the value, but let bits-ui's typed children
+	// snippet flow through restProps untouched.
+	let {
+		ref = $bindable(null),
+		value = $bindable(0),
+		class: className,
+		...restProps
+	}: RatingGroup.RootProps = $props();
+</script>
+
+<RatingGroup.Root
+	bind:ref
+	bind:value
+	class={cn('inline-flex items-center gap-(--era-gap)', className)}
+	{...restProps}
+/>

package/dist/ui/rating-group/rating-group-root.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+export { default as Root } from './scroll-area.svelte';
+export { default as Viewport } from './scroll-area-viewport.svelte';
+export { default as Scrollbar } from './scroll-area-scrollbar.svelte';
+export { default as Thumb } from './scroll-area-thumb.svelte';
+export { default as Corner } from './scroll-area-corner.svelte';

package/dist/ui/scroll-area/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './scroll-area.svelte';
+export { default as Viewport } from './scroll-area-viewport.svelte';
+export { default as Scrollbar } from './scroll-area-scrollbar.svelte';
+export { default as Thumb } from './scroll-area-thumb.svelte';
+export { default as Corner } from './scroll-area-corner.svelte';

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ScrollArea } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...restProps }: ScrollArea.CornerProps = $props();
+</script>
+
+<ScrollArea.Corner bind:ref class={className} {...restProps} />

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

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ScrollArea } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ScrollArea.ScrollbarProps = $props();
+</script>
+
+<ScrollArea.Scrollbar
+	bind:ref
+	class={cn(
+		'flex touch-none p-px transition-opacity duration-(--era-duration) select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:flex-col data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100',
+		className
+	)}
+	{...restProps}
+/>

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

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