Varendo

Separator

Express visual or semantic separation without polluting keyboard order.

FamilyfoundationLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

One horizontal separator between report sections.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAvatarElement,
  AeliqoBadgeElement,
  AeliqoButtonElement,
  AeliqoGridElement,
  AeliqoHeadingElement,
  AeliqoIconButtonElement,
  AeliqoLinkElement,
  AeliqoScrollAreaElement,
  AeliqoSeparatorElement,
  AeliqoSplitPaneElement,
  AeliqoStackElement,
  AeliqoSurfaceElement,
  AeliqoTextElement,
} from "@varendo/web/foundation";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoSeparatorElement>("aeliqo-separator", root);
		element.orientation = "horizontal";
	}))(root);

Purpose

A horizontal or vertical divider between adjacent sections. Keep it decorative for pure visuals; expose its semantics only when the boundary aids comprehension.

When to use it

When to use a different component

Properties and defaults

Set decorative false when the boundary is meaningful to assistive technology.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
orientationSets the horizontal or vertical orientation and associated keyboard behavior.AeliqoSeparatorOrientation'horizontal'
decorativeMarks the visual as decorative so it is removed from the accessibility tree.booleantrue

Events

States and failure handling

Relevant states:

Expected result: The boundary uses hr or separator semantics according to the host choice.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Choose horizontal orientation for stacked content and vertical orientation for inline sections. The host controls its length.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoSeparatorElement extends AeliqoFoundationElement {
    static readonly properties: {
        orientation: {
            type: StringConstructor;
            reflect: boolean;
        };
        decorative: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    orientation: AeliqoSeparatorOrientation;
    decorative: boolean;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.