Specialized
The power-user layer. Calendars, pickers, filters, bulk selection, file browsing and audit trails — dense, keyboard-friendly patterns that turn a pretty interface into a working tool. Each one composes from the same tokens and primitives as the rest of Barua, so the heavy screens still feel light.
Command Palette
The .b-cmdk glass palette — full behaviour, ⌘K wiring
and filtering live in Navigation
› Command Menu. Shown here as a static snapshot of the anatomy:
input, grouped list, active item, footer hints.
- Actions
- Go to
Calendar
A full month panel. .b-calendar__header pairs the month
label with ghost icon buttons; the __grid lays seven
__weekday cells over circular __day
buttons. Neighbouring-month days take .is-muted, today
takes .is-today plus aria-current="date",
and unavailable days are simply disabled.
role="grid" with each week as a role="row"
of role="gridcell" day buttons, and move focus with
arrow keys (one tab stop for the whole grid). Mark today with
aria-current="date" — never colour alone — and give
every day an accessible name like aria-label="Thursday 15
October 2026". Disabled days stay in the reading order so
screen-reader users hear why a gap exists.Date Range
The same calendar expresses a span: solid endpoints get
.is-range-start / .is-range-end (squared on
the inner edge), and every day between takes .is-in-range
for a continuous soft-accent band.
Date Picker
.b-datepicker is a field that grows a calendar. Compose
a .b-input-group with a leading calendar affix; when
open, append a .b-calendar directly inside the wrapper —
it drops beneath the field as an elevated popover
(position: absolute, --b-elevation-4,
popover z-index) with zero extra wiring.
Color Picker
The native .b-color-picker input and full field patterns
are documented in Forms › Color
Picker. For constrained palettes, a row of
.b-swatches is usually the better control — pass each
swatch its colour and mark the choice with .is-selected.
Emoji Picker
A compact .b-emoji-picker panel: small search field on
top, then a scrollable eight-column __grid of plain
buttons that scale up on hover.
Mention Picker
Typing @ in a composer opens a .b-mention-list
of people — avatar initials, __name, muted
__handle, with .is-active tracking the
keyboard. Committed mentions render inline as .b-mention
tokens.
Handing the Q3 invoices to @amina — @baraka has the port-fees context.
User Picker
Compose a .b-multiselect token field with the mention
list as its open listbox: chosen people become removable
.b-chip tokens, the inline input keeps filtering, and
the list below tracks the highlighted option.
- NM Neema Mushi @neema
- JK Juma Kibwana @juma
role="combobox" with
aria-expanded and aria-controls pointing at
a role="listbox" whose rows are
role="option". Track the highlight with
aria-activedescendant (focus never leaves the input),
reflect it visually with .is-active, and announce the
filtered count via a polite live region.Search Results
A .b-search-results stack renders each hit as a
title, snippet and breadcrumb __path. Wrap matched terms
in <mark> — or .b-highlight on any
element — for the soft yellow wash.
Filter Bar
.b-filter-bar is a wrapping row that composes a small
search field, .b-filter-chip facets, a
.b-sort-control and a clear-all link — no bespoke
styling, just flex and gap.
Filter Chip
A dashed pill that reads as “add a constraint”. On hover the dashed
border and label tint accent; once applied, .is-active
swaps to a solid soft-accent fill and the chosen
__value renders semibold beside the facet name.
Sort Control
A quiet text button for column or list ordering. .is-asc
and .is-desc append an accent arrow via CSS; with
neither class the control reads as unsorted. Cycle
asc → desc → none on press and mirror the state
with aria-sort on the column header.
Bulk Actions
When a selection exists, a glass .b-bulk-actions__bar
floats in with the count and the few actions that apply to every
selected item. In production, wrap it in .b-bulk-actions
to pin it bottom-center; the bar is shown here statically.
Multi-Select
A token field: .b-multiselect looks like one input but
holds removable .b-chip tokens ahead of a borderless
inline input. The whole frame lights up on
:focus-within, so it behaves like a single control.
File Browser
A two-pane Finder-style shell: __side holds a compact
folder .b-tree on a recessed fill, __main
holds a responsive .b-file-grid of
.b-file-tile items. The selected tile gets a soft-accent
wash and a solid accent name pill — exactly like the desktop.
Folder Tree
The generic disclosure tree is documented in
Content › Tree. Flavoured with folder
icons it becomes a location picker: <details
class="b-tree-item"> for branches, __row for
leaves, .is-selected for the current folder.
-
Dar es Salaam HQ
-
Finance
- Invoices
- Payroll
- Operations
-
-
Zanzibar office
Activity Log
.b-log renders each __entry on a
three-column baseline grid — semibold __actor, muted
__action with object names in <code>,
and a tabular __time pinned trailing. Rows separate with
hairlines and highlight on hover.
invoice-q3.pdf to Finance / Invoices
PO-2214
port-fees-draft.xlsx to port-fees.xlsx
tender-brief.docx with the Mwanza depot
Audit Log
Security review needs provenance. .b-log--audit widens
the entry grid to four columns —
7.5rem max-content 1fr max-content — so a
monospace __ip leads each row and full timestamps align
down the right edge.
passkey
invoice-q3.pdf
@juma to editor
brk_live_…9f2