Varendo

Stack

Arrange children in logical reading order with tokenized spacing.

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

Two short labels arranged in a row with a bounded gap.

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<AeliqoStackElement>("aeliqo-stack", root);
		element.direction = "row";
		element.gap = 12;
		element.align = "center";
		for (const text of ["First", "Second"]) {
			const item = document.createElement("span");
			item.textContent = text;
			element.append(item);
		}
	}))(root);

Purpose

Lays out children in reading order with the direction, gap, alignment, and wrap you set. Children keep their own semantics and focus order.

When to use it

When to use a different component

Properties and defaults

Layout props adapt the arrangement; children retain their own semantics.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
directionSupplies direction to the component as application-owned input.AeliqoStackDirection'column'
gapSets spacing between layout children using a CSS length.AeliqoStackGap16
alignSupplies align to the component as application-owned input.AeliqoStackAlign'stretch'
justifySupplies justify to the component as application-owned input.AeliqoStackJustify'start'
wrapChooses whether layout children wrap when inline space runs out.booleanfalse

Events

States and failure handling

Relevant states:

Expected result: Children are laid out with the declared flex behavior and no hidden focus changes.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Choose wrap or a different direction at the host breakpoint. Child order remains their DOM order.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoStackElement extends AeliqoFoundationElement {
    static readonly properties: {
        direction: {
            type: StringConstructor;
        };
        gap: {
            type: NumberConstructor;
        };
        align: {
            type: StringConstructor;
        };
        justify: {
            type: StringConstructor;
        };
        wrap: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    direction: AeliqoStackDirection;
    gap: AeliqoStackGap;
    align: AeliqoStackAlign;
    justify: AeliqoStackJustify;
    wrap: boolean;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.