Separator

Semantic separator primitive with horizontal and vertical orientations.

Default horizontal

Stack supplies breathing room around a horizontal divider.

Above

Below

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-stack/ui-stack.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-separator/ui-separator.html"
>

<ui-stack
  gap="s"
>
  <span>Above</span>
  <ui-separator> </ui-separator>
  <span>Below</span>
</ui-stack>

<script setup>
  import { UiSeparator, UiStack } from "@threadlabs/looma";
</script>

<template>
  <UiStack
    gap="s"
  >
    <span>Above</span>
    <UiSeparator> </UiSeparator>
    <span>Below</span>
  </UiStack>
</template>

import { UiSeparator, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="s"
  >
    <span>Above</span>
    <UiSeparator> </UiSeparator>
    <span>Below</span>
  </UiStack>;
}

/** @jsxImportSource preact */
import { UiSeparator, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="s"
  >
    <span>Above</span>
    <UiSeparator> </UiSeparator>
    <span>Below</span>
  </UiStack>;
}

<script>
  import { UiSeparator, UiStack } from "@threadlabs/looma";
</script>

<UiStack
  gap="s"
>
  <span>Above</span>
  <UiSeparator> </UiSeparator>
  <span>Below</span>
</UiStack>

import { Component } from "@angular/core";
import { UiSeparator, UiStack } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiStack, UiSeparator],
  template: `
    <div
      ui-stack
      [gap]="'s'"
    >
      <span>Above</span>
      <hr
        ui-separator
      >
      <span>Below</span>
    </div>
  `,
})
export default class Example {}

orientation="vertical"

Vertical orientation divides inline content; the parent supplies the row layout and height.

Before

After

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cluster/ui-cluster.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-separator/ui-separator.html"
>

<ui-cluster
  gap="s"
>
  <span>Before</span>
  <ui-separator
    orientation="vertical"
  > </ui-separator>
  <span>After</span>
</ui-cluster>

<script setup>
  import { UiCluster, UiSeparator } from "@threadlabs/looma";
</script>

<template>
  <UiCluster
    gap="s"
  >
    <span>Before</span>
    <UiSeparator
      orientation="vertical"
    > </UiSeparator>
    <span>After</span>
  </UiCluster>
</template>

import { UiCluster, UiSeparator } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <span>Before</span>
    <UiSeparator
      orientation="vertical"
    > </UiSeparator>
    <span>After</span>
  </UiCluster>;
}

/** @jsxImportSource preact */
import { UiCluster, UiSeparator } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <span>Before</span>
    <UiSeparator
      orientation="vertical"
    > </UiSeparator>
    <span>After</span>
  </UiCluster>;
}

<script>
  import { UiCluster, UiSeparator } from "@threadlabs/looma";
</script>

<UiCluster
  gap="s"
>
  <span>Before</span>
  <UiSeparator
    orientation="vertical"
  > </UiSeparator>
  <span>After</span>
</UiCluster>

import { Component } from "@angular/core";
import { UiCluster, UiSeparator } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCluster, UiSeparator],
  template: `
    <div
      ui-cluster
      [gap]="'s'"
    >
      <span>Before</span>
      <hr
        ui-separator
        [orientation]="'vertical'"
      >
      <span>After</span>
    </div>
  `,
})
export default class Example {}

strong emphasis

A stronger divider separates compact content without changing the default decorative dividers elsewhere.

Icon area Associated content

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cluster/ui-cluster.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-separator/ui-separator.html"
>

<ui-cluster
  gap="s"
>
  <span>Icon area</span>
  <ui-separator
    orientation="vertical"
    emphasis="strong"
    aria-hidden="true"
  ></ui-separator>
  <span>Associated content</span>
</ui-cluster>

<script setup>
  import { UiCluster, UiSeparator } from "@threadlabs/looma";
</script>

<template>
  <UiCluster
    gap="s"
  >
    <span>Icon area</span>
    <UiSeparator
      orientation="vertical"
      emphasis="strong"
      aria-hidden="true"
    />
    <span>Associated content</span>
  </UiCluster>
</template>

import { UiCluster, UiSeparator } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <span>Icon area</span>
    <UiSeparator
      orientation="vertical"
      emphasis="strong"
      aria-hidden="true"
    />
    <span>{"Associated content"}</span>
  </UiCluster>;
}

/** @jsxImportSource preact */
import { UiCluster, UiSeparator } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <span>Icon area</span>
    <UiSeparator
      orientation="vertical"
      emphasis="strong"
      aria-hidden="true"
    />
    <span>{"Associated content"}</span>
  </UiCluster>;
}

<script>
  import { UiCluster, UiSeparator } from "@threadlabs/looma";
</script>

<UiCluster
  gap="s"
>
  <span>Icon area</span>
  <UiSeparator
    orientation="vertical"
    emphasis="strong"
    aria-hidden="true"
  />
  <span>Associated content</span>
</UiCluster>

import { Component } from "@angular/core";
import { UiCluster, UiSeparator } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCluster, UiSeparator],
  template: `
    <div
      ui-cluster
      [gap]="'s'"
    >
      <span>Icon area</span>
      <hr
        ui-separator
        [orientation]="'vertical'"
        [emphasis]="'strong'"
        aria-hidden="true"
      >
      <span>Associated content</span>
    </div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: hr

Attributes

Name	Description	Property	Type	Default	Allowed values
`emphasis`	Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.	`emphasis`	`keyword`	`normal`	`normal, strong`
`orientation`	Whether the separator divides stacked content (horizontal) or inline content (vertical).	`orientation`	`keyword`	`horizontal`	`horizontal, vertical`
`selectable`	Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.	`selectable`	`boolean`	`false`	`—`
`selected`	Shows the selected document divider. Selection does not change separator semantics.	`selected`	`boolean`	`false`	`—`

Framework props

Name	Type	Default	Allowed values
`emphasis`	`"normal" \| "strong"`	`normal`	`normal, strong`
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	`horizontal, vertical`
`selectable`	`boolean`	`false`	`—`
`selected`	`boolean`	`false`	`—`

Events

No events.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

Token	Declared values	Fallback
`--ui-separator-color`	`—`	`var(--_separator-color, var(--ui-border-divider)) \| var(--ui-border-divider)`

Shared tokens

Token	Fallback
`--ui-border-divider`	`—`
`--ui-border-strong`	`—`
`--ui-border-width`	`—`
`--ui-control-size-sm`	`—`
`--ui-focus-ring`	`—`
`--ui-focus-width`	`—`
`--ui-radius-sm`	`—`
`--ui-surface-hover`	`—`