Skip to content
NockerlDesignv2.0.0

List item

In review
Live · web

Sessions: tab / click a row to select (one cyan indicator)

Settings: value rows, a disabled row, and a trailing control (toggle = its own target)

Push notificationsAlerts when a session needs you

Messages: tap a row to expand (chevron rotates down, then up); tap again to collapse

Accordion variant shipped. The trailing chevron now rotates down-to-up and the body reveals via an interpolated grid-row track, not a display swap. Selection moved to the leading slot.

Selected session: s2 · push notifications on · open message: m1. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlListItem } from '@dizyx/nockerl-react';


export function SessionList({ sessions, activeId, onSelect }: SessionListProps) {
  return (
    <div className="nk-card" role="listbox" aria-label="Sessions">
      {sessions.map((s) => (
        <NockerlListItem
          key={s.id}
          primary={s.name}
          secondary={s.statusLine}
          status={s.status}          // 'success' | 'warning' | 'error' | 'info', never cyan
          value={s.timeAgo}
          chevron
          selected={s.id === activeId}
          onSelect={() => onSelect(s.id)}
        />
      ))}
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
primary *stringPrimary text. Carries the row's accessible name (label.large role).
secondarystringOptional supporting line under the primary text (body.small role).
statusNockerlListItemStatusOptional leading status mark: renders the canonical B20 status ICON (shape + color dual-coding, never a bare dot) in the status color. Status colors only, never cyan.
leadingIconReact.ReactNodeOptional leading ICON (any node) for action rows (share / rename / delete). Shown in the leading slot when the row is neither selected nor carrying a status mark.
dangerbooleanfalseDestructive treatment. The primary text + leading icon go status-error (a delete row).
valuestringOptional trailing value text (e.g. a count, a timestamp).
trailingReact.ReactNodeOptional trailing NODE (a NockerlBadge / NockerlChip / status pill) shown before the chevron. For rich rows: an accordion header's tone pill, a tool-card's state chip. Compose a real component (NockerlBadge / NockerlStatusDisc / NockerlChip), never a hand-rolled facsimile.
chevronbooleanfalseShow a trailing NAV chevron (right-pointing, for genuinely navigational rows).
expandablebooleanfalseMake the row an accordion: trailing chevron points DOWN at rest, rotates UP when expanded; the row gets aria-expanded + aria-controls and reveals a body region below it. Mutually exclusive with the nav chevron.
expandedbooleanfalseExpanded state for an expandable row; drives the chevron rotation + body reveal.
onToggle() => voidToggle handler for an expandable row (whole-row tap). Ignored while disabled.
detailsReact.ReactNodeThe body of an expandable row, revealed when the row expands.
selectedbooleanfalseSelected state: soft cyan wash + a LEADING check. NOT a glow, not a left-rail.
disabledbooleanfalseInert + clearly-seen (never invisible) state.
onSelect() => voidActivate handler (whole-row tap). Ignored while disabled.

Also accepts the native <button> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.