@fiestaboard/ui 5.3.0 → 5.4.1

package/README.md

@@ -85,9 +85,27 @@ npm install
 npm run storybook        # component workbench on :6006
 npm run build            # dist/ — ESM + d.ts + theme.css
 npm run lint && npm run typecheck && npm run format:check
+npm test                 # unit tests (Vitest + jsdom), single run
+npm run test:watch       # the same suite, watching
 npm run build-storybook && npm run test-storybook   # axe a11y sweep (needs the static build served on :6006)
 ```
 
+### Unit tests
+
+Vitest + Testing Library on jsdom, configured in `vitest.config.ts` (deliberately a separate file from the library build's `vite.config.ts`) with globals bootstrapped in `src/test/setup.ts`.
+
+Tests are **colocated**: the test for `src/components/forms/button.tsx` is `src/components/forms/button.test.tsx`. Only `src/**/*.test.{ts,tsx}` is collected — the harness suites under `scripts/` keep their own runners (`npm run perf:test`, `npm run release:test`).
+
+**Tailwind does not run in jsdom.** No stylesheet is loaded, so class strings are inert and `getComputedStyle` reports UA defaults for every component in this package; an assertion on a colour or a size there passes for the wrong reason. Assert on what jsdom actually models — roles, accessible names, ARIA state, focus, keyboard, events and `data-*` props. Appearance is covered twice already, by VRT (`docs/VISUAL_REGRESSION.md`) and by the Storybook a11y sweep, both of which run a real browser.
+
+Three files are maintained as exemplars of the house pattern; copy the nearest one:
+
+| Exemplar                                    | Pattern it models                                                       |
+| ------------------------------------------- | ----------------------------------------------------------------------- |
+| `src/components/chrome/breadcrumb.test.tsx` | presentational — landmark, list semantics, `aria-current`, `asChild`    |
+| `src/components/forms/button.test.tsx`      | interactive — `userEvent`, keyboard activation, busy/disabled semantics |
+| `src/components/forms/toggle.test.tsx`      | ARIA state and selection — `aria-pressed`, roving tabindex, arrow keys  |
+
 ### Visual parity rule
 
 This package was extracted from FiestaBoard's `web/src/components/ui` with a pixel-parity guarantee. Token values in `src/styles/theme.css` and component class strings are contract, not implementation detail — changes to them are visible in every consumer. Change intentionally and version accordingly (patch: fixes, minor: additive components/variants, major: breaking API or visual changes).

package/dist/components/board/board-teaser.d.ts

@@ -1,3 +1,4 @@
+import { type Code62Glyph } from "../../lib/board-characters";
 export interface BoardTeaserProps {
     /** Literal board line, e.g. `"{66}AAPL +1.88%"`. */
     teaser: string;
@@ -5,6 +6,13 @@ export interface BoardTeaserProps {
     tiles?: number;
     size?: "sm" | "md" | "lg";
     boardType?: "black" | "white";
+    /**
+     * Which glyph the board this strip stands for draws for code 62. Already
+     * resolved by the consumer — a strip is one row with no shape of its own, so
+     * it has no `deviceType` to resolve from; a Note consumer passes `"heart"`.
+     * Defaults to `"degree"`, the glyph every Flagship carried before 2026.
+     */
+    code62Glyph?: Code62Glyph;
     className?: string;
 }
-export declare const BoardTeaser: import("react").MemoExoticComponent<({ teaser, tiles, size, boardType, className, }: BoardTeaserProps) => import("react").JSX.Element>;
+export declare const BoardTeaser: import("react").MemoExoticComponent<({ teaser, tiles, size, boardType, code62Glyph, className, }: BoardTeaserProps) => import("react").JSX.Element>;

package/dist/components/board/board-teaser.js

@@ -1,49 +1,53 @@
 "use client";
 import { resolveColorCode as e } from "../../lib/board-colors.js";
-import { messageToText as t, parseLine as n } from "../../lib/board-characters.js";
-import { gapClasses as r, radiusClasses as i, sizeClasses as a, textSizeClasses as o } from "../../lib/board-metrics.js";
-import { SEAM_CLASS as s, charLeafBoxShadow as c, seamStyle as l } from "./board-surfaces.js";
-import { memo as u, useMemo as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { applyCode62Glyph as t, messageToText as n, parseLine as r } from "../../lib/board-characters.js";
+import { gapClasses as i, radiusClasses as a, sizeClasses as o, textSizeClasses as s } from "../../lib/board-metrics.js";
+import { SEAM_CLASS as c, charLeafBoxShadow as l, seamStyle as u } from "./board-surfaces.js";
+import { memo as d, useMemo as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/board/board-teaser.tsx
-var m = u(function({ teaser: u, tiles: m = 15, size: h = "sm", boardType: g = "black", className: _ = "" }) {
-	let v = g === "white", y = v ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", b = v ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", x = d(() => {
-		let e = n(u).slice(0, m);
-		for (; e.length < m;) e.push({
+var h = d(function({ teaser: d, tiles: h = 15, size: g = "sm", boardType: _ = "black", code62Glyph: v = "degree", className: y = "" }) {
+	let b = _ === "white", x = b ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", S = b ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", C = f(() => {
+		let e = r(d).slice(0, h).map((e) => t(e, v));
+		for (; e.length < h;) e.push({
 			type: "char",
 			value: " "
 		});
 		return e;
-	}, [u, m]), S = d(() => t(u) || "Board teaser", [u]), C = h === "sm" ? v ? "0 1px 2px rgba(0,0,0,0.15)" : "0 1px 2px rgba(0,0,0,0.4)" : v ? "0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1), inset 0 -1px 2px rgba(255,255,255,0.5), inset 1px 0 1px rgba(0,0,0,0.08), inset -1px 0 1px rgba(255,255,255,0.4)" : "0 2px 4px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.08), inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.05)";
-	return /* @__PURE__ */ f("div", {
+	}, [
+		d,
+		h,
+		v
+	]), w = f(() => n(d, "flagship", v) || "Board teaser", [d, v]), T = g === "sm" ? b ? "0 1px 2px rgba(0,0,0,0.15)" : "0 1px 2px rgba(0,0,0,0.4)" : b ? "0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1), inset 0 -1px 2px rgba(255,255,255,0.5), inset 1px 0 1px rgba(0,0,0,0.08), inset -1px 0 1px rgba(255,255,255,0.4)" : "0 2px 4px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.08), inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.05)";
+	return /* @__PURE__ */ p("div", {
 		role: "img",
-		"aria-label": S,
+		"aria-label": w,
 		"data-slot": "board-teaser",
-		className: `inline-flex max-w-full ${_}`,
-		children: /* @__PURE__ */ f("div", {
+		className: `inline-flex max-w-full ${y}`,
+		children: /* @__PURE__ */ p("div", {
 			"aria-hidden": "true",
-			className: `flex ${r[h]}`,
-			children: x.map((t, n) => {
+			className: `flex ${i[g]}`,
+			children: C.map((t, n) => {
 				if (t.type === "color") {
-					let r = e(t.code, v);
-					return h === "sm" ? /* @__PURE__ */ f("div", {
+					let r = e(t.code, b);
+					return g === "sm" ? /* @__PURE__ */ p("div", {
 						"data-teaser-tile": "",
-						className: `${a[h]} ${i[h]}`,
+						className: `${o[g]} ${a[g]}`,
 						style: {
 							backgroundColor: r,
-							boxShadow: C,
+							boxShadow: T,
 							contain: "layout style paint"
 						}
-					}, n) : /* @__PURE__ */ f("div", {
+					}, n) : /* @__PURE__ */ p("div", {
 						"data-teaser-tile": "",
-						className: `relative ${a[h]} ${i[h]} overflow-hidden`,
+						className: `relative ${o[g]} ${a[g]} overflow-hidden`,
 						style: {
-							backgroundColor: y,
-							boxShadow: C,
+							backgroundColor: x,
+							boxShadow: T,
 							contain: "layout style paint"
 						},
-						children: /* @__PURE__ */ f("div", {
-							className: `absolute ${i[h]} overflow-hidden`,
+						children: /* @__PURE__ */ p("div", {
+							className: `absolute ${a[g]} overflow-hidden`,
 							style: {
 								top: "3px",
 								bottom: "4px",
@@ -52,57 +56,57 @@ var m = u(function({ teaser: u, tiles: m = 15, size: h = "sm", boardType: g = "b
 								backgroundColor: r,
 								boxShadow: "0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.25)"
 							},
-							children: /* @__PURE__ */ f("div", {
-								className: s,
-								style: l[g]
+							children: /* @__PURE__ */ p("div", {
+								className: c,
+								style: u[_]
 							})
 						})
 					}, n);
 				}
-				let r = t.value, u = r === "♥";
-				return h === "sm" ? /* @__PURE__ */ f("div", {
+				let r = t.value, i = r === "♥";
+				return g === "sm" ? /* @__PURE__ */ p("div", {
 					"data-teaser-tile": "",
-					className: `${a[h]} ${i[h]} flex items-center justify-center`,
+					className: `${o[g]} ${a[g]} flex items-center justify-center`,
 					style: {
-						backgroundColor: y,
-						boxShadow: C,
+						backgroundColor: x,
+						boxShadow: T,
 						contain: "layout style paint"
 					},
-					children: r !== " " && /* @__PURE__ */ f("span", {
-						className: `${o[h]} font-mono font-semibold select-none leading-none`,
-						style: { color: u ? "#eb4034" : b },
+					children: r !== " " && /* @__PURE__ */ p("span", {
+						className: `${s[g]} font-mono font-semibold select-none leading-none`,
+						style: { color: i ? "#eb4034" : S },
 						children: r
 					})
-				}, n) : /* @__PURE__ */ p("div", {
+				}, n) : /* @__PURE__ */ m("div", {
 					"data-teaser-tile": "",
-					className: `relative ${a[h]} ${i[h]} overflow-hidden`,
+					className: `relative ${o[g]} ${a[g]} overflow-hidden`,
 					style: {
-						backgroundColor: y,
-						boxShadow: C,
+						backgroundColor: x,
+						boxShadow: T,
 						contain: "layout style paint"
 					},
 					children: [
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ p("div", {
 							className: "absolute inset-0 flex items-center justify-center",
 							style: {
 								zIndex: 2,
-								boxShadow: c[g]
+								boxShadow: l[_]
 							},
-							children: r !== " " && /* @__PURE__ */ f("span", {
-								className: `${o[h]} font-mono font-semibold select-none leading-none`,
-								style: { color: u ? "#eb4034" : b },
+							children: r !== " " && /* @__PURE__ */ p("span", {
+								className: `${s[g]} font-mono font-semibold select-none leading-none`,
+								style: { color: i ? "#eb4034" : S },
 								children: r
 							})
 						}),
-						/* @__PURE__ */ f("div", {
-							className: s,
-							style: l[g]
+						/* @__PURE__ */ p("div", {
+							className: c,
+							style: u[_]
 						}),
-						/* @__PURE__ */ f("div", {
+						/* @__PURE__ */ p("div", {
 							className: "absolute inset-0 pointer-events-none",
 							style: {
 								zIndex: 1,
-								background: v ? "linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.05) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.2) 100%)"
+								background: b ? "linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.05) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.2) 100%)"
 							}
 						})
 					]
@@ -112,6 +116,6 @@ var m = u(function({ teaser: u, tiles: m = 15, size: h = "sm", boardType: g = "b
 	});
 });
 //#endregion
-export { m as BoardTeaser };
+export { h as BoardTeaser };
 
 //# sourceMappingURL=board-teaser.js.map

package/dist/components/board/board-teaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-teaser.js","names":[],"sources":["../../../src/components/board/board-teaser.tsx"],"mappings":";;;;;;;;AA+BA,IAAa,IAAc,EAAK,SAAqB,EACnD,WACA,WAAQ,IACR,UAAO,MACP,eAAY,SACZ,eAAY,MACO;CACnB,IAAM,IAAe,MAAc,SAC7B,IAAS,IAAe,qCAAqC,mCAC7D,IAAY,IAAe,qCAAqC,mCAEhE,IAAM,QAA4B;EACtC,IAAM,IAAS,EAAU,CAAM,CAAC,CAAC,MAAM,GAAG,CAAK;EAC/C,OAAO,EAAO,SAAS,IACrB,EAAO,KAAK;GAAE,MAAM;GAAQ,OAAO;EAAI,CAAC;EAE1C,OAAO;CACT,GAAG,CAAC,GAAQ,CAAK,CAAC,GAMZ,IAAQ,QAAc,EAAc,CAAM,KAAK,gBAAgB,CAAC,CAAM,CAAC,GAMvE,IACJ,MAAS,OACL,IACE,+BACA,8BACF,IACE,iLACA;CAER,OACE,kBAAC,OAAD;EAAK,MAAK;EAAM,cAAY;EAAO,aAAU;EAAe,WAAW,0BAA0B;EAC/F,UAAA,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW,QAAQ,EAAW;GACnD,UAAA,EAAI,KAAK,GAAO,MAAW;IAC1B,IAAI,EAAM,SAAS,SAAS;KAC1B,IAAM,IAAU,EAAiB,EAAM,MAAM,CAAY;KAiBzD,OAdI,MAAS,OAET,kBAAC,OAAD;MAEE,oBAAiB;MACjB,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc;MACjD,OAAO;OACL,iBAAiB;OACjB,WAAW;OACX,SAAS;MACX;KACD,GARM,CAQN,IAIH,kBAAC,OAAD;MAEE,oBAAiB;MACjB,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;MAChE,OAAO;OACL,iBAAiB;OACjB,WAAW;OACX,SAAS;MACX;MAEA,UAAA,kBAAC,OAAD;OACE,WAAW,YAAY,EAAc,GAAM;OAC3C,OAAO;QACL,KAAK;QACL,QAAQ;QACR,MAAM;QACN,OAAO;QACP,iBAAiB;QACjB,WACE;OACJ;OAEA,UAAA,kBAAC,OAAD;QAAK,WAAW;QAAY,OAAO,EAAU;OAAa,CAAA;MACvD,CAAA;KACF,GAvBE,CAuBF;IAET;IAEA,IAAM,IAAO,EAAM,OACb,IAAU,MAAS;IA2BzB,OAxBI,MAAS,OAET,kBAAC,OAAD;KAEE,oBAAiB;KACjB,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc,GAAM;KACvD,OAAO;MACL,iBAAiB;MACjB,WAAW;MACX,SAAS;KACX;KAEC,UAAA,MAAS,OACR,kBAAC,QAAD;MACE,WAAW,GAAG,EAAgB,GAAM;MACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;MAE/C,UAAA;KACG,CAAA;IAEL,GAjBE,CAiBF,IAKP,kBAAC,OAAD;KAEE,oBAAiB;KACjB,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;KAChE,OAAO;MACL,iBAAiB;MACjB,WAAW;MACX,SAAS;KACX;KARF,UAAA;MAWE,kBAAC,OAAD;OACE,WAAU;OACV,OAAO;QAAE,QAAQ;QAAG,WAAW,EAAkB;OAAW;OAE3D,UAAA,MAAS,OACR,kBAAC,QAAD;QACE,WAAW,GAAG,EAAgB,GAAM;QACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;QAE/C,UAAA;OACG,CAAA;MAEL,CAAA;MACL,kBAAC,OAAD;OAAK,WAAW;OAAY,OAAO,EAAU;MAAa,CAAA;MAC1D,kBAAC,OAAD;OACE,WAAU;OACV,OAAO;QACL,QAAQ;QACR,YAAY,IACR,8FACA;OACN;MACD,CAAA;KACE;IAjCE,GAAA,CAiCF;GAET,CAAC;EACE,CAAA;CACF,CAAA;AAET,CAAC"}
+{"version":3,"file":"board-teaser.js","names":[],"sources":["../../../src/components/board/board-teaser.tsx"],"mappings":";;;;;;;;AA4CA,IAAa,IAAc,EAAK,SAAqB,EACnD,WACA,WAAQ,IACR,UAAO,MACP,eAAY,SACZ,iBAAc,UACd,eAAY,MACO;CACnB,IAAM,IAAe,MAAc,SAC7B,IAAS,IAAe,qCAAqC,mCAC7D,IAAY,IAAe,qCAAqC,mCAEhE,IAAM,QAA4B;EACtC,IAAM,IAAS,EAAU,CAAM,CAAC,CAC7B,MAAM,GAAG,CAAK,CAAC,CACf,KAAK,MAAU,EAAiB,GAAO,CAAW,CAAC;EACtD,OAAO,EAAO,SAAS,IACrB,EAAO,KAAK;GAAE,MAAM;GAAQ,OAAO;EAAI,CAAC;EAE1C,OAAO;CACT,GAAG;EAAC;EAAQ;EAAO;CAAW,CAAC,GASzB,IAAQ,QAAc,EAAc,GAAQ,YAAY,CAAW,KAAK,gBAAgB,CAAC,GAAQ,CAAW,CAAC,GAM7G,IACJ,MAAS,OACL,IACE,+BACA,8BACF,IACE,iLACA;CAER,OACE,kBAAC,OAAD;EAAK,MAAK;EAAM,cAAY;EAAO,aAAU;EAAe,WAAW,0BAA0B;EAC/F,UAAA,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW,QAAQ,EAAW;GACnD,UAAA,EAAI,KAAK,GAAO,MAAW;IAC1B,IAAI,EAAM,SAAS,SAAS;KAC1B,IAAM,IAAU,EAAiB,EAAM,MAAM,CAAY;KAiBzD,OAdI,MAAS,OAET,kBAAC,OAAD;MAEE,oBAAiB;MACjB,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc;MACjD,OAAO;OACL,iBAAiB;OACjB,WAAW;OACX,SAAS;MACX;KACD,GARM,CAQN,IAIH,kBAAC,OAAD;MAEE,oBAAiB;MACjB,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;MAChE,OAAO;OACL,iBAAiB;OACjB,WAAW;OACX,SAAS;MACX;MAEA,UAAA,kBAAC,OAAD;OACE,WAAW,YAAY,EAAc,GAAM;OAC3C,OAAO;QACL,KAAK;QACL,QAAQ;QACR,MAAM;QACN,OAAO;QACP,iBAAiB;QACjB,WACE;OACJ;OAEA,UAAA,kBAAC,OAAD;QAAK,WAAW;QAAY,OAAO,EAAU;OAAa,CAAA;MACvD,CAAA;KACF,GAvBE,CAuBF;IAET;IAEA,IAAM,IAAO,EAAM,OACb,IAAU,MAAS;IA2BzB,OAxBI,MAAS,OAET,kBAAC,OAAD;KAEE,oBAAiB;KACjB,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc,GAAM;KACvD,OAAO;MACL,iBAAiB;MACjB,WAAW;MACX,SAAS;KACX;KAEC,UAAA,MAAS,OACR,kBAAC,QAAD;MACE,WAAW,GAAG,EAAgB,GAAM;MACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;MAE/C,UAAA;KACG,CAAA;IAEL,GAjBE,CAiBF,IAKP,kBAAC,OAAD;KAEE,oBAAiB;KACjB,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;KAChE,OAAO;MACL,iBAAiB;MACjB,WAAW;MACX,SAAS;KACX;KARF,UAAA;MAWE,kBAAC,OAAD;OACE,WAAU;OACV,OAAO;QAAE,QAAQ;QAAG,WAAW,EAAkB;OAAW;OAE3D,UAAA,MAAS,OACR,kBAAC,QAAD;QACE,WAAW,GAAG,EAAgB,GAAM;QACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;QAE/C,UAAA;OACG,CAAA;MAEL,CAAA;MACL,kBAAC,OAAD;OAAK,WAAW;OAAY,OAAO,EAAU;MAAa,CAAA;MAC1D,kBAAC,OAAD;OACE,WAAU;OACV,OAAO;QACL,QAAQ;QACR,YAAY,IACR,8FACA;OACN;MACD,CAAA;KACE;IAjCE,GAAA,CAiCF;GAET,CAAC;EACE,CAAA;CACF,CAAA;AAET,CAAC"}

package/dist/components/chrome/nav-list.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+declare function NavList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+/** One row's list item. Wraps a {@link NavListLink} — or anything else a row needs to be. */
+declare function NavListItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+export type NavListLinkProps = React.ComponentProps<"a"> & {
+    /**
+     * Render the caller's own element instead of an `<a>` — the same
+     * `useRender` mechanics as {@link "./breadcrumb".BreadcrumbLink}. This is
+     * how a router Link (Docusaurus's `<Link>`, FiestaBoard's
+     * ViewTransitionLink) gets prefetch and base-path handling while this
+     * component keeps owning the row's look and its ARIA.
+     */
+    asChild?: boolean;
+    /**
+     * Marks this row as the current destination: paints the pill AND sets
+     * `aria-current`. The app derives it from its router — the design system
+     * never guesses at routes.
+     */
+    active?: boolean;
+    /**
+     * Which kind of "current" this row is, when `active`. Defaults to `"page"`;
+     * pass `"location"` for a table of contents, where the row points at a
+     * position inside the page you are already on.
+     * @default "page"
+     */
+    current?: "page" | "step" | "location" | "date" | "time";
+};
+declare function NavListLink({ className, asChild, active, current, children, ref, ...props }: NavListLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export type NavListSectionProps = React.ComponentProps<"li"> & {
+    /** Open on first render, uncontrolled — a router opens the section holding the current route. */
+    defaultOpen?: boolean;
+    /** Controlled open state; pair with {@link NavListSectionProps.onOpenChange}. */
+    open?: boolean;
+    /**
+     * Fired with the next open state. One argument, not Base UI's
+     * `(open, eventDetails)` pair, so `onOpenChange={setOpen}` behaves.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+declare function NavListSection({ className, children, defaultOpen, open, onOpenChange, ...props }: NavListSectionProps): React.JSX.Element;
+/**
+ * The section's header row: a real `<button>` from Base UI's Collapsible, so
+ * `aria-expanded` and the panel wiring are the primitive's. Children are the
+ * section's localized label (plus an optional leading icon); the caret is
+ * appended and hidden from AT.
+ */
+declare function NavListSectionTrigger({ className, children, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/**
+ * The section's sublist. Renders the Collapsible panel wrapping a nested
+ * `<ul>` — children are {@link NavListItem}s, exactly as in the parent list.
+ */
+declare function NavListSectionContent({ className, children, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+export { NavList, NavListItem, NavListLink, NavListSection, NavListSectionContent, NavListSectionTrigger };

package/dist/components/chrome/nav-list.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Collapsible as t, CollapsibleContent as n, CollapsibleTrigger as r } from "../containment/collapsible.js";
+import { ChevronRight as i } from "lucide-react";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRender as c } from "@base-ui/react/use-render";
+//#region src/components/chrome/nav-list.tsx
+var l = [
+	"flex min-h-9 w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm font-medium",
+	"transition-[color,background-color,border-color,box-shadow] duration-control focus-ring",
+	"[&>svg]:size-4 [&>svg]:shrink-0"
+], u = "nav-active font-semibold", d = "text-muted-foreground nav-active-hover hover:text-foreground";
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ o("ul", {
+		role: "list",
+		"data-slot": "nav-list",
+		className: e("flex list-none flex-col gap-0.5 p-0", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ o("li", {
+		"data-slot": "nav-list-item",
+		className: e("min-w-0", t),
+		...n
+	});
+}
+function m({ className: t, asChild: n = !1, active: r = !1, current: i = "page", children: o, ref: s, ...f }) {
+	return c({
+		defaultTagName: "a",
+		ref: s,
+		render: n ? a.Children.only(o) : void 0,
+		props: {
+			"data-slot": "nav-list-link",
+			"data-active": r ? "" : void 0,
+			"aria-current": r ? i : void 0,
+			className: e(l, r ? u : d, t),
+			...n ? {} : { children: o },
+			...f
+		}
+	});
+}
+function h({ className: n, children: r, defaultOpen: i, open: a, onOpenChange: s, ...c }) {
+	return /* @__PURE__ */ o("li", {
+		"data-slot": "nav-list-section",
+		className: e("min-w-0", n),
+		...c,
+		children: /* @__PURE__ */ o(t, {
+			className: "flex flex-col gap-0.5",
+			defaultOpen: i,
+			open: a,
+			onOpenChange: s ? (e) => s(e) : void 0,
+			children: r
+		})
+	});
+}
+function g({ className: t, children: n, ...a }) {
+	return /* @__PURE__ */ s(r, {
+		"data-slot": "nav-list-section-trigger",
+		className: e(l, d, "group/nav-list-section-trigger justify-between", t),
+		...a,
+		children: [n, /* @__PURE__ */ o(i, {
+			"aria-hidden": "true",
+			className: "ml-auto transition-transform duration-control group-data-[panel-open]/nav-list-section-trigger:rotate-90"
+		})]
+	});
+}
+function _({ className: t, children: r, ...i }) {
+	return /* @__PURE__ */ o(n, {
+		"data-slot": "nav-list-section-panel",
+		children: /* @__PURE__ */ o("ul", {
+			role: "list",
+			"data-slot": "nav-list-section-content",
+			className: e("ml-4 flex list-none flex-col gap-0.5 border-l border-border py-0.5 pl-2", t),
+			...i,
+			children: r
+		})
+	});
+}
+//#endregion
+export { f as NavList, p as NavListItem, m as NavListLink, h as NavListSection, _ as NavListSectionContent, g as NavListSectionTrigger };
+
+//# sourceMappingURL=nav-list.js.map

package/dist/components/chrome/nav-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-list.js","names":[],"sources":["../../../src/components/chrome/nav-list.tsx"],"mappings":";;;;;;;;AA4FA,IAAM,IAAe;CACnB;CACA;CACA;AACF,GAIM,IAAsB,4BACtB,IAAuB;AAM7B,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAqC;CACpE,OAME,kBAAC,MAAD;EAAI,MAAK;EAAO,aAAU;EAAW,WAAW,EAAG,uCAAuC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;AAGA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAqC;CACxE,OAAO,kBAAC,MAAD;EAAI,aAAU;EAAgB,WAAW,EAAG,WAAW,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;AA8BA,SAAS,EAAY,EACnB,cACA,aAAU,IACV,YAAS,IACT,aAAU,QACV,aACA,QACA,GAAG,KACgB;CACnB,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GAGb,eAAe,IAAS,KAAK,KAAA;GAC7B,gBAAgB,IAAS,IAAU,KAAA;GACnC,WAAW,EAAG,GAAc,IAAS,IAAsB,GAAsB,CAAS;GAC1F,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH;AAkBA,SAAS,EAAe,EAAE,cAAW,aAAU,gBAAa,SAAM,iBAAc,GAAG,KAA8B;CAC/G,OAGE,kBAAC,MAAD;EAAI,aAAU;EAAmB,WAAW,EAAG,WAAW,CAAS;EAAG,GAAI;EACxE,UAAA,kBAAC,GAAD;GACE,WAAU;GACG;GACP;GACN,cAAc,KAAgB,MAAa,EAAa,CAAQ,IAAI,KAAA;GAEnE;EACU,CAAA;CACX,CAAA;AAER;AAQA,SAAS,EAAsB,EAAE,cAAW,aAAU,GAAG,KAAyC;CAChG,OACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EAAG,GAAc,GAAsB,kDAAkD,CAAS;EAC7G,GAAI;EAHN,UAAA,CAKG,GAQD,kBAAC,GAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,CACiB;;AAExB;AAMA,SAAS,EAAsB,EAAE,cAAW,aAAU,GAAG,KAAqC;CAC5F,OACE,kBAAC,GAAD;EAAoB,aAAU;EAsB5B,UAAA,kBAAC,MAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,EAGT,2EACA,CACF;GACA,GAAI;GAEH;EACC,CAAA;CACc,CAAA;AAExB"}

package/dist/components/containment/icon-tile.d.ts

@@ -0,0 +1,67 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * IconTile — the small rounded square that holds one icon (#229 item 5).
+ *
+ * Taxonomy: `containment/`, because the job is literally "box another thing".
+ * The two neighbours it is NOT:
+ *
+ *   * `feedback/` owns the system talking about itself — Badge, Chip, Alert,
+ *     StatusDot. An IconTile says nothing; it is a ground for whatever glyph
+ *     the consumer puts in it, and it carries no state, no severity and no
+ *     announcement. Filing it beside Badge because both are small and
+ *     rounded would file it by looks, which is the one rule §1.1 forbids.
+ *   * `chrome/` owns the app frame (Sidebar, PageHeader, the logos). The tile
+ *     is not frame furniture — it appears inside cards, empty states, list
+ *     rows and wizard headers alike.
+ *
+ * Card is the same idea one order of magnitude up (a surface that holds
+ * arbitrary content); IconTile is the smallest member of that family, sized
+ * for exactly one glyph. Hence `containment/`.
+ *
+ * What it replaces: the wizard header medallion, which hand-rolled
+ * `size-12 … rounded-xl ring-1 ring-white/10` on the board surface
+ * (wizard-shell.tsx), and the same shape typed out again wherever an icon
+ * needed a ground. One primitive, two tones, three sizes.
+ *
+ * Accessibility: the tile is DECORATIVE BY DEFAULT and stamps
+ * `aria-hidden="true"` on itself. An icon in a tile is nearly always a
+ * restatement of the text beside it — the wizard's brand mark sits next to
+ * the wordmark, an empty state's icon sits above its title — and announcing
+ * both is the double-announcement §6.7 forbids. Opting out (`decorative
+ * ={false}`) hands the semantics back to the consumer, who must then give
+ * the glyph itself a name. There is deliberately no `label` prop: a tile
+ * that needs a name needs a *localized* name, and this package ships no
+ * copy of its own (§8) — an `aria-label` on the glyph or on the tile via
+ * props is the consumer's call, not a default this file can invent.
+ *
+ * Not a control. It has no `focus-ring`, no hover state and no `onClick`
+ * contract, so SC 2.5.8's 24×24 floor does not reach it (the smallest size
+ * is 32px anyway). Wrap it in a Button or make the row the target if the
+ * tile needs to be pressable — a clickable `<span>` is the bug MediaFrame
+ * was promoted to fix.
+ */
+declare const iconTileVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "muted" | "board" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconTileProps = React.ComponentProps<"span"> & VariantProps<typeof iconTileVariants> & {
+    /**
+     * Keep the tile and its glyph out of the accessibility tree.
+     * `@default true` — an icon in a tile almost always repeats the text
+     * beside it. Pass `false` when the glyph is the only carrier of its
+     * meaning, and give that glyph a localized name yourself.
+     */
+    decorative?: boolean;
+};
+/**
+ * A muted (or board-black) rounded square that centres one icon.
+ *
+ * ```tsx
+ * <IconTile size="lg" tone="board">
+ *   <FiestaIcon className="size-8" />
+ * </IconTile>
+ * ```
+ */
+declare function IconTile({ className, size, tone, decorative, ref, ...props }: IconTileProps): React.JSX.Element;
+export { IconTile, iconTileVariants };

package/dist/components/containment/icon-tile.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/containment/icon-tile.tsx
+var r = n([
+	"inline-flex shrink-0 items-center justify-center",
+	"overflow-hidden",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		size: {
+			sm: "size-8 rounded-md [&_svg:not([class*='size-'])]:size-4",
+			md: "size-10 rounded-lg [&_svg:not([class*='size-'])]:size-5",
+			lg: "size-12 rounded-xl [&_svg:not([class*='size-'])]:size-6"
+		},
+		tone: {
+			muted: "bg-muted text-muted-foreground",
+			board: "bg-board-surface-dark text-board-text-on-dark ring-1 ring-white/10"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "muted"
+	}
+});
+function i({ className: n, size: i, tone: a, decorative: o = !0, ref: s, ...c }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "icon-tile",
+		"data-size": i ?? "md",
+		"data-tone": a ?? "muted",
+		"aria-hidden": o ? !0 : void 0,
+		ref: s,
+		className: e(r({
+			size: i,
+			tone: a
+		}), n),
+		...c
+	});
+}
+//#endregion
+export { i as IconTile, r as iconTileVariants };
+
+//# sourceMappingURL=icon-tile.js.map

package/dist/components/containment/icon-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile.js","names":[],"sources":["../../../src/components/containment/icon-tile.tsx"],"mappings":";;;;;AA8CA,IAAM,IAAmB,EACvB;CAIE;CAKA;CACA;AACF,GACA;CACE,UAAU;EAWR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,MAAM;GAKJ,OAAO;GAeP,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;CACR;AACF,CACF;AAsBA,SAAS,EAAS,EAAE,cAAW,SAAM,SAAM,gBAAa,IAAM,QAAK,GAAG,KAAwB;CAC5F,OACE,kBAAC,QAAD;EACE,aAAU;EAGV,aAAW,KAAQ;EACnB,aAAW,KAAQ;EAGnB,eAAa,IAAa,KAAO,KAAA;EAC5B;EACL,WAAW,EAAG,EAAiB;GAAE;GAAM;EAAK,CAAC,GAAG,CAAS;EACzD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/containment/json-tree.js

@@ -10,7 +10,7 @@ var c = {
 	boolean: "text-hue-yellow",
 	nullish: "text-muted-foreground italic",
 	other: "text-foreground"
-}, l = "text-info", u = "text-tag-variable-foreground", d = "-ml-1 flex w-full items-center gap-1 rounded-sm px-1 py-0.5 text-left text-xs text-muted-foreground transition-colors duration-control hover:bg-muted/60 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", f = "shrink-0 rounded-sm p-0.5 opacity-0 transition-opacity duration-control hover:bg-muted group-hover:opacity-100 focus-visible:opacity-100 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", p = 1500;
+}, l = "text-info", u = "text-tag-variable-foreground", d = "-ml-1 flex w-full items-center gap-1 rounded-sm px-1 py-0.5 text-left text-xs text-muted-foreground transition-colors duration-control hover:bg-muted/60 focus-ring", f = "shrink-0 rounded-sm p-0.5 opacity-0 transition-opacity duration-control hover:bg-muted group-hover:opacity-100 focus-visible:opacity-100 focus-ring", p = 1500;
 function m(e) {
 	return typeof e == "object" && !!e;
 }

package/dist/components/containment/json-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-tree.js","names":[],"sources":["../../../src/components/containment/json-tree.tsx"],"mappings":"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"}
+{"version":3,"file":"json-tree.js","names":[],"sources":["../../../src/components/containment/json-tree.tsx"],"mappings":"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"}

package/dist/components/containment/scroll-area.d.ts

@@ -1,5 +1,22 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import * as React from "react";
+/**
+ * The viewport is a real tab stop (`tabIndex={0}` — a scrollable region has to
+ * be keyboard-operable), so it needs a visible focus indicator. It cannot draw
+ * its own: the Root is `overflow-hidden` and the Viewport is an `h-full w-full`
+ * direct child filling it exactly, so ANY outset ring on the Viewport — the
+ * `.focus-ring` box-shadow, or the `focus-visible:ring-[3px]` this used to
+ * spell — paints entirely inside the clipped region and is never seen. That is
+ * the same clipping that keeps `media-frame.tsx` and `time-picker.tsx` pinned
+ * in the theme-contrast guard, and it made this control's indicator invisible
+ * long before the ring recipe changed (SC 2.4.7).
+ *
+ * So the ring is drawn on the ROOT, which clips its descendants but not its own
+ * box-shadow, and it is keyed to the Viewport's focus with `has-*`. The value
+ * comes from `--focus-ring-shadow` (#228 item 5) rather than a re-spelling of
+ * the three stops, so a retune of the ring tracks here by construction — the
+ * same move `plugin-card.tsx` will make for its `::after` overlay.
+ */
 declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>): React.JSX.Element;
 export { ScrollArea, ScrollBar };

package/dist/components/containment/scroll-area.js

@@ -7,12 +7,12 @@ import { ScrollArea as r } from "@base-ui/react/scroll-area";
 function i({ className: i, children: o, ...s }) {
 	return /* @__PURE__ */ n(r.Root, {
 		"data-slot": "scroll-area",
-		className: e("relative overflow-hidden", i),
+		className: e("relative overflow-hidden has-[[data-slot=scroll-area-viewport]:focus-visible]:shadow-[var(--focus-ring-shadow)]", i),
 		...s,
 		children: [
 			/* @__PURE__ */ t(r.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "h-full w-full rounded-[inherit] outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				className: "h-full w-full rounded-[inherit] outline-none",
 				tabIndex: 0,
 				children: o
 			}),

package/dist/components/containment/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../src/components/containment/scroll-area.tsx"],"mappings":";;;;;;AAOA,SAAS,EAAW,EAAE,cAAW,aAAU,GAAG,KAAgE;CAC5G,OACE,kBAAC,EAAoB,MAArB;EAA0B,aAAU;EAAc,WAAW,EAAG,4BAA4B,CAAS;EAAG,GAAI;EAA5G,UAAA;GACE,kBAAC,EAAoB,UAArB;IACE,aAAU;IACV,WAAU;IACV,UAAU;IAET;GAC2B,CAAA;GAC9B,kBAAC,GAAD,CAAY,CAAA;GACZ,kBAAC,EAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,EAAU,EACjB,cACA,iBAAc,YACd,GAAG,KAC0D;CAC7D,OACE,kBAAC,EAAoB,WAArB;EACE,aAAU;EACG;EACb,WAAW,EACT,+IACA,MAAgB,cAAc,sDAC9B,MAAgB,gBAAgB,wDAChC,CACF;EACA,GAAI;EAEJ,UAAA,kBAAC,EAAoB,OAArB;GAA2B,aAAU;GAAoB,WAAU;EAA0C,CAAA;CAChF,CAAA;AAEnC"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../../src/components/containment/scroll-area.tsx"],"mappings":";;;;;;AAwBA,SAAS,EAAW,EAAE,cAAW,aAAU,GAAG,KAAgE;CAC5G,OACE,kBAAC,EAAoB,MAArB;EACE,aAAU;EACV,WAAW,EACT,mHACA,CACF;EACA,GAAI;EANN,UAAA;GAQE,kBAAC,EAAoB,UAArB;IACE,aAAU;IAGV,WAAU;IACV,UAAU;IAET;GAC2B,CAAA;GAC9B,kBAAC,GAAD,CAAY,CAAA;GACZ,kBAAC,EAAoB,QAArB,CAA6B,CAAA;EACL;;AAE9B;AAEA,SAAS,EAAU,EACjB,cACA,iBAAc,YACd,GAAG,KAC0D;CAC7D,OACE,kBAAC,EAAoB,WAArB;EACE,aAAU;EACG;EACb,WAAW,EACT,+IACA,MAAgB,cAAc,sDAC9B,MAAgB,gBAAgB,wDAChC,CACF;EACA,GAAI;EAEJ,UAAA,kBAAC,EAAoB,OAArB;GAA2B,aAAU;GAAoB,WAAU;EAA0C,CAAA;CAChF,CAAA;AAEnC"}

package/dist/components/containment/tabs.js

@@ -20,14 +20,14 @@ function i({ className: r, ...i }) {
 function a({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Tab, {
 		"data-slot": "tabs-trigger",
-		className: e("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-[color,background-color,box-shadow] duration-base outline-none not-data-[active]:hover:bg-background/50 not-data-[active]:hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm", r),
+		className: e("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-[color,background-color,box-shadow] duration-base focus-ring not-data-[active]:hover:bg-background/50 not-data-[active]:hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-sm", r),
 		...i
 	});
 }
 function o({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Panel, {
 		"data-slot": "tabs-content",
-		className: e("mt-2 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", r),
+		className: e("mt-2 focus-ring", r),
 		...i
 	});
 }

package/dist/components/containment/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/containment/tabs.tsx"],"mappings":";;;;;;AAOA,SAAS,EAAK,EAAE,GAAG,KAA0D;CAC3E,OAAO,kBAAC,EAAc,MAAf;EAAoB,aAAU;EAAO,GAAI;CAAQ,CAAA;AAC1D;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OACE,kBAAC,EAAc,MAAf;EACE,aAAU;EACV,WAAW,EACT,8FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAyD;CAC5F,OACE,kBAAC,EAAc,KAAf;EACE,aAAU;EACV,WAAW,EAIT,0bACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAA2D;CAC9F,OACE,kBAAC,EAAc,OAAf;EACE,aAAU;EACV,WAAW,EAAG,yEAAyE,CAAS;EAChG,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/containment/tabs.tsx"],"mappings":";;;;;;AAOA,SAAS,EAAK,EAAE,GAAG,KAA0D;CAC3E,OAAO,kBAAC,EAAc,MAAf;EAAoB,aAAU;EAAO,GAAI;CAAQ,CAAA;AAC1D;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OACE,kBAAC,EAAc,MAAf;EACE,aAAU;EACV,WAAW,EACT,8FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAyD;CAC5F,OACE,kBAAC,EAAc,KAAf;EACE,aAAU;EACV,WAAW,EAIT,oYACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAA2D;CAC9F,OAAO,kBAAC,EAAc,OAAf;EAAqB,aAAU;EAAe,WAAW,EAAG,mBAAmB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChH"}

package/dist/components/editor/formula/formula-editor-panel.js

@@ -367,7 +367,7 @@ function P({ initialExpr: d = "", mode: f, onConfirm: p, onCancel: m, formulaFun
 										onClick: () => Ae(t),
 										"aria-expanded": !r,
 										"aria-controls": s,
-										className: e("flex items-center justify-between w-full px-2 py-1.5 text-[11px] font-semibold transition-colors", "bg-muted/40 hover:bg-muted/70", "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", a?.text ?? "text-muted-foreground"),
+										className: e("flex items-center justify-between w-full px-2 py-1.5 text-[11px] font-semibold transition-colors", "bg-muted/40 hover:bg-muted/70", "focus-ring", a?.text ?? "text-muted-foreground"),
 										children: [/* @__PURE__ */ C(l, {
 											as: "span",
 											weight: "semibold",
@@ -382,7 +382,7 @@ function P({ initialExpr: d = "", mode: f, onConfirm: p, onCancel: m, formulaFun
 											children: /* @__PURE__ */ C("button", {
 												type: "button",
 												onClick: () => Oe(e.name),
-												className: "w-full text-left px-3 py-1 text-xs hover:bg-accent hover:text-accent-foreground transition-colors flex items-baseline gap-2 group outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+												className: "w-full text-left px-3 py-1 text-xs hover:bg-accent hover:text-accent-foreground transition-colors flex items-baseline gap-2 group focus-ring",
 												children: [/* @__PURE__ */ S(l, {
 													as: "span",
 													size: "xs",