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

Eidos Separator

Visual divider between sections. A single <div> styled by the recipe based on its data-orientation attribute. The component toggles between a semantic separator (with role="separator" and aria-orientation) and a decorative one (aria-hidden="true", no role) via the decorative prop.

Superficie

<!-- Default: horizontal, semantically a separator. -->
<Separator />

<!-- Vertical, e.g. between toolbar groups. -->
<Separator orientation="vertical" />

<!-- Decorative: hidden from assistive tech (visual chrome only). -->
<Separator decorative />

<!-- Responsive: horizontal on mobile, vertical from md upward. -->
<Separator orientation={{ base: 'horizontal', md: 'vertical' }} />

Baseline

Origin: air/components/layout/separator (branch morfo-runtime).

Adjustments applied during the port:

• Drop the air-separator class. Eidos targets [data-separator] via the marker emitted by the wrapper, so the recipe stays framework-agnostic and consumers do not need to opt in by adding a class.
• Replace the --air-separator-* token namespace with bare --separator-* names (UIX naming convention from eidos/components/README.md).
• Logical sizing via inline-size / block-size instead of width / height so the rule mirrors automatically in RTL contexts and inside vertical writing modes.
• min-block-size on vertical separators is now var(--space-4) (was var(--air-separator-min-length), which mapped to the same scale via a token shim). The fallback in the recipe keeps the override surface stable.
• Eidos-native: no soma backing, no morfo events. The morfo's scope is ['eidos'] and the conditional ARIA contract (role/aria-orientation when !decorative, aria-hidden="true" when decorative) is encoded declaratively.

Comparativa

Capability	UIX (eidos)	Radix Primitives	Mantine	Chakra UI
orientation prop	Yes (horizontal / vertical, responsive)	Yes (string)	Yes (horizontal / vertical)	Yes (horizontal / vertical)
Responsive orientation	Yes (ResponsiveProp)	No	Limited (per-breakpoint via Sx)	Yes via _breakpoints
decorative prop	Yes — drops role + adds aria-hidden	Yes (identical semantics)	No — separator is always semantic	Implicit (no role if aria-hidden set manually)
role="separator" when semantic	Yes	Yes	Yes	Yes
aria-orientation when semantic	Yes	Yes	No (relies on visible orientation)	No
Logical sizing (inline-size)	Yes	No (physical sides)	No	No
Bare element (no soma)	Yes — pure CSS recipe	Yes	Yes	Yes
Token-based color / thickness	Yes (--separator-color, --separator-thickness)	Themed via CSS variables	Theme prop	Theme prop

Decisiones

• Single Provider part, no compound API. A separator is a single element; there are no slots, no inner sub-parts, no children. The morfo declares one part (Provider) emitting the data-separator marker so the recipe and audit tools can find it.
• Conditional ARIA via condition. The morfo's aria entries use condition: { when: 'prop-falsy', prop: 'decorative' } and condition: { when: 'prop-truthy', prop: 'decorative' } instead of two parts. This keeps the contract honest — the same DOM element flips its accessibility shape based on the consumer prop.
• aria-orientation is recommended, not required. Some assistive-tech implementations ignore the attribute on role="separator" and infer orientation from visual layout. The audit script does not flag missing values when severity is recommended.
• Eidos-native, no soma backing. No state, no callbacks, no ARIA wiring beyond the conditional role. Adding a soma layer would manufacture indirection (rule 4.6: no re-export facades).
• Logical CSS axes. The recipe uses inline-size / block-size so the divider mirrors automatically in RTL documents and inside vertical writing modes — consistent with Box / Flex / Stack.

Eventos Sema

Separator declares 0 events. As a passive layout primitive it does not commit, emerge, or react to anything — it just paints a rule. Components that animate sections appearing or disappearing should compose Separator inside a primitive (Collapsible, Drawer, Dialog) that owns the relevant sema verbs.

Gaps

Gap	Disposition	Detail
thickness prop (replace token override)	diferir	Today consumers set --separator-thickness via style or class. Reconsider if ≥2 real consumers need a strongly-typed prop.
inset / start-end padding	diferir	Mantine ships Divider inset for indented separators inside menus. Bottom priority — composable via marginInlineStart on a Box wrapper.
label slot (text in the middle of the rule)	diferir	Mantine Divider label="Or" pattern. Will need its own part declaration in the morfo and a recipe layer. Not in scope for the layout-primitive sweep.
variant="dashed" / "dotted"	descartar	Tokenized via CSS border-style override is cleaner than a prop. Stays in user space.
Decorative + horizontal default min-length	descartar	The minimum length only matters on the vertical axis where the cross-axis collapses to content. Horizontal already fills 100%.

Referencias

• Radix Primitives Separator: https://www.radix-ui.com/primitives/docs/components/separator
• Mantine Divider: https://mantine.dev/core/divider/
• Chakra UI Divider: https://chakra-ui.com/docs/components/divider
• WAI-ARIA separator role: https://www.w3.org/TR/wai-aria-1.2/#separator

Passive justification

Visual-only primitive (scope: ['eidos'] in the morfo). A single Provider part emits the [data-separator] + [data-orientation] markers. The conditional ARIA contract toggles role / aria-orientation / aria-hidden from the decorative prop, but the element itself never holds state, never emits a sema event, never participates in a keyboard contract. The morfo is therefore deliberately events-free and the demo's Sema tab states the absence explicitly.