Separator

class ui.common.Separator()

A custom web component that renders a visual separator line.

This component provides a flexible separator that can be oriented either horizontally or vertically. It’s commonly used in UI layouts to visually divide content sections, toolbar items, or menu groups.

The separator respects CSS custom properties for theming and automatically adjusts its styling based on the specified direction.

Index

Constructors

Properties

Methods

Constructors

ui.common.Separator.constructor()
Separator(): Separator

Returns: Separator

Properties

ui.common.Separator.styles

static

styles: CSSResult[]

Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
ui.common.Separator.direction
direction: (“horizontal” | “vertical”)

The orientation of the separator line.

Determines how the separator is displayed and oriented within its container:

  • “vertical”: Creates a vertical line (default), typically used in horizontal layouts like toolbars
  • “horizontal”: Creates a horizontal line, typically used in vertical layouts like menus

The direction affects the separator’s dimensions and border styling:

  • Vertical separators have height (80%) and left border
  • Horizontal separators have width (80%) and top border

Methods

ui.common.Separator.render()
render(): unknown

Renders the separator component template.

Creates a simple <hr> element with CSS classes that determine the separator’s appearance based on the direction property. The element uses CSS custom properties for theming and applies appropriate styling for either horizontal or vertical orientation.

The rendered element:

  • Uses semantic <hr> element for accessibility
  • Applies base “separator” class for common styling
  • Adds direction-specific class (“separator-horizontal” or “separator-vertical”)
  • Respects –hoops-separator-color CSS custom property for theming

Returns: unknown

TemplateResult containing an <hr> element with appropriate CSS classes