@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/resize-handle/ResizeHandle.svelte

@@ -0,0 +1,177 @@
+<!--
+	The edge between two areas, which the person can drag to resize one of them.
+
+	While dragging, the size is written straight onto the target as a custom
+	property, so nothing re-renders on every pointer move; the bound value
+	changes once, when the drag ends. The keyboard moves it in steps, Home and
+	End go to the limits, and a double-click puts it back. (Eregion's ResizableEdge.)
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, motion } from '../../tokens.stylex.js';
+
+	export type ResizeHandleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The size, in pixels. Bindable. */
+		value?: number;
+		min?: number;
+		/** The largest size, or a function that works it out when a drag starts. */
+		max?: number | (() => number);
+		/** Where a double-click puts it back. */
+		defaultValue?: number;
+		/** How far an arrow key moves it, in pixels. */
+		step?: number;
+		/**
+		 * Which edge of the target this handle sits on. `start` grows the target
+		 * as it moves toward the start: a panel on the end side of the window.
+		 */
+		edge?: 'start' | 'end';
+		/** `vertical` resizes widths; `horizontal` resizes heights, as for a drawer below. */
+		orientation?: 'vertical' | 'horizontal';
+		/** The element being resized, and the custom property its size is read from. */
+		target?: HTMLElement | null;
+		property?: string;
+		/** Names the handle, for assistive technology: "Resize the panel". */
+		label: string;
+		sx?: Sx;
+	};
+
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		// An 8px target with a 1px line in the middle, lit when it is reached
+		handle: {
+			position: 'relative',
+			flexShrink: 0,
+			zIndex: 2,
+			touchAction: 'none',
+			WebkitAppRegion: 'no-drag',
+			outlineStyle: 'none',
+			'::after': {
+				content: '""',
+				position: 'absolute',
+				backgroundColor: {
+					default: 'transparent',
+					':hover': { default: null, [HOVER]: colors.ithil },
+					':focus-visible': colors.focusRing,
+					[FORCED]: 'CanvasText'
+				},
+				boxShadow: { default: null, ':hover': `0 0 8px ${colors.glow}` },
+				transitionProperty: 'background-color',
+				transitionDuration: motion.base,
+				transitionTimingFunction: 'ease',
+				transitionDelay: { default: '0ms', ':hover': '150ms' }
+			}
+		},
+		vertical: {
+			width: '0.5rem',
+			marginInline: '-0.25rem',
+			cursor: 'col-resize',
+			'::after': { insetBlock: 0, insetInlineStart: 'calc(50% - 1px)', width: '2px' }
+		},
+		horizontal: {
+			height: '0.5rem',
+			marginBlock: '-0.25rem',
+			cursor: 'row-resize',
+			'::after': { insetInline: 0, top: 'calc(50% - 1px)', height: '2px' }
+		},
+		dragging: {
+			'::after': { backgroundColor: colors.ithil, transitionDelay: '0ms' }
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(320),
+		min = 160,
+		max = Infinity,
+		defaultValue,
+		step = 32,
+		edge = 'start',
+		orientation = 'vertical',
+		target,
+		property = '--narvi-size',
+		label,
+		sx,
+		class: className,
+		...rest
+	}: ResizeHandleProps = $props();
+
+	let dragging = $state(false);
+	const limit = () => (typeof max === 'function' ? max() : max);
+	const clamp = (size: number, upper = limit()) =>
+		Math.round(Math.min(Math.max(size, min), Math.max(min, upper)));
+
+	function onpointerdown(event: PointerEvent & { currentTarget: HTMLDivElement }) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		const handle = event.currentTarget;
+		handle.setPointerCapture(event.pointerId);
+		dragging = true;
+		const start = orientation === 'vertical' ? event.clientX : event.clientY;
+		const from = value;
+		const upper = limit();
+		const rtl = getComputedStyle(handle).direction === 'rtl';
+		// Moving toward the start grows a target whose start edge this is
+		let sign = edge === 'start' ? -1 : 1;
+		if (orientation === 'vertical' && rtl) sign = -sign;
+		let size = from;
+
+		const move = (moving: PointerEvent) => {
+			const now = orientation === 'vertical' ? moving.clientX : moving.clientY;
+			size = clamp(from + (now - start) * sign, upper);
+			target?.style.setProperty(property, `${size}px`);
+		};
+		const up = () => {
+			dragging = false;
+			handle.removeEventListener('pointermove', move);
+			handle.removeEventListener('pointerup', up);
+			handle.removeEventListener('pointercancel', up);
+			value = size;
+		};
+		handle.addEventListener('pointermove', move);
+		handle.addEventListener('pointerup', up);
+		handle.addEventListener('pointercancel', up);
+	}
+
+	function onkeydown(event: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+		const grow = edge === 'start' ? -1 : 1;
+		let delta = 0;
+		if (orientation === 'vertical') {
+			if (event.key === 'ArrowLeft') delta = -step * grow * (rtl ? -1 : 1);
+			else if (event.key === 'ArrowRight') delta = step * grow * (rtl ? -1 : 1);
+		} else if (event.key === 'ArrowUp') delta = -step * grow;
+		else if (event.key === 'ArrowDown') delta = step * grow;
+		if (event.key === 'Home') value = min;
+		else if (event.key === 'End') value = clamp(Infinity);
+		else if (event.key === 'Enter' && defaultValue !== undefined) value = clamp(defaultValue);
+		else if (delta) value = clamp(value + delta);
+		else return;
+		event.preventDefault();
+	}
+</script>
+
+<!-- A separator that can take focus is a widget in ARIA: the keyboard moves it -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	role="separator"
+	tabindex="0"
+	aria-label={label}
+	aria-orientation={orientation}
+	aria-valuenow={value}
+	aria-valuemin={min}
+	aria-valuemax={Number.isFinite(limit()) ? limit() : undefined}
+	data-slot="resize-handle"
+	data-dragging={dragging || undefined}
+	{...rest}
+	{...attrs([styles.handle, styles[orientation], dragging && styles.dragging, sx], className)}
+	{onpointerdown}
+	{onkeydown}
+	ondblclick={() => {
+		if (defaultValue !== undefined) value = clamp(defaultValue);
+	}}
+></div>

package/dist/components/resize-handle/ResizeHandle.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type ResizeHandleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The size, in pixels. Bindable. */
+    value?: number;
+    min?: number;
+    /** The largest size, or a function that works it out when a drag starts. */
+    max?: number | (() => number);
+    /** Where a double-click puts it back. */
+    defaultValue?: number;
+    /** How far an arrow key moves it, in pixels. */
+    step?: number;
+    /**
+     * Which edge of the target this handle sits on. `start` grows the target
+     * as it moves toward the start: a panel on the end side of the window.
+     */
+    edge?: 'start' | 'end';
+    /** `vertical` resizes widths; `horizontal` resizes heights, as for a drawer below. */
+    orientation?: 'vertical' | 'horizontal';
+    /** The element being resized, and the custom property its size is read from. */
+    target?: HTMLElement | null;
+    property?: string;
+    /** Names the handle, for assistive technology: "Resize the panel". */
+    label: string;
+    sx?: Sx;
+};
+declare const ResizeHandle: import("svelte").Component<ResizeHandleProps, {}, "value">;
+type ResizeHandle = ReturnType<typeof ResizeHandle>;
+export default ResizeHandle;

package/dist/components/rolling-text/RollingText.svelte

@@ -0,0 +1,51 @@
+<!--
+	Text that rolls to its next value: the old line lifts away as the new one
+	rises in. For a phrase that follows an agent from action to action,
+	"Reading agent-run.tsx", then "Running pnpm check".
+-->
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import { cubicOut } from 'svelte/easing';
+	import { fly } from 'svelte/transition';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Shimmer from '../shimmer/Shimmer.svelte';
+
+	export type RollingTextProps = {
+		text: string;
+		/** Lights the text with the moving glint, while the work goes on. */
+		shimmer?: boolean;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const styles = stylex.create({
+		// Both lines share one cell while they pass each other
+		root: { display: 'inline-grid', minWidth: 0, overflow: 'hidden', verticalAlign: 'bottom' },
+		line: {
+			gridArea: '1 / 1',
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		}
+	});
+
+	const calm = () =>
+		typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+</script>
+
+<script lang="ts">
+	let { text, shimmer = false, sx, class: className }: RollingTextProps = $props();
+</script>
+
+<span data-slot="rolling-text" {...attrs([styles.root, sx], className)}>
+	{#key text}
+		<span
+			{...stylex.attrs(styles.line)}
+			in:fly={{ y: '0.6em', duration: calm() ? 0 : 220, easing: cubicOut, opacity: 0 }}
+			out:fly={{ y: '-0.6em', duration: calm() ? 0 : 160, easing: cubicOut, opacity: 0 }}
+		>
+			<Shimmer active={shimmer}>{text}</Shimmer>
+		</span>
+	{/key}
+</span>

package/dist/components/rolling-text/RollingText.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Sx } from '../../internal/sx.js';
+export type RollingTextProps = {
+    text: string;
+    /** Lights the text with the moving glint, while the work goes on. */
+    shimmer?: boolean;
+    sx?: Sx;
+    class?: string;
+};
+declare const RollingText: import("svelte").Component<RollingTextProps, {}, "">;
+type RollingText = ReturnType<typeof RollingText>;
+export default RollingText;

package/dist/components/segmented/SegmentedControl.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, motion, radius } from '../../tokens.stylex.js';
+
+	export type SegmentedOption = { value: string; label: string; disabled?: boolean };
+
+	export type SegmentedControlProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The choices, in order. Two to five read best. */
+		options: SegmentedOption[];
+		/** The selected option's value. Bindable. */
+		value?: string;
+		/** Form field name. Generated when omitted. */
+		name?: string;
+		disabled?: boolean;
+		sx?: Sx;
+	};
+
+	// StyleX needs these in the same file to evaluate them at build time
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+	const MOTION = '@media (prefers-reduced-motion: no-preference)';
+	const FORCED = '@media (forced-colors: active)';
+
+	const styles = stylex.create({
+		root: {
+			WebkitAppRegion: 'no-drag',
+			position: 'relative',
+			display: 'inline-grid',
+			gridAutoFlow: 'column',
+			gridAutoColumns: '1fr',
+			boxSizing: 'border-box',
+			padding: '0.1875rem',
+			borderRadius: `calc(${radius.sm} + 0.1875rem)`,
+			backgroundColor: colors.well,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 2px ${colors.shade}`,
+			fontFamily: font.body,
+			outlineStyle: 'solid',
+			outlineWidth: '1px',
+			outlineColor: 'transparent',
+			outlineOffset: '-1px'
+		},
+		// The thumb slides under the labels. Its position is logical, so it mirrors in RTL.
+		thumb: {
+			position: 'absolute',
+			top: '0.1875rem',
+			bottom: '0.1875rem',
+			insetInlineStart: '0.1875rem',
+			width: 'calc((100% - 6px) / var(--narvi-seg-count))',
+			// Moved with a transform. A percentage is of the thumb's own width, so one
+			// step is exactly 100%, whatever the labels measure.
+			translate: {
+				default: 'calc(var(--narvi-seg-index) * 100%) 0',
+				':dir(rtl)': 'calc(var(--narvi-seg-index) * -100%) 0'
+			},
+			borderRadius: radius.sm,
+			backgroundColor: { default: colors.surfaceRaised, [FORCED]: 'Canvas' },
+			boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 1px 3px ${colors.shade}`,
+			outlineStyle: 'solid',
+			outlineWidth: '2px',
+			outlineOffset: '-2px',
+			outlineColor: { default: 'transparent', [FORCED]: 'Highlight' },
+			forcedColorAdjust: 'none'
+		},
+		thumbSlides: {
+			transitionProperty: { default: 'none', [MOTION]: 'translate' },
+			transitionDuration: motion.slow,
+			transitionTimingFunction: motion.easeInOut
+		},
+		thumbHidden: { opacity: 0 },
+		option: {
+			position: 'relative',
+			zIndex: 1,
+			display: 'grid',
+			cursor: 'pointer',
+			WebkitTapHighlightColor: 'transparent'
+		},
+		optionDisabled: { cursor: 'not-allowed', opacity: 0.5 },
+		// The radio itself is invisible and covers its option, so it takes the click and the focus
+		input: {
+			position: 'absolute',
+			inset: 0,
+			width: '100%',
+			height: '100%',
+			margin: 0,
+			opacity: 0,
+			appearance: 'none',
+			cursor: 'inherit'
+		},
+		text: {
+			display: 'grid',
+			placeItems: 'center',
+			minHeight: '1.75rem',
+			paddingInline: '0.75rem',
+			borderRadius: radius.sm,
+			color: {
+				default: colors.textMuted,
+				':hover': { default: null, [HOVER]: colors.text },
+				[stylex.when.siblingBefore(':checked')]: colors.text
+			},
+			fontSize: font.sizeMd,
+			fontWeight: {
+				default: font.weightMedium,
+				[stylex.when.siblingBefore(':checked')]: font.weightSemibold
+			},
+			lineHeight: 1,
+			whiteSpace: 'nowrap',
+			outlineStyle: 'solid',
+			outlineWidth: '2px',
+			outlineOffset: '1px',
+			outlineColor: {
+				default: 'transparent',
+				[stylex.when.siblingBefore(':focus-visible')]: colors.focusRing
+			},
+			transitionProperty: 'color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		options,
+		value = $bindable(),
+		name,
+		disabled = false,
+		sx,
+		class: className,
+		...rest
+	}: SegmentedControlProps = $props();
+
+	const uid = $props.id();
+	const index = $derived(options.findIndex((option) => option.value === value));
+
+	// The thumb slides only for a choice made with a pointer. Arrow keys move the
+	// selection as fast as they repeat, and a thumb trailing behind the focus ring
+	// makes the control feel slow. It also stays put when there was nothing
+	// selected to slide from.
+	let slides = $state(false);
+</script>
+
+<div
+	role="radiogroup"
+	{...rest}
+	{...attrs([styles.root, sx], className)}
+	style:--narvi-seg-count={options.length}
+	onpointerdowncapture={() => (slides = index >= 0)}
+	onkeydowncapture={() => (slides = false)}
+>
+	<!-- The index is set on the thumb itself, so a change restyles one element, not the group -->
+	<span
+		aria-hidden="true"
+		{...stylex.attrs(styles.thumb, slides && styles.thumbSlides, index < 0 && styles.thumbHidden)}
+		style:--narvi-seg-index={Math.max(index, 0)}
+	></span>
+	{#each options as option (option.value)}
+		{@const off = disabled || option.disabled}
+		<label {...stylex.attrs(styles.option, off && styles.optionDisabled)}>
+			<input
+				type="radio"
+				name={name ?? uid}
+				value={option.value}
+				bind:group={value}
+				disabled={off}
+				{...stylex.attrs(styles.input, stylex.defaultMarker())}
+			/>
+			<span {...stylex.attrs(styles.text)}>{option.label}</span>
+		</label>
+	{/each}
+</div>

package/dist/components/segmented/SegmentedControl.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type SegmentedOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SegmentedControlProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The choices, in order. Two to five read best. */
+    options: SegmentedOption[];
+    /** The selected option's value. Bindable. */
+    value?: string;
+    /** Form field name. Generated when omitted. */
+    name?: string;
+    disabled?: boolean;
+    sx?: Sx;
+};
+declare const SegmentedControl: import("svelte").Component<SegmentedControlProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/select/Select.svelte

@@ -0,0 +1,146 @@
+<!--
+	One choice from a short list. For a list long enough to search, or choices
+	with more to them, use a Popover with your own content.
+-->
+<script lang="ts" module>
+	import { Select } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { control, type ControlSize } from '../../internal/control.js';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+	import { getFieldContext } from '../field/context.js';
+
+	export type SelectOption = {
+		value: string;
+		label: string;
+		/** Options with the same group are listed together under its name. */
+		group?: string;
+		disabled?: boolean;
+	};
+
+	export type SelectProps = {
+		options: SelectOption[];
+		/** The chosen value. Bindable. */
+		value?: string;
+		/** Shown while nothing is chosen. */
+		placeholder?: string;
+		size?: ControlSize;
+		disabled?: boolean;
+		/** For a form: the name the value is sent under. */
+		name?: string;
+		/** Called when the person picks an option. */
+		onchange?: (value: string) => void;
+		'aria-label'?: string;
+		'aria-describedby'?: string;
+		id?: string;
+		sx?: Sx;
+		class?: string;
+	};
+
+	const styles = stylex.create({
+		trigger: {
+			display: 'flex',
+			alignItems: 'center',
+			gap: '0.5rem',
+			textAlign: 'start',
+			cursor: { default: 'pointer', ':disabled': 'not-allowed' }
+		},
+		value: {
+			flexGrow: 1,
+			minWidth: 0,
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+			whiteSpace: 'nowrap'
+		},
+		placeholder: { color: colors.textSubtle },
+		selector: { display: 'grid', flexShrink: 0, color: colors.textSubtle },
+		check: { display: 'grid', marginInlineStart: 'auto', color: colors.ithil }
+	});
+
+	type Group = { name: string | undefined; options: SelectOption[] };
+	function grouped(options: SelectOption[]): Group[] {
+		const groups: Group[] = [];
+		for (const option of options) {
+			const last = groups.at(-1);
+			if (last && last.name === option.group) last.options.push(option);
+			else groups.push({ name: option.group, options: [option] });
+		}
+		return groups;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		options,
+		value = $bindable(),
+		placeholder = 'Choose…',
+		size = 'md',
+		disabled,
+		name,
+		onchange,
+		'aria-label': label,
+		'aria-describedby': describedBy,
+		id,
+		sx,
+		class: className
+	}: SelectProps = $props();
+
+	const field = getFieldContext();
+	const selected = $derived(options.find((option) => option.value === value));
+	const groups = $derived(grouped(options));
+</script>
+
+<Select.Root
+	type="single"
+	bind:value={() => value ?? '', (next) => (value = next || undefined)}
+	onValueChange={(next) => onchange?.(next)}
+	items={options}
+	{name}
+	disabled={disabled ?? field?.disabled}
+>
+	<Select.Trigger
+		id={id ?? field?.id}
+		aria-label={label}
+		aria-describedby={describedBy ?? field?.describedBy}
+		data-slot="select"
+		{...attrs([control.base, control[size], styles.trigger, sx], className)}
+	>
+		<span {...stylex.attrs(styles.value, !selected && styles.placeholder)}>
+			{selected?.label ?? placeholder}
+		</span>
+		<span {...stylex.attrs(styles.selector)}><Glyph name="selector" size={14} /></span>
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content sideOffset={6} collisionPadding={8} {...stylex.attrs(layer.surface)}>
+			<Select.Viewport>
+				{#each groups as group, index (index)}
+					<Select.Group>
+						{#if group.name}
+							<Select.GroupHeading {...stylex.attrs(layer.heading)}
+								>{group.name}</Select.GroupHeading
+							>
+						{/if}
+						{#each group.options as option (option.value)}
+							<Select.Item
+								value={option.value}
+								label={option.label}
+								disabled={option.disabled}
+								{...stylex.attrs(layer.item)}
+							>
+								{#snippet children({ selected })}
+									<span {...stylex.attrs(layer.label)}>{option.label}</span>
+									{#if selected}
+										<span {...stylex.attrs(styles.check)}><Glyph name="check" stroke={1.75} /></span
+										>
+									{/if}
+								{/snippet}
+							</Select.Item>
+						{/each}
+					</Select.Group>
+				{/each}
+			</Select.Viewport>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

package/dist/components/select/Select.svelte.d.ts

@@ -0,0 +1,31 @@
+import { Select } from 'bits-ui';
+import { type ControlSize } from '../../internal/control.js';
+import { type Sx } from '../../internal/sx.js';
+export type SelectOption = {
+    value: string;
+    label: string;
+    /** Options with the same group are listed together under its name. */
+    group?: string;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    options: SelectOption[];
+    /** The chosen value. Bindable. */
+    value?: string;
+    /** Shown while nothing is chosen. */
+    placeholder?: string;
+    size?: ControlSize;
+    disabled?: boolean;
+    /** For a form: the name the value is sent under. */
+    name?: string;
+    /** Called when the person picks an option. */
+    onchange?: (value: string) => void;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    id?: string;
+    sx?: Sx;
+    class?: string;
+};
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/separator/Separator.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+
+	export type SeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		orientation?: 'horizontal' | 'vertical';
+		/** Hides the separator from assistive technology when it is purely visual. */
+		decorative?: boolean;
+		sx?: Sx;
+	};
+
+	const styles = stylex.create({
+		base: {
+			flexShrink: 0,
+			margin: 0,
+			borderWidth: 0,
+			backgroundColor: colors.line
+		},
+		horizontal: {
+			width: '100%',
+			height: '1px'
+		},
+		vertical: {
+			alignSelf: 'stretch',
+			width: '1px',
+			minHeight: '1em'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let {
+		orientation = 'horizontal',
+		decorative = false,
+		sx,
+		class: className,
+		...rest
+	}: SeparatorProps = $props();
+</script>
+
+<div
+	role={decorative ? 'none' : 'separator'}
+	aria-orientation={decorative || orientation === 'horizontal' ? undefined : 'vertical'}
+	{...rest}
+	{...attrs([styles.base, styles[orientation], sx], className)}
+></div>