# Barua UI — complete reference

## Rules

1. Compose from documented components. If a pattern is not in the docs, use a documented alternative or promote a new component into the docs first — never invent markup or CSS in product code.
2. Copy the anatomy from the docs demo: same wrapper elements, same slots, same class combinations. A component's parts (__header, __body, __footer) only exist inside their block.
3. Never hardcode colour, spacing, radius or shadow. Use --b-* tokens. A raw hex in product code is a bug.
4. Inline styles are only for documented knobs (--v, --b-progress, --b-thumb-size, --b-heatmap-cols, --b-circular-size) and artwork backgrounds.
5. Icons come from the icon library (docs/icons.html): inline 20x20 SVG, 1.5px stroke, currentColor, sized with .b-icon/--sm/--lg. Never emoji, never letters as icons. A directional mark inside a sentence is text, not an icon: the arrow in a .b-stat__delta stays. The rule governs icon slots, where a glyph stands on its own.
6. Never use a native <select> or native date/time inputs in product surfaces: their popups cannot be styled. Use the menu select and the calendar-in-dropdown patterns.
7. On desktop a surface does not page-scroll. Use .b-stage for screens that must fit, and .b-scroll-area for the panes that may grow.
8. A scroll pane's children must never be forced to the pane's height (no h-full inside a scroll area) or scrolling silently dies.
9. Hover, selection and active are different states and must look different: hover is a quiet fill, selection is accent-soft, focus is the focus ring.
10. Dashboards: name the one question the screen answers before laying anything out. Pick an archetype — overview, monitoring, analytics, work queue, record, console — because variety comes from choosing a different one, not from decorating the same one.
11. A dashboard has five layers read top to bottom, each answering the same question at a different depth — what, then why, then what now: 1 context (title, period, filters), 2 verdict (three or four figures), 3 evidence (one dominant chart plus a companion, e.g. spans 8 and 4), 4 detail (lists and tables), 5 tail (links out). Four or five layers is a page; six is two pages pretending to be one. A figure led 40 of 51 surveyed pages and figure-then-list was the commonest adjacency.
12. Dashboard rhythm: consecutive layers must not share a column split. Quarters, then eight-and-four, then halves. A page where every band is the same shape reads as a spreadsheet with rounded corners whatever is in it.
13. A row of dashboard cards should not stretch to match its tallest: grid stretches by default and a short card grows dead space at its foot. Use align-items: start and let heights differ, or give the short card more to say.
14. Dashboard spacing groups the layers: .b-gap-6 between bands and .b-gap-3 or .b-gap-4 within one. That difference does the grouping, so a well-spaced dashboard needs almost no rules or boxes.
15. The first screen of a dashboard owes the reader context and verdict plus the top of the evidence. If the figures need scrolling to reach, something above them — a hero, a greeting, a banner — is taking space it has not earned.
16. Dashboard composition: widths are full, half, third or quarter and a row totals twelve. Three or four figures on the top row, never five. One dominant element per screen, or the page reads as a spreadsheet with rounded corners.
17. Charts: time is a line or an area, comparison across categories is a bar — those three are 84% of charts in a 457-page survey of admin templates. Pie and donut were 3%; use them only for two to four parts of a genuine whole. A number that matters more than its trend is a .b-stat, not a chart.
18. Every chart carries role="img" and an aria-label stating the takeaway rather than the chart type: "peaking Thursday at 4,120", not "bar chart of sends". Only 2% of surveyed dashboard pages labelled a chart at all. Give charts a ceiling with --b-chart-h or a tall series drags the card with it.
19. Every dashboard widget has four states: loading, empty, error and loaded. Three pages out of 457 surveyed had a "no data" message. Use .b-skeleton while fetching and .b-empty with an action when there is nothing.
20. A table on a dashboard shows five to ten rows and links to the full list — it is a sample, not the archive. Columns of figures take .b-tabular-nums, and a delta states direction and period: "up 8.2% this week", never a bare arrow.
21. Surfaces never stack materials. A panel inside glass is a fill, not a second material — nesting one blur inside another makes the GPU blur an already-blurred backdrop, which is the main way this system gets slow.
22. Materials turn opaque under prefers-reduced-transparency and where backdrop-filter is unsupported, so never use translucency alone to carry meaning.
23. Over an unknown background use .b-card--neutral, whose material is derived from the backdrop rather than from the theme.
24. Light and dark come from light-dark() and data-theme. Never write a second dark stylesheet; never branch on theme in product code.
25. Every interactive element states its accessible name, keyboard behaviour and state through ARIA; .is-* classes are for looks, ARIA is for meaning.
26. Vary composition deliberately: the same three cards in a row is not a design. Choose a layout archetype that fits the content, then vary density, span rhythm and material within the system.

## Principles — the eight ideas the system is built on, and what enforces each

### Purpose  (https://ui.barua.tz/docs/principles.html#purpose)
Make something meaningful.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Every component is documented with a live demo; if it cannot be demonstrated, it is not ready.</li>
  <li>The linter rejects invented classes, so a new idea must be promoted into the system rather than smuggled into a page.</li>
  <li>The examples are built only from documented components — they are proof, not decoration.</li>
</ul>
```

### Agency  (https://ui.barua.tz/docs/principles.html#agency)
Let people do things their own way.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Theme, accent and wallpaper belong to the person: <code>data-theme</code>, <code>data-accent</code> and <code>Barua.wallpaper</code>.</li>
  <li>Overlays close the way people expect — Escape, outside click, and a visible control, everywhere.</li>
  <li>Destructive actions say what they will do, and are never the default in a row of buttons.</li>
</ul>
```

### Responsibility  (https://ui.barua.tz/docs/principles.html#responsibility)
Act in people’s best interest.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li><code>.b-redacted</code> and its privacy variant hide sensitive content deliberately, and look different from loading.</li>
  <li>Empty and error states explain the situation and the way out rather than apologising.</li>
  <li>Marketing claims carry footnotes: a figure with its conditions stated is worth more than a figure without.</li>
</ul>
```

### Familiarity  (https://ui.barua.tz/docs/principles.html#familiarity)
Build on what people know.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Native elements first — <code>&lt;dialog&gt;</code>, the Popover API, <code>&lt;details&gt;</code> — so platform behaviour arrives correct and free.</li>
  <li>One grammar throughout: <code>.b-block__element--modifier</code>, <code>.is-*</code> for state, <code>--b-*</code> for values.</li>
  <li>States stay distinct and consistent: hover is a quiet fill, selection is accent-soft, focus is the ring.</li>
</ul>
```

### Flexibility  (https://ui.barua.tz/docs/principles.html#flexibility)
Adapt to diverse contexts and needs.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Light and dark through <code>light-dark()</code>; a wallpaper can set the scheme for the surface it backs.</li>
  <li>Every size is in <code>rem</code>, so the system text-size preference scales the whole interface.</li>
  <li>Reduced motion is honoured globally; every interactive element carries its keyboard path and accessible name.</li>
  <li>Components reflow on their own — most layouts need no media query at all.</li>
</ul>
```

### Simplicity  (https://ui.barua.tz/docs/principles.html#simplicity)
Be clear and direct.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>The type ramp is eleven roles, each with complete metrics — hierarchy is a decision, not a font size.</li>
  <li>A screen ends at the screen: chrome stays put and only designated panes scroll.</li>
  <li>Surfaces never stack materials; a panel inside glass is a fill.</li>
  <li>Labels are written, not generated: a button says what will happen.</li>
</ul>
```

### Craft  (https://ui.barua.tz/docs/principles.html#craft)
Care about every detail.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Every text style carries its own leading and tracking; small text opens up rather than borrowing body metrics.</li>
  <li>Charts have ceilings as well as floors, so a component that reads correctly in a demo still reads correctly in a wide card.</li>
  <li>Glass carries a specular edge, and the mail pane is literally the same card as everything else rather than a copy of its values.</li>
  <li>The validator and the linter run over the documentation itself — the docs obey the rules they publish.</li>
</ul>
```

### Delight  (https://ui.barua.tz/docs/principles.html#delight)
Make it human.
Classes: b-footnote b-list__header b-text-secondary

```html
<div class="b-list__header">What holds it up</div>
<ul>
  <li>Motion runs on spring easings, and shared elements morph rather than cross-fade.</li>
  <li>Symbol effects answer an action: a bounce on send, a pulse while something is genuinely happening.</li>
  <li>Liquid Glass is one attribute, so a product can change its whole character without changing its markup.</li>
  <li>A wallpaper makes the glass mean something — the person&rsquo;s own picture, and the system learning its colour from it.</li>
</ul>
```


## Theming — light and dark, the named accents, and carrying a brand colour without breaking danger

### The named accents  (https://ui.barua.tz/docs/theming.html#named-accents)
Five accents ship with the system. Set one attribute on <html> and every button, focus ring, link and selected state re-tints.
Classes: b-btn b-btn--primary b-gap-2 b-hstack b-stack--wrap

```html
<div class="b-hstack b-gap-2 b-stack--wrap">
  <button class="b-btn b-btn--primary">Default blue</button>
  <span data-accent="indigo"><button class="b-btn b-btn--primary">Indigo</button></span>
  <span data-accent="purple"><button class="b-btn b-btn--primary">Purple</button></span>
  <span data-accent="teal"><button class="b-btn b-btn--primary">Teal</button></span>
  <span data-accent="green"><button class="b-btn b-btn--primary">Green</button></span>
</div>
```

### A brand colour that is not on the list  (https://ui.barua.tz/docs/theming.html#brand-colour)
A brand rarely matches a palette. Override the accent tokens in unlayered CSS — a plain stylesheet loaded after barua.css . Unlayered rules beat every layer in the system, which is the documented seam for exactly this. It is the supported route, not a workaround.
Classes: b-badge b-badge--accent b-btn b-btn--ghost b-btn--primary b-btn--tinted b-code b-code__header b-field b-gap-2 b-gap-3 b-hstack b-input b-label b-stack b-stack--wrap

```html
<div class="b-stack b-gap-3">
  <div class="b-hstack b-gap-2 b-stack--wrap">
    <button class="b-btn b-btn--primary">Deploy agent</button>
    <button class="b-btn b-btn--tinted">Configure</button>
    <button class="b-btn b-btn--ghost">Cancel</button>
    <span class="b-badge b-badge--accent">Live</span>
  </div>
  <div class="b-field" style="max-width: 22rem">
    <label class="b-label" for="brand-demo-input">Focus this field</label>
    <input class="b-input" id="brand-demo-input" type="text" placeholder="The ring follows the accent">
  </div>
</div>
```

### Check what your colour now collides with  (https://ui.barua.tz/docs/theming.html#collisions)
This is the part that bites. Two system colours are defined in terms of the accent or sit close to it, and a brand colour can quietly erase a distinction the interface relies on.
Classes: b-btn b-btn--danger b-btn--primary b-code b-code__header b-gap-2 b-hstack b-stack--wrap b-table b-table-wrap

```html
<div class="b-hstack b-gap-2 b-stack--wrap">
  <button class="b-btn b-btn--primary">Primary — your brand</button>
  <button class="b-btn b-btn--danger">Delete — still unmistakably not that</button>
</div>
```

### What not to override  (https://ui.barua.tz/docs/theming.html#leave-alone)
Accent tokens are yours. The greyscale is not: --b-text , --b-text-secondary , --b-surface , --b-separator and the fills carry the contrast contract that every component is built against, in both themes at once. Change those and you are not theming the system, you are replacing its foundation — and the accessible contrast that came free stops being guaranteed.

### Scope it when the colour means something  (https://ui.barua.tz/docs/theming.html#scoping)
Overriding on :root themes the product. Putting the same tokens on a class themes a region — useful for a tenant, an environment banner, or one board among many. The tokens cascade, so anything inside picks them up.
Classes: b-code b-code__header


## Wallpapers — pictures shipped finished: sized, blurred, with the accent and scheme already worked out

### What was worked out beforehand  (https://ui.barua.tz/docs/wallpapers.html#what-is-baked)
Four things, each with exactly one answer per picture, so computing them per visitor is repeating a settled question:

### City  (https://ui.barua.tz/docs/wallpapers.html#wall-city)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/city/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Desk  (https://ui.barua.tz/docs/wallpapers.html#wall-desk)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/desk/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Team  (https://ui.barua.tz/docs/wallpapers.html#wall-team)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/team/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Dune Light  (https://ui.barua.tz/docs/wallpapers.html#wall-dune-light)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/dune-light/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Dusk Ridge  (https://ui.barua.tz/docs/wallpapers.html#wall-dusk-ridge)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/dusk-ridge/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Forest Fog  (https://ui.barua.tz/docs/wallpapers.html#wall-forest-fog)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-text-tertiary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/forest-fog/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Night Coast  (https://ui.barua.tz/docs/wallpapers.html#wall-night-coast)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/night-coast/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Salt Flat  (https://ui.barua.tz/docs/wallpapers.html#wall-salt-flat)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/salt-flat/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```

### Still Water  (https://ui.barua.tz/docs/wallpapers.html#wall-still-water)
Classes: b-caption b-code b-code__copy b-code__header b-gap-4 b-has-wallpaper b-hstack b-stack--wrap b-text-secondary b-wall

```html
<div class="docs-wall" style="background-image: url('../wallpapers/still-water/full.jpg')">
  <div class="docs-wall__panel">
    <div class="docs-wall__panel-label">Baked glass over this picture</div>
    <p class="b-caption b-text-secondary">Blurred once, at build time.</p>
  </div>
</div>
```


## React — the typed bindings: install, Server Components, and the component index

### Install  (https://ui.barua.tz/docs/react.html#install)
One package, one stylesheet. The CSS is the system; the components only spare you from typing class names.
Classes: b-code b-code__header

### The first component  (https://ui.barua.tz/docs/react.html#first)
Props are the modifiers you already know. b-btn--primary is variant="primary" ; there is nothing else to learn.
Classes: b-btn b-btn--ghost b-btn--primary b-gap-2 b-hstack

```html
<div class="b-hstack b-gap-2">
  <button class="b-btn b-btn--primary">Send invoice</button>
  <button class="b-btn b-btn--ghost">Save draft</button>
</div>
```

### Server Components  (https://ui.barua.tz/docs/react.html#server-components)
The bundle carries its own "use client" , so importing from a Server Component works. Components that hold state — the provider, toasts, the command palette — still need a client boundary of their own, which is ordinary React, not a quirk of this library.

### Theme  (https://ui.barua.tz/docs/react.html#theme)
Light and dark come from light-dark() in the CSS, so the system already follows the operating system with no JavaScript at all. Reach for the provider only to override that choice, and add ThemeScript to stop the first paint flashing the wrong way.
Classes: b-code b-code__header

### Icons  (https://ui.barua.tz/docs/react.html#icons)
The glyph library ships as a component, generated from the icons page — the same 59 glyphs, by name, with the sizes on the .b-icon scale.
Classes: b-code b-code__header b-gap-3 b-hstack b-icon

```html
<div class="b-hstack b-gap-3">
  <svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5 8.5 15 16 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13.5 13.5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  <svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5A4.5 4.5 0 0 1 14.5 8c0 3 1 4 1.5 4.5H4c.5-.5 1.5-1.5 1.5-4.5A4.5 4.5 0 0 1 10 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.5 15.5a1.6 1.6 0 0 0 3 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
```

### When a component is in the way  (https://ui.barua.tz/docs/react.html#escape-hatch)
Nothing here is compulsory. Every component forwards className and its ref, so a class the props do not cover can always be added by hand — and any element can carry a system class directly. The React layer is a convenience, never a gate.
Classes: b-code b-code__header

### What is exported  (https://ui.barua.tz/docs/react.html#components)
278 components and hooks, covering every block in the system. The list is generated from the package, so it never claims more than it ships.
Classes: b-table b-table-wrap


## Foundations — tokens, colour, type, materials, motion

### Color System  (https://ui.barua.tz/docs/foundations.html#color-system)
Every color token is a light-dark() pair, so a single name is always correct in either scheme. The accent family drives buttons, links, focus and selection; re-tint the whole system with data-accent="indigo|purple|pink|teal|green" on <html> .
Variants: System colors, Grays, Backgrounds & surfaces, Text hierarchy, Wallpaper, Adaptive accent & scheme
Classes: b-badge b-badge--accent b-btn b-btn--ghost b-btn--glass b-btn--primary b-btn--sm b-card b-card--glass b-card--neutral b-card__body b-card__header b-card__title b-footnote b-gap-2 b-gap-3 b-hstack b-link b-stack b-stack--wrap b-text-secondary b-wall b-wallpaper-scope

```html
<div class="b-hstack b-stack--wrap b-gap-2">
  <button class="b-btn b-btn--glass b-btn--sm" onclick="baruaWallDemo('../examples/assets/ambient-bg.svg')">Papercut</button>
  <button class="b-btn b-btn--glass b-btn--sm" onclick="baruaWallDemo('../examples/assets/cave-wall.svg')">Cave wall</button>
  <label class="b-btn b-btn--primary b-btn--sm">
    Choose an image…
    <input type="file" accept="image/*" style="display: none" onchange="baruaWallFile(this.files[0])">
  </label>
  <button class="b-btn b-btn--ghost b-btn--sm" onclick="baruaWallDemo(null)">Bare wall</button>
</div>

<div id="wall-demo-frame">
  <div class="b-wall b-wallpaper-scope" id="wall-demo" style="padding: var(--b-space-6); border-radius: var(--b-radius-xl)">
    <article class="b-card b-card--neutral" style="max-width: 21rem">
      <div class="b-card__header">
        <div class="b-card__title">Glass needs a backdrop</div>
        <span class="b-badge b-badge--accent">Live</span>
      </div>
      <div class="b-card__body b-stack b-gap-2">
        <p class="b-footnote b-text-secondary" style="margin: 0">
          Change the wall and watch the material, the ink and the
          accent all answer to the picture.
        </p>
        <span><button class="b-btn b-btn--primary b-btn--sm">Action</button></span>
      </div>
    </article>
  </div>
</div>

<p class="b-footnote b-text-secondary" style="margin: 0"
```

### Typography  (https://ui.barua.tz/docs/foundations.html#typography)
A text style is a whole set of metrics, not a size: every role below states its own size, weight, leading and tracking together. Small text is not body text made smaller — a caption opens its tracking slightly and tightens its leading, which is why inheriting those values from the page would be wrong. Headings of the same size as a role use the same metrics as that role, so <h5> and .b-headline are typographically identical.
Classes: b-table b-table-wrap

### Font Scale  (https://ui.barua.tz/docs/foundations.html#font-scale)
The Apple HIG scale, exposed as one class per role. Elements h1 – h6 map onto it automatically; use the classes when semantics and size need to differ — a card title that is an h3 but should read as a headline, for instance.
Classes: b-body b-callout b-caption b-footnote b-headline b-large-title b-overline b-subheadline b-tabular-nums b-text-tertiary b-text-uppercase b-title1 b-title2 b-title3 b-truncate

### Spacing  (https://ui.barua.tz/docs/foundations.html#spacing)
A 4px base scale. Use 1–3 for padding inside controls, 4–6 between related elements, 8–12 between groups, and 16–24 between page sections. If a gap isn't on the scale, it isn't in the system.

### Grid  (https://ui.barua.tz/docs/foundations.html#grid)
.b-grid is 12 columns by default; set --b-cols or use .b-grid--2/3/4/6 for equal tracks, and span with .b-col-span-* . .b-grid--auto auto-fills against --b-col-min , and .b-card-grid / .b-masonry handle card walls without media queries. Gaps come from the spacing scale via .b-gap-* .
Classes: b-col-span-4 b-col-span-6 b-col-span-full b-footnote b-grid b-grid--3 b-panel b-text-center

```html
<div class="b-grid b-grid--3">
  <div class="b-panel b-text-center b-footnote" style="padding: var(--b-space-3)">1 / 3</div>
  <div class="b-panel b-text-center b-footnote" style="padding: var(--b-space-3)">1 / 3</div>
  <div class="b-panel b-text-center b-footnote" style="padding: var(--b-space-3)">1 / 3</div>
</div>
<div class="b-grid">
  <div class="b-panel b-text-center b-footnote b-col-span-6" style="padding: var(--b-space-3)">span 6</div>
  <div class="b-panel b-text-center b-footnote b-col-span-6" style="padding: var(--b-space-3)">span 6</div>
  <div class="b-panel b-text-center b-footnote b-col-span-4" style="padding: var(--b-space-3)">span 4</div>
  <div class="b-panel b-text-center b-footnote b-col-span-4" style="padding: var(--b-space-3)">span 4</div>
  <div class="b-panel b-text-center b-footnote b-col-span-4" style="padding: var(--b-space-3)">span 4</div>
  <div class="b-panel b-text-center b-footnote b-col-span-full" style="padding: var(--b-space-3)">span full</div>
</div>
```

### Layout  (https://ui.barua.tz/docs/foundations.html#layout)
SwiftUI-style primitives: .b-vstack and .b-hstack flow content with a token gap, and .b-spacer absorbs the leftover space — that trio builds most toolbars and headers. .b-container centers a page column, .b-section spaces bands of content, and .b-split + .b-panel make resizable multi-pane layouts.
Classes: b-btn b-btn--primary b-btn--sm b-footnote b-gap-1 b-headline b-hstack b-panel b-spacer b-table b-table-wrap b-text-secondary b-vstack

```html
<div class="b-hstack b-panel" style="padding: var(--b-space-3)">
  <span class="b-headline">Inbox</span>
  <span class="b-spacer"></span>
  <button class="b-btn b-btn--sm">Filter</button>
  <button class="b-btn b-btn--primary b-btn--sm">Compose</button>
</div>
<div class="b-vstack b-gap-1 b-panel" style="padding: var(--b-space-3)">
  <span class="b-headline">VStack</span>
  <span class="b-footnote b-text-secondary">Children flow vertically; the gap comes from --b-gap.</span>
</div>
```

### Breakpoints  (https://ui.barua.tz/docs/foundations.html#breakpoints)
Custom properties can't drive @media , so breakpoints are a convention: six shared stops, written by value, always mobile-first with @media (min-width: …) . Base styles serve the phone; each stop only adds.
Classes: b-table b-table-wrap

### Border Radius  (https://ui.barua.tz/docs/foundations.html#border-radius)
Corners grow with the surface, Apple-style: xs for inline code and checkboxes, sm for chips and kbd, md for buttons, inputs and menus, lg for panels and toolbars, xl for cards and modals, 2xl for sheets, and full for pills and avatars. Never give a small control a bigger radius than the surface it sits on.
Classes: b-caption2 b-gap-1 b-stack b-stack--center b-text-tertiary

```html
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6rem; height: 4rem; background: var(--b-color-accent-soft); border: 1px solid var(--b-color-accent); border-radius: var(--b-radius-xs)"></div>
  <code>--b-radius-xs</code>
  <span class="b-caption2 b-text-tertiary">4px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6rem; height: 4rem; background: var(--b-color-accent-soft); border: 1px solid var(--b-color-accent); border-radius: var(--b-radius-sm)"></div>
  <code>--b-radius-sm</code>
  <span class="b-caption2 b-text-tertiary">6px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6rem; height: 4rem; background: var(--b-color-accent-soft); border: 1px solid var(--b-color-accent); border-radius: var(--b-radius-md)"></div>
  <code>--b-radius-md</code>
  <span class="b-caption2 b-text-tertiary">10px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6rem; height: 4rem; background: var(--b-color-accent-soft); border: 1px solid var(--b-color-accent); border-radius: var(--b-radius-lg)"></div>
  <code>--b-radius-lg</code>
  <span class="b-caption2 b-text-tertiary">14px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6rem; height: 4rem; background: var(--b-color-accent-soft); border: 1px solid var(--b-color-accent); border-radius: var(--b-radius-
```

### Shadows  (https://ui.barua.tz/docs/foundations.html#shadows)
Soft, layered, never harsh — each token stacks a contact shadow with a wide ambient one, and --b-shadow-color deepens automatically in dark mode. --b-shadow-accent is a blue glow reserved for the FAB and other floating accent controls. Prefer the elevation tokens below, which pair these with a hairline ring.
Classes: b-gap-1 b-stack b-stack--center

```html
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-xs)"></div>
  <code>--b-shadow-xs</code>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-sm)"></div>
  <code>--b-shadow-sm</code>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-md)"></div>
  <code>--b-shadow-md</code>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-lg)"></div>
  <code>--b-shadow-lg</code>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-xl)"></div>
  <code>--b-shadow-xl</code>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); background: var(--b-surface); box-shadow: var(--b-shadow-accent)"></div>
  <code>--b-shadow-accent</code>
</div>
```

### Elevation  (https://ui.barua.tz/docs/foundations.html#elevation)
The elevation ladder pairs each shadow with a 1px hairline ring ( --b-ring ) so edges stay crisp on any background. Use the utilities: 1 for resting cards, 2 for raised cards and glass toolbars, 3 for menus and popovers, 4 for modals and drawers, 5 for the command palette. Level 0 removes elevation for flush surfaces.
Classes: b-elevation-1 b-elevation-2 b-elevation-3 b-elevation-4 b-elevation-5 b-gap-2 b-radius-lg b-stack b-stack--center

```html
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-elevation-1 b-radius-lg" style="width: 6.5rem; height: 4rem; background: var(--b-surface)"></div>
  <code>.b-elevation-1</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-elevation-2 b-radius-lg" style="width: 6.5rem; height: 4rem; background: var(--b-surface)"></div>
  <code>.b-elevation-2</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-elevation-3 b-radius-lg" style="width: 6.5rem; height: 4rem; background: var(--b-surface)"></div>
  <code>.b-elevation-3</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-elevation-4 b-radius-lg" style="width: 6.5rem; height: 4rem; background: var(--b-surface)"></div>
  <code>.b-elevation-4</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-elevation-5 b-radius-lg" style="width: 6.5rem; height: 4rem; background: var(--b-surface)"></div>
  <code>.b-elevation-5</code>
</div>
```

### Opacity  (https://ui.barua.tz/docs/foundations.html#opacity)
Three stops, three meanings. hover (0.85) dims media and imagery under the pointer, muted (0.6) de-emphasizes without disabling, and disabled (0.4) is applied automatically by :disabled and .is-disabled — never hand-roll a disabled look.
Classes: b-caption2 b-gap-1 b-stack b-stack--center b-text-tertiary

```html
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 5.5rem; height: 3.5rem; border-radius: var(--b-radius-md); background: var(--b-color-accent)"></div>
  <code>base</code>
  <span class="b-caption2 b-text-tertiary">1</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 5.5rem; height: 3.5rem; border-radius: var(--b-radius-md); background: var(--b-color-accent); opacity: var(--b-opacity-hover)"></div>
  <code>--b-opacity-hover</code>
  <span class="b-caption2 b-text-tertiary">0.85</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 5.5rem; height: 3.5rem; border-radius: var(--b-radius-md); background: var(--b-color-accent); opacity: var(--b-opacity-muted)"></div>
  <code>--b-opacity-muted</code>
  <span class="b-caption2 b-text-tertiary">0.6</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 5.5rem; height: 3.5rem; border-radius: var(--b-radius-md); background: var(--b-color-accent); opacity: var(--b-opacity-disabled)"></div>
  <code>--b-opacity-disabled</code>
  <span class="b-caption2 b-text-tertiary">0.4</span>
</div>
```

### Blur  (https://ui.barua.tz/docs/foundations.html#blur)
The blur scale feeds the glass materials. Rather than using raw blur values, reach for the composite filters: --b-glass-light (blur-sm + saturate 1.6), --b-glass (blur-lg + saturate 1.8) and --b-glass-heavy (blur-xl + saturate 2) — the saturation boost is what makes color glow through the pane.
Classes: b-caption2 b-gap-1 b-stack b-stack--center b-text-tertiary

```html
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); border: 1px solid var(--b-hairline); -webkit-backdrop-filter: blur(var(--b-blur-xs)); backdrop-filter: blur(var(--b-blur-xs))"></div>
  <code>--b-blur-xs</code>
  <span class="b-caption2 b-text-tertiary">4px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); border: 1px solid var(--b-hairline); -webkit-backdrop-filter: blur(var(--b-blur-sm)); backdrop-filter: blur(var(--b-blur-sm))"></div>
  <code>--b-blur-sm</code>
  <span class="b-caption2 b-text-tertiary">8px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); border: 1px solid var(--b-hairline); -webkit-backdrop-filter: blur(var(--b-blur-md)); backdrop-filter: blur(var(--b-blur-md))"></div>
  <code>--b-blur-md</code>
  <span class="b-caption2 b-text-tertiary">16px</span>
</div>
<div class="b-stack b-stack--center b-gap-1">
  <div style="width: 6.5rem; height: 4rem; border-radius: var(--b-radius-lg); border: 1px solid var(--b-hairline); -webkit-backdrop-filter: blur(var(--b-blur-lg)); backdrop-filter: blur(var(--b-blur-lg))"></div>
  <code>--b-blur-lg</code>
  <span class="b-caption2 b-text-tertiary">24px</span>
</div>
<div class="b-
```

### Materials  (https://ui.barua.tz/docs/foundations.html#materials)
Five glass thicknesses, from a whisper to nearly opaque. Thinner materials show more of what's behind but hold less legible content — use ultrathin and thin for hover surfaces, regular for floating toolbars and glass cards, thick for sheets, and chrome for app bars. .b-material-accent adds a Barua-blue tint. Each class pairs its --b-material-*-bg token with the --b-glass backdrop filter and a hairline border.
Variants: Baked glass, Backplate
Classes: b-backplate b-callout b-caption b-code b-code__header b-flex b-flex--center b-footnote b-gap-2 b-headline b-material-chrome b-material-regular b-material-thick b-material-thin b-material-ultrathin b-radius-lg b-stack b-stack--center b-subheadline b-text-secondary

```html
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-material-ultrathin b-radius-lg b-flex b-flex--center b-callout" style="width: 7rem; height: 4.5rem">Aa</div>
  <code>.b-material-ultrathin</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-material-thin b-radius-lg b-flex b-flex--center b-callout" style="width: 7rem; height: 4.5rem">Aa</div>
  <code>.b-material-thin</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-material-regular b-radius-lg b-flex b-flex--center b-callout" style="width: 7rem; height: 4.5rem">Aa</div>
  <code>.b-material-regular</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-material-thick b-radius-lg b-flex b-flex--center b-callout" style="width: 7rem; height: 4.5rem">Aa</div>
  <code>.b-material-thick</code>
</div>
<div class="b-stack b-stack--center b-gap-2">
  <div class="b-material-chrome b-radius-lg b-flex b-flex--center b-callout" style="width: 7rem; height: 4.5rem">Aa</div>
  <code>.b-material-chrome</code>
</div>
```

### Borders & Dividers  (https://ui.barua.tz/docs/foundations.html#borders-dividers)
Four weights of edge, all translucent so they sit naturally on any surface: --b-hairline for glass edges and elevation rings, --b-separator for list rows and card borders, --b-border for inputs and controls, and --b-border-strong for their hover state. .b-divider draws separator rules — vertical inside an hstack, labeled for timeline breaks, and inset to align with list content.
Classes: b-divider b-divider--label b-divider--vertical b-hstack

```html
<div class="b-hstack">
  <span>Reply</span>
  <hr class="b-divider b-divider--vertical">
  <span>Forward</span>
  <hr class="b-divider b-divider--vertical">
  <span>Archive</span>
</div>
<hr class="b-divider">
<div class="b-divider b-divider--label">Yesterday</div>
```

### Motion  (https://ui.barua.tz/docs/foundations.html#motion)
Motion is quick, physical and quiet: five durations, five curves, and nothing animates that doesn't communicate. Small state changes use instant and fast ; surfaces that move use slow with the spring curve. Everything collapses to near zero under prefers-reduced-motion — see Accessibility.
Variants: Transitions, Animation
Classes: b-btn b-btn--primary b-card b-card--interactive b-card__body b-chip b-footnote b-progress b-progress--indeterminate b-progress__fill b-spinner b-spinner--lg b-table b-table-wrap

```html
<span class="b-chip">instant · 100ms</span>
<span class="b-chip">fast · 150ms</span>
<span class="b-chip">normal · 250ms</span>
<span class="b-chip">slow · 350ms</span>
<span class="b-chip">slower · 500ms</span>
<span class="b-chip">standard · default</span>
<span class="b-chip">out · entrances</span>
<span class="b-chip">in · exits</span>
<span class="b-chip">spring · sheets</span>
<span class="b-chip">bounce · overshoot</span>
```

### Iconography  (https://ui.barua.tz/docs/foundations.html#iconography)
Icons are inline SVG — no font, no sprite request. Draw on a 20×20 viewBox with a 1.5 stroke, stroke="currentColor" and round caps and joins, so every icon inherits text color and matches the SF Symbols weight. .b-icon sizes the box ( --sm 16, default 20, --lg 24, --xl 32) and .b-icon-tile seats an icon on an accent-soft tile for list leaders and feature rows. Decorative icons take aria-hidden="true" .
Classes: b-icon b-icon--lg b-icon--sm b-icon--xl b-icon-tile

```html
<span class="b-icon b-icon--sm">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
<span class="b-icon">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
<span class="b-icon b-icon--lg">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
<span class="b-icon b-icon--xl">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
<span class="b-icon-tile">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4 7 6 4.5L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="b-icon-tile">
  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</span>
```

### Accessibility  (https://ui.barua.tz/docs/foundations.html#accessibility)
Accessibility is baked into the tokens, not bolted on. The focus ring ( --b-focus-ring , a 3.5px accent halo) appears on :focus-visible only — keyboards get it, mouse clicks don't. Tab through this demo to see it.
Classes: b-btn b-btn--primary b-input

```html
<button class="b-btn">Tab to me</button>
<button class="b-btn b-btn--primary">Then me</button>
<input class="b-input" style="max-width: 16rem" type="text" placeholder="Focus shows the ring">
```

### Dark Mode & Light Mode  (https://ui.barua.tz/docs/foundations.html#dark-light)
The root declares color-scheme: light dark and every color token is a light-dark() pair, so the whole system follows the OS by default. Set data-theme="light|dark" on <html> to force a scheme — the topbar's data-b-theme-toggle button does exactly that and persists the choice, which the inline <head> script restores before first paint to avoid a flash.
Classes: b-card b-card__body b-card__subtitle b-card__title

```html
<div class="b-card" style="width: 14rem">
    <div class="b-card__body">
      <div class="b-card__title">Light</div>
      <div class="b-card__subtitle">color-scheme: light</div>
    </div>
  </div>
</div>
<div style="color-scheme: dark; background: var(--b-bg); padding: var(--b-space-4); border-radius: var(--b-radius-lg)">
  <div class="b-card" style="width: 14rem">
    <div class="b-card__body">
      <div class="b-card__title">Dark</div>
      <div class="b-card__subtitle">color-scheme: dark</div>
    </div>
  </div>
```

### Responsive Rules  (https://ui.barua.tz/docs/foundations.html#responsive-rules)
Mobile first, always: base styles serve the smallest screen, and each of the six breakpoints only adds. Most layouts shouldn't need media queries at all — .b-grid--auto , .b-card-grid and the stack primitives reflow on their own. When you do write one, use min-width at a shared stop.

### View Transitions  (https://ui.barua.tz/docs/foundations.html#view-transitions)
Two things, on the platform's View Transitions API. Opt in with data-vt on <html> and same-origin navigations cross-fade on the system's motion tokens (180ms out, 220ms in). Off by default, disabled automatically under reduced motion, and inert in browsers without the API.
Variants: Shared elements
Classes: b-btn b-btn--ghost b-btn--glass b-btn--sm b-card b-card__body b-card__subtitle b-card__title b-code b-code__header b-footnote b-gap-3 b-hstack b-stack b-text-secondary b-thumb

```html
<div class="b-code">
  <div class="b-code__header"><span>Page transitions</span></div>
  <pre><code>&lt;html data-vt&gt;   &lt;!-- pages now cross-fade on navigation --&gt;</code></pre>
</div>
```


## Icons — the 20×20 glyph set

### Usage  (https://ui.barua.tz/docs/icons.html#icon-usage)
Size icons with .b-icon (1.25rem), .b-icon--sm (1rem) or .b-icon--lg (1.75rem) instead of width/height attributes. Icons inherit currentColor , so they recolor with the component state — a tinted button tints its glyph for free. Decorative icons take aria-hidden="true" ; icon-only buttons carry the label via aria-label .
Classes: b-btn b-btn--ghost b-btn--glass b-btn--primary b-icon b-icon--sm b-icon-btn b-tooltip-host

```html
<button class="b-btn b-btn--primary">
  <svg class="b-icon b-icon--sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m3.5 10 13-6-3.5 13-3.5-4.5L3.5 10Zm6 2.5L13 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  Send
</button>
<button class="b-btn b-btn--glass">
  <svg class="b-icon b-icon--sm" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 12.5v-9M7 6l3-2.8L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.5 9.5H5A1.5 1.5 0 0 0 3.5 11v4A1.5 1.5 0 0 0 5 16.5h10a1.5 1.5 0 0 0 1.5-1.5v-4A1.5 1.5 0 0 0 15 9.5h-.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  Share
</button>
<button class="b-btn b-icon-btn b-btn--ghost b-tooltip-host" data-tooltip="Notifications" aria-label="Notifications">
  <svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5A4.5 4.5 0 0 1 14.5 8c0 3 1 4 1.5 4.5H4c.5-.5 1.5-1.5 1.5-4.5A4.5 4.5 0 0 1 10 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.5 15.5a1.6 1.6 0 0 0 3 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
```

### Symbol effects  (https://ui.barua.tz/docs/icons.html#symbol-effects)
A glyph that answers an action is the cheapest feedback an interface has. Add one class to the icon rather than to the control, so a button keeps its own states. The division that matters is whether an effect plays once or repeats : one acknowledges something that just happened, the other describes something still happening. A repeating effect used as an acknowledgement is just noise.
Classes: b-btn b-btn--primary b-btn--sm b-btn--tinted b-caption b-caption2 b-code b-code__header b-gap-2 b-gap-4 b-hstack b-icon b-icon--bounce b-icon--breathe b-icon--pulse b-icon--replace b-icon--rotate b-icon--scale b-icon--sm b-icon--wiggle b-stack--wrap b-table b-table-wrap b-text-secondary b-vstack

```html
<div class="docs-replay">
  <button class="b-btn b-btn--tinted b-btn--sm" data-docs-replay="#symbol-demo">Play</button>
  <span class="b-caption b-text-secondary">the one-shot effects have already run — press to see them</span>
</div>
<div class="b-hstack b-gap-4 b-stack--wrap">
  <span class="b-vstack b-gap-2" style="align-items: center; min-width: 5rem">
    <svg class="b-icon b-icon--bounce" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m3.5 10 13-6-3.5 13-3.5-4.5L3.5 10Zm6 2.5L13 7" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    <code class="b-caption2">--bounce</code>
  </span>
  <span class="b-vstack b-gap-2" style="align-items: center; min-width: 5rem">
    <svg class="b-icon b-icon--scale" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3l1.2 3.3 3.3 1.2-3.3 1.2L10 12 8.8 8.7 5.5 7.5l3.3-1.2L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    <code class="b-caption2">--scale</code>
  </span>
  <span class="b-vstack b-gap-2" style="align-items: center; min-width: 5rem">
    <svg class="b-icon b-icon--wiggle" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5 3.5 15h13L10 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M10 8v3M10 13h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    <code class="b-capti
```

### Library  (https://ui.barua.tz/docs/icons.html#icon-library)
Fifty-nine core glyphs. Click to copy the SVG — paste it inline and add .b-icon . New icons must keep the grid, stroke and naming conventions; propose them here before using them in product.
Classes: b-icon


## Layout — stacks, grids, containers, stage, scroll areas

### Container  (https://ui.barua.tz/docs/layout.html#container)
.b-container centers content and clamps its width — the default cap is --b-container-lg (64rem). Size variants swap the cap; --fluid removes it. Wider variants clamp to this page's width here, which is exactly what they'd do on a narrow viewport.
Classes: b-card__body b-container b-container--fluid b-container--md b-container--sm b-container--xl

```html
<div class="b-container b-container--sm">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--sm · 40rem</div>
</div>
<div class="b-container b-container--md">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--md · 48rem</div>
</div>
<div class="b-container">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">default · 64rem</div>
</div>
<div class="b-container b-container--xl">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--xl · 80rem</div>
</div>
<div class="b-container b-container--fluid">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--fluid · no cap</div>
</div>
```

### Stack (VStack)  (https://ui.barua.tz/docs/layout.html#stack)
.b-stack (alias .b-vstack ) is a vertical flex column with a token gap — the default building block for any view. Tune spacing with the gap scale — .b-gap-0 , .b-gap-1 , .b-gap-2 , .b-gap-3 , .b-gap-4 , .b-gap-6 , .b-gap-8 — instead of margins on children.
Variants: Alignment
Classes: b-card__body b-gap-2 b-grid b-grid--3 b-stack b-stack--center b-stack--end b-stack--start

```html
<div class="b-stack b-gap-2">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">1</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">2</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">3</div>
</div>
```

### HStack  (https://ui.barua.tz/docs/layout.html#hstack)
.b-hstack lays children out in a row, vertically centered. The alignment modifiers are shared with Stack — add .b-stack--between to spread children across the row.
Variants: Title + Spacer + action
Classes: b-badge b-badge--accent b-btn b-btn--sm b-btn--tinted b-card__body b-gap-2 b-headline b-hstack b-spacer b-stack--between

```html
<div class="b-hstack b-gap-2">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">1</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">2</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">3</div>
</div>
<div class="b-hstack b-stack--between">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">1</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">2</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">3</div>
</div>
```

### Grid  (https://ui.barua.tz/docs/layout.html#grid)
.b-grid is a 12-column grid by default: set --b-cols (or a .b-grid--2/3/4/6 preset) and place children with .b-col-span-* classes.
Variants: Auto-fit
Classes: b-card__body b-col-span-4 b-col-span-6 b-col-span-full b-grid b-grid--auto

```html
<div class="b-grid">
  <div class="b-col-span-4 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span 4</div>
  <div class="b-col-span-4 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span 4</div>
  <div class="b-col-span-4 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span 4</div>
  <div class="b-col-span-6 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span 6</div>
  <div class="b-col-span-6 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span 6</div>
  <div class="b-col-span-full b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">span full</div>
</div>
```

### Flex  (https://ui.barua.tz/docs/layout.html#flex)
A thin display: flex shorthand for when a stack is too opinionated. --center and --between handle both axes; .b-grow and .b-shrink-0 tune individual children.
Classes: b-card__body b-flex b-flex--between b-grow b-shrink-0

```html
<div class="b-flex b-flex--between">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--between</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--between</div>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">--between</div>
</div>
<div class="b-flex">
  <div class="b-shrink-0 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">fixed</div>
  <div class="b-grow b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">b-grow</div>
  <div class="b-shrink-0 b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">fixed</div>
</div>
```

### Split View  (https://ui.barua.tz/docs/layout.html#split-view)
Master–detail in one line of markup: .b-split stretches .b-panel children to equal height with a .b-resize-handle between them. Make the sidebar .b-resizable and dragging is native CSS resize — no JavaScript.
Classes: b-card__body b-grow b-panel b-resizable b-resize-handle b-split

```html
<div class="b-split" style="height: 12rem;">
  <div class="b-panel b-resizable" style="flex: none; width: 13rem;">
    <div class="b-card__body">Sidebar</div>
  </div>
  <div class="b-resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>
  <div class="b-panel b-grow">
    <div class="b-card__body">Detail</div>
  </div>
</div>
```

### Resizable Panel  (https://ui.barua.tz/docs/layout.html#resizable-panel)
.b-resizable adds the browser's native resize grip to any panel — horizontal by default, --vertical for height. Look for the grip in the bottom-trailing corner; min and max bounds are built in.
Classes: b-card__body b-panel b-resizable b-resizable--vertical

```html
<div class="b-panel b-resizable" style="width: 15rem;">
  <div class="b-card__body">Drag my corner →</div>
</div>
<div class="b-panel b-resizable b-resizable--vertical" style="width: 15rem; height: 7rem;">
  <div class="b-card__body">Drag me taller ↓</div>
</div>
```

### Panel  (https://ui.barua.tz/docs/layout.html#panel)
.b-panel is the plain workhorse surface: surface background, hairline border, large radius. --plain strips the chrome for panels that only exist to scroll or resize.
Classes: b-card__body b-grid b-grid--2 b-panel b-panel--plain

```html
<div class="b-grid b-grid--2">
  <div class="b-panel">
    <div class="b-card__body">b-panel</div>
  </div>
  <div class="b-panel b-panel--plain">
    <div class="b-card__body">b-panel--plain</div>
  </div>
</div>
```

### Section  (https://ui.barua.tz/docs/layout.html#section)
.b-section adds generous block padding between page regions — the vertical rhythm of a landing or settings page. --tight is the compact cut. Dividers shown here only to make the padding visible.
Classes: b-card__body b-divider b-section b-section--tight

```html
<div>
  <hr class="b-divider">
  <div class="b-section b-section--tight">
    <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">b-section--tight</div>
  </div>
  <hr class="b-divider">
  <div class="b-section">
    <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">b-section</div>
  </div>
  <hr class="b-divider">
</div>
```

### Card Grid  (https://ui.barua.tz/docs/layout.html#card-grid)
A responsive shelf of cards: auto-fill columns at least 17rem wide, token gap, no breakpoints. The default answer for dashboards and galleries.
Classes: b-card b-card-grid b-card__body b-card__subtitle b-card__title

```html
<div class="b-card-grid">
  <article class="b-card">
    <div class="b-card__body">
      <div class="b-card__title">Reports</div>
      <div class="b-card__subtitle">Weekly digest</div>
    </div>
  </article>
  <article class="b-card">
    <div class="b-card__body">
      <div class="b-card__title">Automations</div>
      <div class="b-card__subtitle">4 running</div>
    </div>
  </article>
  <article class="b-card">
    <div class="b-card__body">
      <div class="b-card__title">Contacts</div>
      <div class="b-card__subtitle">1,208 people</div>
    </div>
  </article>
  <article class="b-card">
    <div class="b-card__body">
      <div class="b-card__title">Billing</div>
      <div class="b-card__subtitle">Paid until March</div>
    </div>
  </article>
</div>
```

### Masonry  (https://ui.barua.tz/docs/layout.html#masonry)
CSS-columns masonry for content of uneven height — pins, notes, image cards. Items flow down each column in source order; cap the column count with --b-masonry-cols .
Classes: b-card b-card__body b-masonry

```html
<div class="b-masonry">
  <article class="b-card">
    <div class="b-card__body" style="min-height: 5rem;">1</div>
  </article>
  <article class="b-card">
    <div class="b-card__body" style="min-height: 8rem;">2</div>
  </article>
  <article class="b-card">
    <div class="b-card__body" style="min-height: 3rem;">3</div>
  </article>
  <article class="b-card">
    <div class="b-card__body" style="min-height: 6rem;">4</div>
  </article>
  <article class="b-card">
    <div class="b-card__body" style="min-height: 4rem;">5</div>
  </article>
  <article class="b-card">
    <div class="b-card__body" style="min-height: 7rem;">6</div>
  </article>
</div>
```

### Scroll Area  (https://ui.barua.tz/docs/layout.html#scroll-area)
Give it a height and .b-scroll-area contains the scrolling: overscroll never leaks to the page and the scrollbar gutter stays stable. --fade masks both edges so clipped content looks intentional.
Classes: b-card__body b-gap-2 b-grid b-grid--2 b-scroll-area b-scroll-area--fade b-stack

```html
<div class="b-grid b-grid--2">
  <div class="b-scroll-area" style="height: 10rem;" tabindex="0" role="region" aria-label="Recent activity">
    <div class="b-stack b-gap-2">
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 1</div>
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 2</div>
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 3</div>
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 4</div>
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 5</div>
      <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Row 6</div>
    </div>
  </div>
  <div class="b-scroll-area b-scroll-area--fade" style="height: 10rem;" tabindex="0" role="region" aria-label="Recent activity, faded edges">
    <div class="b-st
```

### Spacer  (https://ui.barua.tz/docs/layout.html#spacer)
Straight from SwiftUI: .b-spacer is an empty flex-1 element that absorbs leftover space. Push row siblings apart, or pin a footer to the bottom of a fixed-height stack.
Classes: b-card__body b-hstack b-spacer b-stack

```html
<div class="b-hstack">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Leading</div>
  <span class="b-spacer"></span>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Trailing</div>
</div>
<div class="b-stack" style="height: 9rem;">
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Content</div>
  <span class="b-spacer"></span>
  <div class="b-card__body" style="background: var(--b-color-accent-soft); border-radius: var(--b-radius-md); padding: var(--b-space-3); text-align: center;">Pinned footer</div>
</div>
```

### Divider  (https://ui.barua.tz/docs/layout.html#divider)
Hairline separators drawn with --b-separator . Horizontal by default; use them sparingly — a stack gap is often separation enough.
Variants: Vertical, Inset, Label
Classes: b-avatar b-avatar--sm b-body b-btn b-btn--primary b-divider b-divider--inset b-divider--label b-divider--vertical b-gap-3 b-hstack b-link b-link--danger b-list b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-stack

```html
<div class="b-stack">
  <p class="b-body">Above the fold</p>
  <hr class="b-divider">
  <p class="b-body">Below the fold</p>
</div>
```

### Responsive  (https://ui.barua.tz/docs/layout.html#responsive)
Barua is mobile-first and the components own their own shrinking — pages should not need bespoke media queries. .b-dashboard spans collapse to full width below md (768px) and the column grid engages above it. Floating surfaces clamp themselves to the viewport: toasts, notifications, menus and the command palette cap their width, and the dock tray scrolls when crowded. The breakpoint scale lives in Foundations ; when a component should respond to its box rather than the viewport, use container queries below.
Variants: Wrapping toolbars, Visibility utilities
Classes: b-badge b-badge--accent b-btn b-btn--glass b-btn--primary b-btn--sm b-gap-2 b-hide-desktop b-hide-mobile b-hstack b-spacer b-stack--wrap

```html
<div class="b-hstack b-stack--wrap b-gap-2" style="max-width: 20rem">
  <span class="b-badge b-badge--accent">Inbox</span>
  <span class="b-badge">Sent</span>
  <span class="b-badge">Archive</span>
  <span class="b-spacer"></span>
  <button class="b-btn b-btn--glass b-btn--sm">Filter</button>
  <button class="b-btn b-btn--primary b-btn--sm">Compose</button>
</div>
```

### Stage  (https://ui.barua.tz/docs/layout.html#stage)
.b-stage turns a page into a fixed screen: full viewport height, no scrolling — the layout for ambient walls, kiosks and TV-style surfaces where everything must be visible at once. Its .b-container child stretches, a .b-dashboard inside shares the remaining height between rows, and cards clip internally instead of growing the page. Below md it steps aside and the page scrolls like any phone screen. The ambient example is built on it.
Classes: b-card b-card--compact b-card__body b-card__header b-card__title b-container b-dashboard b-gap-3 b-span-6 b-stack b-stage

```html
<div class="b-stage" style="height: 16rem">
  <div class="b-container b-stack b-gap-3">
    <div class="b-dashboard">
      <article class="b-card b-card--compact b-span-6">
        <div class="b-card__header"><div class="b-card__title">Fits</div></div>
        <div class="b-card__body">Rows share the stage height.</div>
      </article>
      <article class="b-card b-card--compact b-span-6">
        <div class="b-card__header"><div class="b-card__title">Clips</div></div>
        <div class="b-card__body">Overflowing content clips inside the card — the page never scrolls.</div>
      </article>
    </div>
  </div>
</div>
```

### Container Queries  (https://ui.barua.tz/docs/layout.html#container-queries)
SwiftUI's ViewThatFits , the CSS way: mark a wrapper .b-cq and children respond to the container's width — .b-cq-show-sm/md/lg appear at ≥24/40/56rem, .b-cq-hide-* retire. The same component adapts in a sidebar and in a full-width main without media queries.
Classes: b-card b-card__body b-cq b-cq-hide-sm b-cq-show-sm b-footnote b-text-secondary

```html
<div class="b-cq b-card" style="max-width: 20rem">
  <div class="b-card__body">
    <span class="b-cq-hide-sm b-footnote b-text-secondary">Narrow container → compact</span>
    <span class="b-cq-show-sm">Wide container content</span>
  </div>
</div>
<div class="b-cq b-card">
  <div class="b-card__body">
    <span class="b-cq-hide-sm b-footnote b-text-secondary">Narrow container → compact</span>
    <span class="b-cq-show-sm">Wide container content — this card is past the 24rem detent, so the fuller layout renders.</span>
  </div>
</div>
```

### Text that fits  (https://ui.barua.tz/docs/layout.html#fit-text)
SwiftUI has minimumScaleFactor ; CSS has no direct equivalent, but a container query unit does the same job honestly. .b-fit-text sizes its child as a fraction of the container's width, clamped so it can never become unreadable at one end or absurd at the other.
Classes: b-fit-text b-gap-3 b-stack b-stat__value

```html
<div class="b-stack b-gap-3">
  <div class="b-fit-text" style="width: 100%"><div class="b-stat__value">TZS 4,208,500</div></div>
  <div class="b-fit-text" style="width: 60%"><div class="b-stat__value">TZS 4,208,500</div></div>
  <div class="b-fit-text" style="width: 34%"><div class="b-stat__value">TZS 4,208,500</div></div>
</div>
```


## Actions — buttons, icon buttons, toolbars, links

### Button  (https://ui.barua.tz/docs/actions.html#button)
The workhorse. Default is a neutral filled button; add .b-btn--primary for the main action of a view — aim for one primary per view, like Apple does.
Variants: Sizes, States
Classes: b-btn b-btn--block b-btn--danger b-btn--danger-tinted b-btn--ghost b-btn--glass b-btn--lg b-btn--liquid b-btn--outline b-btn--pill b-btn--primary b-btn--sm b-btn--tinted b-btn--xl b-btn--xs

```html
<button class="b-btn b-btn--primary">Continue</button>
<button class="b-btn b-btn--tinted">Duplicate</button>
<button class="b-btn">Default</button>
<button class="b-btn b-btn--outline">Outline</button>
<button class="b-btn b-btn--ghost">Ghost</button>
<button class="b-btn b-btn--glass">Glass</button>
<button class="b-btn b-btn--liquid">Liquid</button>
<button class="b-btn b-btn--danger">Delete</button>
<button class="b-btn b-btn--danger-tinted">Remove</button>
```

### Icon Button  (https://ui.barua.tz/docs/actions.html#icon-button)
Square variant for icon-only actions. Always provide aria-label ; add .b-tooltip-host with data-tooltip for a hover hint.
Classes: b-btn b-btn--danger-tinted b-btn--ghost b-btn--primary b-btn--sm b-icon-btn b-tooltip-host

```html
<button class="b-btn b-icon-btn b-btn--primary" aria-label="Compose">
  <svg viewBox="0 0 20 20" fill="none"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</button>
<button class="b-btn b-icon-btn" aria-label="Archive">
  <svg viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a1.5 1.5 0 0 0 1.5-1.5V8M8.5 11h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<button class="b-btn b-icon-btn b-btn--ghost b-tooltip-host" data-tooltip="More options" aria-label="More options">
  <svg viewBox="0 0 20 20" fill="currentColor"><circle cx="4.5" cy="10" r="1.4"/><circle cx="10" cy="10" r="1.4"/><circle cx="15.5" cy="10" r="1.4"/></svg>
</button>
<button class="b-btn b-icon-btn b-btn--danger-tinted b-btn--sm" aria-label="Delete">
  <svg viewBox="0 0 20 20" fill="none"><path d="M4 6h12M8 6V4.5A1.5 1.5 0 0 1 9.5 3h1A1.5 1.5 0 0 1 12 4.5V6m2.5 0-.7 9.1A1.5 1.5 0 0 1 12.3 16H7.7a1.5 1.5 0 0 1-1.5-.9L5.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
```

### Floating Action Button  (https://ui.barua.tz/docs/actions.html#fab)
.b-fab pins to the bottom-trailing corner with safe-area padding and an accent glow. Shown here inline with position: static for the demo.
Classes: b-btn b-fab b-fab--extended b-icon-btn

```html
<button class="b-btn b-icon-btn b-fab" style="position: static" aria-label="New message">
  <svg viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</button>
<button class="b-btn b-fab b-fab--extended" style="position: static">
  <svg viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  Compose
</button>
```

### Button Group  (https://ui.barua.tz/docs/actions.html#button-group)
Related actions fused into one control. Use .b-btn-group--attached for a hairline between segments.
Classes: b-btn b-btn--outline b-btn-group b-btn-group--attached

```html
<div class="b-btn-group b-btn-group--attached" role="group" aria-label="Text alignment">
  <button class="b-btn">Left</button>
  <button class="b-btn is-active">Center</button>
  <button class="b-btn">Right</button>
</div>
<div class="b-btn-group" role="group" aria-label="Zoom">
  <button class="b-btn b-btn--outline">−</button>
  <button class="b-btn b-btn--outline">100%</button>
  <button class="b-btn b-btn--outline">+</button>
</div>
```

### Split Button  (https://ui.barua.tz/docs/actions.html#split-button)
Primary action plus a chevron that opens related choices.
Classes: b-btn b-btn--primary b-dropdown b-menu b-menu__item b-split-btn

```html
<details class="b-dropdown">
  <summary>
    <span class="b-split-btn">
      <span class="b-btn b-btn--primary">Merge branch</span>
      <span class="b-btn b-btn--primary" aria-label="More merge options">
        <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="m5 8 5 5 5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
    </span>
  </summary>
  <ul class="b-menu">
    <li><button class="b-menu__item">Merge commit</button></li>
    <li><button class="b-menu__item">Squash and merge</button></li>
    <li><button class="b-menu__item">Rebase and merge</button></li>
  </ul>
</details>
```

### Toggle Button  (https://ui.barua.tz/docs/actions.html#toggle-button)
A button with on/off state. Reflect state with aria-pressed ; the accent tint appears automatically.
Classes: b-btn b-icon-btn b-toggle-btn

```html
<button class="b-btn b-toggle-btn" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed')==='true'?'false':'true')">
  <svg viewBox="0 0 20 20" fill="none" width="16" height="16"><path d="M10 3.5c-4 0-6.5 4.5-6.5 6.5S6 16.5 10 16.5s6.5-4.5 6.5-6.5S14 3.5 10 3.5Z" stroke="currentColor" stroke-width="1.5"/><circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
  Watching
</button>
<button class="b-btn b-icon-btn b-toggle-btn" aria-pressed="false" aria-label="Bold" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed')==='true'?'false':'true')"><strong>B</strong></button>
<button class="b-btn b-icon-btn b-toggle-btn" aria-pressed="true" aria-label="Italic" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed')==='true'?'false':'true')"><em>I</em></button>
```

### Link  (https://ui.barua.tz/docs/actions.html#link)
Inline navigation. Plain <a> elements are accent colored by default; .b-link adds icon alignment and muted/danger variants.
Classes: b-link b-link--danger b-link--muted

```html
<a class="b-link" href="#link">View documentation
  <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="M7 5h8v8M15 5 5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
<a class="b-link b-link--muted" href="#link">Secondary link</a>
<a class="b-link b-link--danger" href="#link">Remove account</a>
```

### Link Group  (https://ui.barua.tz/docs/actions.html#link-group)
A wrapping row of related links, optionally dot-separated.
Classes: b-link b-link--muted b-link-group

```html
<nav class="b-link-group" aria-label="Footer">
  <a class="b-link b-link--muted" href="#link-group">Privacy</a>
  <a class="b-link b-link--muted" href="#link-group">Terms</a>
  <a class="b-link b-link--muted" href="#link-group">Status</a>
  <a class="b-link b-link--muted" href="#link-group">Contact</a>
</nav>
```

### Toolbar  (https://ui.barua.tz/docs/actions.html#toolbar)
Compact strip of small controls with hairline dividers. Add .b-toolbar--glass when it floats above content.
Classes: b-btn b-btn--ghost b-btn--sm b-btn--tinted b-divider b-divider--vertical b-icon-btn b-toolbar b-toolbar--glass

```html
<div class="b-toolbar b-toolbar--glass" role="toolbar" aria-label="Formatting">
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Bold"><strong>B</strong></button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Italic"><em>I</em></button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Underline"><u>U</u></button>
  <hr class="b-divider b-divider--vertical">
  <button class="b-btn b-btn--ghost b-btn--sm">H1</button>
  <button class="b-btn b-btn--ghost b-btn--sm">H2</button>
  <hr class="b-divider b-divider--vertical">
  <button class="b-btn b-btn--tinted b-btn--sm">Publish</button>
</div>
```

### Action Menu  (https://ui.barua.tz/docs/actions.html#action-menu)
An icon button opening a .b-menu . Uses <details> for a zero-JS dropdown — see Navigation for the full menu family.
Classes: b-btn b-dropdown b-icon-btn b-menu b-menu__item b-menu__item--danger b-menu__separator b-menu__shortcut

```html
<details class="b-dropdown">
  <summary class="b-btn b-icon-btn" aria-label="Row actions">
    <svg viewBox="0 0 20 20" fill="currentColor"><circle cx="4.5" cy="10" r="1.4"/><circle cx="10" cy="10" r="1.4"/><circle cx="15.5" cy="10" r="1.4"/></svg>
  </summary>
  <ul class="b-menu">
    <li><button class="b-menu__item">Open<span class="b-menu__shortcut">⏎</span></button></li>
    <li><button class="b-menu__item">Rename<span class="b-menu__shortcut">⌘R</span></button></li>
    <li><button class="b-menu__item">Duplicate<span class="b-menu__shortcut">⌘D</span></button></li>
    <li><hr class="b-menu__separator"></li>
    <li><button class="b-menu__item b-menu__item--danger">Delete<span class="b-menu__shortcut">⌫</span></button></li>
  </ul>
</details>
```

### Share  (https://ui.barua.tz/docs/actions.html#share)
SwiftUI's ShareLink : any button with data-b-share opens the system share sheet ( navigator.share ), falling back to copying the link with a confirming toast. Pass a URL in the attribute or leave it empty to share the current page.
Classes: b-btn b-share

```html
<button class="b-btn b-share" data-b-share="https://barua.tz" data-b-share-title="Barua">
  <svg viewBox="0 0 20 20" fill="none"><path d="M10 12.5v-9m0 0L6.8 6.7M10 3.5l3.2 3.2M4.5 10v5A1.5 1.5 0 0 0 6 16.5h8a1.5 1.5 0 0 0 1.5-1.5v-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  Share
</button>
```


## Navigation — bars, sidebars, tabs, menus, command palette

### Top Navigation  (https://ui.barua.tz/docs/navigation.html#top-navigation)
.b-topnav is the sticky glass chrome bar you are looking at right now — brand, inline links, and trailing actions separated by a .b-spacer . Reach for it on marketing pages and docs with a handful of destinations; move to a sidebar or rail once the map outgrows one row. Demoed with position: static so it stays in the box.
Classes: b-btn b-btn--ghost b-btn--primary b-btn--sm b-spacer b-topnav b-topnav__brand b-topnav__link b-topnav__links

```html
<header class="b-topnav" style="position: static">
  <a class="b-topnav__brand" href="#top-navigation">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" fill="var(--b-color-accent)"/><path d="M8 12.5 11 15l5-6" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    Acme
  </a>
  <nav class="b-topnav__links" aria-label="Primary">
    <a class="b-topnav__link is-active" aria-current="page" href="#top-navigation">Overview</a>
    <a class="b-topnav__link" href="#top-navigation">Projects</a>
    <a class="b-topnav__link" href="#top-navigation">Activity</a>
    <a class="b-topnav__link" href="#top-navigation">Docs</a>
  </nav>
  <span class="b-spacer"></span>
  <button class="b-btn b-btn--ghost b-btn--sm">Sign in</button>
  <button class="b-btn b-btn--primary b-btn--sm">Get started</button>
</header>
```

### Sidebar  (https://ui.barua.tz/docs/navigation.html#sidebar)
.b-sidebar stacks grouped items with uppercase headings — the pattern for apps with many destinations (this docs site uses one). Items take an optional icon and a trailing .b-badge for counts; add .b-sidebar--surface when it needs its own background and end hairline. Boxed here at a fixed height to show the built-in scroll.
Classes: b-badge b-badge--accent b-sidebar b-sidebar__group b-sidebar__heading b-sidebar__item

```html
<nav class="b-sidebar" style="height: 100%" aria-label="Mail">
  <div class="b-sidebar__group">
    <div class="b-sidebar__heading">Mailboxes</div>
    <a class="b-sidebar__item is-active" aria-current="page" href="#sidebar">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 11.5 5 5h10l1.5 6.5v2.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.5 11.5h4l1 1.5h3l1-1.5h4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Inbox
      <span class="b-badge b-badge--accent">24</span>
    </a>
    <a class="b-sidebar__item" href="#sidebar">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M17 3.5 3 8.5l5.5 2.5L10.5 16.5 17 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Sent
    </a>
    <a class="b-sidebar__item" href="#sidebar">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Drafts
      <span class="b-badge">3</span>
    </a>
    <a class="b-sidebar__item" href="#sidebar">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a
```

### Navigation Rail  (https://ui.barua.tz/docs/navigation.html#navigation-rail)
.b-rail is the sidebar's compact sibling: icon-first items with tiny labels on a narrow strip. Use it when you have four to seven top-level destinations and want to spend the horizontal space on content — or as the collapsed state of a full sidebar.
Classes: b-rail b-rail__item

```html
<nav class="b-rail" style="height: 17rem" aria-label="Primary">
  <a class="b-rail__item is-active" aria-current="page" href="#navigation-rail">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 8.5 10 3l6.5 5.5v7a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    <span>Home</span>
  </a>
  <a class="b-rail__item" href="#navigation-rail">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    <span>Search</span>
  </a>
  <a class="b-rail__item" href="#navigation-rail">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    <span>Library</span>
  </a>
  <a class="b-rail__item" href="#navigation-rail">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 6.5h6m4 0h2M4 13.5h2m4 0h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="6.5" r="1.8" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="13.5" r="1.8" stroke="currentColor" stroke-width="1.5"/></svg>

```

### Bottom Navigation  (https://ui.barua.tz/docs/navigation.html#bottom-navigation)
.b-bottomnav is the phone-sized counterpart: a fixed glass tab bar with three to five destinations, safe-area padding included. The active item tints accent; the rest stay quiet. Demoed with position: static .
Classes: b-bottomnav b-bottomnav__item

```html
<nav class="b-bottomnav" style="position: static" aria-label="Primary">
  <a class="b-bottomnav__item is-active" aria-current="page" href="#bottom-navigation">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 8.5 10 3l6.5 5.5v7a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-7Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    <span>Home</span>
  </a>
  <a class="b-bottomnav__item" href="#bottom-navigation">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    <span>Search</span>
  </a>
  <a class="b-bottomnav__item" href="#bottom-navigation">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5a4.5 4.5 0 0 1 4.5 4.5c0 3 1 4 1.5 4.5H4c.5-.5 1.5-1.5 1.5-4.5A4.5 4.5 0 0 1 10 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8.5 15.5a1.5 1.5 0 0 0 3 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    <span>Alerts</span>
  </a>
  <a class="b-bottomnav__item" href="#bottom-navigation">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 16.5a5.5 5.5 0 0 1 11 0" stroke="currentColor" stroke-width=
```

### Tab Bar  (https://ui.barua.tz/docs/navigation.html#tab-bar)
.b-segmented is the iOS-style segmented control: pill segments on a recessed fill, the selected one lifted on a white chip. Use it to switch views of the same content (Day / Week / Month); use underline Tabs for page-level sections. .b-segmented--block stretches it full width. Both .is-active and [aria-selected="true"] light a segment.
Classes: b-segmented b-segmented--block b-segmented__item

```html
<div class="b-segmented" role="group" aria-label="Range">
  <button class="b-segmented__item is-active">Day</button>
  <button class="b-segmented__item">Week</button>
  <button class="b-segmented__item">Month</button>
  <button class="b-segmented__item">Year</button>
</div>
<div class="b-segmented b-segmented--block" role="group" aria-label="Message filter">
  <button class="b-segmented__item is-active">All</button>
  <button class="b-segmented__item">Unread</button>
  <button class="b-segmented__item">Flagged</button>
</div>
```

### Tabs  (https://ui.barua.tz/docs/navigation.html#tabs)
Underline tabs for sectioning a page. Wrap everything in a data-b-tabs container, give triggers role="tab" and panels role="tabpanel" , and mark the initial tab aria-selected="true" — barua.js wires selection, panel visibility and the roving tabindex from there. The tab list scrolls horizontally when it overflows.
Classes: b-tab b-tabpanel b-tabs

```html
<div data-b-tabs>
  <div class="b-tabs" role="tablist" aria-label="Project sections">
    <button class="b-tab" id="demo-tab-overview" role="tab" aria-selected="true" aria-controls="demo-panel-overview">Overview</button>
    <button class="b-tab" id="demo-tab-commits" role="tab" aria-selected="false" aria-controls="demo-panel-commits">Commits</button>
    <button class="b-tab" id="demo-tab-settings" role="tab" aria-selected="false" aria-controls="demo-panel-settings">Settings</button>
  </div>
  <div class="b-tabpanel" id="demo-panel-overview" role="tabpanel" aria-labelledby="demo-tab-overview">
    A calm summary of the project: readme, recent activity, and the
    people involved.
  </div>
  <div class="b-tabpanel" id="demo-panel-commits" role="tabpanel" aria-labelledby="demo-tab-commits" hidden>
    128 commits on <code>main</code>, most recently "Polish glass
    materials".
  </div>
  <div class="b-tabpanel" id="demo-panel-settings" role="tabpanel" aria-labelledby="demo-tab-settings" hidden>
    Rename, transfer or archive the project. Danger lives behind a
    confirm dialog.
  </div>
</div>
```

### Breadcrumbs  (https://ui.barua.tz/docs/navigation.html#breadcrumbs)
A trail from root to here, separated by hairline chevrons. Use them in hierarchies deeper than two levels; the last crumb is the current page — give it aria-current="page" and no link.
Classes: b-breadcrumbs

```html
<nav aria-label="Breadcrumb">
  <ol class="b-breadcrumbs">
    <li><a href="#breadcrumbs">Home</a></li>
    <li><a href="#breadcrumbs">Projects</a></li>
    <li><a href="#breadcrumbs">Barua UI</a></li>
    <li><span aria-current="page">Navigation</span></li>
  </ol>
</nav>
```

### Pagination  (https://ui.barua.tz/docs/navigation.html#pagination)
Numbered page controls with tabular figures so widths never jitter. The current page fills accent via .is-active or [aria-current="page"] ; collapse long runs with .b-pagination__ellipsis .
Classes: b-pagination b-pagination__ellipsis b-pagination__item

```html
<nav aria-label="Pagination">
  <ul class="b-pagination">
    <li>
      <a class="b-pagination__item" href="#pagination" aria-label="Previous page">
        <svg viewBox="0 0 20 20" fill="none" width="14" height="14" aria-hidden="true"><path d="m12 5-5 5 5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </li>
    <li><a class="b-pagination__item" href="#pagination">1</a></li>
    <li><a class="b-pagination__item" href="#pagination">2</a></li>
    <li><a class="b-pagination__item" aria-current="page" href="#pagination">3</a></li>
    <li><a class="b-pagination__item" href="#pagination">4</a></li>
    <li><span class="b-pagination__ellipsis" aria-hidden="true">…</span></li>
    <li><a class="b-pagination__item" href="#pagination">12</a></li>
    <li>
      <a class="b-pagination__item" href="#pagination" aria-label="Next page">
        <svg viewBox="0 0 20 20" fill="none" width="14" height="14" aria-hidden="true"><path d="m8 5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </li>
  </ul>
</nav>
```

### Stepper  (https://ui.barua.tz/docs/navigation.html#stepper)
.b-steps shows progress through a linear flow. Each li carries its number in data-step ; .is-complete swaps it for an accent checkmark and fills the connector, .is-active rings the current step. Keep labels to one or two words.
Classes: b-steps

```html
<ol class="b-steps" aria-label="Checkout progress">
  <li class="is-complete" data-step="1">Account</li>
  <li class="is-complete" data-step="2">Shipping</li>
  <li class="is-active" data-step="3" aria-current="step">Payment</li>
  <li data-step="4">Review</li>
</ol>
```

### Menu Bar  (https://ui.barua.tz/docs/navigation.html#menu-bar)
.b-menubar is the desktop-app strip of menu titles. Hover, .is-active and [aria-expanded="true"] all paint the solid accent highlight, so an open dropdown keeps its title lit. Pair each title with a dropdown menu for the real thing.
Classes: b-menubar b-menubar__item

```html
<div class="b-menubar" aria-label="Application menu">
  <button class="b-menubar__item is-active">File</button>
  <button class="b-menubar__item">Edit</button>
  <button class="b-menubar__item">View</button>
  <button class="b-menubar__item">Window</button>
  <button class="b-menubar__item">Help</button>
</div>
```

### Dropdown Menu  (https://ui.barua.tz/docs/navigation.html#dropdown-menu)
details.b-dropdown opens a glass .b-menu with zero JavaScript. Menus compose from items with optional .b-menu__shortcut hints, a .b-menu__label , hairline .b-menu__separator s, disabled items, and a .b-menu__item--danger kept last. Add .b-dropdown--end to right-align the panel.
Classes: b-btn b-dropdown b-menu b-menu__item b-menu__item--danger b-menu__label b-menu__separator b-menu__shortcut

```html
<details class="b-dropdown">
  <summary class="b-btn">
    Options
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14" aria-hidden="true"><path d="m5 8 5 5 5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </summary>
  <ul class="b-menu">
    <li class="b-menu__label">Repository</li>
    <li><button class="b-menu__item">Clone<span class="b-menu__shortcut">⌘⇧C</span></button></li>
    <li><button class="b-menu__item">Open in editor<span class="b-menu__shortcut">⌘O</span></button></li>
    <li><button class="b-menu__item" disabled>Sync fork</button></li>
    <li><hr class="b-menu__separator"></li>
    <li><button class="b-menu__item b-menu__item--danger">Delete repository<span class="b-menu__shortcut">⌫</span></button></li>
  </ul>
</details>
```

### Context Menu  (https://ui.barua.tz/docs/navigation.html#context-menu)
The same .b-menu component, summoned by right-click instead of a trigger button. In production, listen for contextmenu , show the menu with the popover attribute and position it at the pointer — the glass panel, items and states are identical. Shown here as a static instance.
Classes: b-menu b-menu__item b-menu__item--danger b-menu__separator b-menu__shortcut

```html
<ul class="b-menu">
  <li><button class="b-menu__item">Reply<span class="b-menu__shortcut">R</span></button></li>
  <li><button class="b-menu__item">Reply all<span class="b-menu__shortcut">⇧R</span></button></li>
  <li><button class="b-menu__item">Forward<span class="b-menu__shortcut">F</span></button></li>
  <li><hr class="b-menu__separator"></li>
  <li><button class="b-menu__item">Mark as read</button></li>
  <li><button class="b-menu__item b-menu__item--danger">Move to Trash<span class="b-menu__shortcut">⌫</span></button></li>
</ul>
```

### Command Menu  (https://ui.barua.tz/docs/navigation.html#command-menu)
.b-cmdk is the ⌘K palette: a search field over a grouped command list on heavy glass. In this docs site it lives in a <dialog data-b-cmdk-root> — any button with data-b-cmdk="#id" opens it, and barua.js binds ⌘K / Ctrl K globally (try it). Below is a static inline instance showing the anatomy.
Classes: b-cmdk b-cmdk__footer b-cmdk__group-label b-cmdk__input b-cmdk__item b-cmdk__list

```html
<div class="b-cmdk">
  <input class="b-cmdk__input" type="search" placeholder="Type a command or search…" aria-label="Command menu">
  <ul class="b-cmdk__list">
    <li class="b-cmdk__group-label">Navigate</li>
    <li>
      <button class="b-cmdk__item is-active">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 11.5 5 5h10l1.5 6.5v2.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.5 11.5h4l1 1.5h3l1-1.5h4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
        Go to Inbox
        <kbd>G I</kbd>
      </button>
    </li>
    <li>
      <button class="b-cmdk__item">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
        Go to Projects
        <kbd>G P</kbd>
      </button>
    </li>
    <li class="b-cmdk__group-label">Actions</li>
    <li>
      <button class="b-cmdk__item">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
        Compose message
        <kbd>C</kbd>
      </button>
    </li>
    <li>
      <butt
```

### Navigation Drawer  (https://ui.barua.tz/docs/navigation.html#navigation-drawer)
.b-drawer slides a full-height glass panel over the page — the mobile home for a sidebar. The demo uses the native popover attribute with popovertarget buttons: top layer, light dismiss and the spring slide-in for free. Use .b-drawer--end for the trailing edge, or a <dialog> opened via data-b-dialog="#id" when you need a true modal with focus trapping.
Classes: b-btn b-btn--ghost b-drawer b-drawer__body b-drawer__header b-icon-btn b-sidebar b-sidebar__group b-sidebar__heading b-sidebar__item

```html
<button class="b-btn" popovertarget="demo-drawer">Open drawer</button>
<nav class="b-drawer" popover id="demo-drawer" aria-label="Drawer">
  <div class="b-drawer__header">
    Menu
    <button class="b-btn b-icon-btn b-btn--ghost" popovertarget="demo-drawer" popovertargetaction="hide" aria-label="Close menu">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
  </div>
  <div class="b-drawer__body">
    <div class="b-sidebar">
      <div class="b-sidebar__group">
        <div class="b-sidebar__heading">Browse</div>
        <a class="b-sidebar__item is-active" href="#navigation-drawer">Home</a>
        <a class="b-sidebar__item" href="#navigation-drawer">Discover</a>
        <a class="b-sidebar__item" href="#navigation-drawer">Library</a>
      </div>
      <div class="b-sidebar__group">
        <div class="b-sidebar__heading">Account</div>
        <a class="b-sidebar__item" href="#navigation-drawer">Settings</a>
        <a class="b-sidebar__item" href="#navigation-drawer">Sign out</a>
      </div>
    </div>
  </div>
</nav>
```

### Submenu  (https://ui.barua.tz/docs/navigation.html#menu-submenu)
A nested flyout inside any .b-menu : wrap the item and its child menu in .b-menu__sub . The chevron is drawn for you; the flyout opens on hover or keyboard focus.
Classes: b-menu b-menu__item b-menu__item--danger b-menu__separator b-menu__sub

```html
<ul class="b-menu" style="position: relative">
  <li><button class="b-menu__item">New message</button></li>
  <li class="b-menu__sub">
    <button class="b-menu__item" aria-haspopup="menu">Move to</button>
    <ul class="b-menu">
      <li><button class="b-menu__item">Archive</button></li>
      <li><button class="b-menu__item">Receipts</button></li>
      <li><button class="b-menu__item">Travel</button></li>
    </ul>
  </li>
  <li><hr class="b-menu__separator"></li>
  <li><button class="b-menu__item b-menu__item--danger">Delete</button></li>
</ul>
```


## Forms — fields, selects, switches, sliders, validation

### Text Field  (https://ui.barua.tz/docs/forms.html#text-field)
The anatomy: a .b-field wraps a .b-label , the .b-input and an optional .b-help line. The label is always a real <label for> ; the placeholder only ever shows an example value.
Variants: Filled variant, Sizes
Classes: b-field b-help b-input b-input--filled b-input--lg b-input--sm b-label

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="tf-name">Full name</label>
  <input class="b-input" id="tf-name" type="text" placeholder="Amina Salim"
         autocomplete="name" aria-describedby="tf-name-help">
  <p class="b-help" id="tf-name-help">Exactly as it appears on your national ID.</p>
</div>
```

### Text Area  (https://ui.barua.tz/docs/forms.html#text-area)
.b-textarea shares the input skin, starts around 5.5rem tall and resizes vertically only — the column never breaks.
Classes: b-field b-help b-label b-textarea

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="ta-message">Message</label>
  <textarea class="b-textarea" id="ta-message" rows="4"
            placeholder="Habari! I'd like a quote for delivery from Kariakoo to Mikocheni…"></textarea>
  <p class="b-help">Plain text. Drag the corner to make room.</p>
</div>
```

### Search Field  (https://ui.barua.tz/docs/forms.html#search-field)
A .b-search wrapper turns the input into a filled pill; the .b-input-group positions icon and shortcut affixes. Affixes are click-through by default, and the input pads itself automatically when one is present.
Classes: b-input b-input-affix b-input-affix--end b-input-affix--start b-input-group b-search

```html
<div class="b-search" role="search" style="max-width: 26rem">
  <div class="b-input-group">
    <span class="b-input-affix b-input-affix--start">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13.2 13.2 3.3 3.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </span>
    <input class="b-input" type="search" placeholder="Search messages…" aria-label="Search messages">
    <span class="b-input-affix b-input-affix--end"><kbd>⌘K</kbd></span>
  </div>
</div>
```

### Password Field  (https://ui.barua.tz/docs/forms.html#password-field)
An end affix hosts a ghost icon button that swaps the input type . Buttons inside .b-input-affix--end regain pointer-events , so only the reveal is clickable — the rest of the affix stays inert.
Classes: b-btn b-btn--ghost b-btn--sm b-field b-help b-icon-btn b-input b-input-affix b-input-affix--end b-input-group b-label

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="pw">Password</label>
  <div class="b-input-group">
    <input class="b-input" id="pw" type="password" value="jambo-karibu-255"
           autocomplete="current-password" aria-describedby="pw-help">
    <span class="b-input-affix b-input-affix--end">
      <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" type="button" aria-label="Show password"
              onclick="const i=document.getElementById('pw');const s=i.type==='password';i.type=s?'text':'password';this.setAttribute('aria-label',s?'Hide password':'Show password')">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5c-4 0-6.5 4.5-6.5 6.5S6 16.5 10 16.5s6.5-4.5 6.5-6.5S14 3.5 10 3.5Z" stroke="currentColor" stroke-width="1.5"/><circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
      </button>
    </span>
  </div>
  <p class="b-help" id="pw-help">At least 12 characters. A phrase beats a puzzle.</p>
</div>
```

### Specialized Fields  (https://ui.barua.tz/docs/forms.html#specialized-fields)
There is no separate component for numbers or URLs — each is the same Text Field with a different type , which buys the right mobile keyboard and free validation. Dates and times are the exception: their native popups are not ours, so they use the Barua pickers below instead.
Classes: b-field b-form-row b-input b-label

```html
<div class="b-form-row">
<div class="b-field">
  <label class="b-label" for="sp-qty">Quantity</label>
  <input class="b-input" id="sp-qty" type="number" value="12" min="1" max="99">
</div>
<div class="b-field">
  <label class="b-label" for="sp-url">Website</label>
  <input class="b-input" id="sp-url" type="url" value="https://neurotech.africa" autocomplete="url">
</div>
<div class="b-field">
  <label class="b-label" for="sp-email">Email</label>
  <input class="b-input" id="sp-email" type="email" placeholder="amina@neurotech.africa" autocomplete="email">
</div>
</div>
```

### Date & Time Picker  (https://ui.barua.tz/docs/forms.html#date-time-picker)
Native date and time inputs open the browser’s own popup — a surface the system cannot style, and the one thing on screen that will never look Barua. Product surfaces do not use them. Dates use the Barua date picker below: the field opens the system .b-calendar in a dropdown, the same pattern as any menu. Times use a menu select of slots. Native inputs remain only as a non-visual fallback where a picker UI truly cannot run.
Variants: Barua date picker, Menu time picker
Classes: b-btn b-btn--ghost b-btn--sm b-btn--tinted b-calendar b-calendar__day b-calendar__grid b-calendar__header b-calendar__month b-calendar__weekday b-dropdown b-field b-hstack b-icon-btn b-label b-menu b-menu__item b-select b-stack--between

```html
<div class="b-field" style="max-width: 17rem">
  <span class="b-label" id="bdp-label">Travel date</span>
  <details class="b-dropdown">
    <summary class="b-select" aria-labelledby="bdp-label" style="display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-2); cursor: pointer">
      <span data-b-date-display>28 Aug 2026</span>
      <svg viewBox="0 0 20 20" fill="none" width="16" height="16" aria-hidden="true"><rect x="3" y="4.5" width="14" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 8.5h14M7 3v3M13 3v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </summary>
    <div class="b-menu" style="padding: 0; min-width: 0">
      <div class="b-calendar" style="border: none">
        <div class="b-calendar__header">
          <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Previous month">‹</button>
          <span class="b-calendar__month">August 2026</span>
          <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Next month">›</button>
        </div>
        <div class="b-calendar__grid" role="grid" aria-label="August 2026">
          <span class="b-calendar__weekday">M</span><span class="b-calendar__weekday">T</span><span class="b-calendar__weekday">W</span><span class="b-calendar__weekday">T</span><span class="b-calendar__weekday">F</span><span class="
```

### Select  (https://ui.barua.tz/docs/forms.html#select)
.b-select strips the platform chrome and draws its own chevron, so it matches the input family in both themes. It is still a native <select> — the picker sheet on iOS and the popup on macOS come along untouched.
Variants: Menu select
Classes: b-dropdown b-field b-help b-label b-menu b-menu__item b-select

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="sel-region">Region</label>
  <!-- barua-lint disable native-select: documenting the platform control itself; product surfaces use the menu select above -->
  <select class="b-select" id="sel-region">
    <option value="" disabled>Choose a region…</option>
    <option selected>Dar es Salaam</option>
    <option>Arusha</option>
    <option>Dodoma</option>
    <option>Mwanza</option>
    <option>Zanzibar West</option>
  </select>
  <p class="b-help">Sets your default delivery zone.</p>
</div>
```

### Combobox & Autocomplete  (https://ui.barua.tz/docs/forms.html#combobox-autocomplete)
A .b-combobox pairs a .b-input with an anchored .b-combobox__list . The previously chosen option carries aria-selected="true" ; the option the arrow keys are resting on gets .is-active . Both lists are pinned open here for show — your JS toggles them.
Classes: b-combobox b-combobox__empty b-combobox__list b-combobox__option b-field b-input b-label

```html
<div class="b-field" style="width: 18rem">
  <label class="b-label" for="cb-region">Region</label>
  <div class="b-combobox">
    <input class="b-input" id="cb-region" type="text" value="M" role="combobox"
           aria-expanded="true" aria-controls="cb-region-list" aria-autocomplete="list"
           aria-activedescendant="cb-opt-morogoro" autocomplete="off">
    <ul class="b-combobox__list" id="cb-region-list" role="listbox" aria-label="Regions">
      <li class="b-combobox__option" id="cb-opt-mwanza" role="option" aria-selected="true">Mwanza</li>
      <li class="b-combobox__option is-active" id="cb-opt-morogoro" role="option" aria-selected="false">Morogoro</li>
      <li class="b-combobox__option" role="option" aria-selected="false">Mtwara</li>
      <li class="b-combobox__option" role="option" aria-selected="false">Mara</li>
      <li class="b-combobox__option" role="option" aria-selected="false">Manyara</li>
    </ul>
  </div>
</div>
<div class="b-field" style="width: 18rem">
  <label class="b-label" for="cb-none">Region</label>
  <div class="b-combobox">
    <input class="b-input" id="cb-none" type="text" value="Nairobi" role="combobox"
           aria-expanded="true" aria-controls="cb-none-list" aria-autocomplete="list" autocomplete="off">
    <ul class="b-combobox__list" id="cb-none-list" role="listbox" aria-label="Regions">
      <li class="b-combobox__empty">No Tan
```

### Checkbox  (https://ui.barua.tz/docs/forms.html#checkbox)
A styled native checkbox inside its own label — no wrapper ids, no for/id bookkeeping. Indeterminate is a JavaScript-only state: set input.indeterminate = true on a parent whose children disagree, as the tiny script below does.
Classes: b-checkbox

```html
<label class="b-checkbox"><input type="checkbox" id="chk-districts"> Deliver across Dar es Salaam</label>
<label class="b-checkbox"><input type="checkbox" checked> Ilala district</label>
<label class="b-checkbox"><input type="checkbox"> Kinondoni district</label>
<label class="b-checkbox"><input type="checkbox" disabled> Temeke district (coming soon)</label>
<script>document.getElementById("chk-districts").indeterminate = true</script>
```

### Radio Button  (https://ui.barua.tz/docs/forms.html#radio-button)
Radios travel in groups, and the group needs a name of its own — wrap it in a .b-fieldset with a legend so the question is announced before the options.
Classes: b-fieldset b-radio

```html
<fieldset class="b-fieldset">
  <legend>Payment method</legend>
  <label class="b-radio"><input type="radio" name="pay" checked> M-Pesa</label>
  <label class="b-radio"><input type="radio" name="pay"> Airtel Money</label>
  <label class="b-radio"><input type="radio" name="pay"> Mixx by Yas</label>
  <label class="b-radio"><input type="radio" name="pay"> Card — Visa or Mastercard</label>
</fieldset>
```

### Toggle Switch  (https://ui.barua.tz/docs/forms.html#toggle-switch)
An iOS-grade .b-switch with a sprung thumb. Use it for settings that take effect immediately; if the choice is submitted with the rest of a form, that is a checkbox.
Classes: b-switch b-switch--sm

```html
<label class="b-switch"><input type="checkbox" checked> Read receipts</label>
<label class="b-switch"><input type="checkbox"> Auto-archive promotions</label>
<label class="b-switch b-switch--sm"><input type="checkbox" checked> Compact inbox</label>
<label class="b-switch"><input type="checkbox" checked disabled> End-to-end encryption — always on</label>
```

### Slider  (https://ui.barua.tz/docs/forms.html#slider)
input.b-slider is a native range input with an accent fill. barua.js finds every one and keeps --b-slider-fill in sync as the thumb moves, normalising against whatever min / max you set.
Classes: b-field b-help b-label b-slider

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="sl-volume">Volume</label>
  <input class="b-slider" id="sl-volume" type="range" min="0" max="100" value="65">
</div>
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="sl-font">Font size</label>
  <input class="b-slider" id="sl-font" type="range" min="12" max="24" step="1" value="16">
  <p class="b-help">12–24 px. The fill is computed from min/max, not the raw value.</p>
</div>
```

### Range Slider  (https://ui.barua.tz/docs/forms.html#range-slider)
Two native range inputs overlaid in a .b-range : the track is drawn by the wrapper, the thumbs stay interactive, and the .b-range__fill bar between them is positioned inline — here statically, in production from your input handler.
Classes: b-field b-help b-label b-range b-range__fill

```html
<div class="b-field" style="max-width: 26rem">
  <span class="b-label" id="rs-label">Price range</span>
  <div class="b-range" role="group" aria-labelledby="rs-label">
    <div class="b-range__fill" style="inset-inline-start: 20%; width: 45%"></div>
    <input type="range" min="0" max="100000" step="5000" value="20000" aria-label="Minimum price">
    <input type="range" min="0" max="100000" step="5000" value="65000" aria-label="Maximum price">
  </div>
  <p class="b-help">TZS 20,000 – TZS 65,000</p>
</div>
```

### Stepper Input  (https://ui.barua.tz/docs/forms.html#stepper-input)
A .b-stepper-input is a number input flanked by − and + buttons. barua.js wires the pair automatically, honouring min , max and step — no data attributes required.
Classes: b-field b-label b-stepper-input

```html
<div class="b-field">
  <label class="b-label" for="st-passengers">Passengers</label>
  <div class="b-stepper-input">
    <button type="button" aria-label="Fewer passengers">−</button>
    <input id="st-passengers" type="number" value="2" min="1" max="10">
    <button type="button" aria-label="More passengers">+</button>
  </div>
</div>
<div class="b-field">
  <label class="b-label" for="st-copies">Print copies</label>
  <div class="b-stepper-input">
    <button type="button" aria-label="Fewer copies">−</button>
    <input id="st-copies" type="number" value="15" min="5" max="50" step="5">
    <button type="button" aria-label="More copies">+</button>
  </div>
</div>
```

### File Upload  (https://ui.barua.tz/docs/forms.html#file-upload)
The .b-upload dropzone is a label wrapping a hidden file input, so clicking anywhere opens the picker. Add .is-dragover from your dragenter handler to light it up, and list accepted files as .b-upload-item rows.
Classes: b-btn b-btn--ghost b-btn--sm b-icon-btn b-upload b-upload-item b-upload-item__meta b-upload-item__name b-upload-item__size b-upload-item__thumb b-upload__hint

```html
<label class="b-upload" style="max-width: 26rem">
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 16V8m0 0-3 3m3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 18.5a4.5 4.5 0 0 1-.42-8.98 5.5 5.5 0 0 1 10.84 0A4.5 4.5 0 0 1 17 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  <span><strong>Choose files</strong> or drag them here</span>
  <span class="b-upload__hint">PDF, PNG or JPG · up to 10 MB each</span>
  <input type="file" multiple accept=".pdf,.png,.jpg,.jpeg">
</label>
<div class="b-upload-item" style="max-width: 26rem">
  <div class="b-upload-item__thumb" aria-hidden="true"></div>
  <div class="b-upload-item__meta">
    <div class="b-upload-item__name">zanzibar-ferry-eticket.pdf</div>
    <div class="b-upload-item__size">1.2 MB</div>
  </div>
  <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" type="button" aria-label="Remove zanzibar-ferry-eticket.pdf">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</div>
<div class="b-upload-item" style="max-width: 26rem">
  <div class="b-upload-item__thumb" aria-hidden="true"></div>
  <div class="b-upload-item__meta">
    <div class="b-upload-item__name">amina-profile-photo.jpg</div>
    <
```

### Color Picker  (https://ui.barua.tz/docs/forms.html#color-picker)
A native input[type=color] dressed to sit beside the other controls, plus a .b-swatches row for presets — mark the current one with .is-selected .
Classes: b-color-picker b-field b-label b-swatch b-swatches

```html
<div class="b-field">
  <label class="b-label" for="cp-brand">Brand color</label>
  <div class="b-color-picker">
    <input type="color" id="cp-brand" value="#0a84ff">
    <div class="b-swatches" role="group" aria-label="Preset colors">
      <button class="b-swatch is-selected" type="button" style="background: #0a84ff" aria-label="Blue" aria-pressed="true"></button>
      <button class="b-swatch" type="button" style="background: #30d158" aria-label="Green" aria-pressed="false"></button>
      <button class="b-swatch" type="button" style="background: #ff9f0a" aria-label="Orange" aria-pressed="false"></button>
      <button class="b-swatch" type="button" style="background: #ff375f" aria-label="Pink" aria-pressed="false"></button>
      <button class="b-swatch" type="button" style="background: #bf5af2" aria-label="Purple" aria-pressed="false"></button>
      <button class="b-swatch" type="button" style="background: #64d2ff" aria-label="Cyan" aria-pressed="false"></button>
    </div>
  </div>
</div>
```

### Form Structure  (https://ui.barua.tz/docs/forms.html#form-structure)
.b-form stacks .b-form-section cards, each with a header, its fields, and rows that auto-flow into columns when there is at least 14rem to spare. .b-form-actions aligns trailing, like a macOS sheet.
Classes: b-btn b-btn--primary b-field b-form b-form-actions b-form-row b-form-section b-form-section__desc b-form-section__header b-form-section__title b-help b-input b-label b-label--required b-optional b-select b-switch b-textarea

```html
<form class="b-form" onsubmit="event.preventDefault()">
  <div class="b-form-section">
    <div class="b-form-section__header">
      <div class="b-form-section__title">Profile settings</div>
      <p class="b-form-section__desc">How you appear across Barua apps.</p>
    </div>
    <div class="b-form-row">
      <div class="b-field">
        <label class="b-label" for="ps-first">First name</label>
        <input class="b-input" id="ps-first" type="text" value="Amina" autocomplete="given-name">
      </div>
      <div class="b-field">
        <label class="b-label" for="ps-last">Last name</label>
        <input class="b-input" id="ps-last" type="text" value="Salim" autocomplete="family-name">
      </div>
    </div>
    <div class="b-field">
      <label class="b-label b-label--required" for="ps-email">Work email</label>
      <input class="b-input" id="ps-email" type="email" value="amina@neurotech.africa" required autocomplete="email">
      <p class="b-help">Used for sign-in and receipts.</p>
    </div>
    <div class="b-form-row">
      <div class="b-field">
        <label class="b-label" for="ps-phone">Phone</label>
        <input class="b-input" id="ps-phone" type="tel" value="+255 754 123 456" autocomplete="tel">
      </div>
      <div class="b-field">
        <label class="b-label" for="ps-city">City</label>
        <!-- barua-lint disable native-select: documenting the 
```

### Labels & Help  (https://ui.barua.tz/docs/forms.html#labels-help)
Required fields get .b-label--required , which appends a red asterisk; genuinely optional ones say so with a .b-optional span. When most of a form is required, mark the optional few instead of starring everything. Keep .b-help to one calm sentence.
Classes: b-field b-help b-input b-label b-label--required b-optional

```html
<div class="b-field" style="max-width: 26rem">
  <label class="b-label b-label--required" for="lh-tin">TIN</label>
  <input class="b-input" id="lh-tin" type="text" inputmode="numeric" placeholder="123-456-789"
         required aria-describedby="lh-tin-help">
  <p class="b-help" id="lh-tin-help">9 digits, as issued by the Tanzania Revenue Authority.</p>
</div>
<div class="b-field" style="max-width: 26rem">
  <label class="b-label" for="lh-instagram">Instagram <span class="b-optional">(optional)</span></label>
  <input class="b-input" id="lh-instagram" type="text" placeholder="@duka.langu">
</div>
```

### Validation  (https://ui.barua.tz/docs/forms.html#validation)
Add .is-invalid to the field and swap the help line for a .b-error — border, focus ring and message all turn danger together. .is-valid confirms with a success border. Prefer no class at all where you can: .b-input:user-invalid picks up the danger border only after the person has actually touched the field, so a pristine form never opens covered in red.
Classes: b-error b-field b-help b-input b-label

```html
<div class="b-field is-invalid" style="max-width: 26rem">
  <label class="b-label" for="v-phone">Phone number</label>
  <input class="b-input" id="v-phone" type="tel" value="0754 123" autocomplete="tel"
         aria-invalid="true" aria-describedby="v-phone-error">
  <p class="b-error" id="v-phone-error">
    <svg viewBox="0 0 20 20" width="14" height="14" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.25" stroke="currentColor" stroke-width="1.5"/><path d="M10 6.5v4m0 2.8v.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    Enter the full number, e.g. +255 754 123 456.
  </p>
</div>
<div class="b-field is-valid" style="max-width: 26rem">
  <label class="b-label" for="v-email">Email</label>
  <input class="b-input" id="v-email" type="email" value="amina@neurotech.africa"
         aria-describedby="v-email-help">
  <p class="b-help" id="v-email-help">Looks good — we'll send a confirmation here.</p>
</div>
```


## Content — cards, lists, tables, badges, avatars

### Card  (https://ui.barua.tz/docs/content.html#card)
A bordered surface with optional .b-card__header , .b-card__body and .b-card__footer regions. Title and subtitle classes keep the type ramp consistent across products.
Variants: Variants, Media card, Story card (App Store style), Icon card, Grouped list card (iOS Settings), Cards that end level, Icon tile colors, App card
Classes: b-badge b-badge--success b-btn b-btn--block b-btn--ghost b-btn--glass b-btn--pill b-btn--primary b-btn--sm b-btn--tinted b-card b-card--accent b-card--compact b-card--elevated b-card--fill b-card--flush b-card--glass b-card--icon b-card--interactive b-card--media-overlay b-card--neutral b-card__art b-card__body b-card__eyebrow b-card__footer b-card__header b-card__media b-card__overlay b-card__subtitle b-card__title b-gap-3 b-grid b-grid--3 b-grow b-hstack b-icon-tile b-icon-tile--gray b-icon-tile--green b-icon-tile--indigo b-icon-tile--orange b-icon-tile--purple b-icon-tile--red b-icon-tile--sm b-icon-tile--solid b-icon-tile--teal b-list b-list--inset-divider b-list--plain b-list-item b-list-item--interactive b-list-item__chevron b-list-item__content b-list-item__leading b-list-item__title b-list-item__trailing b-spacer b-stack b-subheadline b-text-secondary b-title3 b-wallpaper-scope

```html
<article class="b-card" style="max-width: 26rem">
  <header class="b-card__header">
    <div>
      <div class="b-card__title">Safari itinerary</div>
      <div class="b-card__subtitle">Serengeti &amp; Ngorongoro · 5 days</div>
    </div>
    <button class="b-btn b-btn--ghost b-btn--sm">Edit</button>
  </header>
  <div class="b-card__body">
    Depart Arusha at dawn, overnight in Seronera, then descend into the
    crater on day four. Amina Hassan is confirmed as your guide.
  </div>
  <footer class="b-card__footer">
    <button class="b-btn b-btn--primary b-btn--sm">Book trip</button>
    <button class="b-btn b-btn--ghost b-btn--sm">Share</button>
  </footer>
</article>
```

### List & List Item  (https://ui.barua.tz/docs/content.html#list)
iOS-style grouped list. Each .b-list-item slots a leading icon, a content column with title and subtitle, trailing detail text and an optional chevron. Add .b-list-item--interactive for hover feedback and .is-selected for the accent wash.
Variants: Inset dividers, Rows that do something
Classes: b-avatar b-avatar--sm b-badge b-badge--accent b-badge--count b-footnote b-list b-list--inset-divider b-list--plain b-list-item b-list-item--interactive b-list-item--top b-list-item__chevron b-list-item__content b-list-item__leading b-list-item__subtitle b-list-item__title b-list-item__trailing b-tabular-nums b-text-secondary b-text-tertiary

```html
<ul class="b-list" style="max-width: 26rem">
  <li class="b-list-item b-list-item--interactive">
    <span class="b-list-item__leading">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4.5 7 5.5 4 5.5-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </span>
    <div class="b-list-item__content">
      <div class="b-list-item__title">Amina Hassan</div>
      <div class="b-list-item__subtitle">Customs forms for the Dar es Salaam container</div>
    </div>
    <span class="b-list-item__trailing">09:41</span>
    <span class="b-list-item__chevron" aria-hidden="true">›</span>
  </li>
  <li class="b-list-item b-list-item--interactive is-selected">
    <span class="b-list-item__leading">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 2.5 6.5 3.5v8L10 17.5 3.5 14V6L10 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.5 6 10 9.5 16.5 6M10 9.5v8" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    </span>
    <div class="b-list-item__content">
      <div class="b-list-item__title">Parcel BR-2609</div>
      <div class="b-list-item__subtitle">Out for delivery — Westlands, Nairobi</div>
    </div>
    <span class="b-list-item__trailing
```

### List Header & Footer  (https://ui.barua.tz/docs/content.html#list-captions)
iOS grouped-list captions: an uppercase .b-list__header above the group and a quiet explanatory .b-list__footer beneath — the Settings-app pattern for telling people what a group does.
Classes: b-list b-list--inset-divider b-list-item b-list-item__content b-list-item__title b-list-item__trailing b-list__footer b-list__header b-switch b-switch--sm

```html
<div class="b-list__header">Notifications</div>
<ul class="b-list b-list--inset-divider">
  <li class="b-list-item">
    <span class="b-list-item__content"><span class="b-list-item__title">New mail</span></span>
    <span class="b-list-item__trailing"><label class="b-switch b-switch--sm"><input type="checkbox" checked></label></span>
  </li>
  <li class="b-list-item">
    <span class="b-list-item__content"><span class="b-list-item__title">Mentions</span></span>
    <span class="b-list-item__trailing"><label class="b-switch b-switch--sm"><input type="checkbox"></label></span>
  </li>
</ul>
<div class="b-list__footer">Delivered quietly between 22:00 and 07:00.</div>
```

### Description List  (https://ui.barua.tz/docs/content.html#description-list)
Label–value pairs on a two-column grid. Use for read-only detail panes; switch to .b-dl--stacked in narrow columns.
Variants: Stacked
Classes: b-dl b-dl--stacked

```html
<dl class="b-dl">
  <dt>Full name</dt><dd>Amina Hassan</dd>
  <dt>Route</dt><dd>Dar es Salaam → Zanzibar</dd>
  <dt>Vessel</dt><dd>MV Kilimanjaro IV, deck 2</dd>
  <dt>Booking reference</dt><dd><code>ZNZ-88214</code></dd>
</dl>
```

### GroupBox  (https://ui.barua.tz/docs/content.html#groupbox)
SwiftUI's GroupBox for the web: a quiet, labeled enclosure for related content — softer than a card, and it nests (a nested box flips back to surface so depth stays readable).
Classes: b-groupbox b-groupbox__label b-labeled b-labeled__label b-labeled__value b-progress b-progress__fill

```html
<div class="b-groupbox" style="max-width: 24rem">
  <div class="b-groupbox__label">
    <svg viewBox="0 0 20 20" fill="none"><path d="M10 3.5c-2.5 3-4.5 5.2-4.5 7.4a4.5 4.5 0 0 0 9 0c0-2.2-2-4.4-4.5-7.4Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    Hydration
  </div>
  <div class="b-labeled">
    <span class="b-labeled__label">Today</span>
    <span class="b-labeled__value">1.2 L of 2 L</span>
  </div>
  <div class="b-progress"><div class="b-progress__fill" style="width: 60%"></div></div>
</div>
```

### Labeled Content  (https://ui.barua.tz/docs/content.html#labeled-content)
SwiftUI's LabeledContent : the standard label-left, value-right row for settings and detail screens. Rows separate with hairlines automatically; the label takes an optional small second line.
Classes: b-labeled b-labeled__label b-labeled__value b-switch

```html
<div class="b-labeled">
  <span class="b-labeled__label">Plan</span>
  <span class="b-labeled__value">Barua Business</span>
</div>
<div class="b-labeled">
  <span class="b-labeled__label">Storage<small>Mail and Drive combined</small></span>
  <span class="b-labeled__value">8.2 GB of 15 GB</span>
</div>
<div class="b-labeled">
  <span class="b-labeled__label">Two-factor</span>
  <span class="b-labeled__value"><label class="b-switch"><input type="checkbox" checked></label></span>
</div>
```

### Table  (https://ui.barua.tz/docs/content.html#table)
Wrap every .b-table in a .b-table-wrap so it scrolls horizontally instead of breaking the page. Sortable columns put a .b-table__sort button inside the header cell; .is-asc / .is-desc flip the arrow. Numeric columns take .b-table__num for right-aligned tabular figures.
Variants: Striped & compact
Classes: b-table b-table--compact b-table--hover b-table--striped b-table-wrap b-table__num b-table__sort

```html
<div class="b-table-wrap">
  <table class="b-table b-table--hover">
    <thead>
      <tr>
        <th scope="col" aria-sort="ascending"><button class="b-table__sort is-asc">Route</button></th>
        <th scope="col"><button class="b-table__sort">Next departure</button></th>
        <th scope="col" class="b-table__num">Seats</th>
        <th scope="col" class="b-table__num">Fare (TZS)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dar es Salaam → Zanzibar</td>
        <td>Today 15:45</td>
        <td class="b-table__num">64</td>
        <td class="b-table__num">35,000</td>
      </tr>
      <tr class="is-selected">
        <td>Nairobi → Mombasa</td>
        <td>Today 20:35</td>
        <td class="b-table__num">118</td>
        <td class="b-table__num">58,500</td>
      </tr>
      <tr>
        <td>Arusha → Moshi</td>
        <td>Tomorrow 07:10</td>
        <td class="b-table__num">42</td>
        <td class="b-table__num">12,000</td>
      </tr>
      <tr>
        <td>Dodoma → Dar es Salaam</td>
        <td>Tomorrow 09:00</td>
        <td class="b-table__num">51</td>
        <td class="b-table__num">41,000</td>
      </tr>
    </tbody>
  </table>
</div>
```

### Data Grid  (https://ui.barua.tz/docs/content.html#data-grid)
Add .b-datagrid to the table wrap for a scrolling body with a sticky header — height comes from the --b-datagrid-h custom property. Row actions in a .b-row-actions span stay hidden until the row is hovered.
Classes: b-btn b-btn--ghost b-btn--sm b-datagrid b-icon-btn b-row-actions b-table b-table--hover b-table-wrap b-table__num

```html
<div class="b-table-wrap b-datagrid" style="--b-datagrid-h: 17rem">
  <table class="b-table b-table--hover">
    <thead>
      <tr>
        <th scope="col">Invoice</th>
        <th scope="col">Customer</th>
        <th scope="col">City</th>
        <th scope="col" class="b-table__num">Amount (TZS)</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>BR-2610</td><td>Amina Hassan</td><td>Dar es Salaam</td><td class="b-table__num">240,000</td>
        <td><span class="b-row-actions">
          <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Edit BR-2610"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></button>
          <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Delete BR-2610"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 6h12M8 6V4.5A1.5 1.5 0 0 1 9.5 3h1A1.5 1.5 0 0 1 12 4.5V6m2.5 0-.7 9.1A1.5 1.5 0 0 1 12.3 16H7.7a1.5 1.5 0 0 1-1.5-.9L5.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
        </span></td>
      </tr>
      <tr>
        <td>BR-2609</td><td>Baraka Mwangi</td><td>Nairobi</td><td class="b-table__num">96,500</td>
        <td><span class="b-row-actions">
          <button class="b-btn b-ic
```

### Tree  (https://ui.barua.tz/docs/content.html#tree)
Nested <details> elements with the .b-tree-item class — branches expand natively, no JavaScript. Leaves are plain .b-tree-item__row divs indented to align with branch labels.
Classes: b-tree b-tree-item b-tree-item__row

```html
<ul class="b-tree" style="max-width: 22rem">
  <li>
    <details class="b-tree-item" open>
      <summary>
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2.5h6A1.5 1.5 0 0 1 17 8v6.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
        Reports
      </summary>
      <ul class="b-tree">
        <li>
          <details class="b-tree-item" open>
            <summary>
              <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2.5h6A1.5 1.5 0 0 1 17 8v6.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
              Q3 2026
            </summary>
            <ul class="b-tree">
              <li>
                <div class="b-tree-item__row is-selected">
                  <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 2.5h7l3 3v12H5v-15Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 2.5v3h3" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
                  nairobi-sales.numbers
                </div>
              </li>
              <li>
                <div class="b-tree-item__row">
                  <svg viewBox="0 0 20 20" fill="none" aria-
```

### Timeline  (https://ui.barua.tz/docs/content.html#timeline)
A vertical sequence of events. Mark finished steps .is-complete (filled accent dot) and the current one .is-active (accent ring); untouched steps stay gray.
Classes: b-timeline b-timeline__body b-timeline__time b-timeline__title

```html
<ol class="b-timeline" style="max-width: 26rem">
  <li class="is-complete">
    <div class="b-timeline__time">Mon 24 Aug · 08:12</div>
    <div class="b-timeline__title">Order placed</div>
    <div class="b-timeline__body">Amina Hassan paid TZS 240,000 via mobile money.</div>
  </li>
  <li class="is-complete">
    <div class="b-timeline__time">Mon 24 Aug · 16:40</div>
    <div class="b-timeline__title">Packed in Dar es Salaam</div>
    <div class="b-timeline__body">Two parcels sealed at the Ubungo depot.</div>
  </li>
  <li class="is-active">
    <div class="b-timeline__time">Wed 26 Aug · 06:55</div>
    <div class="b-timeline__title">In transit to Nairobi</div>
    <div class="b-timeline__body">Cleared Namanga border, ETA tonight.</div>
  </li>
  <li>
    <div class="b-timeline__time">Pending</div>
    <div class="b-timeline__title">Delivered</div>
    <div class="b-timeline__body">Signature required on arrival.</div>
  </li>
</ol>
```

### Feed  (https://ui.barua.tz/docs/content.html#feed)
Avatar-plus-bubble rows for comments and activity streams. The bubble is a bordered surface; .b-feed__meta carries the byline.
Classes: b-avatar b-feed b-feed__bubble b-feed__item b-feed__meta

```html
<div class="b-feed" style="max-width: 30rem">
  <div class="b-feed__item">
    <span class="b-avatar">AH</span>
    <div class="b-feed__bubble">
      Customs cleared the container this morning — paperwork is in the
      shared folder.
      <div class="b-feed__meta">Amina Hassan · 2 h ago · Dar es Salaam</div>
    </div>
  </div>
  <div class="b-feed__item">
    <span class="b-avatar">BM</span>
    <div class="b-feed__bubble">
      Asante! I&rsquo;ll schedule the Nairobi leg for tomorrow at dawn.
      <div class="b-feed__meta">Baraka Mwangi · 1 h ago · Nairobi</div>
    </div>
  </div>
  <div class="b-feed__item">
    <span class="b-avatar">NJ</span>
    <div class="b-feed__bubble">
      Flag anything fragile — the Zanzibar ferry crossing is rough this
      week.
      <div class="b-feed__meta">Neema Joseph · 20 min ago · Zanzibar</div>
    </div>
  </div>
</div>
```

### Accordion & Disclosure  (https://ui.barua.tz/docs/content.html#accordion)
A .b-accordion stacks details.b-disclosure panels with hairlines between them — native open/close semantics and keyboard support for free. Use a lone .b-disclosure--plain for an inline “show more”.
Variants: Plain disclosure
Classes: b-accordion b-disclosure b-disclosure--plain b-disclosure__body

```html
<div class="b-accordion" style="max-width: 32rem">
  <details class="b-disclosure" open>
    <summary>How long does delivery to Zanzibar take?</summary>
    <div class="b-disclosure__body">
      Parcels leave Dar es Salaam on the 15:45 ferry daily. Most
      deliveries land in Stone Town the same evening; the east-coast
      villages add one day.
    </div>
  </details>
  <details class="b-disclosure">
    <summary>Which cities do you cover?</summary>
    <div class="b-disclosure__body">
      Dar es Salaam, Nairobi, Mombasa, Arusha, Dodoma, Kampala and
      Kigali — with partner depots in Moshi and Tanga.
    </div>
  </details>
  <details class="b-disclosure">
    <summary>Can I change the delivery address?</summary>
    <div class="b-disclosure__body">
      Yes, until the parcel is marked out for delivery. Edits after
      dispatch reroute on the next leg.
    </div>
  </details>
</div>
```

### Badge  (https://ui.barua.tz/docs/content.html#badge)
Small status labels. --dot prefixes a colored point, --count is the red numeric pill, and --solid fills with the accent for maximum emphasis.
Classes: b-badge b-badge--accent b-badge--count b-badge--danger b-badge--dot b-badge--solid b-badge--success b-badge--warning

```html
<span class="b-badge">Default</span>
<span class="b-badge b-badge--accent">Accent</span>
<span class="b-badge b-badge--success">Delivered</span>
<span class="b-badge b-badge--warning">Held at customs</span>
<span class="b-badge b-badge--danger">Failed</span>
<span class="b-badge b-badge--solid">Solid</span>
<span class="b-badge b-badge--success b-badge--dot">Online</span>
<span class="b-badge b-badge--danger b-badge--dot">Offline</span>
<span class="b-badge b-badge--count">12</span>
```

### Tag & Chip  (https://ui.barua.tz/docs/content.html#tag-chip)
Tags are quiet, outlined metadata — never click targets. Chips are interactive: real buttons that toggle with .is-selected (or aria-pressed ) and can carry a .b-chip__remove affordance.
Classes: b-chip b-chip__remove b-tag

```html
<span class="b-tag">fragile</span>
<span class="b-tag">express</span>
<span class="b-tag">cold-chain</span>
<span class="b-tag">v0.1</span>
```

### Avatar & Avatar Group  (https://ui.barua.tz/docs/content.html#avatar)
Initials on the accent-soft fill are the built-in fallback — no broken-image state, ever. Sizes run --xs to --xl ; --square suits workspaces and files, --online adds the presence dot.
Variants: Group
Classes: b-avatar b-avatar--lg b-avatar--more b-avatar--online b-avatar--sm b-avatar--square b-avatar--xl b-avatar--xs b-avatar-group

```html
<span class="b-avatar b-avatar--xs">AH</span>
<span class="b-avatar b-avatar--sm">BM</span>
<span class="b-avatar">NJ</span>
<span class="b-avatar b-avatar--lg">JA</span>
<span class="b-avatar b-avatar--xl">KO</span>
<span class="b-avatar b-avatar--square">DK</span>
<span class="b-avatar b-avatar--online">FS</span>
```

### Icon  (https://ui.barua.tz/docs/content.html#icon)
.b-icon is a sized slot for any inline SVG — it inherits currentColor , so icons re-tint with their context. .b-icon-tile wraps one in the rounded accent square used across settings lists and feature grids.
Classes: b-icon b-icon--lg b-icon--sm b-icon--xl b-icon-tile

```html
<span class="b-icon b-icon--sm"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
<span class="b-icon"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
<span class="b-icon b-icon--lg"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
<span class="b-icon b-icon--xl"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
<span class="b-icon-tile"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4.5 7 5.5 4 5.5-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="b-icon-tile"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3a4.
```

### Image  (https://ui.barua.tz/docs/content.html#image)
.b-img rounds and crops; --framed adds a soft elevation shadow. .b-figure pairs an image with a quiet caption. Gradients stand in for photography below.
Classes: b-figure b-img b-img--framed

```html
<div class="b-img" style="width:14rem;aspect-ratio:4/3;background:linear-gradient(135deg,var(--b-color-accent),var(--b-color-indigo))"></div>
<figure class="b-figure" style="max-width: 16rem">
  <div class="b-img b-img--framed" style="aspect-ratio:16/10;background:linear-gradient(160deg,var(--b-color-teal),var(--b-color-accent))"></div>
  <figcaption>Forodhani Gardens at dusk, Zanzibar.</figcaption>
</figure>
```

### Code Block  (https://ui.barua.tz/docs/content.html#code-block)
Always dark, regardless of theme. The header slot names the file and hosts a .b-code__copy button — point data-b-copy at the id of the <code> element and Barua handles the clipboard.
Classes: b-code b-code__copy b-code__header

```html
<div class="b-code" style="max-width: 34rem">
            <div class="b-code__header">
              <span>install.sh</span>
              <button class="b-code__copy" data-b-copy="#code-install">Copy</button>
            </div>
            <pre><code id="code-install">npm install barua-ui
# or just link the stylesheet
&lt;link rel="stylesheet" href="css/barua.css"&gt;</code></pre>
          </div>
```

### Quote  (https://ui.barua.tz/docs/content.html#quote)
Accent-washed pull quote with an inline-start rule. Keep the <cite> inside the blockquote for attribution.
Classes: b-quote

```html
<blockquote class="b-quote" style="max-width: 32rem">
  <p>
    Barua turned a two-day paperwork run into an afternoon. We clear a
    full container out of Dar es Salaam before lunch now.
  </p>
  <cite>Khadija Omar — Operations lead, Mombasa</cite>
</blockquote>
```

### Statistic  (https://ui.barua.tz/docs/content.html#statistic)
Big tabular-numeral values with a label and an optional delta. .is-up renders green, .is-down red — pick metrics where the direction matches the sentiment.
Classes: b-grid b-grid--3 b-stat b-stat__delta b-stat__label b-stat__value

```html
<div class="b-grid b-grid--3">
  <div class="b-stat">
    <div class="b-stat__label">Deliveries this month</div>
    <div class="b-stat__value">4,807</div>
    <span class="b-stat__delta is-up">↑ 12.4% vs July</span>
  </div>
  <div class="b-stat">
    <div class="b-stat__label">On-time rate</div>
    <div class="b-stat__value">96.2%</div>
    <span class="b-stat__delta is-up">↑ 1.1 pts</span>
  </div>
  <div class="b-stat">
    <div class="b-stat__label">Revenue (TZS)</div>
    <div class="b-stat__value">86.4M</div>
    <span class="b-stat__delta is-down">↓ 3.2% vs July</span>
  </div>
</div>
```

### Empty State  (https://ui.barua.tz/docs/content.html#empty-state)
Centered icon, headline, one supportive sentence, one action. Never leave a blank pane — tell people what belongs here and how to start.
Classes: b-btn b-btn--primary b-empty b-empty__desc b-empty__icon b-empty__title

```html
<div class="b-empty">
  <div class="b-empty__icon">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 4.5h10l2 6.5v4.5H3V11L5 4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.5 11h4l1 2h3l1-2h4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  </div>
  <div class="b-empty__title">No shipments yet</div>
  <p class="b-empty__desc">
    When you book a pickup or send a parcel, it appears here with live
    tracking from depot to doorstep.
  </p>
  <button class="b-btn b-btn--primary">Create shipment</button>
</div>
```

### Rich Media & Text  (https://ui.barua.tz/docs/content.html#rich-media-text)
Video and audio players live on the Media page. For rendered markdown and rich text, Barua’s base typography does the work — headings, paragraphs, inline code, quotes and lists inherit the ramp, so a .b-card__body is all a prose container needs.
Classes: b-card b-card__body

```html
<article class="b-card" style="max-width: 36rem">
  <div class="b-card__body">
    <h3>Shipping to Zanzibar</h3>
    <p>
      Parcels bound for the islands route through the
      <code>ZNZ</code> depot and cross on the afternoon ferry from Dar
      es Salaam.
    </p>
    <blockquote>
      Book before 13:00 EAT to make the same-day crossing.
    </blockquote>
    <ul>
      <li>Stone Town — same evening</li>
      <li>Nungwi and the east coast — next morning</li>
      <li>Pemba — every Tuesday and Friday</li>
    </ul>
  </div>
</article>
```


## Feedback — alerts, toasts, progress, skeletons, empty states

### Alert  (https://ui.barua.tz/docs/feedback.html#alert)
An inline, contextual message that sits in the page flow. The default is informational; add .b-alert--success , .b-alert--warning or .b-alert--danger . A close button with data-b-dismiss removes the alert with zero extra JS.
Classes: b-alert b-alert--danger b-alert--success b-alert--warning b-alert__close b-alert__content b-alert__desc b-alert__icon b-alert__title

```html
<div class="b-alert" role="status">
  <span class="b-alert__icon">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/><path d="M10 9v5m0-8v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </span>
  <div class="b-alert__content">
    <div class="b-alert__title">A new version is available</div>
    <div class="b-alert__desc">Refresh to load Barua UI v0.2 — no data will be lost.</div>
  </div>
  <button class="b-alert__close" data-b-dismiss aria-label="Dismiss">
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</div>
<div class="b-alert b-alert--success" role="status">
  <span class="b-alert__icon">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/><path d="m6.5 10.3 2.3 2.3 4.7-5.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </span>
  <div class="b-alert__content">
    <div class="b-alert__title">Backup complete</div>
    <div class="b-alert__desc">All 1,284 files are safely stored. Next backup runs tonight at 02:00.</div>
  </div>
  <button class="b-alert__close" data-b-dismiss aria-label="Dismiss">
    <svg viewBox="0 0 20 20" fill="none"
```

### Banner  (https://ui.barua.tz/docs/feedback.html#banner)
A full-width announcement pinned above the app chrome. The default wears the accent gradient; .b-banner--neutral sits quietly on a surface color for less urgent notices. The close button uses data-b-dismiss .
Classes: b-banner b-banner--neutral b-banner__close

```html
<div class="b-banner" role="status">
  <span>Barua UI v0.2 ships glass navigation and charts. <a href="#banner">See what's new</a></span>
  <button class="b-banner__close" data-b-dismiss aria-label="Dismiss announcement">
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</div>
<div class="b-banner b-banner--neutral" role="status">
  <span>Scheduled maintenance Saturday 02:00–04:00 UTC. <a href="#banner">Status page</a></span>
  <button class="b-banner__close" data-b-dismiss aria-label="Dismiss notice">
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</div>
```

### Toast  (https://ui.barua.tz/docs/feedback.html#toast)
A transient, glassy confirmation that floats in from the bottom corner and dismisses itself. At runtime toasts live inside an auto-created .b-toast-region ; the static markup below shows each variant's anatomy — icon, content and an optional trailing action.
Variants: Live triggers, JavaScript API
Classes: b-btn b-btn--ghost b-btn--outline b-btn--tinted b-table b-table-wrap b-toast b-toast--danger b-toast--success b-toast--warning b-toast__action b-toast__content b-toast__desc b-toast__icon b-toast__title

```html
<div class="b-toast" role="status">
  <span class="b-toast__icon">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/><path d="M10 9v5m0-8v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </span>
  <div class="b-toast__content">
    <div class="b-toast__title">New sign-in</div>
    <div class="b-toast__desc">Safari on macOS, Arusha TZ</div>
  </div>
</div>
<div class="b-toast b-toast--success" role="status">
  <span class="b-toast__icon">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8.25" stroke="currentColor" stroke-width="1.5"/><path d="m6.5 10.3 2.3 2.3 4.7-5.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </span>
  <div class="b-toast__content">
    <div class="b-toast__title">Saved</div>
    <div class="b-toast__desc">Profile updated</div>
  </div>
</div>
<div class="b-toast b-toast--warning" role="status">
  <span class="b-toast__icon">
    <svg viewBox="0 0 20 20" fill="none"><path d="M10 3.5 18 17H2L10 3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M10 8.5v3.5m0 2.2v.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </span>
  <div class="b-toast__content">
    <div class="b-toast__title">Working offline</div>
    <div class="b-toast__desc">C
```

### Snackbar  (https://ui.barua.tz/docs/feedback.html#snackbar)
A snackbar is the same .b-toast component anchored to the bottom center of the viewport — wrap it in <div class="b-toast-region b-toast-region--center" aria-live="polite"> instead of the default corner region. It usually skips the icon and always offers one action.
Classes: b-toast b-toast-region b-toast-region--center b-toast__action b-toast__content b-toast__title

```html
<div class="b-toast" role="status">
  <div class="b-toast__content">
    <div class="b-toast__title">Conversation moved to Trash</div>
  </div>
  <button class="b-toast__action">Undo</button>
</div>
```

### Notification  (https://ui.barua.tz/docs/feedback.html#notification)
A rich, macOS-style notification card: source app, title, body and timestamp beside an avatar or app mark. It shares the toast's glass treatment and works with data-b-dismiss on any child button.
Classes: b-avatar b-avatar--square b-notification b-notification__app b-notification__body b-notification__desc b-notification__time b-notification__title

```html
<div class="b-notification" role="status">
  <span class="b-avatar">AK</span>
  <div class="b-notification__body">
    <div class="b-notification__app">Messages</div>
    <div class="b-notification__title">Amina Kimaro</div>
    <div class="b-notification__desc">Uploaded the Q3 launch deck — take a look before standup.</div>
  </div>
  <span class="b-notification__time">now</span>
</div>
<div class="b-notification" role="status">
  <span class="b-avatar b-avatar--square">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="4" fill="var(--b-color-accent)"/><path d="m4 7 8 6 8-6" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </span>
  <div class="b-notification__body">
    <div class="b-notification__app">Barua Mail</div>
    <div class="b-notification__title">Weekly digest ready</div>
    <div class="b-notification__desc">12 threads resolved, 3 waiting on you.</div>
  </div>
  <span class="b-notification__time">9:41</span>
</div>
```

### Tip  (https://ui.barua.tz/docs/feedback.html#tip)
A TipKit-style callout: glass card with an icon tile, one-line promise, quiet explanation, inline actions and a dismiss. For teaching a feature in place — once, then it leaves.
Classes: b-link b-link--muted b-tip b-tip__actions b-tip__close b-tip__content b-tip__desc b-tip__icon b-tip__title

```html
<div class="b-tip" style="max-width: 26rem">
  <span class="b-tip__icon">
    <svg viewBox="0 0 20 20" fill="none"><path d="M10 2.5v2M4.7 4.7l1.4 1.4M2.5 10h2M15.3 4.7l-1.4 1.4M17.5 10h-2M7.5 15.5h5M8.5 18h3M10 6a4 4 0 0 1 2.5 7.1c-.5.4-.8 1-.8 1.6v.3h-3.4v-.3c0-.6-.3-1.2-.8-1.6A4 4 0 0 1 10 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </span>
  <span class="b-tip__content">
    <span class="b-tip__title">Swipe to archive</span>
    <span class="b-tip__desc">Drag any conversation left to file it without opening it.</span>
    <span class="b-tip__actions">
      <button class="b-link">Try it</button>
      <button class="b-link b-link--muted">Not now</button>
    </span>
  </span>
  <button class="b-tip__close" aria-label="Dismiss tip" data-b-dismiss>✕</button>
</div>
```

### Status Indicator  (https://ui.barua.tz/docs/feedback.html#status-indicator)
A dot plus label for presence and system health. Presence modifiers --online , --busy and --away have semantic aliases --success , --danger and --warning for non-people states; add --pulse to animate live activity.
Classes: b-status b-status--away b-status--busy b-status--danger b-status--online b-status--pulse b-status--success b-status--warning

```html
<span class="b-status">Offline</span>
<span class="b-status b-status--online">Online</span>
<span class="b-status b-status--away">Away</span>
<span class="b-status b-status--busy">Busy</span>
<span class="b-status b-status--online b-status--pulse">Live</span>
<span class="b-status b-status--success">Operational</span>
<span class="b-status b-status--warning">Degraded</span>
<span class="b-status b-status--danger">Major outage</span>
```

### Progress Bar  (https://ui.barua.tz/docs/feedback.html#progress-bar)
A determinate track whose fill width comes from the --b-progress custom property, e.g. style="--b-progress: 65%" . The fill animates smoothly when the value changes.
Variants: Sizes, Semantic colors, Indeterminate
Classes: b-progress b-progress--danger b-progress--indeterminate b-progress--lg b-progress--sm b-progress--success b-progress--warning b-progress__fill

```html
<div class="b-progress" role="progressbar" aria-label="Upload progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="--b-progress: 65%">
  <div class="b-progress__fill"></div>
</div>
```

### Circular Progress  (https://ui.barua.tz/docs/feedback.html#circular-progress)
A conic-gradient ring driven by a unitless --b-progress value from 0–100 set on .b-circular . Wrap it in .b-circular-wrap to center a .b-circular__label in the ring; resize with --b-circular-size and --b-circular-track .
Classes: b-circular b-circular-wrap b-circular__label

```html
<div class="b-circular-wrap">
  <div class="b-circular" role="progressbar" aria-label="Sync" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--b-progress: 72"></div>
  <span class="b-circular__label">72%</span>
</div>
<div class="b-circular-wrap">
  <div class="b-circular" role="progressbar" aria-label="Storage" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="--b-progress: 45; --b-circular-size: 4.5rem"></div>
  <span class="b-circular__label">45%</span>
</div>
<div class="b-circular-wrap">
  <div class="b-circular" role="progressbar" aria-label="Goal" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--b-progress: 90; --b-circular-size: 6rem; --b-circular-track: 6px"></div>
  <span class="b-circular__label">90%</span>
</div>
```

### Loading Spinner  (https://ui.barua.tz/docs/feedback.html#loading-spinner)
A lightweight indeterminate ring in three sizes. For buttons, prefer the built-in .b-btn.is-loading state from Actions — it swaps the label for a spinner while keeping the accessible name.
Classes: b-btn b-btn--primary b-spinner b-spinner--lg b-spinner--sm

```html
<span class="b-spinner b-spinner--sm" role="status" aria-label="Loading"></span>
<span class="b-spinner" role="status" aria-label="Loading"></span>
<span class="b-spinner b-spinner--lg" role="status" aria-label="Loading"></span>
<button class="b-btn b-btn--primary is-loading" aria-busy="true">Saving…</button>
```

### Skeleton  (https://ui.barua.tz/docs/feedback.html#skeleton)
Shimmering placeholders that hold layout while content loads. Four shapes — --text , --title , --circle and --card — compose into a ghost of the real screen.
Variants: Composed loading state
Classes: b-card b-card__body b-skeleton b-skeleton--card b-skeleton--circle b-skeleton--text b-skeleton--title

```html
<div class="b-skeleton b-skeleton--title"></div>
<div class="b-skeleton b-skeleton--text"></div>
<div class="b-skeleton b-skeleton--text" style="width: 75%"></div>
<div class="b-skeleton b-skeleton--circle" style="width: 3rem"></div>
<div class="b-skeleton b-skeleton--card" style="max-width: 18rem"></div>
```

### Result States  (https://ui.barua.tz/docs/feedback.html#result-states)
A full-panel outcome message for the end of a flow — one component, four modifiers. .b-result--success , .b-result--error , .b-result--warning and .b-result--confirm compose the Success State, Error State, Warning State and Confirmation State patterns from the component list. Each pairs a tinted icon disc with a title, supporting copy and clear next actions.
Classes: b-btn b-btn--ghost b-btn--primary b-divider b-result b-result--confirm b-result--error b-result--success b-result--warning b-result__actions b-result__desc b-result__icon b-result__title

```html
<div class="b-result b-result--success">
  <div class="b-result__icon">
    <svg viewBox="0 0 20 20" fill="none"><path d="m4.5 10.5 3.5 3.5 7.5-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <div class="b-result__title">Payment complete</div>
  <div class="b-result__desc">Your receipt is on its way to your inbox. Funds typically arrive within two business days.</div>
  <div class="b-result__actions">
    <button class="b-btn b-btn--primary">View receipt</button>
    <button class="b-btn b-btn--ghost">Done</button>
  </div>
</div>
<hr class="b-divider">
<div class="b-result b-result--error" role="alert">
  <div class="b-result__icon">
    <svg viewBox="0 0 20 20" fill="none"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </div>
  <div class="b-result__title">Something went wrong</div>
  <div class="b-result__desc">We couldn't process the transfer and no money left your account. Try again, or contact support if it keeps happening.</div>
  <div class="b-result__actions">
    <button class="b-btn b-btn--primary">Try again</button>
    <button class="b-btn b-btn--ghost">Contact support</button>
  </div>
</div>
<hr class="b-divider">
<div class="b-result b-result--warning">
  <div class="b-result__icon">
    <svg viewBox="0 0 20 20" fill="none"><path d="M10 3 18.5 
```

### Redacted  (https://ui.barua.tz/docs/feedback.html#redacted)
SwiftUI's .redacted(reason: .placeholder) : add .b-redacted to any element and its real content renders as a breathing placeholder block — same box, same layout, no skeleton markup to maintain. Remove the class when data arrives.
Classes: b-card b-card__body b-card__subtitle b-card__title b-redacted

```html
<div class="b-card" style="width: 15rem"><div class="b-card__body">
  <div class="b-card__title">Amina Hassan</div>
  <div class="b-card__subtitle">Reconciled 14 invoices</div>
</div></div>
<div class="b-card" style="width: 15rem"><div class="b-card__body">
  <div class="b-card__title b-redacted">Amina Hassan</div>
  <div class="b-card__subtitle b-redacted">Reconciled 14 invoices</div>
</div></div>
```


## Overlays — modals, sheets, popovers, tooltips, lightbox

### Modal  (https://ui.barua.tz/docs/overlays.html#modal)
A <dialog class="b-modal"> opened with showModal() . Any trigger with data-b-dialog="#id" opens it; anything inside carrying data-b-dialog-close closes it — no bespoke JS. Sizes: .b-modal--sm , the 28rem default, .b-modal--lg and .b-modal--xl . Add .b-modal--glass for a translucent material that blurs the content behind it.
Classes: b-btn b-btn--primary b-modal b-modal__body b-modal__close b-modal__footer b-modal__header b-modal__title

```html
<button class="b-btn b-btn--primary" data-b-dialog="#demo-modal">Open modal</button>
<dialog class="b-modal" id="demo-modal" aria-labelledby="demo-modal-title">
  <header class="b-modal__header">
    <h2 class="b-modal__title" id="demo-modal-title">Rename mailbox</h2>
    <button class="b-modal__close" data-b-dialog-close aria-label="Close">✕</button>
  </header>
  <div class="b-modal__body">
    <p>Choose a new name for this mailbox. Filters and rules that
    reference it will update automatically.</p>
  </div>
  <footer class="b-modal__footer">
    <button class="b-btn" data-b-dialog-close>Cancel</button>
    <button class="b-btn b-btn--primary" data-b-dialog-close>Rename</button>
  </footer>
</dialog>
```

### Dialog vs Modal  (https://ui.barua.tz/docs/overlays.html#dialog-vs-modal)
One element, two behaviours. <dialog> opened with showModal() is modal : it sits in the browser's top layer, renders a ::backdrop scrim, and blocks the page behind it. The same element opened with show() is a non-modal dialog — an inline panel the user can ignore, with no backdrop, no focus trap and no Esc handling. Barua styles both from the same .b-modal class.

### Alert Dialog  (https://ui.barua.tz/docs/overlays.html#alert-dialog)
A compact, centered confirmation in the iOS style: title, one-sentence description, then full-width stacked actions separated by hairlines. Mark the destructive choice with .is-destructive and the preferred one with .is-primary . Add .b-alert-dialog__actions--row for the two-button side-by-side arrangement, shown statically below with show() -style inline rendering.
Variants: Row actions
Classes: b-alert-dialog b-alert-dialog__actions b-alert-dialog__actions--row b-alert-dialog__desc b-alert-dialog__title b-btn b-btn--danger-tinted b-modal b-modal__body

```html
<button class="b-btn b-btn--danger-tinted" data-b-dialog="#demo-alert">Delete draft…</button>
<dialog class="b-modal b-alert-dialog" id="demo-alert" aria-labelledby="demo-alert-title" aria-describedby="demo-alert-desc">
  <div class="b-modal__body">
    <h2 class="b-alert-dialog__title" id="demo-alert-title">Delete draft?</h2>
    <p class="b-alert-dialog__desc" id="demo-alert-desc">This draft will be removed from all your devices. You can't undo this.</p>
  </div>
  <div class="b-alert-dialog__actions">
    <button class="is-destructive" data-b-dialog-close>Delete draft</button>
    <button class="is-primary" data-b-dialog-close>Keep editing</button>
  </div>
</dialog>
```

### Action Sheet  (https://ui.barua.tz/docs/overlays.html#action-sheet)
SwiftUI's confirmationDialog : a bottom-anchored glass stack of choices with a separate Cancel group. Destructive choices take .is-destructive . Built on native <dialog> like every Barua overlay.
Classes: b-action-sheet b-action-sheet__cancel b-action-sheet__group b-action-sheet__title b-btn

```html
<button class="b-btn" data-b-dialog="#demo-action-sheet">Delete conversation…</button>
<dialog class="b-action-sheet" id="demo-action-sheet" aria-label="Delete conversation">
  <div class="b-action-sheet__group">
    <p class="b-action-sheet__title">This conversation will be removed from all your devices.</p>
    <button class="is-destructive" data-b-dialog-close>Delete for everyone</button>
    <button data-b-dialog-close>Archive instead</button>
  </div>
  <div class="b-action-sheet__group b-action-sheet__cancel">
    <button data-b-dialog-close>Cancel</button>
  </div>
</dialog>
```

### Sheet  (https://ui.barua.tz/docs/overlays.html#sheet)
A full-height panel that springs in from the trailing edge — the macOS/iPadOS inspector pattern. It is still a <dialog> , so it gets the scrim, focus trap and Esc handling of a modal while reading as a side panel.
Classes: b-btn b-modal__close b-modal__title b-sheet b-sheet__body b-sheet__header

```html
<button class="b-btn" data-b-dialog="#demo-sheet">Open sheet</button>
<dialog class="b-sheet" id="demo-sheet" aria-labelledby="demo-sheet-title">
  <header class="b-sheet__header">
    <h2 class="b-modal__title" id="demo-sheet-title">Message details</h2>
    <button class="b-modal__close" data-b-dialog-close aria-label="Close">✕</button>
  </header>
  <div class="b-sheet__body">
    <p>From <strong>Amina Otieno</strong> · Today at 09:41</p>
    <p>Encrypted in transit · Signed · 2 attachments</p>
    <p>Sheets suit secondary detail and editing tasks that relate to
    the content behind them — the page stays visible under the
    scrim to preserve context.</p>
  </div>
</dialog>
```

### Bottom Sheet  (https://ui.barua.tz/docs/overlays.html#bottom-sheet)
Slides up from the bottom edge on a thick glass material, with a grabber affordance and safe-area padding. This is the preferred modal surface on mobile — thumb-reachable, dismissible, and familiar from every iOS share sheet.
Classes: b-bottom-sheet b-bottom-sheet__body b-bottom-sheet__grabber b-btn b-btn--block b-btn--primary b-modal__title

```html
<button class="b-btn" data-b-dialog="#demo-bottom-sheet">Open bottom sheet</button>
<dialog class="b-bottom-sheet" id="demo-bottom-sheet" aria-labelledby="demo-bottom-sheet-title">
  <div class="b-bottom-sheet__grabber" aria-hidden="true"></div>
  <div class="b-bottom-sheet__body">
    <h2 class="b-modal__title" id="demo-bottom-sheet-title">Move to…</h2>
    <p>Pick a destination mailbox. On phone-width layouts, prefer a
    bottom sheet over a centered modal for any picker or short
    form.</p>
    <button class="b-btn b-btn--primary b-btn--block" data-b-dialog-close>Done</button>
  </div>
</dialog>
```

### Sheet Detents  (https://ui.barua.tz/docs/overlays.html#sheet-detents)
SwiftUI's presentationDetents for the bottom sheet: .b-bottom-sheet--medium caps the sheet at half the viewport, --large at 92%. The default remains content-sized up to 85%.
Classes: b-bottom-sheet b-bottom-sheet--medium b-bottom-sheet__body b-bottom-sheet__grabber b-btn b-btn--block b-btn--primary b-headline b-subheadline b-text-secondary

```html
<button class="b-btn" data-b-dialog="#demo-detent">Open medium sheet</button>
<dialog class="b-bottom-sheet b-bottom-sheet--medium" id="demo-detent" aria-label="Filters">
  <div class="b-bottom-sheet__grabber" aria-hidden="true"></div>
  <div class="b-bottom-sheet__body">
    <h3 class="b-headline">Filters</h3>
    <p class="b-subheadline b-text-secondary">A medium-detent sheet holds to half the screen.</p>
    <button class="b-btn b-btn--primary b-btn--block" data-b-dialog-close>Done</button>
  </div>
</dialog>
```

### Popover  (https://ui.barua.tz/docs/overlays.html#popover)
A light glass card for transient detail, built on the native Popover API: popovers open centered in the viewport by default — add .b-popover--anchored (or .b-menu--anchored ) only when you position one against its trigger yourself. Point popovertarget at the popover's id and the browser handles toggling, light-dismiss and Esc — zero JS. Where you need guaranteed positioning without anchor support, wrap trigger and card in .b-popover-anchor to pin the card under its anchor (shown statically below).
Variants: Anchored fallback, Arrowed popover, Popover card
Classes: b-avatar b-avatar--xs b-btn b-btn--ghost b-btn--primary b-btn--sm b-btn--tinted b-field b-gap-3 b-input b-input--sm b-label b-popover b-popover--arrow-bottom b-popover--card b-popover-anchor b-popover__body b-popover__footer b-popover__header b-popover__title b-stack b-switch

```html
<button class="b-btn" popovertarget="p1">Storage details</button>
<div class="b-popover" popover id="p1">
  <div class="b-popover__title">Storage</div>
  8.2 GB of 15 GB used. Attachments account for most of it — sweep
  anything older than a year.
</div>
```

### Tooltip  (https://ui.barua.tz/docs/overlays.html#tooltip)
CSS-only. Add .b-tooltip-host and a data-tooltip label to any button or link; the tip fades in above after a 350ms delay so it never flickers during casual mouse travel. Use .b-tooltip-host--bottom when the control sits near the top of the viewport.
Classes: b-btn b-icon-btn b-link b-tooltip-host b-tooltip-host--bottom

```html
<button class="b-btn b-icon-btn b-tooltip-host" data-tooltip="Archive conversation" aria-label="Archive conversation">
  <svg viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a1.5 1.5 0 0 0 1.5-1.5V8M8.5 11h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
<button class="b-btn b-tooltip-host" data-tooltip="Sends in ~3 seconds">Send later</button>
<a class="b-link b-tooltip-host b-tooltip-host--bottom" data-tooltip="Opens keyboard reference" href="#tooltip">Shortcuts</a>
```

### Hover Card  (https://ui.barua.tz/docs/overlays.html#hover-card)
A richer preview that appears when hovering or focusing a reference to a person or object — GitHub-style. Wrap the link in .b-hover-card-host ; the card fades in below after a 250ms delay and stays while hovered.
Classes: b-avatar b-avatar--lg b-badge b-hover-card b-hover-card-host b-link

```html
<div>
  Assigned to
  <span class="b-hover-card-host">
    <a class="b-link" href="#hover-card">@amina</a>
    <div class="b-hover-card">
      <div style="display: flex; gap: 0.75rem; align-items: center;">
        <div class="b-avatar b-avatar--lg">AO</div>
        <div>
          <strong>Amina Otieno</strong><br>
          <span class="b-badge">Platform team</span>
        </div>
      </div>
      <p style="margin: 0.75rem 0 0;">Nairobi · joined 2021<br>412 threads · 38 shared labels</p>
    </div>
  </span>
  for review.
</div>
```

### Dropdown  (https://ui.barua.tz/docs/overlays.html#dropdown)
Dropdowns belong to the menu family documented in Navigation : a zero-JS <details class="b-dropdown"> disclosure holding a .b-menu . One compact demo here for completeness.
Classes: b-btn b-dropdown b-menu b-menu__item

```html
<details class="b-dropdown">
  <summary class="b-btn">Sort by
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="m5 8 5 5 5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </summary>
  <ul class="b-menu">
    <li><button class="b-menu__item is-active">Newest first</button></li>
    <li><button class="b-menu__item">Oldest first</button></li>
    <li><button class="b-menu__item">Sender A–Z</button></li>
  </ul>
</details>
```

### Context Menu  (https://ui.barua.tz/docs/overlays.html#context-menu)
Right-click menus reuse .b-menu unchanged — see Navigation for menu items, shortcuts, separators and danger rows. Position it at the pointer with your own contextmenu handler; the surface is shown statically here.
Classes: b-menu b-menu__item b-menu__item--danger b-menu__separator b-menu__shortcut

```html
<ul class="b-menu">
  <li><button class="b-menu__item">Reply<span class="b-menu__shortcut">R</span></button></li>
  <li><button class="b-menu__item">Forward<span class="b-menu__shortcut">F</span></button></li>
  <li><button class="b-menu__item">Mark as unread<span class="b-menu__shortcut">⇧U</span></button></li>
  <li><hr class="b-menu__separator"></li>
  <li><button class="b-menu__item b-menu__item--danger">Delete<span class="b-menu__shortcut">⌫</span></button></li>
</ul>
```

### Lightbox  (https://ui.barua.tz/docs/overlays.html#lightbox)
A borderless <dialog> that centers media over a near-black blurred backdrop, with a floating close control pinned to the top corner. Drop an <img> straight in — a gradient placeholder stands in for one here.
Variants: File preview (Quick Look)
Classes: b-btn b-btn--ghost b-btn--glass b-btn--sm b-footnote b-headline b-lightbox b-lightbox__actions b-lightbox__caption b-lightbox__empty b-lightbox__frame b-modal__close

```html
<button class="b-btn" data-b-dialog="#demo-lightbox">View attachment</button>
<dialog class="b-lightbox" id="demo-lightbox" aria-label="Attachment preview">
  <button class="b-modal__close" data-b-dialog-close aria-label="Close">✕</button>
  <div style="width:640px;max-width:80vw;aspect-ratio:16/10;background:linear-gradient(135deg,var(--b-color-accent),var(--b-color-purple));border-radius:var(--b-radius-lg)"></div>
  <p class="b-lightbox__caption">sunset-over-zanzibar.jpg · 4.2 MB</p>
</dialog>
```

### Fullscreen Overlay  (https://ui.barua.tz/docs/overlays.html#fullscreen-overlay)
Takes over the entire viewport for immersive tasks — composing, onboarding, distraction-free reading. A top bar keeps the exit visible at all times; the body scrolls independently beneath it.
Classes: b-btn b-btn--tinted b-fullscreen b-fullscreen__bar b-fullscreen__body b-modal__close b-modal__title

```html
<button class="b-btn b-btn--tinted" data-b-dialog="#demo-fullscreen">Enter focus mode</button>
<dialog class="b-fullscreen" id="demo-fullscreen" aria-labelledby="demo-fullscreen-title">
  <div class="b-fullscreen__bar">
    <h2 class="b-modal__title" id="demo-fullscreen-title">Focus mode</h2>
    <button class="b-modal__close" data-b-dialog-close aria-label="Exit focus mode">✕</button>
  </div>
  <div class="b-fullscreen__body">
    <p>Everything else fades away. Esc or the close control returns
    you exactly where you left off, with focus restored to the
    trigger.</p>
  </div>
</dialog>
```


## Data visualization — CSS charts

### Chart Anatomy  (https://ui.barua.tz/docs/data-viz.html#chart-anatomy)
.b-chart is the frame: a titled column that stacks .b-chart__title , a .b-chart__canvas (position-relative, so gridlines and tooltips can float inside it), and a .b-legend . Axes sit beside or below the canvas. Everything below is this one recipe, swapping the middle.
Classes: b-axis b-axis--y b-chart b-chart__canvas b-chart__title b-columns b-columns__bar b-gridlines b-legend b-legend__swatch

```html
<figure class="b-chart" style="max-width: 30rem; width: 100%; margin: 0" role="img" aria-label="Column chart: messages delivered per day last week, peaking Thursday at 4,120.">
  <figcaption class="b-chart__title">Messages delivered — last 7 days</figcaption>
  <div style="display: grid; grid-template-columns: max-content 1fr; gap: var(--b-space-3)">
    <div class="b-axis b-axis--y" style="padding-block-end: 1.4rem" aria-hidden="true">
      <span>4k</span><span>2k</span><span>0</span>
    </div>
    <div class="b-chart__canvas">
      <div class="b-gridlines" style="inset-block-end: 1.4rem" aria-hidden="true"><i></i><i></i><i></i></div>
      <div class="b-columns">
        <div class="b-columns__bar" style="--v: 62%" data-label="Mon"></div>
        <div class="b-columns__bar" style="--v: 48%" data-label="Tue"></div>
        <div class="b-columns__bar" style="--v: 71%" data-label="Wed"></div>
        <div class="b-columns__bar" style="--v: 88%" data-label="Thu"></div>
        <div class="b-columns__bar" style="--v: 76%" data-label="Fri"></div>
        <div class="b-columns__bar" style="--v: 34%" data-label="Sat"></div>
        <div class="b-columns__bar" style="--v: 26%" data-label="Sun"></div>
      </div>
    </div>
  </div>
  <ul class="b-legend">
    <li><span class="b-legend__swatch"></span>Delivered</li>
  </ul>
</figure>
```

### Column Chart  (https://ui.barua.tz/docs/data-viz.html#column-chart)
.b-columns lays vertical bars on a flex baseline. Each .b-columns__bar takes its height from --v (a percentage of the chart height, --b-chart-h , default 10rem) and its x-label from data-label . Recolor any bar with --b-chart-color — here Thursday's peak.
Variants: Rounded, Stacked segments
Classes: b-chart b-columns b-columns--rounded b-columns__bar b-legend b-legend__swatch

```html
<div class="b-columns" style="max-width: 30rem; width: 100%">
  <div class="b-columns__bar" style="--v: 62%" data-label="Mon"></div>
  <div class="b-columns__bar" style="--v: 45%" data-label="Tue"></div>
  <div class="b-columns__bar" style="--v: 70%" data-label="Wed"></div>
  <div class="b-columns__bar" style="--v: 84%; --b-chart-color: var(--b-chart-4)" data-label="Thu"></div>
  <div class="b-columns__bar" style="--v: 58%" data-label="Fri"></div>
  <div class="b-columns__bar" style="--v: 32%" data-label="Sat"></div>
  <div class="b-columns__bar" style="--v: 24%" data-label="Sun"></div>
</div>
```

### Bar Chart  (https://ui.barua.tz/docs/data-viz.html#bar-chart)
Horizontal bars for ranked categories with long labels. Each .b-bars__row is a three-column grid: label, track, value. Fill width comes from --v ; widen the label column with --b-bars-label-w when city names need room.
Classes: b-bars b-bars__label b-bars__row b-bars__track b-bars__value

```html
<div class="b-bars" style="max-width: 30rem; width: 100%; --b-bars-label-w: 7.5rem">
  <div class="b-bars__row">
    <span class="b-bars__label">Dar es Salaam</span>
    <div class="b-bars__track"><i style="--v: 90%"></i></div>
    <span class="b-bars__value">$120k</span>
  </div>
  <div class="b-bars__row">
    <span class="b-bars__label">Nairobi</span>
    <div class="b-bars__track"><i style="--v: 75%"></i></div>
    <span class="b-bars__value">$100k</span>
  </div>
  <div class="b-bars__row">
    <span class="b-bars__label">Kampala</span>
    <div class="b-bars__track"><i style="--v: 54%"></i></div>
    <span class="b-bars__value">$72k</span>
  </div>
  <div class="b-bars__row">
    <span class="b-bars__label">Kigali</span>
    <div class="b-bars__track"><i style="--v: 42%"></i></div>
    <span class="b-bars__value">$56k</span>
  </div>
  <div class="b-bars__row">
    <span class="b-bars__label">Zanzibar</span>
    <div class="b-bars__track"><i style="--v: 27%"></i></div>
    <span class="b-bars__value">$36k</span>
  </div>
</div>
```

### Line Chart  (https://ui.barua.tz/docs/data-viz.html#line-chart)
Lines are plain inline SVG — you own the coordinates, the stylesheet owns the look. Give the polyline path class="b-series" inside an svg.b-line-svg ; add dashed .b-svg-grid lines and .b-svg-axis-label texts. The stroke stays 2px at any size thanks to vector-effect: non-scaling-stroke .
Classes: b-chart b-chart__title b-line-svg b-series b-svg-axis-label b-svg-grid

```html
<div class="b-chart" style="max-width: 30rem; width: 100%">
  <div class="b-chart__title">New subscribers — six months</div>
  <svg class="b-line-svg" viewBox="0 0 300 120" role="img" aria-label="Line chart: new subscribers rising from about 1,200 in March to 4,800 in August, with a dip in May.">
    <line class="b-svg-grid" x1="0" y1="10" x2="300" y2="10"/>
    <line class="b-svg-grid" x1="0" y1="50" x2="300" y2="50"/>
    <line class="b-svg-grid" x1="0" y1="90" x2="300" y2="90"/>
    <path class="b-series" d="M10 84 L66 66 L122 72 L178 40 L234 48 L290 14"/>
    <text class="b-svg-axis-label" x="10" y="112" text-anchor="middle">Mar</text>
    <text class="b-svg-axis-label" x="66" y="112" text-anchor="middle">Apr</text>
    <text class="b-svg-axis-label" x="122" y="112" text-anchor="middle">May</text>
    <text class="b-svg-axis-label" x="178" y="112" text-anchor="middle">Jun</text>
    <text class="b-svg-axis-label" x="234" y="112" text-anchor="middle">Jul</text>
    <text class="b-svg-axis-label" x="290" y="112" text-anchor="middle">Aug</text>
  </svg>
</div>
```

### Area Chart  (https://ui.barua.tz/docs/data-viz.html#area-chart)
An svg.b-area-svg with two paths: a closed .b-area-fill underneath (same points, dropped to the baseline) and the .b-series stroke on top. The fill is an 18% tint of the series color, so one --b-chart-color on the <svg> retints both.
Classes: b-area-fill b-area-svg b-chart b-chart__title b-series b-svg-axis-label b-svg-grid

```html
<div class="b-chart" style="max-width: 30rem; width: 100%">
  <div class="b-chart__title">Weekly active readers</div>
  <svg class="b-area-svg" viewBox="0 0 300 120" style="--b-chart-color: var(--b-chart-2)" role="img" aria-label="Area chart: weekly active readers growing from 3,100 in March to 7,400 in August.">
    <line class="b-svg-grid" x1="0" y1="10" x2="300" y2="10"/>
    <line class="b-svg-grid" x1="0" y1="50" x2="300" y2="50"/>
    <line class="b-svg-grid" x1="0" y1="90" x2="300" y2="90"/>
    <path class="b-area-fill" d="M10 78 L66 62 L122 68 L178 36 L234 44 L290 16 L290 90 L10 90 Z"/>
    <path class="b-series" d="M10 78 L66 62 L122 68 L178 36 L234 44 L290 16"/>
    <text class="b-svg-axis-label" x="10" y="112" text-anchor="middle">Mar</text>
    <text class="b-svg-axis-label" x="122" y="112" text-anchor="middle">May</text>
    <text class="b-svg-axis-label" x="234" y="112" text-anchor="middle">Jul</text>
  </svg>
</div>
```

### Pie Chart  (https://ui.barua.tz/docs/data-viz.html#pie-chart)
A single div and a conic-gradient . Pass color stops through --b-pie as color start end triplets covering 0–100%; size it with --b-pie-size (default 9rem). Always pair with a legend — the wedges carry no text of their own.
Classes: b-legend b-legend__swatch b-pie

```html
<div class="b-pie" style="--b-pie: var(--b-chart-1) 0 45%, var(--b-chart-2) 45% 78%, var(--b-chart-3) 78% 100%" role="img" aria-label="Pie chart: mobile 45%, desktop 33%, tablet 22%."></div>
<ul class="b-legend" style="flex-direction: column">
  <li><span class="b-legend__swatch"></span>Mobile · 45%</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-2)"></span>Desktop · 33%</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-3)"></span>Tablet · 22%</li>
</ul>
```

### Donut Chart  (https://ui.barua.tz/docs/data-viz.html#donut-chart)
Wrap a .b-pie in .b-donut : a radial mask punches the hole and .b-donut__center stacks on the same grid cell for a headline stat. The hole radius is --b-donut-hole , default 62% — raise it for a thinner ring.
Classes: b-donut b-donut__center b-legend b-legend__swatch b-pie b-stat__label b-stat__value

```html
<div class="b-donut">
  <div class="b-pie" style="--b-pie: var(--b-chart-1) 0 52%, var(--b-chart-4) 52% 81%, var(--b-chart-6) 81% 100%" role="img" aria-label="Donut chart of 18,200 sends: newsletter 52%, product updates 29%, digests 19%."></div>
  <div class="b-donut__center">
    <div class="b-stat__value">18.2k</div>
    <div class="b-stat__label">sends</div>
  </div>
</div>
<ul class="b-legend" style="flex-direction: column">
  <li><span class="b-legend__swatch"></span>Newsletter · 52%</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-4)"></span>Product updates · 29%</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-6)"></span>Digests · 19%</li>
</ul>
```

### Scatter Plot  (https://ui.barua.tz/docs/data-viz.html#scatter-plot)
An svg.b-scatter-svg full of circle.b-dot elements — you supply cx , cy and r . Dots default to --b-chart-1 ; put --b-chart-color on individual circles for a second series. Session length against pages read, mobile vs desktop:
Variants: Data points
Classes: b-chart b-chart__title b-dot b-legend b-legend__swatch b-scatter-svg b-svg-axis-label b-svg-grid

```html
<div class="b-chart" style="max-width: 30rem; width: 100%">
  <div class="b-chart__title">Session length vs pages read</div>
  <svg class="b-scatter-svg" viewBox="0 0 300 140" role="img" aria-label="Scatter plot: desktop sessions read more pages than mobile at every session length.">
    <line class="b-svg-grid" x1="0" y1="20" x2="300" y2="20"/>
    <line class="b-svg-grid" x1="0" y1="70" x2="300" y2="70"/>
    <line class="b-svg-grid" x1="0" y1="120" x2="300" y2="120"/>
    <circle class="b-dot" cx="30" cy="110" r="4"/>
    <circle class="b-dot" cx="55" cy="96" r="4"/>
    <circle class="b-dot" cx="80" cy="100" r="4"/>
    <circle class="b-dot" cx="110" cy="78" r="4"/>
    <circle class="b-dot" cx="140" cy="84" r="4"/>
    <circle class="b-dot" cx="170" cy="62" r="4"/>
    <circle class="b-dot" cx="60" cy="72" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <circle class="b-dot" cx="95" cy="56" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <circle class="b-dot" cx="130" cy="46" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <circle class="b-dot" cx="180" cy="34" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <circle class="b-dot" cx="220" cy="40" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <circle class="b-dot" cx="260" cy="22" r="4" style="--b-chart-color: var(--b-chart-4)"/>
    <text class="b-svg-axis-label" x="0" y="136">0 min</text>
 
```

### Radar Chart  (https://ui.barua.tz/docs/data-viz.html#radar-chart)
Concentric polygon.b-web rings and line.b-web spokes form the web; the filled polygon.b-series plots the values. Five axes on a 200×200 viewBox, center (100,100), outer radius 80.
Classes: b-radar-svg b-series b-svg-axis-label b-web

```html
<svg class="b-radar-svg" viewBox="0 0 200 200" role="img" aria-label="Radar chart of team coverage: design 90%, code 75%, data 60%, ops 80%, docs 70%.">
  <polygon class="b-web" points="100,20 176,75 147,165 53,165 24,75"/>
  <polygon class="b-web" points="100,60 138,88 124,132 76,132 62,88"/>
  <line class="b-web" x1="100" y1="100" x2="100" y2="20"/>
  <line class="b-web" x1="100" y1="100" x2="176" y2="75"/>
  <line class="b-web" x1="100" y1="100" x2="147" y2="165"/>
  <line class="b-web" x1="100" y1="100" x2="53" y2="165"/>
  <line class="b-web" x1="100" y1="100" x2="24" y2="75"/>
  <polygon class="b-series" points="100,28 157,81 128,139 62,152 47,83"/>
  <text class="b-svg-axis-label" x="100" y="12" text-anchor="middle">Design</text>
  <text class="b-svg-axis-label" x="182" y="72" text-anchor="start">Code</text>
  <text class="b-svg-axis-label" x="152" y="180" text-anchor="middle">Data</text>
  <text class="b-svg-axis-label" x="48" y="180" text-anchor="middle">Ops</text>
  <text class="b-svg-axis-label" x="18" y="72" text-anchor="end">Docs</text>
</svg>
```

### Heatmap  (https://ui.barua.tz/docs/data-viz.html#heatmap)
A CSS grid of <i> cells. Column count comes from --b-heatmap-cols ; each cell's --v is an intensity from 0 to 1, mixed into the series color with color-mix() — 0 renders the empty fill, 1 the full --b-chart-color . Twelve months of commits, one row per week of the month:
Classes: b-axis b-chart b-heatmap

```html
<div class="b-chart" style="max-width: 26rem; width: 100%">
  <div class="b-heatmap" style="--b-heatmap-cols: 12">
    <i style="--v: 0.1"></i><i style="--v: 0.2"></i><i style="--v: 0.1"></i><i style="--v: 0.3"></i><i style="--v: 0.4"></i><i style="--v: 0.5"></i><i style="--v: 0.7"></i><i style="--v: 0.8"></i><i style="--v: 0.6"></i><i style="--v: 0.4"></i><i style="--v: 0.2"></i><i style="--v: 0.1"></i>
    <i style="--v: 0.2"></i><i style="--v: 0.1"></i><i style="--v: 0.3"></i><i style="--v: 0.4"></i><i style="--v: 0.6"></i><i style="--v: 0.7"></i><i style="--v: 0.9"></i><i style="--v: 1"></i><i style="--v: 0.7"></i><i style="--v: 0.5"></i><i style="--v: 0.3"></i><i style="--v: 0.1"></i>
    <i style="--v: 0"></i><i style="--v: 0.2"></i><i style="--v: 0.2"></i><i style="--v: 0.5"></i><i style="--v: 0.5"></i><i style="--v: 0.8"></i><i style="--v: 0.8"></i><i style="--v: 0.9"></i><i style="--v: 0.6"></i><i style="--v: 0.4"></i><i style="--v: 0.2"></i><i style="--v: 0"></i>
    <i style="--v: 0.1"></i><i style="--v: 0.3"></i><i style="--v: 0.4"></i><i style="--v: 0.4"></i><i style="--v: 0.7"></i><i style="--v: 0.6"></i><i style="--v: 1"></i><i style="--v: 0.8"></i><i style="--v: 0.5"></i><i style="--v: 0.3"></i><i style="--v: 0.1"></i><i style="--v: 0.2"></i>
  </div>
  <div class="b-axis">
    <span>Jan</span><span>Jun</span><span>Dec</span>
  </div>
</div>
```

### Gauge  (https://ui.barua.tz/docs/data-viz.html#gauge)
A half-donut for a single 0–100 reading. Set --b-progress as a unitless number (here 68 — note the linear progress bar takes a percentage instead), size with --b-gauge-size , and recolor with --b-chart-color . The label hangs below the arc, so leave it some room.
Classes: b-gauge b-gauge__label b-gauge__value

```html
<div class="b-gauge" style="--b-progress: 68" role="img" aria-label="Gauge: storage 68% used.">
  <div class="b-gauge__value">68%</div>
  <div class="b-gauge__label">Storage used</div>
</div>
```

### Sparkline  (https://ui.barua.tz/docs/data-viz.html#sparkline)
A word-sized trend for stat cards and table cells: svg.b-sparkline stretches its single path across a 2rem-tall box ( preserveAspectRatio="none" lets it fill; the stroke never distorts). Purely decorative — keep it aria-hidden and let the stat carry the numbers.
Classes: b-card b-card__body b-sparkline b-stat b-stat__delta b-stat__label b-stat__value

```html
<div class="b-card" style="width: 100%; max-width: 14rem">
  <div class="b-card__body">
    <div class="b-stat">
      <span class="b-stat__label">Messages sent</span>
      <span class="b-stat__value">12,480</span>
      <span class="b-stat__delta is-up">↑ 8.2% this week</span>
      <svg class="b-sparkline" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true">
        <path d="M0 18 L12 15 L24 16 L36 11 L48 13 L60 8 L72 10 L84 5 L100 3"/>
      </svg>
    </div>
  </div>
</div>
<div class="b-card" style="width: 100%; max-width: 14rem">
  <div class="b-card__body">
    <div class="b-stat">
      <span class="b-stat__label">Open rate</span>
      <span class="b-stat__value">38.4%</span>
      <span class="b-stat__delta is-down">↓ 2.1 pts this week</span>
      <svg class="b-sparkline" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true" style="--b-chart-color: var(--b-chart-4)">
        <path d="M0 5 L12 8 L24 6 L36 11 L48 9 L60 14 L72 12 L84 17 L100 19"/>
      </svg>
    </div>
  </div>
</div>
```

### Progress Chart  (https://ui.barua.tz/docs/data-viz.html#progress-chart)
Stacked .b-progress-chart__row s, each a __head (label left, value right) over a standard .b-progress bar from Feedback . Here --b-progress is a width percentage on the fill — 96% , unit included.
Classes: b-progress b-progress-chart b-progress-chart__head b-progress-chart__row b-progress__fill

```html
<div class="b-progress-chart" style="max-width: 24rem; width: 100%">
  <div class="b-progress-chart__row">
    <div class="b-progress-chart__head"><span>Newsletter</span><span>96%</span></div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 96%"></div></div>
  </div>
  <div class="b-progress-chart__row">
    <div class="b-progress-chart__head"><span>Product updates</span><span>88%</span></div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 88%"></div></div>
  </div>
  <div class="b-progress-chart__row">
    <div class="b-progress-chart__head"><span>Onboarding series</span><span>72%</span></div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 72%"></div></div>
  </div>
  <div class="b-progress-chart__row">
    <div class="b-progress-chart__head"><span>Win-back</span><span>41%</span></div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 41%"></div></div>
  </div>
</div>
```

### Legend  (https://ui.barua.tz/docs/data-viz.html#legend)
A wrapping ul.b-legend of swatch + label pairs. The .b-legend__swatch defaults to --b-chart-1 ; set the others inline. The six series tokens resolve to accent blue, teal, purple, orange, pink and green — and re-tune automatically in dark mode.
Classes: b-legend b-legend__swatch

```html
<ul class="b-legend">
  <li><span class="b-legend__swatch"></span>Email</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-2)"></span>Push</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-3)"></span>In-app</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-4)"></span>SMS</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-5)"></span>Social</li>
  <li><span class="b-legend__swatch" style="background: var(--b-chart-6)"></span>Webhooks</li>
</ul>
```

### Axis & Gridlines  (https://ui.barua.tz/docs/data-viz.html#axis-gridlines)
.b-axis spreads tick labels across a row in tabular figures; .b-axis--y stacks them beside a canvas. .b-gridlines floats dashed rules through a position-relative canvas — one <i> per line. Columns reserve a 1.4rem label strip at the bottom, so give the gridlines inset-block-end: 1.4rem and the y-axis the same bottom padding to keep “0” on the baseline.
Classes: b-axis b-axis--y b-chart b-chart__canvas b-columns b-columns__bar b-gridlines

```html
<div class="b-chart" style="max-width: 30rem; width: 100%">
  <div style="display: grid; grid-template-columns: max-content 1fr; gap: var(--b-space-3)">
    <div class="b-axis b-axis--y" style="padding-block-end: 1.4rem" aria-hidden="true">
      <span>600</span><span>300</span><span>0</span>
    </div>
    <div class="b-chart__canvas">
      <div class="b-gridlines" style="inset-block-end: 1.4rem" aria-hidden="true"><i></i><i></i><i></i></div>
      <div class="b-columns">
        <div class="b-columns__bar" style="--v: 55%" data-label="Mon"></div>
        <div class="b-columns__bar" style="--v: 40%" data-label="Tue"></div>
        <div class="b-columns__bar" style="--v: 70%" data-label="Wed"></div>
        <div class="b-columns__bar" style="--v: 85%" data-label="Thu"></div>
        <div class="b-columns__bar" style="--v: 65%" data-label="Fri"></div>
        <div class="b-columns__bar" style="--v: 30%" data-label="Sat"></div>
        <div class="b-columns__bar" style="--v: 20%" data-label="Sun"></div>
      </div>
    </div>
  </div>
</div>
```

### Chart Tooltip  (https://ui.barua.tz/docs/data-viz.html#chart-tooltip)
.b-chart-tip is a floating value bubble for the nearest data point: absolutely positioned inside the relative .b-chart__canvas , self-centered above its anchor via translate , with a small caret. Barua ships the look only — tracking the pointer, picking the point and setting left / top is app-side JavaScript. Shown pinned over Thursday:
Classes: b-chart b-chart-tip b-chart__canvas b-columns b-columns__bar

```html
<div class="b-chart" style="max-width: 30rem; width: 100%">
  <div class="b-chart__canvas">
    <div class="b-chart-tip" style="left: 50%; top: 14%">Thu · 4,120</div>
    <div class="b-columns">
      <div class="b-columns__bar" style="--v: 62%" data-label="Mon"></div>
      <div class="b-columns__bar" style="--v: 45%" data-label="Tue"></div>
      <div class="b-columns__bar" style="--v: 70%" data-label="Wed"></div>
      <div class="b-columns__bar" style="--v: 84%" data-label="Thu"></div>
      <div class="b-columns__bar" style="--v: 58%" data-label="Fri"></div>
      <div class="b-columns__bar" style="--v: 32%" data-label="Sat"></div>
      <div class="b-columns__bar" style="--v: 24%" data-label="Sun"></div>
    </div>
  </div>
</div>
```

### Rule Mark  (https://ui.barua.tz/docs/data-viz.html#rule-mark)
Swift Charts' RuleMark : a dashed goal or threshold line laid over any chart canvas. Position with bottom as a percentage of the scale; --accent recolors it for targets rather than limits.
Classes: b-columns b-columns__bar b-rule b-rule__label

```html
<div class="b-columns" style="--b-chart-h: 9rem; max-width: 26rem; position: relative">
  <div class="b-rule" style="bottom: calc(1.4rem + (9rem - 1.4rem) * 0.7)"><span class="b-rule__label">SLA 70%</span></div>
  <div class="b-columns__bar" style="--v: 48%" data-label="Mon"></div>
  <div class="b-columns__bar" style="--v: 64%" data-label="Tue"></div>
  <div class="b-columns__bar" style="--v: 82%" data-label="Wed"></div>
  <div class="b-columns__bar" style="--v: 58%" data-label="Thu"></div>
  <div class="b-columns__bar" style="--v: 74%" data-label="Fri"></div>
</div>
```

### Linear Gauge  (https://ui.barua.tz/docs/data-viz.html#linear-gauge)
SwiftUI's linear Gauge style: a graded track with a marker at the current value ( --v ) and min/max labels beneath. Use __track--plain for a neutral track.
Classes: b-gauge-linear b-gauge-linear__labels b-gauge-linear__marker b-gauge-linear__track b-gauge-linear__track--plain

```html
<div class="b-gauge-linear">
  <div class="b-gauge-linear__track"><span class="b-gauge-linear__marker" style="--v: 68%"></span></div>
  <div class="b-gauge-linear__labels"><span>0 GB</span><span>15 GB</span></div>
</div>
<div class="b-gauge-linear">
  <div class="b-gauge-linear__track b-gauge-linear__track--plain"><span class="b-gauge-linear__marker" style="--v: 35%"></span></div>
  <div class="b-gauge-linear__labels"><span>Min</span><span>Max</span></div>
</div>
```


## Media — galleries, players, thumbnails

### Image Viewer  (https://ui.barua.tz/docs/media.html#image-viewer)
A dark stage that centers one image, with a .b-image-viewer__bar pinned to the bottom edge for the caption and actions. The stage stays near-black in both themes so photos read the same everywhere. Demos on this page use gradient placeholders in place of real files.
Classes: b-btn b-btn--glass b-btn--sm b-icon-btn b-image-viewer b-image-viewer__bar

```html
<div class="b-image-viewer">
  <div style="width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-purple))"></div>
  <div class="b-image-viewer__bar">
    <span>Msasani Bay at dusk — 4,032 × 2,268</span>
    <span style="display: flex; gap: var(--b-space-1)">
      <button class="b-btn b-icon-btn b-btn--glass b-btn--sm" aria-label="Zoom in">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13.2 13.2 3.3 3.3M9 6.8v4.4M6.8 9h4.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
      </button>
      <button class="b-btn b-icon-btn b-btn--glass b-btn--sm" aria-label="Download image">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3.5v9m0 0L6.5 9m3.5 3.5L13.5 9M4.5 16h11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </span>
  </div>
</div>
```

### Image Gallery  (https://ui.barua.tz/docs/media.html#image-gallery)
An auto-filling square grid. Wrap each tile in a <button> (or <a> ) — the grid strips the chrome, rounds the corners and adds a zoom-in cursor, and real images get a gentle hover scale.
Classes: b-gallery

```html
<div class="b-gallery">
  <button aria-label="View photo: Harbor at dawn">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-purple))"></div>
  </button>
  <button aria-label="View photo: Reef shallows">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-teal), var(--b-color-cyan))"></div>
  </button>
  <button aria-label="View photo: Market stalls">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-pink), var(--b-color-orange))"></div>
  </button>
  <button aria-label="View photo: Forest canopy">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-green), var(--b-color-mint))"></div>
  </button>
  <button aria-label="View photo: City lights">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-indigo))"></div>
  </button>
  <button aria-label="View photo: Tide pools">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-mint), var(--b-color-teal))"></div>
  </button>
  <button aria-label="View photo: Dune sunset">
    <div style="aspect-ratio: 1; background: linear-gradient(135deg, var(--b-color-orange), var(--b-color-pink))"></div>
  </button>
  <button aria-label="View photo: Night sky">
    <div style="aspect-ratio: 1; background: linear-grad
```

### Carousel  (https://ui.barua.tz/docs/media.html#carousel)
A scroll-snap track — it works with plain CSS, and adding data-b-carousel lets barua.js wire the prev/next buttons to smooth scrolling and keep the dots in sync. Slides default to 70% of the track width; override with --b-slide-w .
Classes: b-btn b-btn--glass b-carousel b-carousel__dots b-carousel__nav b-carousel__nav--next b-carousel__nav--prev b-carousel__slide b-carousel__track b-icon-btn

```html
<div class="b-carousel" data-b-carousel>
  <div class="b-carousel__track">
    <div class="b-carousel__slide">
      <div style="aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-indigo))"></div>
    </div>
    <div class="b-carousel__slide">
      <div style="aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--b-color-teal), var(--b-color-cyan))"></div>
    </div>
    <div class="b-carousel__slide">
      <div style="aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--b-color-pink), var(--b-color-orange))"></div>
    </div>
    <div class="b-carousel__slide">
      <div style="aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--b-color-green), var(--b-color-mint))"></div>
    </div>
  </div>
  <button class="b-btn b-icon-btn b-btn--glass b-carousel__nav b-carousel__nav--prev" aria-label="Previous slide">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m12 5-5 5 5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--glass b-carousel__nav b-carousel__nav--next" aria-label="Next slide">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m8 5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <div c
```

### Billboard  (https://ui.barua.tz/docs/media.html#billboard)
The featured title on a media storefront: art behind, words in front. The scrim fades the picture into the page colour from below and from the start edge, so the text never fights it and the shelf underneath feels attached. Put .b-container on the body for the gutters. The block is tall on a phone — min(62svh, 34rem) — and capped on a desktop so the shelves stay above the fold; --b-billboard-h sets the height and --b-billboard-focus moves the picture's subject into view.
Classes: b-billboard b-billboard__actions b-billboard__art b-billboard__body b-billboard__lede b-billboard__scrim b-billboard__title b-body b-btn b-btn--glass b-btn--lg b-btn--pill b-btn--primary b-container b-line-clamp-3 b-overline

### Poster  (https://ui.barua.tz/docs/media.html#poster)
A title as a 2:3 picture with its name under it — the unit of a catalogue. The whole block is one link. The frame holds its shape before the picture arrives, so a slow connection never makes the shelf jump, and a title with no picture shows its initial on a plate tinted from the accent. A .b-badge in .b-poster__badge sits on the picture for a price or a state. .b-poster--wide is the 16:9 form for an episode; .is-selected marks the one playing.
Classes: b-badge b-badge--accent b-badge--success b-btn b-btn--glass b-carousel b-carousel--posters b-carousel__nav b-carousel__nav--next b-carousel__nav--prev b-carousel__slide b-carousel__track b-icon-btn b-poster b-poster-grid b-poster__badge b-poster__facts b-poster__frame b-poster__initial b-poster__meta b-poster__title

```html
<div class="b-poster-grid">
  <a class="b-poster" href="#">
    <div class="b-poster__frame">
      <img src="img/posters/night-coast.jpg" alt="" loading="lazy">
      <span class="b-badge b-badge--accent b-poster__badge">TSh 2,000</span>
    </div>
    <div class="b-poster__meta">
      <p class="b-poster__title">Night Coast</p>
      <p class="b-poster__facts"><span>2026</span><span>Drama</span></p>
    </div>
  </a>
  <a class="b-poster" href="#">
    <div class="b-poster__frame">
      <img src="img/posters/dune-light.jpg" alt="" loading="lazy">
      <span class="b-badge b-badge--success b-poster__badge">Free</span>
    </div>
    <div class="b-poster__meta">
      <p class="b-poster__title">Dune Light</p>
      <p class="b-poster__facts"><span>2025</span><span>Adventure</span></p>
    </div>
  </a>
  <a class="b-poster" href="#">
    <div class="b-poster__frame">
      <img src="img/posters/forest-fog.jpg" alt="" loading="lazy">
    </div>
    <div class="b-poster__meta">
      <p class="b-poster__title">Forest Fog</p>
      <p class="b-poster__facts"><span>2024</span><span>Thriller</span></p>
    </div>
  </a>
  <a class="b-poster" href="#">
    <div class="b-poster__frame">
      <span class="b-poster__initial" aria-hidden="true">K</span>
      <span class="b-badge b-poster__badge">Coming soon</span>
    </div>
    <div class="b-poster__meta">
      <p class="b-poster__
```

### Video Player  (https://ui.barua.tz/docs/media.html#video-player)
A 16:9 frame around a <video> element. The .b-video__overlay with its glass .b-video__play button fades in on hover, or stays visible while the frame carries .is-paused . The bottom bar is the shared Media Controls strip.
Classes: b-btn b-icon-btn b-media-controls b-media-controls__time b-slider b-video b-video__overlay b-video__play

```html
<div class="b-video is-paused">
  <div style="position: absolute; inset: 0; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-indigo))"></div>
  <div class="b-video__overlay">
    <button class="b-video__play" aria-label="Play video">
      <svg viewBox="0 0 20 20" fill="currentColor" width="24" height="24" aria-hidden="true"><path d="M7 4.9v10.2a.6.6 0 0 0 .92.5l8-5.1a.6.6 0 0 0 0-1l-8-5.1a.6.6 0 0 0-.92.5Z"/></svg>
    </button>
  </div>
  <div class="b-media-controls">
    <button class="b-btn b-icon-btn" aria-label="Play">
      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7 4.9v10.2a.6.6 0 0 0 .92.5l8-5.1a.6.6 0 0 0 0-1l-8-5.1a.6.6 0 0 0-.92.5Z"/></svg>
    </button>
    <input class="b-slider" type="range" min="0" max="100" value="37" style="--b-slider-fill: 37%" aria-label="Seek">
    <span class="b-media-controls__time">1:24 / 3:47</span>
    <button class="b-btn b-icon-btn" aria-label="Mute">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M9.5 4.8 6.6 7.3H4.7a.7.7 0 0 0-.7.7v4a.7.7 0 0 0 .7.7h1.9l2.9 2.5a.6.6 0 0 0 1-.45V5.25a.6.6 0 0 0-1-.45Z" fill="currentColor"/><path d="M12.5 7.5a3.4 3.4 0 0 1 0 5M14.4 5.6a6.2 6.2 0 0 1 0 8.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
    <button class="b-btn b-icon-btn" aria-label="Enter full screen">
      <svg 
```

### Audio Player  (https://ui.barua.tz/docs/media.html#audio-player)
A compact row: .b-audio__art , a flexible .b-audio__meta block with title, artist and a .b-progress track, and transport buttons in .b-audio__controls .
Variants: Glass + waveform
Classes: b-audio b-audio--glass b-audio__art b-audio__artist b-audio__controls b-audio__meta b-audio__title b-btn b-btn--ghost b-btn--primary b-icon-btn b-progress b-progress__fill b-waveform

```html
<div class="b-audio">
  <div class="b-audio__art" style="background: linear-gradient(135deg, var(--b-color-pink), var(--b-color-orange))"></div>
  <div class="b-audio__meta">
    <div class="b-audio__title">Golden Hour</div>
    <div class="b-audio__artist">The Marine Layer</div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 42%"></div></div>
  </div>
  <div class="b-audio__controls">
    <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Previous track">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5.5 4.5v11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M15 5.6v8.8a.6.6 0 0 1-.93.5L7.6 10.5a.6.6 0 0 1 0-1l6.47-4.4a.6.6 0 0 1 .93.5Z" fill="currentColor"/></svg>
    </button>
    <button class="b-btn b-icon-btn b-btn--primary" aria-label="Play">
      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7 4.9v10.2a.6.6 0 0 0 .92.5l8-5.1a.6.6 0 0 0 0-1l-8-5.1a.6.6 0 0 0-.92.5Z"/></svg>
    </button>
    <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Next track">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M14.5 4.5v11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M5 5.6v8.8a.6.6 0 0 0 .93.5l6.47-4.4a.6.6 0 0 0 0-1L5.93 5.1a.6.6 0 0 0-.93.5Z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
```

### Media Controls  (https://ui.barua.tz/docs/media.html#media-controls)
The shared bottom bar used by the video player and any custom media frame. It pins to the bottom of the nearest position: relative ancestor over a soft black gradient, forces dark color-scheme, and makes any inner .b-icon-btn white and transparent. The .b-slider (a native range input from Forms ) flexes to fill the row, and .b-media-controls__time keeps timestamps in tabular numerals so they never wiggle.
Classes: b-btn b-icon-btn b-media-controls b-media-controls__time b-slider

```html
<div class="b-media-controls">
  <button class="b-btn b-icon-btn" aria-label="Pause">
    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><rect x="5.5" y="4.5" width="3" height="11" rx="1"/><rect x="11.5" y="4.5" width="3" height="11" rx="1"/></svg>
  </button>
  <input class="b-slider" type="range" min="0" max="100" value="64" style="--b-slider-fill: 64%" aria-label="Seek">
  <span class="b-media-controls__time">2:26 / 3:47</span>
  <button class="b-btn b-icon-btn" aria-label="Mute">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M9.5 4.8 6.6 7.3H4.7a.7.7 0 0 0-.7.7v4a.7.7 0 0 0 .7.7h1.9l2.9 2.5a.6.6 0 0 0 1-.45V5.25a.6.6 0 0 0-1-.45Z" fill="currentColor"/><path d="M12.5 7.5a3.4 3.4 0 0 1 0 5M14.4 5.6a6.2 6.2 0 0 1 0 8.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</div>
```

### Thumbnail  (https://ui.barua.tz/docs/media.html#thumbnail)
A square media chip, sized with --b-thumb-size (default 4.5rem). .b-thumb--video overlays a play glyph, and .b-thumb__duration stamps a runtime in the corner.
Classes: b-thumb b-thumb--video b-thumb__duration

```html
<div class="b-thumb" style="--b-thumb-size: 3rem">
  <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-green), var(--b-color-mint))"></div>
</div>
<div class="b-thumb">
  <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-teal), var(--b-color-cyan))"></div>
</div>
<div class="b-thumb" style="--b-thumb-size: 6rem">
  <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-purple))"></div>
</div>
<div class="b-thumb b-thumb--video" style="--b-thumb-size: 6rem">
  <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-pink), var(--b-color-orange))"></div>
  <span class="b-thumb__duration">2:14</span>
</div>
```

### Media Placeholder  (https://ui.barua.tz/docs/media.html#media-placeholder)
The empty state for a media slot — a dashed 16:9 frame with a hatched fill and a quiet glyph. Use it wherever an image or video hasn't been chosen, uploaded or loaded yet; it holds the exact space the media will occupy.
Classes: b-media-placeholder

```html
<div class="b-media-placeholder">
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8.5" cy="10" r="1.5" fill="currentColor"/><path d="m5.5 16.5 4-4 3 3 3-3 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
```

### Upload Preview  (https://ui.barua.tz/docs/media.html#upload-preview)
A grid of square tiles for files being attached. While a file uploads, float a .b-progress near the bottom edge; once done, show the .b-upload-preview__remove button. Pairs with the File Upload dropzone in Forms .
Classes: b-progress b-progress__fill b-upload-preview b-upload-preview__remove b-upload-previews

```html
<div class="b-upload-previews">
  <div class="b-upload-preview">
    <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-purple))"></div>
  </div>
  <div class="b-upload-preview">
    <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-teal), var(--b-color-cyan))"></div>
    <button class="b-upload-preview__remove" aria-label="Remove harbor-02.jpg">✕</button>
  </div>
  <div class="b-upload-preview">
    <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-green), var(--b-color-mint))"></div>
    <div class="b-progress"><div class="b-progress__fill" style="--b-progress: 60%"></div></div>
  </div>
  <div class="b-upload-preview">
    <div style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-color-pink), var(--b-color-orange))"></div>
  </div>
</div>
```

### Async Image  (https://ui.barua.tz/docs/media.html#async-image)
SwiftUI's AsyncImage loading choreography: wrap the image in .b-async-img and add data-b-async — it shimmers while loading, then the picture fades in. Errors stop the shimmer and leave the quiet fill.
Variants: Blur-up
Classes: b-async-img b-footnote b-gap-4 b-hstack b-stack--wrap b-text-secondary

```html
<span class="b-async-img" style="width: 14rem; aspect-ratio: 16/10">
  <img data-b-async alt="Sample" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230a7aff'/%3E%3Cstop offset='1' stop-color='%23af52de'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='320' height='200' fill='url(%23g)'/%3E%3C/svg%3E">
</span>
<span class="b-async-img" style="width: 14rem; aspect-ratio: 16/10" aria-label="Still loading"></span>
```


## Specialized — calendars, pickers, file browser

### Command Palette  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-cmdk b-cmdk__footer b-cmdk__group-label b-cmdk__input b-cmdk__item b-cmdk__list

```html
<div class="b-cmdk">
  <input class="b-cmdk__input" type="search" placeholder="Type a command or search…">
  <ul class="b-cmdk__list">
    <li class="b-cmdk__group-label">Actions</li>
    <li><button class="b-cmdk__item is-active">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      New invoice<kbd>⌘N</kbd>
    </button></li>
    <li><button class="b-cmdk__item">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Assign to Amina Hassan<kbd>⌘⇧A</kbd>
    </button></li>
    <li class="b-cmdk__group-label">Go to</li>
    <li><button class="b-cmdk__item">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>
      Dar es Salaam branch
    </button></li>
  </ul>
  <div class="b-cmdk__footer"><span><kbd>↑↓</kbd> navigate</span><span><kbd>↵</kbd> select</span><span><kbd>esc</kbd> close</span></div>
</div>
```

### Calendar  (https://ui.barua.tz/docs/specialized.html#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 .
Classes: b-btn b-btn--ghost b-btn--sm b-calendar b-calendar__day b-calendar__grid b-calendar__header b-calendar__month b-calendar__weekday b-icon-btn

```html
<div class="b-calendar">
  <div class="b-calendar__header">
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Previous month">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m12 5-5 5 5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <span class="b-calendar__month">October 2026</span>
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Next month">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m8 5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
  </div>
  <div class="b-calendar__grid">
    <div class="b-calendar__weekday">Mo</div>
    <div class="b-calendar__weekday">Tu</div>
    <div class="b-calendar__weekday">We</div>
    <div class="b-calendar__weekday">Th</div>
    <div class="b-calendar__weekday">Fr</div>
    <div class="b-calendar__weekday">Sa</div>
    <div class="b-calendar__weekday">Su</div>
    <button class="b-calendar__day is-muted">28</button>
    <button class="b-calendar__day is-muted">29</button>
    <button class="b-calendar__day is-muted">30</button>
    <button class="b-calendar__day">1</button>
    <button class="b-calendar__day">2</button>
    <button class="b-calendar__day">3</button>
    <button class="b-calendar__day">4</butt
```

### Date Range  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-btn b-btn--ghost b-btn--sm b-calendar b-calendar__day b-calendar__grid b-calendar__header b-calendar__month b-calendar__weekday b-icon-btn

```html
<div class="b-calendar">
  <div class="b-calendar__header">
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Previous month">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m12 5-5 5 5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <span class="b-calendar__month">October 2026</span>
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Next month">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m8 5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
  </div>
  <div class="b-calendar__grid">
    <div class="b-calendar__weekday">Mo</div>
    <div class="b-calendar__weekday">Tu</div>
    <div class="b-calendar__weekday">We</div>
    <div class="b-calendar__weekday">Th</div>
    <div class="b-calendar__weekday">Fr</div>
    <div class="b-calendar__weekday">Sa</div>
    <div class="b-calendar__weekday">Su</div>
    <button class="b-calendar__day is-muted">28</button>
    <button class="b-calendar__day is-muted">29</button>
    <button class="b-calendar__day is-muted">30</button>
    <button class="b-calendar__day">1</button>
    <button class="b-calendar__day">2</button>
    <button class="b-calendar__day">3</button>
    <button class="b-calendar__day">4</butt
```

### Date Picker  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-datepicker b-input b-input-affix b-input-affix--start b-input-group

```html
<div class="b-datepicker">
  <div class="b-input-group">
    <span class="b-input-affix b-input-affix--start">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="3" y="4.5" width="14" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 8.5h14M7 3v3m6-3v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </span>
    <input class="b-input" type="text" value="26 Aug 2026" aria-label="Invoice date" style="max-width: 14rem;">
  </div>
</div>
```

### Color Picker  (https://ui.barua.tz/docs/specialized.html#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 .
Classes: b-swatch b-swatches

```html
<div class="b-swatches">
  <button class="b-swatch" style="background: var(--b-color-red)" aria-label="Red"></button>
  <button class="b-swatch" style="background: var(--b-color-orange)" aria-label="Orange"></button>
  <button class="b-swatch" style="background: var(--b-color-yellow)" aria-label="Yellow"></button>
  <button class="b-swatch" style="background: var(--b-color-green)" aria-label="Green"></button>
  <button class="b-swatch" style="background: var(--b-color-teal)" aria-label="Teal"></button>
  <button class="b-swatch is-selected" style="background: var(--b-color-blue)" aria-label="Blue" aria-pressed="true"></button>
  <button class="b-swatch" style="background: var(--b-color-purple)" aria-label="Purple"></button>
  <button class="b-swatch" style="background: var(--b-color-pink)" aria-label="Pink"></button>
</div>
```

### Emoji Picker  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-emoji-picker b-emoji-picker__grid b-input b-input--sm

```html
<div class="b-emoji-picker">
  <input class="b-input b-input--sm" type="search" placeholder="Search emoji" aria-label="Search emoji">
  <!-- barua-lint disable emoji-icon: in an emoji picker the emoji are the content, not icons -->
  <div class="b-emoji-picker__grid">
    <button aria-label="Grinning face">😀</button>
    <button aria-label="Tears of joy">😂</button>
    <button aria-label="Smiling with hearts">🥰</button>
    <button aria-label="Sunglasses">😎</button>
    <button aria-label="Handshake">🤝</button>
    <button aria-label="Clapping hands">👏</button>
    <button aria-label="Folded hands">🙏</button>
    <button aria-label="Flexed biceps">💪</button>
    <button aria-label="Fire">🔥</button>
    <button aria-label="Sparkles">✨</button>
    <button aria-label="Party popper">🎉</button>
    <button aria-label="Bullseye">🎯</button>
    <button aria-label="Sun">☀️</button>
    <button aria-label="Ocean wave">🌊</button>
    <button aria-label="Palm tree">🌴</button>
    <button aria-label="Mountain">⛰️</button>
    <button aria-label="Lion">🦁</button>
    <button aria-label="Elephant">🐘</button>
    <button aria-label="Giraffe">🦒</button>
    <button aria-label="Zebra">🦓</button>
    <button aria-label="Coffee">☕</button>
    <button aria-label="Watermelon">🍉</button>
    <button aria-label="Football">⚽</button>
    <button aria-label="Rocket">🚀</button>
  <!-- barua-lint enabl
```

### Mention Picker  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-avatar b-mention b-mention-list b-mention-list__handle b-mention-list__item b-mention-list__name

```html
<ul class="b-mention-list" style="max-width: 20rem;">
  <li><button class="b-mention-list__item is-active">
    <span class="b-avatar">AH</span>
    <span class="b-mention-list__name">Amina Hassan</span>
    <span class="b-mention-list__handle">@amina</span>
  </button></li>
  <li><button class="b-mention-list__item">
    <span class="b-avatar">BO</span>
    <span class="b-mention-list__name">Baraka Otieno</span>
    <span class="b-mention-list__handle">@baraka</span>
  </button></li>
  <li><button class="b-mention-list__item">
    <span class="b-avatar">NM</span>
    <span class="b-mention-list__name">Neema Mushi</span>
    <span class="b-mention-list__handle">@neema</span>
  </button></li>
  <li><button class="b-mention-list__item">
    <span class="b-avatar">JK</span>
    <span class="b-mention-list__name">Juma Kibwana</span>
    <span class="b-mention-list__handle">@juma</span>
  </button></li>
</ul>
<p>Handing the Q3 invoices to <span class="b-mention">@amina</span> —
<span class="b-mention">@baraka</span> has the port-fees context.</p>
```

### User Picker  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-avatar b-chip b-chip__remove b-mention-list b-mention-list__handle b-mention-list__item b-mention-list__name b-multiselect

```html
<div class="b-multiselect" style="max-width: 24rem;">
  <span class="b-chip">Amina Hassan
    <button class="b-chip__remove" aria-label="Remove Amina Hassan">×</button>
  </span>
  <span class="b-chip">Baraka Otieno
    <button class="b-chip__remove" aria-label="Remove Baraka Otieno">×</button>
  </span>
  <input type="text" placeholder="Add people…" aria-label="Add people">
</div>
<ul class="b-mention-list" role="listbox" aria-label="People" style="max-width: 24rem;">
  <li class="b-mention-list__item is-active" role="option" aria-selected="true">
    <span class="b-avatar">NM</span>
    <span class="b-mention-list__name">Neema Mushi</span>
    <span class="b-mention-list__handle">@neema</span>
  </li>
  <li class="b-mention-list__item" role="option" aria-selected="false">
    <span class="b-avatar">JK</span>
    <span class="b-mention-list__name">Juma Kibwana</span>
    <span class="b-mention-list__handle">@juma</span>
  </li>
</ul>
```

### Search Results  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-highlight b-search-result b-search-result__path b-search-result__snippet b-search-result__title b-search-results

```html
<div class="b-search-results" style="max-width: 34rem;">
  <a class="b-search-result" href="#search-results">
    <span class="b-search-result__title">Q3 invoice ready for approval</span>
    <span class="b-search-result__snippet">Baraka uploaded <mark>invoice</mark>-q3.pdf covering the Dar es Salaam port fees…</span>
    <span class="b-search-result__path">Finance › Invoices › invoice-q3.pdf</span>
  </a>
  <a class="b-search-result" href="#search-results">
    <span class="b-search-result__title">Supplier <mark>invoice</mark> workflow</span>
    <span class="b-search-result__snippet">Amina approves any <span class="b-highlight">invoice</span> above TZS 2,000,000 before payout…</span>
    <span class="b-search-result__path">Handbook › Finance › Approvals</span>
  </a>
  <a class="b-search-result" href="#search-results">
    <span class="b-search-result__title">Mwanza depot handover notes</span>
    <span class="b-search-result__snippet">…final <mark>invoice</mark> reconciliation is owed to the Mwanza depot by Friday.</span>
    <span class="b-search-result__path">Operations › Mwanza › Handover</span>
  </a>
</div>
```

### Filter Bar  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-filter-bar b-filter-chip b-filter-chip__value b-input b-input--sm b-link b-search b-sort-control

```html
<div class="b-filter-bar">
  <div class="b-search">
    <input class="b-input b-input--sm" type="search" placeholder="Search documents…" aria-label="Search documents">
  </div>
  <button class="b-filter-chip">Owner</button>
  <button class="b-filter-chip is-active">Type <span class="b-filter-chip__value">PDF</span></button>
  <button class="b-filter-chip">Modified</button>
  <button class="b-sort-control is-desc">Sort: Newest</button>
  <button class="b-link">Clear all</button>
</div>
```

### Filter Chip  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-filter-chip b-filter-chip__value

```html
<button class="b-filter-chip">Owner</button>
<button class="b-filter-chip">Status</button>
<button class="b-filter-chip is-active">Branch <span class="b-filter-chip__value">Dar es Salaam</span></button>
```

### Sort Control  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-sort-control

```html
<button class="b-sort-control is-asc">Name</button>
<button class="b-sort-control is-desc">Modified</button>
<button class="b-sort-control">Size</button>
```

### Bulk Actions  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-btn b-btn--danger-tinted b-btn--ghost b-btn--sm b-bulk-actions__bar b-bulk-actions__count b-divider b-divider--vertical b-icon-btn

```html
<div class="b-bulk-actions__bar">
  <span class="b-bulk-actions__count">3 selected</span>
  <button class="b-btn b-btn--ghost b-btn--sm">Move</button>
  <button class="b-btn b-btn--ghost b-btn--sm">Share</button>
  <hr class="b-divider b-divider--vertical">
  <button class="b-btn b-btn--danger-tinted b-btn--sm">Delete</button>
  <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Clear selection">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
  </button>
</div>
```

### Multi-Select  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-chip b-chip__remove b-multiselect

```html
<div class="b-multiselect" style="max-width: 26rem;">
  <span class="b-chip">Dar es Salaam
    <button class="b-chip__remove" aria-label="Remove Dar es Salaam">×</button>
  </span>
  <span class="b-chip">Mwanza
    <button class="b-chip__remove" aria-label="Remove Mwanza">×</button>
  </span>
  <span class="b-chip">Arusha
    <button class="b-chip__remove" aria-label="Remove Arusha">×</button>
  </span>
  <input type="text" placeholder="Add branch…" aria-label="Add branch">
</div>
```

### File Browser  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-file-browser b-file-browser__main b-file-browser__side b-file-grid b-file-tile b-file-tile__icon b-file-tile__name b-tree b-tree-item b-tree-item__row

```html
<div class="b-file-browser">
  <aside class="b-file-browser__side">
    <ul class="b-tree">
      <li>
        <details class="b-tree-item" open>
          <summary><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Finance</summary>
          <ul class="b-tree">
            <li><div class="b-tree-item__row is-selected"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Invoices</div></li>
            <li><div class="b-tree-item__row"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Receipts</div></li>
          </ul>
        </details>
      </li>
      <li><div class="b-tree-item__row"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Operations</div></li>
      <li><div class="b-tree-item__row"><s
```

### Folder Tree  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-tree b-tree-item b-tree-item__row

```html
<ul class="b-tree" style="max-width: 18rem;">
  <li>
    <details class="b-tree-item" open>
      <summary><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Dar es Salaam HQ</summary>
      <ul class="b-tree">
        <li>
          <details class="b-tree-item" open>
            <summary><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Finance</summary>
            <ul class="b-tree">
              <li><div class="b-tree-item__row is-selected"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Invoices</div></li>
              <li><div class="b-tree-item__row"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h3l2 2h6A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9Z" stroke="currentColor" stroke-width="1.5"/></svg>Payroll</div></li>
            </ul>
          </details>
        </li>
        <li><div cl
```

### Activity Log  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-log b-log__action b-log__actor b-log__entry b-log__time

```html
<div class="b-log" style="max-width: 40rem;">
  <div class="b-log__entry">
    <span class="b-log__actor">Amina Hassan</span>
    <span class="b-log__action">uploaded <code>invoice-q3.pdf</code> to Finance / Invoices</span>
    <time class="b-log__time">2 min ago</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__actor">Baraka Otieno</span>
    <span class="b-log__action">approved purchase order <code>PO-2214</code></span>
    <time class="b-log__time">38 min ago</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__actor">Neema Mushi</span>
    <span class="b-log__action">renamed <code>port-fees-draft.xlsx</code> to <code>port-fees.xlsx</code></span>
    <time class="b-log__time">Yesterday</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__actor">Juma Kibwana</span>
    <span class="b-log__action">shared <code>tender-brief.docx</code> with the Mwanza depot</span>
    <time class="b-log__time">Mon 09:12</time>
  </div>
</div>
```

### Audit Log  (https://ui.barua.tz/docs/specialized.html#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.
Classes: b-log b-log--audit b-log__action b-log__actor b-log__entry b-log__ip b-log__time

```html
<div class="b-log b-log--audit">
  <div class="b-log__entry">
    <span class="b-log__ip">197.250.14.62</span>
    <span class="b-log__actor">amina</span>
    <span class="b-log__action">signed in with <code>passkey</code></span>
    <time class="b-log__time">2026-08-26 09:14</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__ip">197.250.14.62</span>
    <span class="b-log__actor">amina</span>
    <span class="b-log__action">exported <code>invoice-q3.pdf</code></span>
    <time class="b-log__time">2026-08-26 09:21</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__ip">41.222.180.7</span>
    <span class="b-log__actor">baraka</span>
    <span class="b-log__action">changed role of <code>@juma</code> to <code>editor</code></span>
    <time class="b-log__time">2026-08-25 17:03</time>
  </div>
  <div class="b-log__entry">
    <span class="b-log__ip">196.249.5.118</span>
    <span class="b-log__actor">system</span>
    <span class="b-log__action">rotated API key <code>brk_live_…9f2</code></span>
    <time class="b-log__time">2026-08-25 02:00</time>
  </div>
</div>
```


## Authentication — sign in, OTP, account switching

### Sign In  (https://ui.barua.tz/docs/authentication.html#sign-in)
The flagship flow. .b-auth-card is a glass panel that stacks a gradient __logo , __title and __subtitle , a .b-btn--provider social button, a .b-divider--label , standard .b-field rows and a block primary action. The card is shown alone here — in an app, place it inside the .b-auth page wrapper, which centers it over a full-height, aurora-tinted background. Wrap the controls in a real <form> so Enter submits.
Classes: b-auth-card b-auth-card__footer b-auth-card__logo b-auth-card__subtitle b-auth-card__title b-btn b-btn--block b-btn--primary b-btn--provider b-divider--label b-field b-hstack b-input b-label b-link b-stack--between

```html
<div class="b-auth-card" style="max-width: 24rem; margin-inline: auto">
  <div class="b-auth-card__logo" aria-hidden="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2.75" y="4.75" width="18.5" height="14.5" rx="3.25" stroke="currentColor" stroke-width="1.7"/><path d="m4.75 8.25 7.25 5.25 7.25-5.25" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <h2 class="b-auth-card__title">Welcome back</h2>
  <p class="b-auth-card__subtitle">Sign in to your Neurotech workspace.</p>
  <button class="b-btn b-btn--provider b-btn--block" type="button">
    <svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23.5 12.27c0-.85-.08-1.66-.22-2.45H12v4.64h6.46a5.53 5.53 0 0 1-2.4 3.62v3h3.88c2.27-2.09 3.56-5.17 3.56-8.81Z"/><path fill="#34A853" d="M12 24c3.24 0 5.96-1.07 7.94-2.91l-3.88-3c-1.08.72-2.45 1.15-4.06 1.15-3.13 0-5.78-2.11-6.72-4.95H1.27v3.1A12 12 0 0 0 12 24Z"/><path fill="#FBBC05" d="M5.28 14.29a7.2 7.2 0 0 1 0-4.58v-3.1H1.27a12 12 0 0 0 0 10.78l4.01-3.1Z"/><path fill="#EA4335" d="M12 4.77c1.76 0 3.34.6 4.59 1.8l3.44-3.44A11.97 11.97 0 0 0 12 0 12 12 0 0 0 1.27 6.61l4.01 3.1C6.22 6.88 8.87 4.77 12 4.77Z"/></svg>
    Continue with Google
  </button>
  <div class="b-divider--label">or</div>
  <div class="b-field">
    <label class="b-label" for="signin-email">E
```

### Sign Up  (https://ui.barua.tz/docs/authentication.html#sign-up)
Same card, different fields. Keep it to the essentials — name, email, password, terms via .b-checkbox — and defer everything else to onboarding.
Classes: b-auth-card b-auth-card__footer b-auth-card__subtitle b-auth-card__title b-btn b-btn--block b-btn--primary b-checkbox b-field b-input b-label

```html
<div class="b-auth-card" style="max-width: 24rem; margin-inline: auto">
  <h2 class="b-auth-card__title">Create your account</h2>
  <p class="b-auth-card__subtitle">Start your 14-day Neurotech trial.</p>
  <div class="b-field">
    <label class="b-label" for="signup-name">Full name</label>
    <input class="b-input" id="signup-name" name="name" type="text" autocomplete="name" placeholder="Amina Hassan">
  </div>
  <div class="b-field">
    <label class="b-label" for="signup-email">Work email</label>
    <input class="b-input" id="signup-email" name="email" type="email" autocomplete="email" placeholder="amina@neurotech.africa">
  </div>
  <div class="b-field">
    <label class="b-label" for="signup-password">Password</label>
    <input class="b-input" id="signup-password" name="new-password" type="password" autocomplete="new-password" placeholder="8+ characters">
  </div>
  <label class="b-checkbox">
    <input type="checkbox" name="terms">
    <span>I agree to the <a href="#sign-up">Terms of Service</a> and <a href="#sign-up">Privacy Policy</a></span>
  </label>
  <button class="b-btn b-btn--primary b-btn--block" type="button">Create account</button>
  <p class="b-auth-card__footer">Already have an account? <a href="#sign-in">Sign in</a></p>
</div>
```

### Forgot Password  (https://ui.barua.tz/docs/authentication.html#forgot-password)
One field, one action, one way back. Confirm the send generically (“If an account exists for that address…”) so the flow never leaks which emails are registered.
Classes: b-auth-card b-auth-card__footer b-auth-card__subtitle b-auth-card__title b-btn b-btn--block b-btn--primary b-field b-input b-label b-link b-link--muted

```html
<div class="b-auth-card" style="max-width: 24rem; margin-inline: auto">
  <h2 class="b-auth-card__title">Reset your password</h2>
  <p class="b-auth-card__subtitle">We&rsquo;ll email you a secure reset link.</p>
  <div class="b-field">
    <label class="b-label" for="forgot-email">Email</label>
    <input class="b-input" id="forgot-email" name="email" type="email" autocomplete="email" placeholder="amina@neurotech.africa">
  </div>
  <button class="b-btn b-btn--primary b-btn--block" type="button">Send reset link</button>
  <p class="b-auth-card__footer"><a class="b-link b-link--muted" href="#sign-in">← Back to sign in</a></p>
</div>
```

### Reset Password  (https://ui.barua.tz/docs/authentication.html#reset-password)
Two password fields plus a .b-help hint about strength. Both inputs use autocomplete="new-password" , which is the cue for password managers to offer a generated password.
Classes: b-auth-card b-auth-card__subtitle b-auth-card__title b-btn b-btn--block b-btn--primary b-field b-help b-input b-label

```html
<div class="b-auth-card" style="max-width: 24rem; margin-inline: auto">
  <h2 class="b-auth-card__title">Choose a new password</h2>
  <p class="b-auth-card__subtitle">for amina@neurotech.africa</p>
  <div class="b-field">
    <label class="b-label" for="reset-new">New password</label>
    <input class="b-input" id="reset-new" name="new-password" type="password" autocomplete="new-password">
    <p class="b-help">At least 8 characters with a number and a symbol — a long passphrase is even stronger.</p>
  </div>
  <div class="b-field">
    <label class="b-label" for="reset-confirm">Confirm new password</label>
    <input class="b-input" id="reset-confirm" name="confirm-password" type="password" autocomplete="new-password">
  </div>
  <button class="b-btn b-btn--primary b-btn--block" type="button">Reset password</button>
</div>
```

### OTP Input  (https://ui.barua.tz/docs/authentication.html#otp-input)
.b-otp is a row of six single-character boxes. Add data-b-otp and barua.js wires the behavior: every box gets inputmode="numeric" and maxlength="1" , typing a digit auto-advances to the next box (toggling .is-filled ), Backspace on an empty box steps back, and pasting a copied code distributes the digits across the whole group.
Variants: Invalid state
Classes: b-otp

```html
<div class="b-otp" data-b-otp role="group" aria-label="One-time code">
  <input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" aria-label="Digit 1" value="7" class="is-filled">
  <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2">
  <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3">
  <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4">
  <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5">
  <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6">
</div>
```

### Verification  (https://ui.barua.tz/docs/authentication.html#verification)
The screen after sign-up, built from the result states in Feedback : .b-result--confirm with a tinted resend action and an escape hatch to correct the address.
Classes: b-btn b-btn--tinted b-link b-link--muted b-result b-result--confirm b-result__actions b-result__desc b-result__icon b-result__title

```html
<div class="b-result b-result--confirm">
  <div class="b-result__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none"><rect x="2.75" y="4.75" width="18.5" height="14.5" rx="3.25" stroke="currentColor" stroke-width="1.7"/><path d="m4.75 8.25 7.25 5.25 7.25-5.25" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <h2 class="b-result__title">Check your inbox</h2>
  <p class="b-result__desc">We sent a verification link to <strong>amina@neurotech.africa</strong>. It expires in 24 hours.</p>
  <div class="b-result__actions">
    <button class="b-btn b-btn--tinted" type="button">Resend email</button>
    <a class="b-link b-link--muted" href="#sign-up">Change email address</a>
  </div>
</div>
```

### Passkey Prompt  (https://ui.barua.tz/docs/authentication.html#passkey-prompt)
.b-passkey is a focused prompt for WebAuthn sign-in: a soft accent __icon , a one-line pitch, a primary action and a ghost fallback to other methods.
Classes: b-btn b-btn--ghost b-btn--primary b-passkey b-passkey__desc b-passkey__icon b-passkey__title

```html
<div class="b-passkey" style="max-width: 24rem">
  <div class="b-passkey__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="26" height="26" fill="none"><path d="M7.5 10.5a4.5 4.5 0 0 1 9 0v3a13.5 13.5 0 0 1-.56 3.85" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M12 10.5v3.25a9.75 9.75 0 0 1-1.4 5.05" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M4.5 13.5v-3a7.5 7.5 0 0 1 11.87-6.1M19.5 10.2v3.3c0 1.7-.28 3.33-.8 4.85" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
  </div>
  <h3 class="b-passkey__title">Sign in with a passkey</h3>
  <p class="b-passkey__desc">Use Face ID, Touch ID or your device PIN. Nothing to remember, nothing to phish.</p>
  <button class="b-btn b-btn--primary" type="button">Use passkey</button>
  <button class="b-btn b-btn--ghost" type="button">Other options</button>
</div>
```

### Two-Factor Authentication  (https://ui.barua.tz/docs/authentication.html#two-factor-authentication)
Composed, not invented: a .b-auth-card carrying an OTP group, a remember-device .b-switch and a block verify action.
Classes: b-auth-card b-auth-card__footer b-auth-card__subtitle b-auth-card__title b-btn b-btn--block b-btn--primary b-otp b-switch

```html
<div class="b-auth-card" style="max-width: 24rem; margin-inline: auto">
  <h2 class="b-auth-card__title">Two-factor code</h2>
  <p class="b-auth-card__subtitle">Enter the 6-digit code from your authenticator app.</p>
  <div class="b-otp" data-b-otp role="group" aria-label="Two-factor code">
    <input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" aria-label="Digit 1">
    <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2">
    <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3">
    <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4">
    <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5">
    <input type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6">
  </div>
  <label class="b-switch">
    <input type="checkbox" checked>
    Remember this device for 30 days
  </label>
  <button class="b-btn b-btn--primary b-btn--block" type="button">Verify</button>
  <p class="b-auth-card__footer">Lost your device? <a href="#two-factor-authentication">Use a recovery code</a></p>
</div>
```

### Account Switcher  (https://ui.barua.tz/docs/authentication.html#account-switcher)
.b-account-switcher stacks .b-account rows — initials .b-avatar , __name and __email — inside a .b-menu -shaped glass surface. Mark the signed-in account with .is-active and a __check .
Classes: b-account b-account-switcher b-account__check b-account__email b-account__meta b-account__name b-avatar b-menu b-menu__separator

```html
<div class="b-menu" style="width: 18rem">
  <div class="b-account-switcher">
    <button class="b-account is-active" type="button">
      <span class="b-avatar" aria-hidden="true">AH</span>
      <div class="b-account__meta">
        <div class="b-account__name">Amina Hassan</div>
        <div class="b-account__email">amina@neurotech.africa</div>
      </div>
      <span class="b-account__check" aria-hidden="true">✓</span>
    </button>
    <button class="b-account" type="button">
      <span class="b-avatar" aria-hidden="true">BO</span>
      <div class="b-account__meta">
        <div class="b-account__name">Baraka Otieno</div>
        <div class="b-account__email">baraka@neurotech.africa</div>
      </div>
    </button>
    <button class="b-account" type="button">
      <span class="b-avatar" aria-hidden="true">NS</span>
      <div class="b-account__meta">
        <div class="b-account__name">Neurotech Support</div>
        <div class="b-account__email">support@neurotech.africa</div>
      </div>
    </button>
    <hr class="b-menu__separator">
    <button class="b-account" type="button">
      <span class="b-avatar" aria-hidden="true">+</span>
      <div class="b-account__meta">
        <div class="b-account__name">Add account</div>
      </div>
    </button>
  </div>
</div>
```

### Profile Menu  (https://ui.barua.tz/docs/authentication.html#profile-menu)
A zero-JS dropdown: details.b-dropdown whose summary is a .b-profile-trigger — avatar, name, chevron — opening a .b-menu . See Navigation for the full menu family.
Classes: b-avatar b-avatar--sm b-dropdown b-menu b-menu__item b-menu__item--danger b-menu__separator b-menu__shortcut b-profile-trigger

```html
<details class="b-dropdown">
  <summary class="b-profile-trigger">
    <span class="b-avatar b-avatar--sm" aria-hidden="true">AH</span>
    Amina Hassan
    <svg viewBox="0 0 20 20" fill="none" width="14" height="14" aria-hidden="true"><path d="m5 8 5 5 5-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </summary>
  <ul class="b-menu">
    <li><button class="b-menu__item">Profile</button></li>
    <li><button class="b-menu__item">Settings<span class="b-menu__shortcut">⌘,</span></button></li>
    <li><hr class="b-menu__separator"></li>
    <li><button class="b-menu__item b-menu__item--danger">Sign out</button></li>
  </ul>
</details>
```


## System pages — errors, empty, onboarding

### Error Page Anatomy  (https://ui.barua.tz/docs/system.html#error-page-anatomy)
Every error page is the same four pieces stacked on .b-syspage , a flex column that centers itself in the viewport: .b-syspage__code — the oversized status number wearing the accent-to-indigo gradient — .b-syspage__title for the human headline, .b-syspage__desc for one or two sentences on what actually happened, and .b-syspage__actions , a button row with exactly one primary way out. Swap the code for an icon and the same scaffold covers maintenance and any other full-page interruption.

### 404 Page  (https://ui.barua.tz/docs/system.html#404-page)
The classic. Keep the description honest — most 404s are stale links, not user error — and route people home or to a human. The demo pins min-height: 0 ; the real page keeps the default 60vh so it centers in the viewport.
Classes: b-btn b-btn--ghost b-btn--primary b-syspage b-syspage__actions b-syspage__code b-syspage__desc b-syspage__title

```html
<div class="b-syspage" style="min-height: 0">
  <div class="b-syspage__code">404</div>
  <div class="b-syspage__title">Page not found</div>
  <p class="b-syspage__desc">The page you're looking for was moved, renamed, or never existed. Check the address, or head back somewhere familiar.</p>
  <div class="b-syspage__actions">
    <a class="b-btn b-btn--primary" href="#404-page">Go home</a>
    <a class="b-btn b-btn--ghost" href="#404-page">Contact support</a>
  </div>
</div>
```

### 403 Page  (https://ui.barua.tz/docs/system.html#403-page)
Denied, not broken. Offer the two exits people actually want: request access, or hop identities. Pair "Switch account" with the Account Switcher from Authentication so nobody has to sign out just to sign back in.
Classes: b-btn b-btn--ghost b-btn--primary b-syspage b-syspage__actions b-syspage__code b-syspage__desc b-syspage__title

```html
<div class="b-syspage" style="min-height: 0">
  <div class="b-syspage__code">403</div>
  <div class="b-syspage__title">Access denied</div>
  <p class="b-syspage__desc">Your account doesn't have permission to view this workspace. Ask an admin to let you in, or try a different account.</p>
  <div class="b-syspage__actions">
    <button class="b-btn b-btn--primary">Request access</button>
    <button class="b-btn b-btn--ghost">Switch account</button>
  </div>
</div>
```

### 500 Page  (https://ui.barua.tz/docs/system.html#500-page)
Own it. Say the fault is on your side, promise the data is safe, and hand over a reference code support can actually use — a plain <code> line tucked under the actions.
Classes: b-btn b-btn--ghost b-btn--primary b-footnote b-syspage b-syspage__actions b-syspage__code b-syspage__desc b-syspage__title b-text-tertiary

```html
<div class="b-syspage" style="min-height: 0">
  <div class="b-syspage__code">500</div>
  <div class="b-syspage__title">Something broke on our side</div>
  <p class="b-syspage__desc">An unexpected error stopped this request. It's not you — your mail is safe, and the team has already been paged.</p>
  <div class="b-syspage__actions">
    <button class="b-btn b-btn--primary">Try again</button>
    <a class="b-btn b-btn--ghost" href="#500-page">View status page</a>
  </div>
  <p class="b-footnote b-text-tertiary">Reference: <code>ERR-2AF4-9C01</code></p>
</div>
```

### Maintenance Page  (https://ui.barua.tz/docs/system.html#maintenance-page)
The same scaffold minus the status code — an icon where the number would be, a concrete time window, and an indeterminate .b-progress so the page feels alive rather than abandoned.
Classes: b-footnote b-progress b-progress--indeterminate b-progress__fill b-syspage b-syspage__desc b-syspage__title b-text-tertiary

```html
<div class="b-syspage" style="min-height: 0">
  <svg width="44" height="44" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" stroke="var(--b-color-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <div class="b-syspage__title">Scheduled maintenance</div>
  <p class="b-syspage__desc">Barua is getting a planned upgrade between 02:00 and 04:30 UTC. Mail keeps arriving the whole time and will be waiting when we're back.</p>
  <div class="b-progress b-progress--indeterminate" style="max-width: 20rem">
    <div class="b-progress__fill"></div>
  </div>
  <p class="b-footnote b-text-tertiary">Started 02:00 UTC · Live updates on the status page</p>
</div>
```

### Offline State  (https://ui.barua.tz/docs/system.html#offline-state)
A .b-result--warning panel, not a dead end — reassure people their drafts are safe locally. Toggling it (listening to navigator.onLine and the online / offline events) is app-side wiring; Barua ships the look.
Classes: b-btn b-btn--primary b-result b-result--warning b-result__actions b-result__desc b-result__icon b-result__title

```html
<div class="b-result b-result--warning">
  <div class="b-result__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none"><path d="M2 8.5a14.5 14.5 0 0 1 20 0M5.5 12a9.7 9.7 0 0 1 13 0M9 15.5a4.6 4.6 0 0 1 6 0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="12" cy="19" r="1.2" fill="currentColor"/><path d="m4 4 16 16" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
  </div>
  <div class="b-result__title">You're offline</div>
  <p class="b-result__desc">Barua can't reach the network. Drafts are saved on this device and will send themselves the moment you're back online.</p>
  <div class="b-result__actions">
    <button class="b-btn b-btn--primary">Retry connection</button>
  </div>
</div>
```

### Permission State  (https://ui.barua.tz/docs/system.html#permission-state)
Ask in context, right before the capability is used. A .b-result--confirm panel primes the real browser prompt — explain the payoff first and the OS dialog stops feeling like an ambush.
Classes: b-btn b-btn--ghost b-btn--primary b-result b-result--confirm b-result__actions b-result__desc b-result__icon b-result__title

```html
<div class="b-result b-result--confirm">
  <div class="b-result__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
  </div>
  <div class="b-result__title">Turn on notifications?</div>
  <p class="b-result__desc">Get a ping the moment important mail lands — VIP senders and mentions only, never the newsletter flood.</p>
  <div class="b-result__actions">
    <button class="b-btn b-btn--primary">Allow notifications</button>
    <button class="b-btn b-btn--ghost">Not now</button>
  </div>
</div>
```

### Loading State  (https://ui.barua.tz/docs/system.html#loading-state)
Two tools, both from Feedback : a centered spinner when you don't know the shape of what's coming, skeletons when you do. Full-page loading is a .b-spinner--lg plus one quiet line of .b-footnote text — never a paragraph.
Variants: Skeleton page
Classes: b-card b-card-grid b-card__body b-footnote b-gap-3 b-skeleton b-skeleton--card b-skeleton--text b-skeleton--title b-spinner b-spinner--lg b-stack--center b-text-secondary b-vstack

```html
<div class="b-vstack b-stack--center b-gap-3" role="status" aria-busy="true">
  <span class="b-spinner b-spinner--lg" aria-hidden="true"></span>
  <p class="b-footnote b-text-secondary">Loading your inbox…</p>
</div>
```

### Empty State  (https://ui.barua.tz/docs/system.html#empty-state)
The component lives in Content — this is the pattern. On first run, render .b-empty inside the exact container the content will eventually fill, with the creation action right there instead of hidden in a toolbar.
Classes: b-btn b-btn--ghost b-btn--primary b-btn--sm b-card b-card__header b-card__title b-empty b-empty__desc b-empty__icon b-empty__title

```html
<div class="b-card">
  <div class="b-card__header">
    <div class="b-card__title">Rules</div>
    <button class="b-btn b-btn--ghost b-btn--sm">Import</button>
  </div>
  <div class="b-empty">
    <div class="b-empty__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <div class="b-empty__title">No rules yet</div>
    <p class="b-empty__desc">Rules file, label and archive mail before it ever hits your inbox. Start with one for newsletters — future you says thanks.</p>
    <button class="b-btn b-btn--primary">Create your first rule</button>
  </div>
</div>
```

### Onboarding  (https://ui.barua.tz/docs/system.html#onboarding)
The pitch page. .b-onboarding__hero gives one word the gradient treatment via <em> , a single primary CTA leads, and at most three .b-onboarding-feature rows carry the argument — icons from .b-icon-tile .
Classes: b-btn b-btn--ghost b-btn--lg b-btn--primary b-callout b-gap-4 b-hstack b-icon-tile b-onboarding b-onboarding-feature b-onboarding-feature__desc b-onboarding-feature__title b-onboarding__hero b-text-secondary b-vstack

```html
<div class="b-onboarding">
  <div class="b-onboarding__hero">Email that finally feels <em>effortless</em></div>
  <p class="b-callout b-text-secondary" style="max-width: 34rem">One inbox for every account, triaged before you even open it. No folders to invent, no zero to chase.</p>
  <div class="b-hstack">
    <button class="b-btn b-btn--primary b-btn--lg">Get started</button>
    <button class="b-btn b-btn--ghost b-btn--lg">Watch demo</button>
  </div>
  <div class="b-vstack b-gap-4">
    <div class="b-onboarding-feature">
      <span class="b-icon-tile" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none"><path d="M22 12h-6l-2 3h-4l-2-3H2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <div>
        <div class="b-onboarding-feature__title">Smart triage</div>
        <div class="b-onboarding-feature__desc">People, receipts and newsletters sort themselves into calm, separate lanes.</div>
      </div>
    </div>
    <div class="b-onboarding-feature">
      <span class="b-icon-tile" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="8" stroke="currentColor" 
```

### Welcome Screen  (https://ui.barua.tz/docs/system.html#welcome-screen)
The Apple-style first-launch sheet: app icon up top ( .b-auth-card__logo ), a "Welcome to" hero, a short feature list, and a single Continue button in a .b-form-actions footer. In a real sheet, pin that footer to the bottom edge so Continue never scrolls away.
Classes: b-auth-card__logo b-btn b-btn--lg b-btn--primary b-form-actions b-gap-4 b-icon-tile b-onboarding b-onboarding-feature b-onboarding-feature__desc b-onboarding-feature__title b-onboarding__hero b-vstack

```html
<div class="b-onboarding">
  <div class="b-auth-card__logo" aria-hidden="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2.5" y="4.5" width="19" height="15" rx="3.5" stroke="currentColor" stroke-width="1.5"/><path d="m5 8.2 7 5.3 7-5.3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <div class="b-onboarding__hero">Welcome to <em>Barua</em></div>
  <div class="b-vstack b-gap-4">
    <div class="b-onboarding-feature">
      <span class="b-icon-tile" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.6"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      </span>
      <div>
        <div class="b-onboarding-feature__title">All of your accounts</div>
        <div class="b-onboarding-feature__desc">Work, personal and that address from 2011 — unified in one inbox, color-coded per identity.</div>
      </div>
    </div>
    <div class="b-onboarding-feature">
      <span class="b-icon-tile" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <div>
        <div class
```


## Dashboards — archetypes, composition, choosing a chart, and the four states every widget has

### Name the question first  (https://ui.barua.tz/docs/dashboards.html#the-question)
A dashboard answers one question, for one person, on one visit: is anything wrong , how are we doing , what needs me today . Everything on the screen either serves that question or is decoration. A page that answers three answers none of them well — that is what a second dashboard is for.

### The five layers  (https://ui.barua.tz/docs/dashboards.html#layers)
A dashboard is not a grid of cards, it is a page read from the top down, and each band answers the same question at a different depth: what , then why , then what now . In the survey a figure came first on 40 of 51 pages, and the strongest adjacency of all was a figure followed by a list — 36 occurrences. That order is not a convention, it is how people read.
Variants: Rhythm is what makes it feel designed, Space groups; borders separate, What the first screen owes you
Classes: b-gap-2 b-hstack b-stack b-table b-table-wrap

```html
<div class="b-stack b-gap-2 docs-layers">
  <div class="docs-layer docs-layer--ctx"><span>1 · context</span></div>
  <div class="b-hstack b-gap-2">
    <div class="docs-layer" style="flex: 3"><span>2 · verdict</span></div>
    <div class="docs-layer" style="flex: 3"></div>
    <div class="docs-layer" style="flex: 3"></div>
    <div class="docs-layer" style="flex: 3"></div>
  </div>
  <div class="b-hstack b-gap-2">
    <div class="docs-layer docs-layer--tall" style="flex: 8"><span>3 · evidence</span></div>
    <div class="docs-layer docs-layer--tall" style="flex: 4"></div>
  </div>
  <div class="b-hstack b-gap-2">
    <div class="docs-layer" style="flex: 6"><span>4 · detail</span></div>
    <div class="docs-layer" style="flex: 6"></div>
  </div>
  <div class="docs-layer docs-layer--ctx"><span>5 · tail</span></div>
</div>
```

### Six archetypes  (https://ui.barua.tz/docs/dashboards.html#archetypes)
Variety comes from choosing a different archetype, not from decorating the same one. Most dashboards are an Overview because it is the shape that gets built by reflex.
Classes: b-table b-table-wrap

### Composition  (https://ui.barua.tz/docs/dashboards.html#composition)
Widths are full, half, third or quarter, and spans in a row total twelve. Those four are the entire vocabulary the surveyed templates use; anything else reads as a mistake.
Classes: b-card b-card--compact b-card__body b-card__header b-card__title b-columns b-columns__bar b-dashboard b-empty b-empty__desc b-empty__title b-span-3 b-span-4 b-span-8 b-stat b-stat__label b-stat__value

```html
<div class="b-dashboard">
  <article class="b-card b-card--compact b-span-3"><div class="b-card__body"><div class="b-stat"><span class="b-stat__label">Sent</span><span class="b-stat__value">12,480</span></div></div></article>
  <article class="b-card b-card--compact b-span-3"><div class="b-card__body"><div class="b-stat"><span class="b-stat__label">Opened</span><span class="b-stat__value">61%</span></div></div></article>
  <article class="b-card b-card--compact b-span-3"><div class="b-card__body"><div class="b-stat"><span class="b-stat__label">Replied</span><span class="b-stat__value">18%</span></div></div></article>
  <article class="b-card b-card--compact b-span-3"><div class="b-card__body"><div class="b-stat"><span class="b-stat__label">Bounced</span><span class="b-stat__value">0.4%</span></div></div></article>
  <article class="b-card b-span-8"><div class="b-card__header"><div class="b-card__title">Delivery, last 7 days</div></div><div class="b-card__body"><div class="b-columns" style="--b-chart-h: 8rem" role="img" aria-label="Delivery peaked Thursday at 4,120."><div class="b-columns__bar" data-label="M" style="--v: 62%"></div><div class="b-columns__bar" data-label="T" style="--v: 71%"></div><div class="b-columns__bar" data-label="W" style="--v: 58%"></div><div class="b-columns__bar" data-label="T" style="--v: 100%"></div><div class="b-columns__bar" data-label="F" style="--
```

### White space  (https://ui.barua.tz/docs/dashboards.html#whitespace)
Space is the only thing on a dashboard doing structural work that nobody notices. Four rules cover almost every case.

### Text on a dashboard  (https://ui.barua.tz/docs/dashboards.html#dashboard-type)
Nothing here is prose. A dashboard is read in glances, so every string is a label, a figure or a caption — and if something genuinely needs a sentence to explain it, it belongs on a detail page.

### How many pages a dashboard product has  (https://ui.barua.tz/docs/dashboards.html#page-set)
Counted across the same six products — 163 genuine product pages, once component demos are set aside. It is a useful check on whether a product is finished.
Classes: b-table b-table-wrap

### Choosing a chart  (https://ui.barua.tz/docs/dashboards.html#charts)
Time is a line or an area. Comparison across categories is a bar. Those three were 84% of every chart in the survey — 97 of 115.
Classes: b-table b-table-wrap

### Four states, not one  (https://ui.barua.tz/docs/dashboards.html#states)
Every widget has a loading state, an empty state, an error state and a loaded state. Design all four or the page only works on a good day. In 457 pages, three had a message for having no data.
Classes: b-alert b-alert--danger b-alert__content b-card b-card--compact b-card__body b-empty b-empty__desc b-empty__title b-gap-2 b-gap-3 b-grid b-grid--3 b-skeleton b-skeleton--text b-stack

```html
<div class="b-grid b-grid--3 b-gap-3">
  <article class="b-card b-card--compact"><div class="b-card__body b-stack b-gap-2"><span class="b-skeleton b-skeleton--text" style="width: 40%"></span><span class="b-skeleton b-skeleton--text" style="width: 70%"></span></div></article>
  <article class="b-card b-card--compact"><div class="b-card__body"><div class="b-empty"><div class="b-empty__title">No invoices yet</div><p class="b-empty__desc">They appear here once you send one.</p></div></div></article>
  <article class="b-card b-card--compact"><div class="b-card__body"><div class="b-alert b-alert--danger" role="alert"><div class="b-alert__content">Could not reach billing. Retrying in 30s.</div></div></div></article>
</div>
```

### Density  (https://ui.barua.tz/docs/dashboards.html#density)
A table on a dashboard shows five to ten rows and links to the full list — it is a sample, not the archive. Columns of figures take .b-tabular-nums or the digits jitter as they update. A delta states direction and period together: "↑ 8.2% this week", never a bare arrow.


## Productivity — dashboards, workspace, dock, control centre

### Workspace Shell  (https://ui.barua.tz/docs/productivity.html#workspace-shell)
.b-workspace is a full-height CSS grid with four named areas: topbar spanning the top, then sidebar / main / inspector below. Children slot in by class — a .b-topnav takes the topbar, a .b-sidebar (or .b-rail ) takes the sidebar, .b-workspace__main is the one scrolling work surface, and an optional .b-inspector docks on the trailing edge. Drop the inspector and main simply stretches. The shell defaults to 100dvh ; the demo constrains it to a miniature.
Classes: b-avatar b-avatar--xs b-card b-card__body b-dl b-dl--stacked b-inspector b-inspector__header b-inspector__section b-sidebar b-sidebar--surface b-sidebar__group b-sidebar__item b-spacer b-stat b-stat__delta b-stat__label b-stat__value b-status b-status--online b-topnav b-topnav__brand b-workspace b-workspace__main

```html
<div class="b-workspace" style="height: 100%">
  <header class="b-topnav">
    <span class="b-topnav__brand">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="4" fill="var(--b-color-accent)"/><path d="m4 7 8 6 8-6" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Sema
    </span>
    <span class="b-spacer"></span>
    <span class="b-status b-status--online">Live</span>
    <span class="b-avatar b-avatar--xs">AH</span>
  </header>
  <aside class="b-sidebar b-sidebar--surface" style="width: 10rem" aria-label="Workspace">
    <nav class="b-sidebar__group">
      <a class="b-sidebar__item is-active" href="#workspace-shell">Overview</a>
      <a class="b-sidebar__item" href="#workspace-shell">Campaigns</a>
      <a class="b-sidebar__item" href="#workspace-shell">Tickets</a>
    </nav>
  </aside>
  <main class="b-workspace__main">
    <article class="b-card">
      <div class="b-card__body">
        <div class="b-stat">
          <span class="b-stat__label">Calls today</span>
          <span class="b-stat__value">214</span>
          <span class="b-stat__delta is-up">▲ 9%</span>
        </div>
      </div>
    </article>
  </main>
  <aside class="b-inspector" style="--b-inspector-w: 10.5rem" aria-label="Inspector">
    <div class="b-inspector__header">Inspect
```

### Dashboard  (https://ui.barua.tz/docs/productivity.html#dashboard)
.b-dashboard is a 12-column grid. Cards claim width with one of .b-span-2 , .b-span-3 , .b-span-4 , .b-span-5 , .b-span-6 , .b-span-7 , .b-span-8 , .b-span-9 , .b-span-10 , .b-span-11 or .b-span-12 from 768px up, and stack to a single column below. Spans in one row should total twelve — 5 + 4 + 3 reads as well as 4 + 4 + 4 , and a row that overflows wraps a card onto its own line. Compose it from .b-card + .b-stat for KPIs and the CSS charts from Data Visualization for trends.
Classes: b-avatar b-avatar--sm b-card b-card__body b-card__header b-card__title b-chart b-chart__title b-columns b-columns__bar b-dashboard b-list b-list--plain b-list-item b-list-item__content b-list-item__leading b-list-item__subtitle b-list-item__title b-list-item__trailing b-span-4 b-span-8 b-sparkline b-stat b-stat__delta b-stat__label b-stat__value

```html
<div class="b-dashboard">
  <article class="b-card b-span-4">
    <div class="b-card__body">
      <div class="b-stat">
        <span class="b-stat__label">Calls handled</span>
        <span class="b-stat__value">4,182</span>
        <span class="b-stat__delta is-up">▲ 12% vs last week</span>
      </div>
      <svg class="b-sparkline" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true"><path d="M0 19 14 15 28 17 42 10 56 12 70 7 84 9 100 4"/></svg>
    </div>
  </article>
  <article class="b-card b-span-4">
    <div class="b-card__body">
      <div class="b-stat">
        <span class="b-stat__label">Tickets resolved</span>
        <span class="b-stat__value">318</span>
        <span class="b-stat__delta is-up">▲ 6% vs last week</span>
      </div>
    </div>
  </article>
  <article class="b-card b-span-4">
    <div class="b-card__body">
      <div class="b-stat">
        <span class="b-stat__label">Avg. handle time</span>
        <span class="b-stat__value">3m 42s</span>
        <span class="b-stat__delta is-down">▼ 21s over target</span>
      </div>
    </div>
  </article>
  <article class="b-card b-span-8">
    <div class="b-card__body">
      <div class="b-chart">
        <div class="b-chart__title">Calls per day</div>
        <div class="b-columns" style="--b-chart-h: 9rem">
          <div class="b-columns__bar" style="--v: 44%" data-label="Mon"></div>
    
```

### Command Center  (https://ui.barua.tz/docs/productivity.html#command-center)
A search-first hero for the top of a workspace: .b-command-center centers a big .b-input-group (capped at 34rem ) with a row of quick-action .b-chip s underneath. It answers "where do I start?" before the user has picked a surface.
Classes: b-chip b-command-center b-gap-2 b-hstack b-input b-input-affix b-input-affix--end b-input-affix--start b-input-group b-search b-stack--wrap

```html
<div class="b-command-center">
  <h3>Good morning, Asha</h3>
  <p>Search across calls, tickets and campaigns — or jump straight in.</p>
  <div class="b-input-group b-search">
    <span class="b-input-affix b-input-affix--start">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13.5 13.5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </span>
    <input class="b-input" type="search" placeholder="Search Sema…" aria-label="Search Sema">
    <span class="b-input-affix b-input-affix--end"><kbd>⌘K</kbd></span>
  </div>
  <div class="b-hstack b-stack--wrap b-gap-2" style="justify-content: center">
    <button class="b-chip">New campaign</button>
    <button class="b-chip">Push leads</button>
    <button class="b-chip">Open queue</button>
    <button class="b-chip">Today's report</button>
  </div>
</div>
```

### Kanban Board  (https://ui.barua.tz/docs/productivity.html#kanban-board)
.b-kanban is a horizontally scrolling row of .b-kanban-col columns, each with a __header (title + __count ) and a __list of task cards . During drag, mark the grabbed card .is-dragging and the hovered column .is-dropover — shown frozen mid-drag below, with a card leaving "In Progress" for "Done".
Classes: b-avatar b-badge b-badge--accent b-kanban b-kanban-col b-kanban-col__count b-kanban-col__header b-kanban-col__list b-task b-task__meta b-task__title

### Task & Task List  (https://ui.barua.tz/docs/productivity.html#task-and-task-list)
.b-task is the draggable unit of work: a __title plus a __meta row of badge, due date and an avatar that auto-shrinks and pushes to the trailing edge. It lifts on hover and tilts while .is-dragging .
Variants: Task list
Classes: b-avatar b-badge b-badge--accent b-badge--danger b-checkbox b-task b-task-list b-task-row b-task-row__due b-task-row__title b-task__meta b-task__title

```html
<div class="b-task" style="width: 16rem">
  <div class="b-task__title">Wire USSD flow</div>
  <div class="b-task__meta">
    <span class="b-badge b-badge--accent">USSD</span>
    <span>Sep 2</span>
    <span class="b-avatar">AH</span>
  </div>
</div>
<div class="b-task is-dragging" style="width: 16rem">
  <div class="b-task__title">Fix webhook retries</div>
  <div class="b-task__meta">
    <span class="b-badge b-badge--danger">Bug</span>
    <span>Aug 28</span>
    <span class="b-avatar">JK</span>
  </div>
</div>
```

### Calendar View  (https://ui.barua.tz/docs/productivity.html#calendar-view)
.b-calview is a 7-column month grid: one __head cell per weekday, then a __cell per day holding a __date and stacked .b-event pills ( --green , --orange , --purple recolor them). .is-today fills the date disc with accent; .is-other-month dims spillover days. Two weeks are enough to show the pattern — a real month just repeats the same cells.
Classes: b-calview b-calview__cell b-calview__date b-calview__head b-event b-event--green b-event--orange b-event--purple

```html
<div class="b-calview">
  <div class="b-calview__head">Mon</div>
  <div class="b-calview__head">Tue</div>
  <div class="b-calview__head">Wed</div>
  <div class="b-calview__head">Thu</div>
  <div class="b-calview__head">Fri</div>
  <div class="b-calview__head">Sat</div>
  <div class="b-calview__head">Sun</div>
  <div class="b-calview__cell">
    <span class="b-calview__date">24</span>
    <span class="b-event">Standup</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">25</span>
    <span class="b-event b-event--purple">USSD demo</span>
  </div>
  <div class="b-calview__cell is-today">
    <span class="b-calview__date">26</span>
    <span class="b-event">Sprint review</span>
    <span class="b-event b-event--green">1:1 Asha</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">27</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">28</span>
    <span class="b-event b-event--orange">Campaign launch</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">29</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">30</span>
  </div>
  <div class="b-calview__cell">
    <span class="b-calview__date">31</span>
    <span class="b-event">Retro</span>
  </div>
  <div class="b-calview__cell is-other-month">
    <span class="b-calview__date">1</span>
  
```

### Gantt View  (https://ui.barua.tz/docs/productivity.html#gantt-view)
.b-gantt pairs a __label column with __row tracks. Each .b-gantt__bar is placed with two variables — --start and --len — and an inner <i> fills to --done for progress. Recolor per bar with --b-chart-color . The background grid divides into --b-gantt-units columns (default 12 ) — set it on the container to match your timescale.
Classes: b-gantt b-gantt__bar b-gantt__label b-gantt__row

```html
<div class="b-gantt" style="--b-gantt-units: 8">
  <div class="b-gantt__label">Wire USSD flow</div>
  <div class="b-gantt__row">
    <div class="b-gantt__bar" style="--start: 0%; --len: 30%"><i style="--done: 70%"></i></div>
  </div>
  <div class="b-gantt__label">IVR prompts</div>
  <div class="b-gantt__row">
    <div class="b-gantt__bar" style="--start: 22%; --len: 32%; --b-chart-color: var(--b-chart-3)"><i style="--done: 45%"></i></div>
  </div>
  <div class="b-gantt__label">Agent console</div>
  <div class="b-gantt__row">
    <div class="b-gantt__bar" style="--start: 48%; --len: 38%; --b-chart-color: var(--b-chart-4)"><i style="--done: 20%"></i></div>
  </div>
  <div class="b-gantt__label">Campaign launch</div>
  <div class="b-gantt__row">
    <div class="b-gantt__bar" style="--start: 82%; --len: 14%; --b-chart-color: var(--b-chart-6)"><i style="--done: 0%"></i></div>
  </div>
</div>
```

### Activity Panel  (https://ui.barua.tz/docs/productivity.html#activity-panel)
There is no dedicated activity component — compose an inspector-style card from .b-card and the Content page's .b-timeline : time, title, body per event, with .is-complete / .is-active dots marking progress.
Classes: b-badge b-card b-card__body b-card__header b-card__title b-timeline b-timeline__body b-timeline__time b-timeline__title

```html
<div class="b-card" style="max-width: 24rem">
  <div class="b-card__header">
    <div class="b-card__title">Activity</div>
    <span class="b-badge">Today</span>
  </div>
  <div class="b-card__body">
    <ol class="b-timeline">
      <li class="is-complete">
        <div class="b-timeline__time">09:14</div>
        <div class="b-timeline__title">Ticket #4821 resolved</div>
        <div class="b-timeline__body">Asha closed the billing escalation after a callback.</div>
      </li>
      <li class="is-active">
        <div class="b-timeline__time">11:02</div>
        <div class="b-timeline__title">USSD flow v3 deployed</div>
        <div class="b-timeline__body">Baraka pushed the new menu tree to staging.</div>
      </li>
      <li>
        <div class="b-timeline__time">13:40</div>
        <div class="b-timeline__title">Campaign queued</div>
        <div class="b-timeline__body">Nane Nane follow-ups scheduled for 15:00.</div>
      </li>
    </ol>
  </div>
</div>
```

### Inspector & Properties Panel  (https://ui.barua.tz/docs/productivity.html#inspector-and-properties-panel)
.b-inspector is the trailing panel of the workspace shell : a sticky __header with a close button, then stacked __section s each led by an <h6> . Inside, .b-props lays out label-control rows ( __key at a fixed 6rem ; inputs and selects auto-shrink to the small control height). Shown standalone here — inside a shell it docks with only a hairline start border.
Classes: b-btn b-btn--ghost b-btn--sm b-dl b-icon-btn b-input b-inspector b-inspector__header b-inspector__section b-props b-props__key b-props__row b-select b-slider

```html
<aside class="b-inspector" style="height: 20rem; border: 1px solid var(--b-separator); border-radius: var(--b-radius-xl);" aria-label="Inspector">
  <header class="b-inspector__header">
    Inspector
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Close inspector">
      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m5.5 5.5 9 9m0-9-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
  </header>
  <div class="b-inspector__section">
    <h6>Properties</h6>
    <div class="b-props">
      <div class="b-props__row">
        <label class="b-props__key" for="insp-name">Name</label>
        <input class="b-input" id="insp-name" value="Wire USSD flow">
      </div>
      <div class="b-props__row">
        <label class="b-props__key" for="insp-status">Status</label>
        <!-- barua-lint disable native-select: a stand-in control inside a layout demo; forms.html documents the menu select -->
        <select class="b-select" id="insp-status">
          <option>Backlog</option>
          <option selected>In progress</option>
          <option>Done</option>
        </select>
      </div>
      <div class="b-props__row">
        <label class="b-props__key" for="insp-width">Width</label>
        <input class="b-slider" id="insp-width" type="range" min="0" max="100" value="64" style="--b-slider-fill: 64%">
   
```

### Detail View & Master-Detail  (https://ui.barua.tz/docs/productivity.html#detail-view-and-master-detail)
.b-master-detail splits a __list (a .b-list of interactive rows, one .is-selected ) from a __detail pane. Below 768px the panes collapse to one at a time: the list shows by default, and toggling .is-detail-open on the container swaps in the detail — pair it with a back button in the detail header.
Classes: b-avatar b-avatar--sm b-badge b-badge--warning b-btn b-btn--primary b-dl b-hstack b-list b-list--plain b-list-item b-list-item--interactive b-list-item__content b-list-item__leading b-list-item__subtitle b-list-item__title b-list-item__trailing b-master-detail b-master-detail__detail b-master-detail__list

```html
<div class="b-master-detail">
  <div class="b-master-detail__list">
    <ul class="b-list b-list--plain">
      <li class="b-list-item b-list-item--interactive">
        <span class="b-list-item__leading"><span class="b-avatar b-avatar--sm">AH</span></span>
        <div class="b-list-item__content">
          <div class="b-list-item__title">#4821 — Billing escalation</div>
          <div class="b-list-item__subtitle">Resolved · Asha</div>
        </div>
        <span class="b-list-item__trailing">2h</span>
      </li>
      <li class="b-list-item b-list-item--interactive is-selected">
        <span class="b-list-item__leading"><span class="b-avatar b-avatar--sm">BO</span></span>
        <div class="b-list-item__content">
          <div class="b-list-item__title">#4832 — USSD menu loops</div>
          <div class="b-list-item__subtitle">Open · Baraka</div>
        </div>
        <span class="b-list-item__trailing">35m</span>
      </li>
      <li class="b-list-item b-list-item--interactive">
        <span class="b-list-item__leading"><span class="b-avatar b-avatar--sm">JK</span></span>
        <div class="b-list-item__content">
          <div class="b-list-item__title">#4835 — Recording missing</div>
          <div class="b-list-item__subtitle">Open · Joseph</div>
        </div>
        <span class="b-list-item__trailing">12m</span>
      </li>
    </ul>
  </div>
  <div class="b
```

### Split Pane  (https://ui.barua.tz/docs/productivity.html#split-pane)
Resizable side-by-side panels are covered in Layout — .b-split + .b-panel with a .b-resize-handle between them, the leading panel made draggable via .b-resizable .
Classes: b-panel b-resizable b-resize-handle b-split

```html
<div class="b-split" style="height: 9rem">
  <div class="b-panel b-resizable" style="flex: 0 0 38%; padding: var(--b-space-4);">Queue</div>
  <div class="b-resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize panels"></div>
  <div class="b-panel" style="flex: 1; padding: var(--b-space-4);">Transcript</div>
</div>
```

### Dock  (https://ui.barua.tz/docs/productivity.html#dock)
A macOS-style app switcher. In production the glass .b-dock__tray sits inside .b-dock , which fixes it to the bottom of the viewport — shown statically here. Items magnify and lift on hover ( scale 1.28 with a bounce ease) and .is-active draws the running-app dot.
Classes: b-dock__item b-dock__tray b-icon

```html
<div class="b-dock__tray">
  <button class="b-dock__item is-active" aria-label="Calls"><svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M6.5 3.5 8 6.2 6.4 8a9 9 0 0 0 5.6 5.6l1.8-1.6 2.7 1.5v2.2a1.3 1.3 0 0 1-1.4 1.3A13.5 13.5 0 0 1 3 5.2 1.3 1.3 0 0 1 4.3 3.8h2.2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></button>
  <button class="b-dock__item" aria-label="Inbox"><svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M3.5 11.5 5 5h10l1.5 6.5v2.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.5 11.5h4l1 1.5h3l1-1.5h4" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></button>
  <button class="b-dock__item" aria-label="Contacts"><svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="7.5" cy="7" r="2.6" stroke="currentColor" stroke-width="1.5"/><path d="M2.5 16a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M13 4.6a2.6 2.6 0 0 1 0 4.9M14.5 11.6a5 5 0 0 1 3 4.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
  <button class="b-dock__item" aria-label="Reports"><svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 16.5V9M10 16.5V4M16 16.5v-5" stroke="currentColor" stroke-wi
```

### Toolbar  (https://ui.barua.tz/docs/productivity.html#toolbar)
The toolbar family lives in Actions ; in a workspace it floats over the board as .b-toolbar--glass with the view's bulk actions at the trailing end.
Classes: b-btn b-btn--ghost b-btn--sm b-btn--tinted b-divider b-divider--vertical b-icon-btn b-toolbar b-toolbar--glass

```html
<div class="b-toolbar b-toolbar--glass" role="toolbar" aria-label="Board tools">
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Add task">
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
  </button>
  <button class="b-btn b-btn--ghost b-btn--sm">Filter</button>
  <button class="b-btn b-btn--ghost b-btn--sm">Group</button>
  <hr class="b-divider b-divider--vertical">
  <button class="b-btn b-btn--tinted b-btn--sm">Share board</button>
</div>
```

### App Grid  (https://ui.barua.tz/docs/productivity.html#app-grid)
The iOS home screen: squircle icons with their names beneath, in an auto-filling grid. .is-soon dims an unreleased tile; __hint carries a quiet second line.
Classes: b-app-grid b-app-tile b-app-tile__hint b-app-tile__icon b-app-tile__label

```html
<ul class="b-app-grid" style="max-width: 26rem">
  <li><a class="b-app-tile" href="#app-grid">
    <span class="b-app-tile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="4" fill="currentColor" opacity="0.25"/><path d="m4 7 8 6 8-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <span class="b-app-tile__label">Mail</span>
  </a></li>
  <li><a class="b-app-tile" href="#app-grid">
    <span class="b-app-tile__icon" style="background: linear-gradient(135deg, var(--b-color-teal), var(--b-color-cyan))"><svg width="22" height="22" viewBox="0 0 20 20" fill="none"><path d="M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
    <span class="b-app-tile__label">Drive</span>
  </a></li>
  <li><a class="b-app-tile" href="#app-grid">
    <span class="b-app-tile__icon" style="background: linear-gradient(135deg, var(--b-color-indigo), var(--b-color-purple))"><svg width="22" height="22" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 10h13M10 3.5c2 2 2 11 0 13-2-2-2-11 0-13Z" stroke="currentColor" stroke-width="1.3"/></svg></span>
    <span class="b-app-tile__la
```

### Ornament  (https://ui.barua.tz/docs/productivity.html#ornament)
visionOS's ornament, translated: a floating glass control cluster hanging half-off a panel's edge. Wrap the panel in .b-ornament-host ; the ornament names its edge — --bottom , --top , --start , --end .
Classes: b-btn b-btn--ghost b-btn--sm b-card b-card__body b-card__subtitle b-card__title b-icon-btn b-ornament b-ornament--bottom b-ornament-host

```html
<div class="b-ornament-host b-card" style="width: min(26rem, 100%)">
  <div class="b-card__body" style="min-height: 9rem">
    <div class="b-card__title">Q3 research.pdf</div>
    <div class="b-card__subtitle">Page 4 of 18</div>
  </div>
  <div class="b-ornament b-ornament--bottom" role="toolbar" aria-label="Document controls">
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Previous page">‹</button>
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Zoom out">−</button>
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Zoom in">+</button>
    <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Next page">›</button>
  </div>
</div>
```

### Status Bar  (https://ui.barua.tz/docs/productivity.html#status-bar)
.b-statusbar is the thin strip along the bottom of a shell: tabular-numeral __item entries with a hairline top border. Pair it with a .b-status dot for connection state and a .b-spacer to split leading from trailing items.
Classes: b-spacer b-status b-status--online b-statusbar b-statusbar__item

```html
<div class="b-statusbar">
  <span class="b-statusbar__item">
    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><circle cx="4.5" cy="3.5" r="1.6" stroke="currentColor" stroke-width="1.3"/><circle cx="4.5" cy="12.5" r="1.6" stroke="currentColor" stroke-width="1.3"/><circle cx="11.5" cy="4.5" r="1.6" stroke="currentColor" stroke-width="1.3"/><path d="M4.5 5.1v5.8M11.5 6.1a5 5 0 0 1-5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
    main
  </span>
  <span class="b-statusbar__item"><span class="b-status b-status--online">Synced</span></span>
  <span class="b-spacer"></span>
  <span class="b-statusbar__item">Ln 42, Col 7</span>
  <span class="b-statusbar__item">UTF-8</span>
</div>
```

### Control Center  (https://ui.barua.tz/docs/productivity.html#control-center)
The iOS-style glass tile grid — .b-cc — for quick settings, connectivity, and media. Tiles span the 4-column grid ( --2x2 , --2x1 , --4x1 , --round ); toggle pills flip with .b-cc__icon.is-on , and the chunky __range sliders hide a real <input type="range"> for keyboard and screen-reader access. Best floated over wallpaper-grade color.
Classes: b-cc b-cc__art b-cc__icon b-cc__label b-cc__meta b-cc__pill b-cc__range b-cc__range-icon b-cc__range-icon--end b-cc__range-icon--start b-cc__status b-cc__tile b-cc__tile--2x1 b-cc__tile--2x2 b-cc__tile--4x1 b-cc__tile--round b-cc__transport

```html
<div class="b-cc">
  <div class="b-cc__tile b-cc__tile--2x2">
    <div class="b-cc__pill">
      <button class="b-cc__icon is-on" aria-pressed="true" aria-label="Wi-Fi on">
        <svg viewBox="0 0 20 20" fill="none"><path d="M2.5 8a11 11 0 0 1 15 0M5 11a7.3 7.3 0 0 1 10 0M7.6 13.8a3.6 3.6 0 0 1 4.8 0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="16.2" r="1.1" fill="currentColor"/></svg>
      </button>
      <span class="b-cc__meta"><span class="b-cc__label">Wi-Fi</span><br><span class="b-cc__status">Ghala</span></span>
    </div>
    <div class="b-cc__pill">
      <button class="b-cc__icon is-on" aria-pressed="true" aria-label="Bluetooth on">
        <svg viewBox="0 0 20 20" fill="none"><path d="M6 6.5 14 13l-4 3.5v-13L14 7l-8 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      <span class="b-cc__meta"><span class="b-cc__label">Bluetooth</span><br><span class="b-cc__status">On</span></span>
    </div>
    <div class="b-cc__pill">
      <button class="b-cc__icon" aria-pressed="false" aria-label="AirDrop">
        <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="2" stroke="currentColor" stroke-width="1.5"/><path d="M6.5 13.5a5 5 0 0 1 0-7M13.5 6.5a5 5 0 0 1 0 7M4.4 15.6a8 8 0 0 1 0-11.2M15.6 4.4a8 8 0 0 1 0 11.2" stroke="currentColor" stroke-width="1.4"
```

### Liquid Glass Objects  (https://ui.barua.tz/docs/productivity.html#liquid-glass)
Decorative-grade glass primitives in the Apple Developer "liquid" style — a refractive .b-lens button, a .b-liquid-toggle with a colored core inside a glass capsule, and a .b-liquid-bar gradient slider with a glass cap. Drawn entirely in CSS: layered radial highlights, inset rims, and backdrop blur.
Classes: b-lens b-liquid-bar b-liquid-bar--accent b-liquid-capsule b-liquid-toggle

```html
<button class="b-liquid-toggle" aria-pressed="true" aria-label="Liquid toggle"
  onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed')==='true'?'false':'true')"></button>
<button class="b-lens" aria-label="Add">
  <svg viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="b-liquid-bar" style="--v: 64%" role="img" aria-label="Gradient level indicator at 64%"><i></i><b></b></div>
<span class="b-liquid-capsule" aria-hidden="true" style="--b-capsule-w: 8rem; --b-capsule-h: 4rem"></span>
<div class="b-liquid-bar b-liquid-bar--accent" style="--v: 46%; --b-liquid-bar-w: 11rem" role="img" aria-label="Level indicator at 46%"><i></i></div>
```


## Interaction — states, drag and drop, shortcuts

### State Conventions  (https://ui.barua.tz/docs/interaction.html#state-conventions)
Barua uses one small vocabulary everywhere. Native pseudo-classes do the work when the browser can ( :hover , :active , :disabled , :focus-visible ); a matching is-* class exists for every state your JavaScript needs to drive itself.
Classes: b-btn b-table b-table-wrap

```html
<button class="b-btn">Default</button>
<button class="b-btn is-pressed">Pressed</button>
<button class="b-btn is-active">Active</button>
<button class="b-btn is-dragging" draggable="true">Dragging</button>
<button class="b-btn" disabled>Disabled</button>
<button class="b-btn is-disabled" aria-disabled="true">Disabled (class)</button>
```

### Hover State  (https://ui.barua.tz/docs/interaction.html#hover-state)
Hover is an invitation, not information: the surface tint deepens one step ( --b-fill-quaternary → --b-fill-tertiary ) and interactive cards lift 2px. Treat it as enhancement only — touch screens never fire it, so nothing may exist solely behind a hover.
Variants: Cards, List items, Table rows
Classes: b-badge b-badge--accent b-badge--success b-card b-card--interactive b-card__body b-card__subtitle b-card__title b-grid b-grid--2 b-list b-list-item b-list-item--interactive b-list-item__chevron b-list-item__content b-list-item__subtitle b-list-item__title b-table b-table--hover b-table-wrap

```html
<div class="b-grid b-grid--2">
  <div class="b-card b-card--interactive">
    <div class="b-card__body">
      <div class="b-card__title">Weekly digest</div>
      <div class="b-card__subtitle">Hover me — I lift and gain elevation</div>
    </div>
  </div>
  <div class="b-card b-card--interactive">
    <div class="b-card__body">
      <div class="b-card__title">Team inbox</div>
      <div class="b-card__subtitle">.b-card--interactive opts a card in</div>
    </div>
  </div>
</div>
```

### Pressed State  (https://ui.barua.tz/docs/interaction.html#pressed-state)
Buttons compress to scale: 0.97 on :active — a 100ms ( --b-duration-instant ) squeeze that makes every press feel physical, the way Apple's controls do. When state is driven from JavaScript instead of the pointer — keyboard activation, pointer capture on a custom control — apply .is-pressed to get the identical physics.
Variants: Touch Targets
Classes: b-btn b-btn--primary b-btn--tinted

```html
<button class="b-btn b-btn--primary">Press and hold</button>
<button class="b-btn">Press and hold</button>
<button class="b-btn b-btn--tinted is-pressed">.is-pressed</button>
```

### Active & Selected State  (https://ui.barua.tz/docs/interaction.html#active-selected-state)
.is-active means "you are here" or "this is on" — navigation items, segmented controls, toggles. .is-selected means "this is chosen and something will happen to it" — list rows, chips, cards in a picker. Both tint with --b-color-accent-soft so the whole system re-themes from one accent token.
Classes: b-card b-card--flat b-card__body b-card__subtitle b-card__title b-chip b-grid b-grid--3 b-list b-list-item b-list-item--interactive b-list-item__content b-list-item__title b-list-item__trailing b-segmented b-segmented__item b-selectable b-sidebar b-sidebar__item

```html
<div class="b-segmented">
  <button class="b-segmented__item is-active">List</button>
  <button class="b-segmented__item">Board</button>
  <button class="b-segmented__item">Timeline</button>
</div>
<button class="b-chip is-selected">Design</button>
<button class="b-chip">Engineering</button>
<button class="b-chip">Marketing</button>
```

### Disabled State  (https://ui.barua.tz/docs/interaction.html#disabled-state)
Disabled controls fade to --b-opacity-disabled (0.4) and swap to a not-allowed cursor. The native disabled attribute is the default; the .is-disabled class produces the same look on elements that can't take the attribute (links, custom widgets).
Classes: b-btn b-btn--primary b-checkbox b-input b-select b-switch

```html
<button class="b-btn b-btn--primary" disabled>Send</button>
<button class="b-btn is-disabled" aria-disabled="true">Archive</button>
<input class="b-input" style="width: 11rem;" placeholder="Recipient" disabled>
<!-- barua-lint disable native-select: showing the disabled state of a platform control -->
<select class="b-select" style="width: 9rem;" disabled>
  <option>Read only</option>
</select>
<label class="b-switch"><input type="checkbox" checked disabled> Auto-reply</label>
<label class="b-checkbox"><input type="checkbox" disabled> Cc me</label>
```

### Dragging State  (https://ui.barua.tz/docs/interaction.html#dragging-state)
Mid-drag, the grabbed element takes .is-dragging : opacity drops to 0.55 and the cursor switches to grabbing — on .b-task cards it also tilts 2° for a picked-up feel. Leave a .b-drag-ghost copy (50% opacity) at the origin so the layout doesn't jump. Anything with draggable="true" shows a grab cursor at rest.
Classes: b-drag-ghost b-task b-task__meta b-task__title

```html
<div class="b-task" draggable="true" style="width: 12.5rem;">
  <div class="b-task__title">At rest</div>
  <div class="b-task__meta">cursor: grab</div>
</div>
<div class="b-task b-drag-ghost" style="width: 12.5rem;">
  <div class="b-task__title">Origin ghost</div>
  <div class="b-task__meta">.b-drag-ghost</div>
</div>
<div class="b-task is-dragging" style="width: 12.5rem;">
  <div class="b-task__title">Being dragged</div>
  <div class="b-task__meta">.is-dragging</div>
</div>
```

### Drag & Drop  (https://ui.barua.tz/docs/interaction.html#drag-and-drop)
The full pattern composes four pieces: .b-dropzone around any list (its 2px dashed border is transparent until needed), .is-dropover when a drag hovers a valid target (dashed accent border + accent-soft wash), .b-drop-indicator as the insertion line between items, and .is-dragging on the grabbed card. The HTML5 dragstart / dragover / drop wiring — and toggling these classes — is app-side JavaScript; Barua supplies the states, not the engine.
Variants: Drag handle & reorder
Classes: b-drag-handle b-drop-indicator b-dropzone b-gap-2 b-grid b-grid--2 b-list b-list-item b-list-item__content b-list-item__title b-list-item__trailing b-overline b-stack b-task b-task__meta b-task__title

```html
<div class="b-grid b-grid--2">
  <div class="b-dropzone" style="padding: var(--b-space-3);">
    <div class="b-stack b-gap-2">
      <div class="b-overline">Backlog</div>
      <div class="b-task" draggable="true">
        <div class="b-task__title">Refactor tokens</div>
        <div class="b-task__meta">BAR-201</div>
      </div>
      <div class="b-task is-dragging" draggable="true">
        <div class="b-task__title">Ship dark mode</div>
        <div class="b-task__meta">BAR-202</div>
      </div>
    </div>
  </div>
  <div class="b-dropzone is-dropover" style="padding: var(--b-space-3);">
    <div class="b-stack b-gap-2">
      <div class="b-overline">This week</div>
      <div class="b-task" draggable="true">
        <div class="b-task__title">Draft changelog</div>
        <div class="b-task__meta">BAR-198</div>
      </div>
      <div class="b-drop-indicator" aria-hidden="true"></div>
      <div class="b-task" draggable="true">
        <div class="b-task__title">QA pass</div>
        <div class="b-task__meta">BAR-199</div>
      </div>
    </div>
  </div>
</div>
```

### Resizable Handle  (https://ui.barua.tz/docs/interaction.html#resizable-handle)
Place a .b-resize-handle between two .b-panel children of a .b-split . The 9px grab strip renders as a hairline; on hover — or with .is-active while dragging — it thickens into an accent bar. The pointer-tracking that actually resizes the panels is app-side JavaScript.
Classes: b-footnote b-overline b-panel b-resizable b-resize-handle b-split b-text-secondary

```html
<div class="b-split" style="height: 9rem;">
  <div class="b-panel" style="flex: 1; padding: var(--b-space-4);">
    <div class="b-overline">Folders</div>
  </div>
  <div class="b-resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize panels" tabindex="0"></div>
  <div class="b-panel" style="flex: 2; padding: var(--b-space-4);">
    <div class="b-overline">Messages</div>
  </div>
</div>
```

### Selection & Multi-Selection  (https://ui.barua.tz/docs/interaction.html#selection-multi-selection)
Multi-selection layers three pieces: .b-selectable items (with .is-selected ), a .b-selection-rect marquee drawn while the pointer rubber-bands across the surface, and a .b-selection-count readout. The rect is normally position: fixed and sized from pointer coordinates — it's frozen here with inline positioning so you can see it.
Classes: b-btn b-btn--ghost b-btn--sm b-card b-card--flat b-card__body b-card__subtitle b-card__title b-grid b-grid--3 b-hstack b-relative b-selectable b-selection-count b-selection-rect

```html
<div class="b-relative">
  <div class="b-grid b-grid--3">
    <div class="b-card b-card--flat b-selectable is-selected">
      <div class="b-card__body">
        <div class="b-card__title">photo-01.heic ✓</div>
        <div class="b-card__subtitle">2.4 MB</div>
      </div>
    </div>
    <div class="b-card b-card--flat b-selectable is-selected">
      <div class="b-card__body">
        <div class="b-card__title">photo-02.heic ✓</div>
        <div class="b-card__subtitle">3.1 MB</div>
      </div>
    </div>
    <div class="b-card b-card--flat b-selectable">
      <div class="b-card__body">
        <div class="b-card__title">notes.txt</div>
        <div class="b-card__subtitle">4 KB</div>
      </div>
    </div>
  </div>
  <div class="b-selection-rect" style="position: absolute; left: 4%; top: 22%; width: 58%; height: 68%;"></div>
</div>
<div class="b-hstack" style="margin-block-start: var(--b-space-4);">
  <span class="b-selection-count">2 selected</span>
  <button class="b-btn b-btn--sm">Move</button>
  <button class="b-btn b-btn--sm b-btn--ghost">Deselect</button>
</div>
```

### Keyboard Shortcut  (https://ui.barua.tz/docs/interaction.html#keyboard-shortcut)
Shortcuts render with the native <kbd> element — or .b-kbd on a span — styled as a small key cap with a weighted bottom edge. Show them inline in help text, in menus and in the command palette so they're learnable, not secret.
Classes: b-kbd b-menu b-menu__item b-menu__separator b-menu__shortcut b-table b-table-wrap

```html
<span>Open the palette with <kbd>⌘K</kbd>, save with <kbd>⌘S</kbd>, close with <kbd>esc</kbd> or press <span class="b-kbd">⇧⌘P</span> for actions.</span>
```

### Focus Ring  (https://ui.barua.tz/docs/interaction.html#focus-ring)
Every focusable element shares one ring: --b-focus-ring , a 3.5px accent glow at 30% opacity. It attaches via :focus-visible , so it appears for keyboard and assistive tech but not for mouse clicks — press Tab below to walk it across four different control types. Inputs pair the ring with an accent border. Custom focusable elements can opt in with the .b-focus-ring class.
Classes: b-btn b-checkbox b-input b-link

```html
<button class="b-btn">Tab to me</button>
<input class="b-input" style="width: 11rem;" placeholder="Then me">
<a class="b-link" href="#focus-ring">Then this link</a>
<label class="b-checkbox"><input type="checkbox"> And this</label>
```

### Contextual Actions  (https://ui.barua.tz/docs/interaction.html#contextual-actions)
Row-level actions stay hidden until the row is hovered, keeping dense lists calm. Inside a .b-datagrid this is automatic — .b-row-actions cells flip from visibility: hidden to visible on tr:hover . The list below recreates both moments statically: the first row is at rest, the second is shown as if hovered.
Classes: b-btn b-btn--ghost b-btn--sm b-icon-btn b-list b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-row-actions

```html
<ul class="b-list">
  <li class="b-list-item">
    <div class="b-list-item__content">
      <div class="b-list-item__title">Quarterly-report.pdf</div>
      <div class="b-list-item__subtitle">Edited 2 hours ago</div>
    </div>
    <span class="b-row-actions" style="visibility: hidden; display: inline-flex; gap: var(--b-space-1);">
      <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Star">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      </button>
      <button class="b-btn b-icon-btn b-btn--ghost b-btn--sm" aria-label="Delete">
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 6h12M8 6V4.5A1.5 1.5 0 0 1 9.5 3h1A1.5 1.5 0 0 1 12 4.5V6m2.5 0-.7 9.1A1.5 1.5 0 0 1 12.3 16H7.7a1.5 1.5 0 0 1-1.5-.9L5.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
      </button>
    </span>
  </li>
  <li class="b-list-item" style="background: var(--b-fill-quaternary);">
    <div class="b-list-item__content">
      <div class="b-list-item__title">Launch-plan.key</div>
      <div class="b-list-item__subtitle">Edited yesterday — hovered, actions revealed</div>
    </div>
    <span class="b-row-actions" style="display: inline-flex; gap: var(--b-space-1)
```

### Scroll reveal  (https://ui.barua.tz/docs/interaction.html#scroll-reveal)
SwiftUI has scrollTransition ; the web now has a scroll timeline. .b-reveal ties an entrance animation to the element's own position in the scrollport, so the browser drives it — no observer, no scroll listener, nothing on the main thread.
Classes: b-btn b-btn--sm b-btn--tinted b-caption b-card b-card__body b-code b-code__header b-footnote b-gap-3 b-reveal b-reveal--end b-reveal--fade b-reveal--scale b-reveal--start b-stack b-text-secondary

```html
<div class="docs-replay">
  <button class="b-btn b-btn--tinted b-btn--sm" data-docs-replay="#reveal-box">Play</button>
  <span class="b-caption b-text-secondary">or scroll inside the box</span>
</div>
<div class="docs-scrollbox" id="reveal-box">
  <div class="docs-scrollbox__spacer">scroll down ↓</div>
  <div class="b-stack b-gap-3">
    <article class="b-card b-reveal"><div class="b-card__body">Rises as it enters</div></article>
    <article class="b-card b-reveal b-reveal--fade"><div class="b-card__body"><code>--fade</code></div></article>
    <article class="b-card b-reveal b-reveal--scale"><div class="b-card__body"><code>--scale</code></div></article>
    <article class="b-card b-reveal b-reveal--start"><div class="b-card__body"><code>--start</code>, from the leading edge</div></article>
    <article class="b-card b-reveal b-reveal--end"><div class="b-card__body"><code>--end</code>, from the trailing edge</div></article>
  </div>
  <div class="docs-scrollbox__spacer">scroll back up to replay ↑</div>
</div>
```

### Context menu  (https://ui.barua.tz/docs/interaction.html#context-menu)
SwiftUI's contextMenu , on the platform's own event. Point any element at a .b-menu and a right-click — or a long press, which the browser reports as the same event — opens it where the pointer is.
Classes: b-list b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-menu b-menu__item b-menu__item--danger b-menu__shortcut

```html
<div class="b-list">
  <div class="b-list-item" data-b-contextmenu="#demo-context">
    <div class="b-list-item__content">
      <div class="b-list-item__title">Q3 invoice.pdf</div>
      <div class="b-list-item__subtitle">Right-click, or long-press on a touch screen</div>
    </div>
  </div>
</div>
<ul class="b-menu" id="demo-context" hidden>
  <li><button class="b-menu__item">Open<span class="b-menu__shortcut">⏎</span></button></li>
  <li><button class="b-menu__item">Rename<span class="b-menu__shortcut">⌘R</span></button></li>
  <li><button class="b-menu__item">Duplicate<span class="b-menu__shortcut">⌘D</span></button></li>
  <li><button class="b-menu__item b-menu__item--danger">Delete</button></li>
</ul>
```

### Rolling numbers  (https://ui.barua.tz/docs/interaction.html#rolling-numbers)
SwiftUI's contentTransition(.numericText()) . A figure that changes should travel to its new value rather than blink to it — on a dashboard the movement is what tells you something happened at all.
Classes: b-btn b-btn--sm b-btn--tinted b-code b-code__header b-gap-6 b-hstack b-stack--wrap b-stat b-stat__label b-stat__value

```html
<div class="docs-replay">
  <button class="b-btn b-btn--tinted b-btn--sm" data-docs-replay="#count-demo">Play</button>
</div>
<div class="b-hstack b-gap-6 b-stack--wrap">
  <div class="b-stat">
    <span class="b-stat__label">Messages sent</span>
    <span class="b-stat__value" data-b-count="12480" data-docs-from="0">0</span>
  </div>
  <div class="b-stat">
    <span class="b-stat__label">Outstanding</span>
    <span class="b-stat__value" data-b-count="4.2" data-docs-from="TZS 0.0M">TZS 0.0M</span>
  </div>
</div>
```

### Scroll geometry  (https://ui.barua.tz/docs/interaction.html#scroll-geometry)
SwiftUI's onScrollGeometryChange . A scroll container carrying data-b-scroll-geometry writes its own position onto itself — --b-scroll-y , --b-scroll-x and --b-scroll-progress (0 to 1) — carries .is-scrolled once it has moved, and dispatches b:scroll with the numbers. Put it on <html> for the page. Anything that reads the properties is then pure CSS: the progress line below is a .b-scroll-progress whose width is the distance scrolled, and the title condenses on the browser's own scroll timeline with .b-scroll-condense .
Classes: b-caption b-card b-card__body b-footnote b-gap-3 b-large-title b-scroll-condense b-scroll-progress b-stack b-tabular-nums b-text-secondary

```html
<div class="docs-scrollbox" data-b-scroll-geometry id="geometry-box">
  <div class="b-scroll-progress" aria-hidden="true"></div>
  <div class="b-stack b-gap-3">
    <h3 class="b-large-title b-scroll-condense">Inbox</h3>
    <p class="b-caption b-text-secondary">scrolled <output data-docs-geometry="#geometry-box" class="b-tabular-nums">0%</output></p>
    <article class="b-card"><div class="b-card__body">The line at the top is the distance scrolled.</div></article>
    <article class="b-card"><div class="b-card__body">The title above shrinks as the box moves.</div></article>
    <article class="b-card"><div class="b-card__body">Nothing here listens in JavaScript except the percentage.</div></article>
    <article class="b-card"><div class="b-card__body">The container carries <code>.is-scrolled</code> now.</div></article>
    <article class="b-card"><div class="b-card__body">And <code>--b-scroll-progress</code> is 1 at the end.</div></article>
    <article class="b-card"><div class="b-card__body">Keep going.</div></article>
    <article class="b-card"><div class="b-card__body">Nearly there.</div></article>
  </div>
</div>
```

### Scroll visibility  (https://ui.barua.tz/docs/interaction.html#scroll-visibility)
SwiftUI's onScrollVisibilityChange(threshold:) . An element carrying data-b-visible — optionally the fraction of itself that counts, data-b-visible="0.8" — gains .is-visible as it crosses that much into the viewport, loses it on the way out, and dispatches b:visible with { visible, ratio } . It is also the entrance for browsers without a view timeline: .b-reveal with data-b-visible reveals on the class where it cannot on the timeline.
Classes: b-badge b-card b-card__body b-footnote b-gap-2 b-gap-3 b-hstack b-reveal b-stack b-text-secondary

```html
<div class="docs-scrollbox" id="visible-box">
  <div class="docs-scrollbox__spacer">scroll down ↓</div>
  <div class="b-stack b-gap-3">
    <article class="b-card b-reveal" data-b-visible="0.5"><div class="b-card__body b-hstack b-gap-2">Half in view <span class="b-badge docs-visible-badge">off screen</span></div></article>
    <article class="b-card b-reveal" data-b-visible="0.9"><div class="b-card__body b-hstack b-gap-2">Almost all in view <span class="b-badge docs-visible-badge">off screen</span></div></article>
    <article class="b-card b-reveal" data-b-visible="0.5"><div class="b-card__body b-hstack b-gap-2">Half in view <span class="b-badge docs-visible-badge">off screen</span></div></article>
  </div>
  <div class="docs-scrollbox__spacer">scroll back up ↑</div>
</div>
```

### Scroll position  (https://ui.barua.tz/docs/interaction.html#scroll-position)
SwiftUI's scrollPosition(id:) . A snapping container with data-b-snap names the child in view: data-b-snap-current on itself, .is-current on the child, .is-active on the matching dot in a data-b-snap-dots="#id" strip, and b:snapchange with { id, index, element } . The browser's own scrollsnapchange event drives it where that exists; elsewhere the nearest child after the scroll settles. Barua.snap.to(box, idOrIndex) goes there.
Classes: b-caption b-card b-card-rail b-card__body b-carousel__dots b-gap-1 b-headline b-stack b-tabular-nums b-text-secondary

```html
<div class="b-card-rail" data-b-snap id="snap-rail" style="grid-auto-columns: 70%">
  <article class="b-card" id="snap-dar"><div class="b-card__body b-stack b-gap-1"><span class="b-headline">Dar es Salaam</span><span class="b-caption b-text-secondary">id="snap-dar"</span></div></article>
  <article class="b-card" id="snap-arusha"><div class="b-card__body b-stack b-gap-1"><span class="b-headline">Arusha</span><span class="b-caption b-text-secondary">id="snap-arusha"</span></div></article>
  <article class="b-card" id="snap-zanzibar"><div class="b-card__body b-stack b-gap-1"><span class="b-headline">Zanzibar</span><span class="b-caption b-text-secondary">id="snap-zanzibar"</span></div></article>
  <article class="b-card" id="snap-mwanza"><div class="b-card__body b-stack b-gap-1"><span class="b-headline">Mwanza</span><span class="b-caption b-text-secondary">id="snap-mwanza"</span></div></article>
</div>
<div class="b-carousel__dots" data-b-snap-dots="#snap-rail">
  <button class="is-active" aria-label="Dar es Salaam"></button>
  <button aria-label="Arusha"></button>
  <button aria-label="Zanzibar"></button>
  <button aria-label="Mwanza"></button>
</div>
<p class="b-caption b-text-secondary">in view: <output data-docs-snap="#snap-rail" class="b-tabular-nums">snap-dar</output></p>
```

### Haptics  (https://ui.barua.tz/docs/interaction.html#haptics)
SwiftUI's sensoryFeedback . data-b-haptic on anything clickable — selection , impact , success , warning , error — plays a vibration on click; Barua.haptic(kind) does the same from code and returns whether anything could be felt. The web is honest about its limits here: Android phones vibrate; an iPhone has no vibration API, but Safari plays the system haptic when a switch toggles, so one is toggled off screen; a desktop feels nothing and says nothing.
Classes: b-btn b-btn--danger-tinted b-btn--outline b-btn--tinted

```html
<button class="b-btn" data-b-haptic="selection">Selection</button>
<button class="b-btn" data-b-haptic="impact">Impact</button>
<button class="b-btn b-btn--tinted" data-b-haptic="success">Success</button>
<button class="b-btn b-btn--outline" data-b-haptic="warning">Warning</button>
<button class="b-btn b-btn--danger-tinted" data-b-haptic="error">Error</button>
```

### Persistence  (https://ui.barua.tz/docs/interaction.html#persistence)
SwiftUI's customizationID . data-b-persist="key" keeps a piece of interface state across reloads with no code: a <details> stays open or shut, a segmented control or tab strip keeps its choice, a scroll area keeps its place, a field keeps its value. Change the two below, reload the page, and they are as you left them. For anything else, Barua.persist.get(key) , set(key, value) and clear(key) hold JSON under the same keys — which the React kit's usePersistedState shares, so the two can hand over.
Classes: b-disclosure b-disclosure__body b-segmented b-segmented__item

```html
<div class="b-segmented" data-b-persist="docs.view">
  <button class="b-segmented__item is-active">List</button>
  <button class="b-segmented__item">Board</button>
  <button class="b-segmented__item">Timeline</button>
</div>
<details class="b-disclosure" data-b-persist="docs.details">
  <summary>Delivery details</summary>
  <div class="b-disclosure__body">Open this, reload, and it is still open.</div>
</details>
```


## Mobile — headers, tab bars, sheets, safe areas

### Mobile Header  (https://ui.barua.tz/docs/mobile.html#mobile-header)
.b-mobile-header is the sticky glass chrome at the top of a mobile view: a three-column __bar with a .b-back-btn at the start, a centered __title and an __action--end slot. One note on the demos on this page: mobile chrome is normally position: fixed or sticky , so each demo sits inside a phone-width frame and the component gets an inline position: static override to render inside it — drop the override in a real app.
Variants: Large title
Classes: b-back-btn b-btn b-btn--ghost b-icon-btn b-mobile-header b-mobile-header__action--end b-mobile-header__action--start b-mobile-header__bar b-mobile-header__large-title b-mobile-header__title

```html
<header class="b-mobile-header" style="position: static">
  <div class="b-mobile-header__bar">
    <button class="b-back-btn b-mobile-header__action--start">Inbox</button>
    <div class="b-mobile-header__title">Message</div>
    <button class="b-btn b-icon-btn b-btn--ghost b-mobile-header__action--end" aria-label="Reply">
      <svg viewBox="0 0 20 20" fill="none"><path d="M8 5 3.5 9.5 8 14M3.5 9.5H12a4.5 4.5 0 0 1 4.5 4.5V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
  </div>
</header>
<div style="height: 4.5rem"></div>
```

### Mobile Navigation  (https://ui.barua.tz/docs/mobile.html#mobile-navigation)
Mobile navigation is a pattern, not one component. Follow the iOS conventions: the back button sits at the start of the header, is labelled with the previous screen's title (never just "Back"), and the current screen's title stays centered. Push deeper views onto a stack; switch top-level sections with the Bottom Tab Bar below. For overflow destinations, use the navigation drawer from the Navigation page, or the Mobile Menu as a full-screen list.

### Bottom Tab Bar  (https://ui.barua.tz/docs/mobile.html#bottom-tab-bar)
.b-bottomnav fixes a glass tab bar to the bottom edge with safe-area padding built in. Use three to five __item s, mark the current one with .is-active , and attach a .b-badge--count to an icon for unread counts.
Classes: b-badge b-badge--count b-bottomnav b-bottomnav__item

```html
<div style="height: 4.5rem"></div>
<nav class="b-bottomnav" style="position: static" aria-label="Primary">
  <a class="b-bottomnav__item" href="#bottom-tab-bar">
    <svg viewBox="0 0 20 20" fill="none"><path d="M4 9.5 10 4l6 5.5V16a1 1 0 0 1-1 1h-3v-4H8v4H5a1 1 0 0 1-1-1V9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
    Home
  </a>
  <a class="b-bottomnav__item is-active" href="#bottom-tab-bar" aria-current="page">
    <span style="position: relative; display: inline-flex">
      <svg viewBox="0 0 20 20" fill="none"><rect x="3" y="5" width="14" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4.5 7.5 5.5 4 5.5-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span class="b-badge b-badge--count" style="position: absolute; top: -0.4rem; inset-inline-end: -0.7rem">3</span>
    </span>
    Inbox
  </a>
  <a class="b-bottomnav__item" href="#bottom-tab-bar">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5" stroke="currentColor" stroke-width="1.5"/><path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    Search
  </a>
  <a class="b-bottomnav__item" href="#bottom-tab-bar">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 16.5a5.5 5.5 0 0
```

### Bottom Sheet  (https://ui.barua.tz/docs/mobile.html#bottom-sheet)
The full .b-bottom-sheet — a <dialog> that springs up from the bottom edge with a scrim — is documented on the Overlays page. Shown here statically inside the frame: a __grabber pill on top of a __body list of actions.
Classes: b-bottom-sheet b-bottom-sheet__body b-bottom-sheet__grabber b-list b-list--plain b-list-item b-list-item--interactive b-list-item__content b-list-item__leading b-list-item__title

```html
<div style="height: 3rem"></div>
<dialog class="b-bottom-sheet" open style="position: static; width: 100%">
  <div class="b-bottom-sheet__grabber"></div>
  <div class="b-bottom-sheet__body">
    <ul class="b-list b-list--plain">
      <li class="b-list-item b-list-item--interactive">
        <span class="b-list-item__leading">
          <svg viewBox="0 0 20 20" fill="none"><path d="M8 5 3.5 9.5 8 14M3.5 9.5H12a4.5 4.5 0 0 1 4.5 4.5V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
        <div class="b-list-item__content"><div class="b-list-item__title">Reply</div></div>
      </li>
      <li class="b-list-item b-list-item--interactive">
        <span class="b-list-item__leading">
          <svg viewBox="0 0 20 20" fill="none"><path d="M12 5l4.5 4.5L12 14M16.5 9.5H8A4.5 4.5 0 0 0 3.5 14V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
        <div class="b-list-item__content"><div class="b-list-item__title">Forward</div></div>
      </li>
      <li class="b-list-item b-list-item--interactive">
        <span class="b-list-item__leading">
          <svg viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a1.5 1.5 0 0 0 1.5-1.5V8M8.5 11h3" str
```

### Mobile Menu  (https://ui.barua.tz/docs/mobile.html#mobile-menu)
.b-mobile-menu is a full-width list of big, thumb-sized rows — each at least the 44px touch target tall. Use it inside a drawer or a full-screen sheet; mark the current destination with .is-active .
Classes: b-mobile-menu

```html
<ul class="b-mobile-menu">
  <li>
    <a class="is-active" href="#mobile-menu" aria-current="page">
      <svg viewBox="0 0 20 20" fill="none" width="20" height="20"><rect x="3" y="5" width="14" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4.5 7.5 5.5 4 5.5-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Inbox
    </a>
  </li>
  <li>
    <a href="#mobile-menu">
      <svg viewBox="0 0 20 20" fill="none" width="20" height="20"><path d="m10 3 2.1 4.4 4.9.6-3.6 3.3.9 4.7L10 13.7 5.7 16l.9-4.7L3 8l4.9-.6L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Starred
    </a>
  </li>
  <li>
    <a href="#mobile-menu">
      <svg viewBox="0 0 20 20" fill="none" width="20" height="20"><path d="M6 3h6l3 3v11H6V3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 3v3h3" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      Drafts
    </a>
  </li>
  <li>
    <a href="#mobile-menu">
      <svg viewBox="0 0 20 20" fill="none" width="20" height="20"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a1.5 1.5 0 0 0 1.5-1.5V8M8.5 11h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
      Archive
    </a>
  </li>
  <li>
    <a
```

### Mobile Toolbar  (https://ui.barua.tz/docs/mobile.html#mobile-toolbar)
.b-mobile-toolbar is the bottom action bar for the current screen — glass, hairline on top, safe-area padding below, and icon buttons bumped up to the large control size for easy reach.
Classes: b-btn b-btn--ghost b-icon-btn b-mobile-toolbar

```html
</div>
<div class="b-mobile-toolbar" style="position: static" role="toolbar" aria-label="Message actions">
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Reply">
    <svg viewBox="0 0 20 20" fill="none"><path d="M8 5 3.5 9.5 8 14M3.5 9.5H12a4.5 4.5 0 0 1 4.5 4.5V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Archive">
    <svg viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M4.5 8v6.5A1.5 1.5 0 0 0 6 16h8a1.5 1.5 0 0 0 1.5-1.5V8M8.5 11h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Flag">
    <svg viewBox="0 0 20 20" fill="none"><path d="M5 17V4h9.5l-2 3.5 2 3.5H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Delete">
    <svg viewBox="0 0 20 20" fill="none"><path d="M4 6h12M8 6V4.5A1.5 1.5 0 0 1 9.5 3h1A1.5 1.5 0 0 1 12 4.5V6m2.5 0-.7 9.1A1.5 1.5 0 0 1 12.3 16H7.7a1.5 1.5 0 0 1-1.5-.9L5.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
```

### Swipe Actions  (https://ui.barua.tz/docs/mobile.html#swipe-actions)
.b-swipe is a CSS-only take on the iOS swipe-to-act row: a horizontal scroller with scroll-snap-type: x mandatory . The __content row fills 100% of the width and snaps to the start; the __actions sit just off-screen and snap to the end. Dragging left reveals them, and the scroll snap makes the row rest either fully closed or fully open — try it, the demo below actually scrolls.
Classes: b-avatar b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-swipe b-swipe__actions b-swipe__content

```html
<div class="b-swipe">
  <div class="b-swipe__content b-list-item">
    <span class="b-avatar">AK</span>
    <div class="b-list-item__content">
      <div class="b-list-item__title">Amina Kassim</div>
      <div class="b-list-item__subtitle">Q3 launch review — moved to Thursday, can you make it?</div>
    </div>
  </div>
  <div class="b-swipe__actions">
    <button class="is-flag">
      <svg viewBox="0 0 20 20" fill="none"><path d="M5 17V4h9.5l-2 3.5 2 3.5H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      Flag
    </button>
    <button class="is-danger">
      <svg viewBox="0 0 20 20" fill="none"><path d="M4 6h12M8 6V4.5A1.5 1.5 0 0 1 9.5 3h1A1.5 1.5 0 0 1 12 4.5V6m2.5 0-.7 9.1A1.5 1.5 0 0 1 12.3 16H7.7a1.5 1.5 0 0 1-1.5-.9L5.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
      Delete
    </button>
  </div>
</div>
```

### Pull to Refresh  (https://ui.barua.tz/docs/mobile.html#pull-to-refresh)
.b-ptr is the visual affordance above a list. It sits at height: 0 until your scroll handler adds a state class: .is-pulling springs it open to its full height as the user drags, .is-ready rotates the __arrow 180° to signal "release to refresh", and .is-refreshing swaps the arrow for a spinner while data loads. Shown here frozen in the refreshing state.
Classes: b-avatar b-avatar--sm b-list b-list--plain b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-ptr b-spinner b-spinner--sm

```html
<div class="b-ptr is-refreshing">
  <span class="b-spinner b-spinner--sm"></span>
  Refreshing…
</div>
<ul class="b-list b-list--plain">
  <li class="b-list-item">
    <span class="b-avatar b-avatar--sm">JM</span>
    <div class="b-list-item__content">
      <div class="b-list-item__title">Joseph Mwangi</div>
      <div class="b-list-item__subtitle">Invoice #2214 approved</div>
    </div>
  </li>
  <li class="b-list-item">
    <span class="b-avatar b-avatar--sm">ZH</span>
    <div class="b-list-item__content">
      <div class="b-list-item__title">Zawadi Hassan</div>
      <div class="b-list-item__subtitle">Design tokens are ready for review</div>
    </div>
  </li>
</ul>
```

### Touch Target  (https://ui.barua.tz/docs/mobile.html#touch-target)
Small controls stay small visually but should never be small to a thumb. The .b-touch-target utility overlays an invisible ::after hit area of at least var(--b-touch-target) — 44px — centered on the control, so a compact close button still catches an imprecise tap. The button below renders at its extra-small size; the whole 44×44 area around it is pressable.
Classes: b-badge b-btn b-btn--xs b-icon-btn b-touch-target

```html
<button class="b-btn b-icon-btn b-btn--xs b-touch-target" aria-label="Dismiss">
  <svg viewBox="0 0 20 20" fill="none" width="12" height="12"><path d="m5 5 10 10M15 5 5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
</button>
<span class="b-badge">← 44×44 hit area around a tiny button</span>
```

### Safe Area  (https://ui.barua.tz/docs/mobile.html#safe-area)
On notched and home-indicator phones, the OS reserves the screen edges and reports them as env(safe-area-inset-*) values. Barua's fixed chrome — .b-mobile-header , .b-bottomnav , .b-mobile-toolbar , .b-bottom-sheet — already pads with them. For your own bars, use .b-safe-area (all four edges) or .b-safe-bottom , which pads with max(var(--b-space-3), env(safe-area-inset-bottom)) so it still breathes on squared-off screens.
Classes: b-btn b-btn--ghost b-code b-code__header b-icon-btn b-mobile-toolbar b-safe-bottom

```html
</div>
<div class="b-mobile-toolbar b-safe-bottom" style="position: static" role="toolbar" aria-label="Editor actions">
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Compose">
    <svg viewBox="0 0 20 20" fill="none"><path d="M13.5 3.5 16.5 6.5 7 16H4v-3l9.5-9.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="Search">
    <svg viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="5" stroke="currentColor" stroke-width="1.5"/><path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
  <button class="b-btn b-icon-btn b-btn--ghost" aria-label="More options">
    <svg viewBox="0 0 20 20" fill="currentColor"><circle cx="4.5" cy="10" r="1.4"/><circle cx="10" cy="10" r="1.4"/><circle cx="15.5" cy="10" r="1.4"/></svg>
  </button>
```

### Collapsing Large Title  (https://ui.barua.tz/docs/mobile.html#collapsing-title)
NavigationStack's signature move: the large title shrinks away as content scrolls, and the bar title fades in. Add data-b-collapse to a .b-mobile-header — barua.js watches the nearest scroll parent and toggles .is-collapsed .
Classes: b-footnote b-mobile-header b-mobile-header__bar b-mobile-header__large-title b-mobile-header__title b-subheadline b-text-secondary b-text-tertiary

```html
<header class="b-mobile-header" data-b-collapse style="position: sticky">
  <div class="b-mobile-header__bar">
    <span class="b-mobile-header__title">Inbox</span>
  </div>
  <h1 class="b-mobile-header__large-title">Inbox</h1>
</header>
<div style="padding: var(--b-space-4)">
  <p class="b-subheadline b-text-secondary">Scroll this panel — the large title collapses into the bar.</p>
  <div style="height: 30rem"></div>
  <p class="b-footnote b-text-tertiary">The end.</p>
</div>
```


## Marketing — landing pages: hero, chapters, figures, bento, site footer

### Marketing Nav  (https://ui.barua.tz/docs/marketing.html#marketing-nav)
Quieter than an application’s chrome: a slim sticky bar in the chrome material, links centred, one action at the end. It is .b-marketing-nav rather than .b-topnav because a product page is not an app and should not pretend to be.
Classes: b-btn b-btn--primary b-btn--sm b-marketing-nav b-marketing-nav__brand b-marketing-nav__links

```html
<nav class="b-marketing-nav" style="position: static">
  <a class="b-marketing-nav__brand" href="#marketing-nav">Barua</a>
  <div class="b-marketing-nav__links"><a href="#marketing-nav">Mail</a><a href="#marketing-nav">Domains</a><a href="#marketing-nav">Pricing</a></div>
  <a class="b-btn b-btn--primary b-btn--sm" href="#marketing-nav">Get started</a>
</nav>
```

### Chapter  (https://ui.barua.tz/docs/marketing.html#chapter)
One idea, centred, with room around it. An eyebrow names the subject, the title is capped at twenty characters of measure so it always breaks well, and the lede is one sentence at reading width. .b-chapter--tight halves the vertical room; .b-chapter--start aligns the whole chapter to the reading edge.
Variants: Hero
Classes: b-btn b-btn--lg b-btn--primary b-chapter b-chapter--tight b-chapter__actions b-chapter__eyebrow b-chapter__lede b-chapter__title b-link

```html
<div class="b-chapter b-chapter--tight">
  <p class="b-chapter__eyebrow">Barua Mail</p>
  <h2 class="b-chapter__title">Your business, on your own name.</h2>
  <p class="b-chapter__lede">Professional email on the domain you own — set up in an afternoon, paid for in shillings.</p>
  <div class="b-chapter__actions">
    <a class="b-btn b-btn--primary b-btn--lg" href="#chapter">Start free trial</a>
    <a class="b-link" href="#chapter">See how it works &rsaquo;</a>
  </div>
</div>
```

### Hero furniture  (https://ui.barua.tz/docs/marketing.html#hero-furniture)
The three marks that sit around a headline on almost every product page: the news above it, the credibility under it, and the ground it all stands on. Each is small enough that every team rebuilds it slightly differently, which is exactly why they belong here.
Variants: Announcement, Rating, Logo wall, Tile field
Classes: b-announce b-announce__go b-chapter b-chapter--tight b-chapter__lede b-chapter__title b-has-tiles b-icon b-logo-wall b-logo-wall__logo b-rating b-rating__stars b-tile-field

```html
<a class="b-announce" href="#announce">
  <svg class="b-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 3l1.2 3.3 3.3 1.2-3.3 1.2L10 12 8.8 8.7 5.5 7.5l3.3-1.2L10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="m14.8 11.5.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7.7-1.8Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
  Barua UI 0.6 has shipped
  <span class="b-announce__go" aria-hidden="true">→</span>
</a>
```

### Proof and pointers  (https://ui.barua.tz/docs/marketing.html#proof)
Three shapes a product page reaches for once it has something to show: a row of names too long to stand still, a case study, and a card that sends somebody off to read.
Variants: Marquee, Quote card, Resource card
Classes: b-badge b-btn b-btn--glass b-btn--pill b-grid b-grid--3 b-logo-wall b-logo-wall__logo b-marquee b-marquee__group b-marquee__track b-quote-card b-quote-card__head b-quote-card__name b-quote-card__quote b-quote-card__role b-quote-card__stat b-quote-card__stat-label b-resource-card b-resource-card__body b-resource-card__excerpt b-resource-card__poster b-resource-card__title b-resource-card__type

```html
<div class="b-marquee" aria-label="Partners">
  <div class="b-marquee__track">
    <div class="b-marquee__group b-logo-wall">
      <span class="b-logo-wall__logo">Vodacom</span>
      <span class="b-logo-wall__logo">CRDB</span>
      <span class="b-logo-wall__logo">Serengeti</span>
      <span class="b-logo-wall__logo">Azam</span>
      <span class="b-logo-wall__logo">Precision Air</span>
    </div>
    <div class="b-marquee__group b-logo-wall" aria-hidden="true">
      <span class="b-logo-wall__logo">Vodacom</span>
      <span class="b-logo-wall__logo">CRDB</span>
      <span class="b-logo-wall__logo">Serengeti</span>
      <span class="b-logo-wall__logo">Azam</span>
      <span class="b-logo-wall__logo">Precision Air</span>
    </div>
  </div>
</div>
```

### Figure  (https://ui.barua.tz/docs/marketing.html#figure)
A picture is furniture, so it has a shape: .b-figure__frame clips it to the large radius, lifts it on the elevation scale, and fills any gap with a surface rather than white. .b-figure--bleed lets it run to the edges of the page, which is how a chapter ends when the image is the argument. .b-figure--fade dissolves the bottom of the frame into the page instead of ending it, which is what a product shot under a hero wants: a window into the thing rather than a photograph with an edge. --b-fade-from is where the fade begins.
Classes: b-figure b-figure__caption b-figure__frame

```html
<figure class="b-figure" style="max-width: 26rem">
  <div class="b-figure__frame">
    <img src="../examples/assets/landing-domains.svg" alt="Domain records verifying" width="1200" height="900" loading="lazy">
  </div>
  <figcaption class="b-figure__caption">Every record checked against public resolvers.</figcaption>
</figure>
```

### Feature Row  (https://ui.barua.tz/docs/marketing.html#feature-row)
Picture beside prose, alternating down the page. .b-feature-row--flip swaps the sides so consecutive rows do not march; below md both stack with the picture first. Actions inside a row align with the prose, never centre.
Classes: b-chapter__actions b-chapter__eyebrow b-feature-row b-feature-row__body b-feature-row__title b-figure b-figure__frame b-link

```html
<div class="b-feature-row">
  <figure class="b-figure">
    <div class="b-figure__frame">
      <img src="../examples/assets/landing-mail.svg" alt="Threads and labels" width="1200" height="900" loading="lazy">
    </div>
  </figure>
  <div>
    <p class="b-chapter__eyebrow">Mail</p>
    <h3 class="b-feature-row__title">An inbox that behaves like an application.</h3>
    <p class="b-feature-row__body">Threads, labels, and search that reads the whole message — one keystroke away.</p>
    <p class="b-chapter__actions"><a class="b-link" href="#feature-row">Open an inbox &rsaquo;</a></p>
  </div>
</div>
```

### Bento  (https://ui.barua.tz/docs/marketing.html#bento)
Tiles of unequal weight in one grid — the rest of a platform at a glance. .b-bento__tile--wide takes two columns so the grid has a rhythm instead of a checkerboard; on a phone every tile is full width.
Classes: b-bento b-bento__body b-bento__tile b-bento__tile--wide b-bento__title b-icon-tile b-icon-tile--sm b-icon-tile--solid b-icon-tile--teal

```html
<div class="b-bento">
  <article class="b-bento__tile b-bento__tile--wide">
    <span class="b-icon-tile b-icon-tile--solid" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><rect x="3" y="4.5" width="14" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m4.5 7 5.5 4 5.5-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    <h3 class="b-bento__title">Mail</h3>
    <p class="b-bento__body">Mailboxes on your domain, shared inboxes for the team, and IMAP for the app you already use.</p>
  </article>
  <article class="b-bento__tile">
    <span class="b-icon-tile b-icon-tile--sm b-icon-tile--teal" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
    <h3 class="b-bento__title">Storage</h3>
    <p class="b-bento__body">Files beside the mailbox they belong to.</p>
  </article>
</div>
```

### Spec Strip  (https://ui.barua.tz/docs/marketing.html#spec-strip)
Four numbers, evenly spaced, with the claim underneath each. Use tabular numerals so the row stays even, and keep the labels honest — a figure with a footnote is worth more than a figure without one.
Classes: b-spec-strip b-spec__label b-spec__value b-tabular-nums

```html
<div class="b-spec-strip">
  <div><span class="b-spec__value b-tabular-nums">10 min</span><span class="b-spec__label">From signup to first email</span></div>
  <div><span class="b-spec__value b-tabular-nums">99.9%</span><span class="b-spec__label">Delivery to the major providers</span></div>
  <div><span class="b-spec__value">TZS</span><span class="b-spec__label">Billed in shillings</span></div>
</div>
```

### The louder half  (https://ui.barua.tz/docs/marketing.html#louder)
Everything above is the quiet version of a product page, and the restraint that makes a toolbar good makes a front page forgettable. A landing page is not an application: the type has to be readable from across a room, the ground has to change between chapters so the page has floors, and the accent has to be used at full strength rather than apologetically. These are the pieces that do that.
Variants: Highlight marker, Tinted chapter, The confident bar, Showcase, Logos on cards, Accordion without the box, Headline beside the substance
Classes: b-accordion b-accordion--plain b-btn b-btn--block b-btn--ghost b-btn--lg b-btn--pill b-btn--primary b-btn--sm b-card b-card--flush b-card__body b-chapter__title b-disclosure b-disclosure__body b-icon-tile b-icon-tile--sm b-list b-list--inset-divider b-list--plain b-list-item b-list-item__content b-list-item__subtitle b-list-item__title b-list-item__trailing b-logo-wall b-logo-wall--cards b-logo-wall__logo b-mark b-marketing-nav b-marketing-nav--lg b-marketing-nav__brand b-marketing-nav__links b-showcase b-showcase__shot b-spacer b-stat-card b-stat-card__figure b-stat-card__label b-stat-card__row b-stat-card__rows b-stat-card__title

```html
<h2 class="b-chapter__title">Email at <span class="b-mark">your own name</span></h2>
```

### Dark chapter  (https://ui.barua.tz/docs/marketing.html#dark-chapter)
Product pages alternate light and dark full-bleed sections so the page has chapters you can feel while scrolling. .b-chapter--dark flips color-scheme rather than hardcoding colours, so every token inside resolves for the dark ground and any component dropped in keeps working. It is one of the three selectors the token block is declared on, alongside :root and [data-theme] — a chapter that inverts is a themed subtree, and flipping the scheme without re-declaring the tokens leaves them resolved against the page around it, which reads as a dark band that came out light.
Classes: b-caption b-card b-card__body b-chapter b-chapter--dark b-chapter--tight b-chapter__eyebrow b-chapter__lede b-chapter__media b-chapter__title b-container b-container--xl b-gap-2 b-grid b-grid--3 b-headline b-stack b-text-secondary

```html
<div class="b-chapter b-chapter--dark b-chapter--tight" style="border-radius: var(--b-radius-xl)">
  <p class="b-chapter__eyebrow">Barua for business</p>
  <h2 class="b-chapter__title">Work that arrives.</h2>
  <p class="b-chapter__lede">The same chapter, on the other ground.</p>
  <div class="b-container b-container--xl b-chapter__media">
    <div class="b-grid b-grid--3">
      <article class="b-card"><div class="b-card__body b-stack b-gap-2"><p class="b-headline">Storage</p><p class="b-caption b-text-secondary">Files shared with a link that expires.</p></div></article>
      <article class="b-card"><div class="b-card__body b-stack b-gap-2"><p class="b-headline">Domains</p><p class="b-caption b-text-secondary">Buy the name, records written for you.</p></div></article>
      <article class="b-card"><div class="b-card__body b-stack b-gap-2"><p class="b-headline">Hosting</p><p class="b-caption b-text-secondary">A site with nothing to look after.</p></div></article>
    </div>
  </div>
</div>
```

### Pill switcher  (https://ui.barua.tz/docs/marketing.html#pill-nav)
One product across several surfaces, switched from a row of pills under the bar — .b-pill-nav , with .is-active on the current one. Use it when the surfaces are peers; use tabs when one contains the others.
Classes: b-pill-nav

```html
<nav class="b-pill-nav" aria-label="Surfaces">
  <a class="is-active" href="#pill-nav">Mail</a><a href="#pill-nav">Storage</a><a href="#pill-nav">Teams</a><a href="#pill-nav">Domains</a>
</nav>
```

### Card rail  (https://ui.barua.tz/docs/marketing.html#card-rail)
A row you push sideways, snapping card to card — for a set of features that reads better as a sequence than a grid. Every figure in a rail is forced to one aspect so the captions line up; photographs arrive at whatever shape they were taken.
Classes: b-card-rail b-figure b-figure__frame b-rail-card__body b-rail-card__text b-rail-card__title

```html
<div class="b-card-rail">
  <article>
    <figure class="b-figure"><div class="b-figure__frame"><img src="../examples/assets/media/team.jpg" alt="A small team meeting" width="1500" height="1000" loading="lazy"></div></figure>
    <div class="b-rail-card__body">
      <div class="b-rail-card__title">Shared mailboxes</div>
      <p class="b-rail-card__text">sales@ and support@ belong to the team.</p>
    </div>
  </article>
  <article>
    <figure class="b-figure"><div class="b-figure__frame"><img src="../examples/assets/media/desk.jpg" alt="Files on a desk" width="1500" height="1000" loading="lazy"></div></figure>
    <div class="b-rail-card__body">
      <div class="b-rail-card__title">Files where the mail is</div>
      <p class="b-rail-card__text">Storage sits beside the mailbox.</p>
    </div>
  </article>
  <article>
    <figure class="b-figure"><div class="b-figure__frame"><img src="../examples/assets/media/city.jpg" alt="The coast" width="1500" height="1000" loading="lazy"></div></figure>
    <div class="b-rail-card__body">
      <div class="b-rail-card__title">Paid in shillings</div>
      <p class="b-rail-card__text">Mobile money or card, one balance.</p>
    </div>
  </article>
</div>
```

### Moving media  (https://ui.barua.tz/docs/marketing.html#moving-media)
A hero can move. Put a <video> in the figure frame with autoplay muted loop playsinline — muted because a page that makes noise is a page people close, and playsinline so phones do not take it fullscreen. Keep it short, keep it small, and give it a poster so something is there before it loads.
Classes: b-figure b-figure__caption b-figure__frame

```html
<figure class="b-figure" style="max-width: 30rem">
  <div class="b-figure__frame">
    <video src="../examples/assets/media/typing.mp4" autoplay muted loop playsinline preload="metadata" aria-label="Someone typing at a desk"></video>
  </div>
  <figcaption class="b-figure__caption">Ten seconds on loop, under a megabyte.</figcaption>
</figure>
```

### Promo band  (https://ui.barua.tz/docs/marketing.html#promo-band)
One offer, full width, in its own colour — the band near the end of a product page that carries the ask. It sets a dark scheme so the controls inside it come out right.
Classes: b-btn b-btn--glass b-btn--lg b-chapter__actions b-promo-band b-promo-band__body b-promo-band__title

### Footnotes  (https://ui.barua.tz/docs/marketing.html#footnotes)
The small print a claim earns. Numbered, caption-sized and tertiary, sitting between the last chapter and the footer — with <sup> markers on the claims themselves. A figure with a footnote is worth more than a figure without one.
Classes: b-footnotes

```html
<div class="b-footnotes" style="padding-block-start: 0">
  <ol>
    <li>Measured from account creation to first delivered message on a domain with working nameservers.</li>
    <li>Delivery to Gmail, Outlook and Yahoo across the last ninety days.</li>
  </ol>
</div>
```

### Site Footer  (https://ui.barua.tz/docs/marketing.html#site-footer)
Small, dense, and unafraid of links: groups of destinations in columns, then the legal line that carries the footnotes the page made. Caption-sized throughout — a footer is for finding, not for reading.
Classes: b-site-footer b-site-footer__group b-site-footer__groups b-site-footer__heading b-site-footer__legal

```html
<footer class="b-site-footer" style="border-radius: var(--b-radius-lg)">
  <div class="b-site-footer__groups">
    <div class="b-site-footer__group">
      <div class="b-site-footer__heading">Barua</div>
      <a href="#site-footer">Mail</a><a href="#site-footer">Domains</a><a href="#site-footer">Pricing</a>
    </div>
    <div class="b-site-footer__group">
      <div class="b-site-footer__heading">Support</div>
      <a href="#site-footer">Help centre</a><a href="#site-footer">Status</a><a href="#site-footer">Contact</a>
    </div>
    <div class="b-site-footer__group">
      <div class="b-site-footer__heading">Company</div>
      <a href="#site-footer">About</a><a href="#site-footer">Privacy</a><a href="#site-footer">Terms</a>
    </div>
  </div>
  <p class="b-site-footer__legal">Prices include VAT where it applies.<br>Copyright &copy; 2026 Barua. Dar es Salaam, Tanzania.</p>
</footer>
```


## Infrastructure — naming, theming, accessibility, contribution

### MCP server  (https://ui.barua.tz/docs/infrastructure.html#mcp)
The system is also a service. Rather than loading a 500 KB index into context, an agent can ask it questions — and, more usefully, hand back the markup it just wrote to be judged before shipping it. Hosted, so a coding agent that has never seen this repository can still use the system correctly:
Classes: b-code b-code__copy b-code__header

### Design Tokens  (https://ui.barua.tz/docs/infrastructure.html#design-tokens)
Every visual decision is a custom property prefixed --b- , defined once in css/tokens.css . Tokens come in three tiers: primitives are raw values ( --b-blue-500 is Barua blue), semantic tokens give values meaning and carry the light/dark pair ( --b-color-accent ), and components consume the semantic tier — never the primitives.
Variants: Token families
Classes: b-code b-code__header b-table b-table-wrap

### Architecture & Layers  (https://ui.barua.tz/docs/infrastructure.html#architecture-layers)
Barua is one stylesheet with a declared cascade. css/barua.css opens with @layer tokens, base, utilities, components; — later layers win, so components can rely on base and utilities without specificity wars. Your own overrides live unlayered , and unlayered CSS always beats layered rules: a plain .b-btn { border-radius: 0 } in your app stylesheet wins without !important .
Classes: b-code b-code__copy b-code__header

### Naming Conventions  (https://ui.barua.tz/docs/infrastructure.html#naming-conventions)
BEM with a b- namespace. If a class starts with .b- it ships with Barua; if it starts with .is- it is runtime state; if an attribute starts with data-b- it is a JS behavior hook, never a styling hook.
Classes: b-table b-table-wrap

### Component Variants  (https://ui.barua.tz/docs/infrastructure.html#component-variants)
Variants are modifier classes along two standard axes. The visual axis sets prominence — primary, tinted, outline, ghost, glass, danger — and reads the same on every component that offers it. Buttons carry the full set:
Classes: b-badge b-badge--danger b-badge--success b-badge--warning b-btn b-btn--danger b-btn--danger-tinted b-btn--ghost b-btn--glass b-btn--outline b-btn--primary b-btn--sm b-btn--success b-btn--tinted

```html
<button class="b-btn b-btn--primary">Primary</button>
<button class="b-btn b-btn--tinted">Tinted</button>
<button class="b-btn">Default</button>
<button class="b-btn b-btn--outline">Outline</button>
<button class="b-btn b-btn--ghost">Ghost</button>
<button class="b-btn b-btn--glass">Glass</button>
<button class="b-btn b-btn--danger">Danger</button>
```

### Component States  (https://ui.barua.tz/docs/infrastructure.html#component-states)
State is expressed twice: an aria-* attribute for assistive technology and, where no semantic attribute exists, an .is-* class for styling. Barua's selectors target both, so setting the aria attribute alone is enough for the components below. The full state language lives in Interaction .
Classes: b-btn b-btn--primary b-chip b-table b-table-wrap b-toggle-btn

```html
<button class="b-btn b-toggle-btn" aria-pressed="true">Watching</button>
<button class="b-chip is-selected">Design</button>
<button class="b-btn is-active">Active</button>
<button class="b-btn b-btn--primary is-loading">Saving…</button>
<button class="b-btn" disabled>Disabled</button>
```

### Component Sizes  (https://ui.barua.tz/docs/infrastructure.html#component-sizes)
One height scale for every control, held in the --b-control-h-* tokens. Modifiers are --xs , --sm , medium by default, --lg , --xl ; font size and radius step down or up with the height.
Classes: b-btn b-btn--lg b-btn--sm b-btn--xl b-btn--xs b-hstack b-input b-input--lg b-input--sm b-stack--wrap b-table b-table-wrap b-table__num

```html
<div class="b-hstack b-stack--wrap">
  <button class="b-btn b-btn--xs">Extra small</button>
  <button class="b-btn b-btn--sm">Small</button>
  <button class="b-btn">Medium</button>
  <button class="b-btn b-btn--lg">Large</button>
  <button class="b-btn b-btn--xl">Extra large</button>
</div>
<div class="b-hstack b-stack--wrap">
  <input class="b-input b-input--sm" style="max-width: 11rem" placeholder="Small input">
  <input class="b-input" style="max-width: 11rem" placeholder="Medium input">
  <input class="b-input b-input--lg" style="max-width: 11rem" placeholder="Large input">
</div>
```

### Icon System  (https://ui.barua.tz/docs/infrastructure.html#icon-system)
Icons are inline SVGs on a 20×20 viewBox: 1.5px strokes, round caps and joins, fill="none" , and currentColor throughout so they inherit text color in every variant and theme. The .b-icon wrapper sizes them — --sm 16px, default 20px, --lg 24px, --xl 32px. Inside buttons no wrapper is needed; the button scales its own SVG.
Classes: b-code b-code__header b-gap-2 b-hstack b-icon b-icon--lg b-icon--sm

```html
<div class="b-hstack b-gap-2" aria-label="Envelope at 16, 20 and 24 pixels">
  <span class="b-icon b-icon--sm"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2" y="4.5" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m3.5 6.5 6.5 4.5 6.5-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
  <span class="b-icon"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2" y="4.5" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m3.5 6.5 6.5 4.5 6.5-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
  <span class="b-icon b-icon--lg"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2" y="4.5" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="m3.5 6.5 6.5 4.5 6.5-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</div>
<div class="b-hstack b-gap-2" aria-label="Search at 16, 20 and 24 pixels">
  <span class="b-icon b-icon--sm"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13.4 13.4 3.6 3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
  <span class="b-icon"
```

### Theme System  (https://ui.barua.tz/docs/infrastructure.html#theme-system)
Every color token is declared once with light-dark() and :root sets color-scheme: light dark , so with no attribute at all the UI follows the system appearance. Setting data-theme="light" or data-theme="dark" on <html> forces a scheme by flipping color-scheme — no second stylesheet, no class swap. Each docs page restores the saved choice before first paint:
Variants: Accent re-tinting, JS API
Classes: b-btn b-btn--primary b-btn--sm b-code b-code__header b-table b-table-wrap

```html
<button class="b-btn b-btn--primary b-btn--sm">Blue</button>
<span data-accent="indigo"><button class="b-btn b-btn--primary b-btn--sm">Indigo</button></span>
<span data-accent="purple"><button class="b-btn b-btn--primary b-btn--sm">Purple</button></span>
<span data-accent="pink"><button class="b-btn b-btn--primary b-btn--sm">Pink</button></span>
<span data-accent="teal"><button class="b-btn b-btn--primary b-btn--sm">Teal</button></span>
<span data-accent="green"><button class="b-btn b-btn--primary b-btn--sm">Green</button></span>
```

### Responsive System  (https://ui.barua.tz/docs/infrastructure.html#responsive-system)
Mobile-first: base styles target small screens and min-width queries layer on refinements at the breakpoint values below (a documented convention in tokens.css — media queries cannot read custom properties, so the values are used literally).
Classes: b-badge b-badge--accent b-hide-desktop b-hide-mobile b-table b-table-wrap b-table__num

```html
<span class="b-badge b-badge--accent b-hide-mobile">Desktop only (≥768px)</span>
<span class="b-badge b-badge--accent b-hide-desktop">Mobile only (&lt;768px)</span>
<span class="b-badge">Always visible</span>
```

### Accessibility System  (https://ui.barua.tz/docs/infrastructure.html#accessibility-system)
Accessibility is infrastructure, not a per-component afterthought. The baseline contract every component inherits:
Classes: b-table b-table-wrap

### Motion System  (https://ui.barua.tz/docs/infrastructure.html#motion-system)
Five durations, five curves — all tokens, so timing stays consistent across components. Small feedback is near-instant; the bigger the surface, the longer and springier the move.
Classes: b-table b-table-wrap b-table__num

### Interaction States  (https://ui.barua.tz/docs/infrastructure.html#interaction-states)
The full interaction-state language — hover, pressed ( :active / .is-pressed ), drag ( .is-dragging , [draggable] cursors), selection rectangles, drop indicators and focus choreography — is a pattern page of its own. This page defines the naming; see Interaction for live demos of each state applied across components.

### Composition Patterns  (https://ui.barua.tz/docs/infrastructure.html#composition-patterns)
Big surfaces are assembled, not invented. An auth screen is .b-card + .b-field + .b-btn (packaged as .b-auth-card on Authentication ); a dashboard is .b-grid + .b-card + .b-stat + .b-chart (see Productivity and Data Visualization ). The same three primitives compose a working sign-in card with zero new CSS:
Classes: b-btn b-btn--block b-btn--primary b-card b-card__body b-card__subtitle b-card__title b-field b-gap-4 b-input b-label b-stack

```html
<div class="b-card" style="width: min(22rem, 100%)">
  <div class="b-card__body b-stack b-gap-4">
    <div>
      <div class="b-card__title">Sign in</div>
      <div class="b-card__subtitle">Card + field + button — nothing else.</div>
    </div>
    <div class="b-field">
      <label class="b-label" for="infra-email">Email</label>
      <input class="b-input" id="infra-email" type="email" placeholder="you@example.com">
    </div>
    <button class="b-btn b-btn--primary b-btn--block">Continue</button>
  </div>
</div>
```

### Content Guidelines  (https://ui.barua.tz/docs/infrastructure.html#content-guidelines)
Voice is part of the system. Buttons are verb-first and specific — they say what happens, not what the dialog is about. Sentence case everywhere: buttons, labels, headings, menu items. Errors say what went wrong and what to do next, in words a person would use; error codes belong in logs, not in .b-error text.

### Usage & Contribution Guidelines  (https://ui.barua.tz/docs/infrastructure.html#usage-contribution)
Compose first. If a design can be assembled from existing components plus layout utilities, compose it in markup — do not add CSS. Add a new component only when a pattern recurs across several screens or needs its own state contract. New components get a block name, live in css/components/ inside @layer components , and are imported from barua.css . Before shipping one:
Classes: b-list b-list-item b-list-item__content b-list-item__leading b-list-item__subtitle b-list-item__title

### Documentation Conventions  (https://ui.barua.tz/docs/infrastructure.html#documentation-conventions)
These docs are themselves built from Barua — docs.css styles only the chrome (shell, hero, demo frames), so every demo you see is the real system rendering itself. Each section follows one anatomy: .docs-section with an h2[id] , short prose, a live .docs-demo , and a .docs-a11y note where the component has sharp edges. docs.js generates the collapsible HTML block under every demo from its actual markup — the code you copy is the code that rendered, and can never drift. Demos marked data-no-code skip the block when the markup would be noise. The same script builds the right-rail table of contents from the section headings and feeds the ⌘K palette from the sidebar, so navigation stays in sync with the pages for free.