Separator

<div
  style="
    --display: flex-col;
    --gap: 4;
    --max-w: 96;
  "
>
  <div>
    <p
      style="
        --font-size: var(--font-size-sm);
        --font-weight: strong;
      "
    >
      Zazz Design Framework
    </p>
    <p
      style="
        --font-size: var(--font-size-sm);
        --text: var(--color-muted-foreground);
      "
    >
      Web-native primitives.
    </p>
  </div>

  <hr data-ui="separator" />

  <div
    style="
      --display: flex;
      --items: center;
      --gap: 2;
      --font-size: var(--font-size-sm);
    "
  >
    <a href="#" data-ui="button" data-button-variant="link">Docs</a>
    <hr data-ui="separator" data-separator-orientation="vertical" aria-orientation="vertical" />
    <a href="#" data-ui="button" data-button-variant="link">Components</a>
    <hr data-ui="separator" data-separator-orientation="vertical" aria-orientation="vertical" />
    <a href="#" data-ui="button" data-button-variant="link">Themes</a>
  </div>
</div>

/**
 * separator.css: Separator ([data-ui~="separator"] on native <hr>)
 *
 * @layer      variables, components
 * @requires   _layers.css, _variables.css, _reset.css, _properties.css (--_bg-resolved)
 * @uses       <hr>: the platform's separator (implicit role="separator")
 * @uses       data-separator-orientation="vertical": flips to a stretching
 *             column rule for flex/grid rows; pair with aria-orientation="vertical"
 *             when the separator is meaningful, or role="presentation" when
 *             purely decorative
 * @tokens     --ui-separator-* (@layer variables; --ui-separator-bg backs the --bg utility)
 */

@layer variables {
  :root {
    --ui-separator-bg: var(--color-border);
    --ui-separator-thickness: 1px;
  }
}

@layer ui.components {
  /* ===========================================================================
  SEPARATOR: a themed <hr>, horizontal or vertical
  - Spacing is composition (--my / --mx utilities).
  - Meaningful separators keep hr's implicit separator role (add
    aria-orientation="vertical" for the vertical form: AT assumes
    horizontal); decorative ones take role="presentation".
  =========================================================================== */

  :where([data-ui~="separator"]) {
    border: none;
    background-color: var(--_bg-resolved, var(--ui-separator-bg));
    block-size: var(--ui-separator-thickness);
    inline-size: auto;
    flex-shrink: 0;
  }

  :where([data-ui~="separator"][data-separator-orientation="vertical"]) {
    inline-size: var(--ui-separator-thickness);
    block-size: auto;
    /* Stretches to the row height as a flex/grid item; the fallback keeps it
       visible in plain flow, where auto block-size would collapse to zero */
    align-self: stretch;
    min-block-size: 1lh;
  }
}