@studiolxd/brand 49.10.0 → 49.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.10.0",
+  "version": "49.12.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -823,6 +823,36 @@
       "import": "./dist/tooltip.js",
       "default": "./dist/tooltip.js"
     },
+    "./clock-widget": {
+      "types": "./dist/_types/molecules/ClockWidget/ClockWidget.d.ts",
+      "import": "./dist/clock-widget.js",
+      "default": "./dist/clock-widget.js"
+    },
+    "./heatmap": {
+      "types": "./dist/_types/molecules/Heatmap/Heatmap.d.ts",
+      "import": "./dist/heatmap.js",
+      "default": "./dist/heatmap.js"
+    },
+    "./org-chart": {
+      "types": "./dist/_types/organisms/OrgChart/OrgChart.d.ts",
+      "import": "./dist/org-chart.js",
+      "default": "./dist/org-chart.js"
+    },
+    "./planning-grid": {
+      "types": "./dist/_types/organisms/PlanningGrid/PlanningGrid.d.ts",
+      "import": "./dist/planning-grid.js",
+      "default": "./dist/planning-grid.js"
+    },
+    "./recurrence-field": {
+      "types": "./dist/_types/molecules/RecurrenceField/RecurrenceField.d.ts",
+      "import": "./dist/recurrence-field.js",
+      "default": "./dist/recurrence-field.js"
+    },
+    "./timeline": {
+      "types": "./dist/_types/molecules/Timeline/Timeline.d.ts",
+      "import": "./dist/timeline.js",
+      "default": "./dist/timeline.js"
+    },
     "./typing-indicator": {
       "types": "./dist/_types/atoms/TypingIndicator/TypingIndicator.d.ts",
       "import": "./dist/typing-indicator.js",

package/src/tokens/index.css

@@ -154,6 +154,12 @@
 @import "./molecules/search-form.css";
 @import "./molecules/stat-tile.css";
 @import "./molecules/uptime-bars.css";
+@import "./molecules/timeline.css";
+@import "./molecules/clock-widget.css";
+@import "./molecules/heatmap.css";
+@import "./molecules/recurrence-field.css";
+@import "./molecules/planning-grid.css";
+@import "./molecules/org-chart.css";
 @import "./molecules/copy-button.css";
 @import "./molecules/confirm-dialog.css";
 @import "./molecules/avatar-upload.css";

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

@@ -4,13 +4,14 @@
 
 :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-content-columns: 3; /** Número de columnas de la rejilla de apps a partir de `sm` */
+  --app-launcher-content-columns-narrow: 2; /** Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero */
+  --app-launcher-content-max-height: var(--available-height); /** Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll */
   --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-gap: var(--spacing-1); /** Espacio entre el distintivo y el nombre 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 */
@@ -27,6 +28,7 @@
   --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-badge-block-size: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla */
   --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 */

package/src/tokens/molecules/clock-widget.css

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --clock-widget-font-family: var(--font-family-sans); /** Familia tipográfica del fichaje */
+  --clock-widget-gap: var(--spacing-4); /** Separación entre los bloques del fichaje */
+  --clock-widget-header-gap: var(--spacing-1); /** Separación entre el título y el día */
+  --clock-widget-status-gap: var(--spacing-2); /** Separación entre el punto de estado y su texto */
+  --clock-widget-status-dot-size: var(--spacing-2); /** Lado del punto de estado */
+  --clock-widget-elapsed-font-size: var(--font-size-6); /** Tamaño del tiempo transcurrido — la cifra grande del fichaje */
+  --clock-widget-elapsed-line-height: var(--line-height-tight); /** Interlineado del tiempo transcurrido */
+  --clock-widget-footer-margin-block-start: var(--spacing-2); /** Aire sobre el pie del fichaje */
+  --clock-widget-date-font-size: var(--text-paragraph-small-font-size); /** Tamaño del día — letra menor */
+  --clock-widget-date-color: var(--color-text-muted-on-light); /** Color del día */
+  --clock-widget-status-font-size: var(--text-paragraph-small-font-size); /** Tamaño del texto de estado */
+  --clock-widget-status-color: var(--color-text-muted-on-light); /** Color del texto de estado */
+  --clock-widget-status-dot-radius: var(--border-radius-round); /** Radio del punto de estado — redondo, es una luz, no una ficha */
+  --clock-widget-status-dot-open-bg: var(--color-success-fill); /** Punto de estado con el turno abierto — relleno universal de acierto */
+  --clock-widget-status-dot-closed-bg: var(--color-border-default-on-light); /** Punto de estado con el turno cerrado — la línea del sistema, sin color de feedback */
+  --clock-widget-elapsed-font-weight: var(--font-weight-emphasis); /** Peso del tiempo transcurrido */
+  --clock-widget-elapsed-color: var(--color-text-on-light); /** Color del tiempo transcurrido */
+  --clock-widget-elapsed-label-font-size: var(--text-paragraph-small-font-size); /** Tamaño de la etiqueta del tiempo transcurrido */
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-light); /** Color de la etiqueta del tiempo transcurrido */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --clock-widget-date-color: var(--color-text-muted-on-dark); /** Color del día — surface-dark */
+  --clock-widget-status-color: var(--color-text-muted-on-dark); /** Color del texto de estado — surface-dark */
+  --clock-widget-status-dot-closed-bg: var(--color-text-on-dark); /** Punto con el turno cerrado — surface-dark */
+  --clock-widget-elapsed-color: var(--color-text-on-dark); /** Color del tiempo transcurrido — surface-dark */
+  --clock-widget-elapsed-label-color: var(--color-text-muted-on-dark); /** Color de la etiqueta del tiempo — surface-dark */
+}

package/src/tokens/molecules/clock-widget.ts

@@ -0,0 +1,7 @@
+import clockWidget from '../../../tokens/molecule/clock-widget.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(clockWidget as never);
+
+export const clockWidgetBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const clockWidgetDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/heatmap.css

@@ -0,0 +1,78 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --heatmap-row-header-width: 10rem; /** Ancho de la columna de filas */
+  --heatmap-column-header-width: 3rem; /** Ancho mínimo de una columna de datos */
+  --heatmap-font-family: var(--font-family-sans); /** Familia tipográfica de la matriz */
+  --heatmap-row-header-font-size: var(--font-size-1); /** Tamaño del nombre de la fila */
+  --heatmap-row-header-padding-block: var(--spacing-2); /** Padding vertical del nombre de la fila */
+  --heatmap-row-header-padding-inline: var(--spacing-3); /** Padding horizontal del nombre de la fila */
+  --heatmap-column-header-font-size: var(--font-size-0); /** Tamaño del nombre de la columna */
+  --heatmap-column-header-padding-block: var(--spacing-2); /** Padding vertical del encabezado de columna */
+  --heatmap-column-header-padding-inline: var(--spacing-2); /** Padding horizontal del encabezado de columna */
+  --heatmap-group-header-font-size: var(--font-size-0); /** Tamaño del nombre del grupo de columnas */
+  --heatmap-cell-padding-block: var(--spacing-2); /** Padding vertical de una celda de dato */
+  --heatmap-cell-padding-inline: var(--spacing-2); /** Padding horizontal de una celda de dato */
+  --heatmap-cell-font-size: var(--font-size-1); /** Tamaño de la cifra de la celda */
+  --heatmap-empty-pattern-width: var(--spacing-1); /** Ancho de la trama de la celda sin dato */
+  --heatmap-legend-gap: var(--spacing-2); /** Separación entre los elementos de la leyenda */
+  --heatmap-legend-font-size: var(--font-size-1); /** Tamaño del texto de la leyenda */
+  --heatmap-legend-swatch-size: var(--spacing-3); /** Lado del cuadradito de la leyenda */
+  --heatmap-legend-swatch-gap: var(--spacing-1); /** Separación entre cuadraditos de la leyenda */
+  --heatmap-margin-block-start: var(--spacing-3); /** Aire entre la matriz y su leyenda */
+  --heatmap-step-1-bg: var(--color-chart-sequential-100); /** Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema */
+  --heatmap-step-2-bg: var(--color-chart-sequential-200); /** Paso 2 de la rampa de la matriz — sequential-200 de la rampa secuencial del sistema */
+  --heatmap-step-3-bg: var(--color-chart-sequential-300); /** Paso 3 de la rampa de la matriz — sequential-300 de la rampa secuencial del sistema */
+  --heatmap-step-4-bg: var(--color-chart-sequential-500); /** Paso 4 de la rampa de la matriz — sequential-500 de la rampa secuencial del sistema */
+  --heatmap-step-5-bg: var(--color-chart-sequential-600); /** Paso 5 de la rampa de la matriz — sequential-600 de la rampa secuencial del sistema */
+  --heatmap-step-6-bg: var(--color-chart-sequential-700); /** Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema */
+  --heatmap-radius: var(--border-radius-default); /** Radio del marco de la matriz */
+  --heatmap-border-color: var(--color-primary); /** Color de la rejilla */
+  --heatmap-border-width: var(--border-width-default); /** Grosor de la rejilla */
+  --heatmap-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
+  --heatmap-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
+  --heatmap-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --heatmap-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
+  --heatmap-column-header-color: var(--color-text-muted-on-light); /** Color del nombre de la columna */
+  --heatmap-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --heatmap-group-header-color: var(--color-text-muted-on-light); /** Color del nombre del grupo de columnas */
+  --heatmap-cell-font-weight: var(--font-weight-emphasis); /** Peso de la cifra de la celda */
+  --heatmap-empty-bg: var(--color-surface-secondary-on-light); /** Fondo de una celda sin dato — superficie secundaria, no un paso de la rampa */
+  --heatmap-empty-pattern-color: var(--color-border-default-on-light); /** Color de la trama de la celda sin dato: lo que la separa de la rampa sin depender del color */
+  --heatmap-legend-color: var(--color-text-muted-on-light); /** Color del texto de la leyenda */
+  --heatmap-step-1-color: var(--color-text-on-light); /** Tinta sobre el paso 1 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-step-2-color: var(--color-text-on-light); /** Tinta sobre el paso 2 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-step-3-color: var(--color-text-on-light); /** Tinta sobre el paso 3 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-step-5-color: var(--color-text-on-dark); /** Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-step-6-color: var(--color-text-on-dark); /** Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --heatmap-step-1-bg: var(--color-chart-sequential-100-on-dark); /** Paso 1 de la rampa — surface-dark */
+  --heatmap-step-2-bg: var(--color-chart-sequential-200-on-dark); /** Paso 2 de la rampa — surface-dark */
+  --heatmap-step-3-bg: var(--color-chart-sequential-300-on-dark); /** Paso 3 de la rampa — surface-dark */
+  --heatmap-step-4-bg: var(--color-chart-sequential-500-on-dark); /** Paso 4 de la rampa — surface-dark */
+  --heatmap-step-5-bg: var(--color-chart-sequential-600-on-dark); /** Paso 5 de la rampa — surface-dark */
+  --heatmap-step-6-bg: var(--color-chart-sequential-700-on-dark); /** Paso 6 de la rampa — surface-dark */
+  --heatmap-step-1-color: var(--color-text-on-dark); /** Tinta sobre el paso 1 — surface-dark */
+  --heatmap-step-2-color: var(--color-text-on-dark); /** Tinta sobre el paso 2 — surface-dark */
+  --heatmap-step-3-color: var(--color-text-on-dark); /** Tinta sobre el paso 3 — surface-dark */
+  --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — surface-dark */
+  --heatmap-step-5-color: var(--color-text-on-light); /** Tinta sobre el paso 5 — surface-dark */
+  --heatmap-step-6-color: var(--color-text-on-light); /** Tinta sobre el paso 6 — surface-dark */
+  --heatmap-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
+  --heatmap-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --heatmap-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
+  --heatmap-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --heatmap-column-header-color: var(--color-text-muted-on-dark); /** Color del encabezado de columna — surface-dark */
+  --heatmap-group-header-color: var(--color-text-muted-on-dark); /** Color del nombre del grupo — surface-dark */
+  --heatmap-empty-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda sin dato — surface-dark */
+  --heatmap-empty-pattern-color: var(--color-text-on-dark); /** Trama de la celda sin dato — surface-dark */
+  --heatmap-legend-color: var(--color-text-muted-on-dark); /** Color de la leyenda — surface-dark */
+}

package/src/tokens/molecules/heatmap.ts

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

package/src/tokens/molecules/org-chart.css

@@ -0,0 +1,59 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --org-chart-viewport-block-size: 32rem; /** Alto del lienzo con desplazamiento */
+  --org-chart-card-inline-size: 14rem; /** Ancho de la tarjeta de un departamento */
+  --org-chart-font-family: var(--font-family-sans); /** Familia tipográfica del organigrama */
+  --org-chart-gap: var(--spacing-3); /** Separación entre el lienzo y sus controles */
+  --org-chart-viewport-padding: var(--spacing-5); /** Aire alrededor del árbol dentro del lienzo */
+  --org-chart-sibling-gap: var(--spacing-4); /** Separación horizontal entre dos nodos hermanos */
+  --org-chart-connector-length: var(--spacing-6); /** Alto del tramo de líneas entre un nodo y sus hijos */
+  --org-chart-card-padding-block: var(--spacing-2); /** Padding vertical de la tarjeta */
+  --org-chart-card-padding-inline: var(--spacing-3); /** Padding horizontal de la tarjeta */
+  --org-chart-card-gap: var(--spacing-2); /** Separación entre la cabecera y el cuerpo de la tarjeta */
+  --org-chart-name-font-size: var(--font-size-1); /** Tamaño del nombre del departamento */
+  --org-chart-group-font-size: var(--font-size-0); /** Tamaño del rótulo de un grupo de personas */
+  --org-chart-group-gap: var(--spacing-1); /** Separación entre el rótulo y sus personas */
+  --org-chart-group-margin-block-start: var(--spacing-2); /** Aire entre dos grupos de personas */
+  --org-chart-person-font-size: var(--font-size-1); /** Tamaño del nombre de una persona */
+  --org-chart-person-role-font-size: var(--font-size-0); /** Tamaño del puesto de una persona */
+  --org-chart-person-gap: var(--spacing-1); /** Separación entre personas */
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-light); /** Fondo del lienzo — superficie secundaria: lo que separa el organigrama de la página */
+  --org-chart-viewport-radius: var(--border-radius-default); /** Radio del lienzo */
+  --org-chart-viewport-border-color: var(--color-border-default-on-light); /** Borde del lienzo */
+  --org-chart-viewport-border-width: var(--border-width-default); /** Grosor del borde del lienzo */
+  --org-chart-focus-ring-color: var(--color-primary); /** Anillo de foco del lienzo */
+  --org-chart-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --org-chart-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --org-chart-connector-color: var(--color-border-default-on-light); /** Color de las líneas que unen los nodos */
+  --org-chart-connector-width: var(--border-width-default); /** Grosor de las líneas que unen los nodos */
+  --org-chart-card-bg: var(--color-background-light); /** Fondo de la tarjeta */
+  --org-chart-card-border-color: var(--color-primary); /** Borde de la tarjeta */
+  --org-chart-card-border-width: var(--border-width-default); /** Grosor del borde de la tarjeta */
+  --org-chart-card-radius: var(--border-radius-default); /** Radio de la tarjeta */
+  --org-chart-name-font-weight: var(--font-weight-emphasis); /** Peso del nombre del departamento */
+  --org-chart-name-color: var(--color-text-on-light); /** Color del nombre del departamento */
+  --org-chart-group-color: var(--color-text-muted-on-light); /** Color del rótulo de un grupo de personas */
+  --org-chart-person-color: var(--color-text-on-light); /** Color del nombre de una persona */
+  --org-chart-person-role-color: var(--color-text-muted-on-light); /** Color del puesto de una persona */
+  --org-chart-empty-color: var(--color-text-muted-on-light); /** Color del «sin responsable» / «sin equipo» */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --org-chart-viewport-bg: var(--color-surface-secondary-on-dark); /** Fondo del lienzo — surface-dark */
+  --org-chart-viewport-border-color: var(--color-text-on-dark); /** Borde del lienzo — surface-dark */
+  --org-chart-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --org-chart-connector-color: var(--color-text-on-dark); /** Color de las líneas — surface-dark */
+  --org-chart-card-bg: var(--color-background-dark); /** Fondo de la tarjeta — surface-dark */
+  --org-chart-card-border-color: var(--color-text-on-dark); /** Borde de la tarjeta — surface-dark */
+  --org-chart-name-color: var(--color-text-on-dark); /** Color del nombre del departamento — surface-dark */
+  --org-chart-group-color: var(--color-text-muted-on-dark); /** Color del rótulo de grupo — surface-dark */
+  --org-chart-person-color: var(--color-text-on-dark); /** Color del nombre de una persona — surface-dark */
+  --org-chart-person-role-color: var(--color-text-muted-on-dark); /** Color del puesto — surface-dark */
+  --org-chart-empty-color: var(--color-text-muted-on-dark); /** Color del «sin equipo» — surface-dark */
+}

package/src/tokens/molecules/org-chart.ts

@@ -0,0 +1,7 @@
+import orgChart from '../../../tokens/organism/org-chart.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(orgChart as never);
+
+export const orgChartBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const orgChartDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/planning-grid.css

@@ -0,0 +1,58 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --planning-grid-row-header-width: 12rem; /** Ancho de la columna de filas */
+  --planning-grid-column-width: 6rem; /** Ancho mínimo de una columna de datos */
+  --planning-grid-cell-input-width: 4.5rem; /** Ancho del campo de horas dentro de la celda */
+  --planning-grid-font-family: var(--font-family-sans); /** Familia tipográfica de la rejilla */
+  --planning-grid-row-header-font-size: var(--font-size-1); /** Tamaño del nombre de la fila */
+  --planning-grid-row-header-padding-block: var(--spacing-2); /** Padding vertical del nombre de la fila */
+  --planning-grid-row-header-padding-inline: var(--spacing-3); /** Padding horizontal del nombre de la fila */
+  --planning-grid-column-header-font-size: var(--font-size-1); /** Tamaño del nombre de la columna */
+  --planning-grid-column-header-sub-font-size: var(--font-size-0); /** Tamaño de la segunda línea del encabezado */
+  --planning-grid-column-header-padding-block: var(--spacing-2); /** Padding vertical del encabezado de columna */
+  --planning-grid-cell-padding-block: var(--spacing-1); /** Padding vertical de una celda */
+  --planning-grid-cell-padding-inline: var(--spacing-1); /** Padding horizontal de una celda */
+  --planning-grid-cell-font-size: var(--font-size-1); /** Tamaño de la cifra de una celda de solo lectura */
+  --planning-grid-pending-opacity: var(--opacity-disabled); /** Opacidad de una celda cuyo cambio está en vuelo */
+  --planning-grid-radius: var(--border-radius-default); /** Radio del marco de la rejilla */
+  --planning-grid-border-color: var(--color-primary); /** Color de la rejilla */
+  --planning-grid-border-width: var(--border-width-default); /** Grosor de la rejilla */
+  --planning-grid-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
+  --planning-grid-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
+  --planning-grid-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --planning-grid-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
+  --planning-grid-column-header-color: var(--color-text-on-light); /** Color del nombre de la columna */
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-light); /** Color de la segunda línea del encabezado */
+  --planning-grid-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --planning-grid-current-outline-color: var(--color-primary); /** Recuadro de la columna en curso */
+  --planning-grid-current-outline-width: var(--border-width-focus); /** Grosor del recuadro de la columna en curso */
+  --planning-grid-cell-color: var(--color-text-on-light); /** Color de la cifra de una celda */
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-light); /** Color de la cifra de una celda que no se edita */
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-light); /** Fondo de una celda que no se edita — superficie secundaria */
+  --planning-grid-footer-bg: var(--color-surface-secondary-on-light); /** Fondo de las filas de totales */
+  --planning-grid-footer-font-weight: var(--font-weight-emphasis); /** Peso de las filas de totales */
+  --planning-grid-footer-color: var(--color-text-on-light); /** Color de las filas de totales */
+  --planning-grid-over-color: var(--color-error-text-on-light); /** Color de un resto negativo: hay más horas asignadas que disponibles */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --planning-grid-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
+  --planning-grid-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --planning-grid-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
+  --planning-grid-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --planning-grid-column-header-color: var(--color-text-on-dark); /** Color del encabezado de columna — surface-dark */
+  --planning-grid-column-header-sub-color: var(--color-text-muted-on-dark); /** Color de la segunda línea del encabezado — surface-dark */
+  --planning-grid-current-outline-color: var(--color-text-on-dark); /** Recuadro de la columna en curso — surface-dark */
+  --planning-grid-cell-color: var(--color-text-on-dark); /** Color de la cifra de una celda — surface-dark */
+  --planning-grid-cell-readonly-color: var(--color-text-muted-on-dark); /** Color de una celda que no se edita — surface-dark */
+  --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda que no se edita — surface-dark */
+  --planning-grid-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo de las filas de totales — surface-dark */
+  --planning-grid-footer-color: var(--color-text-on-dark); /** Color de las filas de totales — surface-dark */
+  --planning-grid-over-color: var(--color-error-text-on-dark); /** Color de un resto negativo — surface-dark */
+}

package/src/tokens/molecules/planning-grid.ts

@@ -0,0 +1,7 @@
+import planningGrid from '../../../tokens/organism/planning-grid.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(planningGrid as never);
+
+export const planningGridBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const planningGridDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/recurrence-field.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --recurrence-field-interval-width: 8rem; /** Ancho del campo de intervalo — cabe un número de dos cifras y sus flechas, no la fila entera */
+  --recurrence-field-gap: var(--spacing-4); /** Separación entre los campos del editor de recurrencia */
+  --recurrence-field-row-gap: var(--spacing-3); /** Separación entre los campos que comparten fila */
+  --recurrence-field-weekdays-gap: var(--spacing-1); /** Separación entre los días de la semana */
+  --recurrence-field-legend-margin-block-end: var(--spacing-1); /** Aire entre la etiqueta del grupo de días y los días */
+  --recurrence-field-legend-font-size: var(--label-font-size); /** Tamaño de la etiqueta del grupo de días — el de una etiqueta de campo */
+  --recurrence-field-legend-color: var(--color-text-on-light); /** Color de la etiqueta del grupo de días */
+  --recurrence-field-legend-font-weight: var(--label-font-weight); /** Peso de la etiqueta del grupo de días — el de una etiqueta de campo */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --recurrence-field-legend-color: var(--color-text-on-dark); /** Color de la etiqueta del grupo de días — surface-dark */
+}

package/src/tokens/molecules/recurrence-field.ts

@@ -0,0 +1,7 @@
+import recurrenceField from '../../../tokens/molecule/recurrence-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(recurrenceField as never);
+
+export const recurrenceFieldBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const recurrenceFieldDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/site-nav.css

@@ -15,6 +15,7 @@
   --site-nav-item-hover-color: var(--color-text-on-light); /** Enlaces en hover: en claro no cambia el color, aparece la línea */
   --site-nav-item-underline-offset: var(--border-width-focus); /** Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer */
   --site-nav-item-disabled-color: var(--color-disabled-text-on-light); /** Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta */
+  --site-nav-item-column-gap: var(--site-nav-group-gap); /** Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados */
   --site-nav-item-current-font-weight: var(--font-weight-default); /** Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta) */
   --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
   --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */

package/src/tokens/molecules/timeline.css

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --timeline-font-family: var(--font-family-sans); /** Familia tipográfica del historial */
+  --timeline-gap: var(--spacing-5); /** Separación vertical entre dos hitos */
+  --timeline-column-gap: var(--spacing-3); /** Separación entre la marca y el cuerpo del hito */
+  --timeline-rail-gap: var(--spacing-1); /** Aire entre la marca y el carril, arriba y abajo */
+  --timeline-title-line-height: var(--line-height-snug); /** Interlineado del título */
+  --timeline-meta-gap: var(--spacing-2); /** Separación entre fecha y autor */
+  --timeline-note-line-height: var(--line-height-normal); /** Interlineado de la nota */
+  --timeline-body-gap: var(--spacing-1); /** Separación entre título, metadatos y nota */
+  --timeline-actions-margin-block-start: var(--spacing-2); /** Aire sobre las acciones del hito */
+  --timeline-rail-width: var(--border-width-default); /** Grosor del carril que une las marcas */
+  --timeline-rail-color: var(--color-border-default-on-light); /** Color del carril — la línea del sistema, no un borde que destaque */
+  --timeline-title-font-size: var(--text-font-size); /** Tamaño del título del hito — texto corriente */
+  --timeline-title-font-weight: var(--font-weight-emphasis); /** Peso del título del hito */
+  --timeline-title-color: var(--color-text-on-light); /** Color del título del hito */
+  --timeline-meta-font-size: var(--text-paragraph-small-font-size); /** Tamaño de la fecha y el autor — letra menor */
+  --timeline-meta-color: var(--color-text-muted-on-light); /** Color de la fecha y el autor */
+  --timeline-meta-separator-color: var(--color-border-default-on-light); /** Color del punto que separa fecha y autor */
+  --timeline-note-font-size: var(--text-font-size); /** Tamaño de la nota — texto corriente */
+  --timeline-note-color: var(--color-text-on-light); /** Color de la nota */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --timeline-rail-color: var(--color-text-on-dark); /** Color del carril — surface-dark */
+  --timeline-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
+  --timeline-meta-color: var(--color-text-muted-on-dark); /** Color de fecha y autor — surface-dark */
+  --timeline-meta-separator-color: var(--color-text-on-dark); /** Color del punto separador — surface-dark */
+  --timeline-note-color: var(--color-text-on-dark); /** Color de la nota — surface-dark */
+}

package/src/tokens/molecules/timeline.ts

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

package/src/tokens/scss/_index.legacy.scss

@@ -160,5 +160,11 @@
 @import 'molecules/annotation-thread';
 @import 'components/text-inline';
 @import 'molecules/uptime-bars';
+@import 'molecules/timeline';
+@import 'molecules/clock-widget';
+@import 'molecules/heatmap';
+@import 'molecules/recurrence-field';
+@import 'molecules/planning-grid';
+@import 'molecules/org-chart';
 @import 'molecules/recovery-codes';
 @import 'molecules/connector-auth';

package/src/tokens/scss/_index.scss

@@ -160,5 +160,11 @@
 @forward 'molecules/annotation-thread';
 @forward 'components/text-inline';
 @forward 'molecules/uptime-bars';
+@forward 'molecules/timeline';
+@forward 'molecules/clock-widget';
+@forward 'molecules/heatmap';
+@forward 'molecules/recurrence-field';
+@forward 'molecules/planning-grid';
+@forward 'molecules/org-chart';
 @forward 'molecules/recovery-codes';
 @forward 'molecules/connector-auth';

package/src/tokens/scss/molecules/_app-launcher.scss

@@ -16,7 +16,8 @@ $lxd-app-launcher-trigger-label-font-weight: 300; // Peso de texto del disparado
 $lxd-app-launcher-trigger-label-line-height: 1.3; // Interlineado del disparador con texto — el de un ítem de SidebarNav
 $lxd-app-launcher-trigger-label-color: #111e30; // Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav
 $lxd-app-launcher-content-min-width: 20rem; // Ancho mínimo del popover
-$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps
+$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps a partir de `sm`
+$lxd-app-launcher-content-columns-narrow: 2; // Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero
 $lxd-app-launcher-content-gap: 0.25rem; // Espacio entre tiles
 $lxd-app-launcher-content-bg: #ffffff; // Fondo del panel
 $lxd-app-launcher-content-border-width: 1px; // Borde del panel
@@ -24,14 +25,15 @@ $lxd-app-launcher-content-border-color: #111e30; // Color del borde del panel
 $lxd-app-launcher-content-border-radius: 0px; // Radio del panel
 $lxd-app-launcher-content-shadow: none; // Sombra del panel
 $lxd-app-launcher-content-z-index: 400; // Z-index del popover
-$lxd-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
+$lxd-app-launcher-content-max-height: var(--available-height); // Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll
 $lxd-app-launcher-content-padding-block: 0.75rem; // Padding vertical del panel
 $lxd-app-launcher-content-padding-inline: 0.75rem; // Padding horizontal del panel
 $lxd-app-launcher-transition-duration: 150ms; // Duración de la animación de entrada/salida
 $lxd-app-launcher-transition-easing: ease; // Easing de la animación
 $lxd-app-launcher-tile-padding-block: 0.5rem; // Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
 $lxd-app-launcher-tile-padding-inline: 1rem; // Padding horizontal de cada tile — el de un ítem de Menu
-$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el nombre y el badge «nuevo» dentro del tile
+$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el distintivo y el nombre dentro del tile
+$lxd-app-launcher-tile-badge-block-size: calc(0.875rem * 1 + 2 * 0.25rem); // Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla
 $lxd-app-launcher-tile-border-radius: 0px; // Radio de cada tile
 $lxd-app-launcher-tile-name-font-size: 0.875rem; // Tamaño de texto del nombre de app
 $lxd-app-launcher-tile-name-font-weight: 300; // Peso del nombre de app

package/src/tokens/scss/molecules/_clock-widget.scss

@@ -0,0 +1,22 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-clock-widget-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del fichaje
+$lxd-clock-widget-gap: 1rem; // Separación entre los bloques del fichaje
+$lxd-clock-widget-header-gap: 0.25rem; // Separación entre el título y el día
+$lxd-clock-widget-date-font-size: 0.875rem; // Tamaño del día — letra menor
+$lxd-clock-widget-date-color: #4a4a4a; // Color del día
+$lxd-clock-widget-status-gap: 0.5rem; // Separación entre el punto de estado y su texto
+$lxd-clock-widget-status-font-size: 0.875rem; // Tamaño del texto de estado
+$lxd-clock-widget-status-color: #4a4a4a; // Color del texto de estado
+$lxd-clock-widget-status-dot-size: 0.5rem; // Lado del punto de estado
+$lxd-clock-widget-status-dot-radius: 9999px; // Radio del punto de estado — redondo, es una luz, no una ficha
+$lxd-clock-widget-status-dot-open-bg: #006616; // Punto de estado con el turno abierto — relleno universal de acierto
+$lxd-clock-widget-status-dot-closed-bg: #d0d0d0; // Punto de estado con el turno cerrado — la línea del sistema, sin color de feedback
+$lxd-clock-widget-elapsed-font-size: 2rem; // Tamaño del tiempo transcurrido — la cifra grande del fichaje
+$lxd-clock-widget-elapsed-font-weight: 500; // Peso del tiempo transcurrido
+$lxd-clock-widget-elapsed-line-height: 1.1; // Interlineado del tiempo transcurrido
+$lxd-clock-widget-elapsed-color: #111e30; // Color del tiempo transcurrido
+$lxd-clock-widget-elapsed-label-font-size: 0.875rem; // Tamaño de la etiqueta del tiempo transcurrido
+$lxd-clock-widget-elapsed-label-color: #4a4a4a; // Color de la etiqueta del tiempo transcurrido
+$lxd-clock-widget-footer-margin-block-start: 0.5rem; // Aire sobre el pie del fichaje

package/src/tokens/scss/molecules/_heatmap.scss

@@ -0,0 +1,48 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-heatmap-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la matriz
+$lxd-heatmap-radius: 0px; // Radio del marco de la matriz
+$lxd-heatmap-border-color: #111e30; // Color de la rejilla
+$lxd-heatmap-border-width: 1px; // Grosor de la rejilla
+$lxd-heatmap-row-header-width: 10rem; // Ancho de la columna de filas
+$lxd-heatmap-row-header-font-size: 0.875rem; // Tamaño del nombre de la fila
+$lxd-heatmap-row-header-color: #111e30; // Color del nombre de la fila
+$lxd-heatmap-row-header-font-weight: 300; // Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita)
+$lxd-heatmap-row-header-bg: #ffffff; // Fondo sticky de la columna de filas
+$lxd-heatmap-row-header-padding-block: 0.5rem; // Padding vertical del nombre de la fila
+$lxd-heatmap-row-header-padding-inline: 0.75rem; // Padding horizontal del nombre de la fila
+$lxd-heatmap-column-header-font-size: 0.75rem; // Tamaño del nombre de la columna
+$lxd-heatmap-column-header-font-weight: 500; // Peso del nombre de la columna
+$lxd-heatmap-column-header-color: #4a4a4a; // Color del nombre de la columna
+$lxd-heatmap-column-header-bg: #ffffff; // Fondo del encabezado de columna
+$lxd-heatmap-column-header-padding-block: 0.5rem; // Padding vertical del encabezado de columna
+$lxd-heatmap-column-header-padding-inline: 0.5rem; // Padding horizontal del encabezado de columna
+$lxd-heatmap-column-header-width: 3rem; // Ancho mínimo de una columna de datos
+$lxd-heatmap-group-header-font-size: 0.75rem; // Tamaño del nombre del grupo de columnas
+$lxd-heatmap-group-header-color: #4a4a4a; // Color del nombre del grupo de columnas
+$lxd-heatmap-cell-padding-block: 0.5rem; // Padding vertical de una celda de dato
+$lxd-heatmap-cell-padding-inline: 0.5rem; // Padding horizontal de una celda de dato
+$lxd-heatmap-cell-font-size: 0.875rem; // Tamaño de la cifra de la celda
+$lxd-heatmap-cell-font-weight: 500; // Peso de la cifra de la celda
+$lxd-heatmap-empty-bg: #f2f2f2; // Fondo de una celda sin dato — superficie secundaria, no un paso de la rampa
+$lxd-heatmap-empty-pattern-color: #d0d0d0; // Color de la trama de la celda sin dato: lo que la separa de la rampa sin depender del color
+$lxd-heatmap-empty-pattern-width: 0.25rem; // Ancho de la trama de la celda sin dato
+$lxd-heatmap-legend-gap: 0.5rem; // Separación entre los elementos de la leyenda
+$lxd-heatmap-legend-font-size: 0.875rem; // Tamaño del texto de la leyenda
+$lxd-heatmap-legend-color: #4a4a4a; // Color del texto de la leyenda
+$lxd-heatmap-legend-swatch-size: 0.75rem; // Lado del cuadradito de la leyenda
+$lxd-heatmap-legend-swatch-gap: 0.25rem; // Separación entre cuadraditos de la leyenda
+$lxd-heatmap-margin-block-start: 0.75rem; // Aire entre la matriz y su leyenda
+$lxd-heatmap-step-1-bg: #dce9fc; // Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema
+$lxd-heatmap-step-1-color: #111e30; // Tinta sobre el paso 1 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-step-2-bg: #b6d2f8; // Paso 2 de la rampa de la matriz — sequential-200 de la rampa secuencial del sistema
+$lxd-heatmap-step-2-color: #111e30; // Tinta sobre el paso 2 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-step-3-bg: #8fbaf5; // Paso 3 de la rampa de la matriz — sequential-300 de la rampa secuencial del sistema
+$lxd-heatmap-step-3-color: #111e30; // Tinta sobre el paso 3 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-step-4-bg: #3b88ee; // Paso 4 de la rampa de la matriz — sequential-500 de la rampa secuencial del sistema
+$lxd-heatmap-step-4-color: #111e30; // Tinta sobre el paso 4 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-step-5-bg: #236ac5; // Paso 5 de la rampa de la matriz — sequential-600 de la rampa secuencial del sistema
+$lxd-heatmap-step-5-color: #ffffff; // Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-step-6-bg: #164b90; // Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema
+$lxd-heatmap-step-6-color: #ffffff; // Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno