@studiolxd/brand 38.12.4

package/src/tokens/molecules/annotation-thread.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --annotation-thread-border-style: solid; /** Estilo del borde del hilo */
+  --annotation-thread-reply-guide-style: solid; /** Estilo de la guía de respuestas */
+  --annotation-thread-gap: var(--spacing-4); /** Separación entre las piezas del hilo */
+  --annotation-thread-padding-block: var(--spacing-4); /** Aire vertical del hilo */
+  --annotation-thread-padding-inline: var(--spacing-4); /** Aire horizontal del hilo */
+  --annotation-thread-reply-indent: var(--spacing-5); /** Sangría de las respuestas respecto a la anotación que abre el hilo */
+  --annotation-thread-item-gap: var(--spacing-2); /** Separación entre la cabecera, el cuerpo y las acciones de una anotación */
+  --annotation-thread-items-gap: var(--spacing-4); /** Separación entre anotaciones */
+  --annotation-thread-header-gap: var(--spacing-2); /** Separación entre autor, fecha y marca de editada */
+  --annotation-thread-resolved-opacity: var(--opacity-disabled); /** Un hilo resuelto se retira: baja de intensidad sin desaparecer */
+  --annotation-thread-border-width: var(--border-width-default); /** Grosor del borde del hilo */
+  --annotation-thread-border-color: var(--color-border-default-on-light); /** Borde del hilo */
+  --annotation-thread-reply-guide-width: var(--border-width-default); /** Grosor de la guía que acompaña a las respuestas */
+  --annotation-thread-reply-guide-color: var(--color-border-default-on-light); /** Color de la guía de respuestas */
+  --annotation-thread-author-font-family: var(--control-font-family); /** Familia del autor */
+  --annotation-thread-author-font-size: var(--text-paragraph-small-font-size); /** Tamaño del autor: la letra menor del texto corriente */
+  --annotation-thread-author-font-weight: var(--font-weight-emphasis); /** Peso del autor */
+  --annotation-thread-author-color: var(--color-text-on-light); /** Tinta del autor */
+  --annotation-thread-meta-font-size: var(--text-paragraph-small-font-size); /** Tamaño de la fecha y de la marca de editada */
+  --annotation-thread-meta-color: var(--color-text-muted-on-light); /** Tinta de la fecha y de la marca de editada */
+  --annotation-thread-body-font-size: var(--text-font-size); /** Tamaño del cuerpo: es texto corriente */
+  --annotation-thread-body-line-height: var(--text-line-height); /** Interlineado del cuerpo */
+  --annotation-thread-body-color: var(--color-text-on-light); /** Tinta del cuerpo */
+  --annotation-thread-replies-label-font-size: var(--text-paragraph-small-font-size); /** Tamaño del rótulo que cuenta las respuestas */
+  --annotation-thread-replies-label-color: var(--color-text-muted-on-light); /** Tinta del rótulo que cuenta las respuestas */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --annotation-thread-border-color: var(--color-text-on-dark); /** Borde del hilo — surface-dark */
+  --annotation-thread-reply-guide-color: var(--color-text-on-dark); /** Guía de respuestas — surface-dark */
+  --annotation-thread-author-color: var(--color-text-on-dark); /** Tinta del autor — surface-dark */
+  --annotation-thread-meta-color: var(--color-text-muted-on-dark); /** Tinta de la fecha — surface-dark */
+  --annotation-thread-body-color: var(--color-text-on-dark); /** Tinta del cuerpo — surface-dark */
+  --annotation-thread-replies-label-color: var(--color-text-muted-on-dark); /** Tinta del rótulo de respuestas — surface-dark */
+}

package/src/tokens/molecules/annotation-thread.ts

@@ -0,0 +1,7 @@
+import annotationThread from '../../../tokens/organism/annotation-thread.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(annotationThread as never);
+
+export const annotationThreadTokens     = all.filter(t => !t.name.startsWith('--annotation-thread-surface-dark-'));
+export const annotationThreadDarkTokens = all.filter(t => t.name.startsWith('--annotation-thread-surface-dark-'));

package/src/tokens/molecules/app-launcher.css

@@ -0,0 +1,67 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --app-launcher-content-min-width: 20rem; /** Ancho mínimo del popover */
+  --app-launcher-content-columns: 3; /** Número de columnas de la rejilla de apps */
+  --app-launcher-content-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla */
+  --app-launcher-trigger-size: var(--size-component-md); /** Tamaño (cuadrado) del botón de rejilla */
+  --app-launcher-content-gap: var(--spacing-1); /** Espacio entre tiles */
+  --app-launcher-content-padding-block: var(--spacing-3); /** Padding vertical del panel */
+  --app-launcher-content-padding-inline: var(--spacing-3); /** Padding horizontal del panel */
+  --app-launcher-tile-gap: var(--spacing-1); /** Espacio entre el nombre y el badge «nuevo» dentro del tile */
+  --app-launcher-tile-name-font-size: var(--font-size-1); /** Tamaño de texto del nombre de app */
+  --app-launcher-trigger-border-radius: var(--border-radius-default); /** Radio del trigger */
+  --app-launcher-trigger-color: var(--color-text-on-light); /** Color del icono de rejilla */
+  --app-launcher-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --app-launcher-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --app-launcher-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+  --app-launcher-trigger-label-gap: var(--sidebar-nav-item-icon-gap); /** Espacio entre icono y texto del disparador con texto — el mismo aire que entre icono y texto de un ítem de SidebarNav */
+  --app-launcher-trigger-label-padding-block: var(--sidebar-nav-item-padding-block); /** Padding vertical del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-trigger-label-padding-inline: var(--sidebar-nav-item-padding-inline); /** Padding horizontal del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-trigger-label-font-size: var(--sidebar-nav-item-font-size); /** Tamaño de texto del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-trigger-label-line-height: var(--sidebar-nav-item-line-height); /** Interlineado del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-content-z-index: var(--floating-panel-z-index); /** Z-index del popover */
+  --app-launcher-transition-duration: var(--floating-panel-transition-duration); /** Duración de la animación de entrada/salida */
+  --app-launcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
+  --app-launcher-tile-padding-block: var(--menu-item-padding-block); /** Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
+  --app-launcher-tile-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal de cada tile — el de un ítem de Menu */
+  --app-launcher-tile-border-radius: var(--border-radius-default); /** Radio de cada tile */
+  --app-launcher-tile-name-font-weight: var(--font-weight-default); /** Peso del nombre de app */
+  --app-launcher-tile-name-line-height: var(--menu-item-line-height); /** Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
+  --app-launcher-tile-name-color: var(--color-text-on-light); /** Color del nombre de app */
+  --app-launcher-tile-name-active-font-weight: var(--font-weight-emphasis); /** Peso del nombre — app actual */
+  --app-launcher-trigger-label-border-radius: var(--sidebar-nav-item-border-radius); /** Radio del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-trigger-label-font-weight: var(--sidebar-nav-item-font-weight); /** Peso de texto del disparador con texto — el de un ítem de SidebarNav */
+  --app-launcher-trigger-label-color: var(--sidebar-nav-item-color); /** Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav */
+  --app-launcher-content-bg: var(--floating-panel-bg); /** Fondo del panel */
+  --app-launcher-content-border-width: var(--floating-panel-border-width); /** Borde del panel */
+  --app-launcher-content-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --app-launcher-content-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --app-launcher-content-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+  --app-launcher-trigger-hover-bg: var(--menu-item-highlighted-bg); /** Fondo del disparador (solo icono) bajo el puntero. Antes dejaba una línea de tinta debajo (regla de Colores), pero la línea bajo un glifo suelto —sin texto— se lee como un subrayado del icono; se sustituye por la misma inversión de marca que ya llevan los tiles del panel, la excepción declarada de este componente */
+  --app-launcher-trigger-hover-color: var(--menu-item-highlighted-color); /** Color del icono de rejilla bajo el puntero — el mismo par que `trigger-hover-bg` */
+  --app-launcher-tile-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del tile bajo el puntero o el teclado — el del Menu: la inversión de marca. La rejilla de apps es la lista de opciones del panel, excepción declarada a «los estados no se rellenan» (Foundations → Colores) */
+  --app-launcher-tile-highlighted-color: var(--menu-item-highlighted-color); /** Texto del tile resaltado — el del Menu: nombre e inicial invierten con el relleno */
+  --app-launcher-tile-badge-hover-bg: var(--menu-item-highlighted-color); /** Fondo de la Tag «nuevo» cuando su tile está resaltado — invertido respecto al tile (`tile-highlighted-color`) para seguir leyéndose como una píldora de contraste sobre el relleno */
+  --app-launcher-tile-badge-hover-color: var(--menu-item-highlighted-bg); /** Texto de la Tag «nuevo» cuando su tile está resaltado — el mismo par invertido que `tile-badge-hover-bg` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --app-launcher-trigger-color: var(--color-text-on-dark); /** Icono de rejilla — surface-dark */
+  --app-launcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
+  --app-launcher-tile-name-color: var(--color-text-on-dark); /** Nombre de app — surface-dark */
+  --app-launcher-trigger-label-color: var(--sidebar-nav-item-color); /** Disparador con texto — surface-dark. Por referencia al par oscuro del ítem de SidebarNav */
+  --app-launcher-content-bg: var(--floating-panel-bg); /** Fondo del panel — surface-dark */
+  --app-launcher-content-border-color: var(--floating-panel-border-color); /** Borde del panel — surface-dark */
+  --app-launcher-trigger-hover-bg: var(--menu-item-highlighted-bg); /** Fondo del disparador bajo el puntero — surface-dark */
+  --app-launcher-trigger-hover-color: var(--menu-item-highlighted-color); /** Color del icono bajo el puntero — surface-dark */
+  --app-launcher-tile-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del tile resaltado — surface-dark */
+  --app-launcher-tile-highlighted-color: var(--menu-item-highlighted-color); /** Texto del tile resaltado — surface-dark */
+  --app-launcher-tile-badge-hover-bg: var(--menu-item-highlighted-color); /** Fondo de la Tag «nuevo» resaltada — surface-dark */
+  --app-launcher-tile-badge-hover-color: var(--menu-item-highlighted-bg); /** Texto de la Tag «nuevo» resaltada — surface-dark */
+}

package/src/tokens/molecules/assistant-message.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --assistant-message-gap: var(--spacing-1); /** Separación entre el nombre del modelo, el globo y la marca de tiempo */
+  --assistant-message-model-font-family: var(--font-family-sans); /** Familia tipográfica del nombre del modelo */
+  --assistant-message-model-padding-inline: var(--spacing-1); /** Aire horizontal del nombre del modelo */
+  --assistant-message-timestamp-font-family: var(--font-family-sans); /** Familia tipográfica de la marca de tiempo */
+  --assistant-message-timestamp-padding-inline: var(--spacing-1); /** Aire horizontal de la marca de tiempo */
+  --assistant-message-model-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del nombre del modelo: un peldaño por debajo del texto de la superficie */
+  --assistant-message-model-font-weight: var(--font-weight-emphasis); /** Peso del nombre del modelo: es quien firma la respuesta, se lee antes que la marca de tiempo */
+  --assistant-message-model-color: var(--color-text-on-light); /** Tinta del nombre del modelo: tinta plena, es contenido y no un dato secundario */
+  --assistant-message-timestamp-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la marca de tiempo: un peldaño por debajo del texto de la superficie */
+  --assistant-message-timestamp-color: var(--color-text-muted-on-light); /** Tinta de la marca de tiempo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --assistant-message-model-color: var(--color-text-on-dark); /** Tinta del nombre del modelo — superficie oscura */
+  --assistant-message-timestamp-color: var(--color-text-muted-on-dark); /** Tinta de la marca de tiempo — superficie oscura */
+}

package/src/tokens/molecules/async-multi-select-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --async-multi-select-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
+  --async-multi-select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --async-multi-select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --async-multi-select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --async-multi-select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --async-multi-select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --async-multi-select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --async-multi-select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --async-multi-select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --async-multi-select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --async-multi-select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --async-multi-select-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --async-multi-select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/async-multi-select-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/async-multi-select-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const asyncMultiSelectFieldBaseTokens   = all.filter(t => t.name === '--async-multi-select-field-gap');
+export const asyncMultiSelectFieldErrorTokens  = all.filter(t => t.name.startsWith('--async-multi-select-field-error-'));
+export const asyncMultiSelectFieldHelperTokens = all.filter(t => t.name.startsWith('--async-multi-select-field-helper-'));

package/src/tokens/molecules/async-select-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --async-select-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
+  --async-select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --async-select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --async-select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --async-select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --async-select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --async-select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --async-select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --async-select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --async-select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --async-select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --async-select-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --async-select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/async-select-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/async-select-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const asyncSelectFieldBaseTokens   = all.filter(t => t.name === '--async-select-field-gap');
+export const asyncSelectFieldErrorTokens  = all.filter(t => t.name.startsWith('--async-select-field-error-'));
+export const asyncSelectFieldHelperTokens = all.filter(t => t.name.startsWith('--async-select-field-helper-'));

package/src/tokens/molecules/avatar-upload.css

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --avatar-upload-gap: var(--spacing-4); /** Aire entre el avatar y la columna del botón */
+  --avatar-upload-body-gap: var(--spacing-2); /** Aire entre el botón y el mensaje de error: el de un campo y su error */
+  --avatar-upload-ring-offset: var(--spacing-1); /** Separación del anillo respecto al avatar. Se pinta por fuera con `outline`, que no ocupa maqueta ni recibe puntero: la zona que acepta el archivo sigue siendo exactamente el avatar */
+  --avatar-upload-overlay-bg: var(--color-black); /** Velo sobre el avatar cuando el archivo está justo encima: el mismo negro del scrim del sistema */
+  --avatar-upload-overlay-opacity: var(--opacity-overlay); /** Opacidad del velo — la del scrim del sistema */
+  --avatar-upload-transition-duration: var(--motion-duration-fast); /** Duración de la aparición del anillo y del velo */
+  --avatar-upload-transition-easing: var(--motion-easing-default); /** Easing de la aparición del anillo y del velo */
+  --avatar-upload-ring-width: var(--border-width-focus); /** Grosor del anillo que anuncia la diana. El del anillo de foco: sobre un cuadrado de 40-64px un borde de 1px no se ve desde el otro lado de la pantalla, que es donde empieza el arrastre */
+  --avatar-upload-ring-color: var(--color-primary); /** Color del anillo mientras hay un arrastre sobre la ventana */
+  --avatar-upload-overlay-icon-color: var(--color-text-on-dark); /** Icono de subida sobre el velo — tinta sobre oscuro */
+  --avatar-upload-hint-font-family: var(--form-helper-font-family); /** Tipografía de la pista de arrastre — la del texto de ayuda de los campos */
+  --avatar-upload-hint-line-height: var(--form-helper-line-height); /** Interlineado de la pista de arrastre — el del texto de ayuda de los campos */
+  --avatar-upload-error-font-family: var(--form-error-font-family); /** Tipografía del mensaje de error — la de los campos */
+  --avatar-upload-error-line-height: var(--form-error-line-height); /** Interlineado del mensaje de error — el de los campos */
+  --avatar-upload-hint-font-size: var(--form-helper-font-size); /** Cuerpo de la pista de arrastre — el del texto de ayuda de los campos */
+  --avatar-upload-hint-font-weight: var(--form-helper-font-weight); /** Peso de la pista de arrastre — el del texto de ayuda de los campos */
+  --avatar-upload-hint-color: var(--form-helper-color); /** Color de la pista de arrastre — el del texto de ayuda de los campos */
+  --avatar-upload-error-font-size: var(--form-error-font-size); /** Cuerpo del mensaje de error — el de los campos */
+  --avatar-upload-error-font-weight: var(--form-error-font-weight); /** Peso del mensaje de error — el de los campos */
+  --avatar-upload-error-color: var(--form-error-color); /** Color del mensaje de error — el de los campos */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --avatar-upload-hint-color: var(--color-text-on-dark); /** Color de la pista de arrastre — surface-dark */
+  --avatar-upload-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --avatar-upload-ring-color: var(--color-text-on-dark); /** Anillo de la diana — surface-dark: la tinta de la superficie, como el borde del FileUpload */
+}

package/src/tokens/molecules/avatar-upload.ts

@@ -0,0 +1,7 @@
+import avatarUpload from '../../../tokens/molecule/avatar-upload.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(avatarUpload as never);
+
+export const avatarUploadBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const avatarUploadDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/banner.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --banner-padding-block: var(--spacing-3); /** Padding vertical de la barra (12px). Con una línea de texto y el aspa a 8px de la esquina, el aspa queda centrada sin más reglas */
+  --banner-padding-inline: var(--spacing-5); /** Padding horizontal de la barra (24px) — el mismo inset que el alert */
+  --banner-gap: var(--spacing-4); /** Aire entre el mensaje y las acciones (16px). Es también el aire vertical cuando la fila apila por debajo de md */
+  --banner-close-size: var(--size-component-sm); /** Lado del botón de cierre — talla sm (32px), la mínima del sistema */
+  --banner-close-inset: var(--spacing-2); /** Distancia del botón de cierre a la esquina superior derecha (8px) */
+  --banner-border-width: var(--border-width-default); /** Grosor de los filetes superior e inferior. La barra va a ancho completo: en los cantos laterales no hay nada que separar, así que no lleva borde inline */
+  --banner-font-size: var(--text-font-size); /** El mensaje lee al cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --banner-line-height: var(--text-line-height); /** Interlineado del mensaje — el del cuerpo */
+  --banner-info-bg: var(--color-primary); /** Información — relleno prusia. Es el mismo en las dos superficies: el relleno es autocontenido y su contenido lee siempre en oscuro (la raíz lleva `.surface-dark`) */
+  --banner-info-color: var(--color-text-on-dark); /** Información — mensaje blanco sobre el relleno prusia */
+  --banner-info-border-color: var(--color-text-on-dark); /** Información — filete blanco. Dibuja el canto también cuando la página ya es oscura y el relleno prusia coincide con el fondo, igual que en el alert `default` */
+  --banner-warning-bg: var(--color-warning-fill); /** Aviso — el relleno del rol: el amarillo de marca, aquí como feedback. Universal, igual en las dos superficies */
+  --banner-warning-border-color: var(--color-warning-fill); /** Aviso — filete igual al relleno: el amarillo ya se separa de cualquier fondo del sistema */
+  --banner-warning-color: var(--color-warning-fill-text); /** Aviso — mensaje prusia sobre el relleno amarillo (11,17:1, AAA) */
+  --banner-warning-close-color: var(--color-warning-fill-text); /** Aviso — aspa y su anillo de foco. Es el único relleno claro de la barra, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal */
+}

package/src/tokens/molecules/banner.ts

@@ -0,0 +1,14 @@
+import banner from '../../../tokens/molecule/banner.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(banner as never);
+
+const VARIANTS = ['info', 'warning'];
+
+export const bannerBaseTokens = all.filter(
+  t => !VARIANTS.some(v => t.name.startsWith(`--banner-${v}-`)),
+);
+
+export const bannerVariantTokens = all.filter(
+  t => VARIANTS.some(v => t.name.startsWith(`--banner-${v}-`)),
+);

package/src/tokens/molecules/calendar-planner.css

@@ -0,0 +1,70 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --calendar-planner-cell-min-height: 6rem; /** Altura mínima de cada celda de día — md */
+  --calendar-planner-cell-bg: rgba(0, 0, 0, 0); /** Fondo base de las celdas */
+  --calendar-planner-sm-cell-min-height: 4rem; /** Altura mínima de celda — sm */
+  --calendar-planner-lg-cell-min-height: 9rem; /** Altura mínima de celda — lg */
+  --calendar-planner-weekday-padding-block: var(--spacing-2); /** Padding vertical de las cabeceras */
+  --calendar-planner-cell-padding-block: var(--spacing-2); /** Padding vertical de la celda */
+  --calendar-planner-cell-padding-inline: var(--spacing-2); /** Padding horizontal de la celda */
+  --calendar-planner-day-number-font-size: var(--font-size-1); /** Tamaño del número del día */
+  --calendar-planner-day-number-size: var(--spacing-5); /** Tamaño (ancho y alto) del badge con el número */
+  --calendar-planner-items-gap: var(--spacing-1); /** Gap entre elementos/tags dentro de la celda */
+  --calendar-planner-more-font-size: var(--font-size-1); /** Tamaño del texto '+N más' */
+  --calendar-planner-gap: var(--calendar-gap); /** Gap entre cabecera y cuadrícula — hereda de Calendar */
+  --calendar-planner-font-family: var(--calendar-font-family); /** Familia tipográfica base — hereda de Calendar */
+  --calendar-planner-title-font-size: var(--calendar-title-font-size); /** Tamaño del título del mes — hereda de Calendar */
+  --calendar-planner-weekday-font-size: var(--calendar-weekday-font-size); /** Tamaño de las cabeceras de día de semana — hereda de Calendar */
+  --calendar-planner-weekday-font-weight: var(--font-weight-emphasis); /** Peso de las cabeceras de día: aquí la cabecera es una banda de tabla, no una letra suelta */
+  --calendar-planner-grid-border-color: var(--color-primary); /** Color de los bordes del grid */
+  --calendar-planner-grid-border-width: var(--border-width-default); /** Grosor de los bordes del grid */
+  --calendar-planner-cell-today-number-bg: var(--color-primary); /** Fondo del número del día de hoy */
+  --calendar-planner-cell-today-number-color: var(--color-text-on-dark); /** Color del número del día de hoy */
+  --calendar-planner-cell-outside-bg: var(--color-surface-secondary-on-light); /** Fondo de las celdas fuera del mes — superficie secundaria, no un gris de estado */
+  --calendar-planner-day-number-font-weight: var(--font-weight-emphasis); /** Peso del número del día */
+  --calendar-planner-day-number-radius: var(--border-radius-default); /** Radio del badge del número */
+  --calendar-planner-more-color: var(--color-text-muted-on-light); /** Color del texto '+N más' */
+  --calendar-planner-more-hover-color: var(--color-text-on-light); /** Color hover del texto '+N más' */
+  --calendar-planner-more-focus-ring-color: var(--color-primary); /** Color del focus ring del botón '+N más' */
+  --calendar-planner-transition-duration: var(--calendar-transition-duration); /** Duración de las transiciones — hereda de Calendar */
+  --calendar-planner-transition-easing: var(--calendar-transition-easing); /** Easing de las transiciones — hereda de Calendar */
+  --calendar-planner-nav-color: var(--calendar-nav-color); /** Color de los botones prev/next — hereda de Calendar */
+  --calendar-planner-nav-focus-ring-color: var(--calendar-nav-focus-ring-color); /** Color del focus ring de los botones de navegación — hereda de Calendar */
+  --calendar-planner-nav-focus-ring-width: var(--calendar-nav-focus-ring-width); /** Grosor del focus ring — hereda de Calendar */
+  --calendar-planner-nav-focus-ring-offset: var(--calendar-nav-focus-ring-offset); /** Separación del focus ring — hereda de Calendar */
+  --calendar-planner-nav-radius: var(--calendar-day-radius); /** Radio de borde del botón de navegación — hereda de Calendar */
+  --calendar-planner-title-font-weight: var(--calendar-title-font-weight); /** Peso del título del mes — hereda de Calendar */
+  --calendar-planner-title-color: var(--calendar-title-color); /** Color del título del mes — hereda de Calendar */
+  --calendar-planner-weekday-color: var(--calendar-weekday-color); /** Color de las cabeceras de día de semana — hereda de Calendar */
+  --calendar-planner-cell-focus-ring-color: var(--calendar-day-focus-ring-color); /** Color del focus ring de la celda — hereda de Calendar */
+  --calendar-planner-cell-focus-ring-width: var(--calendar-day-focus-ring-width); /** Grosor del focus ring de la celda — hereda de Calendar */
+  --calendar-planner-cell-focus-ring-offset: var(--calendar-day-focus-ring-offset); /** Separación del focus ring de la celda — hereda de Calendar */
+  --calendar-planner-day-number-color: var(--calendar-day-color); /** Color del número del día — hereda de Calendar */
+  --calendar-planner-day-number-outside-color: var(--calendar-outside-color); /** Color del número en días fuera del mes — hereda de Calendar */
+  --calendar-planner-hover-line-width: var(--calendar-hover-line-width); /** Grosor de la línea de hover — hereda de Calendar */
+  --calendar-planner-hover-line-color: var(--calendar-hover-line-color); /** Color de la línea de hover — hereda de Calendar */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --calendar-planner-nav-color: var(--color-text-on-dark); /** Color de navegación — surface-dark */
+  --calendar-planner-nav-focus-ring-color: var(--color-text-on-dark); /** Focus ring de navegación — surface-dark */
+  --calendar-planner-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
+  --calendar-planner-weekday-color: var(--color-text-muted-on-dark); /** Color de cabeceras de día — surface-dark */
+  --calendar-planner-grid-border-color: var(--color-text-on-dark); /** Borde del grid — surface-dark */
+  --calendar-planner-cell-outside-bg: var(--color-surface-secondary-on-dark); /** Fondo de celdas fuera de mes — surface-dark */
+  --calendar-planner-cell-focus-ring-color: var(--color-text-on-dark); /** Focus ring de la celda — surface-dark */
+  --calendar-planner-cell-today-number-bg: var(--color-text-on-dark); /** Fondo del número de hoy — surface-dark */
+  --calendar-planner-cell-today-number-color: var(--color-background-dark); /** Texto del número de hoy — surface-dark */
+  --calendar-planner-day-number-color: var(--color-text-on-dark); /** Color del número de día — surface-dark */
+  --calendar-planner-day-number-outside-color: var(--color-text-muted-on-dark); /** Número fuera de mes — surface-dark */
+  --calendar-planner-more-color: var(--color-text-muted-on-dark); /** Texto '+N más' — surface-dark */
+  --calendar-planner-more-hover-color: var(--color-text-on-dark); /** Hover de '+N más' — surface-dark */
+  --calendar-planner-more-focus-ring-color: var(--color-text-on-dark); /** Focus ring de '+N más' — surface-dark */
+  --calendar-planner-hover-line-color: var(--calendar-hover-line-color); /** Color de la línea de hover — surface-dark */
+}

package/src/tokens/molecules/calendar-planner.ts

@@ -0,0 +1,7 @@
+import calendarPlanner from '../../../tokens/molecule/calendar-planner.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(calendarPlanner as never);
+
+export const calendarPlannerTokens     = all.filter(t => !t.name.startsWith('--calendar-planner-surface-dark-'));
+export const calendarPlannerDarkTokens = all.filter(t => t.name.startsWith('--calendar-planner-surface-dark-'));

package/src/tokens/molecules/calendar-roster.css

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --calendar-roster-th-name-width: 10rem; /** Ancho de la columna de nombre */
+  --calendar-roster-th-day-width: 2.5rem; /** Ancho mínimo de cada columna de día */
+  --calendar-roster-font-family: var(--font-family-sans); /** Familia tipográfica base */
+  --calendar-roster-th-name-font-size: var(--font-size-1); /** Tamaño del encabezado de nombre */
+  --calendar-roster-th-name-padding-block: var(--spacing-2); /** Padding vertical del encabezado de nombre */
+  --calendar-roster-th-name-padding-inline: var(--spacing-3); /** Padding horizontal del encabezado de nombre */
+  --calendar-roster-th-day-font-size: var(--font-size-1); /** Tamaño del número de día */
+  --calendar-roster-th-day-sub-font-size: var(--font-size-0); /** Tamaño de la letra del día de semana */
+  --calendar-roster-th-day-padding-block: var(--spacing-2); /** Padding vertical del encabezado de día */
+  --calendar-roster-th-day-today-size: var(--spacing-5); /** Lado del badge del día de hoy */
+  --calendar-roster-td-name-font-size: var(--font-size-1); /** Tamaño del nombre del empleado */
+  --calendar-roster-td-name-padding-block: var(--spacing-2); /** Padding vertical de la celda de nombre */
+  --calendar-roster-td-name-padding-inline: var(--spacing-3); /** Padding horizontal de la celda de nombre */
+  --calendar-roster-cell-padding-block: var(--spacing-1); /** Padding vertical de las celdas de datos */
+  --calendar-roster-cell-padding-inline: var(--spacing-1); /** Padding horizontal de las celdas de datos */
+  --calendar-roster-schedule-font-size: var(--font-size-0); /** Tamaño del texto de horario */
+  --calendar-roster-legend-item-gap: var(--spacing-1); /** Gap entre el chip y su texto dentro de una entrada de la leyenda */
+  --calendar-roster-legend-gap: var(--spacing-3); /** Gap entre elementos de la leyenda */
+  --calendar-roster-legend-font-size: var(--font-size-1); /** Tamaño del texto de la leyenda */
+  --calendar-roster-legend-swatch-size: var(--spacing-3); /** Tamaño del cuadradito de color en la leyenda */
+  --calendar-roster-radius: var(--border-radius-default); /** Radio del marco del cuadrante */
+  --calendar-roster-border-color: var(--color-primary); /** Color de los bordes del grid */
+  --calendar-roster-border-width: var(--border-width-default); /** Grosor de los bordes del grid */
+  --calendar-roster-th-name-font-weight: var(--font-weight-emphasis); /** Peso del encabezado de nombre */
+  --calendar-roster-th-name-color: var(--color-text-muted-on-light); /** Color del encabezado de nombre */
+  --calendar-roster-th-name-bg: var(--color-background-light); /** Fondo sticky de la columna de nombre */
+  --calendar-roster-th-day-color: var(--color-text-on-light); /** Color del encabezado de día */
+  --calendar-roster-th-day-bg: var(--color-background-light); /** Fondo del encabezado de día */
+  --calendar-roster-th-day-today-color: var(--color-background-light); /** Texto del encabezado del día de hoy */
+  --calendar-roster-th-day-today-bg: var(--color-primary); /** Fondo del encabezado del día de hoy */
+  --calendar-roster-th-day-today-radius: var(--border-radius-default); /** Radio del badge del día de hoy */
+  --calendar-roster-td-name-color: var(--color-text-on-light); /** Color del nombre del empleado */
+  --calendar-roster-td-name-font-weight: var(--font-weight-default); /** Peso del nombre del empleado (la celda es th: el agente de usuario la pondría en negrita) */
+  --calendar-roster-td-name-bg: var(--color-background-light); /** Fondo sticky de la celda de nombre */
+  --calendar-roster-cell-bg: var(--color-background-light); /** Fondo de celdas de día laborable */
+  --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas de fin de semana — superficie secundaria, la misma para todo día no laborable: lo que los distingue es el chip, no el gris */
+  --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas festivas — misma superficie secundaria; el festivo se nombra con su chip */
+  --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas no laborables (laborable sin turno asignado) */
+  --calendar-roster-cell-today-outline-width: var(--border-width-focus); /** Grosor del recuadro de la columna de hoy */
+  --calendar-roster-schedule-color: var(--color-text-on-light); /** Color del texto de horario */
+  --calendar-roster-legend-color: var(--color-text-muted-on-light); /** Color del texto de la leyenda */
+  --calendar-roster-legend-swatch-radius: var(--border-radius-default); /** Radio del cuadradito de color */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --calendar-roster-cell-bg: rgba(0, 0, 0, 0); /** Fondo de celdas — surface-dark */
+  --calendar-roster-border-color: var(--color-text-on-dark); /** Color de bordes del grid — surface-dark */
+  --calendar-roster-th-name-bg: var(--color-background-dark); /** Fondo columna de nombre — surface-dark */
+  --calendar-roster-th-name-color: var(--color-text-muted-on-dark); /** Color columna de nombre — surface-dark */
+  --calendar-roster-th-day-color: var(--color-text-on-dark); /** Color encabezado de día — surface-dark */
+  --calendar-roster-th-day-bg: var(--color-background-dark); /** Fondo encabezado de día — surface-dark */
+  --calendar-roster-th-day-today-bg: var(--color-text-on-dark); /** Fondo del día de hoy — surface-dark */
+  --calendar-roster-th-day-today-color: var(--color-background-dark); /** Texto del día de hoy — surface-dark */
+  --calendar-roster-td-name-bg: var(--color-background-dark); /** Fondo celda de nombre — surface-dark */
+  --calendar-roster-td-name-color: var(--color-text-on-dark); /** Color celda de nombre — surface-dark */
+  --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-dark); /** Fondo fin de semana — surface-dark */
+  --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-dark); /** Fondo festivo — surface-dark */
+  --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-dark); /** Fondo no laborable — surface-dark */
+  --calendar-roster-schedule-color: var(--color-text-muted-on-dark); /** Color del texto de horario — surface-dark */
+  --calendar-roster-legend-color: var(--color-text-muted-on-dark); /** Color de la leyenda — surface-dark */
+}

package/src/tokens/molecules/calendar-roster.ts

@@ -0,0 +1,7 @@
+import calendarRoster from '../../../tokens/molecule/calendar-roster.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(calendarRoster as never);
+
+export const calendarRosterTokens     = all.filter(t => !t.name.startsWith('--calendar-roster-surface-dark-'));
+export const calendarRosterDarkTokens = all.filter(t => t.name.startsWith('--calendar-roster-surface-dark-'));

package/src/tokens/molecules/calendar.css

@@ -0,0 +1,90 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --calendar-nav-disabled-cursor: not-allowed; /** Cursor deshabilitado */
+  --calendar-day-bg: rgba(0, 0, 0, 0); /** Fondo base de los días */
+  --calendar-disabled-cursor: not-allowed; /** Cursor de los días deshabilitados */
+  --calendar-title-button-cursor: pointer; /** Cursor del título: lleva a la rejilla de años */
+  --calendar-year-columns: 4; /** Columnas de la rejilla de años: doce años en tres filas de cuatro */
+  --calendar-gap: var(--spacing-2); /** Gap entre cabecera y cuadrícula */
+  --calendar-grid-gap: var(--spacing-1); /** Gap entre celdas del grid */
+  --calendar-padding-block: var(--spacing-3); /** Padding vertical del componente */
+  --calendar-padding-inline: var(--spacing-3); /** Padding horizontal del componente */
+  --calendar-font-family: var(--font-family-sans); /** Familia tipográfica base */
+  --calendar-title-font-size: var(--font-size-2); /** Tamaño del título del mes — md */
+  --calendar-weekday-font-size: var(--font-size-1); /** Tamaño de las cabeceras de día de semana */
+  --calendar-day-size: var(--spacing-6); /** Tamaño (ancho y alto) de los botones de día — md */
+  --calendar-day-font-size: var(--font-size-1); /** Tamaño de fuente de los días */
+  --calendar-today-marker-size: var(--spacing-1); /** Lado del marcador del día de hoy */
+  --calendar-today-marker-offset: var(--spacing-1); /** Separación del marcador respecto al borde inferior de la celda */
+  --calendar-transition-duration: var(--motion-duration-fast); /** Duración de las transiciones */
+  --calendar-transition-easing: var(--motion-easing-default); /** Easing de las transiciones */
+  --calendar-sm-day-size: var(--spacing-5); /** Tamaño de los botones de día — sm */
+  --calendar-sm-title-font-size: var(--font-size-1); /** Tamaño del título — sm */
+  --calendar-lg-day-size: var(--spacing-7); /** Tamaño de los botones de día — lg */
+  --calendar-lg-title-font-size: var(--font-size-2); /** Tamaño del título — lg */
+  --calendar-lg-day-font-size: var(--font-size-2); /** Tamaño de fuente de los días — lg */
+  --calendar-title-button-padding-inline: var(--spacing-1); /** Aire a los lados del título pulsable: el mismo hueco que separa las celdas */
+  --calendar-year-bg: var(--calendar-day-bg); /** Fondo base de la celda de año */
+  --calendar-nav-color: var(--color-text-on-light); /** Color de los botones prev/next */
+  --calendar-nav-disabled-color: var(--color-icon-secondary-on-light); /** Color deshabilitado de los botones de navegación */
+  --calendar-nav-focus-ring-color: var(--color-primary); /** Color del focus ring de los botones de navegación */
+  --calendar-nav-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --calendar-nav-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+  --calendar-title-font-weight: var(--font-weight-emphasis); /** Peso del título del mes */
+  --calendar-title-color: var(--color-text-on-light); /** Color del título del mes */
+  --calendar-weekday-color: var(--color-text-muted-on-light); /** Color de las cabeceras de día de semana */
+  --calendar-day-font-weight: var(--font-weight-default); /** Peso de fuente de los días */
+  --calendar-day-radius: var(--border-radius-default); /** Radio de borde de los botones de día */
+  --calendar-day-color: var(--color-text-on-light); /** Color de texto de los días */
+  --calendar-day-focus-ring-color: var(--color-primary); /** Color del focus ring de los días */
+  --calendar-day-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring de los días */
+  --calendar-day-focus-ring-offset: var(--border-width-default); /** Separación del focus ring de los días */
+  --calendar-today-color: var(--color-primary); /** Color de texto del día de hoy */
+  --calendar-today-font-weight: var(--font-weight-emphasis); /** Peso de fuente del día de hoy */
+  --calendar-today-marker-color: var(--color-primary); /** Color del marcador del día de hoy */
+  --calendar-today-marker-radius: var(--border-radius-default); /** Radio del marcador del día de hoy — recto, como toda esquina del sistema */
+  --calendar-selected-bg: var(--color-primary); /** Fondo del día seleccionado */
+  --calendar-selected-color: var(--color-text-on-dark); /** Texto del día seleccionado */
+  --calendar-outside-color: var(--color-text-muted-on-light); /** Color de los días fuera del mes actual — se leen, así que son texto secundario, no gris de icono */
+  --calendar-disabled-color: var(--color-icon-secondary-on-light); /** Color de los días deshabilitados */
+  --calendar-year-height: var(--calendar-day-size); /** Alto de la celda de año — md: el del día, para que la vista de años no cambie la altura del panel */
+  --calendar-year-padding-inline: var(--calendar-grid-gap); /** Aire a los lados de la celda de año: el año lleva cuatro cifras y no cabe en el cuadrado del día */
+  --calendar-year-font-size: var(--calendar-day-font-size); /** Cuerpo de letra del año */
+  --calendar-year-grid-min-inline-size: calc(7 * var(--calendar-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años */
+  --calendar-sm-year-grid-min-inline-size: calc(7 * var(--calendar-sm-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — sm */
+  --calendar-lg-year-grid-min-inline-size: calc(7 * var(--calendar-lg-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — lg */
+  --calendar-sm-year-height: var(--calendar-sm-day-size); /** Alto de la celda de año — sm */
+  --calendar-lg-year-height: var(--calendar-lg-day-size); /** Alto de la celda de año — lg */
+  --calendar-lg-year-font-size: var(--calendar-lg-day-font-size); /** Cuerpo de letra del año — lg */
+  --calendar-hover-line-width: var(--border-width-default); /** Grosor de la línea de hover del día, del año y del título. Nada se rellena bajo el puntero (regla de Colores): lo que se puede pulsar y es texto deja una línea de tinta debajo. Las flechas no la llevan: son un glifo, y la línea del sistema subraya texto */
+  --calendar-hover-line-color: var(--color-primary); /** Color de la línea de hover — tinta de la superficie */
+  --calendar-year-color: var(--calendar-day-color); /** Color de texto del año */
+  --calendar-year-current-color: var(--calendar-today-color); /** Color del año en curso: el mismo que el día de hoy */
+  --calendar-year-current-font-weight: var(--calendar-today-font-weight); /** Peso del año en curso */
+  --calendar-year-selected-bg: var(--calendar-selected-bg); /** Fondo del año de la fecha elegida */
+  --calendar-year-selected-color: var(--calendar-selected-color); /** Texto del año de la fecha elegida */
+  --calendar-year-disabled-color: var(--calendar-disabled-color); /** Color de los años fuera de rango */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --calendar-nav-color: var(--color-text-on-dark); /** Color de navegación — surface-dark */
+  --calendar-nav-disabled-color: var(--color-text-muted-on-dark); /** Color deshabilitado de navegación — surface-dark */
+  --calendar-nav-focus-ring-color: var(--color-text-on-dark); /** Focus ring de navegación — surface-dark */
+  --calendar-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
+  --calendar-weekday-color: var(--color-text-muted-on-dark); /** Color de cabeceras de día — surface-dark */
+  --calendar-day-color: var(--color-text-on-dark); /** Color de días — surface-dark */
+  --calendar-day-focus-ring-color: var(--color-text-on-dark); /** Focus ring de días — surface-dark */
+  --calendar-today-color: var(--color-text-on-dark); /** Color del día de hoy — surface-dark */
+  --calendar-today-marker-color: var(--color-text-on-dark); /** Marcador del día de hoy — surface-dark */
+  --calendar-selected-bg: var(--color-text-on-dark); /** Fondo del día seleccionado — surface-dark */
+  --calendar-selected-color: var(--color-background-dark); /** Texto del día seleccionado — surface-dark */
+  --calendar-outside-color: var(--color-text-muted-on-dark); /** Días fuera de mes — surface-dark */
+  --calendar-disabled-color: var(--color-text-muted-on-dark); /** Días deshabilitados — surface-dark */
+  --calendar-hover-line-color: var(--color-text-on-dark); /** Color de la línea de hover — surface-dark */
+}

package/src/tokens/molecules/calendar.ts

@@ -0,0 +1,7 @@
+import calendar from '../../../tokens/molecule/calendar.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(calendar as never);
+
+export const calendarTokens     = all.filter(t => !t.name.startsWith('--calendar-surface-dark-'));
+export const calendarDarkTokens = all.filter(t => t.name.startsWith('--calendar-surface-dark-'));

package/src/tokens/molecules/carousel.css

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --carousel-slide-size: 100%; /** Ancho de una diapositiva (`flex-basis`). Por defecto la pista entera: una diapositiva a la vista. Se sobreescribe con la prop `slideSize` */
+  --carousel-gap: var(--spacing-4); /** Aire entre diapositivas */
+  --carousel-controls-gap: var(--spacing-2); /** Aire entre los botones de la barra de control */
+  --carousel-controls-space-before: var(--spacing-4); /** Aire entre la pista y la barra de control */
+  --carousel-indicator-inline-size: var(--spacing-6); /** Largo de la barra indicadora (32px) */
+  --carousel-indicator-hit-block-size: var(--spacing-4); /** Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no */
+  --carousel-indicator-block-size: var(--border-width-focus); /** Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema */
+  --carousel-indicator-color: var(--color-text-muted-on-light); /** Barra de una diapositiva que no está a la vista */
+  --carousel-indicator-current-color: var(--color-text-on-light); /** Barra de la diapositiva a la vista. Es una barra de tinta, no un relleno: la posición no es un estado que se pinte de marca */
+  --carousel-focus-ring-color: var(--color-primary); /** Color del anillo de foco de los indicadores */
+  --carousel-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --carousel-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --carousel-indicator-color: var(--color-text-muted-on-dark); /** Barra de diapositiva no visible — surface-dark */
+  --carousel-indicator-current-color: var(--color-text-on-dark); /** Barra de la diapositiva a la vista — surface-dark */
+  --carousel-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}