@micha.bigler/ui-core-micha 2.31.1 → 2.33.0

package/WORK_ORDERS.md

@@ -24,6 +24,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| CHART-7 | `ChartFrame` gains a `titleVariant` prop | Adds `titleVariant` (default `'h6'`, unchanged from today's hardcoded value) to `ChartFrame`, forwarded to the title `Typography` — lets a dense panel grid (e.g. fitness-monitor's seven body-composition panels beside one hero chart) render smaller titles that recede instead of competing with the one chart that matters. One prop, not a `slotProps.title` system — deliberately minimal per the WO. Precondition of fitness-monitor's `FM-12` (DS-10). `2.32.0` (minor, additive). Full spec: [work-orders/CHART-7.md](work-orders/CHART-7.md). | 2026-08-10 | done | 14020d0 | Envelope authored by Expertenchat, no design question (short-form WO). No preconditions. Orchestrator filled a minimal Implementation map (the whole change is two lines in `ChartFrame.jsx`), ran Codex (stdin invocation). Codex added `titleVariant = 'h6'` to the prop destructure, forwarded it to the title `Typography`, wrote all 3 required tests, and bumped `2.31.1` → `2.32.0` per the WO's own stated version target. **Independent `reviewer` + `ui_reviewer` (both Haiku, proportionate to a small low-risk diff) ran concurrently — both found NO findings**, including explicit confirmation that only the prop-destructure line and the one `Typography` line changed (padding, foot row, subtitle/toolbar/slots byte-for-byte unchanged) and that the default-regression test is non-vacuous. Re-verified: 13/13 scoped vitest tests green, `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)**: no existing harness specimen used `titleVariant`, so the Orchestrator added one (two `ChartFrame`s side by side, default vs. `titleVariant="subtitle2"`) to `dev/entries.jsx` — confirmed live at 375px and 1280px that the override renders visibly smaller/lighter than the unchanged h6 default. |
 | THEME-2 | Two defects from the THEME-1/CHART-6 landings: `warning.main` contrast, `grid` replacing instead of merging | Fixes `palette.warning.main` (`#C08A2C`, 3.038:1 on white — fails AA) to `#976100` (the existing `text` tone, ~5.2:1), `contrastText` to `#FFFFFF`; `warning.fill`/`.text`/`.fillText`/`.bg` unchanged. Adds a completeness-assertion rule checking every status channel's `.main` against `#FFFFFF` and `background.default` at 4.5:1. Fixes `BarChart`/`LineChart`'s `grid` prop silently replacing (not merging) a caller's partial grid object; the required audit of sibling object-valued defaults found a second live instance (`legendPosition`, same bug class) and fixed it too. `2.31.1` (patch). Full spec: [work-orders/THEME-2.md](work-orders/THEME-2.md). | 2026-08-10 | done | 7d5039f | Envelope authored by Expertenchat, both defects fully diagnosed up front (no design question). Preconditions (THEME-1 `2.30.0`, CHART-6 `2.31.0`) verified. Orchestrator filled the Implementation map with the exact current-state code pointers for both defects, then ran Codex (stdin invocation). Codex's own audit (per the WO's "close the mechanism" instruction) found the `legendPosition` partial-override bug beyond the named `grid` fix and fixed it too, exactly as the WO anticipated ("fix that too and say so"). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently — both found NO findings**, including the reviewer's own hand-computed contrast check confirming `#976100` clears 4.5:1 against both `#FFFFFF` (~5.22:1) and `background.default` (~5.00:1). One thing the Orchestrator itself fixed (not a reviewer finding): a pre-existing THEME-1 regression test (`tests/createAppTheme.test.js`) asserted `palette[status].main === palette[status].fill` for all four status channels — THEME-2 deliberately breaks that equality for `warning` only (the whole point of the fix), so the assertion was updated to special-case `warning` against its new intended invariant (`main === text`, `contrastText === '#FFFFFF'`) while `success`/`error`/`info` keep the original assertion. Re-verified after the fix: 58/58 scoped + adjacent vitest tests green (`tests/themeCompleteness.test.js`, `tests/chartDefaults.test.js`, `tests/createAppTheme.test.js`, `tests/chartsPalette.test.js`, `tests/BarChart.test.jsx`, `tests/LineChart.test.jsx`, `tests/TimeSeriesChart.test.jsx`), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry — the WO's own point was that no existing specimen exercised `.main` (the `StatusChip`'s `sx={{bgcolor:'...fill'}}` and the `MuiAlert` `standardWarning` override both bypass it), so a new Button/Chip/`Alert variant="filled"` specimen row was added and confirmed live at 375px and 1280px: the warning tone now renders visibly darker (brown, white text) than the still-unchanged lighter-amber `fill`-based chip beside it. The "Caller overrides" `LineChart` specimen's `grid` prop was also changed from a complete `{horizontal:true,vertical:true}` object (which wouldn't have visually proven the merge) to a genuinely partial `{vertical:true}` one — confirmed live at both widths showing BOTH grid directions post-fix. |
 | CHART-6 | Chart-chrome defaults in the three wrappers, plus two generic fixes hoisted up | Closes the chart-chrome default surface in `BarChart`/`LineChart`/`TimeSeriesChart`: baseline tick font size (from `theme.typography.caption`), a horizontal grid, `showMark:false` with a filled-marker fix when a caller opts markers back in, automatic bottom-margin growth for rotated tick labels, a new `legendPosition` prop (default bottom-start), and `TimeSeriesChart`'s own toolbar becoming the sole legend (MUI's redundant second legend removed). Hoists `chartLabels.js` (short granularity-aware tick-label formatters) and a generalised `yearTickInterval` from fitness-monitor. `2.31.0`. Full spec: [work-orders/CHART-6.md](work-orders/CHART-6.md). | 2026-08-10 | done | 6dedc62 | Envelope authored by Expertenchat (DS-4). Precondition (THEME-1 landed + published `2.30.0`) verified before start. Orchestrator filled the Implementation map with concrete MUI X-Charts source pointers (installed `8.29.2`, not the WO's stated `8.28.2` — flagged and verified against the actual installed source throughout), then ran Codex (stdin invocation, same as THEME-1). Codex implemented `src/components/charts/{chartDefaults,chartLabels,yearTickInterval}.js`, wired all three wrappers, wrote the 10 required tests, and used a wrapper-level `slots.mark` composition for the filled-marker fix (a deliberate, now-documented deviation from the WO's named `MuiMarkElement` theme-token mechanism — the wrapper-level fix applies to all 14 consumers immediately on this version bump, not only to apps that separately adopt `createAppTheme`). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently.** `reviewer` found **R1 (P2)** — the marker-fill deviation from the WO's specified mechanism was undocumented; fixed with an explanatory code comment (functionally correct either way, this was a disclosure gap, not a bug). `ui_reviewer` found **U1 (P3)** — `SeriesToggleDot`'s 12px dot used hardcoded pixels instead of `theme.spacing()`; fixed. Both reviewers otherwise found the six highest-risk invariants (default-vs-caller-override merge order, filled markers, rotated-tick margin math, the double-legend fix, `yearTickInterval`'s generalisation, `skipAnimation` passthrough) correct and non-vacuously tested. **A third, more serious bug was found by the Orchestrator's own DS-1 two-width rendered check (not by either reviewer, since both are static-diff reviews)**: `withAxisDefaults` in `chartDefaults.js` only applied `defaults.scaleType` when the caller passed NO `xAxis`/`yAxis` array at all — a caller-supplied axis with `data` but no explicit `scaleType` (exactly what the new dev-harness "Chart defaults" `LineChart` specimen used) silently lost the wrapper's `'point'`/`'band'` scale default entirely, leaving MUI's scale undefined and every rendered line/point position `NaN` (`<path> attribute d: Expected number, "MNaN,...`, confirmed live via `read_console_messages` and only reproducible through a real MUI scale computation — a mocked prop-assertion test structurally cannot catch it, the same class of bug CHART-1/3/4/5 have each found before in this kit). Fixed by spreading `defaults` before `axis` in the per-axis merge (caller's own explicit `scaleType`, if any, still wins); a new regression test added (`tests/chartDefaults.test.js`, "keeps the default scaleType on a caller-supplied axis that does not set one"), confirmed against both `BarChart`'s `'band'` and `LineChart`'s `'point'` defaults. Re-verified after all three fixes: 44/44 scoped vitest tests green (10 new + 34 existing adjacent chart tests, no regressions), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry (which now also carries the two new `LineChart` chart-chrome specimens per the WO's "at least one chart that set the props and one that did not" requirement) at 375px and 1280px — confirmed live: correct line rendering (post-fix), filled markers on the caller-override chart, horizontal grid, bottom-start vs. caller-chosen legend position, and rotated tick labels with adequate margin at 1280px. |
 | THEME-1 | Shared MUI theme baseline: `createAppTheme` factory + completeness assertion | Ships `createAppTheme(appConfig)` (palette-first merge of a fixed light-mode baseline with the app's own `palette`/`typography`/`components`; throws without `palette.primary`; throws on a function anywhere in `appConfig.components.*.styleOverrides`), an exported `assertThemeComplete` completeness assertion with an exemption arm and contrast checks (status text-on-own-tint, `controlBorder` on white + page background), a non-breaking chart-ramp fallback in `useNeutralChartPalette` (adopters get the theme's `dataSeries` ramp, non-adopters see byte-identical output), a new "Shared theme baseline" dev-harness entry, and `DESIGN.md` principles 1/8 reworded per the accepted policy change (ucm now ships a shared theme; the data-colour layer has a shared default). Full spec: [work-orders/THEME-1.md](work-orders/THEME-1.md). | 2026-08-10 | done | b329b39, 96992cf | Envelope authored by Expertenchat from the accepted reference sheet (`work-orders/assets/THEME-1-baseline-reference-sheet.html`, DS-2 decisions 1–23). Orchestrator filled the Implementation map, then ran Codex (stdin, not positional arg — the WO text exceeded Windows' command-line length limit via the npm shim, "Argument list too long"; `codex exec ... -` reading the WO from stdin is the working invocation for large WOs on this platform). Codex implemented `src/theme/{tokens,createAppTheme,themeCompleteness,index}.js`, wrote all 13 required tests + extended `tests/chartsPalette.test.js`, updated `src/index.js` exports, `DESIGN.md`, `package.json` (2.29.2→2.30.0, new `@fontsource/dm-sans` dependency — WO-scoped, no separate approval needed), and the dev harness. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently. `ui_reviewer`: no findings.** `reviewer` found three, all confirmed real and fixed by the Orchestrator: **R1 (P2)** — MUI's `createTheme(options, ...args)` only runs palette augmentation on the FIRST argument; every later arg (how the baseline was layered in) is deep-merged raw, so `success`/`warning`/`error`/`info` — which had `text`/`fill`/`fillText`/`bg` but no `main`/`contrastText` — silently kept MUI's own stock hues for any standard `color="success"` usage. Verified live via a Node repro (`createTheme({...},{palette:BASELINE_PALETTE},{...})` on the pre-fix baseline produced `success.main:'#2e7d32'`, MUI's stock green, not the canonical `#1B8038`). Fixed: explicit `main`/`light`/`dark`/`contrastText` added to all four status channels (`light`/`dark` computed via MUI's own `lighten`/`darken` at the same 0.2/0.3 tonal offsets `augmentColor` uses), plus a new regression assertion in `tests/createAppTheme.test.js`. **R2 (P3)** — `controlBorder.focus` was derived to clear 3:1 only against `background.paper`, while `assertThemeComplete`'s own contrast check tests it against `#FFFFFF` and `background.default` — an app overriding either background could pass the derivation and still fail the assertion. Fixed: derivation now targets both surfaces. **R3 (P3)** — `MuiOutlinedInput`'s `variants` array was nested inside `styleOverrides.root` instead of as a sibling key; MUI never reads `variants` from inside `styleOverrides` (it's matched by `props` independently), so the entry was inert dead code, and it also meant the function-in-`styleOverrides` guard's own suggested escape hatch ("use MUI variants") was structurally unreachable from inside `styleOverrides`. Fixed: moved to the correct sibling placement; updated the one test and the one completeness-surface path that referenced the old (wrong) location. Re-verified after fixes: 15/15 scoped vitest tests green (`tests/createAppTheme.test.js`, `tests/themeCompleteness.test.js`, `tests/chartsPalette.test.js`), `tsc -p tsconfig.build.json --noEmit` clean. Orchestrator's own security/scope pass: no findings (only the WO-approved `@fontsource/dm-sans` dependency addition, no secrets, no scope creep). **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's new "Theme / Shared baseline" entry at 375px and 1280px — both screenshots confirm radius (3/8), no resting shadow on Paper/Card, correct status fill/text/bg tones, and the six-colour series ramp, consistent with the reference sheet. No app pin bumps in this WO — all 14 consumers pin exact versions and pick this up on their own adoption WO. |
@@ -58,3 +59,4 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | AUTH-2 | Translate backend auth error codes (stop leaking raw codes) | ucm surfaces raw backend/allauth error **codes**, not text: `apiClient.jsx:107` extracts `err.code`, components do `t(err.code)`/`setErrorKey(err.code)`, but the catalogue has no entries → users see literal `email_password_mismatch` / `password_too_short`. Affects **all** rendering auth screens (login/change-pw/MFA/profile). Fix = add de/fr/en i18n entries **keyed by the enumerated codes** → the existing `t(err.code)` resolves, **zero component/app change**. Does NOT reach the delegating invitation `PasswordSetForm` (that's AUTH-1). Full spec: [work-orders/AUTH-2.md](work-orders/AUTH-2.md). | 2026-08-06 | done | 84387cf, 103a252 | Tier 2 (shared-core). Same Codex→Claude fallback and reviewer pairing as AUTH-1 (one combined diff, both WOs landed together). **Keying decided: raw-code (drop-in)**, per the WO's own stated preference — no operator request for the namespaced `i18nKey` alternative. **Codes enumerated by reading the installed allauth/Django source directly** (not guessed): `email_password_mismatch`/`username_password_mismatch`/`phone_password_mismatch` (`allauth/headless/account/inputs.py` `LoginInput.clean`), `too_many_login_attempts`/`invalid_login`/`account_inactive`/`enter_current_password` (`allauth/account/adapter.py` error_messages + `allauth/headless/account/inputs.py` `ChangePasswordInput.clean_current_password` — confirmed this genuinely means "wrong current password", not merely "field left blank"), `incorrect_code` (`allauth/mfa/**`), `password_too_short`/`password_too_common`/`password_entirely_numeric`/`password_too_similar` (Django `contrib/auth/password_validation.py`, matching dcm's `AUTH_PASSWORD_VALIDATORS` baseline). Added de/fr/en/**sw** (file's established 4-locale convention, honoured over the WO text's literal "de/fr/en"). **`ui_reviewer` + `reviewer`: no AUTH-2-specific findings** (both spot-checked the code spellings independently against the same installed packages; no key collisions with existing `Auth.*` keys; `authErrorCodeRendering.test.jsx` proves a mapped code renders human text via a real i18next instance and a genuinely-uncoded error still falls back to the existing generic `Auth.PASSWORD_CHANGE_FAILED`). Gate: shared with AUTH-1 — full suite 322/322, `tsc` clean. **Published version correction**: see AUTH-1's row — the 2.28.0 tag was skipped by a CI runner backlog and never published; verified present in the npm tarball from **2.28.1** onward (currently 2.29.1). Companion: AUTH-1. |
 | AUTH-3 | SignUpPage showed the access-code-specific success message for every signup mode | Operator-observed live bug 2026-08-07: open self-registration (no access code) showed "Falls der Zugangscode für dieses Projekt gültig ist, wurde ein Einladungslink an X gesendet" — nonsensical when there is no code at all. Root cause: `SignUpPage.jsx`'s `handleSubmit` hardcoded `Auth.INVITE_REQUEST_SUCCESS` for every mode (open/access-code/email-domain/QR) regardless of the backend's actual response. | 2026-08-07 | done | 599e73d, b4e1fe7 | No WO file — operator-reported bug, fixed directly, same convention as MSG-6c/MSG-6d/MSG-6j. Tier 2 (shared-core). **Codex → Claude fallback**: one fresh probe made today (new day, prior confirmation was 2026-08-06) — still "workspace out of credits", stamped in `project_codex_quota_status` memory — implemented directly, author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit. **Root cause confirmed against the actual backend** (`django-core-micha` `register_request` view + `validate_access_code_or_error`): every signup mode's success response already carries a mode-agnostic, accurate `code: "Auth.INVITE_SENT"`; an invalid access code is never silently accepted, it raises a distinct 400 (`Auth.ACCESS_CODE_INVALID_OR_INACTIVE`) — so the old key's "if valid…" ambiguity never matched backend reality for any mode, not just the ones reported. Fix: `setSuccessKey(res?.code || 'Auth.INVITE_SENT')`, using the backend's own code; no component/app change beyond this. **Both reviewers independently flagged the same P3**: switching away from the old key silently dropped the `{{email}}` confirmation (`Auth.INVITE_SENT` had none). Fixed before commit — extended `Auth.INVITE_SENT`'s text to include `{{email}}` in all 4 locales (safe: it had exactly one consumer, this call site, confirmed by grep). `Auth.INVITE_REQUEST_SUCCESS` is now dead/orphaned (both reviewers flagged as P3, tracked here, not removed — out of this fix's scope). Gate: `tests/SignUpPage.test.jsx` 13/13 (3 new, proving the backend code wins over the old hardcoded key, and the no-code fallback); full suite 342/342, `tsc` clean. |
 | SHELL-2 | AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer | Measured live at 375 px on 2026-08-08 (running cockpit, host header neutralised so the numbers describe ucm alone): `AccountPage` does **not** break the layout -- all six sections render at document width 375. What fails is discoverability and the users table. The tab strip scroller is 343 px visible against 589 px of content with `overflow-x: auto`, 246 px of travel, and **`scrollButtons: 0`** -- Support and any consumer-injected section sit off screen with no arrow, no fade, no hint they exist (they do respond to a horizontal swipe, so this is a discoverability failure, not a reachability one -- unlike cockpit's own header tabs, which are `width: 0px` + `overflow: hidden` and genuinely unreachable). The users table renders 1045 px inside a 341 px `MuiTableContainer`; one third is visible and the `Aktionen` column sits ~700 px to the right. Adopts jg-ferien's `EventInfoPage` pattern (`SectionSwitcher.jsx`, driven from `EventInfoPage.jsx:1126-1159`) in **both** halves -- sticky grouped 280 px sidebar at `md`+, bottom drawer below `md` -- plus an in-page trigger bar, which the reference does not supply because jg's trigger lives in that app's own page header and `AccountPage` has none. | 2026-08-08 | blocked | | **Held back 2026-08-08 — reshaped into DS-11** (see `webapp-management/DESIGN_SYSTEM_PROGRAM.md`): do NOT implement this WO as written; the Envelope will be revised (open: keep the SHELL-2 ID or mint a new SHELL-* ID). Known corrections for the revision: publishing is version-gated, not per-push (this row's "publishes immediately" is imprecise), and the grouped-shell part becomes an inheritable ucm component with `AccountPage` as first consumer. Envelope: [work-orders/SHELL-2.md](work-orders/SHELL-2.md). Prototype: [work-orders/assets/SHELL-2-account-navigation.html](work-orders/assets/SHELL-2-account-navigation.html). Tier 2 (shared core) -- independent `reviewer` (Sonnet, full) **and** `ui_reviewer` concurrently, both mandatory before commit. **Operator decisions, settled 2026-08-08 and not to be renegotiated by implementer or reviewer:** both halves of the pattern, so the horizontal tab strip disappears **on desktop too** (asked explicitly, chosen deliberately, in full knowledge that 14 consumers inherit the desktop change on their next pin bump); fixed groups `Mein Konto` / `Verwaltung` / `Hilfe` / `Weitere`, with `extraTabs` gaining an **optional** `group` field, additive and backward compatible; no standalone "Uebersicht" entry above the groups (jg-ferien has one, `AccountPage` has no overview screen for it to point at, so none is invented); users table becomes a card list below `md` and stays a table at `md`+; the mobile trigger bar is the **sole** carrier of the current section name, so the section heading below it is **removed**, not merely undrawn -- desktop keeps its heading because it has no trigger bar. **Two contracts that must survive and are currently untested:** the `?tab=` URL contract incl. fallback to `profile` on an unknown *or* unpermitted value (`AccountPage.jsx:60`, `:180-186`) -- cockpit's `/user-management`, `/profile` and `/change-password` redirects all hang off it -- and the full `extraTabs` shape (`:146-155`), whose `label` may be a **function** and which supports `visible(context)`. `AccountPage` and `UserListComponent` have **zero tests today** (none of the 20 files under `tests/` touches either), so both test files are new, not extensions. **No staging net:** this repo has no `develop`; a push to `main` touching `src/**` or `package.json` publishes to npm immediately via `publish.yml`, so the independent review is the only gate and is not back-fillable. Version target `2.30.0` (minor -- `extraTabs` gains a public field; additive API is a minor under semver). Explicit non-goals: pagination/filtering for the user list, the sections' internal content, the six auth pages (measured clean at 375 px), and **cockpit's header** -- that toolbar is what inflates the document to 498 px on every route including `/account`, and it is a separate WO in the cockpit repo, sequenced after this one at the operator's choice. Carried-over trap from the reference: jg-ferien uses `env(safe-area-inset-bottom)` while its `index.html` omits `viewport-fit=cover`, so those insets resolve to zero there -- copy the padding, do not assume it does anything. |
+| SHELL-3 | Promote the mobile bottom navigation into the shared kit | Promotes jg-ferien's `MobileBottomNav` into ucm, shaped from **two** real cases (jg's existing bar + cockpit's destinations) as DS-6 required rather than from jg alone. Two labelled parts, one release: (1) `MuiBottomNavigation`/`MuiBottomNavigationAction` defaults into the baseline plus their completeness-assertion surfaces; (2) the component itself, structure and behaviour only, with `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/`zIndex` props. Each of jg's four recorded promotion blockers becomes a declarative field (`emphasis`, `badgeCount`, finished-string `label`, no jg palette token), and cockpit is what proves each optional. Full spec: [work-orders/SHELL-3.md](work-orders/SHELL-3.md). | 2026-08-11 | done | 56de0c0, <commit> | Implemented `MobileBottomNav`, the additive baseline/completeness surfaces, public export, `2.33.0` version bump, and a five-item/two-badge harness specimen. **Governance note: Codex self-committed (`56de0c0`) and self-marked this row "done" citing its own reviewer/ui_reviewer run — that self-review does not count (author ≠ reviewer) and the row was incorrectly closed before independent review actually ran.** Corrected here: the Orchestrator independently re-ran the scoped tests (22/22 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the real diff. **`ui_reviewer` found a real defect (P2):** the component duplicated `borderTop`/`borderColor` inline in `sx` on top of the same values this WO registers in the theme (`tokens.js`/`createAppTheme.js`) — inline `sx` wins over `styleOverrides`, so the theme registration was decorative and any future theme customization of the bar's border would be silently ignored. Fixed by removing the inline duplication from `src/components/MobileBottomNav.jsx`; re-verified 22/22 green, `tsc` clean. **`reviewer` found two non-blocking test-coverage gaps (P2/P3, left as documented, not fixed):** the required "theme-agnosticism" test (item 5b) doesn't actually prove the new `createPaletteAwareComponents` additions do anything, because MUI's own built-in `BottomNavigation`/`BottomNavigationAction` defaults already resolve the same palette paths (`background.paper`/`text.secondary`/`primary.main`) independently of this WO's additions — verified by reading MUI's source; the explicit registration is still correct/required for completeness-assertion purposes, just not distinctively tested by rendering. The `emphasis` treatment's computed colours (raised icon, `background.paper` vs jg's `background.white`) have no dedicated assertion. **Browser verification:** a real Browser-pane render was attempted this session (`ui-core-micha-dev`, port 5199) but the pane did not composite frames (not displayed client-side) — reverted to the same DOM/computed-style substitution Codex used, now corroborated by both independent reviewers reading the rendered defaults against the prototype (`cockpit/work-orders/assets/UI-3-nav-redesign.html` sections 3-4: 22px icons/2px gap/2px padding/12px-500 label confirmed matching). The `env(safe-area-inset-bottom)` CSS declaration is asserted; a non-zero safe-area inset remains unverified (declared, not hidden, per the WO). Precondition of `cockpit/UI-3` and `jg-ferien/NAV-36`. |

package/dev/entries.jsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import InboxIcon from '@mui/icons-material/Inbox';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ScheduleIcon from '@mui/icons-material/Schedule';
+import ViewKanbanIcon from '@mui/icons-material/ViewKanban';
 import {
   Alert,
   Box,
@@ -28,6 +33,7 @@ import {
 } from '@mui/material';
 
 import { AuthContext } from '../src/auth/AuthContext';
+import { MobileBottomNav } from '../src/components/MobileBottomNav';
 import { BarChart } from '../src/components/charts/BarChart';
 import { ChartFrame } from '../src/components/charts/ChartFrame';
 import { LineChart } from '../src/components/charts/LineChart';
@@ -60,6 +66,33 @@ function NotificationBellEntry() {
   );
 }
 
+const MOBILE_NAV_DESTINATIONS = [
+  { route: '/triage', label: 'Triage', icon: InboxIcon, badgeCount: 7 },
+  { route: '/board', label: 'Board', icon: ViewKanbanIcon, badgeCount: 3 },
+  { route: '/chat', label: 'Chat', icon: ChatBubbleOutlineIcon },
+  { route: '/status', label: 'Status', icon: ScheduleIcon },
+  { route: '/more', label: 'Mehr', icon: MoreHorizIcon, emphasis: true },
+];
+
+function MobileBottomNavEntry() {
+  const [activeRoute, setActiveRoute] = useState('/triage');
+
+  return (
+    <Box sx={{ minHeight: 180 }}>
+      <Typography variant="h6">Mobile bottom navigation</Typography>
+      <Typography color="text.secondary">
+        Five destinations, two badges, and one emphasised action. This specimen follows the real
+        browser viewport: resize below 900px to show the bar and to 900px or wider to hide it.
+      </Typography>
+      <MobileBottomNav
+        destinations={MOBILE_NAV_DESTINATIONS}
+        activeRoute={activeRoute}
+        onNavigate={setActiveRoute}
+      />
+    </Box>
+  );
+}
+
 function BarChartEntry() {
   return (
     <ChartFrame title="Monthly cases" subtitle="Standalone BarChart entry" minHeight={360}>
@@ -223,6 +256,19 @@ function ThemeBaselineEntry() {
           />
         </ChartFrame>
       </Stack>
+
+      <Stack
+        direction="column"
+        spacing={2}
+        sx={{ '@container (min-width: 900px)': { flexDirection: 'row' } }}
+      >
+        <ChartFrame title="Default titleVariant" subtitle="h6, unchanged for existing callers" minHeight={160}>
+          <Typography variant="body2" color="text.secondary">Panel body placeholder</Typography>
+        </ChartFrame>
+        <ChartFrame title="Dense panel title" subtitle="titleVariant=&quot;subtitle2&quot;" titleVariant="subtitle2" minHeight={160}>
+          <Typography variant="body2" color="text.secondary">Panel body placeholder</Typography>
+        </ChartFrame>
+      </Stack>
     </Stack>
   );
 }
@@ -390,6 +436,7 @@ function MessagingScopeConfigEntry() { return <MessagingProvider api={messagingH
 
 export const entries = [
   { id: 'theme-baseline', label: 'Theme / Shared baseline', Component: ThemeBaselineEntry },
+  { id: 'mobile-bottom-nav', label: 'Navigation / Mobile bottom nav', Component: MobileBottomNavEntry },
   { id: 'notification-bell', label: 'Notifications / Bell', Component: NotificationBellEntry },
   { id: 'bar-chart', label: 'Charts / BarChart', Component: BarChartEntry },
   { id: 'time-series-chart', label: 'Charts / TimeSeriesChart', Component: TimeSeriesChartEntry },

package/dev/main.jsx

@@ -30,12 +30,14 @@ function Harness() {
   const [mode, setMode] = useState('light');
   const [width, setWidth] = useState('desktop');
   const entry = entries.find((item) => item.id === entryId) || entries[0];
-  const effectiveMode = entry.id === 'theme-baseline' ? 'light' : mode;
+  const usesBaselineTheme = ['theme-baseline', 'mobile-bottom-nav'].includes(entry.id);
+  const usesBrowserViewport = entry.id === 'mobile-bottom-nav';
+  const effectiveMode = usesBaselineTheme ? 'light' : mode;
   const theme = useMemo(
-    () => entry.id === 'theme-baseline'
+    () => usesBaselineTheme
       ? createAppTheme({ palette: { primary: { main: '#3D5A99' } } })
       : createTheme({ palette: { mode } }),
-    [entry.id, mode],
+    [mode, usesBaselineTheme],
   );
   const viewportWidth = width === 'mobile' ? 390 : width === 'tablet' ? 768 : 1180;
   const Entry = entry.Component;
@@ -47,8 +49,12 @@ function Harness() {
         <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ mb: 3 }} alignItems={{ md: 'center' }}>
           <Typography variant="h5" sx={{ mr: 'auto' }}>ui-core-micha harness</Typography>
           <FormControl size="small" sx={{ minWidth: 220 }}><InputLabel id="entry-label">Entry</InputLabel><Select labelId="entry-label" label="Entry" value={entryId} onChange={(event) => setEntryId(event.target.value)}>{entries.map((item) => <MenuItem key={item.id} value={item.id}>{item.label}</MenuItem>)}</Select></FormControl>
-          <ButtonGroup size="small"><Button variant={effectiveMode === 'light' ? 'contained' : 'outlined'} onClick={() => setMode('light')}>Light</Button><Button disabled={entry.id === 'theme-baseline'} variant={effectiveMode === 'dark' ? 'contained' : 'outlined'} onClick={() => setMode('dark')}>Dark</Button></ButtonGroup>
-          <ButtonGroup size="small">{['mobile', 'tablet', 'desktop'].map((size) => <Button key={size} variant={width === size ? 'contained' : 'outlined'} onClick={() => setWidth(size)}>{size}</Button>)}</ButtonGroup>
+          <ButtonGroup size="small"><Button variant={effectiveMode === 'light' ? 'contained' : 'outlined'} onClick={() => setMode('light')}>Light</Button><Button disabled={usesBaselineTheme} variant={effectiveMode === 'dark' ? 'contained' : 'outlined'} onClick={() => setMode('dark')}>Dark</Button></ButtonGroup>
+          {usesBrowserViewport ? (
+            <Typography variant="caption" color="text.secondary">Use the browser viewport for this specimen</Typography>
+          ) : (
+            <ButtonGroup size="small">{['mobile', 'tablet', 'desktop'].map((size) => <Button key={size} variant={width === size ? 'contained' : 'outlined'} onClick={() => setWidth(size)}>{size}</Button>)}</ButtonGroup>
+          )}
         </Stack>
         <Paper variant="outlined" sx={{ width: viewportWidth, maxWidth: '100%', mx: 'auto', p: 3, overflow: 'hidden', containerType: 'inline-size' }}>
           <Entry />

package/dist/components/MobileBottomNav.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Badge from '@mui/material/Badge';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
+export function MobileBottomNav({ destinations, activeRoute, onNavigate, hideAbove = 'md', zIndex = defaultZIndex, }) {
+    const theme = useTheme();
+    const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+    if (isHidden)
+        return null;
+    return (_jsx(BottomNavigation, { value: activeRoute, onChange: (_, route) => onNavigate(route), showLabels: true, sx: {
+            position: 'fixed',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex,
+            paddingBottom: 'env(safe-area-inset-bottom)',
+        }, children: destinations.map((destination) => {
+            var _a;
+            const Icon = destination.icon;
+            const selected = activeRoute === destination.route;
+            const icon = (_jsx(Icon, { sx: destination.emphasis ? {
+                    p: 0.8,
+                    borderRadius: '50%',
+                    backgroundColor: selected ? 'primary.main' : 'background.paper',
+                    color: selected ? 'primary.contrastText' : 'primary.main',
+                    boxShadow: 'none',
+                    transform: 'translateY(-4px)',
+                } : undefined }));
+            return (_jsx(BottomNavigationAction, { value: destination.route, label: (_a = destination.shortLabel) !== null && _a !== void 0 ? _a : destination.label, "aria-label": destination.shortLabel != null ? destination.label : undefined, "aria-current": selected ? 'page' : undefined, icon: destination.badgeCount ? (_jsx(Badge, { badgeContent: destination.badgeCount, color: "error", max: 99, children: icon })) : icon }, destination.route));
+        }) }));
+}

package/dist/components/charts/ChartFrame.js

@@ -6,7 +6,7 @@ import { exportChartPng, exportChartSvg } from './exportChart';
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
  */
-export function ChartFrame({ title, subtitle, toolbar, controls, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, aspect, exportOptions = false, onExportSvg, onExportPng, meta, ariaLabel, children, variant = 'outlined', sx, }) {
+export function ChartFrame({ title, subtitle, toolbar, controls, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, aspect, exportOptions = false, onExportSvg, onExportPng, meta, ariaLabel, children, variant = 'outlined', titleVariant = 'h6', sx, }) {
     const { t } = useTranslation();
     const titleId = useId();
     const chartRef = useRef(null);
@@ -40,7 +40,7 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
     else if (isEmpty) {
         content = _jsx(Alert, { severity: "info", children: emptyMessage || t('ChartFrame.EMPTY_DEFAULT') });
     }
-    return (_jsxs(Paper, { variant: variant, sx: Object.assign({ p: 2 }, sx), children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: "h6", children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
+    return (_jsxs(Paper, { variant: variant, sx: Object.assign({ p: 2 }, sx), children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: titleVariant, children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
                     width: '100%',
                     minHeight,
                     aspectRatio: aspect,

package/dist/index.js

@@ -30,6 +30,7 @@ export { RegistrationMethodsManager } from './components/RegistrationMethodsMana
 export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
+export { MobileBottomNav } from './components/MobileBottomNav';
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';
 export { BarChart } from './components/charts/BarChart';

package/dist/theme/createAppTheme.js

@@ -100,6 +100,22 @@ function createPaletteAwareComponents(palette) {
                 outlined: { borderColor: palette.controlBorder.main },
             },
         },
+        MuiBottomNavigation: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: palette.background.paper,
+                    borderColor: palette.divider,
+                },
+            },
+        },
+        MuiBottomNavigationAction: {
+            styleOverrides: {
+                root: {
+                    color: palette.text.secondary,
+                    '&.Mui-selected': { color: palette.primary.main },
+                },
+            },
+        },
         MuiOutlinedInput: {
             styleOverrides: {
                 root: {

package/dist/theme/themeCompleteness.js

@@ -72,6 +72,26 @@ const COMPONENT_SURFACES = [
         var _a, _b, _c, _d, _e, _f;
         return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
     }),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.borderTop'),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.borderColor'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.minWidth'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.maxWidth'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'height'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.color'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontSize'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontWeight'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.lineHeight'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.maxWidth'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.whiteSpace'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.overflow'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.textOverflow'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.label', '&.Mui-selected', 'fontSize'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '&.Mui-selected', 'color'),
     componentPath('MuiTextField', 'defaultProps.variant'),
     componentPath('MuiTextField', 'styleOverrides.root.minHeight'),
     componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),

package/dist/theme/tokens.js

@@ -260,6 +260,32 @@ export const BASELINE_STATIC = {
                 },
             },
         },
+        MuiBottomNavigation: {
+            styleOverrides: {
+                root: { borderTop: '1px solid', boxShadow: 'none' },
+            },
+        },
+        MuiBottomNavigationAction: {
+            styleOverrides: {
+                root: {
+                    minWidth: 0,
+                    maxWidth: 'none',
+                    padding: '0 2px',
+                    gap: '2px',
+                    '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+                },
+                label: {
+                    fontSize: '12px',
+                    fontWeight: 500,
+                    lineHeight: 1.2,
+                    maxWidth: '100%',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    '&.Mui-selected': { fontSize: '12px' },
+                },
+            },
+        },
         MuiTextField: {
             defaultProps: { variant: 'outlined' },
             styleOverrides: { root: Object.assign({ minHeight: 40 }, coarseHitArea) },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.31.1",
+  "version": "2.33.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/MobileBottomNav.jsx

@@ -0,0 +1,68 @@
+import Badge from '@mui/material/Badge';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+
+const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
+
+export function MobileBottomNav({
+  destinations,
+  activeRoute,
+  onNavigate,
+  hideAbove = 'md',
+  zIndex = defaultZIndex,
+}) {
+  const theme = useTheme();
+  const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+
+  if (isHidden) return null;
+
+  return (
+    <BottomNavigation
+      value={activeRoute}
+      onChange={(_, route) => onNavigate(route)}
+      showLabels
+      sx={{
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex,
+        paddingBottom: 'env(safe-area-inset-bottom)',
+      }}
+    >
+      {destinations.map((destination) => {
+        const Icon = destination.icon;
+        const selected = activeRoute === destination.route;
+        const icon = (
+          <Icon
+            sx={destination.emphasis ? {
+              p: 0.8,
+              borderRadius: '50%',
+              backgroundColor: selected ? 'primary.main' : 'background.paper',
+              color: selected ? 'primary.contrastText' : 'primary.main',
+              boxShadow: 'none',
+              transform: 'translateY(-4px)',
+            } : undefined}
+          />
+        );
+
+        return (
+          <BottomNavigationAction
+            key={destination.route}
+            value={destination.route}
+            label={destination.shortLabel ?? destination.label}
+            aria-label={destination.shortLabel != null ? destination.label : undefined}
+            aria-current={selected ? 'page' : undefined}
+            icon={destination.badgeCount ? (
+              <Badge badgeContent={destination.badgeCount} color="error" max={99}>
+                {icon}
+              </Badge>
+            ) : icon}
+          />
+        );
+      })}
+    </BottomNavigation>
+  );
+}

package/src/components/charts/ChartFrame.jsx

@@ -32,6 +32,7 @@ export function ChartFrame({
   ariaLabel,
   children,
   variant = 'outlined',
+  titleVariant = 'h6',
   sx,
 }) {
   const { t } = useTranslation();
@@ -71,7 +72,7 @@ export function ChartFrame({
     <Paper variant={variant} sx={{ p: 2, ...sx }}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }}>
         <Box>
-          <Typography id={titleId} variant="h6">{title}</Typography>
+          <Typography id={titleId} variant={titleVariant}>{title}</Typography>
           {subtitle && <Typography variant="body2" color="text.secondary">{subtitle}</Typography>}
         </Box>
         {toolbar && <Box>{toolbar}</Box>}

package/src/index.js

@@ -48,6 +48,7 @@ export { RegistrationMethodsManager } from './components/RegistrationMethodsMana
 export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
+export { MobileBottomNav } from './components/MobileBottomNav';
 
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';

package/src/theme/createAppTheme.js

@@ -116,6 +116,22 @@ function createPaletteAwareComponents(palette) {
         outlined: { borderColor: palette.controlBorder.main },
       },
     },
+    MuiBottomNavigation: {
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.background.paper,
+          borderColor: palette.divider,
+        },
+      },
+    },
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          color: palette.text.secondary,
+          '&.Mui-selected': { color: palette.primary.main },
+        },
+      },
+    },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {

package/src/theme/themeCompleteness.js

@@ -96,6 +96,26 @@ const COMPONENT_SURFACES = [
     (theme) => theme.components?.MuiChip?.styleOverrides?.root
       ?.['@media (any-pointer: coarse)']?.['&::after']?.inset,
   ),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.borderTop'),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.borderColor'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.minWidth'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.maxWidth'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'height'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.color'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontSize'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontWeight'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.lineHeight'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.maxWidth'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.whiteSpace'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.overflow'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.textOverflow'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.label', '&.Mui-selected', 'fontSize'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '&.Mui-selected', 'color'),
   componentPath('MuiTextField', 'defaultProps.variant'),
   componentPath('MuiTextField', 'styleOverrides.root.minHeight'),
   componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),

package/src/theme/tokens.js

@@ -306,6 +306,32 @@ export const BASELINE_STATIC = {
         },
       },
     },
+    MuiBottomNavigation: {
+      styleOverrides: {
+        root: { borderTop: '1px solid', boxShadow: 'none' },
+      },
+    },
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          minWidth: 0,
+          maxWidth: 'none',
+          padding: '0 2px',
+          gap: '2px',
+          '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+        },
+        label: {
+          fontSize: '12px',
+          fontWeight: 500,
+          lineHeight: 1.2,
+          maxWidth: '100%',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          '&.Mui-selected': { fontSize: '12px' },
+        },
+      },
+    },
     MuiTextField: {
       defaultProps: { variant: 'outlined' },
       styleOverrides: { root: { minHeight: 40, ...coarseHitArea } },

package/tests/ChartFrame.test.jsx

@@ -55,6 +55,48 @@ function renderFrame(props = {}, language = 'en') {
 describe('ChartFrame', () => {
   afterEach(cleanup);
 
+  it('renders the title as h6 by default', () => {
+    renderFrame();
+
+    const title = screen.getByText('Chart title');
+    expect(title.tagName).toBe('H6');
+    expect(title.classList.contains('MuiTypography-h6')).toBe(true);
+  });
+
+  it('renders the title at an overridden typography variant', () => {
+    renderFrame({ titleVariant: 'subtitle2' });
+
+    const title = screen.getByText('Chart title');
+    expect(title.classList.contains('MuiTypography-subtitle2')).toBe(true);
+    expect(title.classList.contains('MuiTypography-h6')).toBe(false);
+  });
+
+  it('leaves the subtitle, toolbar, and footer unchanged for either title variant', () => {
+    for (const titleVariant of [undefined, 'subtitle2']) {
+      const view = renderFrame({
+        titleVariant,
+        toolbar: <button type="button">Period selector</button>,
+        meta: 'Panel metadata',
+        exportOptions: true,
+      });
+
+      const subtitle = screen.getByText('Chart subtitle');
+      expect(subtitle.tagName).toBe('P');
+      expect(subtitle.classList.contains('MuiTypography-body2')).toBe(true);
+      expect(screen.getByRole('button', { name: 'Period selector' })).toBeTruthy();
+
+      const metaNode = screen.getByText('Panel metadata');
+      expect(metaNode.classList.contains('MuiTypography-caption')).toBe(true);
+      const foot = metaNode.parentElement;
+      expect(foot.contains(screen.getByRole('button', { name: 'Export SVG' }))).toBe(true);
+      expect(foot.contains(screen.getByRole('button', { name: 'Export PNG' }))).toBe(true);
+      expect(window.getComputedStyle(foot).justifyContent).toBe('space-between');
+      expect(window.getComputedStyle(foot).borderTopStyle).toBe('solid');
+
+      view.unmount();
+    }
+  });
+
   it('renders its title, subtitle, toolbar, and accessible chart region', () => {
     renderFrame({ toolbar: <button type="button">Period selector</button> });