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