TopBar

Summary

TopBar is the application header at the top of a view. It composes platform chrome (status bar / window controls), a centred or leading title, optional leading/trailing icon-button actions, and an optional search field. Its internal structure swaps by breakpoint (xs = phone, md = tablet/desktop) and by platform, and it reacts to scroll position via isScrolled (adds a background blur). In v2.0 the iOS icon actions render as Liquid-Glass buttons.

Anatomy (md, full TopBar)

1
NativeStatusBar — platform status bar (time / signal / battery). iOS & Android.
2
_TopBarXsBlock — the xs heading block (leading action + heading + trailing action), variant compact.
3
SearchInput — search field shown at md (Desktop).
4
_TopBarIconButton — leading action (44×44).
5
_TopBarIconButton — trailing action (44×44).
6
NativeWindowControl — desktop window controls (min/max/close on Windows; traffic lights on macOS).

📐Title (“heading”): colour text-primary #2A2A2D, centre-aligned, style subHeading (Inter Medium 16/22). Icon button: 44×44, radius full, BGGlassFill #F7F7F8 @50% + glass layer, icon size M with 10px padding.

Properties / API

Property	Type / values	Default	Description
`breakpoint`	`xs` · `md`	`md`	Compact (phone) vs expanded (tablet/desktop) layout. xs shown for iOS & Android only.
`platform`	`iOS` · `android` · `windows` · `macOS` · `linux` · `browserExtension`	—	Swaps chrome (status bar vs window controls), widths and action-button rendering.
`isScrolled`	boolean	`false`	At-top vs scrolled. `true` applies a background blur (blur-md 16px) behind the bar.
`heading`	text	“heading”	Title text; subHeading style, centre-aligned.

_TopBarXsBlock

Property	Values	Default	Description
`variant`	`compact` · `search`	`compact`	`compact` = title + 2 icon buttons; `search` = SearchInput + 2 icon buttons.
`platform`	`android` · `iOS`	—	Renders the two icon buttons per platform (iOS = glass).
`iconButtonStart` / `iconButtonEnd`	boolean	`true`	Show leading / trailing action.

_TopBarIconButton

Property	Values	Default	Description
`platform`	`default` · `iOS` · `android`	`default`	Controls fill. iOS = Liquid Glass; android = #F7F7F8 @70% + border #E2E2E4 + background blur (blur-md 16); `default` = solid neutral fill.
`size` / `variant` / `appearance`	`md` / `neutral` / `fill`	md / neutral / fill	44×44 neutral fill icon button.
`state` / `disabled`	`default`·`active` / boolean	default / false	Interaction state.
`iconSwapMd`	instance	—	Swappable icon slot.

Variants

xs block: compact (title + actions) vs search (search field + actions).
Action button: default (solid) / iOS (Liquid Glass) / android (translucent + blur).
By platform the whole bar differs: iOS/android show NativeStatusBar; windows/macOS show NativeWindowControl + SearchInput at md.

States

isScrolled = false — transparent over content, no blur.
isScrolled = true — background blur (blur-md 16px) behind the bar.
Icon button: default / active, plus disabled.

Sizes / heights

Icon button: 44 × 44, radius full (24px icon centred + 10px padding).
_TopBarXsBlock: height 54 (xs); inner container height 44.
Title text: subHeading 16/22.

Breakpoints & platforms

Two breakpoints (xs, md); no sm/lg/xl. Width is driven per platform.

Breakpoint	Platform	Width	Chrome / layout notes
xs	iOS	393	NativeStatusBar (iPhone). Glass action buttons. Padding L/R 16 (fixed v2.0).
xs	android	393	NativeStatusBar (camera). Padding L/R 16.
md	iOS	744	NativeStatusBar (iPad). Vertical, top-center, L/R padding 0.
md	android	744	NativeStatusBar (camera). Vertical, middle-left.
md	windows	900	NativeWindowControl. Horizontal, spaced; padding top 8 / bottom 12 / left 80 / right 0.
md	macOS	900	NativeWindowControl. Padding top 8 / bottom 12 / left 9 / right 24.
md	browserExtension	900	Padding top 8 / bottom 12 / left 64 / right 0.

📝xs block layout: vertical, middle-left, padding bottom 10 + left/right 16 (the v2.0 12→16px fix); inner container horizontal “middle, spaced equally” with auto spacers between leading button, centred heading and trailing button.

Design tokens

Token	Value
text-primary · text-secondary	#2a2a2d · #696a6d
bg-glass	#f7f7f8b2 (≈70%)
bg-gradient-primary-start → …-end	#f7f7f8 → #f7f7f800
border-secondary	#e2e2e4
blur-md	background blur 16
radius border-radius-full	9999
spacing	0 / 8 / 10 / 12 / 16 / 20 / 24 / 64 / 80
subHeading · subBody	Inter Medium 16/22 · Inter Regular 14/20
Liquid Glass (iOS buttons)	Dispersion 20 · Light Angle 0 · Depth 30 · Frost 6 · Opacity 25 · Splay 20 · Refraction 70

Accessibility

⚠️No dedicated accessibility frame on the page — guidance below is inferred from the spec metadata.

Title uses subHeading — expose as the view’s heading for screen-reader navigation.
Each icon action (44×44) is icon-only → must carry an accessible label/name; the icon alone is insufficient.
Hit area is the full 44×44 (meets the 44pt minimum touch target); icon 24px centred with 10px padding.

Usage

📝No Do/Don't (Usage Guidelines) frame exists on this page. Recommended: keep the title concise and centred; limit bar actions to the most important leading/trailing controls; use the search variant only when search is primary on the view.

Implementation status

Implemented at v1.0 across platforms; the v2.0 work (iOS glass buttons + xs/md layout adjustments on Android & iOS) is the scope. Repo implementations found on Android, iOS, Windows.

iOS ✓ (v1.0) Android ✓ (v1.0) Windows ✓ (v1.0) macOS ✓ (v1.0)

⚠️v2.0 layout changes are scoped to Android & iOS, breakpoints xs/md. Windows / macOS / Linux / extension are unchanged.

Changelog

v2.024.6.2026
- Supernova adjustments.
- Only changes on Android & iOS (breakpoint xs, md).
- iOS: added glass Buttons.
v1.016.10.2025
- Initial release.

📝Notable interim changes: 29.6.2026 — added additional iOS glass variants · 26.6.2026 — removed pageHeading from xs subcomponent · 22.6.2026 — TopBar 2.0 for xs · 19.5.2026 — nested icon prop rename + iOS xs padding 12→16px · 28.4.2026 — added browserExtension variant · 13.1.2026 — added linux variant.

Ticket scaffold

Title: TopBar v2.0 — Supernova adjustments + iOS glass buttons [iOS | Android]

Acceptance criteria

iOS: bar icon actions render as Liquid-Glass buttons (see ButtonGlass spec); xs/md layout updated.
Android: xs/md layout adjustments; action buttons translucent + blur.
xs block: leading action + centred heading + trailing action, padding L/R 16.
isScrolled=true applies blur-md (16) behind the bar.
Icon actions are 44×44 with accessible labels; title exposed as heading.
Desktop (Windows/macOS/Linux) unchanged; light + dark verified.
Visual diff against the Figma v2.0 Specification frames.

Jira ticket template

Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate per platform (this update is iOS-focused; Android xs/md).

Jira · duplicate per platform

h2. [iOS | Android] · TopBar v2.0 — Supernova adjustments + iOS glass buttons

*Project / Epic*  : [EPIC-KEY]  Aurora AppKit · Supernova
*Issue type*      : Story
*Components*      : TopBar · [PLATFORM]
*Labels*          : aurora-appkit, supernova, design-system, top-bar, mobile
*Priority*        : [Medium]
*Story points*    : [estimate]
*Fix version*     : TopBar v2.0
*Sprint*          : [sprint]
*Assignee*        : [assignee]

h3. Background
Supernova adjustments to the app header. SCOPE: changes on Android and iOS at breakpoints xs and md only; desktop (Windows/macOS/Linux) unchanged. Headline iOS change: bar icon actions render as glass buttons (Liquid Glass / ButtonGlass).

h3. Objective
Implement TopBar v2.0 on [PLATFORM] (iOS or Android): xs/md layout adjustments and, on iOS, the glass action buttons.

h3. Design source
* Figma — "Aurora AppKit · Components" -> TopBar page (Specification, Changelog frames)
* Handover spec — supernova-handover/topbar.html
* [paste the platform-specific Figma frame link]

h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* Anatomy : NativeStatusBar · xs heading block (leading action + centred heading + trailing action) · md SearchInput (desktop) · icon-button actions · NativeWindowControl (desktop)
* Properties : {{breakpoint}} (xs | md) · {{platform}} · {{isScrolled}} (false | true -> background blur {{blur-md}} 16) · {{heading}} (centred, {{subHeading}} style)
* Action button : 44x44, radius {{border-radius-full}}; iOS = Liquid Glass; Android = translucent {{bg-glass}} + border {{border-secondary}} + {{blur-md}}
* xs block : leading + centred heading + trailing, padding bottom 10 / left+right 16 (v2.0 fix 12 -> 16)
* iOS Liquid Glass params (reference) : Dispersion 20 · Depth 30 · Frost 6 · Opacity 25 · Splay 20 · Refraction 70

h3. Scope
In scope : xs/md TopBar adjustments on [PLATFORM]; iOS glass action buttons.
Out of scope : desktop platforms (unchanged); SearchInput internals.

h3. Dependencies
* iOS: ButtonGlass / Liquid-Glass capability on [PLATFORM] (BLOCKER for the iOS glass buttons)

h3. Acceptance criteria
# xs block renders leading action + centred heading + trailing action with L/R padding 16.
# iOS action buttons render as glass; Android actions are translucent + blur; both 44x44 with accessible labels.
# {{isScrolled = true}} applies {{blur-md}} behind the bar; at-top is transparent.
# Title is exposed as the view heading; icon-only actions carry accessible names.
# Desktop (Windows/macOS/Linux) is unchanged; tokens only; light and dark verified.

h3. Definition of Done
* Matches the Figma v2.0 Specification (visual diff) at xs / md for [PLATFORM], light and dark
* Tokens only; desktop untouched
* Tests updated; reviewed and merged; version v2.0; changelog updated
* Heading + action labels verified with the [PLATFORM] screen reader

h3. QA / test notes
* Scroll to toggle the blur; check glass legibility over content
* Phone (xs) and tablet (md); dark mode