@micha.bigler/ui-core-micha 2.39.0 → 2.40.0

package/DESIGN.md

@@ -21,6 +21,7 @@ These principles are the spec a **prototype** encodes and the implementation mat
 
 8. **Every chart earns:** axis labels (with units), a legend only when >1 series, a tooltip, theme-token colours, container-responsive sizing, and empty/loading states. **Single-hue for magnitude; diverging (blue/red around zero) ONLY for signed data.** The concrete data palette is a separate layer with a shared `ui-core-micha` default that apps override when their domain calls for it.
    **Dual-axis is a default-off exception, opt-in only** (CHART-5, operator decision): the shared `TimeSeriesChart` preset supports a second y-axis via a per-series `axis: 'secondary'` field specifically for two series sharing one axis at very different scales/units (e.g. a user count vs. hours) where series-toggles alone leave one series unreadable. Reach for it only under that same condition, not as a general layout choice — a single shared axis (or toggles) stays the default everywhere else.
+8a. **Axis titles: categorical axis gets none by default; numeric axis carries the quantity and unit, once.** A categorical axis' ticks are names (`"Session 1"`, ward names) — a title only restates their type; add one only when the ticks are codes or abbreviations whose kind is not self-evident. A numeric axis is meaningless without a title naming the quantity and its unit — unless the ticks already show the unit (`%`, a currency symbol) and the panel heading already names the quantity, in which case a title repeats both. **The unit belongs in the title once, never in every tick** (`"Accessibility (minutes) (min)"` over ticks `"0.0 min"` was measured live — the unit three times on one axis). This is a decision the caller makes per axis, not something the chart preset silently applies or suppresses (THEME-9) — a label the caller deliberately set is never auto-dropped.
 9. **Ground it in the real subject matter.** Faithful structures from the real panels (hram: Morris-tornado, Pareto/knee, CI-strip, allocation-scatter with shape-encoded sources) — no lorem, no generic charts. Hence: **scout the real subject before building.**
 
 ## Craft

package/WORK_ORDERS.md

@@ -80,3 +80,6 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 | AUTH-4 | The account user list on a phone | Gives `UserListComponent` a card layout below `md` — one card per user, email as the title, the two boolean columns as labelled chips, role select and delete in a divided footer, plus a sort control that replaces the column headers the table loses. Above `md` the table is byte-identical. Prototype: [assets/AUTH-4-user-list-card.html](work-orders/assets/AUTH-4-user-list-card.html). Full spec: [work-orders/AUTH-4.md](work-orders/AUTH-4.md). | 2026-08-11 | planned | | Split out of DS-11 by operator decision; fix class chosen by operator (card list, over sticky-first-column and priority-hide). Envelope only (Approval Gate #1 pending). **Authored and parked by operator decision 2026-08-11 — not queued.** It is built on demand, not as SHELL-5's successor; a fresh session should not dispatch it without the operator saying so. When it does run, it runs **after** `SHELL-5` (same screen, different half). The point of this row is that the measurements above are already done, so nobody re-measures. Prototype in scope, so the two-width rendered gate applies. **Measured 2026-08-11 in cockpit** at `innerWidth` 411 (the mobile preset gives 411, not 375): table **1053px inside a 325px container**, container `overflow-x: auto` and **the document does not overflow** — so it is not a broken layout but a desktop table on a phone, with Role and Actions, the two things the screen exists for, entirely outside the view. **The cheap fix was tested and rejected:** 253px of the width is `New` (90) + `Successful Login` (163), both default-on props that `AccountPage` already forwards and cockpit simply left on — but the four remaining columns are 800px against 325px, so configuration cannot fix it. Column defaults deliberately NOT flipped: that would be a silent estate-wide change. SHELL-2's 1045px from 2026-08-08 still holds (+8px), so THEME-4/5 did not move the density. **Four prototype decisions are load-bearing:** email as title with a muted placeholder when the name is absent (verified: a 47-char address wraps to two lines in a 357px card without overflow); the icon-only flags become labelled chips **because a Tooltip is unreachable on a touch pointer**, so that data is effectively absent today; role and delete in a footer behind a divider with the full 44px target; and a **sort control**, because a card list has no column headers — without it the mobile view silently loses a desktop capability. `extraColumns` render as label/value rows with **no new required field**; `extraRowActions` beyond three must collapse into an overflow menu. Reached via `AccountPage`, which **at least ten apps mount**, and ucm has no staging net. |
 | SHELL-6 | A controlled `SectionNav` with no way to open must not render a trigger | In `mode="mobile"` the built-in trigger renders unconditionally (`SectionNav.jsx:246`), while `handleTriggerClick` calls `onOpen?.()` — so a consumer driving `open` itself without `onOpen` gets a button that is visible, focusable and does nothing. Render the trigger only when a click can open the drawer: uncontrolled, or controlled **and** `onOpen` supplied. Plus the component's **render matrix** written into its doc comment. Full spec: [work-orders/SHELL-6.md](work-orders/SHELL-6.md). | 2026-08-11 | done | f119b70 | **Unblocks `jg-ferien/NAV-37`** (`blocked`, `c627d7b`), same shape as `SHELL-3`→`SHELL-4`. **Operator chose the semantics fix over a `showTrigger` prop** — a prop would leave the dead button as the default for every controlled consumer who has not heard of it, turning a defect into a configuration option; a focusable control that performs no action is wrong on its own terms. Fix: `const canOpenTrigger = !isControlled || Boolean(onOpen)`, wrapping only the `<ButtonBase>` trigger — `children` and `<Drawer>` keep rendering unconditionally in every case. Render-matrix doc comment added above the component per the WO's own framing ("not optional documentation; it is the artefact whose absence caused the defect"). `AccountPage`, the only shipped consumer, is uncontrolled and renders identically. Version `2.37.0` → `2.37.1` (patch, defect fix, no API change). **Codex left the diff uncommitted and did not touch this file, as instructed** — fourth consecutive WO where the explicit warning held. **Required test 1's non-vacuity confirmed**: Codex's own landing note states the new regression test was run against the pre-fix code and failed (dead trigger still in the DOM), then passed after the one-line fix — the Orchestrator did not re-verify this specific claim by checking out the prior commit, but both independent reviewers separately read the old-vs-new JSX and found the claim plausible/consistent. **Orchestrator's own verification:** scoped tests 47/47 green, `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory) ran concurrently — **both came back clean, no findings, no fix required.** `reviewer` confirmed the condition is keyed correctly (not on `open`'s value, avoiding the trap the WO's own test 3 exists to catch), `children`/`Drawer` stay unconditional, desktop path untouched, and the render-matrix comment matches the Envelope's table exactly. `ui_reviewer` confirmed the trigger's removal is genuine (conditional JSX unmount, not a CSS-hidden trick left in the accessibility tree/tab order) and no restyle occurred as a side effect; noted two non-blocking residual observations, not fixed: a hypothetical layout-shift if a consumer dynamically toggled `onOpen` on/off at runtime (no current or planned consumer does this), and `resolvedEyebrow`/`resolvedTitle` computed unconditionally even when unused (harmless). No rendered gate needed per the WO's own reasoning — the change is a DOM absence fact, not an appearance, and the test suite is the correct instrument. |
 | THEME-6 | An app-side check for `sx` values the theme already gives | `THEME-4` made shadowing mechanical for the kit's own components; apps have no equivalent — cockpit alone carries **464 `sx` props across 37 files** (measured 2026-08-11). Adds an exported, source-level, **report-only** check an app calls from its own suite, plus the cockpit count. Full spec: [work-orders/THEME-6.md](work-orders/THEME-6.md). | 2026-08-11 | done | 637d262 | DS-18's app-side half. **Codex → Claude fallback**: Codex ran out of workspace credits mid-task (first-hand failure this session, stamped today) — the Orchestrator implemented directly. Author-flip rule applied: independent `reviewer` (Sonnet, mandatory regardless of tier) ran against the Orchestrator's own diff; `ui_reviewer` correctly not spawned, per the WO's own text, since nothing renders. New export `reportRedundantThemeValues(sources, { theme })` in `src/theme/themeCompleteness.js`, reusing existing primitives (`getPath`, `sameValue`, `jsxOpeningTag`, `topLevelSxValue`, `BASELINE_STYLED_MUI_COMPONENTS`, `expandShorthandProperty`) rather than rebuilding them. Attribution by JSX tag name only (root-slot styleOverrides only), literal string/number sx values only — no template literals, identifiers, spreads, or `component={...}` resolution, the bound written open per the WO's instruction. **A real, verified discrepancy in the Envelope's own grounding, corrected here rather than silently chased:** the cited cockpit examples (`borderColor: 'divider'` ×2, `bgcolor: 'background.paper'` ×3, `borderRadius: 1` ×3) all live on `<Box component="button">` in `cockpit/frontend/src/cockpit/ChatView.jsx:75,82,95` — confirmed by direct inspection — which the check's own stated tag-name attribution method cannot catch (`Box` isn't a themed tag, and `component={...}` resolution is explicitly out of scope). The check was NOT widened to chase these numbers. **Run against cockpit's real source** (`cockpit/frontend/src`, 50 `.jsx` files, `theme.js` excluded from the sources passed per the WO's app-side-exclusion instruction — `reportOffPaletteColours`'s own skip pattern left untouched): **27 findings, all `MuiButton.textTransform`, across 4 files** (`BoardView.jsx`, `KnowledgeView.jsx`, `SettingsView.jsx`, one more) — cockpit's buttons redundantly set `sx={{ textTransform: 'none' }}`, matching the baseline's own `MuiButton.styleOverrides.root.textTransform`. This is the honest, real result, reported as a correction to the Envelope's stale grounding, not a match to it. Independent `reviewer` found one real **P2, fixed**: numeric sx values for `borderRadius` and spacing-shorthand aliases were compared raw against the theme's already-resolved CSS value, but MUI actually multiplies a bare number by `theme.shape.borderRadius`/`theme.spacing()` before rendering (e.g. `borderRadius: 8` in sx renders as `8 × shape.borderRadius`, not `8`) — comparing the two raw numbers could produce a **false positive**, exactly the failure mode the WO's own Risks section names as the one to avoid. Fixed by skipping numeric-value comparison entirely for `borderRadius` and every spacing alias (`MUI_NUMERIC_SCALE_PROPERTIES`), erring toward a false negative (the accepted lower bound) rather than a false positive; two regression tests added (the specific false-positive case, plus a corrected version of the "component the theme doesn't style" test, which had used an off-list tag rather than exercising the intended undefined-styleOverride branch — also a reviewer note, fixed). Re-verified: cockpit's 27/27 findings unchanged by the fix (all string-valued `textTransform`, not numeric). Scoped tests 37/37 green, `tsc` clean. Version `2.37.1` → `2.38.0` (minor, new exported API). No rendered gate — static/logic change, no fix shipped anywhere (report-only, per the WO's explicit non-goal). |
+| THEME-7 | Guidance: a series slot that collides with an app's own accent | The baseline ships six `dataSeries.categorical` colours and no guidance for the case where a slot sits too close to something the consuming app owns. Measured case, not hypothesis (hram `IMARA-2`, frozen 2026-08-13, Lab ΔE calibrated against that operator's own rejected pair at ΔE 16.6): series 1 `#3D5A99` vs hram's primary `#2F4F96` = **ΔE 7.2**, and series 3 `#2E8F8A` vs hram's DALYs identity `#1F7A72` = **ΔE 8.3** (same hue, one lightness step). hram resolved both app-side by dropping slot 1 and replacing slot 3 with a navy. This WO adds the missing guidance to `DESIGN.md` and the token docs — how to check an accent against the palette, and why a colliding slot should be DROPPED rather than nudged — plus an explicit decide-and-record on whether to ship anything beyond guidance (ΔE helper / documented extension sequence / nothing). **Explicitly not a defect report: the six shipped values stay unchanged**, since they are correct for any app without a muted-indigo accent or a teal domain identity. Full order [`work-orders/THEME-7.md`](work-orders/THEME-7.md) | 2026-08-13 | planned |  | Tier 3 (shared-core surface) though documentation-led; independent `reviewer` mandatory. Raised by the hram/Imara design-language work at the operator's explicit instruction to take the finding upstream rather than keep it app-local. Stated limitation to keep in the text: the guidance derives from ONE app's experience and its threshold is calibrated on one operator's judgement — a starting point, not a standard. |
+| THEME-8 | Touch-Ziel des Selects sitzt am falschen Element und drückt den Text aus der Mitte | `src/theme/tokens.js` setzt die Touch-Mindesthöhe (40, im `@media (any-pointer: coarse)`-Zweig 44) auf `MuiSelect.styleOverrides.**select**` — also auf das INNERE Element, das MUIs variantenabhängiges Padding trägt. Beim `standard`-Select ist dieses Padding oben-verankert (`1px 24px 5px 0`), der Zusatzraum landet komplett unten, der Text reitet oben. **Von den sechs Komponenten mit Touch-Ziel (`MuiButton`, `MuiIconButton`, `MuiSelect`, `MuiCheckbox`, `MuiFormControlLabel`, `MuiTextField`) ist `MuiSelect` die EINZIGE, die einen Nicht-Root-Slot adressiert** — eine Inkonsistenz in der Baseline selbst, keine Designentscheidung. **Live gemessen** (hram, Administration → Users, Select in einer Tabellenzelle): heute 0 px über / 0 px unter dem Text (Inneres auf 44 px gestreckt); nach Verschieben der Regel auf die Wurzel **9 px / 9 px** — exakt zentriert, weil `MuiInputBase-root` bereits `display:flex; align-items:center` ist. Voller Auftrag [`work-orders/THEME-8.md`](work-orders/THEME-8.md) | 2026-08-14 | done (npm publish; consumer pin bumps still open) | ae0745d | Tier 3 (Shared-Core). Codex out of credits (2026-08-14, `.claude/codex-status.md`), Orchestrator implemented directly — authorship flip made `reviewer` + `ui_reviewer` mandatory (already required at Tier 3): both ran, no blocking findings. `reviewer`: config-level test doesn't render/measure the DOM (P3, accepted — Envelope's own proof is the live measurement, already done), no version bump at review time (P2, resolved by 2.39.0→2.39.1 in the same commit). `ui_reviewer`: MuiSelect's coarse branch still hand-writes `{minHeight:44}` instead of the shared `coarseHitArea` helper (P3, pre-existing, not introduced here). Both independently traced MUI source (`Select.js`/`InputBase.js`) and confirmed the root-slot fix reaches the right DOM node and centres via the inherited flex layout. No live browser re-render done (Claude-Code preview-scoping override: small/medium frontend change, code reasoning + tests suffice). **Wert bleibt 40/44 — nur der Anker ist falsch.** Verstärkt auf Touch-Geräten: der `coarse`-Zweig greift auch auf Laptops mit Touchscreen (Operator-Rechner meldet `any-pointer: coarse`), dort 44 statt 40 px — gleicher Fehler, 4 px grösser. **Estate-weite Sichtveränderung**: alle konsumierenden Apps bekommen re-zentrierte Selects; in den Release Notes nennen. **Nicht am npm-Publish abschliessen** — die Pin-Bumps der Konsumenten (zuerst hram, wo es gefunden wurde) gehören dazu. Gefunden beim Messen einer vermeintlichen hram-Regression; die App-seitige Schwester ist hram FIX-11 (anderer Fehler, gleiche Felder). |
+| THEME-9 | Diagramme geben mehr Platz an Achsen-Mobiliar als an Daten | **In einer konsumierenden App (hram) gemessen, nicht geschätzt.** Eine KPI-Karte „Coverage“: Karte 470 × 372 → Chart-Box 436 × **300** (`minHeight:300`, das SVG darin ist 270 hoch → **30 px tot**) → SVG 436 × 270 → **Zeichenfläche 301 × 175**. Die Zeichenfläche ist damit **45 % des SVG und 30 % der Karte**; innerhalb des SVG gehen 135 px Breite und 95 px Höhe verloren. Vom Kartenrand bis zur ersten Tick-Zahl sind es 104 px, davon **60 px blanker Raum zwischen SVG-Rand und Achsentitel**; unter dem Achsentitel liegen 30 px leer im SVG plus 32 px bis zur Karte. **Drei weitere gemessene Befunde:** (1) `withAxisDefaults` endet mit `label: axis.label || label` und setzt damit EIN `yAxisLabel` auf JEDE Achse — in hrams Doppelachsen-Chart tragen beide Y-Achsen dieselbe 43-Zeichen-Zeile, je 65 px eines 206-px-Charts. (2) Der Achsentitel wird IN das Tick-Band gesetzt: auf der Accessibility-Ansicht überlappen **4 von 4** Y-Ticks den Titel, dasselbe passiert mit um 45° gedrehten Ortsnamen über dem Titel „Ward“. (3) Ticks tragen Einheit und Zier-Nachkommastellen (`0.0 min`, `50.0 min`) — dieselbe Einheit steht nochmals doppelt im Titel (`Accessibility (minutes) (min)`); anderswo kürzt MUI die Ticks zu `0.0…`. `BarChart` setzt gar keinen Standard-Formatter, `TimeSeriesChart` schon — also löst es jede App neu. Voller Auftrag [`work-orders/THEME-9.md`](work-orders/THEME-9.md) | 2026-08-14 | done (npm publish; consumer pin bumps still open) | 3fd6097 | Tier 3 (Shared-Core). Codex bereits als `unavailable` für heute vermerkt (`.claude/codex-status.md`, THEME-8) — direkt in Claude implementiert, Autorenschaft geflippt, `reviewer` + `ui_reviewer` liefen parallel (ohnehin Pflicht bei Tier 3). **`reviewer` R1 (P1, behoben):** die Serie-zu-Achse-Zuordnung in `sizeYAxisForContent` traf `undefined===undefined` statt MUI's echter Default-Regel (unmarkierte Serie → erste Achse im Array) — machte den Sizer zum stillen No-op genau auf der Primärachse des Doppelachsen-Falls, der diesen WO motiviert hat; Regressionstest ergänzt. **`ui_reviewer` U1 (P1, behoben):** `DESIGN.md` #8a versprach "keine Titel-Pflicht bei kategorialer Achse", aber `BarChart`/`LineChart` erzwangen beide Labels per `throw` — Labels jetzt optional, sonst wäre die Regel für FIX-13 unbrauchbar gewesen. **U3 (P2, behoben):** Sizer nutzte den Theme-Default-Font statt der per Achse gesetzten `tickLabelStyle.fontSize`. **U5 (P3, behoben):** Label-Dicke war an `theme.typography.body1` gekoppelt, obwohl MUI intern hart 14px setzt — jetzt eigene benannte Konstante. **U2 (P2, akzeptierter Rest):** Schätzung kennt MUI's "nice-tick"-Rundung nicht exakt; bestehender 1.1×-Sicherheitsfaktor federt kleine Abweichungen ab, der gerenderte Check ist der eigentliche Beweis. **U4:** Behauptung, `TimeSeriesChart` umgehe `withAxisDefaults`/`sizeYAxisForContent`, am Quellcode widerlegt (rendert über die eigene `<BarChart>`-Komponente). Affected-Set grün (60 Tests). **Live-Nachmessung in hram nicht möglich** — Browser-Pane liefert nur für den vom Operator angezeigten Tab reale Viewport-Masse (neue Tabs 0×0, negative-Width-SVG-Fehler als direkte Folge, kein Codefehler); die "vorher"-Zahlen der Coverage-Karte wurden LIVE aus dem korrekt angezeigten hram-Tab gemessen (siehe WO) und bestätigten exakt die im Envelope genannten 60px/104px — zurückgeführt auf hrams eigenes `margin.left=60`, das sich ADDITIV mit MUIs Achsenbreiten-Reservierung addiert (kein ucm-Fehler). Die "nachher"-Messung folgt mit FIX-13 nach dem Pin-Bump (ohnehin dort vorgesehen). Fünf Posten: Ränder/Achsenreservierung verkleinern · Achsentitel nicht mehr broadcasten (mit Test, genau der Defekt der ausgeliefert wurde) · Titel aus dem Tick-Band halten · Standard-Tick-Formatter · Entscheidungsregel in `DESIGN.md`. **Gemessene Warnung gegen naives `Intl`-Compact:** Deutsch kürzt Tausender GAR NICHT (`12'500` bleibt), Swahili stellt ein Wort voran (`elfu 12.5`, breiter als die Rohzahl) — kompakte Notation allein löst das Breitenproblem also nicht und verschlimmert es in einer Sprache; ein handgeschriebenes `B` wäre auf Deutsch zudem FALSCH (Billion = 10¹², `Intl` sagt korrekt `Mrd.`). **Regel:** kategoriale Achse → kein Titel (Ticks sind Namen); numerische Achse → Titel trägt Grösse und Einheit, ausser die Ticks zeigen die Einheit schon (`%`); Einheit einmal im Titel, nie in jedem Tick. **Ränder kürzen und Überlappung beheben ziehen gegeneinander** — zusammen machen und messen, sonst erzeugt das eine das andere neu. Nicht am Publish abschliessen: App-Pins nachziehen, hram zuerst (dortiger Nachzug = FIX-13). |

package/dist/components/charts/BarChart.js

@@ -13,22 +13,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
-import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
 /**
- * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis (BarChart's default x-axis
+ * shape) needs no title by default -- its ticks are names -- and a numeric
+ * axis needs one only unless its unit is already visible in the ticks and
+ * the panel heading already names the quantity. Omitting one never suppresses
+ * a label the caller DID set (`withAxisDefaults` only ever falls back onto
+ * an axis without its own `label`).
  */
 export function BarChart(_a) {
     var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slotProps"]);
     const theme = useTheme();
+    const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
-    if (!xAxisLabel || !yAxisLabel) {
-        throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
-    }
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'band', data: [] }, theme.typography.caption.fontSize);
-    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
+    const sizedYAxis = sizeYAxisForContent(labelledYAxis, series, theme.typography.caption.fontSize);
     const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
-    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: rotatedTickSpace.xAxis, yAxis: sizedYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/LineChart.js

@@ -13,9 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { LineChart as MuiLineChart, MarkElement as MuiMarkElement, } from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
-import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
 // Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
 // `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
 // override in src/theme/tokens.js as the preferred mechanism, with a
@@ -31,19 +32,24 @@ function FilledMarkElement(_a) {
     return _jsx(MuiMarkElement, Object.assign({}, props, { color: color, style: Object.assign({ fill: color }, style) }));
 }
 /**
- * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts line preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis needs no title by default
+ * -- its ticks are names -- and a numeric axis needs one only unless its
+ * unit is already visible in the ticks and the panel heading already names
+ * the quantity. Omitting one never suppresses a label the caller DID set
+ * (`withAxisDefaults` only ever falls back onto an axis without its own
+ * `label`).
  */
 export function LineChart(_a) {
     var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slots, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slots", "slotProps"]);
     const theme = useTheme();
+    const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
-    if (!xAxisLabel || !yAxisLabel) {
-        throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
-    }
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'point', data: [] }, theme.typography.caption.fontSize);
-    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
-    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
     const defaultedSeries = series.map((item) => (Object.assign({ showMark: false, labelMarkType: 'square' }, item)));
-    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: defaultedSeries, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    const sizedYAxis = sizeYAxisForContent(labelledYAxis, defaultedSeries, theme.typography.caption.fontSize);
+    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: defaultedSeries, xAxis: rotatedTickSpace.xAxis, yAxis: sizedYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/chartDefaults.js

@@ -7,7 +7,18 @@ export function withGridDefaults(grid) {
 }
 export function withAxisDefaults(axes, label, defaults, tickFontSize) {
     const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
-    return values.map((axis) => (Object.assign(Object.assign(Object.assign({}, defaults), axis), { tickLabelStyle: Object.assign({ fontSize: tickFontSize }, axis.tickLabelStyle), label: axis.label || label })));
+    return values.map((axis, index) => (Object.assign(Object.assign(Object.assign({}, defaults), axis), { tickLabelStyle: Object.assign({ fontSize: tickFontSize }, axis.tickLabelStyle), 
+        // THEME-9: the single `label` argument is the caller's ONE string for
+        // this whole axis family (xAxisLabel/yAxisLabel) -- it may only ever
+        // fall back onto ONE axis. Applying it via .map() to every entry
+        // broadcast the identical label onto every axis in a multi-axis array
+        // (measured live: hram's dual-axis chart carried the same 43-character
+        // label on both y-axes). Only the first entry -- the common single-axis
+        // case is index 0 -- gets the fallback; a caller building a genuine
+        // multi-axis array must label each entry itself (as TimeSeriesChart's
+        // own secondary-axis support already does), exactly like MUI's own
+        // default `position: 'left'` (only the first entry, MUI docs).
+        label: axis.label || (index === 0 ? label : undefined) })));
 }
 function cssLengthToPixels(value) {
     if (typeof value === 'number')
@@ -78,6 +89,133 @@ export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
         ? Object.assign(Object.assign({}, margin), { bottom: MUI_CHART_MARGIN_BOTTOM + largestExtraHeight }) : margin;
     return { xAxis: spacedXAxis, margin: spacedMargin };
 }
+// THEME-9: MUI X-Charts' own default y-axis width is a flat 45px (ticks) +
+// 20px (label, if present) = 65px regardless of what the ticks actually say
+// -- confirmed against @mui/x-charts' own DEFAULT_AXIS_SIZE_WIDTH /
+// AXIS_LABEL_DEFAULT_HEIGHT constants and its `useChartDimensions` selector
+// (drawingArea.left = margin.left + axisSizeLeft, i.e. margin and axis size
+// are ADDITIVE, not one containing the other). That flat default is both too
+// generous for short ticks ("0%"/"50%"/"100%") and too stingy for wide ones
+// ("50.0 min"), which is exactly the measured overlap on the Accessibility
+// y-axis. Mirrors spaceForRotatedTicks' existing text-width heuristic below.
+const Y_AXIS_TICK_SIZE = 6;
+const Y_AXIS_TICK_LABEL_GAP = 2;
+const Y_AXIS_LABEL_TICK_GAP = 2;
+// A rotated (90deg) axis-label's line-box "thickness" -- what it costs in
+// WIDTH once rotated -- runs a bit past its raw font size once ascender/
+// descender room is included; matches the ~18px measured live for a 14px
+// label (14 * 1.3 ~= 18).
+const Y_AXIS_LABEL_THICKNESS_FACTOR = 1.3;
+// A small safety margin on the estimate: `spaceForRotatedTicks`'s own risk
+// note applies here too -- a too-tight cut recreates the overlap it was
+// meant to fix, and glyph-width heuristics are approximate by nature.
+const Y_AXIS_WIDTH_SAFETY_FACTOR = 1.1;
+// MUI X-Charts' ChartsYAxisImpl hardcodes the axis-label font at 14px
+// (`additionalProps.style: {...theme.typography.body1, fontSize: 14, ...}`
+// -- fontSize:14 is set AFTER the theme.typography.body1 spread, so it wins
+// regardless of what body1 actually resolves to). Matching that literal
+// constant here -- rather than reading it off `theme.typography.body1` --
+// keeps this sizing correct even if this package's body1 size ever changes;
+// coupling it to body1 was only ever coincidentally right because body1
+// happens to be 14px today.
+const MUI_AXIS_LABEL_FONT_SIZE_PX = 14;
+function longestFormattedTick(values, valueFormatter) {
+    return values.reduce((longest, value) => {
+        let text;
+        try {
+            text = valueFormatter ? String(valueFormatter(value, { location: 'tick' })) : String(value);
+        }
+        catch (_a) {
+            // Some formatters require MUI's complete scale context; falling back
+            // to the raw value is conservative -- it reserves at least as much
+            // space as the unformatted number would need.
+            text = String(value);
+        }
+        return text.length > longest.length ? text : longest;
+    }, '');
+}
+/**
+ * Sizes a linear y-axis to its actual tick content instead of MUI's flat
+ * default. Only touches axes the caller left unsized (`axis.width == null`)
+ * and only linear/numeric ones -- a categorical axis's ticks are names, not
+ * numbers, and sizing those is not this function's job. Candidate values come
+ * from the axis' own `min`/`max` when the caller set them (as every current
+ * consumer does), falling back to the series actually plotted against this
+ * axis; if neither yields a candidate, the axis is left untouched rather than
+ * guessed at.
+ *
+ * `tickFontSize` is only the FALLBACK -- an axis' own `tickLabelStyle.fontSize`
+ * (set by `withAxisDefaults`, itself overridable per-axis by the caller) is
+ * read first, so a caller-tuned tick font is sized correctly rather than
+ * against the package-wide default. The axis LABEL's font is not a caller
+ * knob at all (`MUI_AXIS_LABEL_FONT_SIZE_PX` -- MUI hardcodes it).
+ *
+ * The series-to-axis match for the fallback deliberately mirrors MUI's own
+ * default-assignment rule, not a naive `undefined === undefined`: a series
+ * with no explicit `yAxisId` is assigned to the FIRST axis in the array
+ * (`yAxisIds[0]` in MUI's own selector), never to "no id". Matching only
+ * `undefined === undefined` left the primary axis of a real dual-axis chart
+ * (id `'primary'`, its series never set `yAxisId`) with zero matched series
+ * and therefore MUI's untouched flat default -- a silent no-op on exactly
+ * the dual-axis case this WO was measured against.
+ */
+export function sizeYAxisForContent(yAxis, series, tickFontSize) {
+    var _a;
+    const fallbackTickFontSizePx = cssLengthToPixels(tickFontSize);
+    const defaultAxisId = (_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.id;
+    return yAxis.map((axis) => {
+        var _a;
+        if (axis.width != null)
+            return axis;
+        if (axis.scaleType && axis.scaleType !== 'linear')
+            return axis;
+        const tickFontSizePx = cssLengthToPixels((_a = axis.tickLabelStyle) === null || _a === void 0 ? void 0 : _a.fontSize) || fallbackTickFontSizePx;
+        if (tickFontSizePx === 0)
+            return axis;
+        const candidates = [];
+        if (typeof axis.min === 'number')
+            candidates.push(axis.min);
+        if (typeof axis.max === 'number')
+            candidates.push(axis.max);
+        if (candidates.length === 0) {
+            (series || [])
+                .filter((item) => { var _a; return ((_a = item.yAxisId) !== null && _a !== void 0 ? _a : defaultAxisId) === axis.id; })
+                .forEach((item) => (item.data || []).forEach((value) => {
+                if (typeof value === 'number')
+                    candidates.push(value);
+            }));
+        }
+        if (candidates.length === 0)
+            return axis;
+        const longestTick = longestFormattedTick(candidates, axis.valueFormatter);
+        const tickTextWidth = Math.max(tickFontSizePx, longestTick.length * tickFontSizePx * AVERAGE_GLYPH_WIDTH_EM);
+        const labelThickness = axis.label
+            ? Math.ceil(MUI_AXIS_LABEL_FONT_SIZE_PX * Y_AXIS_LABEL_THICKNESS_FACTOR) + Y_AXIS_LABEL_TICK_GAP
+            : 0;
+        const width = Math.ceil((tickTextWidth + Y_AXIS_TICK_SIZE + Y_AXIS_TICK_LABEL_GAP + labelThickness)
+            * Y_AXIS_WIDTH_SAFETY_FACTOR);
+        return Object.assign(Object.assign({}, axis), { width });
+    });
+}
+/**
+ * Locale-correct, unit-free tick numbers as the default -- BarChart set none
+ * at all (raw numbers straight from the domain), and a hand-rolled `Intl`
+ * compact-notation default was measured to be actively wrong: German does
+ * not compact thousands at all (`12'500` stays `12'500`) and Swahili prepends
+ * a word that is WIDER than the raw number (`elfu 12.5`) -- compact notation
+ * does not solve the width problem and worsens it in one locale. Plain
+ * grouped formatting (no `notation: 'compact'`) is safe across all four
+ * locales this package's consumers use. Ticks get a short, rounded form;
+ * tooltip/legend keep full precision -- teaching screens must not round away
+ * a meaningful difference. A caller's own `valueFormatter` always wins (this
+ * is only ever used as a default, per `withAxisDefaults`' `{...defaults,
+ * ...axis}` merge).
+ */
+export function defaultNumericTickFormatter(locale) {
+    return (value, context) => ((context === null || context === void 0 ? void 0 : context.location) === 'tick'
+        ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)
+        : new Intl.NumberFormat(locale).format(value));
+}
 export function withChartSlotDefaults(slotProps, legendPosition) {
     var _a;
     const position = Object.assign(Object.assign(Object.assign({}, DEFAULT_LEGEND_POSITION), legendPosition), (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.legend) === null || _a === void 0 ? void 0 : _a.position);

package/dist/theme/themeCompleteness.js

@@ -45,8 +45,8 @@ const COMPONENT_SURFACES = [
     componentPath('MuiTooltip', 'defaultProps.slotProps.transition.timeout.enter'),
     componentPath('MuiTooltip', 'defaultProps.slotProps.transition.timeout.exit'),
     componentPath('MuiSelect', 'defaultProps.variant'),
-    componentPath('MuiSelect', 'styleOverrides.select.minHeight'),
-    componentKeyLeaf('MuiSelect', 'styleOverrides.select', '@media (any-pointer: coarse)', 'minHeight'),
+    componentPath('MuiSelect', 'styleOverrides.root.minHeight'),
+    componentKeyLeaf('MuiSelect', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
     componentPath('MuiCheckbox', 'styleOverrides.root.color'),
     componentKeyLeaf('MuiCheckbox', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
     componentKeyLeaf('MuiCheckbox', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),

package/dist/theme/tokens.js

@@ -209,7 +209,7 @@ export const BASELINE_STATIC = {
         MuiSelect: {
             defaultProps: { variant: 'outlined' },
             styleOverrides: {
-                select: {
+                root: {
                     minHeight: 40,
                     boxSizing: 'border-box',
                     '@media (any-pointer: coarse)': { minHeight: 44 },

package/package.json

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

package/src/components/charts/BarChart.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
+  defaultNumericTickFormatter,
+  sizeYAxisForContent,
   spaceForRotatedTicks,
   withAxisDefaults,
   withChartSlotDefaults,
@@ -12,8 +15,14 @@ import {
 } from './chartDefaults';
 
 /**
- * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis (BarChart's default x-axis
+ * shape) needs no title by default -- its ticks are names -- and a numeric
+ * axis needs one only unless its unit is already visible in the ticks and
+ * the panel heading already names the quantity. Omitting one never suppresses
+ * a label the caller DID set (`withAxisDefaults` only ever falls back onto
+ * an axis without its own `label`).
  */
 export function BarChart({
   series = [],
@@ -32,10 +41,8 @@ export function BarChart({
   ...chartProps
 }) {
   const theme = useTheme();
+  const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
-  if (!xAxisLabel || !yAxisLabel) {
-    throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
-  }
 
   const labelledXAxis = withAxisDefaults(
     xAxis,
@@ -46,7 +53,12 @@ export function BarChart({
   const labelledYAxis = withAxisDefaults(
     yAxis,
     yAxisLabel,
-    { scaleType: 'linear' },
+    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
+    theme.typography.caption.fontSize,
+  );
+  const sizedYAxis = sizeYAxisForContent(
+    labelledYAxis,
+    series,
     theme.typography.caption.fontSize,
   );
   const rotatedTickSpace = spaceForRotatedTicks(
@@ -61,7 +73,7 @@ export function BarChart({
         {...chartProps}
         series={series}
         xAxis={rotatedTickSpace.xAxis}
-        yAxis={labelledYAxis}
+        yAxis={sizedYAxis}
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}

package/src/components/charts/LineChart.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import {
   LineChart as MuiLineChart,
   MarkElement as MuiMarkElement,
@@ -8,6 +9,8 @@ import {
 import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
+  defaultNumericTickFormatter,
+  sizeYAxisForContent,
   spaceForRotatedTicks,
   withAxisDefaults,
   withChartSlotDefaults,
@@ -29,8 +32,14 @@ function FilledMarkElement({ color, style, ...props }) {
 }
 
 /**
- * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts line preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis needs no title by default
+ * -- its ticks are names -- and a numeric axis needs one only unless its
+ * unit is already visible in the ticks and the panel heading already names
+ * the quantity. Omitting one never suppresses a label the caller DID set
+ * (`withAxisDefaults` only ever falls back onto an axis without its own
+ * `label`).
  */
 export function LineChart({
   series = [],
@@ -50,10 +59,8 @@ export function LineChart({
   ...chartProps
 }) {
   const theme = useTheme();
+  const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
-  if (!xAxisLabel || !yAxisLabel) {
-    throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
-  }
 
   const labelledXAxis = withAxisDefaults(
     xAxis,
@@ -64,19 +71,24 @@ export function LineChart({
   const labelledYAxis = withAxisDefaults(
     yAxis,
     yAxisLabel,
-    { scaleType: 'linear' },
+    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
     theme.typography.caption.fontSize,
   );
-  const rotatedTickSpace = spaceForRotatedTicks(
-    labelledXAxis,
-    margin,
-    theme.typography.caption.lineHeight,
-  );
   const defaultedSeries = series.map((item) => ({
     showMark: false,
     labelMarkType: 'square',
     ...item,
   }));
+  const sizedYAxis = sizeYAxisForContent(
+    labelledYAxis,
+    defaultedSeries,
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
 
   return (
     <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
@@ -84,7 +96,7 @@ export function LineChart({
         {...chartProps}
         series={defaultedSeries}
         xAxis={rotatedTickSpace.xAxis}
-        yAxis={labelledYAxis}
+        yAxis={sizedYAxis}
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}