Components

Human’s UI is built with Lit web components. Each component uses design tokens exclusively — no hardcoded colors, sizes, or durations.

Component Library

Interactive Components

Component	Tag	Description
Button	<hu-button>	Primary, secondary, ghost, danger variants
Badge	<hu-badge>	Status indicators with semantic colors
Tooltip	<hu-tooltip>	Contextual help on hover/focus
Toggle	<hu-toggle>	On/off switches with micro-physics
Command Palette	<hu-command-palette>	CMD+K global search

Layout Components

Component	Tag	Description
Card	<hu-card>	Elevated surface with glass option
Sheet	<hu-sheet>	Slide-in panel from edge
Modal	<hu-modal>	Centered dialog with backdrop
Dialog	<hu-dialog>	Confirmation/action dialogs
Sidebar	<hu-sidebar>	Navigation sidebar

Display Components

Component	Tag	Description
Avatar	<hu-avatar>	User avatars with fallback initials
Floating Mic	<hu-floating-mic>	Voice input indicator

Token Integration

Every component consumes tokens through CSS custom properties. Example from hu-card:

:host {
  background: var(--hu-bg-surface);
  border: 1px solid var(--hu-border-subtle);
  border-radius: var(--hu-radius-lg);
  box-shadow: var(--hu-shadow-card);
  padding: var(--hu-space-lg);
}

:host(:hover) {
  box-shadow: var(--hu-shadow-lg);
  transition: box-shadow var(--hu-duration-normal) var(--hu-ease-default);
}

Component Variants

Button Variants

<hu-button variant="primary">Save</hu-button>
<hu-button variant="secondary">Cancel</hu-button>
<hu-button variant="ghost">More info</hu-button>
<hu-button variant="danger">Delete</hu-button>

• Primary: Accent background, on-accent text, gradient overlay, physics press
• Secondary: Surface background, accent text, subtle border
• Ghost: Transparent background, accent text, hover overlay
• Danger: Error background, on-error text

Badge Variants

<hu-badge variant="success">Online</hu-badge>
<hu-badge variant="warning">Pending</hu-badge>
<hu-badge variant="error">Failed</hu-badge>
<hu-badge variant="info">New</hu-badge>

Accessibility Patterns

All components implement:

• Focus management: Visible focus rings using --hu-focus-ring token
• Keyboard navigation: Full keyboard support (Enter, Space, Escape, Arrow keys)
• ARIA attributes: Proper roles, states, and properties
• Screen reader text: Hidden labels where visual indicators are insufficient

Focus Ring Standard

:host(:focus-visible) {
  outline: var(--hu-focus-ring-width) solid var(--hu-focus-ring);
  outline-offset: var(--hu-focus-ring-offset);
}

Motion Patterns

Components apply micro-physics contextually:

Component	Interaction	Physics Preset
hu-button	Click	button-press / button-release
hu-card	Hover	card-hover
hu-modal	Open	modal-anticipation
hu-toggle	Toggle	toggle-squash
hu-command-palette	Open	dropdown-anticipation

Glass Integration

Components can opt into glass tiers:

<hu-card class="glass">Standard glass card</hu-card>
<hu-card class="glass-prominent">Prominent glass card</hu-card>

View Catalog

The full component catalog with interactive examples is available at /catalog.html in the UI development server:

5173/catalog.html

cd ui && npm run dev