Varendo

ScrollArea

Preserve native scrolling, focus visibility, zoom and platform affordances.

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

A labelled scroll region containing longer report 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<AeliqoScrollAreaElement>("aeliqo-scroll-area", root);
		element.axis = "y";
		element.label = "Report rows";
		element.tabIndex = 0;
		const content = document.createElement("p");
		content.textContent = "Scrollable report content that retains focus visibility.";
		element.append(content);
	}))(root);

Purpose

A native scroll viewport with an accessible label for overflow content. axis sets scroll direction; tabIndex controls whether keyboard users can enter the region.

When to use it

When to use a different component

Properties and defaults

The host supplies an accessible label and controls whether the region participates in focus order.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
axisSupplies axis to the component as application-owned input.AeliqoScrollAreaAxis'y'
labelProvides the visible label and accessible name for the component.string''
tabIndexControls whether the scroll viewport participates in the host tab order.number0

Events

States and failure handling

Relevant states:

Expected result: Overflow remains scrollable and the region retains a discoverable focus boundary.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Bound its height only when independent scrolling is needed. Keep enough visible space for keyboard scrolling at high zoom.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoScrollAreaElement extends AeliqoFoundationElement {
    static readonly properties: {
        axis: {
            type: StringConstructor;
        };
        label: {
            type: StringConstructor;
        };
        tabIndex: {
            attribute: string;
            type: NumberConstructor;
        };
    };
    axis: AeliqoScrollAreaAxis;
    label: string;
    tabIndex: number;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.