Separator

<script lang="ts">
	import { Separator } from '#lib/components/ui/separator/index.js';
</script>

<p>An open-source UI library.</p>
<Separator style="margin-block: var(--dui-space-4)" />
<div class="row">
	<span>Blog</span>
	<Separator orientation="vertical" />
	<span>Docs</span>
	<Separator orientation="vertical" />
	<span>Source</span>
</div>

<style>
	p {
		margin: 0;
		color: var(--dui-color-muted-foreground);
		font-size: var(--dui-text-sm);
	}

	.row {
		display: flex;
		align-items: center;
		gap: var(--dui-space-2);
		height: 1.25rem;
		font-size: var(--dui-text-sm);
	}
</style>

npx distill-ui add separator

import Root from './separator.svelte';

export { Root, Root as Separator };

<script lang="ts">
	import type { HTMLAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		orientation = 'horizontal',
		decorative = true,
		class: className,
		...restProps
	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
		ref?: HTMLDivElement | null;
		orientation?: 'horizontal' | 'vertical';
		/** Purely visual by default. Set to false when the line separates meaningful sections. */
		decorative?: boolean;
	} = $props();
</script>

<div
	{...restProps}
	bind:this={ref}
	role={decorative ? 'none' : 'separator'}
	aria-orientation={decorative ? undefined : orientation}
	class={['separator', className]}
	data-orientation={orientation}
></div>

<!--
	Options you can set from a parent or on the separator itself:
	--dui-separator-color
-->

<style>
	.separator {
		flex-shrink: 0;
		background: var(--dui-separator-color, var(--dui-color-border));

		&[data-orientation='horizontal'] {
			width: 100%;
			height: 1px;
		}

		&[data-orientation='vertical'] {
			width: 1px;
			align-self: stretch;
		}
	}
</style>