@elabs-ai/components-ui 4.2.0 → 5.0.0

package/src/components/locale-provider/messages.ts

@@ -170,6 +170,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ui.themeSwitcher.light": "Light",
   "ui.themeSwitcher.dark": "Dark",
   "ui.navNotifications.label": "Notifications",
+  // NavUser — the standard sidebar footer: account menu group label and its
+  // two default actions.
+  "ui.navUser.label": "Account",
+  "ui.navUser.settings": "Settings",
+  "ui.navUser.signOut": "Sign out",
   "ui.teamSwitcher.label": "Teams",
   "ui.teamSwitcher.addTeam": "Add team",
   // Table's own scroll wrapper (#366). Rendered ONLY when the wrapper actually
@@ -300,6 +305,16 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // override renders locale-appropriate digits/grouping instead of a raw
   // Latin-digit JS number).
   "data.table.resizeColumnValue": { one: "{size} pixel", other: "{size} pixels" },
+  // `showRanks` (RM-123). The printed number is the row's position in the DATA
+  // AS SUPPLIED, not its position on screen: it travels with its row through
+  // sorting, filtering and paging, so beside a sorted column it legitimately
+  // reads 2, 1, 6, 4. That rule is invisible in a column headed by a bare "#",
+  // which reads as a broken ranking — so it is said twice: `rankHeader` is the
+  // column's accessible NAME (the "#" glyph is decorative beside it), and
+  // `rankKey` is the one-line key printed above the table for everyone else.
+  "data.table.rankHeader": "Position in the data as supplied",
+  "data.table.rankKey":
+    "# is each row’s position in the data as supplied, not its position in this view — sorting never renumbers it.",
   // Row drag-reorder (#13). `reorderHandle`/`reorderColumnHeader` name the
   // grip control and its column; the four `reorder*` announcement keys back
   // the aria-live region dnd-kit's `accessibility.announcements` renders on
@@ -338,6 +353,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // (ChartFrame, ChartCard, AutoChart all show the same "a chart is loading"
   // concept — one key, reused, rather than three near-duplicate strings).
   "charts.chart.loading": "Loading chart…",
+  // ChartFallback's default copy per `kind` (#304). Written for the reader of
+  // the page, not the developer: the unsupported chart type name goes to a
+  // dev-only console warning, never into this string.
+  "charts.chart.empty": "No data to display",
+  "charts.chart.unsupported": "This chart can’t be displayed.",
   "charts.metricGrid.loading": "Loading metrics…",
   // Chart drill-down (#349). The chart SVG is aria-hidden, so these names are
   // the ONLY thing AT reads for an interactive datapoint — there is no
@@ -345,9 +365,24 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.datapointLayer.label": "Chart data points",
   "charts.datapoint.label": "{series}, {category}: {value}",
   "charts.datapoint.labelNoSeries": "{category}: {value}",
+  // A target with no value (a tree node, a parallel-coordinates line, an empty
+  // heatmap cell) drops the separator rather than announcing a dangling ":".
+  "charts.datapoint.labelNoValue": "{series}, {category}",
+  "charts.datapoint.labelNoSeriesNoValue": "{category}",
+  // Stands in for {category} when a target has none, so the name is never a
+  // bare value or an empty string. {position} is 1-based.
+  "charts.datapoint.position": "Data point {position}",
+  // DumbbellChart: a target spans two values, so both ends are announced.
+  "charts.datapoint.labelRange": "{category}: {start} to {end}",
   // Announced when `copyValueOnActivate` puts a datapoint's exact value on the
   // clipboard — the recovery path for a compact axis label.
   "charts.datapoint.copied": "Exact value copied",
+  // chart selection — RM-073
+  // Appended to a datapoint's name when a host's `selectionStates` resolves it,
+  // so the selection tri-state never rides on colour/opacity alone (WCAG 1.4.1).
+  // `associated` is the resting state and adds nothing.
+  "charts.datapoint.selected": "{label}, selected",
+  "charts.datapoint.excluded": "{label}, excluded",
   // ChartFrame's SVG/PNG export actions (RM-025). Each string is used twice —
   // as the icon button's `aria-label` (its ONLY accessible name) and as the
   // tooltip a sighted user reads — so one key serves both and they cannot
@@ -364,6 +399,9 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.chartFrame.noDataToSummarize": "No data to summarize.",
   "charts.chartFrame.defaultTitle": "Chart",
   "charts.chartFrame.summaryDetailLabel": "Chart summary",
+  // ChartFrame's scrollable body (#432 round 3, WCAG 2.1.1): only set as
+  // `aria-label`/`tabIndex` while the body actually overflows its box.
+  "charts.chartFrame.scrollableRegion": "Scrollable chart: {title}",
   "charts.legend.label": "Chart legend",
   "charts.gantt.timeline": "Timeline",
   "charts.gantt.dragToResizeColumn": "Drag to resize column",
@@ -381,11 +419,151 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.gantt.unitMinute": "Minute",
   "charts.gantt.unitSecond": "Second",
   "charts.gantt.unitMillisecond": "Millisecond",
+  // BulletChart (Few's bullet graph, RM-061). The SVG is aria-hidden, so this
+  // sentence — built from these fragments — is the ONLY thing AT reads: it
+  // states the value, its relationship to the target, and which qualitative
+  // band it falls in. {value}/{target} already carry a caller-supplied name
+  // via `labels` when one was given (composed before interpolation), so the
+  // template itself stays name-agnostic.
+  "charts.bulletChart.noData": "No data",
+  "charts.bulletChart.valueOfTarget": "{value} of {target} target",
+  "charts.bulletChart.gapAbove": "{amount} above target",
+  "charts.bulletChart.gapBelow": "{amount} below target",
+  "charts.bulletChart.onTarget": "on target",
+  "charts.bulletChart.band": "in band {band}",
+  "charts.bulletChart.comparative": "compared to {value}",
+  // RM-075 follow-up: `container` dashboard tile's default tablist name when the tile
+  // has no `title`.
+  "charts.dashboard.containerTabs": "Container tabs",
+  // dashboard edit — RM-078: edit-layer handles, size badge and screen-reader announcements.
+  // Columns and rows are announced 1-based; the badge shows the same numbers.
+  "charts.dashboard.edit.instructions":
+    "To pick up a tile, press Enter. Use the arrow keys to move it one cell, or four cells with Shift. Press Enter to drop it, or Escape to cancel. On a resize handle, the arrow keys resize directly.",
+  "charts.dashboard.edit.moveTile": "Move {title}",
+  "charts.dashboard.edit.resizeTile": "Resize {title} from {edge}",
+  "charts.dashboard.edit.edgeTop": "top",
+  "charts.dashboard.edit.edgeTopRight": "top-right",
+  "charts.dashboard.edit.edgeRight": "right",
+  "charts.dashboard.edit.edgeBottomRight": "bottom-right",
+  "charts.dashboard.edit.edgeBottom": "bottom",
+  "charts.dashboard.edit.edgeBottomLeft": "bottom-left",
+  "charts.dashboard.edit.edgeLeft": "left",
+  "charts.dashboard.edit.edgeTopLeft": "top-left",
+  "charts.dashboard.edit.sizeBadge": "({x},{y}) ⤢ {w} × {h}",
+  "charts.dashboard.edit.pickedUp": "Picked up {title} at column {x}, row {y}",
+  "charts.dashboard.edit.moved": "Moved to column {x}, row {y}",
+  "charts.dashboard.edit.dropped": "Dropped {title} at column {x}, row {y}, size {w} by {h}",
+  "charts.dashboard.edit.rejected": "Cannot place here — not enough room",
+  "charts.dashboard.edit.resizing": "Resizing {title}: {w} by {h}",
+  "charts.dashboard.edit.resized": "Resized {title} to {w} by {h}",
+  // dashboard edit — RM-078 (follow-up 5): a clamped keyboard step (grid edge or a tile's own
+  // min/max size) now announces once per key press instead of staying silent once the layout
+  // stops changing; cancel (Escape, or tabbing off a resize handle mid-gesture) says which
+  // gesture was cancelled and where it was restored to.
+  "charts.dashboard.edit.clampedEdge": "At the {edge} edge. ({x},{y}) {w} × {h}",
+  "charts.dashboard.edit.moveCancelled": "Move cancelled. Restored to column {x}, row {y}",
+  "charts.dashboard.edit.resizeCancelled":
+    "Resize cancelled. Restored to column {x}, row {y}, size {w} by {h}",
+  // dashboard toolbar — RM-079: mode switch, undo/redo, grid settings, save/discard, shortcuts.
+  "charts.dashboard.toolbar.ariaLabel": "Dashboard toolbar",
+  "charts.dashboard.toolbar.viewMode": "View",
+  "charts.dashboard.toolbar.editMode": "Edit",
+  "charts.dashboard.toolbar.editDisabledNarrow": "Editing needs a wider screen",
+  "charts.dashboard.toolbar.undo": "Undo",
+  "charts.dashboard.toolbar.redo": "Redo",
+  "charts.dashboard.toolbar.add": "Add",
+  "charts.dashboard.toolbar.grid": "Grid",
+  "charts.dashboard.toolbar.gridSettings": "Grid settings",
+  "charts.dashboard.toolbar.save": "Save",
+  "charts.dashboard.toolbar.discard": "Discard",
+  "charts.dashboard.toolbar.unsavedChanges": "Unsaved changes",
+  "charts.dashboard.toolbar.discardTitle": "Discard changes?",
+  "charts.dashboard.toolbar.discardDescription":
+    "Your edits since the last save will be lost. This cannot be undone.",
+  "charts.dashboard.toolbar.discardConfirm": "Discard changes",
+  "charts.dashboard.toolbar.shortcuts": "Keyboard shortcuts",
+  "charts.dashboard.toolbar.shortcutsDescription":
+    "Every shortcut available while this sheet is focused.",
+  "charts.dashboard.toolbar.shortcutsGroup": "Dashboard",
+  "charts.dashboard.toolbar.shortcutUndo": "Undo",
+  "charts.dashboard.toolbar.shortcutRedo": "Redo",
+  "charts.dashboard.toolbar.shortcutToggleEdit": "Toggle edit mode",
+  "charts.dashboard.toolbar.shortcutDelete": "Delete focused tiles",
+  "charts.dashboard.toolbar.shortcutDuplicate": "Duplicate focused tiles",
+  "charts.dashboard.toolbar.shortcutClearFocus": "Clear focus",
+  "charts.dashboard.toolbar.shortcutSave": "Save",
+  // tile operations — RM-081 follow-up 1: labels for the 5 shortcuts RM-081 added
+  // (dashboardShortcutDescriptors); the shortcuts sheet fell back to the raw action key
+  // without these.
+  "charts.dashboard.toolbar.shortcutCopy": "Copy focused tiles",
+  "charts.dashboard.toolbar.shortcutCut": "Cut focused tiles",
+  "charts.dashboard.toolbar.shortcutPaste": "Paste tiles",
+  "charts.dashboard.toolbar.shortcutSelectAll": "Select all tiles",
+  "charts.dashboard.toolbar.shortcutContextMenu": "Open the focused tile’s context menu",
+  // dashboard toolbar export — RM-084: the "Export sheet…" menu (SVG, PNG).
+  "charts.dashboard.toolbar.export": "Export sheet…",
+  "charts.dashboard.toolbar.exportSvg": "Export as SVG",
+  "charts.dashboard.toolbar.exportPng": "Export as PNG",
+  "charts.dashboard.grid.mode": "Layout mode",
+  "charts.dashboard.grid.modeFit": "Fit to screen",
+  "charts.dashboard.grid.modeFlow": "Flow",
+  "charts.dashboard.grid.density": "Density",
+  "charts.dashboard.grid.densityWide": "Wide",
+  "charts.dashboard.grid.densityMedium": "Medium",
+  "charts.dashboard.grid.densityNarrow": "Narrow",
+  "charts.dashboard.grid.densityCustom": "Custom",
+  "charts.dashboard.grid.columns": "Columns",
+  "charts.dashboard.grid.rows": "Rows",
+  "charts.dashboard.grid.rowHeight": "Row height",
+  "charts.dashboard.grid.gap": "Gap",
+  "charts.dashboard.grid.extendable": "Extend sheet",
+  "charts.dashboard.grid.extendableDescription":
+    "Adds 50 % more rows so it never runs out of room.",
+  // dashboard tile ops — RM-081: the tile context menu (right-click, header kebab, Shift+F10)
+  // and its "Replace with…" submenu, plus the toast on a destructive multi-tile delete.
+  "charts.dashboard.tileOps.menuLabel": "Tile actions",
+  "charts.dashboard.tileOps.duplicate": "Duplicate",
+  "charts.dashboard.tileOps.replaceWith": "Replace with…",
+  "charts.dashboard.tileOps.addToLibrary": "Add to library",
+  "charts.dashboard.tileOps.copy": "Copy",
+  "charts.dashboard.tileOps.cut": "Cut",
+  "charts.dashboard.tileOps.paste": "Paste",
+  "charts.dashboard.tileOps.pasteAndReplace": "Paste and replace",
+  "charts.dashboard.tileOps.bringForward": "Bring forward",
+  "charts.dashboard.tileOps.sendBackward": "Send backward",
+  "charts.dashboard.tileOps.delete": "Delete",
+  "charts.dashboard.tileOps.deletedOne": "Tile deleted",
+  "charts.dashboard.tileOps.deletedMany": "{count} tiles deleted",
+  "charts.dashboard.tileOps.undo": "Undo",
+  // tile operations — RM-081 follow-up 1: the header-kebab entry that opens the same context
+  // menu, and the floating align/distribute toolbar over a multi-selection.
+  "charts.dashboard.tileOps.openTileMenu": "Tile actions…",
+  "charts.dashboard.tileOps.selectionToolbarLabel": "Align selection",
+  "charts.dashboard.tileOps.alignLeft": "Align left edges",
+  "charts.dashboard.tileOps.alignCenterH": "Align horizontal centers",
+  "charts.dashboard.tileOps.alignRight": "Align right edges",
+  "charts.dashboard.tileOps.alignTop": "Align top edges",
+  "charts.dashboard.tileOps.alignCenterV": "Align vertical centers",
+  "charts.dashboard.tileOps.alignBottom": "Align bottom edges",
+  "charts.dashboard.tileOps.distributeHorizontal": "Distribute horizontally",
+  "charts.dashboard.tileOps.distributeVertical": "Distribute vertically",
+  // Dual-axis — RM-121
+  "charts.axis.leftScale": "Left scale",
+  "charts.axis.rightScale": "Right scale",
 
   // ── @elabs-ai/components-maps ─────────────────────────────────────────────────────────────
   "maps.popup.close": "Close popup",
+  "maps.marker.drag": "Draggable marker. Arrow keys move it, Shift for a larger step.",
   "maps.canvas.unavailableTitle": "Map unavailable",
   "maps.canvas.unavailableDescription": "This browser can’t render WebGL maps.",
+  "maps.canvas.loading": "Loading map",
+  "maps.controls.zoomIn": "Zoom in",
+  "maps.controls.zoomOut": "Zoom out",
+  "maps.controls.resetBearing": "Reset bearing to north",
+  "maps.controls.locate": "Find my location",
+  "maps.controls.locating": "Locating",
+  "maps.controls.fullscreen": "Toggle fullscreen",
+  "maps.controls.fit": "Fit the whole plan",
 
   // ── @elabs-ai/components-flow ─────────────────────────────────────────────────────────────
   "flow.inspectorPanel.close": "Close inspector",
@@ -585,6 +763,8 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.tool.showTechnicalDetails": "Show technical details",
   "ai.tool.error": "Error",
   "ai.tool.result": "Result",
+  // PackageInfo.
+  "ai.packageInfo.dependencies": "Dependencies",
   // AssetPreview.
   "ai.assetPreview.rowCount": { one: "{count} row", other: "{count} rows" },
   "ai.assetPreview.noPreview": "No preview available…",
@@ -592,6 +772,10 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.assetPreview.raw": "Raw",
   // WebPreview's sandboxed iframe accessible name.
   "ai.webPreview.previewTitle": "Preview",
+  // A2UI surface (D2 — an agent-designed screen rendered from data)
+  "ai.a2ui.loading": "Loading surface…",
+  "ai.a2ui.invalid": "This surface can’t be shown — it doesn’t match the catalog.",
+  "ai.a2ui.moreErrors": { one: "…and {count} more problem", other: "…and {count} more problems" },
   // FileTree's expand/collapse chevron control.
   "ai.fileTree.expandFolder": "Expand {name}",
   "ai.fileTree.collapseFolder": "Collapse {name}",
@@ -1117,4 +1301,72 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "process.kpiStrip.trendRising": "rising",
   "process.kpiStrip.trendFalling": "falling",
   "process.kpiStrip.trendSteady": "steady",
+  // ProcessFilterBar (RM-056, #205). Filter-chain breadcrumb chip labels — label-in-value
+  // text, one key per `FilterIntent["kind"]` — the "Clear all" action, the chip's own
+  // "excluded" count label, and the summary line's two independently-omittable clauses
+  // (see `process-filter-bar.tsx`'s module docblock for why they are composed, not merged).
+  "process.filterBar.label": "Active filters",
+  "process.filterBar.with": "Contains {activity}",
+  "process.filterBar.without": "Excludes {activity}",
+  "process.filterBar.startsWith": "Starts with {activity}",
+  "process.filterBar.endsWith": "Ends with {activity}",
+  "process.filterBar.variant": {
+    one: "{count} variant selected",
+    other: "{count} variants selected",
+  },
+  "process.filterBar.cases": {
+    one: "{count} case selected",
+    other: "{count} cases selected",
+  },
+  "process.filterBar.filter": "Filter",
+  "process.filterBar.excludedLabel": "excluded",
+  "process.filterBar.clearAll": "Clear all",
+  "process.filterBar.showingAll": {
+    one: "Showing all {total} case",
+    other: "Showing all {total} cases",
+  },
+  "process.filterBar.showing": "Showing {filtered} of {total} cases",
+  "process.filterBar.hiddenByAbstraction": {
+    one: "{count} activity hidden by abstraction",
+    other: "{count} activities hidden by abstraction",
+  },
+  // CaseTable (RM-055, issue #204). A column configuration over `data`'s
+  // DataTable — see `.claude/rules/data.md`'s "primitives go down, compositions
+  // go up". `conformance*` labels the three-state badge; `conformance` itself
+  // is host-supplied (never fabricated here — same rule as `ProcessKpiStrip`'s
+  // own conformance tile).
+  "process.caseTable.columnCaseId": "Case",
+  "process.caseTable.columnStart": "Start",
+  "process.caseTable.columnEnd": "End",
+  "process.caseTable.columnDuration": "Duration",
+  "process.caseTable.columnEventCount": "Events",
+  "process.caseTable.columnVariant": "Variant",
+  "process.caseTable.columnConformance": "Conformance",
+  "process.caseTable.conformanceConforming": "Conforming",
+  "process.caseTable.conformanceNonConforming": "Non-conforming",
+  "process.caseTable.conformanceUnknown": "Unknown",
+  "process.caseTable.exportCsv": "Export CSV",
+  "process.caseTable.empty": "No cases to display.",
+  "process.caseTable.tableLabel": "Cases",
+  // CaseTimeline (RM-055, issue #204). A thin `charts/Gantt` wrapper — one row
+  // per activity instance, waiting time as gap bands, overlapping instances
+  // flagged parallel. `parallelLabel` is the non-colour channel WCAG 1.4.1
+  // requires alongside the `info` tone the bar itself carries.
+  "process.caseTimeline.label": "Case timeline",
+  "process.caseTimeline.parallelLabel": "Parallel",
+  "process.caseTimeline.parallelSuffix": "parallel with another activity",
+  "process.caseTimeline.gapLabel": "Waiting, {duration}",
+  // ProcessCompare (RM-064, issue #211). `{label}` is the HOST-supplied side name
+  // ("Before"/"After", a log's own file name, …), not a fixed "A"/"B" — see
+  // `process-compare.tsx`'s module docblock for why the diff-state words name the
+  // owning side instead of a generic letter.
+  "process.compare.label": "Process comparison",
+  "process.compare.tableView": "Table view",
+  "process.compare.mapLabel": "Process map — {label}",
+  "process.compare.superimposedMapLabel": "Process map — {aLabel} vs {bLabel}",
+  "process.compare.legendTitle": "Comparison",
+  "process.compare.diffSuffixCommon": "common",
+  "process.compare.diffSuffixOnly": "{label} only",
+  "process.compare.cases": "{label} — cases",
+  "process.compare.medianThroughput": "{label} — median throughput",
 };

package/src/components/mention-input/mention-input.tsx

@@ -983,7 +983,7 @@ export const MentionInputContent = forwardRef<
       // an axe `aria-dialog-name` violation (serious). The panel is a plain
       // container — the `role="listbox"` inside carries all the semantics.
       role="presentation"
-      // No border, no ring: PopoverContent already carries `shadow-ring-md`.
+      // No border, no ring: PopoverContent already carries `shadow-popover`.
       className={cn("w-72 p-0", className)}
       onOpenAutoFocus={(event) => event.preventDefault()}
       onCloseAutoFocus={(event) => event.preventDefault()}

package/src/components/menubar/menubar.stories.tsx

@@ -65,3 +65,28 @@ export const Default: Story = {
     await userEvent.keyboard("{Escape}");
   },
 };
+
+/**
+ * Locks WCAG 1.4.11 keyboard-focus contrast (#308): a menu item's
+ * `focus:bg-accent` fill alone is not a visible indicator (~1.17–1.40:1
+ * against `--popover`). Moving focus with the keyboard must additionally
+ * paint a compound ring (`focus-ring-inset`): a real `boxShadow` layer, or a
+ * non-zero, non-`none` `outline`.
+ */
+export const KeyboardFocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: Default.render,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("menuitem", { name: /file/i }));
+    const body = within(canvasElement.ownerDocument.body);
+    await body.findByRole("menu");
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = canvasElement.ownerDocument.activeElement as HTMLElement;
+    await expect(focused).toHaveAttribute("role", "menuitem");
+    const style = getComputedStyle(focused);
+    const hasRing = style.boxShadow !== "none";
+    const hasOutline = style.outlineStyle !== "none" && parseFloat(style.outlineWidth) > 0;
+    await expect(hasRing || hasOutline).toBe(true);
+    await userEvent.keyboard("{Escape}");
+  },
+};

package/src/components/menubar/menubar.tsx

@@ -41,7 +41,7 @@ export const MenubarTrigger = forwardRef<
       ref={ref}
       data-slot="menubar-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-body font-medium outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-body font-medium outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ export const MenubarContent = forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,
@@ -85,7 +85,7 @@ export const MenubarItem = forwardRef<
       ref={ref}
       data-slot="menubar-item"
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         inset && "ps-8",
         className,
       )}
@@ -103,7 +103,7 @@ export const MenubarSubTrigger = forwardRef<
       ref={ref}
       data-slot="menubar-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -124,7 +124,7 @@ export const MenubarSubContent = forwardRef<
       ref={ref}
       data-slot="menubar-sub-content"
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
         className,
@@ -144,7 +144,7 @@ export const MenubarCheckboxItem = forwardRef<
       data-slot="menubar-checkbox-item"
       checked={checked}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         className,
       )}
       {...props}
@@ -168,7 +168,7 @@ export const MenubarRadioItem = forwardRef<
       ref={ref}
       data-slot="menubar-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         className,
       )}
       {...props}

package/src/components/meter/index.ts

@@ -0,0 +1 @@
+export { Meter, meterFillVariants, meterVariants, type MeterProps } from "./meter";

package/src/components/meter/meter.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Meter } from "./meter";
+
+const meta = {
+  title: "Display/Meter",
+  component: Meter,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A word-sized read-only quantity — a confidence, a share of a ceiling, “4 of 5 signals held”. The ARIA `meter` role, not a `progressbar`: it is a fact within a range, not a task in flight. Default ink is `foreground`; a status tone must be paired with `aria-valuetext` so the state is never colour-only. `segments` draws a countable strip; `marker` draws a reference tick.",
+      },
+    },
+  },
+  argTypes: {
+    value: { control: "number", table: { category: "State" } },
+    min: { control: "number", table: { category: "Behavior" } },
+    max: { control: "number", table: { category: "Behavior" } },
+    segments: { control: "number", table: { category: "Behavior" } },
+    marker: { control: "number", table: { category: "Behavior" } },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md"],
+      table: { category: "Appearance" },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "success", "warning", "destructive"],
+      table: { category: "Appearance" },
+    },
+  },
+  args: { "aria-label": "Share of ceiling", value: 62, className: "w-48" },
+} satisfies Meta<typeof Meter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** The three heights; `xs` is the inline confidence rung beside a printed percentage. */
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <Meter {...args} size="xs" />
+      <Meter {...args} size="sm" />
+      <Meter {...args} size="md" />
+    </div>
+  ),
+};
+
+/** A quantity that IS a verdict takes a status tone — always with `aria-valuetext`. */
+export const Tones: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <Meter {...args} aria-valuetext="62 of 100" variant="default" />
+      <Meter {...args} aria-valuetext="62 of 100, healthy" variant="success" />
+      <Meter
+        {...args}
+        aria-valuetext="88 of 100, approaching the ceiling"
+        value={88}
+        variant="warning"
+      />
+      <Meter
+        {...args}
+        aria-valuetext="100 of 100, over the ceiling"
+        value={122}
+        variant="destructive"
+      />
+    </div>
+  ),
+};
+
+/** A ceiling drawn as a tick; the fill runs past it in the destructive rung. */
+export const WithMarker: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <Meter {...args} marker={500} markerLabel="ceiling 500" max={800} value={420} />
+      <Meter
+        {...args}
+        aria-valuetext="612 of 500, over the ceiling"
+        marker={500}
+        markerLabel="ceiling 500"
+        max={800}
+        value={612}
+        variant="destructive"
+      />
+    </div>
+  ),
+};
+
+/** “4 of 5 signals held” — five discrete facts drawn as five countable cells. */
+export const Segmented: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <Meter {...args} aria-label="Signals held" max={5} segments={5} value={5} />
+      <Meter {...args} aria-label="Signals held" max={5} segments={5} value={4} />
+      <Meter {...args} aria-label="Signals held" max={5} segments={5} value={2} />
+      <Meter {...args} aria-label="Seats active" max={42} segments={42} size="xs" value={41} />
+    </div>
+  ),
+};

package/src/components/meter/meter.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Meter } from "./meter";
+
+describe("Meter", () => {
+  it("is a meter, not a progressbar, and exposes the range to AT", () => {
+    render(<Meter aria-label="confidence" max={1} value={0.91} />);
+    const el = screen.getByRole("meter", { name: "confidence" });
+    expect(el).toHaveAttribute("aria-valuenow", "0.91");
+    expect(el).toHaveAttribute("aria-valuemin", "0");
+    expect(el).toHaveAttribute("aria-valuemax", "1");
+    expect(screen.queryByRole("progressbar")).toBeNull();
+  });
+
+  it("fills with foreground ink by default — a quantity, not a status", () => {
+    const { container } = render(<Meter aria-label="share" value={40} />);
+    const fill = container.querySelector('[data-slot="meter-fill"]');
+    expect(fill).toHaveClass("bg-foreground");
+    expect(fill).toHaveStyle({ width: "40%" });
+  });
+
+  it.each(["success", "warning", "destructive"] as const)("paints the %s tone", (variant) => {
+    const { container } = render(<Meter aria-label="share" value={40} variant={variant} />);
+    expect(container.querySelector('[data-slot="meter-fill"]')).toHaveClass(`bg-${variant}`);
+  });
+
+  it("clamps the fill but reports the raw value when over the ceiling", () => {
+    const { container } = render(
+      <Meter aria-label="spend" aria-valuetext="$612 of $500, over limit" max={500} value={612} />,
+    );
+    expect(container.querySelector('[data-slot="meter-fill"]')).toHaveStyle({ width: "100%" });
+    expect(screen.getByRole("meter")).toHaveAttribute("aria-valuenow", "612");
+    expect(screen.getByRole("meter")).toHaveAttribute("aria-valuetext", "$612 of $500, over limit");
+  });
+
+  it("renders a countable strip when segments is set", () => {
+    const { container } = render(<Meter aria-label="signals" max={5} segments={5} value={4} />);
+    const cells = container.querySelectorAll('[data-slot="meter-cell"]');
+    expect(cells).toHaveLength(5);
+    expect(cells[3]).toHaveClass("bg-foreground");
+    expect(cells[4]).toHaveClass("bg-muted");
+    expect(container.querySelector('[data-slot="meter-fill"]')).toBeNull();
+  });
+
+  it("draws a marker tick outside the clipped track and joins markerLabel to the value text", () => {
+    const { container } = render(
+      <Meter aria-label="spend" marker={500} markerLabel="ceiling 500" max={800} value={612} />,
+    );
+    const tick = container.querySelector('[data-slot="meter-marker"]') as HTMLElement;
+    expect(tick).not.toBeNull();
+    expect(tick.style.insetInlineStart).toBe("62.5%");
+    expect(tick.parentElement).not.toBe(screen.getByRole("meter"));
+    expect(screen.getByRole("meter")).toHaveAttribute("aria-valuetext", "612, ceiling 500");
+  });
+
+  it("renders no tick and no wrapper when marker is unset", () => {
+    const { container } = render(<Meter aria-label="share" value={40} />);
+    expect(container.querySelector('[data-slot="meter-marker"]')).toBeNull();
+    expect(container.firstElementChild).toBe(screen.getByRole("meter"));
+  });
+});