COMPONENTS / MOLECULES / al-list← ALL COMPONENTS

List

<al-list><ALList> REACTbeta

Reference generated from the custom elements manifest — 2 properties, 1 slots, 0 events.

PLAYGROUND0 CONTROLS

PREVIEW / al-list / ALTITUDE

Loading preview

List Item

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYALTITUDE DESIGN SYSTEM

NOT IN FIGMAAltitude Design System

This component exists in code and has no Figma component set.

DECIDED BY: NEVER SYNCED
FIGMA SIDE: NEVER OBSERVED
LAST CONFIRMED SYNC: NEVER
PUBLIC SURFACE: 2 ATTR · 1 SLOT · 0 EVENT · 0 PART

The two sides have never been confirmed equal, so there is no baseline to compare against.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXElist--DefaultPASS

Advanced statesAXE6 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 7 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdslist--WithLinks, list--WithStatic2

INSTALL@southleft/al-web-components/components/list

import '@southleft/al-web-components/components/list';
import { ALList } from '@southleft/al-react';

API — 2 PROPS2 DOCUMENTED

PROPTYPEDEFAULT

behavior'overflow'Behavior - **overflow** turns the list into an overflow list—

direction'row'Orientation - default renders a stacked list - **horizontal** renders the list side-by-side and wraps unless overflow is turned on—

SLOTS1

SLOTDESCRIPTION

(default)The list items

EVENTS0

THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.

PUBLIC METHODS3

METHODDESCRIPTION

onScroll()On overflow list inner scroll 1) On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true. 2) On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.

setShadows()Set right and left gradients on overflow list 1) Target the overflow list items and calculate the width of the children + margin 2) Get the total width of the children offscreen when items overflow 3) If table width is less than or equal to overflow list width, remove all shadows 4) If overflow list inner scroll isn't all the way to the left or to the right, turn all shadows on 5) If overflow list inner scroll left 2px is >= to width of table offscreen, turn off right shadow and turn left shadow on 6) Else, set the right shadow to true and the left shadow to false 7) Overflow list inner scrollLeft is off by 2px and needs that additional 2 pixels to remove the end shadow once scrolled all the way to the right.

setIndentation()—

SOURCE — components/list/list.ts · Molecules/List