feat: Divider / Separator component

[Samyssmile]

Summary

Add a ct-divider component for visual separation of content sections. Despite being simple, dividers are used constantly in layouts, lists, sidebars, cards, toolbars, and dropdown menus. Without a dedicated component, teams inline ad-hoc border-bottom or <hr> styles that drift from the design system.

The Dropdown already has ct-dropdown__separator — this component generalizes that pattern.

Requirements

Orientations

• Horizontal (default) — full-width line, used between content blocks
• Vertical (ct-divider--vertical) — inline separator for toolbars, button groups, inline layouts

Variants

• Default — subtle var(--color-border-default) line
• ct-divider--strong — uses var(--color-border-strong) for more visual weight
• ct-divider--muted — uses var(--color-border-muted) for minimal separation

With label

• ct-divider--labeled — text or icon centered on the divider line (e.g., "OR", "Section Title")
• Label uses ::before / ::after pseudo-elements for the lines, with a centered ct-divider__label span

Spacing

• ct-divider--sm — var(--space-2) vertical margin
• default (md) — var(--space-4) vertical margin
• ct-divider--lg — var(--space-8) vertical margin
• ct-divider--none — no margin (for tight layouts like inside cards)

Accessibility

• Use <hr> element for semantic meaning (implicit role="separator")
• Labeled dividers: aria-label or visible label text
• Vertical dividers: aria-orientation="vertical"
• Decorative-only dividers: role="none" to hide from AT

Naming

.ct-divider
.ct-divider--vertical
.ct-divider--strong / --muted
.ct-divider--labeled
.ct-divider--sm / --lg / --none
.ct-divider__label

Design Tokens

• --ct-divider-color: var(--color-border-default)
• --ct-divider-width: 1px
• --ct-divider-spacing: var(--space-4)

Files

• components/components.css — component styles
• stories/Divider.stories.js — stories for horizontal, vertical, labeled, spacing variants