@fiestaboard/ui 5.1.0 → 5.3.0

package/dist/components/board/static-board-display.js

@@ -7,61 +7,63 @@ import { isNoteArray as d, resolveDimensions as f } from "../../lib/board-dimens
 import { memo as p, useMemo as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/board/static-board-display.tsx
-var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ message: p, size: y = "sm", boardType: b = "black", deviceType: x = "flagship", className: S = "", notesWide: C = 1, notesTall: w = 1, previewLabel: T, messageLabel: E = _, emptyLabel: D = "Empty board display" }) {
-	let O = f(x, C, w), k = d(x), A = b === "white", j = A ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", M = A ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", N = m(() => t(p ?? "", O.rows, O.cols, x), [
+var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ message: p, size: y = "sm", boardType: b = "black", deviceType: x = "flagship", code62Glyph: S, className: C = "", notesWide: w = 1, notesTall: T = 1, previewLabel: E, messageLabel: D = _, emptyLabel: O = "Empty board display" }) {
+	let k = f(x, w, T), A = d(x), j = b === "white", M = j ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", N = j ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", P = m(() => t(p ?? "", k.rows, k.cols, x, S), [
 		p,
-		O.rows,
-		O.cols,
-		x
-	]), P = m(() => {
-		if (!p) return D;
-		if (T !== void 0) return T;
-		let e = n(p, x);
-		return e ? E(e) : v;
+		k.rows,
+		k.cols,
+		x,
+		S
+	]), F = m(() => {
+		if (!p) return O;
+		if (E !== void 0) return E;
+		let e = n(p, x, S);
+		return e ? D(e) : v;
 	}, [
 		p,
 		x,
-		T,
+		S,
 		E,
-		D
-	]), F = y === "sm" ? "6px" : y === "md" ? "8px" : "10px", I = A ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", L = A ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", R = y === "sm" ? A ? "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.9)" : "0 2px 8px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06)" : A ? "0 8px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.5)" : "0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.03)", z = y === "sm" ? A ? "0 1px 2px rgba(0,0,0,0.15)" : "0 1px 2px rgba(0,0,0,0.4)" : A ? "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)";
+		D,
+		O
+	]), I = y === "sm" ? "6px" : y === "md" ? "8px" : "10px", L = j ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", R = j ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", z = y === "sm" ? j ? "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.9)" : "0 2px 8px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06)" : j ? "0 8px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.5)" : "0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.03)", B = y === "sm" ? j ? "0 1px 2px rgba(0,0,0,0.15)" : "0 1px 2px rgba(0,0,0,0.4)" : j ? "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__ */ h("div", {
 		className: "w-full flex justify-center",
 		children: /* @__PURE__ */ h("div", {
 			role: "img",
-			"aria-label": P,
+			"aria-label": F,
 			"data-slot": "static-board-display",
-			className: `${y === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]"} ${S}`,
+			className: `${y === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]"} ${C}`,
 			style: {
-				backgroundColor: I,
-				borderColor: L,
-				boxShadow: R,
+				backgroundColor: L,
+				borderColor: R,
+				boxShadow: z,
 				width: "fit-content"
 			},
 			children: /* @__PURE__ */ h("div", {
 				className: `${i[y]} relative`,
 				"aria-hidden": "true",
-				style: { background: A ? "linear-gradient(135deg, var(--color-board-surface-light) 0%, var(--color-board-bezel-border-light) 100%)" : "linear-gradient(135deg, var(--color-board-surface-dark) 0%, var(--color-board-black) 100%)" },
+				style: { background: j ? "linear-gradient(135deg, var(--color-board-surface-light) 0%, var(--color-board-bezel-border-light) 100%)" : "linear-gradient(135deg, var(--color-board-surface-dark) 0%, var(--color-board-black) 100%)" },
 				children: /* @__PURE__ */ h("div", {
 					className: `flex flex-col ${r[y]}`,
-					children: N.map((t, n) => {
-						let i = k && n > 0 && n % 3 == 0;
+					children: P.map((t, n) => {
+						let i = A && n > 0 && n % 3 == 0;
 						return /* @__PURE__ */ h("div", {
 							"data-note-row": "",
 							...i ? { "data-note-row-seam": "true" } : {},
 							className: `flex ${r[y]} justify-center`,
-							style: i ? { marginTop: F } : void 0,
+							style: i ? { marginTop: I } : void 0,
 							children: t.map((t, n) => {
-								let r = k && n > 0 && n % 15 == 0, i = r ? { marginLeft: F } : void 0, d = r ? { "data-note-col-seam": "true" } : {};
+								let r = A && n > 0 && n % 15 == 0, i = r ? { marginLeft: I } : void 0, d = r ? { "data-note-col-seam": "true" } : {};
 								if (t.type === "color") {
-									let r = e(t.code, A);
+									let r = e(t.code, j);
 									return y === "sm" ? /* @__PURE__ */ h("div", {
 										"data-note-tile": "",
 										...d,
 										className: `${o[y]} ${a[y]} shrink-0`,
 										style: {
 											backgroundColor: r,
-											boxShadow: z,
+											boxShadow: B,
 											contain: "layout style paint",
 											...i
 										}
@@ -70,8 +72,8 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
 										...d,
 										className: `relative ${o[y]} ${a[y]} shrink-0 overflow-hidden`,
 										style: {
-											backgroundColor: j,
-											boxShadow: z,
+											backgroundColor: M,
+											boxShadow: B,
 											contain: "layout style paint",
 											...i
 										},
@@ -98,14 +100,14 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
 									...d,
 									className: `${o[y]} ${a[y]} flex shrink-0 items-center justify-center`,
 									style: {
-										backgroundColor: j,
-										boxShadow: z,
+										backgroundColor: M,
+										boxShadow: B,
 										contain: "layout style paint",
 										...i
 									},
 									children: f !== " " && /* @__PURE__ */ h("span", {
 										className: `${s[y]} font-mono font-semibold select-none leading-none`,
-										style: { color: p ? "#eb4034" : M },
+										style: { color: p ? "#eb4034" : N },
 										children: f
 									})
 								}, n) : /* @__PURE__ */ g("div", {
@@ -113,8 +115,8 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
 									...d,
 									className: `relative ${o[y]} ${a[y]} shrink-0 overflow-hidden`,
 									style: {
-										backgroundColor: j,
-										boxShadow: z,
+										backgroundColor: M,
+										boxShadow: B,
 										contain: "layout style paint",
 										...i
 									},
@@ -127,7 +129,7 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
 											},
 											children: f !== " " && /* @__PURE__ */ h("span", {
 												className: `${s[y]} font-mono font-semibold select-none leading-none`,
-												style: { color: p ? "#eb4034" : M },
+												style: { color: p ? "#eb4034" : N },
 												children: f
 											})
 										}),
@@ -139,7 +141,7 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
 											className: "absolute inset-0 pointer-events-none",
 											style: {
 												zIndex: 1,
-												background: A ? "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: j ? "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%)"
 											}
 										})
 									]

package/dist/components/board/static-board-display.js.map

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

package/dist/components/chrome/breadcrumb.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+declare function Breadcrumb({ className, ...props }: Omit<React.ComponentProps<"nav">, "aria-label"> & {
+    /**
+     * Localized accessible name for the landmark (e.g. "Breadcrumb"). Required:
+     * an unnamed nav is indistinguishable from the site nav in a landmark list,
+     * and the repo does not ship English defaults for consumers to forget.
+     */
+    "aria-label": string;
+}): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+/**
+ * A crumb that navigates. `asChild` (same useRender mechanics as Badge) lets
+ * the docs site pass Docusaurus's `<Link>` — router-aware prefetch and
+ * base-path handling — while this component keeps owning the look.
+ */
+declare function BreadcrumbLink({ className, asChild, children, ref, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** The trail's final entry: where you are, so it announces but never navigates. */
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/**
+ * Visual divider between crumbs. Children override the glyph (the docs site
+ * may want `/`); the default chevron reads as "descends into" in LTR.
+ */
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+/**
+ * Collapsed-middle marker for deep trails. Static by design: expand/collapse
+ * behaviour belongs to the consumer (wrap it in a DropdownMenu trigger via
+ * that component's own mechanics); baking a disclosure in here would force a
+ * hook — and "use client" — onto every static docs page for a control most
+ * trails never show.
+ */
+declare function BreadcrumbEllipsis({ label, className, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+    /**
+     * Localized sr-only announcement (e.g. "More pages"). Required, and NOT
+     * `aria-hidden` on the wrapper like shadcn's version — hiding the whole
+     * span silences the sr-only text inside it, leaving AT users with no hint
+     * that levels were elided. Only the glyph is hidden.
+     */
+    label: string;
+}): React.JSX.Element;
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/components/chrome/breadcrumb.js

@@ -0,0 +1,76 @@
+import { cn as e } from "../../lib/utils.js";
+import { ChevronRight as t, MoreHorizontal as n } from "lucide-react";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
+//#region src/components/chrome/breadcrumb.tsx
+function s({ className: e, ...t }) {
+	return /* @__PURE__ */ i("nav", {
+		"data-slot": "breadcrumb",
+		className: e,
+		...t
+	});
+}
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ i("ol", {
+		"data-slot": "breadcrumb-list",
+		className: e("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", t),
+		...n
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ i("li", {
+		"data-slot": "breadcrumb-item",
+		className: e("inline-flex items-center gap-1.5", t),
+		...n
+	});
+}
+function u({ className: t, asChild: n = !1, children: i, ref: a, ...s }) {
+	return o({
+		defaultTagName: "a",
+		ref: a,
+		render: n ? r.Children.only(i) : void 0,
+		props: {
+			"data-slot": "breadcrumb-link",
+			className: e("focus-ring rounded-sm transition-colors hover:text-foreground", t),
+			...n ? {} : { children: i },
+			...s
+		}
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: e("text-foreground font-normal", t),
+		...n
+	});
+}
+function f({ children: n, className: r, ...a }) {
+	return /* @__PURE__ */ i("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e("[&>svg]:size-3.5", r),
+		...a,
+		children: n ?? /* @__PURE__ */ i(t, {})
+	});
+}
+function p({ label: t, className: r, ...o }) {
+	return /* @__PURE__ */ a("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		className: e("flex items-center justify-center", r),
+		...o,
+		children: [/* @__PURE__ */ i(n, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ i("span", {
+			className: "sr-only",
+			children: t
+		})]
+	});
+}
+//#endregion
+export { s as Breadcrumb, p as BreadcrumbEllipsis, l as BreadcrumbItem, u as BreadcrumbLink, c as BreadcrumbList, d as BreadcrumbPage, f as BreadcrumbSeparator };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/chrome/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/components/chrome/breadcrumb.tsx"],"mappings":";;;;;;AAoCA,SAAS,EAAW,EAClB,cACA,GAAG,KAQF;CACD,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAwB;EAAW,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,EAAe,EAAE,cAAW,GAAG,KAAqC;CAC3E,OACE,kBAAC,MAAD;EACE,aAAU;EACV,WAAW,EAGT,4FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAe,EAAE,cAAW,GAAG,KAAqC;CAC3E,OAAO,kBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,EAAG,oCAAoC,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnH;AAOA,SAAS,EAAe,EACtB,cACA,aAAU,IACV,aACA,QACA,GAAG,KACiD;CACpD,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GAOb,WAAW,EAAG,iEAAiE,CAAS;GACxF,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH;AAGA,SAAS,EAAe,EAAE,cAAW,GAAG,KAAuC;CAC7E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,EAAG,+BAA+B,CAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAoB,EAAE,aAAU,cAAW,GAAG,KAAqC;CAC1F,OAKE,kBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,EAAG,oBAAoB,CAAS;EAC3C,GAAI;EAEH,UAAA,KAAY,kBAAC,GAAD,CAAe,CAAA;CAC1B,CAAA;AAER;AASA,SAAS,EAAmB,EAC1B,UACA,cACA,GAAG,KASF;CACD,OACE,kBAAC,QAAD;EAAM,aAAU;EAAsB,WAAW,EAAG,oCAAoC,CAAS;EAAG,GAAI;EAAxG,UAAA,CACE,kBAAC,GAAD;GAAgB,WAAU;GAAS,eAAY;EAAQ,CAAA,GACvD,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACnC;;AAEV"}

package/dist/components/containment/media-frame.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * MediaFrame — a framed figure for screenshots and other media.
+ *
+ * Promoted from the docs site's BoardScreenshot/ThemedScreenshot pair
+ * (issue #229 item 4), which shipped two structurally identical CSS modules.
+ * The frame is the shared shell: media on a card surface with a hairline
+ * border, plus an optional bar for a caption or a toolbar (the docs put a
+ * black/white toggle there). The bar renders whatever the consumer passes —
+ * the toggle itself belongs to ToggleGroup (#218), not here.
+ *
+ * Zooming is composition, not a built-in: wrap `MediaFrameMedia` in a
+ * `LightboxTrigger asChild` (see overlays/lightbox.tsx), or pass `onZoom`
+ * for a hand-rolled handler. Either way the media becomes a real `<button>`,
+ * so the affordance is keyboard-operable for free.
+ */
+declare function MediaFrame({ className, ...props }: React.ComponentProps<"figure">): React.JSX.Element;
+interface MediaFrameMediaProps extends React.ComponentProps<"button"> {
+    /**
+     * Zoom-affordance handler. Setting it (or `onClick`, which a
+     * `LightboxTrigger asChild` injects) switches the media well from a plain
+     * `<div>` to a `<button>` with a zoom cursor and focus ring.
+     */
+    onZoom?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function MediaFrameMedia({ className, onZoom, onClick, type, children, ...props }: MediaFrameMediaProps): React.JSX.Element;
+declare function MediaFrameBar({ className, ...props }: React.ComponentProps<"figcaption">): React.JSX.Element;
+export { MediaFrame, MediaFrameBar, MediaFrameMedia };

package/dist/components/containment/media-frame.js

@@ -0,0 +1,40 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/containment/media-frame.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("figure", {
+		"data-slot": "media-frame",
+		className: e("flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-card", n),
+		...r
+	});
+}
+var r = "block w-full [&_img]:block [&_img]:h-auto [&_img]:w-full [&_video]:block [&_video]:h-auto [&_video]:w-full";
+function i({ className: n, onZoom: i, onClick: a, type: o, children: s, ...c }) {
+	return i == null && a == null ? /* @__PURE__ */ t("div", {
+		"data-slot": "media-frame-media",
+		className: e(r, n),
+		...c,
+		children: s
+	}) : /* @__PURE__ */ t("button", {
+		type: o ?? "button",
+		"data-slot": "media-frame-media",
+		className: e(r, "cursor-zoom-in outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/50", n),
+		onClick: (e) => {
+			a?.(e), i?.(e);
+		},
+		...c,
+		children: s
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("figcaption", {
+		"data-slot": "media-frame-bar",
+		className: e("flex flex-wrap items-center justify-center gap-2 border-t px-3 py-2 text-sm text-muted-foreground", n),
+		...r
+	});
+}
+//#endregion
+export { n as MediaFrame, a as MediaFrameBar, i as MediaFrameMedia };
+
+//# sourceMappingURL=media-frame.js.map

package/dist/components/containment/media-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-frame.js","names":[],"sources":["../../../src/components/containment/media-frame.tsx"],"mappings":";;;;AAoBA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAyC;CAC3E,OACE,kBAAC,UAAD;EACE,aAAU;EAKV,WAAW,EACT,4FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,IAAM,IACJ;AAWF,SAAS,EAAgB,EAAE,cAAW,WAAQ,YAAS,SAAM,aAAU,GAAG,KAA+B;CA8BvG,OAtBoB,KAAU,QAAQ,KAAW,OAI7C,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,GAAkB,CAAS;EACzC,GAAK;EAEJ;CACE,CAAA,IAaP,kBAAC,UAAD;EAEE,MAAM,KAAQ;EACd,aAAU;EAIV,WAAW,EACT,GACA,4GACA,CACF;EACA,UArB6D,MAAU;GAKzE,AADA,IAAU,CAAK,GACf,IAAS,CAAK;EAChB;EAgBI,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,SAAS,EAAc,EAAE,cAAW,GAAG,KAA6C;CAClF,OACE,kBAAC,cAAD;EACE,aAAU;EAMV,WAAW,EACT,qGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/data/bar-list.d.ts

@@ -0,0 +1,81 @@
+import type * as React from "react";
+/**
+ * Ranked horizontal bar list — label / track / fill / value rows. A thin
+ * cousin of a meter, not a chart library: no axes, no legend, no scales,
+ * just rows sorted by whoever calls it. Promoted from the docs site's
+ * "Popularity ranking" (issue #229), which hand-mixed a brand fill on an
+ * emphasis track once per page.
+ *
+ * This starts the `data` family: quantitative READOUTS (BarList, StatStrip).
+ * They are not `feedback` (no system status), not `containment` (no
+ * surface/box), not `typography` (the number is the point, not the prose) —
+ * they exist to show measured values, which no existing family owns.
+ *
+ * FILL COLOR — measured, not inherited (SC 1.4.11 wants 3:1 for meaningful
+ * graphics). The docs site used its brand orange; in this palette that forks
+ * into two tokens and only one of them survives measurement:
+ *
+ *                          vs light bg  vs light muted  vs dark bg  vs dark muted
+ *   --brand (hue-orange)      5.09:1        4.65:1        9.63:1       8.11:1
+ *   --primary (#f5a623 tile)  1.83:1        1.67:1        9.77:1       8.23:1
+ *
+ * --primary is the literal tile and theme.css already rules it "legal as a
+ * field, illegal as a link" at 1.83:1 on a light page — a fill whose painted
+ * edge IS the datum is closer to a link than to a button face, so the tile
+ * fails here. --brand is the same hue at the ink plateau and clears 3:1
+ * against both the track and every surface in both themes, so a bar stays
+ * meaningful even before the reader finds the number. Strictly the value
+ * text makes the graphic redundant (see below) and 1.4.11 would exempt it,
+ * but passing outright beats litigating the exemption.
+ *
+ * The TRACK is --muted (1.09:1 light / 1.19:1 dark vs the page) — that low
+ * ratio is deliberate and mirrors the --border rationale in theme.css: the
+ * track is decoration marking where 100% would land, the fill and the text
+ * carry the information, so 1.4.11 does not apply to it.
+ *
+ * SEMANTICS — a plain list, no role="meter". Each row already renders its
+ * value as literal text beside the bar, so assistive tech hears
+ * "label, 943" with zero extra wiring; a meter role would announce the same
+ * number a second time and demand aria-valuemin/max/now plumbing to say
+ * nothing new. The track and fill are aria-hidden because they are that
+ * redundant graphic. role="list" is set explicitly: `list-none` (needed
+ * because rows are grid cells, not bullets) makes Safari/VoiceOver drop the
+ * implicit list role.
+ */
+export interface BarListItem {
+    key: string;
+    /** Row label. Any ReactNode — pass an anchor/Link element directly, or use `renderLabel`. */
+    label: React.ReactNode;
+    value: number;
+    /**
+     * Renders the label cell — inject your router's Link here, same contract
+     * as PluginCard's `renderLink`/Sidebar's `renderLink` (the house pattern
+     * for router-agnostic links). `className` carries the truncation and type
+     * styles and MUST land on the returned element, so the ellipsis clips the
+     * link itself rather than a wrapper. There is deliberately no `href`
+     * shortcut: a bare string href renders a plain <a> that full-page-reloads
+     * inside SPA consumers, which is exactly the trap `renderLink` exists to
+     * avoid — same reasoning as PluginCard.
+     */
+    renderLabel?: (props: {
+        className: string;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+}
+export interface BarListProps extends React.ComponentProps<"ul"> {
+    items: BarListItem[];
+    /**
+     * The value that fills the track completely. Defaults to the largest item
+     * value — the natural scale for a ranking, where the leader spans full
+     * width. Pass explicitly when rows share an external scale (a total, a
+     * quota) so bars stay comparable across lists.
+     */
+    max?: number;
+    /**
+     * Formats the visible value. Defaults to `toLocaleString()` — what the
+     * docs ranking shipped — so thousands read as "5,612" not "5612".
+     */
+    formatValue?: (value: number) => string;
+}
+declare function BarList({ items, max, formatValue, className, ...props }: BarListProps): React.JSX.Element;
+export { BarList };

package/dist/components/data/bar-list.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/data/bar-list.tsx
+var r = "min-w-0 truncate text-sm";
+function i(e, t) {
+	return t <= 0 ? 0 : Math.min(100, Math.max(0, e / t * 100));
+}
+function a({ items: a, max: o, formatValue: s = (e) => e.toLocaleString(), className: c, ...l }) {
+	let u = o ?? Math.max(0, ...a.map((e) => e.value));
+	return /* @__PURE__ */ t("ul", {
+		role: "list",
+		"data-slot": "bar-list",
+		className: e("grid w-full list-none grid-cols-[fit-content(40%)_minmax(0,1fr)_max-content] items-center gap-x-3 gap-y-2 p-0", c),
+		...l,
+		children: a.map((e) => {
+			let a = i(e.value, u);
+			return /* @__PURE__ */ n("li", {
+				"data-slot": "bar-list-item",
+				className: "col-span-3 grid grid-cols-subgrid items-center",
+				children: [
+					e.renderLabel ? e.renderLabel({
+						className: r,
+						children: e.label
+					}) : /* @__PURE__ */ t("span", {
+						className: r,
+						children: e.label
+					}),
+					/* @__PURE__ */ t("div", {
+						"data-slot": "bar-list-track",
+						"aria-hidden": "true",
+						className: "h-4.5 overflow-hidden rounded-sm bg-muted",
+						children: /* @__PURE__ */ t("div", {
+							"data-slot": "bar-list-fill",
+							className: "h-full rounded-sm bg-brand",
+							style: a > 0 ? {
+								width: `${a}%`,
+								minWidth: "2px"
+							} : { width: 0 }
+						})
+					}),
+					/* @__PURE__ */ t("span", {
+						"data-slot": "bar-list-value",
+						className: "text-right text-sm tabular-nums text-muted-foreground",
+						children: s(e.value)
+					})
+				]
+			}, e.key);
+		})
+	});
+}
+//#endregion
+export { a as BarList };
+
+//# sourceMappingURL=bar-list.js.map

package/dist/components/data/bar-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-list.js","names":[],"sources":["../../../src/components/data/bar-list.tsx"],"mappings":";;;AAkFA,IAAM,IAAc;AASpB,SAAS,EAAY,GAAe,GAAqB;CAEvD,OADI,KAAO,IAAU,IACd,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAQ,IAAO,GAAG,CAAC;AACvD;AAEA,SAAS,EAAQ,EAAE,UAAO,QAAK,kBAAe,MAAM,EAAE,eAAe,GAAG,cAAW,GAAG,KAAuB;CAG3G,IAAM,IAAQ,KAAO,KAAK,IAAI,GAAG,GAAG,EAAM,KAAK,MAAS,EAAK,KAAK,CAAC;CACnE,OAeE,kBAAC,MAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,EACT,iHACA,CACF;EACA,GAAI;EAEH,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAM,EAAY,EAAK,OAAO,CAAK;GACzC,OACE,kBAAC,MAAD;IAAmB,aAAU;IAAgB,WAAU;IAAvD,UAAA;KACG,EAAK,cACJ,EAAK,YAAY;MAAE,WAAW;MAAa,UAAU,EAAK;KAAM,CAAC,IAEjE,kBAAC,QAAD;MAAM,WAAW;MAAc,UAAA,EAAK;KAAY,CAAA;KAElD,kBAAC,OAAD;MAAK,aAAU;MAAiB,eAAY;MAAO,WAAU;MAC3D,UAAA,kBAAC,OAAD;OACE,aAAU;OACV,WAAU;OAIV,OAAO,IAAM,IAAI;QAAE,OAAO,GAAG,EAAI;QAAI,UAAU;OAAM,IAAI,EAAE,OAAO,EAAE;MACrE,CAAA;KACE,CAAA;KACL,kBAAC,QAAD;MAAM,aAAU;MAAiB,WAAU;MACxC,UAAA,EAAY,EAAK,KAAK;KACnB,CAAA;IACJ;GAnBK,GAAA,EAAK,GAmBV;EAER,CAAC;CACC,CAAA;AAER"}

package/dist/components/feedback/chip.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * Chip — the OPERABLE counterpart to {@link Badge} (#229).
+ *
+ * Badge is deliberately non-interactive content, which is why its comments
+ * wave off SC 1.4.11. Chip is a link or button wearing the same outline
+ * vocabulary, so 1.4.11 (3:1 non-text contrast for component/state visuals)
+ * DOES reach it, and every state below is measured. Selection is explicitly
+ * out of scope — a Chip never carries `aria-pressed`; that job belongs to
+ * ToggleGroup (#218).
+ */
+declare const chipVariants: (props?: ({
+    mono?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A link/button-shaped tag: archived-version links, blog tags.
+ *
+ * The primary usage is `asChild` around a real anchor —
+ * `<Chip asChild><a href=…>5.11</a></Chip>` — so navigation keeps native
+ * link semantics. Without `asChild` it renders a real `<button>`, never a
+ * styled span: a Chip is operable by definition, and a span default would
+ * hand every bare `<Chip onClick>` call site a focus/keyboard/AT bug.
+ */
+declare function Chip({ className, mono, asChild, children, ref, ...props }: React.ComponentProps<"button"> & VariantProps<typeof chipVariants> & {
+    asChild?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Chip, chipVariants };

package/dist/components/feedback/chip.js

@@ -0,0 +1,29 @@
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { useRender as r } from "@base-ui/react/use-render";
+//#region src/components/feedback/chip.tsx
+var i = n("inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none text-foreground no-underline hover:bg-accent hover:text-accent-foreground hover:border-brand active:bg-secondary focus-ring transition-[color,background-color,border-color,box-shadow] duration-control disabled:pointer-events-none disabled:opacity-50", {
+	variants: { mono: {
+		true: "font-mono",
+		false: ""
+	} },
+	defaultVariants: { mono: !1 }
+});
+function a({ className: n, mono: a, asChild: o = !1, children: s, ref: c, ...l }) {
+	return r({
+		defaultTagName: "button",
+		ref: c,
+		render: o ? t.Children.only(s) : void 0,
+		props: {
+			"data-slot": "chip",
+			className: e(i({ mono: a }), n),
+			...o ? {} : { children: s },
+			...l
+		}
+	});
+}
+//#endregion
+export { a as Chip, i as chipVariants };
+
+//# sourceMappingURL=chip.js.map

package/dist/components/feedback/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../../src/components/feedback/chip.tsx"],"mappings":";;;;;AAgBA,IAAM,IAAe,EA0CnB,2aACA;CACE,UAAU,EAMR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,GACR;AACF,CACF;AAWA,SAAS,EAAK,EACZ,cACA,SACA,aAAU,IACV,aACA,QACA,GAAG,KAC0F;CAC7F,OAAO,EAAU;EACf,gBAAgB;EACX;EACL,QAAQ,IAAW,EAAM,SAAS,KAAK,CAAQ,IAA2B,KAAA;EAC1E,OAAO;GACL,aAAa;GACb,WAAW,EAAG,EAAa,EAAE,QAAK,CAAC,GAAG,CAAS;GAC/C,GAAI,IAAU,CAAC,IAAI,EAAE,YAAS;GAC9B,GAAG;EACL;CACF,CAAC;AACH"}

package/dist/components/forms/toggle.d.ts

@@ -0,0 +1,56 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import type { SelectionGroupNameProps } from "./toggle-card";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleProps = Omit<React.ComponentProps<typeof TogglePrimitive>, "onPressedChange"> & VariantProps<typeof toggleVariants> & {
+    /**
+     * Fired with the next pressed state. Base UI passes `(pressed,
+     * eventDetails)`; the extra argument is dropped here for the same
+     * reason toggle-card.tsx drops it — it leaks into
+     * `onPressedChange={setState}` call sites.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+};
+/**
+ * A two-state button — `aria-pressed`, pressed fill and focus ring included,
+ * so none of them can be forgotten at a call site (#218).
+ *
+ * Standalone it owns its pressed state (`pressed`/`defaultPressed`); inside a
+ * {@link ToggleGroup} it is driven by the group's `value` and MUST carry a
+ * `value` prop of its own (Base UI warns in dev if it doesn't).
+ */
+declare function Toggle({ className, variant, size, onPressedChange, ...props }: ToggleProps): React.JSX.Element;
+declare const toggleGroupVariants: (props?: ({
+    segmented?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleGroupProps = Omit<React.ComponentProps<typeof ToggleGroupPrimitive>, "onValueChange"> & SelectionGroupNameProps & VariantProps<typeof toggleGroupVariants> & {
+    /** Fired with the values of all pressed items (eventDetails dropped). */
+    onValueChange?: (groupValue: string[]) => void;
+    /**
+     * Joined toolbar look: one shared border, hairline dividers, items
+     * stripped of their own chrome. Off, items sit loose with a small gap.
+     */
+    segmented?: boolean;
+};
+/**
+ * Shared state for a set of {@link Toggle}s — one tab stop, roving focus.
+ *
+ * The value model is Base UI's: always an array of the pressed items'
+ * values, single-select by default (`multiple` opts into any-of-N). The
+ * issue sketched Radix's `type="single" | "multiple"` with a
+ * `string | string[]` value instead; that union forks every controlled call
+ * site into runtime narrowing, and the empty single-selection ("none of
+ * these") falls out of the array shape for free, so Base UI's model stands.
+ *
+ * Single-select here CAN be emptied by pressing the pressed item again. If
+ * your group must always have a selection, that is a radiogroup — use
+ * SegmentedControl (toggle-card.tsx).
+ */
+declare function ToggleGroup({ className, segmented, orientation, onValueChange, ...props }: ToggleGroupProps): React.JSX.Element;
+export { Toggle, ToggleGroup, toggleGroupVariants, toggleVariants };