COMPONENTS / ATOMS / al-list-item← ALL COMPONENTS
Reference generated from the custom elements manifest — 11 properties, 4 slots, 0 events.
PLAYGROUND8 CONTROLS
PREVIEW / al-list-item / ALTITUDEList Item
Loading preview
flyoutPosition
target
FLAGS
ICON SLOTS
CODE — HTML / REACT
Guidance
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 PARITY
CODE AHEADAltitude Design SystemFIGMA SET · List Item6 PROPERTY DIFFSFROM TRACKED PROJECTION
The component changed since the last confirmed sync — the Figma set is behind.
- DECIDED BY
- CONTRACT DIFF
- FIGMA SIDE
- OBSERVED
- LAST CONFIRMED SYNC
- 2026-08-28
- PUBLIC SURFACE
- 11 ATTR · 4 SLOT · 0 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDISAGREEMENTCODE / CANVAS
slot:after[slot] slot-unpairedafter / —
slot:before[slot] slot-unpairedbefore / —
active[state] missing-in-code— / active
theme/color/background/danger-default[token-binding] missing-in-canvas--al-theme-color-background-danger-default / —
theme/color/content/neutral-default[token-binding] missing-in-code— / theme/color/content/neutral-default
theme/space/xxs[token-binding] missing-in-canvas--al-theme-space-xxs / —
ACCESSIBILITY
CHECKEVIDENCEDETAILRESULT
Default stateAXElist-item--DefaultPASS
Advanced statesAXE5 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
COLOR CONTRAST0 RULES 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.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 6 STORIES.
INSTALL
import '@southleft/al-web-components/components/list-item';
import { ALListItem } from '@southleft/al-react';API — 11 PROPS
PROPTYPEDEFAULT
variant'static'Variants
- **static** renders a list item that isn't interactive. Use for typeahead dropdowns—
isErrorbooleanError state
1. Changes the component's treatment to represent an error—
isDisabledbooleanDisabled attribute—
behavior'flyout'Target attribute for a link (i.e. set to _blank to open in new tab)
- **flyout** changes the nested items into flyout menus—
flyoutPosition'left' | 'bottom' | 'top'Flyout position (only use with flyout behavior)
- **left** positions the flyout menu to the left of the item trigger
- **bottom** positions the flyout menu below the item trigger—
hrefstringURL if this is an <a> element - this swaps <button> for <a>—
valuestring | { label: string; value: any; [key: string]: unknown }Value for a list item that needs to return a value to an input in a dropdown. This is required for search/drop-down.
Value can be a string or object ({lable, value} pair)—
isActivebooleanActive state—
isCurrentbooleanCurrent state—
onClick() => voidDisabled attribute—
target'_blank' | '_self' | '_parent' | '_top'Target attribute for a link (i.e. set to _blank to open in new tab)
- **_blank** yields a link that opens in a new tab
- **_self** yields a link that loads the URL into the same browsing context as the current one. This is the default behavior
- **_parent** yields a link that loads the URL into the parent browsing context of the current one.
If there is no parent, this behaves the same way as _self
- **_top** yields a link that loads the URL into the top-level browsing context. If there is no parent, this behaves the same way as _self.—
SLOTS
SLOTDESCRIPTION
beforeOptional leading content.
afterOptional trailing content.
itemsNested list items displayed when this item expands.
(default)The content of the list item
EVENTS
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
PUBLIC METHODS
METHODDESCRIPTION
focusOnFirstItem()Focus on first list item 1. Used for keyboard functionality within the list
focusOnLastItem()Focus on last list item 1. Used for keyboard functionality within the list
handleOnMouseOver()Handle click outside the component 1. Close the show hide panel on click outside 2. If the nav is already closed then we don't care about outside clicks and we can bail early 3. By the time a user clicks on the page the shadowRoot will almost certainly be defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly undefined. To work around that we'll check that we have a shadowRoot (and a rendered .host) element here to appease the TypeScript compiler. This should never actually be shown or run for a human end user. 4. Check to see if we clicked inside the active navigation item 5. If the navigation is active and we've clicked outside of the nav then it should be closed.
handleKeyDown()Handle keydown 1. If left or up arrow key is struck and radio field item exists before current item, remove checked from all items and add it to the next item 2. If right or down arrow key is struck and radio field item exists after current item, remove checked from all items and add checked to the next item. Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
handleClose()—
handleMouseEnter()Handle mouse enter 1. If parent is contextual menu and the item doesn't have subitems, close the contextual menu 2. If the parent is a search, close the dropdown if item is selected
handleMouseLeave()Handle mouse leave
handleClick()Handle click 1. If parent is contextual menu and the item doesn't have subitems, close the contextual menu 2. If the parent is a search, close the dropdown if item is selected
onItemClick()—
dynamicInactive()Handle all mouseout events
dynamicActive()Handle all dynamic placement on mouseover
SOURCE — components/list-item/list-item.ts · Atoms/Text/List Item