@studiolxd/brand 49.11.0 → 49.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.11.0",
+  "version": "49.13.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,41 @@
       "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"
+    },
+    "./site-search": {
+      "types": "./dist/_types/organisms/SiteSearch/SiteSearch.d.ts",
+      "import": "./dist/site-search.js",
+      "default": "./dist/site-search.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,13 @@
 @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/site-search.css";
 @import "./molecules/copy-button.css";
 @import "./molecules/confirm-dialog.css";
 @import "./molecules/avatar-upload.css";

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-search.css

@@ -0,0 +1,59 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-search-field-basis: 12rem; /** Ancho a partir del cual el campo y el botón dejan de caber en la misma línea: por debajo, el botón se va abajo. Es el ancho mínimo con el que el campo sigue siendo un campo de búsqueda y no una casilla */
+  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
+  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
+  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
+  --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
+  --site-search-form-gap: var(--spacing-2); /** Aire entre el campo y el botón de buscar */
+  --site-search-block-gap: var(--spacing-3); /** Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga) */
+  --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
+  --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
+  --site-search-results-gap: var(--spacing-4); /** Aire entre dos resultados */
+  --site-search-result-gap: var(--spacing-1); /** Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección */
+  --site-search-result-padding-block: var(--spacing-4); /** Aire sobre el separador de cada resultado */
+  --site-search-result-section-font-size: var(--font-size-0); /** Cuerpo del rastro de sección («Documentación › Creator») */
+  --site-search-result-excerpt-line-height: var(--line-height-normal); /** Interlineado del extracto */
+  --site-search-result-measure: var(--content-measure); /** Medida de lectura del extracto: la del sistema (70ch). El filete y la lista siguen ocupando todo el ancho —son estructura—, pero el texto que se lee para decidir si el resultado sirve no se estira a lo ancho de una pantalla grande */
+  --site-search-result-url-font-size: var(--font-size-0); /** Cuerpo de la dirección del resultado */
+  --site-search-suggestions-gap: var(--spacing-2); /** Aire entre las sugerencias de búsqueda */
+  --site-search-suggestions-label-font-size: var(--font-size-0); /** Cuerpo del rótulo de las sugerencias */
+  --site-search-skeleton-gap: var(--spacing-2); /** Aire entre las barras de un resultado fantasma */
+  --site-search-status-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada */
+  --site-search-status-color: var(--color-text-muted-on-light); /** Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos */
+  --site-search-status-query-font-weight: var(--font-weight-emphasis); /** Peso de la consulta dentro del aviso: lo único que cambia de una búsqueda a otra */
+  --site-search-result-separator-color: var(--color-border-default-on-light); /** Filete que separa dos resultados */
+  --site-search-result-separator-width: var(--border-width-default); /** Grosor del filete que separa dos resultados */
+  --site-search-result-title-font-size: var(--text-font-size); /** Cuerpo del título del resultado: el del texto que indexa */
+  --site-search-result-title-font-weight: var(--font-weight-emphasis); /** Peso del título del resultado */
+  --site-search-result-title-color: var(--color-text-on-light); /** Color del título del resultado */
+  --site-search-result-section-color: var(--color-text-muted-on-light); /** Color del rastro de sección — atenuado */
+  --site-search-result-excerpt-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del extracto: un peldaño por debajo del título */
+  --site-search-result-excerpt-color: var(--color-text-on-light); /** Color del extracto — la tinta de la superficie: es lo que se lee para decidir si el resultado sirve */
+  --site-search-result-url-color: var(--color-text-muted-on-light); /** Color de la dirección — atenuada */
+  --site-search-result-link-hover-line-width: var(--border-width-default); /** Grosor de la línea bajo el título del resultado con el puntero encima. Un estado se marca con una línea de tinta, nunca con relleno */
+  --site-search-result-link-hover-line-offset: var(--link-underline-offset); /** Separación entre el título y su línea de hover. Apunta a la del enlace: en el DS todo subrayado se separa del texto lo mismo */
+  --site-search-result-focus-ring-color: var(--color-primary); /** Color del anillo de foco del enlace del resultado */
+  --site-search-result-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --site-search-result-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --site-search-result-mark-bg: var(--color-accent-2); /** Fondo del resaltado de coincidencias (`<mark>`): el amarillo de marca, el mismo que usa `DocsSearch`. Es un relleno autocontenido —fondo y tinta emparejados—, así que no cambia en superficie oscura */
+  --site-search-result-mark-color: var(--color-text-on-light); /** Tinta del resaltado sobre el amarillo */
+  --site-search-suggestions-label-color: var(--color-text-muted-on-light); /** Color del rótulo de las sugerencias — atenuado */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --site-search-result-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del enlace del resultado — surface-dark */
+  --site-search-status-color: var(--color-text-muted-on-dark); /** Aviso de estado — surface-dark */
+  --site-search-result-separator-color: var(--color-text-on-dark); /** Filete entre resultados — surface-dark */
+  --site-search-result-title-color: var(--color-text-on-dark); /** Título del resultado — surface-dark */
+  --site-search-result-section-color: var(--color-text-muted-on-dark); /** Rastro de sección — surface-dark */
+  --site-search-result-excerpt-color: var(--color-text-on-dark); /** Extracto — surface-dark */
+  --site-search-result-url-color: var(--color-text-muted-on-dark); /** Dirección del resultado — surface-dark */
+  --site-search-suggestions-label-color: var(--color-text-muted-on-dark); /** Rótulo de las sugerencias — surface-dark */
+}

package/src/tokens/molecules/site-search.ts

@@ -0,0 +1,7 @@
+import siteSearch from '../../../tokens/organism/site-search.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(siteSearch as never);
+
+export const siteSearchBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const siteSearchDarkTokens = all.filter(t => t.name.includes('surface-dark'));

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,12 @@
 @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/site-search';
 @import 'molecules/recovery-codes';
 @import 'molecules/connector-auth';

package/src/tokens/scss/_index.scss

@@ -160,5 +160,12 @@
 @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/site-search';
 @forward 'molecules/recovery-codes';
 @forward 'molecules/connector-auth';

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