App Bar

The full-bleed chrome shell shared by top nav bars, sub-bars, and footers. It sets a color context (background + currentColor) from semantic tokens via tone, then exposes start / default / end slots. Children — Icon Link, Icon Button, a brand lockup — inherit the color, so a bar's brand comes entirely from tokens.

Inherited .astro import EsaAppBar from '@esa/ecology/esa-app-bar.astro';

Tones

Each tone maps to ecology semantic tokens; a spoke re-themes by re-pointing those tokens (e.g. --color-background-brand, --color-background-default-knockout) — never by touching this component.

<EsaAppBar tone="surface">…</EsaAppBar>
<EsaAppBar tone="brand">…</EsaAppBar>
<EsaAppBar tone="brand-strong">…</EsaAppBar>

Slots: start · main · end

The end slot is pushed right with margin-left:auto. This is the whole anatomy of a top bar.

CB Fish

Dashboard

<EsaAppBar tone="brand" as="header">
  <span slot="start"><strong>CB Fish</strong></span>
  <EsaIconLink icon="trees" iconRight="chevron-down">Mitigation work</EsaIconLink>
  <EsaIconLink icon="trending-up" iconRight="chevron-down">Reporting</EsaIconLink>
  <EsaIconLink icon="credit-card" iconRight="chevron-down">Funding</EsaIconLink>
  <EsaIconButton slot="end" icon="search" label="Search" />
  <EsaIconLink slot="end" href="/dashboard" icon="layout-dashboard">Dashboard</EsaIconLink>
  <EsaIconLink slot="end" icon="circle-user" iconRight="chevron-down">Angela Zhao</EsaIconLink>
</EsaAppBar>

API

Prop	Type	Default	Description
`tone`	`'surface' \| 'brand' \| 'brand-strong'`	`'surface'`	Color context. surface → --color-background-elevation-raised/text-primary; brand → --color-background-brand/text-inverse; brand-strong → --color-background-default-knockout/text-inverse. Children inherit the text color.
`contained`	`boolean`	`false`	Constrain the inner row to maxWidth and center it.
`maxWidth`	`string`	`'1556px'`	Inner row max-width when contained.
`as`	`'header' \| 'nav' \| 'footer' \| 'div'`	`'div'`	Semantic host element.
`ariaLabel`	`string`	—	Accessible name for the host element. REQUIRED when as="nav" — an unnamed navigation landmark cannot be told apart from any other in a screen reader's landmark list, and this component spreads no rest props, so there was previously no way to name one. Omit the word "navigation": the role is announced already.
`class`	`string`	—	Extra class on the root, for per-instance layout overrides.