@studiolxd/brand 38.12.4

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --dropdown-field-gap: var(--spacing-2); /** Entre la etiqueta y el control, como en el resto de campos */
+  --dropdown-field-sm-height: var(--size-component-sm); /** Altura — sm */
+  --dropdown-field-lg-height: var(--size-component-lg); /** Altura — lg */
+  --dropdown-field-content-gap: var(--spacing-2); /** Entre el contenido del control y el chevron */
+  --dropdown-field-icon-transition-easing: var(--motion-easing-default); /** Curva del giro del chevron */
+  --dropdown-field-disabled-opacity: var(--opacity-disabled); /** Opacidad del control deshabilitado */
+  --dropdown-field-disabled-cursor: var(--input-disabled-cursor); /** Cursor del control deshabilitado: el de los campos */
+  --dropdown-field-height: var(--control-height); /** El control mide la talla del sistema (md) */
+  --dropdown-field-sm-font-size: var(--select-sm-font-size); /** Cuerpo — sm (el del Select) */
+  --dropdown-field-value-icon-size: var(--menu-item-icon-size); /** Icono dentro del control: la misma talla que en las opciones del menú, para que plegado y desplegado casen */
+  --dropdown-field-sm-value-icon-size: var(--menu-sm-item-icon-size); /** Icono dentro del control — sm */
+  --dropdown-field-lg-value-icon-size: var(--menu-lg-item-icon-size); /** Icono dentro del control — lg */
+  --dropdown-field-lg-font-size: var(--select-lg-font-size); /** Cuerpo — lg (el del Select) */
+  --dropdown-field-sm-padding-inline: var(--select-sm-padding-inline); /** Padding inline — sm */
+  --dropdown-field-lg-padding-inline: var(--select-lg-padding-inline); /** Padding inline — lg */
+  --dropdown-field-font-family: var(--select-font-family); /** Familia tipográfica: la del Select */
+  --dropdown-field-font-size: var(--select-font-size); /** Cuerpo: el del Select */
+  --dropdown-field-bg: var(--select-bg); /** Fondo del control */
+  --dropdown-field-icon-transition: var(--select-icon-transition); /** Giro del chevron al abrir */
+  --dropdown-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --dropdown-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --dropdown-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --dropdown-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --dropdown-field-padding-inline: var(--select-padding-inline); /** Padding inline del control: el del Select */
+  --dropdown-field-font-weight: var(--select-font-weight); /** Peso: el del Select */
+  --dropdown-field-color: var(--select-color); /** Texto del control */
+  --dropdown-field-border-width: var(--select-border-width); /** Borde rectangular, como el Select */
+  --dropdown-field-border-color: var(--select-border-color); /** Color del borde */
+  --dropdown-field-border-radius: var(--select-border-radius); /** Radio: el del Select (rectangular) */
+  --dropdown-field-focus-ring-width: var(--select-focus-ring-width); /** Anillo de foco */
+  --dropdown-field-focus-ring-color: var(--select-focus-ring-color); /** Anillo de foco */
+  --dropdown-field-error-border-color: var(--select-error-border-color); /** Borde en error: el mismo que el del Select */
+  --dropdown-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --dropdown-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --dropdown-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --dropdown-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --dropdown-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --dropdown-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --dropdown-field-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --dropdown-field-color: var(--color-text-on-dark); /** Texto — surface-dark */
+  --dropdown-field-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --dropdown-field-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+  --dropdown-field-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --dropdown-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --dropdown-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

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

@@ -0,0 +1,4 @@
+import dropdownField from '../../../tokens/molecule/dropdown-field.json';
+import { flattenTokens } from '../utils';
+
+export const dropdownFieldTokens = flattenTokens(dropdownField as never);

package/src/tokens/molecules/empty-state.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --empty-state-icon-size-sm: 2rem; /** Tamaño del icono — variante sm */
+  --empty-state-gap: var(--spacing-4); /** Gap entre icono, cuerpo y acción */
+  --empty-state-body-gap: var(--spacing-2); /** Gap entre título y descripción */
+  --empty-state-padding-block: var(--spacing-7); /** Padding vertical del contenedor */
+  --empty-state-padding-inline: var(--spacing-5); /** Padding horizontal del contenedor */
+  --empty-state-icon-size: var(--icon-size-lg); /** Tamaño del icono — variante md (unificado con el icono destacado del sistema) */
+  --empty-state-title-font-size-sm: var(--font-size-3); /** Tamaño tipográfico del título — variante sm */
+  --empty-state-description-font-size-sm: var(--font-size-1); /** Tamaño tipográfico de la descripción — variante sm */
+  --empty-state-title-font-family: var(--font-family-sans); /** Familia tipográfica del título */
+  --empty-state-title-font-size: var(--font-size-4); /** Tamaño tipográfico del título */
+  --empty-state-description-font-family: var(--font-family-sans); /** Familia tipográfica de la descripción */
+  --empty-state-icon-color: var(--color-icon-secondary-on-light); /** Color del icono */
+  --empty-state-title-font-weight: var(--font-weight-emphasis); /** Peso del título */
+  --empty-state-title-color: var(--color-text-muted-on-light); /** Color del título — es texto, nunca grey-dark */
+  --empty-state-description-font-size: var(--text-font-size); /** La descripción hereda el cuerpo de la superficie (la variante sm tiene talla propia) */
+  --empty-state-description-color: var(--color-text-muted-on-light); /** Color de la descripción — es texto, nunca grey-dark */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --empty-state-title-color: var(--color-text-muted-on-dark); /** Título — superficie oscura */
+  --empty-state-description-color: var(--color-text-muted-on-dark); /** Descripción — superficie oscura */
+  --empty-state-icon-color: var(--color-text-muted-on-dark); /** Icono — surface-dark: `grey-dark` no llega a 3:1 sobre prusia */
+}

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

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --field-row-cell-sm: 8rem; /** Ancho propio de una celda estrecha (128px): un código postal, una cantidad */
+  --field-row-cell-md: 12rem; /** Ancho propio de una celda normal (192px): el select de un papel («Administración») */
+  --field-row-cell-lg: 16rem; /** Ancho propio de una celda ancha (256px): un select de etiquetas largas */
+  --field-row-lg-cell-sm: 10rem; /** Ancho propio de una celda estrecha — talla lg (160px): el mismo ancho, un peldaño arriba, porque la letra del control también sube */
+  --field-row-lg-cell-md: 15rem; /** Ancho propio de una celda normal — talla lg (240px) */
+  --field-row-lg-cell-lg: 20rem; /** Ancho propio de una celda ancha — talla lg (320px) */
+  --field-row-column-gap: var(--spacing-4); /** Aire entre las celdas de la fila, en columnas */
+  --field-row-row-gap: var(--spacing-3); /** Aire entre las celdas apiladas (móvil) */
+  --field-row-rows-gap: var(--spacing-3); /** Aire entre filas de la lista: el de los elementos de una lista, más apretado que el de campos sueltos de un formulario */
+  --field-row-rows-stack-gap: var(--spacing-5); /** Aire entre filas cuando están apiladas (móvil): más que el que separa los campos dentro de una fila, o la lista se lee como una sola pila */
+  --field-row-empty-line-height: var(--line-height-normal); /** Interlineado del aviso de lista vacía */
+  --field-row-label-font-size: var(--label-font-size); /** Cuerpo de la etiqueta que la fila reserva sobre la acción — el del Label */
+  --field-row-sm-label-font-size: var(--label-sm-font-size); /** Cuerpo de la etiqueta — talla sm */
+  --field-row-lg-label-font-size: var(--label-lg-font-size); /** Cuerpo de la etiqueta — talla lg */
+  --field-row-label-line-height: var(--label-line-height); /** Interlineado de la etiqueta — el del Label: con el cuerpo, da la altura del hueco */
+  --field-row-label-gap: var(--input-field-gap); /** Aire entre la etiqueta y su control — el de los campos: completa el hueco que baja la acción hasta la línea de los controles */
+  --field-row-empty-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del aviso de lista vacía */
+  --field-row-empty-color: var(--color-text-muted-on-light); /** Color del aviso de lista vacía — atenuado */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --field-row-empty-color: var(--color-text-muted-on-dark); /** Color del aviso de lista vacía — surface-dark */
+}

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

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

package/src/tokens/molecules/file-upload-field.css

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

package/src/tokens/molecules/file-upload-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/file-upload-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const fileUploadFieldBaseTokens   = all.filter(t => !t.name.startsWith('--file-upload-field-error-') && !t.name.startsWith('--file-upload-field-helper-'));
+export const fileUploadFieldErrorTokens  = all.filter(t => t.name.startsWith('--file-upload-field-error-'));
+export const fileUploadFieldHelperTokens = all.filter(t => t.name.startsWith('--file-upload-field-helper-'));

package/src/tokens/molecules/filter-bar.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --filter-bar-column-min-inline-size: var(--field-row-cell-md); /** Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse */
+  --filter-bar-gap: var(--form-gap); /** Aire entre la línea del buscador y la de los filtros: el mismo que separa dos campos de un formulario, porque eso es lo que son */
+  --filter-bar-column-gap: var(--field-row-column-gap); /** Aire entre las columnas de filtros — el de las celdas de una fila de campos */
+  --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil */
+  --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
+}

package/src/tokens/molecules/filter-bar.ts

@@ -0,0 +1,5 @@
+import filterBar from '../../../tokens/molecule/filter-bar.json';
+import { flattenTokens } from '../utils';
+
+// La barra es maqueta: no pinta ni un color, así que no tiene par oscuro.
+export const filterBarTokens = flattenTokens(filterBar as never);

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --form-field-gap: var(--spacing-1); /** Respiro entre la etiqueta, el control y la ayuda/error de un campo */
+}

package/src/tokens/molecules/image-crop-dialog.css

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --image-crop-dialog-area-max-height: 60vh; /** Alto máximo del área de recorte — la imagen se ajusta dentro */
+  --image-crop-dialog-gap: var(--spacing-4); /** Separación entre el área de recorte y las acciones */
+  --image-crop-dialog-area-min-height: var(--image-crop-dialog-area-max-height); /** Alto reservado para el área de recorte desde el primer render: el mismo que su máximo, para que la imagen no mueva la maqueta al cargar */
+  --image-crop-dialog-actions-gap: var(--spacing-2); /** Separación entre los botones de acción */
+  --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light); /** Fondo tras la imagen mientras se recorta: la superficie clara secundaria del sistema */
+  --image-crop-dialog-area-border-radius: var(--border-radius-default); /** Radio del área de recorte */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --image-crop-dialog-area-bg: var(--color-surface-secondary-on-dark); /** Fondo del área de recorte — surface-dark */
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --input-field-gap: var(--spacing-2); /** Espacio entre label, input, helper y error */
+  --input-field-search-slot-size: var(--size-component-md); /** Lado del hueco que ocupa un icono de la variante de búsqueda: la talla md, la misma que el campo — así lupa y aspa quedan cuadradas sobre el control */
+  --input-field-search-sm-slot-size: var(--size-component-sm); /** Lado del hueco del icono — sm */
+  --input-field-search-lg-slot-size: var(--size-component-lg); /** Lado del hueco del icono — lg */
+  --input-field-search-icon-size: var(--font-size-3); /** Tamaño del glifo (lupa y aspa) — md (20px, acorde al campo de 40). El mismo peldaño que el toggle de PasswordField */
+  --input-field-search-sm-icon-size: var(--icon-size-sm); /** Tamaño del glifo — sm (16px) */
+  --input-field-search-lg-icon-size: var(--icon-size-md); /** Tamaño del glifo — lg (24px) */
+  --input-field-search-icon-color: var(--color-primary); /** Color de la lupa: tinta, prusia sobre claro. La lupa no es un control — no cambia con el puntero */
+  --input-field-search-clear-color: var(--color-primary); /** Color del aspa de borrado: la misma tinta que la lupa */
+  --input-field-search-clear-hover-color: var(--color-primary); /** Color del aspa en hover (sin cambio: la tinta no se atenúa, y el hover no pinta fondo; el foco se marca con el anillo) */
+  --input-field-search-clear-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del aspa */
+  --input-field-search-clear-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco del aspa (se dibuja hacia dentro de la caja: el aspa va a ras del borde del campo) */
+  --input-field-search-clear-focus-ring-color: var(--color-primary); /** Color del anillo de foco del aspa: la tinta de la superficie */
+  --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size); /** Padding izquierdo del campo — el texto empieza donde acaba la lupa */
+  --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size); /** Padding derecho del campo cuando ofrece borrado — el texto termina donde empieza el aspa */
+  --input-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --input-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --input-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --input-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --input-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --input-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --input-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --input-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --input-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --input-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --input-field-search-icon-color: var(--color-text-on-dark); /** Color de la lupa — surface-dark (blanco) */
+  --input-field-search-clear-color: var(--color-text-on-dark); /** Color del aspa — surface-dark */
+  --input-field-search-clear-hover-color: var(--color-text-on-dark); /** Color del aspa en hover — surface-dark */
+  --input-field-search-clear-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del aspa — surface-dark */
+  --input-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --input-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

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

@@ -0,0 +1,12 @@
+import inputFieldJson from '../../../tokens/molecule/input-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(inputFieldJson as never);
+
+export const inputFieldBaseTokens = all.filter(t => t.name === '--input-field-gap');
+
+export const inputFieldErrorTokens = all.filter(t => t.name.startsWith('--input-field-error-'));
+
+export const inputFieldHelperTokens = all.filter(t => t.name.startsWith('--input-field-helper-'));
+
+export const inputFieldSearchTokens = all.filter(t => t.name.startsWith('--input-field-search-'));

package/src/tokens/molecules/input-phone-field.css

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

package/src/tokens/molecules/input-phone-field.ts

@@ -0,0 +1,8 @@
+import inputPhoneField from '../../../tokens/molecule/input-phone-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(inputPhoneField as never);
+
+export const inputPhoneFieldBaseTokens   = all.filter(t => t.name === '--input-phone-field-gap');
+export const inputPhoneFieldErrorTokens  = all.filter(t => t.name.startsWith('--input-phone-field-error-'));
+export const inputPhoneFieldHelperTokens = all.filter(t => t.name.startsWith('--input-phone-field-helper-'));

package/src/tokens/molecules/language-switcher.css

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --language-switcher-list-gap: var(--spacing-4); /** Separación entre idiomas en la lista desplegada */
+  --language-switcher-list-font-size: var(--font-size-2); /** Idiomas en la lista */
+  --language-switcher-list-current-font-weight: var(--font-weight-emphasis); /** Idioma actual en la lista: solo cambia el peso */
+  --language-switcher-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
+  --language-switcher-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --language-switcher-focus-ring-color: var(--color-primary); /** Anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --language-switcher-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/language-switcher.ts

@@ -0,0 +1,4 @@
+import languageSwitcher from '../../../tokens/molecule/language-switcher.json';
+import { flattenTokens } from '../utils';
+
+export const languageSwitcherTokens = flattenTokens(languageSwitcher as never);

package/src/tokens/molecules/menu.css

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --menu-content-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchos ítems, el panel hace scroll en vez de salirse de la pantalla */
+  --menu-item-cursor: pointer; /** Cursor de ítems */
+  --menu-padding-block: var(--spacing-2); /** Padding vertical del panel */
+  --menu-padding-inline: var(--spacing-2); /** Padding lateral del panel */
+  --menu-item-padding-block: var(--spacing-2); /** Padding vertical de cada ítem */
+  --menu-item-padding-inline: var(--spacing-4); /** Padding horizontal de cada ítem */
+  --menu-item-icon-gap: var(--spacing-2); /** Gap entre icono y texto del ítem */
+  --menu-item-icon-size: var(--font-size-4); /** Talla del icono y del glifo de radio */
+  --menu-sm-item-icon-size: var(--icon-size-sm); /** Talla del icono de ítem — talla sm (16px) */
+  --menu-lg-item-icon-size: var(--font-size-4); /** Talla del icono de ítem — talla lg (24px, la base: el ítem ya es grande) */
+  --menu-item-font-family: var(--font-family-sans); /** Tipografía de ítems */
+  --menu-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
+  --menu-item-line-height: var(--line-height-snug); /** Interlineado de ítems */
+  --menu-label-padding-block: var(--spacing-2); /** Padding vertical del rótulo de sección */
+  --menu-label-padding-inline: var(--spacing-4); /** Padding horizontal del rótulo de sección */
+  --menu-label-font-size: var(--font-size-1); /** Tamaño de texto del rótulo de sección */
+  --menu-disabled-opacity: var(--opacity-disabled); /** Opacidad de ítems deshabilitados */
+  --menu-z-index: var(--floating-panel-z-index); /** Capa z del panel flotante */
+  --menu-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
+  --menu-sm-item-font-size: var(--select-sm-font-size); /** Tamaño de texto de ítems — talla sm (la del Select, para que el panel case con su disparador) */
+  --menu-sm-item-padding-block: var(--select-sm-item-padding-block); /** Padding vertical de cada ítem — talla sm */
+  --menu-lg-item-font-size: var(--select-lg-font-size); /** Tamaño de texto de ítems — talla lg (la del Select) */
+  --menu-lg-item-padding-block: var(--select-lg-item-padding-block); /** Padding vertical de cada ítem — talla lg */
+  --menu-item-font-weight: var(--font-weight-default); /** Peso de texto de ítems */
+  --menu-item-color: var(--color-text-on-light); /** Color de texto de ítems */
+  --menu-item-highlighted-bg: var(--color-primary); /** Relleno del ítem bajo el puntero o el teclado (`[data-highlighted]`): la inversión de marca. Excepción declarada a «los estados no se rellenan» (Foundations → Colores): en una lista de opciones densa el relleno es lo único que se lee de un vistazo mientras el teclado la recorre */
+  --menu-item-highlighted-color: var(--color-text-on-dark); /** Texto del ítem resaltado: invierte con el relleno — iconos y atajos lo heredan por `currentColor` */
+  --menu-item-selected-font-weight: var(--font-weight-emphasis); /** La opción elegida de un grupo de radio, en énfasis: sin glifo */
+  --menu-item-destructive-color: var(--color-destructive-text-on-light); /** Color de texto de ítem destructivo */
+  --menu-item-destructive-highlighted-bg: var(--color-destructive-fill); /** Relleno del ítem destructivo resaltado: el rojo sólido, universal en las dos superficies */
+  --menu-item-destructive-highlighted-color: var(--color-destructive-fill-text); /** Texto del ítem destructivo resaltado */
+  --menu-label-font-weight: var(--font-weight-emphasis); /** Peso del rótulo de sección */
+  --menu-label-color: var(--color-text-muted-on-light); /** Color del rótulo de sección */
+  --menu-separator-margin-block: var(--separator-spacing-md); /** Margen vertical del separador — el aire md de la línea del sistema */
+  --menu-transition-duration: var(--floating-panel-transition-duration); /** Duración de transición */
+  --menu-transition-easing: var(--floating-panel-transition-easing); /** Easing de transición */
+  --menu-bg: var(--floating-panel-bg); /** Fondo del panel — mismo lenguaje que ContextMenu */
+  --menu-border-width: var(--floating-panel-border-width); /** Grosor del borde del panel */
+  --menu-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --menu-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --menu-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+  --menu-separator-color: var(--separator-color); /** Color del separador — el de la línea del sistema */
+  --menu-separator-height: var(--separator-thickness); /** Alto del separador — el grosor de la línea del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --menu-item-color: var(--color-text-on-dark); /** Color de texto de ítems — surface-dark */
+  --menu-item-highlighted-bg: var(--color-text-on-dark); /** Relleno del ítem resaltado — surface-dark: la misma inversión de marca, al revés */
+  --menu-item-highlighted-color: var(--color-primary); /** Texto del ítem resaltado — surface-dark */
+  --menu-separator-color: var(--color-text-on-dark); /** Color del separador — surface-dark */
+  --menu-label-color: var(--color-text-muted-on-dark); /** Color del rótulo de sección — surface-dark */
+  --menu-item-destructive-color: var(--color-destructive-text-on-dark); /** Color de ítem destructivo — surface-dark */
+  --menu-item-destructive-highlighted-bg: var(--color-destructive-fill); /** Relleno del ítem destructivo resaltado — surface-dark (el fill no cambia: es universal) */
+  --menu-item-destructive-highlighted-color: var(--color-destructive-fill-text); /** Texto del ítem destructivo resaltado — surface-dark */
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --message-composer-gap: var(--spacing-2); /** Separación entre el campo y los botones dentro del marco */
+  --message-composer-padding-block: var(--spacing-3); /** Aire vertical del marco */
+  --message-composer-padding-inline: var(--spacing-4); /** Aire horizontal del marco */
+  --message-composer-border-style: var(--textarea-border-style); /** Estilo del marco — cascada desde textarea */
+  --message-composer-helper-gap: var(--spacing-2); /** Separación entre el marco y la línea de ayuda */
+  --message-composer-helper-line-height: var(--line-height-relaxed); /** Interlineado de la línea de ayuda: holgado, porque lleva teclas dentro y en pantalla estrecha rompe en dos renglones */
+  --message-composer-bg: var(--textarea-bg); /** Fondo del marco — cascada desde textarea */
+  --message-composer-helper-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la línea de ayuda: un peldaño por debajo del texto de la superficie */
+  --message-composer-helper-color: var(--color-text-muted-on-light); /** Tinta de la línea de ayuda */
+  --message-composer-border-radius: var(--textarea-border-radius); /** Radio del marco — cascada desde textarea */
+  --message-composer-border-width: var(--textarea-border-width); /** Grosor del marco — cascada desde textarea */
+  --message-composer-border-color: var(--textarea-border-color); /** Color del marco — cascada desde textarea */
+  --message-composer-focus-border-color: var(--textarea-focus-border-color); /** Color del marco con el foco dentro — cascada desde textarea */
+  --message-composer-focus-ring-inset-offset: var(--textarea-focus-ring-inset-offset); /** Separación entre el marco y el anillo de foco */
+  --message-composer-focus-ring-color: var(--textarea-focus-ring-color); /** Color del anillo de foco */
+  --message-composer-disabled-bg: var(--textarea-disabled-bg); /** Fondo del marco deshabilitado — cascada desde textarea */
+  --message-composer-disabled-border-color: var(--textarea-disabled-border-color); /** Color del marco deshabilitado — cascada desde textarea */
+  --message-composer-focus-ring-width: var(--textarea-focus-ring-width); /** Grosor del anillo de foco. Lo dibuja el marco, no el campo: el campo va en variante `bare` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --message-composer-bg: var(--color-background-dark); /** Fondo del marco — superficie oscura */
+  --message-composer-border-color: var(--color-text-on-dark); /** Color del marco — superficie oscura */
+  --message-composer-focus-border-color: var(--color-text-on-dark); /** Color del marco con el foco dentro — superficie oscura */
+  --message-composer-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — superficie oscura */
+  --message-composer-helper-color: var(--color-text-muted-on-dark); /** Tinta de la línea de ayuda — superficie oscura */
+  --message-composer-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo del marco deshabilitado — superficie oscura */
+  --message-composer-disabled-border-color: var(--color-disabled-border-on-dark); /** Color del marco deshabilitado — superficie oscura */
+}

package/src/tokens/molecules/modal.css

@@ -0,0 +1,50 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --modal-border-color: rgba(0, 0, 0, 0); /** Sin borde en superficie clara: el velo y el fondo blanco ya separan el panel */
+  --modal-width-max: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
+  --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que width-max */
+  --modal-z-index: var(--z-index-modal); /** z-index del panel modal */
+  --modal-backdrop-z-index: var(--z-index-backdrop); /** z-index del backdrop */
+  --modal-backdrop-bg: var(--color-black); /** Color del backdrop/scrim */
+  --modal-backdrop-opacity: var(--opacity-overlay); /** Opacidad del backdrop (0.6) */
+  --modal-padding-block: var(--spacing-6); /** Padding vertical del panel */
+  --modal-padding-inline: var(--spacing-6); /** Padding horizontal del panel */
+  --modal-header-gap: var(--spacing-4); /** Gap entre título y botón ✕ */
+  --modal-title-font-size: var(--font-size-6); /** Tamaño del título (2rem) */
+  --modal-title-line-height: var(--line-height-tight); /** Interlineado del título — el de un título grande. Con el cuerpo del título da la altura de su primera línea, que es sobre la que se centra el aspa de cerrar */
+  --modal-transition-duration: var(--motion-duration-base); /** Duración de la animación entrada/salida */
+  --modal-transition-easing: var(--motion-easing-in-out); /** Easing de la animación */
+  --modal-content-enter-offset: var(--spacing-2); /** Desplazamiento vertical del panel al entrar/salir (8px) */
+  --modal-description-margin-block-end: var(--spacing-4); /** Separación entre la descripción y el cuerpo del modal */
+  --modal-close-size: var(--size-component-md); /** Caja del botón de cerrar (40px). En la superficie pública (SiteShell) remapea a size-component.lg */
+  --modal-close-icon-size: var(--icon-size-md); /** Glifo del botón de cerrar (24px), la talla por defecto de icono-botón. En la superficie pública remapea igualmente a icon.size-md */
+  --modal-bg: var(--color-background-light); /** Fondo del panel modal */
+  --modal-border-width: var(--border-width-default); /** Grosor del borde del panel */
+  --modal-border-radius: var(--border-radius-default); /** Radio del panel */
+  --modal-shadow: var(--shadow-default); /** Sombra de elevación */
+  --modal-footer-gap: var(--form-actions-gap); /** Aire entre los botones del pie. Es el de las acciones de un formulario: la fila de acciones del sistema es una sola, esté en un formulario o en un diálogo */
+  --modal-footer-margin-block-start: var(--form-actions-margin-block-start); /** Aire entre el cuerpo del diálogo y su pie — el mismo que separa el último campo de las acciones en un formulario */
+  --modal-title-font-weight: var(--font-weight-emphasis); /** Peso del título */
+  --modal-title-color: var(--color-text-on-light); /** Color del título */
+  --modal-description-font-size: var(--text-font-size); /** La descripción hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --modal-description-color: var(--color-text-muted-on-light); /** Color de la descripción del modal */
+  --modal-close-color: var(--color-primary); /** Color del glifo: la tinta de la superficie, ya en reposo. El aspa no se atenúa ni cambia de color al pasar el puntero — el foco se marca con el anillo */
+  --modal-close-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --modal-close-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco (el rol focus gobierna ancho y separación) */
+  --modal-close-focus-ring-color: var(--color-primary); /** Color del anillo de foco: la tinta de la superficie */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --modal-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --modal-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
+  --modal-border-color: var(--color-text-on-dark); /** Borde 1px — surface-dark: separa el panel del velo, que también es oscuro */
+  --modal-description-color: var(--color-text-muted-on-dark); /** Color de la descripción — surface-dark */
+  --modal-close-color: var(--color-text-on-dark); /** Color del glifo — surface-dark */
+  --modal-close-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

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

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

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

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/multi-select-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const multiSelectFieldBaseTokens   = all.filter(t => !t.name.startsWith('--multi-select-field-error-') && !t.name.startsWith('--multi-select-field-helper-'));
+export const multiSelectFieldErrorTokens  = all.filter(t => t.name.startsWith('--multi-select-field-error-'));
+export const multiSelectFieldHelperTokens = all.filter(t => t.name.startsWith('--multi-select-field-helper-'));

package/src/tokens/molecules/notification-button.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --notification-button-badge-offset: var(--spacing-2); /** Distancia del borde del botón a la esquina del icono (el aire del icono md en un botón md): el contador se centra ahí */
+  --notification-button-badge-fill: var(--color-error-fill); /** El contador es rojo: el relleno de error del sistema, universal en claro y oscuro */
+  --notification-button-badge-color: var(--color-error-fill-text); /** Cifra sobre el relleno */
+}

package/src/tokens/molecules/notification-button.ts

@@ -0,0 +1,4 @@
+import notificationButton from '../../../tokens/molecule/notification-button.json';
+import { flattenTokens } from '../utils';
+
+export const notificationButtonTokens = flattenTokens(notificationButton as never);

package/src/tokens/molecules/notification-list.css

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --notification-list-item-padding-block: var(--spacing-4); /** Aire vertical de cada notificación. No hay línea entre filas: este aire, dos veces, es lo único que separa una notificación de la siguiente. Es una fila de página, no de popover: respira más que la del `NotificationPanel` */
+  --notification-list-item-gap: var(--spacing-3); /** Aire entre la columna del punto y el texto */
+  --notification-list-item-row-gap: var(--spacing-2); /** Aire entre las líneas de una fila: entre el texto y las acciones (por debajo de `md`) y entre el texto y la hora, que va siempre en una línea propia */
+  --notification-list-item-column-gap: var(--spacing-5); /** Aire entre el texto y las acciones cuando comparten línea (a partir de `md`) */
+  --notification-list-item-text-gap: var(--spacing-1); /** Aire entre el título y el cuerpo */
+  --notification-list-item-font-family: var(--font-family-sans); /** Familia tipográfica de la notificación */
+  --notification-list-title-line-height: var(--line-height-snug); /** Interlineado del título */
+  --notification-list-body-line-height: var(--line-height-normal); /** Interlineado del cuerpo: el de un texto que se lee entero */
+  --notification-list-dot-size: var(--icon-size-sm); /** Caja del punto de no leída: la talla de icono dentro de un texto (16px), la misma con la que el panel pinta ese punto */
+  --notification-list-dot-margin-block-start: var(--spacing-1); /** Baja el punto hasta el centro óptico de la primera línea del título */
+  --notification-list-title-font-size: var(--text-font-size); /** El título de una notificación es texto corriente: hereda el cuerpo de la superficie */
+  --notification-list-title-font-weight: var(--font-weight-default); /** Peso del título, leída o sin leer: el del cuerpo de texto. Lo no leído lo dice el punto del indicador, no el peso */
+  --notification-list-body-font-size: var(--text-font-size); /** Cuerpo de la notificación: texto corriente. En la página se lee entero y a la talla de lectura, no recortado como en el panel */
+  --notification-list-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de una fila — el de los botones de un formulario: la fila de acciones del sistema es una sola */
+  --notification-list-time-font-size: var(--text-paragraph-small-font-size); /** Fecha relativa: letra menor y tinta atenuada (la del texto secundario, vía `Text tone="muted"`) */
+  --notification-list-time-color: var(--color-text-muted-on-light); /** Tinta de la hora: el gris de texto secundario del sistema, el mismo que da `Text tone="muted"` al resto de textos secundarios */
+  --notification-list-dot-color: var(--color-error-fill); /** Color del punto: el mismo rojo del contador de la campana (`error-fill`), que es universal en claro y oscuro. No hay un rojo aparte para notificaciones */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --notification-list-time-color: var(--color-text-muted-on-dark); /** Tinta de la hora — superficie oscura */
+}

package/src/tokens/molecules/notification-list.ts

@@ -0,0 +1,4 @@
+import notificationList from '../../../tokens/molecule/notification-list.json';
+import { flattenTokens } from '../utils';
+
+export const notificationListTokens = flattenTokens(notificationList as never);