Varendo

Surface

Provide consistent bounded chrome; never impose dashboard cards on every control.

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 labelled section containing ordinary light-DOM content.

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<AeliqoSurfaceElement>("aeliqo-surface", root);
		element.as = "section";
		element.tone = "surface";
		element.label = "Report panel";
		element.textContent = "Bounded surface content";
	}))(root);

Purpose

Groups slotted content in a labelled section with a chosen surface tone. It adds visual containment, not card behavior or data meaning.

When to use it

When to use a different component

Properties and defaults

The host owns the section label and chooses canvas, surface, or raised treatment.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
asSupplies as to the component as application-owned input.AeliqoSurfaceAs'div'
toneSelects a semantic visual tone such as neutral, informative, success, warning, or danger.AeliqoSurfaceTone'surface'
labelledByReferences the ID of host text that labels this surface.string''
labelProvides the visible label and accessible name for the component.string''

Events

States and failure handling

Relevant states:

Expected result: Content is grouped without adding card interaction or data semantics.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Surface follows the width of its parent and adds no columns. Put layout breakpoints on the containing Stack or Grid.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoSurfaceElement extends AeliqoFoundationElement {
    static readonly properties: {
        as: {
            type: StringConstructor;
        };
        tone: {
            type: StringConstructor;
        };
        labelledBy: {
            attribute: string;
            type: StringConstructor;
        };
        label: {
            type: StringConstructor;
        };
    };
    as: AeliqoSurfaceAs;
    tone: AeliqoSurfaceTone;
    labelledBy: string;
    label: string;
    protected willUpdate(): void;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.