@vibe-labs/design-components-lists

List component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-lists";

import { ListVariants, ListSizes } from "@vibe-labs/design-components-lists/types";
import type { ListStyleProps, ListItemStyleProps } from "@vibe-labs/design-components-lists/types";

Contents

Tokens (lists.css)

CSS custom properties defined in @layer vibe.tokens:

Container

Token	Default
--list-bg	--surface-base
--list-border-color	--border-subtle
--list-border-width	--border-width-1
--list-radius	--radius-lg
--list-padding	--space-1
--list-gap	0

Item

Token	Default	Description
--list-item-height-sm	2rem	Small item height
--list-item-height-md	2.5rem	Medium item height
--list-item-height-lg	3rem	Large item height
--list-item-px	--space-3	Horizontal padding
--list-item-gap	--space-3	Internal gap
--list-item-radius	--radius-md	Item corner radius
--list-item-font-size-sm	--text-xs	Small font size
--list-item-font-size-md	--text-sm	Medium font size
--list-item-font-size-lg	--text-base	Large font size
--list-item-color	--text-primary	Text color
--list-item-bg	transparent	Default background
--list-item-hover-bg	--surface-hover-overlay	Hover background
--list-item-active-bg	--surface-active-overlay	Active/press bg
--list-item-disabled-opacity	--input-disabled-opacity	Disabled opacity

Selection

Token	Default
--list-item-selected-bg	accent @ 8% mix
--list-item-selected-color	--text-primary
--list-item-selected-indicator	--color-accent
--list-item-selected-indicator-width	3px

Divider

Token	Default
--list-divider-color	--border-subtle
--list-divider-indent	0

Icon

Token	Default
--list-icon-size	1.125rem
--list-icon-color	--text-muted
--list-icon-active-color	--color-accent

Description

Token	Default
--list-description-font-size	--text-xs
--list-description-color	--text-muted

Trail

Token	Default
--list-trail-color	--text-muted
--list-trail-font-size	--text-xs

Group

Token	Default
--list-group-label-font-size	--text-xs
--list-group-label-color	--text-muted
--list-group-label-font-weight	--font-semibold
--list-group-label-px	--space-3
--list-group-label-py	--space-2

Empty State

Token	Default
--list-empty-py	--space-8
--list-empty-color	--text-muted
--list-empty-font-size	--text-sm

Drag / Reorder

Token	Default
--list-handle-color	--text-muted
--list-handle-hover-color	--text-secondary
--list-handle-size	1rem
--list-dragging-opacity	0.5
--list-dragging-shadow	--shadow-lg
--list-drop-indicator-color	--color-accent
--list-drop-indicator-height	2px

Stripe

Token	Default
--list-stripe-bg	--surface-subtle

Generated Styles (lists.g.css)

Component classes generated into @layer vibe.components.

Container

Flex column with background, border, and radius. Items stack vertically.

Variants

• default — surface base bg, subtle border
• outlined — transparent bg, stronger border
• elevated — elevated surface bg, drop shadow, no visible border
• ghost — no bg, no border, no padding

Sizes

Control item min-height and font-size. Set on container, cascades to items.

• sm — 2rem / text-xs
• md — 2.5rem / text-sm (default)
• lg — 3rem / text-base

Item

Flex row with gap for icon, content, and trail. Supports data-selected, data-disabled, data-dragging, and data-drag-over states. Focus ring via focus-visible.

Selected items show a left accent indicator via inset box-shadow.

Item Slots

• list-item-icon — leading icon, accent-colored when selected
• list-item-content — flex column wrapper for label + description
• list-item-label — primary text, truncated with ellipsis
• list-item-description — secondary text, smaller + muted
• list-item-trail — trailing slot (actions, meta), auto-pushed right
• list-item-handle — drag grip, grab cursor, touch-action: none

Flags

• divided — auto-inserts border-top between adjacent items
• striped — alternating row backgrounds on even items
• hoverable — hover bg transition on items
• interactive — pointer cursor + active press bg on items
• flush — strips all container chrome (bg, border, radius, padding)
• reorderable — enables drag/drop states (dragging opacity/shadow, drop indicator)

Groups

Section wrapper with uppercase muted label.

Empty State

Centred muted text with generous vertical padding.

TypeScript Types (types/)

ListVariants    // ["default", "outlined", "elevated", "ghost"]
ListSizes       // ["sm", "md", "lg"]

type ListVariant
type ListSize

interface ListStyleProps {
  variant?: ListVariant;
  size?: ListSize;
  divided?: boolean;
  striped?: boolean;
  hoverable?: boolean;
  interactive?: boolean;
  flush?: boolean;
  reorderable?: boolean;
}

interface ListItemStyleProps {
  selected?: boolean;
  disabled?: boolean;
  dragging?: boolean;
  dragOver?: boolean;
}

interface ListItemIconStyleProps {}
interface ListItemContentStyleProps {}
interface ListItemLabelStyleProps {}
interface ListItemDescriptionStyleProps {}
interface ListItemTrailStyleProps {}
interface ListItemHandleStyleProps {}
interface ListGroupStyleProps {}
interface ListGroupLabelStyleProps {}
interface ListDividerStyleProps {}
interface ListEmptyStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
lists.css	Token definitions
lists.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, transitions, elevation).

Build

npm run build