You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.4 KiB
47 lines
1.4 KiB
<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>
|