@fiestaboard/ui 6.1.0 → 6.1.1

package/dist/components/chrome/board-selector.d.ts

@@ -1,6 +1,15 @@
 export interface BoardOption {
     id: string;
     name?: string;
+    /**
+     * Per-board health, surfaced as a small destructive dot beside the name —
+     * and in the trigger while this board is the selected one. Presentational
+     * only: the wiring side decides what "error" means (a board whose client
+     * failed to initialize, say) and supplies the words for it as
+     * `BoardSelectorLabels.boardError`, which the option and the trigger are
+     * then DESCRIBED by (`aria-describedby`). Omit for a healthy board.
+     */
+    status?: "error";
 }
 export interface BoardSelectorLabels {
     /** aria-label for the trigger, e.g. "Select board". */
@@ -9,6 +18,17 @@ export interface BoardSelectorLabels {
     selectBoard: string;
     /** Fallback display name for unnamed boards. */
     unnamedBoard: string;
+    /**
+     * What `status: "error"` means, in words — e.g. "Unavailable". Rendered
+     * once as an sr-only description that every errored option, and the
+     * trigger while an errored board is selected, points at with
+     * `aria-describedby`; the dot itself stays decorative. That is what keeps
+     * the state off colour alone (WCAG 1.4.1) without folding the word into
+     * the option's NAME, so "Kitchen" is still announced as "Kitchen", then
+     * described. Only consulted when at least one board sets `status`, but
+     * provide it whenever you do: without it the dot is the only signal.
+     */
+    boardError?: string;
 }
 interface BoardSelectorProps {
     boards: BoardOption[];

package/dist/components/chrome/board-selector.js

@@ -1,37 +1,64 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../forms/select.js";
-import { Tooltip as o, TooltipContent as s, TooltipTrigger as c } from "../overlays/tooltip.js";
-import { BoardIcon as l } from "./board-icon.js";
-import { memo as u, useMemo as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { StatusDot as t } from "../feedback/status-dot.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../forms/select.js";
+import { Tooltip as s, TooltipContent as c, TooltipTrigger as l } from "../overlays/tooltip.js";
+import { BoardIcon as u } from "./board-icon.js";
+import { memo as d, useId as f, useMemo as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/chrome/board-selector.tsx
-var m = u(function({ boards: u, value: m, onChange: h, labels: g, collapsed: _ = !1, variant: v = "sidebar" }) {
-	let y = d(() => u.map((e) => /* @__PURE__ */ f(r, {
-		value: e.id,
-		children: e.name || g.unnamedBoard
-	}, e.id)), [u, g.unnamedBoard]), b = /* @__PURE__ */ p(i, {
-		"aria-label": g.boardSelector,
-		className: e("gap-2 border-sidebar-border/70 bg-sidebar-accent/40 font-medium text-sidebar-foreground shadow-none transition-[width,padding] duration-fast hover:bg-sidebar-accent/70", v === "mobileHeader" && "h-9 w-auto min-w-0 max-w-[170px] px-2.5 max-[479px]:gap-1 max-[479px]:px-2", v === "sidebar" && (_ ? "h-9 w-full justify-center gap-0 px-0 [&>span:last-child]:hidden" : "h-10 w-full")),
-		children: [/* @__PURE__ */ f(l, { className: "h-5 w-5 flex-shrink-0 text-sidebar-foreground/70" }), /* @__PURE__ */ f("span", {
-			className: e("min-w-0 flex-1 overflow-hidden whitespace-nowrap text-left transition-opacity duration-fast", v === "sidebar" && _ ? "max-w-0 opacity-0" : "max-w-48 opacity-100 delay-150", v === "mobileHeader" && "max-[479px]:hidden!"),
-			children: /* @__PURE__ */ f(a, { placeholder: g.selectBoard })
+var g = d(function({ boards: d, value: g, onChange: _, labels: v, collapsed: y = !1, variant: b = "sidebar" }) {
+	let x = f(), S = v.boardError && d.some((e) => e.status === "error") ? x : void 0, C = d.find((e) => e.id === g), w = p(() => d.map((e) => {
+		let n = e.name || v.unnamedBoard, r = e.status === "error";
+		return /* @__PURE__ */ m(i, {
+			value: e.id,
+			"aria-describedby": r ? S : void 0,
+			children: r ? /* @__PURE__ */ h("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ m("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: n
+				}), /* @__PURE__ */ m(t, {
+					status: "danger",
+					size: "sm"
+				})]
+			}) : n
+		}, e.id);
+	}), [
+		d,
+		v.unnamedBoard,
+		S
+	]), T = /* @__PURE__ */ h(a, {
+		"aria-label": v.boardSelector,
+		"aria-describedby": C?.status === "error" ? S : void 0,
+		className: e("gap-2 border-sidebar-border/70 bg-sidebar-accent/40 font-medium text-sidebar-foreground shadow-none transition-[width,padding] duration-fast hover:bg-sidebar-accent/70", b === "mobileHeader" && "h-9 w-auto min-w-0 max-w-[170px] px-2.5 max-[479px]:gap-1 max-[479px]:px-2", b === "sidebar" && (y ? "h-9 w-full justify-center gap-0 px-0 [&>span:last-child]:hidden" : "h-10 w-full")),
+		children: [/* @__PURE__ */ m(u, { className: "h-5 w-5 flex-shrink-0 text-sidebar-foreground/70" }), /* @__PURE__ */ m("span", {
+			className: e("min-w-0 flex-1 overflow-hidden whitespace-nowrap text-left transition-opacity duration-fast", b === "sidebar" && y ? "max-w-0 opacity-0" : "max-w-48 opacity-100 delay-150", b === "mobileHeader" && "max-[479px]:hidden!"),
+			children: /* @__PURE__ */ m(o, { placeholder: v.selectBoard })
 		})]
 	});
-	return /* @__PURE__ */ p(t, {
-		value: m,
-		onValueChange: h,
-		children: [_ ? /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(c, {
-			asChild: !0,
-			children: b
-		}), /* @__PURE__ */ f(s, {
-			side: "right",
-			className: "font-medium",
-			children: u.find((e) => e.id === m)?.name || g.unnamedBoard
-		})] }) : b, /* @__PURE__ */ f(n, { children: y })]
+	return /* @__PURE__ */ h(n, {
+		value: g,
+		onValueChange: _,
+		children: [
+			y ? /* @__PURE__ */ h(s, { children: [/* @__PURE__ */ m(l, {
+				asChild: !0,
+				children: T
+			}), /* @__PURE__ */ m(c, {
+				side: "right",
+				className: "font-medium",
+				children: C?.name || v.unnamedBoard
+			})] }) : T,
+			S ? /* @__PURE__ */ m("span", {
+				id: S,
+				className: "sr-only",
+				children: v.boardError
+			}) : null,
+			/* @__PURE__ */ m(r, { children: w })
+		]
 	});
 });
 //#endregion
-export { m as BoardSelector };
+export { g as BoardSelector };
 
 //# sourceMappingURL=board-selector.js.map

package/dist/components/chrome/board-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-selector.js","names":[],"sources":["../../../src/components/chrome/board-selector.tsx"],"mappings":";;;;;;;;AAwCA,IAAa,IAAgB,EAAK,SAAuB,EACvD,WACA,UACA,aACA,WACA,eAAY,IACZ,aAAU,aACW;CAIrB,IAAM,IAAQ,QAEV,EAAO,KAAK,MACV,kBAAC,GAAD;EAA2B,OAAO,EAAM;EACrC,UAAA,EAAM,QAAQ,EAAO;CACZ,GAFK,EAAM,EAEX,CACb,GACH,CAAC,GAAQ,EAAO,YAAY,CAC9B,GAEM,IACJ,kBAAC,GAAD;EACE,cAAY,EAAO;EACnB,WAAW,EACT,2KAGA,MAAY,kBAAkB,8EAC9B,MAAY,cACT,IAQG,oEACA,cACR;EAlBF,UAAA,CAoBE,kBAAC,GAAD,EAAW,WAAU,mDAAoD,CAAA,GACzE,kBAAC,QAAD;GACE,WAAW,EACT,+FACA,MAAY,aAAa,IAAY,sBAAsB,kCAG3D,MAAY,kBAAkB,qBAChC;GAEA,UAAA,kBAAC,GAAD,EAAa,aAAa,EAAO,YAAc,CAAA;EAC3C,CAAA,CACO;;CAGjB,OACE,kBAAC,GAAD;EAAe;EAAO,eAAe;EAArC,UAAA,CACG,IACC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAgB,SAAA;GAAS,UAAA;EAAwB,CAAA,GACjD,kBAAC,GAAD;GAAgB,MAAK;GAAQ,WAAU;GACpC,UAAA,EAAO,MAAM,MAAM,EAAE,OAAO,CAAK,CAAC,EAAE,QAAQ,EAAO;EACtC,CAAA,CACT,EAAA,CAAA,IAET,GAEF,kBAAC,GAAD,EAAA,UAAgB,EAAqB,CAAA,CAC/B;;AAEZ,CAAC"}
+{"version":3,"file":"board-selector.js","names":[],"sources":["../../../src/components/chrome/board-selector.tsx"],"mappings":";;;;;;;;;AA6DA,IAAa,IAAgB,EAAK,SAAuB,EACvD,WACA,UACA,aACA,WACA,eAAY,IACZ,aAAU,aACW;CAOrB,IAAM,IAAsB,EAAM,GAC5B,IACJ,EAAO,cAAc,EAAO,MAAM,MAAU,EAAM,WAAW,OAAO,IAAI,IAAsB,KAAA,GAC1F,IAAgB,EAAO,MAAM,MAAU,EAAM,OAAO,CAAK,GAKzD,IAAQ,QAEV,EAAO,KAAK,MAAU;EACpB,IAAM,IAAO,EAAM,QAAQ,EAAO,cAC5B,IAAU,EAAM,WAAW;EACjC,OACE,kBAAC,GAAD;GAA2B,OAAO,EAAM;GAAI,oBAAkB,IAAU,IAAc,KAAA;GACnF,UAAA,IAIC,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAW,CAAA,GACtD,kBAAC,GAAD;KAAW,QAAO;KAAS,MAAK;IAAM,CAAA,CAClC;GAGN,CAAA,IAAA;EAEQ,GAbK,EAAM,EAaX;CAEhB,CAAC,GACH;EAAC;EAAQ,EAAO;EAAc;CAAW,CAC3C,GAEM,IACJ,kBAAC,GAAD;EACE,cAAY,EAAO;EACnB,oBAAkB,GAAe,WAAW,UAAU,IAAc,KAAA;EACpE,WAAW,EACT,2KAGA,MAAY,kBAAkB,8EAC9B,MAAY,cACT,IAQG,oEACA,cACR;EAnBF,UAAA,CAqBE,kBAAC,GAAD,EAAW,WAAU,mDAAoD,CAAA,GACzE,kBAAC,QAAD;GACE,WAAW,EACT,+FACA,MAAY,aAAa,IAAY,sBAAsB,kCAG3D,MAAY,kBAAkB,qBAChC;GAEA,UAAA,kBAAC,GAAD,EAAa,aAAa,EAAO,YAAc,CAAA;EAC3C,CAAA,CACO;;CAGjB,OACE,kBAAC,GAAD;EAAe;EAAO,eAAe;EAArC,UAAA;GACG,IACC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAgB,SAAA;IAAS,UAAA;GAAwB,CAAA,GACjD,kBAAC,GAAD;IAAgB,MAAK;IAAQ,WAAU;IACpC,UAAA,GAAe,QAAQ,EAAO;GACjB,CAAA,CACT,EAAA,CAAA,IAET;GAED,IACC,kBAAC,QAAD;IAAM,IAAI;IAAa,WAAU;IAC9B,UAAA,EAAO;GACJ,CAAA,IACJ;GACJ,kBAAC,GAAD,EAAA,UAAgB,EAAqB,CAAA;EAC/B;;AAEZ,CAAC"}

package/dist/components/feedback/status-dot.d.ts

@@ -42,8 +42,10 @@ export interface StatusDotProps extends Omit<React.ComponentProps<"span">, "chil
  * `role="status"` is a polite live region: the label is announced when it
  * changes, which is the right behaviour for a dot tracking a connection. For
  * a dot describing something static (a legend swatch, a row that never
- * updates in place) pass `role="img"` — props spread over the computed
- * attributes, so the override lands.
+ * updates in place) pass `role="img"`. That role makes the dot's children
+ * presentational, so the label then goes out as `aria-label` instead of the
+ * sr-only span — an sr-only child inside `role="img"` is not a name, and axe
+ * fails it as `role-img-alt`.
  */
-declare function StatusDot({ className, status, size, pulse, glow, label, style, ...props }: StatusDotProps): React.JSX.Element;
+declare function StatusDot({ className, status, size, pulse, glow, label, style, role, ...props }: StatusDotProps): React.JSX.Element;
 export { StatusDot, statusDotVariants };

package/dist/components/feedback/status-dot.js

@@ -28,14 +28,15 @@ var r = n("inline-block shrink-0 rounded-full align-middle transition-[backgroun
 		pulse: !1
 	}
 }), i = { boxShadow: "0 0 var(--status-dot-glow) color-mix(in oklch, var(--status-dot-color) 50%, transparent)" };
-function a({ className: n, status: a = "neutral", size: o = "md", pulse: s = !1, glow: c = !1, label: l = null, style: u, ...d }) {
-	let f = l == null;
+function a({ className: n, status: a = "neutral", size: o = "md", pulse: s = !1, glow: c = !1, label: l = null, style: u, role: d, ...f }) {
+	let p = l == null, m = d ?? (p ? void 0 : "status"), h = !p && m === "img";
 	return /* @__PURE__ */ t("span", {
 		"data-slot": "status-dot",
 		"data-status": a,
 		"data-size": o,
-		role: f ? void 0 : "status",
-		"aria-hidden": f || void 0,
+		role: m,
+		"aria-hidden": p || void 0,
+		"aria-label": h ? l : void 0,
 		className: e(r({
 			status: a,
 			size: o,
@@ -45,8 +46,8 @@ function a({ className: n, status: a = "neutral", size: o = "md", pulse: s = !1,
 			...i,
 			...u
 		} : u,
-		...d,
-		children: f ? null : /* @__PURE__ */ t("span", {
+		...f,
+		children: p || h ? null : /* @__PURE__ */ t("span", {
 			className: "sr-only",
 			children: l
 		})

package/dist/components/feedback/status-dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-dot.js","names":[],"sources":["../../../src/components/feedback/status-dot.tsx"],"mappings":";;;;;AAkBA,IAAM,IAAoB,EACxB,6GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,SAAS;EACX;EAIA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAOA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF,CACF,GAMM,IAAkC,EACtC,WAAW,2FACb;AA4CA,SAAS,EAAU,EACjB,cACA,YAAS,WACT,UAAO,MACP,WAAQ,IACR,UAAO,IACP,WAAQ,MACR,UACA,GAAG,KACc;CACjB,IAAM,IAAa,KAAS;CAC5B,OACE,kBAAC,QAAD;EACE,aAAU;EACV,eAAa;EACb,aAAW;EACX,MAAM,IAAa,KAAA,IAAY;EAC/B,eAAa,KAAc,KAAA;EAC3B,WAAW,EAAG,EAAkB;GAAE;GAAQ;GAAM;EAAM,CAAC,GAAG,CAAS;EAEnE,OAAO,IAAO;GAAE,GAAG;GAAY,GAAG;EAAM,IAAI;EAC5C,GAAI;EASH,UAAA,IAAa,OAAO,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA;CACxD,CAAA;AAEV"}
+{"version":3,"file":"status-dot.js","names":[],"sources":["../../../src/components/feedback/status-dot.tsx"],"mappings":";;;;;AAkBA,IAAM,IAAoB,EACxB,6GACA;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,SAAS;GACT,QAAQ;GACR,MAAM;GACN,SAAS;EACX;EAIA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAOA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,OAAO;CACT;AACF,CACF,GAMM,IAAkC,EACtC,WAAW,2FACb;AA8CA,SAAS,EAAU,EACjB,cACA,YAAS,WACT,UAAO,MACP,WAAQ,IACR,UAAO,IACP,WAAQ,MACR,UACA,SACA,GAAG,KACc;CACjB,IAAM,IAAa,KAAS,MACtB,IAAe,MAAS,IAAa,KAAA,IAAY,WAGjD,IAAmB,CAAC,KAAc,MAAiB;CACzD,OACE,kBAAC,QAAD;EACE,aAAU;EACV,eAAa;EACb,aAAW;EACX,MAAM;EACN,eAAa,KAAc,KAAA;EAC3B,cAAY,IAAmB,IAAQ,KAAA;EACvC,WAAW,EAAG,EAAkB;GAAE;GAAQ;GAAM;EAAM,CAAC,GAAG,CAAS;EAEnE,OAAO,IAAO;GAAE,GAAG;GAAY,GAAG;EAAM,IAAI;EAC5C,GAAI;EASH,UAAA,KAAc,IAAmB,OAAO,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA;CAC5E,CAAA;AAEV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiestaboard/ui",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "FiestaUI — the FiestaBoard design system. React components on Base UI with Tailwind v4 design tokens.",
   "license": "MIT",
   "repository": {