> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledNavigationBar

> Floating pill navigation bar with NavDestination items, badges, and haptics

The app's floating bottom navigation: a pill (stadium) bar that hovers above the content with an optional FAB beside it. Source: [`styled_navigation_bar.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_navigation_bar.dart).

```dart theme={null}
StyledNavigationBar(
  destinations: [
    NavDestination(
      activeIcon: Icon(Symbols.home_filled),
      inactiveIcon: Icon(Symbols.home),
      label: 'Home',
      isActive: tab == 0,
      onTap: () => switchTab(0),
    ),
    // …
  ],
  fab: StyledFloatingActionButton(
    icon: AshIcon(AshIcons.conversation),
    label: 'Talk',
    onPressed: startSession,
  ),
)
```

## StyledNavigationBar

| Parameter | Type | Notes |
| - | - | - |
| `destinations` | `List<NavDestination>` | **required** — spread evenly across the pill |
| `fab` | `Widget?` | Rendered in a `Row` beside the bar (8 px gap), typically a [StyledFloatingActionButton](https://design.slingshotai.com/components/styled-floating-action-button.md) |

Anatomy: 64 px tall, stadium shape, `surfaceBg` fill with a 3 px inside `surfaceElevated` stroke, strong drop shadow (black-54, blur 12), 24 px outer padding, bottom `SafeArea`. **Callers own show/hide animation** — the bar itself doesn't animate visibility.

## NavDestination

| Parameter | Type | Notes |
| - | - | - |
| `activeIcon` / `inactiveIcon` | `Widget` | **required** — swapped by state, tinted via `IconTheme` (24 px) |
| `label` | `String` | **required** — `buttonSmall`, single line |
| `isActive` | `bool` | **required** — `contrastStrong` when active, `contrastWeak` when not |
| `showBadge` | `bool` | default `false` — 9 px `badgeRed` dot on the icon |
| `onTap` | `VoidCallback` | **required** — fires **after**`HapticFeedback.selectionClick()` |

## Tokens consumed

`surfaceBg`, `surfaceElevated`, `contrastStrong`, `contrastWeak`, `badgeRed`; typography `buttonSmall`.

## Real usage

`lib/widgets/navigation/navigation_shell.dart` — the app's main shell renders the bar under an `IndexedStack` of tabs and passes the session FAB.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.