@studiolxd/brand 49.23.0 → 49.24.0

package/CHANGELOG.md

@@ -7,6 +7,52 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.24.0] — 2026-10-04
+
+> **Minor.** Disparador propio y ancla sin disparador en `ColorPicker`, a petición de creator (la barra
+> de texto enriquecido y la celda de una tabla). Sin tocar nada, todo sigue igual.
+
+### `ColorPicker`: `trigger` y `anchor`
+
+- **`trigger`**: un elemento propio como disparador en lugar de la muestra —un `Toggle` con glifo y
+  `ColorSwatch size="sm"`, un `Button`—, con el patrón del `trigger` de `Popover`/`Menu` y las props
+  por `render` (`useRender`, como `Button`). Recibe `id`, `aria-haspopup="dialog"`, `aria-expanded`,
+  `aria-controls`, `aria-label`/`aria-labelledby`, `aria-invalid`, `disabled` y la descripción con el
+  valor (`colorPicker.value`/`empty`); lo que el elemento ya traiga gana, salvo la descripción, que se
+  suma, y `disabled`. El `ref` del selector se suma al suyo. El foco vuelve a él al cerrar. No lee
+  `colorPicker.trigger`: se nombra por sí mismo o por `aria-label`/la etiqueta.
+- **`anchor`**: coloca el panel contra otro elemento (la prop `anchor` de `Popover`). Sin `trigger`
+  no se pinta ninguna muestra: el panel se abre con `open` controlado, y al cerrarse el foco vuelve a
+  donde estaba antes de abrir.
+- `ColorPickerField` reenvía las dos; con `trigger`, la etiqueta sigue nombrando el elemento.
+- Stories «Con disparador propio» y «Anclado sin disparador», y sus `Test — …`.
+
+### `Popover`: `anchor`, y `trigger` opcional
+
+- **`anchor`** (tipo `PopoverAnchor`): la prop `anchor` del Positioner de Base UI, tal cual.
+- **`trigger` pasa a opcional**: sin él no se pinta disparador y el panel se abre con `open` contra
+  `anchor`.
+
+## [49.23.1] — 2026-10-04
+
+> **Patch.** `appHeader` pasa a ser **opcional** en `BrandMessages`. En 49.23.0 entró obligatorio y un
+> catálogo tipado estricto —un literal pasado a `BrandMessagesProvider` sin conversión, como el de
+> `public-shell` en slxd— dejaba de compilar aunque no usara el logo: una minor no puede romper la
+> compilación de nadie. Si ya declaraste `appHeader`, no hay que tocar nada.
+
+- `BrandMessages.appHeader?` y `AppHeaderMessages.logo?`: solo hacen falta si algún `AppHeader` lleva
+  `logo` sin `logoLabel`.
+- **Si ese caso llega sin `appHeader.logo` en el catálogo, `AppHeader` lanza** («el catálogo montado no
+  trae «appHeader.logo»»), igual que cualquier otra clave ausente: no hay castellano de respaldo y un
+  enlace sin nombre accesible tiene que verse en desarrollo. Documentado en `AppHeader` §
+  «Internacionalización».
+- `BrandMessagesReader` lee los espacios opcionales sin `undefined` en el tipo devuelto (tipo nuevo
+  `BrandMessagesNamespace`); para los espacios obligatorios no cambia nada.
+- Test de tipos (`BrandMessages.types.test.ts`): compila con el compilador de TypeScript un catálogo
+  sin `appHeader` contra `BrandMessages`, con un caso de control que sí debe fallar.
+- Revisado el resto de 49.23.0: no añadió ningún otro campo obligatorio a tipos públicos (las props
+  nuevas de `AppHeader` ya eran opcionales).
+
 ## [49.23.0] — 2026-10-04
 
 > **Minor.** Ranura `logo` en `AppHeader`, a petición de Homenize. Espacio nuevo `appHeader` en

package/dist/_shared/brandmessagescontext.js

@@ -4,10 +4,10 @@ var n = e(null);
 function r(e) {
 	let r = t(n);
 	return function(t, n) {
-		if (n !== void 0) return n;
+		if (n != null) return n;
 		if (!r) throw Error(`@studiolxd/brand: falta el texto «${String(e)}.${String(t)}» y no hay catálogo montado. Monta <BrandMessagesProvider> en la raíz de la aplicación con los textos del idioma vigente, o pasa la prop suelta en este uso concreto.`);
 		let i = r[e]?.[t];
-		if (i === void 0) throw Error(`@studiolxd/brand: el catálogo montado no trae «${String(e)}.${String(t)}».`);
+		if (i == null) throw Error(`@studiolxd/brand: el catálogo montado no trae «${String(e)}.${String(t)}».`);
 		return i;
 	};
 }

package/dist/_shared/colorpicker.js

@@ -7,61 +7,62 @@ import { Popover as i } from "../popover.js";
 import { Slider as a } from "../slider.js";
 import { t as o } from "./css-properties.js";
 import { ColorSwatch as s } from "../color-swatch.js";
-import { forwardRef as c, useCallback as l, useId as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useDirection as h } from "@base-ui/react/direction-provider";
+import { cloneElement as c, forwardRef as l, useCallback as u, useId as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useRender as g } from "@base-ui/react/use-render";
+import { useDirection as _ } from "@base-ui/react/direction-provider";
 //#region src/stories/molecules/ColorPicker/ColorArea.tsx
-var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: u = !1 }, f) {
-	let m = h() === "rtl", y = d(null), b = d(null), x = d({
+var v = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = l(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: l = !1 }, d) {
+	let p = _() === "rtl", h = f(null), g = f(null), x = f({
 		s: 0,
 		v: 0
 	}), S = o({
-		"--color-picker-area-x": `${m ? 100 - t : t}%`,
+		"--color-picker-area-x": `${p ? 100 - t : t}%`,
 		"--color-picker-area-y": `${100 - n}%`,
 		"--color-picker-area-hue": e
-	}), C = l((e) => {
-		y.current = e, S(e);
+	}), C = u((e) => {
+		h.current = e, S(e);
 	}, [S]), w = (e) => {
 		let t = e.currentTarget.getBoundingClientRect(), n = t.width ? (e.clientX - t.left) / t.width : 0, r = t.height ? (e.clientY - t.top) / t.height : 0;
 		return {
-			s: v((m ? 1 - n : n) * 100),
-			v: v((1 - r) * 100)
+			s: b((p ? 1 - n : n) * 100),
+			v: b((1 - r) * 100)
 		};
 	}, T = () => {
-		((typeof f == "function" ? null : f?.current) ?? y.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
+		((typeof d == "function" ? null : d?.current) ?? h.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
 	}, E = (e) => {
-		if (u || e.button !== 0) return;
+		if (l || e.button !== 0) return;
 		e.preventDefault();
 		try {
 			e.currentTarget.setPointerCapture?.(e.pointerId);
 		} catch {}
-		b.current = e.pointerId, T();
+		g.current = e.pointerId, T();
 		let t = w(e);
 		x.current = t, r(t);
 	}, D = (e) => {
-		if (b.current !== e.pointerId) return;
+		if (g.current !== e.pointerId) return;
 		let t = w(e);
 		x.current = t, r(t);
 	}, O = (e) => {
-		if (b.current === e.pointerId) {
-			b.current = null;
+		if (g.current === e.pointerId) {
+			g.current = null;
 			try {
 				e.currentTarget.releasePointerCapture?.(e.pointerId);
 			} catch {}
 			i(x.current);
 		}
 	}, k = (e) => {
-		if (u) return;
-		let a = e.shiftKey ? _ : g, { s: o, v: s } = {
+		if (l) return;
+		let a = e.shiftKey ? y : v, { s: o, v: s } = {
 			s: t,
 			v: n
 		};
 		switch (e.key) {
 			case "ArrowRight":
-				o += m ? -a : a;
+				o += p ? -a : a;
 				break;
 			case "ArrowLeft":
-				o += m ? a : -a;
+				o += p ? a : -a;
 				break;
 			case "ArrowUp":
 				s += a;
@@ -70,10 +71,10 @@ var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hu
 				s -= a;
 				break;
 			case "PageUp":
-				e.shiftKey ? o += _ : s += _;
+				e.shiftKey ? o += y : s += y;
 				break;
 			case "PageDown":
-				e.shiftKey ? o -= _ : s -= _;
+				e.shiftKey ? o -= y : s -= y;
 				break;
 			case "Home":
 				e.ctrlKey || e.metaKey ? s = 0 : o = 0;
@@ -85,37 +86,37 @@ var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hu
 		}
 		e.preventDefault();
 		let c = {
-			s: v(o),
-			v: v(s)
+			s: b(o),
+			v: b(s)
 		};
 		r(c), i(c);
 	};
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		ref: C,
 		className: "color-picker__area",
-		"data-direction": m ? "rtl" : "ltr",
-		"data-disabled": u ? "" : void 0,
+		"data-direction": p ? "rtl" : "ltr",
+		"data-disabled": l ? "" : void 0,
 		onPointerDown: E,
 		onPointerMove: D,
 		onPointerUp: O,
 		onPointerCancel: O,
-		children: /* @__PURE__ */ p("div", {
-			ref: f,
+		children: /* @__PURE__ */ m("div", {
+			ref: d,
 			className: "color-picker__area-thumb",
 			role: "slider",
-			tabIndex: u ? -1 : 0,
+			tabIndex: l ? -1 : 0,
 			"aria-label": a,
 			"aria-roledescription": s,
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
 			"aria-valuenow": Math.round(t),
 			"aria-valuetext": c,
-			"aria-disabled": u || void 0,
+			"aria-disabled": l || void 0,
 			onKeyDown: k
 		})
 	});
-}), b = (e, t, n) => Math.min(n, Math.max(t, e));
-function x(e) {
+}), S = (e, t, n) => Math.min(n, Math.max(t, e));
+function C(e) {
 	let t = e.trim().replace(/^#/, "");
 	if (!/^[0-9a-f]+$/i.test(t)) return null;
 	let n;
@@ -130,12 +131,12 @@ function x(e) {
 		a: n.length === 8 ? r(3) / 255 : 1
 	};
 }
-var S = (e) => b(Math.round(e), 0, 255).toString(16).padStart(2, "0");
-function C({ r: e, g: t, b: n, a: r }, i) {
-	let a = `#${S(e)}${S(t)}${S(n)}`;
-	return i ? `${a}${S(b(r, 0, 1) * 255)}` : a;
+var w = (e) => S(Math.round(e), 0, 255).toString(16).padStart(2, "0");
+function T({ r: e, g: t, b: n, a: r }, i) {
+	let a = `#${w(e)}${w(t)}${w(n)}`;
+	return i ? `${a}${w(S(r, 0, 1) * 255)}` : a;
 }
-function w({ r: e, g: t, b: n, a: r }) {
+function E({ r: e, g: t, b: n, a: r }) {
 	let i = e / 255, a = t / 255, o = n / 255, s = Math.max(i, a, o), c = s - Math.min(i, a, o), l = 0;
 	return c !== 0 && (l = s === i ? (a - o) / c % 6 : s === a ? (o - i) / c + 2 : (i - a) / c + 4, l *= 60, l < 0 && (l += 360)), {
 		h: l,
@@ -144,8 +145,8 @@ function w({ r: e, g: t, b: n, a: r }) {
 		a: r
 	};
 }
-function T({ h: e, s: t, v: n, a: r }) {
-	let i = (e % 360 + 360) % 360, a = b(t, 0, 100) / 100, o = b(n, 0, 100) / 100, s = o * a, c = s * (1 - Math.abs(i / 60 % 2 - 1)), l = o - s, u;
+function D({ h: e, s: t, v: n, a: r }) {
+	let i = (e % 360 + 360) % 360, a = S(t, 0, 100) / 100, o = S(n, 0, 100) / 100, s = o * a, c = s * (1 - Math.abs(i / 60 % 2 - 1)), l = o - s, u;
 	return u = i < 60 ? [
 		s,
 		c,
@@ -174,21 +175,21 @@ function T({ h: e, s: t, v: n, a: r }) {
 		r: (u[0] + l) * 255,
 		g: (u[1] + l) * 255,
 		b: (u[2] + l) * 255,
-		a: b(r, 0, 1)
+		a: S(r, 0, 1)
 	};
 }
-function E(e) {
-	let t = x(e);
-	return t ? w(t) : null;
+function O(e) {
+	let t = C(e);
+	return t ? E(t) : null;
 }
-function D(e, t) {
-	return C(T(e), t);
+function k(e, t) {
+	return T(D(e), t);
 }
-function O(e, t) {
-	let n = x(e);
-	return n ? C(n, t) : null;
+function A(e, t) {
+	let n = C(e);
+	return n ? T(n, t) : null;
 }
-function k() {
+function ee() {
 	return [
 		0,
 		60,
@@ -197,7 +198,7 @@ function k() {
 		240,
 		300,
 		360
-	].map((e) => D({
+	].map((e) => k({
 		h: e,
 		s: 100,
 		v: 100,
@@ -206,205 +207,228 @@ function k() {
 }
 //#endregion
 //#region src/stories/molecules/ColorPicker/ColorPicker.tsx
-var A = {
+var j = {
 	h: 0,
 	s: 0,
 	v: 0,
 	a: 1
-}, j = c(function({ value: c, defaultValue: g = null, onValueChange: _, onValueCommitted: v, alpha: b = !1, presets: x, clearable: S = !1, onClear: C, open: w, defaultOpen: T = !1, onOpenChange: j, size: M = "md", disabled: ee = !1, error: N = !1, locale: P = "es-ES", id: te, name: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ne, dialogLabel: re, clearLabel: ie, className: ae }, oe) {
-	let R = e("colorPicker"), z = h() === "rtl", [se, B] = f(T), V = w ?? se, H = c !== void 0, [ce, U] = f(g), W = H ? c : ce, G = W ? O(W, b) : null, [K, q] = f(() => G && E(G) || A), [le, ue] = f(G);
-	G !== le && (ue(G), G && D(K, b) !== G && q(E(G) ?? A));
-	let J = D(K, b), de = D({
-		...K,
+}, te = l(function({ value: l, defaultValue: v = null, onValueChange: y, onValueCommitted: b, alpha: S = !1, presets: C, clearable: w = !1, onClear: T, open: E, defaultOpen: D = !1, onOpenChange: te, size: M = "md", disabled: N = !1, error: P = !1, locale: ne = "es-ES", id: re, name: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ie, dialogLabel: ae, clearLabel: oe, trigger: R, anchor: z, className: se }, B) {
+	let V = e("colorPicker"), H = _() === "rtl", [ce, U] = p(D), W = E ?? ce, G = l !== void 0, [le, ue] = p(v), K = G ? l : le, q = K ? A(K, S) : null, [J, de] = p(() => q && O(q) || j), [fe, pe] = p(q);
+	q !== fe && (pe(q), q && k(J, S) !== q && de(O(q) ?? j));
+	let me = k(J, S), he = k({
+		...J,
 		a: 1
-	}, !1), Y = l((e, t) => {
-		let n = b ? e : {
+	}, !1), Y = u((e, t) => {
+		let n = S ? e : {
 			...e,
 			a: 1
 		};
-		q(n);
-		let r = D(n, b);
-		H || U(r), _?.(r), t && v?.(r);
+		de(n);
+		let r = k(n, S);
+		G || ue(r), y?.(r), t && b?.(r);
 	}, [
-		b,
-		H,
-		_,
-		v
-	]), [X, Z] = f(null), [fe, pe] = f(V);
-	V !== fe && (pe(V), V || Z(null));
-	let Q = (e, t) => {
-		let n = O(e, b), r = n ? E(n) : null;
+		S,
+		G,
+		y,
+		b
+	]), [X, Z] = p(null), [ge, _e] = p(W);
+	W !== ge && (_e(W), W || Z(null));
+	let ve = (e, t) => {
+		let n = A(e, S), r = n ? O(n) : null;
 		return r ? (Y(r, t), !0) : !1;
-	}, me = (e) => {
+	}, ye = (e) => {
 		let t = e.target.value;
 		Z(t);
 		let n = t.trim().replace(/^#/, "").length;
-		(n === 6 || b && n === 8) && Q(t, !0);
-	}, $ = () => {
-		X !== null && Q(X, !0), Z(null);
-	}, he = () => {
-		H || U(null), C?.(), w === void 0 && B(!1);
-	}, ge = (e, t) => {
-		e && ee || (w === void 0 && B(e), j?.(e, t));
-	}, _e = d(null), ve = u(), ye = o({
-		"--color-picker-hue-gradient": `linear-gradient(to ${z ? "left" : "right"}, ${k().join(", ")})`,
-		"--color-picker-alpha-gradient": `linear-gradient(to ${z ? "left" : "right"}, transparent, ${de})`
-	}), be = (e) => Y({
-		...K,
+		(n === 6 || S && n === 8) && ve(t, !0);
+	}, be = () => {
+		X !== null && ve(X, !0), Z(null);
+	}, xe = () => {
+		G || ue(null), T?.(), E === void 0 && U(!1);
+	}, Se = (e, t) => {
+		e && N || (E === void 0 && U(e), te?.(e, t));
+	}, Ce = f(null), Q = d(), we = o({
+		"--color-picker-hue-gradient": `linear-gradient(to ${H ? "left" : "right"}, ${ee().join(", ")})`,
+		"--color-picker-alpha-gradient": `linear-gradient(to ${H ? "left" : "right"}, transparent, ${he})`
+	}), Te = (e) => Y({
+		...J,
 		s: e.s,
 		v: e.v
-	}, !1), xe = (e) => Y({
-		...K,
+	}, !1), Ee = (e) => Y({
+		...J,
 		s: e.s,
 		v: e.v
-	}, !0), Se = (x ?? []).map((e) => ({
+	}, !0), De = (C ?? []).map((e) => ({
 		...e,
-		hex: O(e.color, b)
-	})).filter((e) => e.hex !== null), Ce = [
+		hex: A(e.color, S)
+	})).filter((e) => e.hex !== null), Oe = [
 		"color-picker",
 		M === "md" ? "" : `color-picker--${M}`,
-		N ? "color-picker--error" : "",
-		ae ?? ""
-	].filter(Boolean).join(" "), we = [ve, ne].filter(Boolean).join(" "), Te = /* @__PURE__ */ m("button", {
-		ref: oe,
-		id: te,
+		P ? "color-picker--error" : "",
+		se ?? ""
+	].filter(Boolean).join(" "), ke = [Q, ie].filter(Boolean).join(" "), Ae = /* @__PURE__ */ h("button", {
+		ref: B,
+		id: re,
 		type: "button",
 		className: "color-picker__trigger",
-		disabled: ee,
-		"aria-label": I ?? (L ? void 0 : R("trigger")),
+		disabled: N,
+		"aria-label": I ?? (L ? void 0 : V("trigger")),
 		"aria-labelledby": I ? void 0 : L,
-		"aria-describedby": we,
+		"aria-describedby": ke,
 		"aria-haspopup": "dialog",
-		"aria-expanded": V,
-		"aria-invalid": N || void 0,
-		children: [/* @__PURE__ */ p(s, {
-			color: W,
+		"aria-expanded": W,
+		"aria-invalid": P || void 0,
+		children: [/* @__PURE__ */ m(s, {
+			color: K,
 			className: "color-picker__swatch"
-		}), /* @__PURE__ */ p(t, {
-			id: ve,
-			children: W ? R("value")(G ?? W) : R("empty")
+		}), /* @__PURE__ */ m(t, {
+			id: Q,
+			children: K ? V("value")(q ?? K) : V("empty")
 		})]
-	});
-	return /* @__PURE__ */ m("div", {
-		className: Ce,
-		children: [F && /* @__PURE__ */ p("input", {
-			type: "hidden",
-			name: F,
-			value: G ?? ""
-		}), /* @__PURE__ */ p(i, {
-			trigger: Te,
-			label: R("dialog", re),
-			open: V,
-			onOpenChange: ge,
-			side: "bottom",
-			align: "start",
-			initialFocus: _e,
-			className: "color-picker__popover",
-			children: /* @__PURE__ */ m("div", {
-				ref: ye,
-				className: "color-picker__panel",
-				children: [
-					/* @__PURE__ */ p(y, {
-						ref: _e,
-						hueColor: D({
-							h: K.h,
-							s: 100,
-							v: 100,
-							a: 1
-						}, !1),
-						saturation: K.s,
-						brightness: K.v,
-						onChange: be,
-						onCommit: xe,
-						label: R("area"),
-						roleDescription: R("areaDescription"),
-						valueText: R("areaValue")(Math.round(K.s), Math.round(K.v))
-					}),
-					/* @__PURE__ */ p(a, {
-						className: "color-picker__channel color-picker__channel--hue",
-						label: R("hue"),
-						min: 0,
-						max: 360,
-						step: 1,
-						value: Math.round(K.h),
-						format: {
-							style: "unit",
-							unit: "degree"
-						},
-						locale: P,
-						onValueChange: (e) => Y({
-							...K,
-							h: e
-						}, !1),
-						onValueCommitted: (e) => Y({
-							...K,
-							h: e
-						}, !0)
-					}),
-					b && /* @__PURE__ */ p(a, {
-						className: "color-picker__channel color-picker__channel--alpha",
-						label: R("alpha"),
-						min: 0,
-						max: 100,
-						step: 1,
-						value: Math.round(K.a * 100),
-						format: {
-							style: "unit",
-							unit: "percent"
-						},
-						locale: P,
-						onValueChange: (e) => Y({
-							...K,
-							a: e / 100
-						}, !1),
-						onValueCommitted: (e) => Y({
-							...K,
-							a: e / 100
-						}, !0)
-					}),
-					/* @__PURE__ */ p(r, {
-						className: "color-picker__hex",
-						type: "text",
-						size: M,
-						"aria-label": R("hex"),
-						autoComplete: "off",
-						spellCheck: !1,
-						maxLength: b ? 9 : 7,
-						value: X ?? J,
-						onChange: me,
-						onBlur: $,
-						onKeyDown: (e) => {
-							e.key === "Enter" && (e.preventDefault(), $());
-						}
-					}),
-					Se.length > 0 && /* @__PURE__ */ p("div", {
-						className: "color-picker__presets",
-						role: "group",
-						"aria-label": R("presets"),
-						children: Se.map((e) => /* @__PURE__ */ p("button", {
-							type: "button",
-							className: "color-picker__preset",
-							title: e.title,
-							"aria-label": e.title,
-							"aria-pressed": e.hex === J,
-							onClick: () => Y(E(e.hex) ?? A, !0),
-							children: /* @__PURE__ */ p(s, {
-								color: e.hex,
-								className: "color-picker__preset-swatch"
-							})
-						}, `${e.hex}-${e.title}`))
-					}),
-					S && /* @__PURE__ */ p(n, {
-						variant: "ghost",
-						size: "sm",
-						className: "color-picker__clear",
-						onClick: he,
-						children: R("clear", ie)
-					})
-				]
+	}), je = R?.props ?? {}, Me = g({
+		render: R && c(R, {
+			disabled: N || je.disabled || void 0,
+			"aria-describedby": [ke, je["aria-describedby"]].filter(Boolean).join(" ")
+		}),
+		ref: B,
+		enabled: R !== void 0,
+		props: {
+			id: re,
+			"aria-label": I,
+			"aria-labelledby": I ? void 0 : L,
+			"aria-haspopup": "dialog",
+			"aria-expanded": W,
+			"aria-invalid": P || void 0
+		}
+	}), $;
+	return Me ? $ = Me : z === void 0 && ($ = Ae), /* @__PURE__ */ h("div", {
+		className: Oe,
+		children: [
+			F && /* @__PURE__ */ m("input", {
+				type: "hidden",
+				name: F,
+				value: q ?? ""
+			}),
+			R && /* @__PURE__ */ m(t, {
+				id: Q,
+				children: K ? V("value")(q ?? K) : V("empty")
+			}),
+			/* @__PURE__ */ m(i, {
+				trigger: $,
+				anchor: z,
+				label: V("dialog", ae),
+				open: W,
+				onOpenChange: Se,
+				side: "bottom",
+				align: "start",
+				initialFocus: Ce,
+				className: "color-picker__popover",
+				children: /* @__PURE__ */ h("div", {
+					ref: we,
+					className: "color-picker__panel",
+					children: [
+						/* @__PURE__ */ m(x, {
+							ref: Ce,
+							hueColor: k({
+								h: J.h,
+								s: 100,
+								v: 100,
+								a: 1
+							}, !1),
+							saturation: J.s,
+							brightness: J.v,
+							onChange: Te,
+							onCommit: Ee,
+							label: V("area"),
+							roleDescription: V("areaDescription"),
+							valueText: V("areaValue")(Math.round(J.s), Math.round(J.v))
+						}),
+						/* @__PURE__ */ m(a, {
+							className: "color-picker__channel color-picker__channel--hue",
+							label: V("hue"),
+							min: 0,
+							max: 360,
+							step: 1,
+							value: Math.round(J.h),
+							format: {
+								style: "unit",
+								unit: "degree"
+							},
+							locale: ne,
+							onValueChange: (e) => Y({
+								...J,
+								h: e
+							}, !1),
+							onValueCommitted: (e) => Y({
+								...J,
+								h: e
+							}, !0)
+						}),
+						S && /* @__PURE__ */ m(a, {
+							className: "color-picker__channel color-picker__channel--alpha",
+							label: V("alpha"),
+							min: 0,
+							max: 100,
+							step: 1,
+							value: Math.round(J.a * 100),
+							format: {
+								style: "unit",
+								unit: "percent"
+							},
+							locale: ne,
+							onValueChange: (e) => Y({
+								...J,
+								a: e / 100
+							}, !1),
+							onValueCommitted: (e) => Y({
+								...J,
+								a: e / 100
+							}, !0)
+						}),
+						/* @__PURE__ */ m(r, {
+							className: "color-picker__hex",
+							type: "text",
+							size: M,
+							"aria-label": V("hex"),
+							autoComplete: "off",
+							spellCheck: !1,
+							maxLength: S ? 9 : 7,
+							value: X ?? me,
+							onChange: ye,
+							onBlur: be,
+							onKeyDown: (e) => {
+								e.key === "Enter" && (e.preventDefault(), be());
+							}
+						}),
+						De.length > 0 && /* @__PURE__ */ m("div", {
+							className: "color-picker__presets",
+							role: "group",
+							"aria-label": V("presets"),
+							children: De.map((e) => /* @__PURE__ */ m("button", {
+								type: "button",
+								className: "color-picker__preset",
+								title: e.title,
+								"aria-label": e.title,
+								"aria-pressed": e.hex === me,
+								onClick: () => Y(O(e.hex) ?? j, !0),
+								children: /* @__PURE__ */ m(s, {
+									color: e.hex,
+									className: "color-picker__preset-swatch"
+								})
+							}, `${e.hex}-${e.title}`))
+						}),
+						w && /* @__PURE__ */ m(n, {
+							variant: "ghost",
+							size: "sm",
+							className: "color-picker__clear",
+							onClick: xe,
+							children: V("clear", oe)
+						})
+					]
+				})
 			})
-		})]
+		]
 	});
 });
 //#endregion
-export { j as t };
+export { te as t };

package/dist/_types/atoms/Popover/Popover.d.ts

@@ -8,9 +8,25 @@ import './Popover.css';
  * forma a mano.
  */
 export type PopoverChangeDetails = Parameters<NonNullable<React.ComponentProps<typeof BasePopover.Root>['onOpenChange']>>[1];
+/**
+ * Elemento contra el que se coloca el panel cuando no es el disparador. Es la
+ * prop `anchor` del Positioner de Base UI, tal cual: un elemento, un `ref`, un
+ * elemento virtual o una función que lo devuelva.
+ */
+export type PopoverAnchor = React.ComponentProps<typeof BasePopover.Positioner>['anchor'];
 export interface PopoverProps {
-    /** Elemento que abre el panel. Recibe las props del disparador vía `render`. */
-    trigger: ReactNode;
+    /**
+     * Elemento que abre el panel. Recibe las props del disparador vía `render`.
+     * Sin él no se pinta disparador: el panel se abre con `open` y se coloca
+     * contra `anchor`.
+     */
+    trigger?: ReactNode;
+    /**
+     * Coloca el panel contra otro elemento que no es el disparador —o, sin
+     * disparador, contra el único que hay—. Por defecto, el disparador. Sin
+     * disparador, al cerrarse el foco vuelve a donde estaba antes de abrir.
+     */
+    anchor?: PopoverAnchor;
     /** Contenido del panel. */
     children: ReactNode;
     /**
@@ -74,4 +90,4 @@ export interface PopoverProps {
  * mantener el panel abierto cuando el clic cae en algo que el motor no
  * reconoce como suyo.
  */
-export declare function Popover({ trigger, children, label, open, defaultOpen, onOpenChange, onPointerDownOutside, onFocusOutside, onEscapeKeyDown, side, align, sideOffset, initialFocus, container, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, anchor, children, label, open, defaultOpen, onOpenChange, onPointerDownOutside, onFocusOutside, onEscapeKeyDown, side, align, sideOffset, initialFocus, container, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/messages/BrandMessages.d.ts

@@ -143,7 +143,13 @@ export interface BrandMessages {
     menuButton: MenuButtonMessages;
     appRoot: AppRootMessages;
     appShell: AppShellMessages;
-    appHeader: AppHeaderMessages;
+    /**
+     * **Opcional** (desde v49.23.1): solo lo lee el `AppHeader` cuando lleva
+     * `logo` y no recibe `logoLabel`. En v49.23.0 entró obligatorio y rompía la
+     * compilación de catálogos que no usan el logo. Si un `AppHeader` lo
+     * necesita y falta, lanza como cualquier otra clave ausente.
+     */
+    appHeader?: AppHeaderMessages;
     sidebar: SidebarMessages;
     sidebarNav: SidebarNavMessages;
     siteNav: SiteNavMessages;

package/dist/_types/messages/BrandMessagesContext.d.ts

@@ -11,8 +11,14 @@ export declare const BrandMessagesContext: import("react").Context<BrandMessages
  * consumidor la pasa.
  */
 export interface BrandMessagesReader<K extends keyof BrandMessages> {
-    <N extends keyof BrandMessages[K]>(key: N, override?: BrandMessages[K][N]): BrandMessages[K][N];
+    <N extends keyof BrandMessagesNamespace<K>>(key: N, override?: BrandMessagesNamespace<K>[N]): NonNullable<BrandMessagesNamespace<K>[N]>;
 }
+/**
+ * El espacio de un componente, sin el `undefined` de los espacios opcionales
+ * (`appHeader`): el lector nunca devuelve `undefined`, porque si el texto
+ * falta lanza.
+ */
+export type BrandMessagesNamespace<K extends keyof BrandMessages> = NonNullable<BrandMessages[K]>;
 /**
  * El lector del espacio de un componente. Se llama **en el punto donde el
  * texto se pinta**, no al principio del render: así un componente que no

package/dist/_types/messages/index.d.ts

@@ -1,5 +1,5 @@
 export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
-export type { BrandMessagesReader } from './BrandMessagesContext';
+export type { BrandMessagesReader, BrandMessagesNamespace } from './BrandMessagesContext';
 export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, AppHeaderMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';

package/dist/_types/molecules/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,5 @@
-import type { PopoverChangeDetails } from '../../atoms/Popover/Popover';
+import type { ReactElement } from 'react';
+import type { PopoverAnchor, PopoverChangeDetails } from '../../atoms/Popover/Popover';
 import './ColorPicker.css';
 /**
  * El cromo del selector de color. Ninguno trae el castellano puesto: salen
@@ -115,6 +116,24 @@ export interface ColorPickerProps {
     dialogLabel?: string;
     /** Texto de «Quitar color». **Sin default**: sin él, `colorPicker.clear`. */
     clearLabel?: string;
+    /**
+     * Disparador propio en lugar de la muestra: un `Toggle` con icono, un
+     * `Button`… Como el `trigger` de `Popover`, recibe las props del disparador
+     * por `render`, así que tiene que reenviarlas (y el `ref`) a su elemento.
+     * El selector le añade `id`, `disabled`, `aria-haspopup`, `aria-expanded`,
+     * `aria-invalid`, `aria-label` / `aria-labelledby` y la descripción con el
+     * valor actual; lo que el elemento ya traiga gana, salvo la descripción, que
+     * se suma, y `disabled`, que basta con que lo diga uno. Lo que pinte dentro
+     * (y su `pressed`, si es un `Toggle`) lo decide quien lo usa.
+     */
+    trigger?: ReactElement<Record<string, unknown>>;
+    /**
+     * Coloca el panel contra un elemento que no es el disparador —la celda de una
+     * tabla— (la prop `anchor` de `Popover`). Sin `trigger`, no se pinta ningún
+     * disparador: el panel se abre solo con `open`, y al cerrarse el foco vuelve
+     * a donde estaba antes de abrir.
+     */
+    anchor?: PopoverAnchor;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
 }
@@ -125,6 +144,6 @@ export interface ColorPickerProps {
  *
  * Todo es Base UI salvo el área 2D: el `Popover` (foco, portal, cierre), las
  * bandas (`Slider`) y el campo (`Input`) son los de brand. El `ref` va al
- * disparador.
+ * disparador, sea la muestra o el `trigger` propio.
  */
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/_types/sections/AppHeader/AppHeader.d.ts

@@ -12,8 +12,11 @@ export type AppHeaderLogoLinkProps = {
  * que `siteHeader.logo`.
  */
 export interface AppHeaderMessages {
-    /** Texto accesible del enlace del logotipo. */
-    logo: string;
+    /**
+     * Texto accesible del enlace del logotipo. Opcional, como el espacio entero:
+     * solo hace falta si algún `AppHeader` lleva `logo` sin `logoLabel`.
+     */
+    logo?: string;
 }
 export interface AppHeaderProps {
     /**

package/dist/popover.js

@@ -12,26 +12,27 @@ function a() {
 	let e = document.documentElement;
 	return i(getComputedStyle(e).getPropertyValue("--popover-offset").trim());
 }
-function o({ trigger: i, children: o, label: s, open: c, defaultOpen: l, onOpenChange: u, onPointerDownOutside: d, onFocusOutside: f, onEscapeKeyDown: p, side: m = "bottom", align: h = "start", sideOffset: g, initialFocus: _, container: v, className: y }) {
-	let b = e(v);
+function o({ trigger: i, anchor: o, children: s, label: c, open: l, defaultOpen: u, onOpenChange: d, onPointerDownOutside: f, onFocusOutside: p, onEscapeKeyDown: m, side: h = "bottom", align: g = "start", sideOffset: _, initialFocus: v, container: y, className: b }) {
+	let x = e(y);
 	return /* @__PURE__ */ n(r.Root, {
-		open: c,
-		defaultOpen: l,
+		open: l,
+		defaultOpen: u,
 		onOpenChange: (e, t) => {
-			e || (t.reason === "outside-press" ? d?.(t) : t.reason === "focus-out" ? f?.(t) : t.reason === "escape-key" && p?.(t)), u?.(e, t);
+			e || (t.reason === "outside-press" ? f?.(t) : t.reason === "focus-out" ? p?.(t) : t.reason === "escape-key" && m?.(t)), d?.(e, t);
 		},
-		children: [/* @__PURE__ */ t(r.Trigger, { render: i }), /* @__PURE__ */ t(r.Portal, {
-			container: b,
+		children: [i !== void 0 && /* @__PURE__ */ t(r.Trigger, { render: i }), /* @__PURE__ */ t(r.Portal, {
+			container: x,
 			children: /* @__PURE__ */ t(r.Positioner, {
 				className: "popover__positioner",
-				side: m,
-				align: h,
-				sideOffset: g ?? a,
+				anchor: o,
+				side: h,
+				align: g,
+				sideOffset: _ ?? a,
 				children: /* @__PURE__ */ t(r.Popup, {
-					"aria-label": s,
-					initialFocus: _,
-					className: ["popover", y].filter(Boolean).join(" "),
-					children: o
+					"aria-label": c,
+					initialFocus: v,
+					className: ["popover", b].filter(Boolean).join(" "),
+					children: s
 				})
 			})
 		})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.23.0",
+  "version": "49.24.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",