Varendo

Heading

Preserve logical document hierarchy independent of visual size.

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 report heading at level 2 with an independent visual size.

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<AeliqoHeadingElement>("aeliqo-heading", root);
		element.level = 2;
		element.size = "heading";
		element.text = "Weekly report";
	}))(root);

Purpose

A heading at the document level you set, with visual size chosen separately. Changing size never changes the level announced to assistive technology.

When to use it

When to use a different component

Properties and defaults

Document level and visual size are separate so hierarchy remains truthful.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
levelSets the semantic heading level while preserving the component visual style.AeliqoHeadingLevel2
sizeSelects the component size from its bounded visual variants.AeliqoHeadingSize'heading'
textProvides trusted plain text content. The component never interprets it as HTML.string''

Events

States and failure handling

Relevant states:

Expected result: The heading contributes the requested document outline level.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Headings wrap with the reading column. Preserve their document order if the host changes the visual size or section layout.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoHeadingElement extends AeliqoFoundationElement {
    static readonly properties: {
        level: {
            type: NumberConstructor;
        };
        size: {
            type: StringConstructor;
        };
        text: {
            type: StringConstructor;
        };
    };
    level: AeliqoHeadingLevel;
    size: AeliqoHeadingSize;
    text: string;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.