svelte-kit-vice/src/uix/eidos/components/separator/separator.svelte

<script lang="ts">
	import './separator.css';
	/**
	 * Eidos `<Separator>` — visual divider between sections. Single
	 * `<div>` element; the recipe sizes it based on `data-orientation`.
	 * Two modes:
	 *
	 *   - semantic (default): emits `role="separator"` +
	 *     `aria-orientation`, exposing the divider to assistive tech.
	 *   - decorative (`decorative` prop): drops the role and adds
	 *     `aria-hidden="true"`.
	 *
	 *   <Separator />
	 *   <Separator orientation="vertical" />
	 *   <Separator decorative />
	 *
	 * The `orientation` prop is responsive; it is resolved through
	 * `ActiveEidos.resolve()` so a `{ base: 'horizontal', md:
	 * 'vertical' }` value collapses to the active breakpoint at
	 * runtime.
	 */
	import { ActiveEidos } from '$uix/eidos';
	import type { SeparatorOrientation, SeparatorProps } from './types';

	let {
		orientation = 'horizontal',
		decorative = false,
		class: className,
		...restProps
	}: SeparatorProps = $props();

	const eidos = ActiveEidos.require();
	const resolvedOrientation = $derived<SeparatorOrientation>(
		eidos.resolve(orientation) ?? 'horizontal'
	);
</script>

<div
	{...restProps}
	class={className}
	data-separator=""
	data-orientation={resolvedOrientation}
	role={decorative ? undefined : 'separator'}
	aria-orientation={decorative ? undefined : resolvedOrientation}
	aria-hidden={decorative ? 'true' : undefined}
></div>