# List Navigation Component

Navigation list with clickable rows for settings pages, menus, and navigation indexes. Each item is a card with squircle shape and subtle shadow.

## Use Cases
- Settings pages
- Mobile app menus
- Feature indexes
- Dashboard navigation
- Account/profile menus

## Basic Structure

```html
<nav class="list-nav">
  <a href="/profile">
    <svg>...</svg>
    Profile
    <small>Manage your account settings</small>
  </a>
  
  <a href="/notifications">
    <svg>...</svg>
    Notifications
    <small>Configure alerts and updates</small>
  </a>
</nav>
```

## Classes

- `.list-nav` - Container for navigation items
- `.list-nav.bordered` - Adds border dividers between items

## Item Structure

Items are direct `<a>` or `<button>` children of `.list-nav`. No additional classes needed.

Each item can contain:
1. **`<svg>`** - Icon on the left (sized to 1.25em)
2. **Text** - Title text
3. **`<small>`** - Optional description (muted, smaller text)

## Styling

Each item automatically gets:
- **Squircle shape** - Rounded corners with `corner-shape: squircle`
- **Subtle shadow** - `var(--shadow-1)` for elevated card appearance
- **Background** - Uses `var(--bg)` for proper theming
- **Gap** - `var(--pad-m)` spacing between items

## Examples

### Settings Menu
```html
<nav class="list-nav">
  <a href="#profile">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 10a4 4 0 100-8 4 4 0 000 8zm-7 8a7 7 0 1114 0H3z" />
    </svg>
    Profile
    <small>Manage your account settings</small>
  </a>

  <a href="#notifications">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
    </svg>
    Notifications
    <small>Configure alerts and updates</small>
  </a>

  <a href="#security">
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
    </svg>
    Security
    <small>Password and two-factor authentication</small>
  </a>
</nav>
```

### Bordered Variant
```html
<nav class="list-nav bordered">
  <a href="#dashboard">
    <svg>...</svg>
    Dashboard
  </a>
  <a href="#analytics">
    <svg>...</svg>
    Analytics
  </a>
  <a href="#reports">
    <svg>...</svg>
    Reports
  </a>
</nav>
```

### With Button Elements
```html
<nav class="list-nav">
  <button onclick="openSettings()">
    <svg>...</svg>
    Open Settings
    <small>Configure your preferences</small>
  </button>
</nav>
```

### Disabled State
```html
<nav class="list-nav">
  <button disabled>
    <svg>...</svg>
    Advanced Settings
    <small>Coming soon</small>
  </button>
</nav>
```

### Title Only (No Description)
```html
<nav class="list-nav">
  <a href="#dashboard">
    <svg>...</svg>
    Dashboard
  </a>
</nav>
```

## States

- **Default**: Card with squircle shape and subtle shadow
- **Hover**: Background highlight, icon brightens
- **Focus**: 2px solid outline (inset)
- **Active**: Slightly darker background
- **Disabled**: 50% opacity, no pointer events

## Differences from Sidebar Nav

| Feature | List Nav | Sidebar Nav |
|---------|----------|-------------|
| Item style | Individual cards with shadow | Flat items in a list |
| Description | Supported via `<small>` | Not supported |
| Use case | Standalone navigation rows | Sticky sidebar menus |
| Nesting | Not supported | Supports details/summary |
| Visual weight | Higher (cards with shadow) | Lower (compact) |

## Accessibility

- Use semantic `<nav>` container
- Use `<a>` for navigation links, `<button>` for actions
- Disabled buttons use `disabled` attribute
- Links can use `aria-disabled="true"` when needed
- Focus states are clearly visible