Mzizi Dashboard Standard

​

The reference

​

Anatomy

​

Density

​

Brand overlays

1. One overlay stylesheet, imported after the tokens: it repoints --primary and --ring to the brand’s mineral.
2. AppShell accent="<mineral>" (from 0.4.1) fills primary actions and the current nav indicator with the mineral’s brand fill (--color-<mineral>-brand, text --color-<mineral>-on-brand). Text links and the focus ring keep the contrast-safe --primary and --ring.
3. BrandMark shows the brand’s official mark, the registry’s icon pair, never redrawn.

​

Accessibility baseline

• Landmarks. The sidebar is a named <aside>, the top bar a <header>, the page is in one <main id="main" tabindex="-1"> (the skip-link target), and the footer is a <footer>. Navigation, breadcrumbs and pagination are named <nav>s.
• One <h1> per page, in the page header; empty states and panels use real headings at the level you give them.
• Keyboard. Everything works with the keyboard: disclosures are <details>, the drawer and the palette are Popover API elements (Escape and a click outside close them), and ⌘K / Ctrl+K opens the palette.
• Focus. A visible --ring focus ring on every control.
• Current location. aria-current="page" on the current nav item, crumb and page link.
• Tooltips (nav descriptions, info tips) show on hover and keyboard focus, are the control’s accessible description, and Escape hides them (WCAG 1.4.13).
• Meaning is never colour alone. Trends are written out; badges carry text; charts have a figures table.
• No timeouts. Toasts wait to be dismissed (WCAG 2.2.3).
• Touch targets of 44–48px on a coarse pointer, with the three recorded exceptions above.

​

Without JavaScript

• AppShell: saves the collapse choice to a cookie, and lets Escape hide tooltips.
• CommandPalette: the ⌘K shortcut, live filtering with an announced match count, Enter for the first match, and arrow keys. Without it, every result is a link and, with action, the search box submits to your server.

​

Contracts

• props and slots with types, behaviour, and named states (fixtures every implementation is rendered in);
• accessibility, density (fine and coarse pointer), theming and the no-JS fallback;
• responsive rules;
• a contract … end block in the Mzizi language’s clause grammar (see RFC-0006);
• selector checks on the rendered markup.

contract
  slot is "side-nav"
  label is "Sections"
  a "Home" min_height 32
  when default shows a "News"
  when default shows summary "Content"
  when flat shows a "B"
end

​

How to adopt

pnpm add @bundu/ui

@import "tailwindcss";
@import "@bundu/ui/styles/globals.css";
@import "@bundu/ui/styles/brand-nyuchi.css"; /* your brand, last */

import { groupNav } from "@bundu/ui/app/nav";

export const groups = groupNav(
  [
    { href: "/", label: "Home", icon: "home", group: "Overview" },
    { href: "/users", label: "Users", icon: "users", group: "Identity & people",
      description: "Everyone with a person record" },
  ],
  ["Overview", "Identity & people"],
);

---
import AppShell from "@bundu/ui/app/AppShell.astro";
import WorkspaceSwitcher from "@bundu/ui/app/WorkspaceSwitcher.astro";
import BrandMark from "@bundu/ui/app/BrandMark.astro";
import QuickSearch from "@bundu/ui/app/QuickSearch.astro";
import SideNav from "@bundu/ui/app/SideNav.astro";
import TopBarAction from "@bundu/ui/app/TopBarAction.astro";
import AccountMenu from "@bundu/ui/app/AccountMenu.astro";
import CommandPalette from "@bundu/ui/app/CommandPalette.astro";
import { groups } from "../nav";
---
<AppShell
  accent="gold"
  collapsed={Astro.cookies.get("sidebar")?.value === "collapsed"}
  persist="sidebar"
  footerLinks={[{ label: "Support", href: "/support" }]}
>
  <WorkspaceSwitcher slot="workspace" name="Nyuchi Africa">
    <BrandMark slot="mark" wordmark suffix="console" />
  </WorkspaceSwitcher>
  <QuickSearch slot="search" />
  <SideNav slot="nav" groups={groups} />
  <TopBarAction slot="actions" label="Support" icon="help" href="/support" />
  <AccountMenu slot="account" name="Tendai Moyo" signOutAction="/auth/sign-out" />
  <slot />
  <CommandPalette slot="overlay" groups={groups} action="/search" />
</AppShell>