Divider

<oblyx-divider> renders a horizontal or vertical rule: a line, an optional centered label, and a second line. It carries no margin of its own: spacing around it comes from whatever contains it, an oblyx-stack's gap or an oblyx-layout region's padding, the same as any other block-level element.

<div>
  <p>Some text above.</p>
  <oblyx-divider></oblyx-divider>
  <p>Some text below.</p>
</div>

div {
  p { +"Some text above." }
  oblyxDivider()
  p { +"Some text below." }
}

Orientation

orientation="vertical" switches the rule to a column, sized to 100% of its container's height: give the container an explicit height, or a flex context that stretches its children, for the line to be visible.

<div style="display: flex; align-items: stretch; gap: 16px; height: 64px;">
  <span>Left</span>
  <oblyx-divider orientation="vertical"></oblyx-divider>
  <span>Right</span>
</div>

div {
  style = "display: flex; align-items: stretch; gap: 16px; height: 64px;"
  span { +"Left" }
  oblyxDivider(orientation = OblyxDividerOrientation.VERTICAL)
  span { +"Right" }
}

Variant

strong draws the emphasized border color instead of the default subtle one, for a divider that needs to read as a firmer boundary.

<div>
  <p class="docs-demo-label">variant="subtle" (default)</p>
  <oblyx-divider variant="subtle"></oblyx-divider>
</div>
<div style="margin-top: 24px;">
  <p class="docs-demo-label">variant="strong"</p>
  <oblyx-divider variant="strong"></oblyx-divider>
</div>

div {
  p(classes = "docs-demo-label") { +"variant=\"subtle\" (default)" }
  oblyxDivider(variant = OblyxDividerVariant.SUBTLE)
}
div {
  style = "margin-top: 24px;"
  p(classes = "docs-demo-label") { +"variant=\"strong\"" }
  oblyxDivider(variant = OblyxDividerVariant.STRONG)
}

Label

label centers a short string on the line and sets it as the divider's accessible name via aria-labelledby, generated per instance. It's a plain string attribute, not light content: a divider has no other use for children.

<oblyx-divider label="OR"></oblyx-divider>

oblyxDivider(label = "OR")

Decorative dividers

Every divider renders role="separator" by default, announcing it to assistive technology as a real content boundary. Set decorative when a divider is purely visual rhythm between blocks of otherwise unrelated content: it replaces the separator role and aria-orientation/aria-labelledby with aria-hidden instead, so it isn't announced at all. There's no visible difference, so no example above shows it; see the reference table for the attribute.

The cascading default in Layout

oblyx-layout's default-has-dividers attribute reflects a has-divider attribute onto its header and footer once, at connect time, so a whole application shell can opt into dividers between its regions without setting has-divider on every header and footer by hand. That's the one place in Oblyx a divider's presence is set by something other than its own markup.

Reference