@charcuterie/ui 2.10.0 → 2.10.2

package/README.md

@@ -172,11 +172,16 @@ rename breaks only the rendered page).
    widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
 4. Export from `src/index.ts` — the one sanctioned barrel. Components import each other
    directly, never through it.
-5. **If it is an overlay, use the platform's top layer — never a portal.** `<dialog>` +
-   `showModal()`, or `popover="manual"`. Both stay where they are in the DOM, so
-   `canvas.getByRole(…)` still finds the panel; a portal moves it to `document.body`, out
-   of the element a test or an agent scoped its queries to
-   ([decision](../../docs/decisions/2026-07-30-overlays-use-the-top-layer-not-a-portal.md)).
+5. **If it is an overlay, portal it to the body** — `FloatingPortal`, through
+   `OverlayPanel`, never a hand-rolled `<dialog>` + `showModal()` or `popover="manual"`. The
+   top layer wins paint order but is still laid out in place, so a `transform` or
+   `overflow: hidden` ancestor still clips a fixed panel; a portal to `document.body` has no
+   ancestor to be clipped by
+   ([decision](../../docs/decisions/2026-08-03-overlays-portal-to-the-body-not-the-top-layer.md),
+   superseding [M4's](../../docs/decisions/2026-07-30-overlays-use-the-top-layer-not-a-portal.md)).
+   The old objection stands answered rather than waved: `useRole` writes
+   `aria-controls`/`aria-labelledby` across the boundary, and the stories scope panel queries
+   to `body`.
 6. **If it is built on a registering kind, look at its first paint.** Members register
    from effects, so before those run a `RovingFocus` has no active value and a
    `SinglePicker` / `VisibilityGroup` has no selected key — only a pending one. Two of M4's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "1.2.0",
-    "@charcuterie/tokens": "1.3.0",
+    "@charcuterie/tokens": "1.5.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12"
   },

package/src/Listbox/Listbox.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Listbox.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, AllVariants, Default, Interactive } =
   composeStories(stories)
 
 test("a button opens a listbox whose rows are options", async () => {
@@ -196,3 +196,58 @@ test("Escape dismisses without choosing, and there is one tab stop", async () =>
     role: "button",
   })
 })
+
+/**
+ * The rich-option story is the reason `Listbox` exists — a native
+ * `<option>` cannot hold a second line — and it was the one story
+ * `Listbox.test.tsx` never mounted. So the `content.muted` detail
+ * line inside a row had **no** axe coverage in any state, let alone
+ * the highlighted one, while it sat at 4.11:1 on
+ * `intent.neutral.surfaceHover` in the fleet's default variant.
+ *
+ * This is the same shape as the `ButtonLink` miss: there,
+ * `AllVariants` *was* audited but forced no `:hover`, so the failing
+ * hex passed locally and only the token gate caught it. Auditing the
+ * resting row would repeat that mistake exactly, so the row is
+ * driven to its highlighted state and the fill is **asserted** —
+ * without that assertion a silently-resting row would make this test
+ * pass for the wrong reason.
+ */
+test("a highlighted rich option row has no contrast violation", async () => {
+  const { body, canvas } = await mountStory(AllVariants)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Choose a track",
+      role: "button",
+    }),
+  )
+
+  const listbox = expectAgentDrivable(body, {
+    role: "listbox",
+  })
+
+  // Opening focuses the first option, and `ListboxOption` fills the
+  // focused row with `focus:bg-intent-neutral-surface-hover`. Prove
+  // the row really is painted before trusting what axe says about it.
+  const highlighted = body.getAllByRole("option")[0]
+
+  await waitFor(() => {
+    expect(document.activeElement).toBe(highlighted)
+  })
+
+  const rowFill =
+    getComputedStyle(highlighted).backgroundColor
+  const panelFill =
+    getComputedStyle(listbox).backgroundColor
+
+  expect(rowFill).not.toBe("rgba(0, 0, 0, 0)")
+  expect(rowFill).not.toBe(panelFill)
+
+  // The detail line is the `content.muted` half of the pair.
+  expect(
+    highlighted.querySelector(".text-content-muted"),
+  ).not.toBeNull()
+
+  await expectNoAxeViolations(listbox)
+})