Spec — App bars

Facet Visual of Koder Design. Material parity: https://m3.material.io/components/top-app-bar and https://m3.material.io/components/bottom-app-bar.

2 anchor positions

Always at most ONE top bar and ONE bottom bar per screen. Do not stack two top bars; nest a secondary toolbar inside content if needed.

R1 — Top bar variants

Medium and Large COLLAPSE into Small on scroll: title slides up into the toolbar row at scroll-y > title-height. This is the canonical collapse pattern.

Anatomy (small top bar)

┌────────────────────────────────────────────────┐
│  ☰   Page title                  ◷  ⋮  👤      │
└────────────────────────────────────────────────┘
   ↑   ↑                            ↑   ↑   ↑
 nav  title                       action overflow user

• Height: 64 px
• Horizontal padding: 16 px
• Nav icon slot: 24 px icon, left edge, optional
• Title: title-large (22/28, weight 500)
• Action slots: up to 3 icon buttons + 1 overflow menu
• Container bg: surface-container (light: tinted; dark: tonal)

R2 — Action slot rules

• Maximum 3 visible icon actions; rest into overflow (⋮)
• Order from left to right by frequency / importance
• Each action is a 24 px icon button with 48 × 48 px hit target
• Action labels live in tooltip (long-press on mobile, hover on desktop)
• Disable actions don't collapse — show at 38% opacity

R3 — Title behavior

Never wrap title to a 2nd line in small/center. Truncate with ellipsis or use Medium/Large variant.

R4 — Scroll behavior

Pick ONE scroll behavior per screen; don't mix.

R5 — Bottom app bar (mobile primary)

Anatomy:

┌────────────────────────────────────────────────┐
│  ⌂   ⌥   ⌽                                  ⊕  │
└────────────────────────────────────────────────┘
   ↑   ↑   ↑                                  ↑
   actions (left-aligned)                    FAB (right)

• Height: 80 px (includes 24 px FAB cradle space)
• Action slots: up to 4 icon buttons, left-aligned
• FAB cradle: right side, FAB sits on bar (notched on Material 2, flat on Material 3)
• Container bg: surface-container
• Elevation: 2 dp (sits above scrolling content)

Use bottom bar ONLY on mobile + tablet portrait. On larger surfaces, move actions to top bar or side rail.

R6 — Bottom bar + FAB

FAB anchored to bottom bar cradle stays visible when bar scrolls.

R7 — Surface adaptation

App bars MUST adapt per app-layout/window-size-classes.kmd:

R8 — States

R9 — Accessibility

• Top bar: role="banner" on container
• Title: heading level matches page hierarchy (h1 on landing page)
• Nav icon: aria-label="Open navigation" or specific verb
• Actions: each icon has aria-label; overflow has aria-label="More actions"
• Bottom bar: role="navigation" if actions navigate; else no role
• Keyboard order: nav → title (focusable if editable) → actions → overflow → FAB
• Skip-to-content link before app bar for screen readers

R10 — Per-preset variation

R11 — Forbidden patterns

• ❌ Two top bars stacked on one screen
• ❌ Bottom bar on Expanded/Large window-size class
• ❌ More than 3 icon actions visible in top bar (use overflow)
• ❌ More than 4 actions in bottom bar
• ❌ Title that wraps to 2 lines in Small / Center variant
• ❌ Bottom bar without safe-area inset on iOS / Android gesture-nav
• ❌ Hiding action labels entirely (always provide tooltip + aria-label)
• ❌ Animating the title across the entire bar width on collapse (jarring)

Cross-link

• app-layout/safe-area.kmd — bottom bar must respect gesture-nav inset
• app-layout/window-size-classes.kmd — adaptive per breakpoint
• themes/elevation.kmd — scroll-state tonal overlay
• themes/color-roles.kmd — surface-container token
• interaction/states.kmd — icon button states
• foundations/elements.kmd — Container family (bar) + Control family (actions)
• components/navigation.kmd — sibling for primary navigation containers