@studiolxd/brand 49.8.0 → 49.9.0

package/CHANGELOG.md

@@ -7,6 +7,95 @@ 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.9.0] — 2026-09-18
+
+> **Minor.** Tres huecos del sistema: la segunda línea del ítem de menú admite un nodo, el
+> planificador gana la vista de semana, y la tarjeta-enlace admite selección y acciones sobre
+> su capa.
+
+### La segunda línea del ítem de menú admite un nodo
+
+`description` —la segunda línea de un ítem `button` o `link`— era `string`: el selector de
+cuentas podía poner el correo debajo del nombre, pero no decir cuál es la **organización
+principal** sin meter esa palabra dentro del texto. Ahora es `ReactNode`, así que la línea lleva
+el correo y, al lado, el `Tag` del papel de esa cuenta.
+
+Sigue siendo una sola línea —se recorta con puntos suspensivos igual que antes—: dos renglones
+ahí desbaratan la altura del ítem.
+
+### El planificador gana la vista de semana
+
+`CalendarPlanner` solo sabía pintar el mes. `view="week"` cambia la parrilla por **siete columnas
+con el día completo**: el nombre y el número del día en la cabecera de cada columna y, debajo, los
+eventos de ese día —con la hora delante de los que la tengan y los de día entero arriba—.
+
+- **La lista de eventos es la misma.** `events` no cambia; la hora sale de la propia fecha (un
+  evento a las 00:00 es de día entero) y `allDay` lo dice de forma explícita cuando la fecha no
+  basta.
+- **La columna no trunca.** No hay «+N más» en la semana: `maxItemsPerDay` es cosa del mes, donde
+  la celda mide una fila de siete. Aquí la columna tiene alto de sobra y esconder eventos taparía
+  justo lo que se viene a leer.
+- **Las flechas pasan a ser de semana** y `onWeekChange` avisa con el **lunes** de la nueva.
+- **`viewSwitcher`** pinta el conmutador mes/semana en la cabecera (un `ToggleGroup` exclusivo).
+  Va **apagado** por defecto: un planificador ya montado no gana botones por actualizar el
+  paquete. La vista puede ir controlada (`view` + `onViewChange`) o dejarse al componente
+  (`defaultView`).
+- **Cambiar de vista no teletransporta**: se mueve lo justo para que las dos vistas se toquen. Si
+  la semana guardada no pisa el mes visible, al ir a la semana se abre la del día 1; al volver al
+  mes, si el mes visible no pisa la semana, se abre el mes de su lunes. Una semana a caballo de
+  dos meses pisa los dos, así que ir y volver deja al usuario donde estaba.
+
+El teclado de la semana vive en `_shared/calendarGrid` junto al del mes: la misma rejilla, con una
+sola fila. Los cinco textos nuevos (`previousWeekLabel`, `nextWeekLabel`, `monthViewLabel`,
+`weekViewLabel`, `viewSwitcherLabel`) van en **props con default castellano** y no en el catálogo:
+una clave obligatoria más en `CalendarPlannerMessages` dejaría sin compilar a toda aplicación que
+ya lo tiene montado, y esto es un minor. Pasarán al catálogo en el próximo major.
+
+Tokens nuevos: `calendar-planner.week-cell-min-height` (y sus `sm-`/`lg-`), `weekday-gap`,
+`event-time-font-size`, `event-time-color` y su par oscuro.
+
+### La tarjeta-enlace admite selección y acciones sobre su capa
+
+`Card linkOverlay` pinta la capa del enlace del título (`::after`) por encima de todo el bloque,
+así que una casilla de selección dentro del `CardHeader` **dejaba de pulsarse** — y de ahí venía
+el apaño del consumidor: envolver la tarjeta en un `<Link>` con un botón dentro, que no es HTML
+válido y deja un enlace cuyo nombre se traga la tarjeta entera.
+
+Llega **`CardSelection`**, la ranura de la casilla (la primera de la cabecera, que pasa a ser una
+rejilla de tres columnas: selección, texto y acción), y las zonas interactivas se **declaran**:
+
+| Zona | Cómo se declara |
+| --- | --- |
+| `CardAction` | sola: es una ranura interactiva por definición |
+| `CardSelection` | sola: ídem |
+| Cualquier otra subparte | `interactive` en ella (`<CardFooter interactive>`) |
+
+Lo declarado sube por encima de la capa (`position: relative` y un apilado interno de 1, que solo
+compite consigo mismo). Lo que es solo texto se queda **debajo a propósito**: ahí la capa es lo
+que hace que pulsar en cualquier punto abra el detalle. El teclado no depende de la capa: las tres
+paradas —casilla, enlace del título y menú— siguen en el orden en que se leen.
+
+`CardSelection` corta la propagación como `CardAction` pero **no** la acción por defecto, ni
+colgando de un enlace: esa acción es justo la que marca la casilla. Lo que impide navegar es la
+capa.
+
+## [49.8.1] — 2026-09-18
+
+> **Patch.** `AppShell` ya no revienta sin `ResizeObserver`.
+
+### El armazón mide la barra de sistema solo si hay `ResizeObserver`
+
+Desde 49.8.0, `AppShell` medía la ranura `banner` con `new ResizeObserver(...)` en el
+callback ref de montaje. En Vitest + jsdom sin polyfill (o en cualquier entorno que no lo
+implemente) eso caía con `ReferenceError: ResizeObserver is not defined` — lo sufrió
+`@slxd/app-shell` de la suite, que lo tapó con un polyfill en su propio setup. Un componente
+del sistema tiene que ser inofensivo sin DOM real.
+
+`AppShell` guarda ahora la creación del observer tras `typeof ResizeObserver === 'undefined'`:
+sin él, mide una vez con `getBoundingClientRect` y no observa (la barra queda con el
+comportamiento previo, sin reobservar redimensionados). `useIsDesktop` aplica la misma guarda
+sobre `window.matchMedia`, la otra API de navegador que el armazón usa al montar.
+
 ## [49.8.0] — 2026-09-18
 
 > **Minor.** Lo que cae dentro de un `Banner` lee con la tinta del relleno en todas las

package/dist/_shared/calendargrid.js

@@ -37,11 +37,29 @@ function d(e) {
 	return a;
 }
 function f(e) {
+	let t = (e.getDay() + 6) % 7;
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() - t);
+}
+function p(e, t) {
+	let n = f(e);
+	return new Date(n.getFullYear(), n.getMonth(), n.getDate() + t * 7);
+}
+function m(e, t) {
+	let n = f(e);
+	return Array.from({ length: 7 }, (e, r) => {
+		let i = new Date(n.getFullYear(), n.getMonth(), n.getDate() + r);
+		return {
+			date: i,
+			outside: t ? !l(i, t) : !1
+		};
+	});
+}
+function h(e) {
 	let t = [];
 	for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
 	return t;
 }
-function p(e, t = "narrow") {
+function g(e, t = "narrow") {
 	let n = new Intl.DateTimeFormat(e, { weekday: t }), r = new Intl.DateTimeFormat(e, { weekday: "long" });
 	return Array.from({ length: 7 }, (e, t) => {
 		let i = new Date(2025, 0, 6 + t);
@@ -51,7 +69,7 @@ function p(e, t = "narrow") {
 		};
 	});
 }
-function m({ block: e, rowModifier: t, weekdays: n }) {
+function _({ block: e, rowModifier: t, weekdays: n }) {
 	return /* @__PURE__ */ o("div", {
 		role: "row",
 		className: [`${e}__row`, t && `${e}__row--${t}`].filter(Boolean).join(" "),
@@ -66,7 +84,7 @@ function m({ block: e, rowModifier: t, weekdays: n }) {
 		}, n))
 	});
 }
-function h({ block: t, title: n, titleId: r, navigable: i = !0, previousLabel: a, nextLabel: c, prevDisabled: l = !1, nextDisabled: u = !1, onPrev: d, onNext: f, chevronSize: p, onTitleClick: m, titleExpanded: h, titleRef: g, children: _ }) {
+function v({ block: t, title: n, titleId: r, navigable: i = !0, previousLabel: a, nextLabel: c, prevDisabled: l = !1, nextDisabled: u = !1, onPrev: d, onNext: f, chevronSize: p, onTitleClick: m, titleExpanded: h, titleRef: g, children: _ }) {
 	return /* @__PURE__ */ s("div", {
 		className: `${t}__header`,
 		children: [
@@ -110,21 +128,21 @@ function h({ block: t, title: n, titleId: r, navigable: i = !0, previousLabel: a
 		]
 	});
 }
-function g(e, t, n) {
+function y(e, t, n) {
 	return t && e < t ? t : n && e > n ? n : e;
 }
-function _(e, t) {
+function b(e, t) {
 	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
 }
-function v(e, t) {
+function x(e, t) {
 	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
 	return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
 }
-function y(e) {
+function S(e) {
 	return `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`;
 }
-function b({ month: e, onMonthChange: o, selected: s, onActivate: u, minDate: d, maxDate: f }) {
-	let [p, m] = a(() => s ?? /* @__PURE__ */ new Date()), h = i(/* @__PURE__ */ new Map()), b = i(!1), x = r(() => {
+function C({ month: e, onMonthChange: o, selected: s, onActivate: u, minDate: d, maxDate: f }) {
+	let [p, m] = a(() => s ?? /* @__PURE__ */ new Date()), h = i(/* @__PURE__ */ new Map()), g = i(!1), _ = r(() => {
 		if (l(p, e)) return p;
 		if (s && l(s, e)) return s;
 		let t = /* @__PURE__ */ new Date();
@@ -135,42 +153,42 @@ function b({ month: e, onMonthChange: o, selected: s, onActivate: u, minDate: d,
 		s
 	]);
 	n(() => {
-		b.current && (b.current = !1, h.current.get(y(x))?.focus());
-	}, [x]);
-	let S = t((t) => {
-		let n = g(t, d, f);
-		b.current = !0, m(n), l(n, e) || o(new Date(n.getFullYear(), n.getMonth(), 1));
+		g.current && (g.current = !1, h.current.get(S(_))?.focus());
+	}, [_]);
+	let v = t((t) => {
+		let n = y(t, d, f);
+		g.current = !0, m(n), l(n, e) || o(new Date(n.getFullYear(), n.getMonth(), 1));
 	}, [
 		f,
 		d,
 		e,
 		o
 	]), C = t((e) => {
-		let t = x, n = null;
+		let t = _, n = null;
 		switch (e.key) {
 			case "ArrowLeft":
-				n = _(t, -1);
+				n = b(t, -1);
 				break;
 			case "ArrowRight":
-				n = _(t, 1);
+				n = b(t, 1);
 				break;
 			case "ArrowUp":
-				n = _(t, -7);
+				n = b(t, -7);
 				break;
 			case "ArrowDown":
-				n = _(t, 7);
+				n = b(t, 7);
 				break;
 			case "Home":
-				n = _(t, -((t.getDay() + 6) % 7));
+				n = b(t, -((t.getDay() + 6) % 7));
 				break;
 			case "End":
-				n = _(t, 6 - (t.getDay() + 6) % 7);
+				n = b(t, 6 - (t.getDay() + 6) % 7);
 				break;
 			case "PageUp":
-				n = v(t, e.shiftKey ? -12 : -1);
+				n = x(t, e.shiftKey ? -12 : -1);
 				break;
 			case "PageDown":
-				n = v(t, e.shiftKey ? 12 : 1);
+				n = x(t, e.shiftKey ? 12 : 1);
 				break;
 			case "Enter":
 			case " ":
@@ -178,22 +196,85 @@ function b({ month: e, onMonthChange: o, selected: s, onActivate: u, minDate: d,
 				return;
 			default: return;
 		}
-		e.preventDefault(), S(n);
+		e.preventDefault(), v(n);
 	}, [
-		x,
-		S,
+		_,
+		v,
 		u
 	]), w = t((e) => (t) => {
-		let n = y(e);
+		let n = S(e);
 		t ? h.current.set(n, t) : h.current.delete(n);
 	}, []);
 	return {
-		activeDate: x,
-		isTabbable: t((e) => c(e, x), [x]),
+		activeDate: _,
+		isTabbable: t((e) => c(e, _), [_]),
 		cellRef: w,
 		onKeyDown: C,
 		onCellFocus: t((e) => m(e), [])
 	};
 }
+function w({ weekStart: e, onWeekChange: o, onActivate: s, minDate: l, maxDate: u }) {
+	let [d, p] = a(() => /* @__PURE__ */ new Date()), m = i(/* @__PURE__ */ new Map()), h = i(!1), g = r(() => f(e), [e]), _ = r(() => {
+		if (c(f(d), g)) return d;
+		let e = /* @__PURE__ */ new Date();
+		return c(f(e), g) ? e : g;
+	}, [d, g]);
+	n(() => {
+		h.current && (h.current = !1, m.current.get(S(_))?.focus());
+	}, [_]);
+	let v = t((e) => {
+		let t = y(e, l, u);
+		h.current = !0, p(t), c(f(t), g) || o(f(t));
+	}, [
+		u,
+		l,
+		o,
+		g
+	]), x = t((e) => {
+		let t = _, n = null;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowUp":
+				n = b(t, -1);
+				break;
+			case "ArrowRight":
+			case "ArrowDown":
+				n = b(t, 1);
+				break;
+			case "Home":
+				n = f(t);
+				break;
+			case "End":
+				n = b(f(t), 6);
+				break;
+			case "PageUp":
+				n = b(t, -7);
+				break;
+			case "PageDown":
+				n = b(t, 7);
+				break;
+			case "Enter":
+			case " ":
+				s && (e.preventDefault(), s(t));
+				return;
+			default: return;
+		}
+		e.preventDefault(), v(n);
+	}, [
+		_,
+		v,
+		s
+	]), C = t((e) => (t) => {
+		let n = S(e);
+		t ? m.current.set(n, t) : m.current.delete(n);
+	}, []);
+	return {
+		activeDate: _,
+		isTabbable: t((e) => c(e, _), [_]),
+		cellRef: C,
+		onKeyDown: x,
+		onCellFocus: t((e) => p(e), [])
+	};
+}
 //#endregion
-export { l as a, u as c, c as i, b as l, d as n, h as o, p as r, m as s, f as t };
+export { c as a, _ as c, f as d, C as f, g as i, u as l, d as n, l as o, w as p, m as r, v as s, h as t, p as u };

package/dist/_shared/tokens.js

@@ -2191,6 +2191,12 @@ var e = {
 	"--calendar-planner-more-focus-ring-color": "#111e30",
 	"--calendar-planner-transition-duration": "150ms",
 	"--calendar-planner-transition-easing": "ease",
+	"--calendar-planner-week-cell-min-height": "12rem",
+	"--calendar-planner-sm-week-cell-min-height": "8rem",
+	"--calendar-planner-lg-week-cell-min-height": "16rem",
+	"--calendar-planner-weekday-gap": "0.25rem",
+	"--calendar-planner-event-time-font-size": "0.875rem",
+	"--calendar-planner-event-time-color": "#4a4a4a",
 	"--calendar-planner-sm-cell-min-height": "4rem",
 	"--calendar-planner-lg-cell-min-height": "9rem",
 	"--calendar-planner-hover-line-width": "1px",

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

@@ -16,7 +16,20 @@ export interface PlannerEvent {
     date: Date;
     label: string;
     variant?: TagVariant;
+    /**
+     * El evento dura todo el día: la vista de semana lo pinta **sin hora**, el
+     * primero de la columna. Sin ella se deriva de la propia fecha —un evento a
+     * las 00:00 es de día entero—, que es lo que hace el mes desde siempre y lo
+     * que permite que la misma lista de eventos sirva para las dos vistas.
+     */
+    allDay?: boolean;
 }
+/**
+ * Las dos caras del planificador: el `month` de siempre —la parrilla del mes
+ * entera— y `week`, siete columnas con el día completo, donde los eventos con
+ * hora se leen en orden.
+ */
+export type CalendarPlannerView = 'month' | 'week';
 export interface CalendarPlannerProps {
     /** Eventos a mostrar en el planificador */
     events?: PlannerEvent[];
@@ -75,8 +88,48 @@ export interface CalendarPlannerProps {
      * `BrandMessagesProvider`. Solo se lee cuando alguna celda desborda.
      */
     moreLabel?: (count: number) => string;
+    /**
+     * Vista visible (modo controlado): la parrilla del mes o la semana.
+     * Default: `'month'` — el planificador de siempre.
+     */
+    view?: CalendarPlannerView;
+    /** Vista inicial en modo no controlado. Default: `'month'` */
+    defaultView?: CalendarPlannerView;
+    /** Callback al cambiar de vista, tanto desde el conmutador como al navegar. */
+    onViewChange?: (view: CalendarPlannerView) => void;
+    /**
+     * Pinta el conmutador mes/semana en la cabecera. Default: `false` — un
+     * planificador que ya está montado no gana botones por actualizar el
+     * paquete; quien quiera las dos vistas lo pide.
+     */
+    viewSwitcher?: boolean;
+    /**
+     * Semana visible (modo controlado). Vale cualquier día de ella: el
+     * componente se queda con su lunes.
+     */
+    week?: Date;
+    /** Semana inicial en modo no controlado. Default: la del mes visible, o hoy. */
+    defaultWeek?: Date;
+    /** Callback al cambiar de semana. Recibe el **lunes** de la nueva. */
+    onWeekChange?: (weekStart: Date) => void;
+    /**
+     * aria-label del botón de semana anterior. Default: `'Semana anterior'`
+     * (castellano). No sale del catálogo como las flechas de mes: añadirle una
+     * clave obligatoria a `CalendarPlannerMessages` rompería a todas las
+     * aplicaciones que ya lo tienen montado, así que estos cuatro textos entran
+     * como props y pasarán al catálogo en el próximo major.
+     */
+    previousWeekLabel?: string;
+    /** aria-label del botón de semana siguiente. Default: `'Semana siguiente'`. */
+    nextWeekLabel?: string;
+    /** Rótulo del botón de vista de mes del conmutador. Default: `'Mes'`. */
+    monthViewLabel?: string;
+    /** Rótulo del botón de vista de semana del conmutador. Default: `'Semana'`. */
+    weekViewLabel?: string;
+    /** Nombre accesible del conmutador de vista. Default: `'Vista del calendario'`. */
+    viewSwitcherLabel?: string;
     /** Tamaño del componente. Default: 'md' */
     size?: 'sm' | 'md' | 'lg';
     className?: string;
 }
-export declare function CalendarPlanner({ events, renderDay, maxItemsPerDay, onMoreClick, showMoreDialog, onDayClick, month: monthProp, defaultMonth, onMonthChange, navigable, locale, previousMonthLabel, nextMonthLabel, gridLabel, moreLabel, size, className, }: CalendarPlannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarPlanner({ events, renderDay, maxItemsPerDay, onMoreClick, showMoreDialog, onDayClick, month: monthProp, defaultMonth, onMonthChange, view: viewProp, defaultView, onViewChange, viewSwitcher, week: weekProp, defaultWeek, onWeekChange, navigable, locale, previousMonthLabel, nextMonthLabel, previousWeekLabel, nextWeekLabel, monthViewLabel, weekViewLabel, viewSwitcherLabel, gridLabel, moreLabel, size, className, }: CalendarPlannerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -115,9 +115,24 @@ export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
  * (`data-*`, `aria-*`, `id`…) se reenvía al `<div>`.
  */
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
-export type CardPartProps = React.ComponentPropsWithoutRef<'div'>;
+export interface CardPartProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Declara la subparte como **zona interactiva** de una tarjeta `linkOverlay`:
+     * sube por encima de la capa del enlace (`position: relative` + un apilado
+     * interno de 1) para que lo que lleve dentro se pueda pulsar. Sin ella, la
+     * capa del título cubre el bloque entero y se queda con la pulsación — que
+     * es lo que se quiere en todo lo que es solo texto.
+     *
+     * No hace falta en `CardAction` ni en `CardSelection`, que ya son ranuras
+     * interactivas por definición y suben solas. Fuera de `linkOverlay` no hace
+     * nada: no hay capa a la que ganar.
+     *
+     * @default false
+     */
+    interactive?: boolean;
+}
 /** Fila superior: el bloque de título a un lado y la acción al otro. */
-export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<CardPartProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface CardTitleProps extends Omit<React.ComponentPropsWithoutRef<'h3'>, 'children'> {
     /**
      * Nivel semántico del encabezado en el esquema del documento. Default: `3`
@@ -185,8 +200,40 @@ export interface CardActionProps extends CardPartProps {
  * sus eventos de la tarjeta-enlace que la contiene: ver `isolate`.
  */
 export declare const CardAction: import("react").ForwardRefExoticComponent<CardActionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardSelectionProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Detiene la propagación del clic: marcar la casilla marca la casilla y no
+     * llega al manejador que la tarjeta o la fila tengan puesto más arriba.
+     *
+     * A diferencia de `CardAction`, **no cancela la acción por defecto** aunque
+     * la ranura cuelgue de un enlace: la acción por defecto es justo lo que
+     * marca la casilla, así que cancelarla la dejaría sin marcar. Lo que impide
+     * que se navegue es la capa —dentro de `linkOverlay` la ranura queda por
+     * encima de ella y el enlace ni se entera—; una tarjeta envuelta a mano en un
+     * `<Link>` con la casilla dentro no tiene arreglo aquí, porque no lo tiene:
+     * es un control dentro de un enlace, y se escribe con `linkOverlay`.
+     *
+     * @default true
+     */
+    isolate?: boolean;
+}
+/**
+ * Ranura de **selección**: la casilla (o el radio) con que se elige la tarjeta
+ * dentro de una lista. Va al principio de la cabecera, antes del título, que es
+ * donde se busca al repasar una columna de tarjetas.
+ *
+ * Es la pieza que faltaba para la tarjeta que **navega y se selecciona**: en
+ * una `Card linkOverlay`, la capa del enlace del título cubre el bloque entero
+ * y se traga la pulsación de cualquier control que no la gane; esta ranura sube
+ * por encima de ella (`position: relative` + apilado interno de 1) y conserva su
+ * propio foco de teclado, en su sitio del orden de tabulación.
+ *
+ * No se confunde con `selectable`, que es lo contrario: ahí la tarjeta **entera**
+ * es la opción y nada más dentro puede ser interactivo.
+ */
+export declare const CardSelection: import("react").ForwardRefExoticComponent<CardSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
 /** Cuerpo de la tarjeta. */
-export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardContent: import("react").ForwardRefExoticComponent<CardPartProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface CardFooterProps extends CardPartProps {
     /**
      * `row` (por defecto): las acciones en fila **en escritorio**; por debajo de

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

@@ -13,6 +13,17 @@ export declare function shiftMonth(month: Date, delta: number): Date;
  * semana. Solo se completan las semanas que el mes realmente ocupa.
  */
 export declare function getCalendarDays(month: Date): CalendarDay[];
+/** Lunes de la semana a la que pertenece `date`. */
+export declare function startOfWeek(date: Date): Date;
+/** Lunes de la semana desplazada `delta` semanas respecto a la de `date`. */
+export declare function shiftWeek(date: Date, delta: number): Date;
+/**
+ * Los siete días de la semana de `date`, de lunes a domingo. `outside` sale de
+ * comparar con `month` cuando se pasa —la vista de semana atraviesa el cambio
+ * de mes—; sin él, ningún día es de fuera: la semana es la unidad y no cuelga
+ * de ningún mes.
+ */
+export declare function getWeekDays(date: Date, month?: Date): CalendarDay[];
 /** Agrupa días en semanas de 7. */
 export declare function chunkWeeks(days: CalendarDay[]): CalendarDay[][];
 /**
@@ -116,3 +127,24 @@ export interface CalendarGridNavigation {
  * Mayús de año.
  */
 export declare function useCalendarGridNavigation({ month, onMonthChange, selected, onActivate, minDate, maxDate, }: UseCalendarGridNavigationOptions): CalendarGridNavigation;
+export interface UseCalendarWeekNavigationOptions {
+    /** Lunes de la semana visible */
+    weekStart: Date;
+    /** Se llama cuando el teclado saca el foco fuera de la semana visible */
+    onWeekChange: (weekStart: Date) => void;
+    /** Activación de la columna enfocada con Enter/Espacio */
+    onActivate?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+/**
+ * El mismo roving tabindex del mes sobre las siete columnas de la semana: una
+ * sola parada de tabulador, flechas para moverse de día —y la semana cambia
+ * sola al salir por cualquiera de los dos extremos—, Inicio/Fin para el lunes
+ * y el domingo, RePág/AvPág para la semana anterior y la siguiente.
+ *
+ * Las flechas vertical y horizontal hacen lo mismo aquí: la semana es **una**
+ * fila de celdas, así que arriba y abajo no llevan a ninguna otra parte y se
+ * quedan recorriendo los días, como ↑/↓ en una lista.
+ */
+export declare function useCalendarWeekNavigation({ weekStart, onWeekChange, onActivate, minDate, maxDate, }: UseCalendarWeekNavigationOptions): CalendarGridNavigation;

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

@@ -7,8 +7,13 @@ export type MenuButtonItem = {
      * una acción. Con ella el ítem se pinta a dos líneas —`label` arriba,
      * `description` debajo— y el icono se alinea al bloque entero. Sin ella, el
      * ítem se pinta a una línea, exactamente igual que siempre.
+     *
+     * Admite un **nodo**, no solo texto: la línea de una cuenta lleva a menudo
+     * el correo y, al lado, el papel de esa cuenta (`<Tag>Principal</Tag>`).
+     * Lo que se pase se recorta igual con puntos suspensivos, así que va en una
+     * sola línea: dos renglones ahí desbaratan la altura del ítem.
      */
-    description?: string;
+    description?: ReactNode;
     icon?: ReactNode;
     onClick: () => void;
     disabled?: boolean;
@@ -23,8 +28,8 @@ export type MenuButtonItem = {
 export type MenuLinkItem = {
     type: 'link';
     label: string;
-    /** Segunda línea del ítem, más tenue. Igual que en el ítem `button`. */
-    description?: string;
+    /** Segunda línea del ítem, más tenue. Igual que en el ítem `button`: admite un nodo. */
+    description?: ReactNode;
     icon?: ReactNode;
     href: string;
     disabled?: boolean;

package/dist/app-shell.js

@@ -10,8 +10,9 @@ import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/sections/AppShell/AppShell.tsx
 var f = "(min-width: 1024px)";
 function p() {
-	let [e, t] = l(() => typeof window > "u" ? !0 : window.matchMedia(f).matches);
+	let [e, t] = l(() => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia(f).matches);
 	return s(() => {
+		if (typeof window.matchMedia != "function") return;
 		let e = window.matchMedia(f), n = () => t(e.matches);
 		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, []), e;
@@ -52,7 +53,7 @@ function m({ banner: i, header: f, sidebar: m, children: h, defaultSidebar: g =
 	]), [I, L] = l(0), R = o((e) => {
 		if (!e) return;
 		let t = () => L(e.getBoundingClientRect().height);
-		t();
+		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
 			n.disconnect(), L(0);