@studiolxd/brand 49.20.0 → 49.22.0

package/CHANGELOG.md

@@ -7,6 +7,76 @@ 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.22.0] — 2026-10-04
+
+> **Minor.** Muestra y selector de color: `ColorSwatch`, `ColorPicker` y `ColorPickerField`, sin
+> dependencias nuevas (Base UI y un área 2D propia). Espacio nuevo `colorPicker` en `BrandMessages`.
+
+### Muestra y selector de color
+
+Creator pintaba unas 17 muestras a mano y cuatro selectores con `react-color`, fuera del sistema.
+Ahora tiene sus piezas:
+
+- **`ColorSwatch`** (átomo, `@studiolxd/brand/color-swatch`): enseña un color CSS cualquiera que viene
+  de un documento, sobre un damero que solo asoma donde el color es transparente. Tallas `sm`/`md`/`lg`
+  (16/24/48), `label` → `role="img"`; sin él, decorativa. **Sin `style`**: el color va en el `fill`
+  de un SVG (atributo de presentación), así que llega en el HTML del servidor y la CSP no lo descarta.
+- **`ColorPicker`** (molécula, `@studiolxd/brand/color-picker`): la muestra como disparador, a la
+  talla de los campos, que abre un `Popover` con el área de saturación y brillo, la banda de tono, la
+  de opacidad (`alpha`), el campo hex, los predefinidos (`presets`, con `title`) y «Quitar color»
+  (`clearable` + `onClear`). Emite siempre hex en minúsculas, `#rrggbb` o `#rrggbbaa`;
+  `onValueChange` en cada paso y `onValueCommitted` al terminar el gesto.
+- **Apertura controlada**: `open`, `defaultOpen` y `onOpenChange(open, details)`, con la forma del
+  `Popover`, en `ColorPicker` y `ColorPickerField`. Por defecto elegir no cierra el panel; quien
+  quiera cerrarlo al elegir —la celda de una tabla— lo hace en `onValueCommitted`.
+- **`ColorPickerField`** (molécula, `@studiolxd/brand/color-picker-field`): el selector con etiqueta,
+  ayuda y error, como `DatePickerField`.
+
+Todo es Base UI —el `Popover`, el `Slider` para las bandas, el `Input` para el hex— salvo el **área 2D**,
+que Base UI no tiene: un único `role="slider"` con `aria-roledescription` y `aria-valuetext`
+(saturación y brillo), con teclado en los dos ejes, puntero con captura, RTL por el
+`DirectionProvider` de Base UI y la posición escrita por el CSSOM (`useCssProperties`). La conversión
+hex ↔ HSV son funciones puras propias, con sus pruebas. Sin versión nativa: ninguna app nativa la
+ha pedido.
+
+### Tokens
+
+Tres conjuntos nuevos: `tokens/component/color-swatch.json`, `tokens/molecule/color-picker.json` y
+`color-picker-field.json`, con sus pares `surface-dark-*` por la regla de derivación. **Ningún color
+nuevo**: el damero es `color.white` + `color.grey-light`, los degradados del área son `color.white` y
+`color.black` (el modelo HSV) y el degradado de tono sale del propio modelo, no de una lista de hex.
+
+### Internacionalización
+
+Un espacio nuevo en `BrandMessages`: **`colorPicker`** (`trigger`, `value(hex)`, `empty`, `dialog`,
+`area`, `areaDescription`, `areaValue(saturación, brillo)`, `hue`, `alpha`, `hex`, `presets`,
+`clear`). **Una aplicación que no lo rellene no compila**, que es el contrato de siempre. La tabla de
+Foundations › Internacionalización queda actualizada.
+
+## [49.21.0] — 2026-10-04
+
+> **Minor, solo nativo.** `Banner`, `Menu`/`ContextMenu`, `Tabs`, `DatePickerField` y `PageIntro` en SwiftUI (iOS y
+> macOS) y Compose, con la misma API que React. El paquete de npm no cambia.
+
+### Brand nativo R6 — las piezas que la primera app tuvo que hacer por su cuenta
+
+Cinco componentes de React que Homenize reescribió a mano, ahora en SwiftUI (iOS 17 y macOS 14) y Compose, con
+ficha de paridad, pruebas, capturas claro/oscuro y parejas con Storybook. No cambia React ni la versión.
+
+- **`Banner`** → `BrandBanner` (`info`/`warning`/`error`, ranura `actions`, aspa con `onDismiss`, apila por debajo de 480).
+  Sustituye al `OfflineBanner` de Homenize (iOS y Android).
+- **`Menu` y `ContextMenu`** → `BrandMenu`, `BrandContextMenu`, `BrandMenuItem` (`button`, `separator`, `label`, `radio`).
+  iOS/macOS: el `Menu` del sistema por dentro con el disparador de brand; Android: `Popup` propio con los tokens `menu.*`.
+  Sustituyen a los `DropdownMenu` de Material y los `Menu { … }` de Homenize.
+- **`Tabs`** → `BrandTabs` + `BrandTab` (`underline`/`pill`, horizontal/vertical): solo la barra; el contenido lo pinta la app.
+  Sustituye al `PrimaryTabRow` de Homenize.
+- **`DatePickerField`** → `BrandDatePickerField`: campo de brand con el selector del sistema (`DatePicker` gráfico en
+  popover u hoja; `DatePickerDialog` en Android). Fechas de calendario sin hora (`Date` normalizada / `LocalDate`).
+- **`PageIntro`** → `BrandPageIntro` (eyebrow, título, entradilla, acciones). No sustituye al `ScreenHeader` de Homenize,
+  que es la barra de navegación de la app y sigue siendo la del sistema.
+- Tokens de componente nativos nuevos: `banner`, `tabs`, `page-intro`, `date-picker`, `date-picker-field`.
+- Compose: `BrandCloseButton` admite tinta propia (interno) y `pair-comparison.sh` de Android recorta bien los lienzos más altos que anchos.
+
 ## [49.20.0] — 2026-10-04
 
 > **Minor.** `Autocomplete` y `AutocompleteField` (sugerencias con texto libre), tachado en `Text`, y `NumberInput`

package/dist/_shared/colorpicker.js

@@ -0,0 +1,410 @@
+import '../colorpicker.css';
+import { n as e } from "./brandmessagescontext.js";
+import { VisuallyHidden as t } from "../visually-hidden.js";
+import { Button as n } from "../button.js";
+import { Input as r } from "../input.js";
+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";
+//#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({
+		s: 0,
+		v: 0
+	}), S = o({
+		"--color-picker-area-x": `${m ? 100 - t : t}%`,
+		"--color-picker-area-y": `${100 - n}%`,
+		"--color-picker-area-hue": e
+	}), C = l((e) => {
+		y.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)
+		};
+	}, T = () => {
+		((typeof f == "function" ? null : f?.current) ?? y.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
+	}, E = (e) => {
+		if (u || e.button !== 0) return;
+		e.preventDefault();
+		try {
+			e.currentTarget.setPointerCapture?.(e.pointerId);
+		} catch {}
+		b.current = e.pointerId, T();
+		let t = w(e);
+		x.current = t, r(t);
+	}, D = (e) => {
+		if (b.current !== e.pointerId) return;
+		let t = w(e);
+		x.current = t, r(t);
+	}, O = (e) => {
+		if (b.current === e.pointerId) {
+			b.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 } = {
+			s: t,
+			v: n
+		};
+		switch (e.key) {
+			case "ArrowRight":
+				o += m ? -a : a;
+				break;
+			case "ArrowLeft":
+				o += m ? a : -a;
+				break;
+			case "ArrowUp":
+				s += a;
+				break;
+			case "ArrowDown":
+				s -= a;
+				break;
+			case "PageUp":
+				e.shiftKey ? o += _ : s += _;
+				break;
+			case "PageDown":
+				e.shiftKey ? o -= _ : s -= _;
+				break;
+			case "Home":
+				e.ctrlKey || e.metaKey ? s = 0 : o = 0;
+				break;
+			case "End":
+				e.ctrlKey || e.metaKey ? s = 100 : o = 100;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let c = {
+			s: v(o),
+			v: v(s)
+		};
+		r(c), i(c);
+	};
+	return /* @__PURE__ */ p("div", {
+		ref: C,
+		className: "color-picker__area",
+		"data-direction": m ? "rtl" : "ltr",
+		"data-disabled": u ? "" : void 0,
+		onPointerDown: E,
+		onPointerMove: D,
+		onPointerUp: O,
+		onPointerCancel: O,
+		children: /* @__PURE__ */ p("div", {
+			ref: f,
+			className: "color-picker__area-thumb",
+			role: "slider",
+			tabIndex: u ? -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,
+			onKeyDown: k
+		})
+	});
+}), b = (e, t, n) => Math.min(n, Math.max(t, e));
+function x(e) {
+	let t = e.trim().replace(/^#/, "");
+	if (!/^[0-9a-f]+$/i.test(t)) return null;
+	let n;
+	if (t.length === 3 || t.length === 4) n = t.split("").map((e) => e + e).join("");
+	else if (t.length === 6 || t.length === 8) n = t;
+	else return null;
+	let r = (e) => parseInt(n.slice(e * 2, e * 2 + 2), 16);
+	return {
+		r: r(0),
+		g: r(1),
+		b: r(2),
+		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;
+}
+function w({ 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,
+		s: s === 0 ? 0 : c / s * 100,
+		v: s * 100,
+		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;
+	return u = i < 60 ? [
+		s,
+		c,
+		0
+	] : i < 120 ? [
+		c,
+		s,
+		0
+	] : i < 180 ? [
+		0,
+		s,
+		c
+	] : i < 240 ? [
+		0,
+		c,
+		s
+	] : i < 300 ? [
+		c,
+		0,
+		s
+	] : [
+		s,
+		0,
+		c
+	], {
+		r: (u[0] + l) * 255,
+		g: (u[1] + l) * 255,
+		b: (u[2] + l) * 255,
+		a: b(r, 0, 1)
+	};
+}
+function E(e) {
+	let t = x(e);
+	return t ? w(t) : null;
+}
+function D(e, t) {
+	return C(T(e), t);
+}
+function O(e, t) {
+	let n = x(e);
+	return n ? C(n, t) : null;
+}
+function k() {
+	return [
+		0,
+		60,
+		120,
+		180,
+		240,
+		300,
+		360
+	].map((e) => D({
+		h: e,
+		s: 100,
+		v: 100,
+		a: 1
+	}, !1));
+}
+//#endregion
+//#region src/stories/molecules/ColorPicker/ColorPicker.tsx
+var A = {
+	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,
+		a: 1
+	}, !1), Y = l((e, t) => {
+		let n = b ? e : {
+			...e,
+			a: 1
+		};
+		q(n);
+		let r = D(n, b);
+		H || U(r), _?.(r), t && v?.(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;
+		return r ? (Y(r, t), !0) : !1;
+	}, me = (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,
+		s: e.s,
+		v: e.v
+	}, !1), xe = (e) => Y({
+		...K,
+		s: e.s,
+		v: e.v
+	}, !0), Se = (x ?? []).map((e) => ({
+		...e,
+		hex: O(e.color, b)
+	})).filter((e) => e.hex !== null), Ce = [
+		"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,
+		type: "button",
+		className: "color-picker__trigger",
+		disabled: ee,
+		"aria-label": I ?? (L ? void 0 : R("trigger")),
+		"aria-labelledby": I ? void 0 : L,
+		"aria-describedby": we,
+		"aria-haspopup": "dialog",
+		"aria-expanded": V,
+		"aria-invalid": N || void 0,
+		children: [/* @__PURE__ */ p(s, {
+			color: W,
+			className: "color-picker__swatch"
+		}), /* @__PURE__ */ p(t, {
+			id: ve,
+			children: W ? R("value")(G ?? W) : R("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)
+					})
+				]
+			})
+		})]
+	});
+});
+//#endregion
+export { j as t };

package/dist/_shared/tokens.js

@@ -687,6 +687,15 @@ var e = {
 	"--collapsible-focus-ring-width": "2px",
 	"--collapsible-focus-ring-offset": "1px",
 	"--collapsible-focus-ring-color": "#111e30",
+	"--color-swatch-size-sm": "16px",
+	"--color-swatch-size-md": "24px",
+	"--color-swatch-size-lg": "48px",
+	"--color-swatch-border-width": "1px",
+	"--color-swatch-border-color": "#d0d0d0",
+	"--color-swatch-border-radius": "0px",
+	"--color-swatch-checker-color": "#d0d0d0",
+	"--color-swatch-checker-bg": "#ffffff",
+	"--color-swatch-checker-size": "0.5rem",
 	"--columns-gap-md": "2rem",
 	"--columns-gap-lg": "4rem",
 	"--columns-stack-gap-md": "2rem",
@@ -2429,6 +2438,59 @@ var e = {
 	"--clock-widget-elapsed-label-font-size": "0.875rem",
 	"--clock-widget-elapsed-label-color": "#4a4a4a",
 	"--clock-widget-footer-margin-block-start": "0.5rem",
+	"--color-picker-field-gap": "0.5rem",
+	"--color-picker-field-helper-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--color-picker-field-helper-font-size": "0.875rem",
+	"--color-picker-field-helper-font-weight": "300",
+	"--color-picker-field-helper-line-height": "1.5",
+	"--color-picker-field-helper-color": "#111e30",
+	"--color-picker-trigger-size": "2.5rem",
+	"--color-picker-trigger-sm-size": "2rem",
+	"--color-picker-trigger-lg-size": "3rem",
+	"--color-picker-trigger-padding": "0.25rem",
+	"--color-picker-trigger-bg": "#ffffff",
+	"--color-picker-trigger-border-width": "1px",
+	"--color-picker-trigger-border-style": "solid",
+	"--color-picker-trigger-border-color": "#111e30",
+	"--color-picker-trigger-border-radius": "0px",
+	"--color-picker-trigger-cursor": "pointer",
+	"--color-picker-trigger-focus-border-color": "#111e30",
+	"--color-picker-trigger-focus-ring-width": "2px",
+	"--color-picker-trigger-focus-ring-inset-offset": "1px",
+	"--color-picker-trigger-focus-ring-color": "#111e30",
+	"--color-picker-trigger-error-border-color": "#b30000",
+	"--color-picker-trigger-error-focus-ring-color": "#b30000",
+	"--color-picker-trigger-disabled-bg": "#f2f2f2",
+	"--color-picker-trigger-disabled-border-color": "#d0d0d0",
+	"--color-picker-trigger-disabled-cursor": "not-allowed",
+	"--color-picker-trigger-disabled-opacity": "0.4",
+	"--color-picker-panel-gap": "0.75rem",
+	"--color-picker-panel-inline-size": "calc(8 * 24px + 7 * 0.5rem)",
+	"--color-picker-area-block-size": "calc(6 * 24px + 5 * 0.5rem)",
+	"--color-picker-area-border-width": "1px",
+	"--color-picker-area-border-color": "#d0d0d0",
+	"--color-picker-area-saturation-start": "#ffffff",
+	"--color-picker-area-brightness-end": "#000000",
+	"--color-picker-area-cursor": "crosshair",
+	"--color-picker-channel-track-size": "0.75rem",
+	"--color-picker-thumb-size": "16px",
+	"--color-picker-thumb-border-width": "2px",
+	"--color-picker-thumb-border-color": "#ffffff",
+	"--color-picker-thumb-outline-width": "1px",
+	"--color-picker-thumb-outline-color": "#111e30",
+	"--color-picker-thumb-border-radius": "0px",
+	"--color-picker-thumb-focus-ring-width": "2px",
+	"--color-picker-thumb-focus-ring-offset": "2px",
+	"--color-picker-thumb-focus-ring-color": "#111e30",
+	"--color-picker-preset-size": "24px",
+	"--color-picker-preset-gap": "0.5rem",
+	"--color-picker-preset-cursor": "pointer",
+	"--color-picker-preset-focus-ring-width": "2px",
+	"--color-picker-preset-focus-ring-offset": "2px",
+	"--color-picker-preset-focus-ring-color": "#111e30",
+	"--color-picker-preset-selected-ring-width": "2px",
+	"--color-picker-preset-selected-ring-offset": "1px",
+	"--color-picker-preset-selected-ring-color": "#111e30",
 	"--command-palette-max-height": "min(24rem, 60vh)",
 	"--command-palette-input-padding-block": "0.75rem",
 	"--command-palette-input-padding-inline": "0.5rem",

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

@@ -0,0 +1,35 @@
+import './ColorSwatch.css';
+export interface ColorSwatchProps {
+    /**
+     * El color que se enseña: **cualquier color CSS** (`#111e30`, `#11223380`,
+     * `rgb(…)`, `transparent`, un nombre). Viene del documento, así que no se
+     * valida: lo que el navegador no entiende se pinta como vacío. Sin color
+     * (`null`, `undefined` o cadena vacía) solo asoma el damero.
+     */
+    color?: string | null;
+    /** Talla: `sm` (16px), `md` (24px, por defecto) o `lg` (48px). */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Nombre accesible. Con él la muestra es una imagen con nombre
+     * (`role="img"`): «Lavanda», «Color de fondo: #baabff». Sin él es
+     * decorativa (`aria-hidden`), que es lo correcto cuando el color ya se dice
+     * en el texto de al lado.
+     */
+    label?: string;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Una muestra de color: enseña un color que viene de un documento —el de un
+ * tema, una categoría, una celda—, sin interacción. Para elegirlo,
+ * `ColorPicker`.
+ *
+ * Detrás del color va siempre un damero, que solo se ve cuando el color tiene
+ * transparencia: así `transparent` o `#ffffff80` no se confunden con el blanco.
+ *
+ * **Sin atributo `style`.** El color llega al HTML como atributo de
+ * presentación de SVG (`fill`), que la CSP `style-src 'self'` no bloquea y que
+ * ya está en el primer render del servidor; el damero sale de la hoja, con
+ * tokens.
+ */
+export declare function ColorSwatch({ color, size, label, className }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,6 +16,7 @@ import type { SiteSearchMessages } from '../organisms/SiteSearch/SiteSearch';
 import type { FilterBarMessages } from '../molecules/FilterBar/FilterBar';
 import type { CalendarMessages } from '../molecules/Calendar/Calendar';
 import type { DatePickerMessages } from '../molecules/DatePicker/DatePicker';
+import type { ColorPickerMessages } from '../molecules/ColorPicker/ColorPicker';
 import type { TimeSelectMessages } from '../atoms/TimeSelect/TimeSelect';
 import type { FileUploadMessages } from '../atoms/FileUpload/FileUpload';
 import type { ImageCropDialogMessages } from '../molecules/ImageCropDialog/ImageCropDialog';
@@ -121,6 +122,7 @@ export interface BrandMessages {
     filterBar: FilterBarMessages;
     calendar: CalendarMessages;
     datePicker: DatePickerMessages;
+    colorPicker: ColorPickerMessages;
     timeSelect: TimeSelectMessages;
     fileUpload: FileUploadMessages;
     imageCropDialog: ImageCropDialogMessages;
@@ -187,4 +189,4 @@ export interface BrandMessages {
     connectorExternalSignIn: ConnectorExternalSignInMessages;
     connectorRejection: ConnectorRejectionMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, 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, };
+export type { 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, 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, };

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

@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
 export type { BrandMessagesReader } from './BrandMessagesContext';
-export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, 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';
+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, 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';