@studiolxd/brand 42.0.0 → 43.0.0

package/CHANGELOG.md

@@ -7,6 +7,59 @@ 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.
 
+## [43.0.0] — 2026-09-15
+
+> **Major.** Cuarta familia al proveedor de textos: fecha y hora. `Calendar`, `DatePicker`
+> y `TimeSelect` dejan de traer castellano puesto, y con ellos se cierran los reenvíos que
+> las olas anteriores dejaron inventariados.
+
+### Fecha y hora leen del proveedor
+
+Tres espacios nuevos en `BrandMessages`: **`calendar`** (previousMonth, nextMonth,
+previousYears, nextYears, yearGrid), **`datePicker`** (openCalendar, invalid, calendar y
+las letras de la máscara) y **`timeSelect`** (hours, minutes y sus máscaras). Los campos
+que los envuelven —`DatePickerField`, `DateTimeField`, `TimeField`— no pierden props: sus
+reenvíos quedan como anulación puntual, pero ya no hay que enhebrar nada para traducir,
+porque el proveedor llega por contexto a la pieza que pinta el texto. Se ha retirado
+`SPANISH_MASK_LETTERS`, el último juego de letras castellanas vivo en el código.
+
+Mismo orden que en las tres olas anteriores —**prop → proveedor → error**— y misma
+naturaleza: incompatible **en tiempo de compilación**. El texto que no se pinta no se
+exige: un `Calendar` sin navegación no pide las flechas, un `DatePicker` con fecha válida no
+pide el aviso, un `TimeSelect` con hora no pide las máscaras.
+
+### Una máscara tiene dos mitades
+
+`dd/mm/aaaa` no es una cosa, son dos decididas en sitios distintos. **El orden y el
+separador son formato**: salen del `locale` vía `Intl.DateTimeFormat`, y una aplicación en
+inglés que enseñe fechas españolas las quiere en orden español. **Las letras son idioma**:
+`aaaa` es «año», `yyyy` es *year*, `jjjj` es *Jahr* — la abreviatura de una palabra, y se
+traduce. Por eso el catálogo guarda las tres letras sueltas y nunca la máscara montada: la
+arma el componente poniendo las letras en el orden del `locale`.
+
+Lo mismo con `HH/MM`: parecen notación técnica, pero son la inicial de una palabra, y en
+alemán son `SS/MM`. Lo que no se traduce es el dibujo —dos cifras, la hora antes que el
+minuto, dos puntos en medio—.
+
+La regla, en una frase, escrita en `Foundations › Internacionalización`: **si cambia al
+cambiar de idioma es cromo; si cambia al cambiar de país es formato.**
+
+### Lo que se queda como prop
+
+`label`, `helperText` y `errorMessage` de los tres campos; `gridLabel` del `Calendar`, que
+nombra a ESE calendario («Fecha de alta») y sin el cual la rejilla toma el título del mes,
+que ya viene del `locale`; `calendarLabel` cuando lo pone un campo, porque es su etiqueta;
+y el `placeholder` del `DatePicker` cuando dice algo del campo («Desde»), que sustituye a la
+máscara entera.
+
+### Pendiente, anotado
+
+`CalendarPlanner` y `CalendarRoster` siguen con «Mes anterior» y «Mes siguiente» cableados:
+es el mismo texto que `Calendar` y pueden leer de `calendar.*` tal cual. Y `TimeSelect` es
+de 24 horas por construcción; el reloj de 12 con AM/PM es cosa del `locale`, no del idioma,
+y hoy una aplicación en inglés americano ve las horas en formato militar. No es un texto,
+y queda por decidir.
+
 ## [42.0.0] — 2026-09-15
 
 > **Major.** Tercera familia al proveedor de textos: los átomos y moléculas de formulario

package/dist/_shared/datepicker.js

@@ -1,16 +1,13 @@
 import '../datepicker.css';
-import { Icon as e } from "../icon.js";
-import { Input as t } from "../input.js";
-import { Popover as n } from "../popover.js";
-import { Calendar as r } from "../calendar.js";
-import { forwardRef as i, useCallback as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { Input as n } from "../input.js";
+import { Popover as r } from "../popover.js";
+import { Calendar as i } from "../calendar.js";
+import { forwardRef as a, useCallback as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePicker/dateMask.ts
-var f = {
-	day: "dd",
-	month: "mm",
-	year: "aaaa"
-}, p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
+var p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
 function h(e, t) {
 	return String(e).padStart(t, "0");
 }
@@ -60,110 +57,110 @@ function g(e) {
 function _(e) {
 	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-var v = i(function({ value: i, onChange: p, placeholder: m, maskLetters: h = f, invalidMessage: v = "Escribe una fecha completa, con el día, el mes y el año.", openCalendarLabel: y = "Abrir calendario", minDate: b, maxDate: ee, disabledDates: x, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: k, "aria-describedby": te, "aria-label": ne, calendarLabel: A = "Calendario", previousMonthLabel: re, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, onBlur: I, className: L }, R) {
-	let [z, B] = l(!1), V = s(() => g(E), [E]), H = i instanceof Date ? V.format(i) : "", [U, W] = l(H), [G, K] = l(H);
-	H !== G && (K(H), W(H));
-	let q = c(null), J = a((e) => {
-		q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
-	}, [R]), Y = U.trim(), X = Y ? V.parse(U) : null, Z = Y !== "" && !X, ie = T || Z, Q = `${o()}-date-picker-invalid`, ae = [k ?? te, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, oe = a((e) => {
-		(w || C) && e || B(e);
-	}, [C, w]), $ = a((e) => {
+var v = a(function({ value: a, onChange: p, placeholder: m, maskLetters: h, invalidMessage: v, openCalendarLabel: y, minDate: b, maxDate: x, disabledDates: S, size: C = "md", disabled: w, readOnly: T, error: E = !1, locale: D = "es-ES", id: O, name: k, describedBy: ee, "aria-describedby": te, "aria-label": ne, calendarLabel: re, previousMonthLabel: ie, nextMonthLabel: ae, previousYearsLabel: A, nextYearsLabel: j, yearGridLabel: M, gridLabel: N, onBlur: P, className: F }, I) {
+	let L = e("datePicker"), [R, z] = u(!1), B = c(() => g(D), [D]), V = a instanceof Date ? B.format(a) : "", [H, U] = u(V), [W, G] = u(V);
+	V !== W && (G(V), U(V));
+	let K = l(null), q = o((e) => {
+		K.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
+	}, [I]), J = H.trim(), Y = J ? B.parse(H) : null, X = J !== "" && !Y, oe = E || X, Z = `${s()}-date-picker-invalid`, se = [ee ?? te, X ? Z : void 0].filter(Boolean).join(" ") || void 0, ce = o((e) => {
+		(T || w) && e || z(e);
+	}, [w, T]), le = o((e) => {
 		let t = e.target.value;
-		if (W(t), t.trim() === "") {
+		if (U(t), t.trim() === "") {
 			p?.(null);
 			return;
 		}
-		let n = V.parse(t);
+		let n = B.parse(t);
 		n && p?.(n);
-	}, [V, p]), se = a((e) => {
-		if (e.key === "ArrowDown" && !w && !C) {
-			e.preventDefault(), B(!0);
+	}, [B, p]), ue = o((e) => {
+		if (e.key === "ArrowDown" && !T && !w) {
+			e.preventDefault(), z(!0);
 			return;
 		}
-		e.key === "Escape" && z && (e.preventDefault(), B(!1));
+		e.key === "Escape" && R && (e.preventDefault(), z(!1));
 	}, [
-		C,
-		z,
-		w
-	]), ce = a((e) => {
-		W(V.format(e)), p?.(e), B(!1), requestAnimationFrame(() => q.current?.focus());
-	}, [V, p]), le = /* @__PURE__ */ u("button", {
+		w,
+		R,
+		T
+	]), Q = o((e) => {
+		U(B.format(e)), p?.(e), z(!1), requestAnimationFrame(() => K.current?.focus());
+	}, [B, p]), de = /* @__PURE__ */ d("button", {
 		type: "button",
 		className: "date-picker__button",
-		"aria-label": y,
+		"aria-label": L("openCalendar", y),
 		"aria-haspopup": "dialog",
-		"aria-expanded": z,
-		disabled: C,
-		tabIndex: w ? -1 : void 0,
-		children: /* @__PURE__ */ u(e, {
+		"aria-expanded": R,
+		disabled: w,
+		tabIndex: T ? -1 : void 0,
+		children: /* @__PURE__ */ d(t, {
 			name: "calendar",
 			size: "sm",
 			className: "date-picker__glyph"
 		})
-	});
-	return /* @__PURE__ */ d("div", {
+	}), $ = L("calendar", re);
+	return /* @__PURE__ */ f("div", {
 		className: [
 			"date-picker",
-			S === "md" ? "" : `date-picker--${S}`,
-			L ?? ""
+			C === "md" ? "" : `date-picker--${C}`,
+			F ?? ""
 		].filter(Boolean).join(" "),
 		children: [
-			O && /* @__PURE__ */ u("input", {
+			k && /* @__PURE__ */ d("input", {
 				type: "hidden",
-				name: O,
-				value: i instanceof Date ? _(i) : ""
+				name: k,
+				value: a instanceof Date ? _(a) : ""
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "date-picker__control",
-				children: [/* @__PURE__ */ u(t, {
-					ref: J,
-					id: D,
+				children: [/* @__PURE__ */ d(n, {
+					ref: q,
+					id: O,
 					className: "date-picker__input",
 					type: "text",
 					inputMode: "numeric",
 					autoComplete: "off",
-					size: S,
-					error: ie,
-					value: U,
-					placeholder: m ?? V.mask(h),
-					disabled: C,
-					readOnly: w,
+					size: C,
+					error: oe,
+					value: H,
+					placeholder: m ?? B.mask(L("maskLetters", h)),
+					disabled: w,
+					readOnly: T,
 					"aria-label": ne,
-					"aria-describedby": ae,
-					onChange: $,
-					onKeyDown: se,
-					onBlur: I
-				}), /* @__PURE__ */ u(n, {
-					trigger: le,
-					label: A,
-					open: z,
-					onOpenChange: oe,
+					"aria-describedby": se,
+					onChange: le,
+					onKeyDown: ue,
+					onBlur: P
+				}), /* @__PURE__ */ d(r, {
+					trigger: de,
+					label: $,
+					open: R,
+					onOpenChange: ce,
 					side: "bottom",
 					align: "end",
 					sideOffset: -1,
 					className: "date-picker__popover",
-					children: /* @__PURE__ */ u(r, {
-						value: X ?? i ?? null,
-						onChange: ce,
-						gridLabel: F ?? A,
-						previousMonthLabel: re,
-						nextMonthLabel: j,
-						previousYearsLabel: M,
-						nextYearsLabel: N,
-						yearGridLabel: P,
+					children: /* @__PURE__ */ d(i, {
+						value: Y ?? a ?? null,
+						onChange: Q,
+						gridLabel: N ?? $,
+						previousMonthLabel: ie,
+						nextMonthLabel: ae,
+						previousYearsLabel: A,
+						nextYearsLabel: j,
+						yearGridLabel: M,
 						minDate: b,
-						maxDate: ee,
-						disabledDates: x,
-						locale: E,
-						size: S
+						maxDate: x,
+						disabledDates: S,
+						locale: D,
+						size: C
 					})
 				})]
 			}),
-			Z && /* @__PURE__ */ u("span", {
-				id: Q,
+			X && /* @__PURE__ */ d("span", {
+				id: Z,
 				className: "date-picker__message",
 				role: "alert",
-				children: v
+				children: L("invalid", v)
 			})
 		]
 	});

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

@@ -1,4 +1,26 @@
 import './TimeSelect.css';
+/**
+ * El cromo de la hora: cómo se llaman los dos desplegables y qué pone dentro
+ * mientras no hay hora elegida.
+ *
+ * **Las dos máscaras también son idioma, no formato.** `HH` y `MM` parecen
+ * notación técnica, pero son la inicial de una palabra —hora y minuto— y
+ * cambian con ella: en alemán se escriben `SS`/`MM` (*Stunde*, *Minute*). Lo
+ * que NO se traduce es el dibujo: dos cifras, la hora antes que el minuto y
+ * los dos puntos en medio; eso no lo decide ni la prop ni el catálogo.
+ *
+ * Las **cifras de las opciones** (`00`…`23`) tampoco están aquí: son datos.
+ */
+export interface TimeSelectMessages {
+    /** Nombre accesible del desplegable de horas. */
+    hours: string;
+    /** Nombre accesible del desplegable de minutos. */
+    minutes: string;
+    /** Máscara del desplegable de horas sin valor: `HH`. */
+    maskHours: string;
+    /** Máscara del desplegable de minutos sin valor: `MM`. */
+    maskMinutes: string;
+}
 export interface TimeValue {
     h: number;
     m: number;
@@ -27,18 +49,24 @@ export interface TimeSelectProps {
     /** Se añade DESPUÉS de las clases propias del componente. */
     className?: string;
     /**
-     * aria-label del selector de horas. Default: "Horas" (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * aria-label del selector de horas. **Sin default**: sin él, el texto sale
+     * de `timeSelect.hours` del `BrandMessagesProvider`.
      */
     hoursLabel?: string;
     /**
-     * aria-label del selector de minutos. Default: "Minutos" (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * aria-label del selector de minutos. **Sin default**: sin él, sale de
+     * `timeSelect.minutes` del `BrandMessagesProvider`.
      */
     minutesLabel?: string;
-    /** Placeholder del selector de horas. Default: "HH" */
+    /**
+     * Máscara del selector de horas. **Sin default**: sin ella, sale de
+     * `timeSelect.maskHours` del `BrandMessagesProvider`.
+     */
     hoursPlaceholder?: string;
-    /** Placeholder del selector de minutos. Default: "MM" */
+    /**
+     * Máscara del selector de minutos. **Sin default**: sin ella, sale de
+     * `timeSelect.maskMinutes` del `BrandMessagesProvider`.
+     */
     minutesPlaceholder?: string;
 }
 /**

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

@@ -13,6 +13,9 @@ import type { AsyncMultiSelectMessages } from '../atoms/AsyncMultiSelect/AsyncMu
 import type { DocsSearchMessages } from '../molecules/DocsSearch/DocsSearch';
 import type { SearchFormMessages } from '../molecules/SearchForm/SearchForm';
 import type { FilterBarMessages } from '../molecules/FilterBar/FilterBar';
+import type { CalendarMessages } from '../molecules/Calendar/Calendar';
+import type { DatePickerMessages } from '../molecules/DatePicker/DatePicker';
+import type { TimeSelectMessages } from '../atoms/TimeSelect/TimeSelect';
 /**
  * El contrato de textos de la librería: un espacio por componente, y dentro
  * de cada espacio **todas las claves obligatorias**.
@@ -50,5 +53,8 @@ export interface BrandMessages {
     docsSearch: DocsSearchMessages;
     searchForm: SearchFormMessages;
     filterBar: FilterBarMessages;
+    calendar: CalendarMessages;
+    datePicker: DatePickerMessages;
+    timeSelect: TimeSelectMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, };
+export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, };

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, FilterBarMessages, } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, } from './BrandMessages';

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

@@ -1,4 +1,32 @@
 import './Calendar.css';
+/**
+ * El cromo del calendario: las dos flechas —que cambian de nombre según la
+ * vista— y el rótulo de la rejilla de años. Dicen lo mismo en toda la suite,
+ * así que salen del catálogo y no de una prop por uso.
+ *
+ * **Lo que NO está aquí, y no es olvido:** los nombres de los meses, los de
+ * los días de la semana, las cifras del año y el nombre accesible de cada
+ * celda («lunes, 15 de enero de 2025»). Eso no es texto de interfaz sino
+ * **formato de fecha**: sale de `locale` con `Intl`, que además es quien sabe
+ * en qué día empieza la semana y con qué cifras se escribe el año. Traducirlo
+ * por catálogo sería reescribir a mano lo que el navegador ya trae bien.
+ *
+ * Tampoco está `gridLabel`: nombra a ESTE calendario («Fecha de alta»), que
+ * es contenido de la pantalla. Sin él la rejilla toma como nombre el título
+ * del mes visible, que ya viene del locale.
+ */
+export interface CalendarMessages {
+    /** Nombre accesible de la flecha de retroceso sobre la rejilla de días. */
+    previousMonth: string;
+    /** Nombre accesible de la flecha de avance sobre la rejilla de días. */
+    nextMonth: string;
+    /** Nombre accesible de la flecha de retroceso sobre la rejilla de años. */
+    previousYears: string;
+    /** Nombre accesible de la flecha de avance sobre la rejilla de años. */
+    nextYears: string;
+    /** Nombre accesible de la rejilla de años. */
+    yearGrid: string;
+}
 export interface CalendarProps {
     /** Fecha seleccionada (modo controlado) */
     value?: Date | null;
@@ -21,34 +49,37 @@ export interface CalendarProps {
     /** Locale para nombres de mes y día. Default: 'es-ES' */
     locale?: string;
     /**
-     * aria-label del botón de mes anterior. Default: "Mes anterior" (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * aria-label del botón de mes anterior. **Sin default**: sin él, el texto
+     * sale de `calendar.previousMonth` del `BrandMessagesProvider`.
      */
     previousMonthLabel?: string;
     /**
-     * aria-label del botón de mes siguiente. Default: "Mes siguiente" (castellano).
-     * Una app multiidioma debe pasarla traducida.
+     * aria-label del botón de mes siguiente. **Sin default**: sin él, el texto
+     * sale de `calendar.nextMonth` del `BrandMessagesProvider`.
      */
     nextMonthLabel?: string;
     /**
-     * aria-label del botón de retroceso **en la vista de años**. Default: "Años
-     * anteriores" (castellano). Una app multiidioma debe pasarla traducida.
+     * aria-label del botón de retroceso **en la vista de años**. **Sin
+     * default**: sin él, sale de `calendar.previousYears` del
+     * `BrandMessagesProvider`.
      */
     previousYearsLabel?: string;
     /**
-     * aria-label del botón de avance en la vista de años. Default: "Años
-     * siguientes" (castellano).
+     * aria-label del botón de avance en la vista de años. **Sin default**: sin
+     * él, sale de `calendar.nextYears` del `BrandMessagesProvider`.
      */
     nextYearsLabel?: string;
     /**
-     * aria-label de la rejilla de años. Default: "Elegir año" (castellano).
+     * aria-label de la rejilla de años. **Sin default**: sin él, sale de
+     * `calendar.yearGrid` del `BrandMessagesProvider`.
      */
     yearGridLabel?: string;
     /**
-     * aria-label de la rejilla de días. Sin ella, la rejilla toma como nombre el
-     * título del mes visible. Cuando el calendario vive dentro de un panel con
-     * nombre propio (el `Popover` de `DatePicker`), conviene pasarlo aquí.
-     * Es texto visible para lectores: una app multiidioma debe pasarlo traducido.
+     * aria-label de la rejilla de días. **No sale del catálogo**: nombra a ESTE
+     * calendario («Fecha de alta»), que es contenido de la pantalla. Sin ella,
+     * la rejilla toma como nombre el título del mes visible. Cuando el
+     * calendario vive dentro de un panel con nombre propio (el `Popover` de
+     * `DatePicker`), conviene pasarlo aquí.
      */
     gridLabel?: string;
     /** Tamaño del componente. Default: 'md' */

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

@@ -1,6 +1,38 @@
 import type { CalendarProps } from '../Calendar/Calendar';
 import { type DateMaskLetters } from './dateMask';
 import './DatePicker.css';
+/**
+ * El cromo del selector de fecha: el botón que abre el calendario, el aviso de
+ * fecha incompleta, el nombre del panel y **las letras de la máscara**.
+ *
+ * Las letras están aquí a propósito, y son el caso interesante de esta
+ * familia. `dd/mm/aaaa` tiene dos mitades que no se deciden igual:
+ *
+ * - **El orden y el separador son formato**: que `es` escriba 25/09/2026,
+ *   `en-US` 09/25/2026 y `de` 25.09.2026 sale del `locale` con `Intl`
+ *   (`dateMask.ts`), no de una prop ni del catálogo. Una app en inglés
+ *   mostrando fechas españolas las quiere en orden español.
+ * - **Las letras son idioma**: `aaaa` es «año», `yyyy` es *year* y `jjjj` es
+ *   *Jahr*. Son la abreviatura de una palabra, así que se traducen — y por eso
+ *   son cromo y salen del catálogo, como cualquier otro rótulo.
+ *
+ * Por eso el catálogo trae solo las tres letras y no la máscara montada: la
+ * máscara la arma el componente poniendo las letras en el orden del locale.
+ */
+export interface DatePickerMessages {
+    /** Nombre accesible del botón que abre el calendario. */
+    openCalendar: string;
+    /** Aviso de fecha incompleta o inexistente, anunciado con `role="alert"`. */
+    invalid: string;
+    /** Nombre accesible del panel del calendario (`role="dialog"`). */
+    calendar: string;
+    /**
+     * Las letras de la máscara, una por parte: `{ day: 'dd', month: 'mm',
+     * year: 'aaaa' }`. El orden y el separador NO están aquí: salen del
+     * `locale`.
+     */
+    maskLetters: DateMaskLetters;
+}
 export interface DatePickerProps {
     value?: Date | null;
     /**
@@ -9,23 +41,28 @@ export interface DatePickerProps {
      */
     onChange?: (date: Date | null) => void;
     /**
-     * Pista dentro del campo. Por defecto, la máscara del locale con las letras
-     * castellanas (`dd/mm/aaaa`, `mm/dd/aaaa` en `en-US`). Una app multiidioma
-     * pasa `maskLetters` para traducir las letras sin tocar el orden.
+     * Pista dentro del campo. Sin ella, la máscara del locale con las letras
+     * del catálogo (`dd/mm/aaaa`, `mm/dd/aaaa` en `en-US`). Es la anulación
+     * puntual: un campo que quiere decir otra cosa («Desde») la pasa.
      */
     placeholder?: string;
     /**
-     * Letras de la máscara del marcador de posición. Default castellano
-     * (`{ day: 'dd', month: 'mm', year: 'aaaa' }`). El orden y el separador no
-     * son props: salen del `locale` con `Intl`.
+     * Letras de la máscara del marcador de posición. **Sin default**: sin
+     * ellas, salen de `datePicker.maskLetters` del `BrandMessagesProvider`. El
+     * orden y el separador no son props ni catálogo: salen del `locale` con
+     * `Intl`.
      */
     maskLetters?: DateMaskLetters;
     /**
-     * Mensaje cuando lo escrito no es una fecha completa y válida. Default
-     * castellano; se anuncia con `role="alert"`.
+     * Mensaje cuando lo escrito no es una fecha completa y válida. **Sin
+     * default**: sin él, sale de `datePicker.invalid` del
+     * `BrandMessagesProvider`; se anuncia con `role="alert"`.
      */
     invalidMessage?: string;
-    /** Nombre accesible del botón que abre el calendario. Default castellano. */
+    /**
+     * Nombre accesible del botón que abre el calendario. **Sin default**: sin
+     * él, sale de `datePicker.openCalendar` del `BrandMessagesProvider`.
+     */
     openCalendarLabel?: string;
     minDate?: CalendarProps['minDate'];
     maxDate?: CalendarProps['maxDate'];
@@ -43,29 +80,22 @@ export interface DatePickerProps {
     'aria-describedby'?: string;
     /** Nombre accesible cuando el control va suelto. En un campo lo nombra la etiqueta. */
     'aria-label'?: string;
-    /** Nombre accesible del panel del calendario (`role="dialog"`). */
-    calendarLabel?: string;
     /**
-     * aria-label del botón de mes anterior del calendario. Default: «Mes
-     * anterior» (castellano). Una app multiidioma debe pasarla traducida.
+     * Nombre accesible del panel del calendario (`role="dialog"`). **Sin
+     * default**: sin él, sale de `datePicker.calendar` del
+     * `BrandMessagesProvider`. En un campo lo pone la etiqueta del campo, que es
+     * contenido de la pantalla y gana como cualquier prop.
      */
+    calendarLabel?: string;
+    /** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
     previousMonthLabel?: CalendarProps['previousMonthLabel'];
-    /**
-     * aria-label del botón de mes siguiente. Default: «Mes siguiente»
-     * (castellano).
-     */
+    /** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
     nextMonthLabel?: CalendarProps['nextMonthLabel'];
-    /**
-     * aria-label del botón de retroceso **en la vista de años**. Default: «Años
-     * anteriores» (castellano).
-     */
+    /** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
     previousYearsLabel?: CalendarProps['previousYearsLabel'];
-    /**
-     * aria-label del botón de avance en la vista de años. Default: «Años
-     * siguientes» (castellano).
-     */
+    /** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
     nextYearsLabel?: CalendarProps['nextYearsLabel'];
-    /** aria-label de la rejilla de años. Default: «Elegir año» (castellano). */
+    /** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
     yearGridLabel?: CalendarProps['yearGridLabel'];
     /**
      * aria-label de la rejilla de días. Por defecto toma `calendarLabel`, que ya

package/dist/_types/molecules/DatePicker/dateMask.d.ts

@@ -1,11 +1,18 @@
 export type DatePartName = 'day' | 'month' | 'year';
-/** Letras de la máscara del marcador de posición: `dd/mm/aaaa` en castellano. */
+/**
+ * Letras de la máscara del marcador de posición, una por parte.
+ *
+ * **No hay juego por defecto, y es deliberado**: las letras se traducen
+ * (`aaaa` es «año», `yyyy` es *year*, `jjjj` es *Jahr*), así que salen del
+ * catálogo de la aplicación —`datePicker.maskLetters`— igual que cualquier
+ * otro rótulo. Lo que este módulo decide es el **orden** y el **separador**,
+ * que son formato y salen del `locale`.
+ */
 export interface DateMaskLetters {
     day: string;
     month: string;
     year: string;
 }
-export declare const SPANISH_MASK_LETTERS: DateMaskLetters;
 export interface DateMask {
     /** Orden de las partes en ese locale, p. ej. `['day', 'month', 'year']`. */
     order: DatePartName[];

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

@@ -33,29 +33,29 @@ export interface DateTimeFieldProps {
     locale?: string;
     /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
     className?: string;
-    /** Nombre accesible del panel del calendario. Default: la etiqueta del campo. */
+    /** Nombre accesible del panel del calendario. Sin él, la etiqueta del campo. */
     calendarLabel?: DatePickerProps['calendarLabel'];
-    /** Nombre accesible del botón que abre el calendario. Default castellano. */
+    /** Nombre accesible del botón que abre el calendario. Sin él, `datePicker.openCalendar`. */
     openCalendarLabel?: DatePickerProps['openCalendarLabel'];
-    /** Mensaje de fecha incompleta del campo de texto. Default castellano. */
+    /** Mensaje de fecha incompleta del campo de texto. Sin él, `datePicker.invalid`. */
     invalidMessage?: DatePickerProps['invalidMessage'];
-    /** Letras de la máscara del marcador de posición. Default castellano. */
+    /** Letras de la máscara del marcador de posición. Sin ellas, `datePicker.maskLetters`. */
     maskLetters?: DatePickerProps['maskLetters'];
-    /** aria-label del botón de mes anterior del calendario. Default castellano. */
+    /** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
     previousMonthLabel?: DatePickerProps['previousMonthLabel'];
-    /** aria-label del botón de mes siguiente. Default castellano. */
+    /** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
     nextMonthLabel?: DatePickerProps['nextMonthLabel'];
-    /** aria-label del botón de retroceso en la vista de años. Default castellano. */
+    /** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
     previousYearsLabel?: DatePickerProps['previousYearsLabel'];
-    /** aria-label del botón de avance en la vista de años. Default castellano. */
+    /** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
     nextYearsLabel?: DatePickerProps['nextYearsLabel'];
-    /** aria-label de la rejilla de años. Default castellano. */
+    /** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
     yearGridLabel?: DatePickerProps['yearGridLabel'];
-    /** aria-label de la rejilla de días. Default: `calendarLabel`. */
+    /** aria-label de la rejilla de días. Sin él, el nombre del panel. */
     gridLabel?: DatePickerProps['gridLabel'];
-    /** aria-label del desplegable de horas. Default: "Horas" (castellano). */
+    /** aria-label del desplegable de horas. Sin él, `timeSelect.hours`. */
     hoursLabel?: string;
-    /** aria-label del desplegable de minutos. Default: "Minutos" (castellano). */
+    /** aria-label del desplegable de minutos. Sin él, `timeSelect.minutes`. */
     minutesLabel?: string;
     onChange?: (date: Date | null) => void;
     /** Se llama al salir de cualquiera de los dos controles: el campo de fecha (un `<input>`) o los desplegables de hora (dos `<button>`). */

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

@@ -29,9 +29,16 @@ export interface TimeFieldProps {
     helperText?: string;
     /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
     className?: string;
-    /** aria-label del desplegable de horas. Default: "Horas" (castellano). */
+    /**
+     * aria-label del desplegable de horas. **Sin default**: sin él, el texto
+     * sale de `timeSelect.hours` del `BrandMessagesProvider`, que el
+     * `TimeSelect` de dentro lee por contexto.
+     */
     hoursLabel?: string;
-    /** aria-label del desplegable de minutos. Default: "Minutos" (castellano). */
+    /**
+     * aria-label del desplegable de minutos. **Sin default**: sin él, sale de
+     * `timeSelect.minutes` del `BrandMessagesProvider`.
+     */
     minutesLabel?: string;
     onChange?: (value: TimeValue) => void;
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;

package/dist/_types/molecules/_shared/calendarGrid.d.ts

@@ -51,10 +51,14 @@ export interface CalendarMonthNavOptions {
     /**
      * Nombre accesible del botón de retroceso. Depende de la vista: «Mes
      * anterior» sobre la rejilla de días, «Años anteriores» sobre la de años.
+     *
+     * Opcional porque sin `navigable` no se pinta ningún botón: quien la monta
+     * lee el texto de su catálogo **solo cuando hay flechas**, y un calendario
+     * estático no exige un texto que nadie va a ver.
      */
-    previousLabel: string;
+    previousLabel?: string;
     /** Nombre accesible del botón de avance, también según la vista. */
-    nextLabel: string;
+    nextLabel?: string;
     prevDisabled?: boolean;
     nextDisabled?: boolean;
     onPrev: () => void;

package/dist/calendar.js

@@ -1,121 +1,122 @@
 'use client';
 import './calendar.css';
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./_shared/calendargrid.js";
-import { useCallback as s, useEffect as c, useId as ne, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { a as t, c as n, i as r, l as i, n as a, o, r as ee, s as te, t as ne } from "./_shared/calendargrid.js";
+import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/stories/molecules/Calendar/Calendar.tsx
-var p = 12, m = 4;
-function h(e) {
-	return Math.floor(e / p) * p;
+var m = 12, h = 4;
+function g(e) {
+	return Math.floor(e / m) * m;
 }
-function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b, navigable: re = !0, disabledDates: x, minDate: S, maxDate: C, locale: w = "es-ES", previousMonthLabel: T = "Mes anterior", nextMonthLabel: ie = "Mes siguiente", previousYearsLabel: ae = "Años anteriores", nextYearsLabel: oe = "Años siguientes", yearGridLabel: se = "Elegir año", gridLabel: E, size: D = "md", className: O }) {
-	let [k, A] = u(() => y ?? v ?? (g instanceof Date ? g : /* @__PURE__ */ new Date())), j = y ?? k, M = s((e) => {
-		A(e), b?.(e);
-	}, [b]), N = /* @__PURE__ */ new Date(), ce = s((e) => S && e < S || C && e > C ? !0 : Array.isArray(x) ? x.some((t) => n(t, e)) : typeof x == "function" ? x(e) : !1, [
+function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange: y, navigable: b = !0, disabledDates: x, minDate: S, maxDate: C, locale: w = "es-ES", previousMonthLabel: ae, nextMonthLabel: oe, previousYearsLabel: T, nextYearsLabel: E, yearGridLabel: D, gridLabel: O, size: k = "md", className: A }) {
+	let j = e("calendar"), [se, ce] = d(() => v ?? ie ?? (_ instanceof Date ? _ : /* @__PURE__ */ new Date())), M = v ?? se, N = s((e) => {
+		ce(e), y?.(e);
+	}, [y]), P = /* @__PURE__ */ new Date(), le = s((e) => S && e < S || C && e > C ? !0 : Array.isArray(x) ? x.some((t) => r(t, e)) : typeof x == "function" ? x(e) : !1, [
 		x,
 		S,
 		C
-	]), P = r({
-		month: j,
-		onMonthChange: M,
-		selected: g ?? null,
+	]), F = i({
+		month: M,
+		onMonthChange: N,
+		selected: _ ?? null,
 		minDate: S,
 		maxDate: C
-	}), [F, I] = u("days"), [L, R] = u(() => h(j.getFullYear())), [z, B] = u(() => j.getFullYear()), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(null), W = s(() => {
-		let e = j.getFullYear();
-		R(h(e)), B(e), U.current = "year", I("years");
-	}, [j]), G = s(() => {
-		U.current = "title", I("days");
-	}, []), le = s((e) => {
-		M(new Date(e, j.getMonth(), 1)), G();
+	}), [I, L] = d("days"), [R, z] = d(() => g(M.getFullYear())), [B, V] = d(() => M.getFullYear()), H = u(null), U = u(/* @__PURE__ */ new Map()), W = u(null), ue = s(() => {
+		let e = M.getFullYear();
+		z(g(e)), V(e), W.current = "year", L("years");
+	}, [M]), G = s(() => {
+		W.current = "title", L("days");
+	}, []), de = s((e) => {
+		N(new Date(e, M.getMonth(), 1)), G();
 	}, [
 		G,
-		j,
-		M
+		M,
+		N
 	]);
 	c(() => {
-		if (!U.current) return;
-		let e = U.current;
-		U.current = null, e === "title" ? V.current?.focus() : H.current.get(z)?.focus();
-	}, [F, z]);
-	let ue = D === "sm" ? "xs" : D === "lg" ? "md" : "sm", de = new Intl.DateTimeFormat(w, {
+		if (!W.current) return;
+		let e = W.current;
+		W.current = null, e === "title" ? H.current?.focus() : U.current.get(B)?.focus();
+	}, [I, B]);
+	let fe = k === "sm" ? "xs" : k === "lg" ? "md" : "sm", pe = new Intl.DateTimeFormat(w, {
 		month: "long",
 		year: "numeric"
-	}).format(j), fe = new Intl.DateTimeFormat(w, { year: "numeric" }), K = (e) => fe.format(new Date(e, 0, 1)), pe = Array.from({ length: p }, (e, t) => L + t), me = `${K(L)}–${K(L + p - 1)}`, he = new Intl.DateTimeFormat(w, {
+	}).format(M), me = new Intl.DateTimeFormat(w, { year: "numeric" }), K = (e) => me.format(new Date(e, 0, 1)), he = Array.from({ length: m }, (e, t) => R + t), ge = `${K(R)}–${K(R + m - 1)}`, _e = new Intl.DateTimeFormat(w, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), ge = o(w, "narrow"), _e = te(i(j)), q = t(j, -1), J = t(j, 1), Y = S ? !e(q, S) && q < S : !1, ve = C ? !e(J, C) && J > C : !1, ye = (e) => (S ? e < S.getFullYear() : !1) || (C ? e > C.getFullYear() : !1), be = S ? L - 1 < S.getFullYear() : !1, xe = C ? L + p > C.getFullYear() : !1, X = F === "years", Z = z >= L && z <= L + p - 1 ? z : L, Se = (e) => {
-		(e < L || e > L + p - 1) && R(h(e)), U.current = "year", B(e);
-	}, Ce = (e) => {
+	}), ve = ee(w, "narrow"), ye = ne(a(M)), q = n(M, -1), J = n(M, 1), be = S ? !t(q, S) && q < S : !1, xe = C ? !t(J, C) && J > C : !1, Se = (e) => (S ? e < S.getFullYear() : !1) || (C ? e > C.getFullYear() : !1), Ce = S ? R - 1 < S.getFullYear() : !1, we = C ? R + m > C.getFullYear() : !1, Y = I === "years", X = B >= R && B <= R + m - 1 ? B : R, Te = (e) => {
+		(e < R || e > R + m - 1) && z(g(e)), W.current = "year", V(e);
+	}, Z = (e) => {
 		let t = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				t = Z - 1;
+				t = X - 1;
 				break;
 			case "ArrowRight":
-				t = Z + 1;
+				t = X + 1;
 				break;
 			case "ArrowUp":
-				t = Z - m;
+				t = X - h;
 				break;
 			case "ArrowDown":
-				t = Z + m;
+				t = X + h;
 				break;
 			case "Home":
-				t = L;
+				t = R;
 				break;
 			case "End":
-				t = L + p - 1;
+				t = R + m - 1;
 				break;
 			case "PageUp":
-				t = Z - p;
+				t = X - m;
 				break;
 			case "PageDown":
-				t = Z + p;
+				t = X + m;
 				break;
 			case "Escape":
 				e.preventDefault(), G();
 				return;
 			default: return;
 		}
-		e.preventDefault(), Se(t);
-	}, Q = ne(), $ = X ? `${Q}-calendar-title-${L}` : `${Q}-calendar-title-${j.getFullYear()}-${j.getMonth()}`;
-	return /* @__PURE__ */ f("div", {
+		e.preventDefault(), Te(t);
+	}, Q = l(), $ = Y ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${M.getFullYear()}-${M.getMonth()}`;
+	return /* @__PURE__ */ p("div", {
 		className: [
 			"calendar",
-			`calendar--${D}`,
-			O
+			`calendar--${k}`,
+			A
 		].filter(Boolean).join(" "),
-		children: [a({
+		children: [o({
 			block: "calendar",
-			title: X ? me : de,
+			title: Y ? ge : pe,
 			titleId: $,
-			navigable: re,
-			previousLabel: X ? ae : T,
-			nextLabel: X ? oe : ie,
-			prevDisabled: X ? be : Y,
-			nextDisabled: X ? xe : ve,
-			onPrev: X ? () => R(L - p) : () => M(q),
-			onNext: X ? () => R(L + p) : () => M(J),
-			chevronSize: ue,
-			onTitleClick: X ? G : W,
-			titleExpanded: X,
-			titleRef: V
-		}), X ? /* @__PURE__ */ d("div", {
+			navigable: b,
+			previousLabel: b ? Y ? j("previousYears", T) : j("previousMonth", ae) : void 0,
+			nextLabel: b ? Y ? j("nextYears", E) : j("nextMonth", oe) : void 0,
+			prevDisabled: Y ? Ce : be,
+			nextDisabled: Y ? we : xe,
+			onPrev: Y ? () => z(R - m) : () => N(q),
+			onNext: Y ? () => z(R + m) : () => N(J),
+			chevronSize: fe,
+			onTitleClick: Y ? G : ue,
+			titleExpanded: Y,
+			titleRef: H
+		}), Y ? /* @__PURE__ */ f("div", {
 			className: "calendar__years",
 			role: "grid",
-			"aria-label": se,
-			onKeyDown: Ce,
-			children: Array.from({ length: p / m }, (e, t) => /* @__PURE__ */ d("div", {
+			"aria-label": j("yearGrid", D),
+			onKeyDown: Z,
+			children: Array.from({ length: m / h }, (e, t) => /* @__PURE__ */ f("div", {
 				role: "row",
 				className: "calendar__row",
-				children: pe.slice(t * m, t * m + m).map((e) => {
-					let t = ye(e), n = e === N.getFullYear(), r = g instanceof Date ? g.getFullYear() === e : !1;
-					return /* @__PURE__ */ d("button", {
+				children: he.slice(t * h, t * h + h).map((e) => {
+					let t = Se(e), n = e === P.getFullYear(), r = _ instanceof Date ? _.getFullYear() === e : !1;
+					return /* @__PURE__ */ f("button", {
 						ref: (t) => {
-							t ? H.current.set(e, t) : H.current.delete(e);
+							t ? U.current.set(e, t) : U.current.delete(e);
 						},
 						type: "button",
 						role: "gridcell",
@@ -128,45 +129,45 @@ function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b,
 						"aria-selected": r,
 						"aria-disabled": t ? "true" : void 0,
 						"aria-current": n ? "date" : void 0,
-						tabIndex: e === Z ? 0 : -1,
-						onFocus: () => B(e),
-						onClick: t ? void 0 : () => le(e),
+						tabIndex: e === X ? 0 : -1,
+						onFocus: () => V(e),
+						onClick: t ? void 0 : () => de(e),
 						children: K(e)
 					}, e);
 				})
 			}, t))
-		}) : /* @__PURE__ */ f("div", {
+		}) : /* @__PURE__ */ p("div", {
 			className: "calendar__grid",
 			role: "grid",
-			"aria-label": E,
-			"aria-labelledby": E ? void 0 : $,
-			onKeyDown: P.onKeyDown,
-			children: [ee({
+			"aria-label": O,
+			"aria-labelledby": O ? void 0 : $,
+			onKeyDown: F.onKeyDown,
+			children: [te({
 				block: "calendar",
-				weekdays: ge
-			}), _e.map((e, t) => /* @__PURE__ */ d("div", {
+				weekdays: ve
+			}), ye.map((e, t) => /* @__PURE__ */ f("div", {
 				role: "row",
 				className: "calendar__row",
 				children: e.map(({ date: e, outside: t }) => {
-					let r = ce(e), i = n(e, N), a = g instanceof Date ? n(e, g) : !1, o = [
+					let n = le(e), i = r(e, P), a = _ instanceof Date ? r(e, _) : !1, o = [
 						"calendar__day",
 						t && "calendar__day--outside",
 						i && "calendar__day--today",
 						a && "calendar__day--selected",
-						r && "calendar__day--disabled"
+						n && "calendar__day--disabled"
 					].filter(Boolean).join(" ");
-					return /* @__PURE__ */ d("button", {
-						ref: P.cellRef(e),
+					return /* @__PURE__ */ f("button", {
+						ref: F.cellRef(e),
 						type: "button",
 						role: "gridcell",
 						className: o,
-						"aria-label": he.format(e),
+						"aria-label": _e.format(e),
 						"aria-selected": a,
-						"aria-disabled": r ? "true" : void 0,
+						"aria-disabled": n ? "true" : void 0,
 						"aria-current": i ? "date" : void 0,
-						tabIndex: P.isTabbable(e) ? 0 : -1,
-						onFocus: () => P.onCellFocus(e),
-						onClick: r ? void 0 : () => _?.(e),
+						tabIndex: F.isTabbable(e) ? 0 : -1,
+						onFocus: () => F.onCellFocus(e),
+						onClick: n ? void 0 : () => re?.(e),
 						children: e.getDate()
 					}, e.toISOString());
 				})
@@ -175,4 +176,4 @@ function g({ value: g, onChange: _, defaultMonth: v, month: y, onMonthChange: b,
 	});
 }
 //#endregion
-export { g as Calendar };
+export { _ as Calendar };

package/dist/time-select.js

@@ -1,84 +1,85 @@
 'use client';
 import './time-select.css';
-import { Select as e } from "./select.js";
-import { forwardRef as t, useMemo as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Select as t } from "./select.js";
+import { forwardRef as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/atoms/TimeSelect/TimeSelect.tsx
-function a(e) {
+function o(e) {
 	return String(e).padStart(2, "0");
 }
-var o = t(function({ value: t, onChange: o, step: s = 5, size: c = "md", disabled: l, readOnly: u, error: d, id: f, name: p, required: m, "aria-labelledby": h, "aria-describedby": g, onBlur: _, className: v, hoursLabel: y = "Horas", minutesLabel: b = "Minutos", hoursPlaceholder: x = "HH", minutesPlaceholder: S = "MM" }, C) {
-	let w = n(() => Array.from({ length: 24 }, (e, t) => ({
+var s = n(function({ value: n, onChange: s, step: c = 5, size: l = "md", disabled: u, readOnly: d, error: f, id: p, name: m, required: h, "aria-labelledby": g, "aria-describedby": _, onBlur: v, className: y, hoursLabel: b, minutesLabel: x, hoursPlaceholder: S, minutesPlaceholder: C }, w) {
+	let T = e("timeSelect"), E = r(() => Array.from({ length: 24 }, (e, t) => ({
 		value: String(t),
-		label: a(t)
-	})), []), T = n(() => {
+		label: o(t)
+	})), []), D = r(() => {
 		let e = [];
-		for (let t = 0; t < 60; t += s) e.push({
+		for (let t = 0; t < 60; t += c) e.push({
 			value: String(t),
-			label: a(t)
+			label: o(t)
 		});
 		return e;
-	}, [s]), E = (e) => {
-		let n = parseInt(e, 10), r = t?.m ?? 0;
-		o?.({
-			h: n,
+	}, [c]), O = (e) => {
+		let t = parseInt(e, 10), r = n?.m ?? 0;
+		s?.({
+			h: t,
 			m: r
 		});
-	}, D = (e) => {
-		let n = t?.h ?? 0;
-		o?.({
-			h: n,
+	}, k = (e) => {
+		let t = n?.h ?? 0;
+		s?.({
+			h: t,
 			m: parseInt(e, 10)
 		});
-	}, O = ["time-select", v ?? ""].filter(Boolean).join(" "), k = t == null ? "" : String(t.h), A = t == null ? "" : String(t.m);
-	return /* @__PURE__ */ i("div", {
-		className: O,
+	}, A = ["time-select", y ?? ""].filter(Boolean).join(" "), j = n == null ? "" : String(n.h), M = n == null ? "" : String(n.m);
+	return /* @__PURE__ */ a("div", {
+		className: A,
 		role: "group",
-		"aria-labelledby": h,
-		"aria-describedby": g,
-		"aria-invalid": d || void 0,
-		"aria-required": m || void 0,
+		"aria-labelledby": g,
+		"aria-describedby": _,
+		"aria-invalid": f || void 0,
+		"aria-required": h || void 0,
 		children: [
-			/* @__PURE__ */ r(e, {
-				ref: C,
-				id: f,
-				options: w,
-				value: k,
-				placeholder: x,
-				size: c,
-				disabled: l,
-				readOnly: u,
-				required: m,
-				"aria-label": y,
-				"aria-invalid": d,
-				onValueChange: E,
-				onBlur: _
+			/* @__PURE__ */ i(t, {
+				ref: w,
+				id: p,
+				options: E,
+				value: j,
+				placeholder: j === "" ? T("maskHours", S) : void 0,
+				size: l,
+				disabled: u,
+				readOnly: d,
+				required: h,
+				"aria-label": T("hours", b),
+				"aria-invalid": f,
+				onValueChange: O,
+				onBlur: v
 			}),
-			/* @__PURE__ */ r("span", {
+			/* @__PURE__ */ i("span", {
 				className: "time-select__sep",
 				"aria-hidden": "true",
 				children: ":"
 			}),
-			/* @__PURE__ */ r(e, {
-				options: T,
-				value: A,
-				placeholder: S,
-				size: c,
-				disabled: l,
-				readOnly: u,
-				required: m,
-				"aria-label": b,
-				"aria-invalid": d,
-				onValueChange: D,
-				onBlur: _
+			/* @__PURE__ */ i(t, {
+				options: D,
+				value: M,
+				placeholder: M === "" ? T("maskMinutes", C) : void 0,
+				size: l,
+				disabled: u,
+				readOnly: d,
+				required: h,
+				"aria-label": T("minutes", x),
+				"aria-invalid": f,
+				onValueChange: k,
+				onBlur: v
 			}),
-			p && /* @__PURE__ */ r("input", {
+			m && /* @__PURE__ */ i("input", {
 				type: "hidden",
-				name: p,
-				value: t == null ? "" : `${a(t.h)}:${a(t.m)}`
+				name: m,
+				value: n == null ? "" : `${o(n.h)}:${o(n.m)}`
 			})
 		]
 	});
 });
 //#endregion
-export { o as TimeSelect };
+export { s as TimeSelect };

package/package.json

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