@studiolxd/brand 38.12.4

package/src/tokens/components/control.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --control-border-style: solid; /** Estilo del borde */
+  --control-cursor: text; /** Cursor por defecto */
+  --control-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --control-height: var(--size-component-md); /** Altura del control de una línea: la talla md del sistema */
+  --control-font-family: var(--font-family-sans); /** Familia tipográfica */
+  --control-font-size: var(--font-size-2); /** Tamaño de fuente */
+  --control-line-height: var(--line-height-none); /** Interlineado */
+  --control-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
+  --control-transition-easing: var(--motion-easing-default); /** Curva de animación */
+  --control-padding-inline: var(--spacing-4); /** Padding inline — compartido por controles y elementos de formulario */
+  --control-padding-block: var(--spacing-4); /** Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0 */
+  --control-border-radius: var(--border-radius-default); /** Radio del borde */
+  --control-border-width: var(--border-width-default); /** Grosor del borde */
+  --control-font-weight: var(--font-weight-default); /** Peso tipográfico */
+  --control-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --control-focus-ring-inset-offset: var(--border-width-default); /** Separación entre borde y anillo de foco */
+}

package/src/tokens/components/conversation-list.ts

@@ -0,0 +1,10 @@
+import conversationList from '../../../tokens/molecule/conversation-list.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(conversationList as never);
+const claros = all.filter(t => !t.name.includes('surface-dark'));
+
+export const conversationListTokens       = claros.filter(t => !t.name.includes('delete') && !t.name.includes('focus'));
+export const conversationListDeleteTokens = claros.filter(t => t.name.includes('delete'));
+export const conversationListFocusTokens  = claros.filter(t => t.name.includes('focus'));
+export const conversationListDarkTokens   = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/components/conversation-thread.ts

@@ -0,0 +1,4 @@
+import conversationThread from '../../../tokens/molecule/conversation-thread.json';
+import { flattenTokens } from '../utils';
+
+export const conversationThreadTokens = flattenTokens(conversationThread as never);

package/src/tokens/components/copyable-value.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --copyable-value-gap: var(--spacing-3); /** Aire mínimo entre el final del valor y el botón de copiar, en línea */
+}

package/src/tokens/components/copyable-value.ts

@@ -0,0 +1,4 @@
+import copyableValue from '../../../tokens/component/copyable-value.json';
+import { flattenTokens } from '../utils';
+
+export const copyableValueTokens = flattenTokens(copyableValue as never);

package/src/tokens/components/description-list.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --description-list-border-style: var(--control-border-style); /** Estilo del borde */
+  --description-list-cell-padding-block: var(--spacing-3); /** Aire vertical de cada celda */
+  --description-list-cell-padding-inline: var(--spacing-4); /** Aire horizontal de cada celda */
+  --description-list-border-color: var(--color-primary); /** Color del borde: tinta de la superficie */
+  --description-list-term-font-family: var(--label-font-family); /** Tipografía del término (dt): la de las etiquetas */
+  --description-list-term-font-size: var(--label-font-size); /** Cuerpo del término: el de las etiquetas, no el de la prosa */
+  --description-list-term-line-height: var(--label-line-height); /** Interlineado del término */
+  --description-list-term-letter-spacing: var(--label-letter-spacing); /** Tracking del término */
+  --description-list-term-color: var(--color-text-on-light); /** Color del término */
+  --description-list-value-font-family: var(--control-font-family); /** Tipografía del valor (dd) */
+  --description-list-value-font-size: var(--text-font-size); /** El valor hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --description-list-value-font-weight: var(--font-weight-default); /** Peso del valor */
+  --description-list-value-line-height: var(--text-line-height); /** Interlineado heredado del cuerpo de la superficie */
+  --description-list-value-color: var(--color-text-on-light); /** Color del valor */
+  --description-list-border-width: var(--control-border-width); /** Grosor del borde exterior y de los separadores internos */
+  --description-list-term-font-weight: var(--label-font-weight); /** Peso del término */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --description-list-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+  --description-list-term-color: var(--color-text-on-dark); /** Término — surface-dark */
+  --description-list-value-color: var(--color-text-on-dark); /** Valor — surface-dark */
+}

package/src/tokens/components/description-list.ts

@@ -0,0 +1,7 @@
+import descriptionList from '../../../tokens/component/description-list.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(descriptionList as never);
+
+export const descriptionListTokens     = all.filter(t => !t.name.startsWith('--description-list-surface-dark-'));
+export const descriptionListDarkTokens = all.filter(t => t.name.startsWith('--description-list-surface-dark-'));

package/src/tokens/components/empty-state.ts

@@ -0,0 +1,7 @@
+import emptyState from '../../../tokens/component/empty-state.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(emptyState as never);
+
+export const emptyStateTokens     = all.filter(t => !t.name.startsWith('--empty-state-surface-dark-'));
+export const emptyStateDarkTokens = all.filter(t => t.name.startsWith('--empty-state-surface-dark-'));

package/src/tokens/components/figure.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --figure-ratio-1-1: 1 / 1; /** Proporción cuadrada */
+  --figure-ratio-4-3: 4 / 3; /** Proporción clásica */
+  --figure-ratio-3-2: 3 / 2; /** Proporción de foto */
+  --figure-ratio-16-9: 16 / 9; /** Proporción panorámica */
+  --figure-ratio-21-9: 21 / 9; /** Proporción de banda */
+  --figure-caption-gap: var(--spacing-2); /** Aire entre la imagen y su pie */
+  --figure-media-bg: var(--color-surface-secondary-on-light); /** Fondo de la caja de imagen: se ve cuando la proporción no coincide con la de la foto (fit contain) */
+  --figure-caption-font-size: var(--text-paragraph-small-font-size); /** El pie es texto corriente, un peldaño por debajo del cuerpo de la superficie */
+  --figure-caption-line-height: var(--text-line-height); /** Interlineado del pie */
+  --figure-caption-color: var(--color-text-muted-on-light); /** Color del pie: texto secundario */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --figure-media-bg: var(--color-surface-secondary-on-dark); /** Fondo de la caja de imagen — surface-dark */
+  --figure-caption-color: var(--color-text-muted-on-dark); /** Color del pie — surface-dark */
+}

package/src/tokens/components/figure.ts

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

package/src/tokens/components/file-upload.css

@@ -0,0 +1,101 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --file-upload-border-style: dashed; /** Estilo de borde del dropzone */
+  --file-upload-drag-border-style: solid; /** Estilo de borde en drag activo */
+  --file-upload-error-border-style: solid; /** Estilo de borde en error */
+  --file-upload-disabled-opacity: 0.5; /** Opacidad cuando está deshabilitado */
+  --file-upload-padding-inline: var(--spacing-5); /** Padding horizontal del dropzone */
+  --file-upload-gap: var(--spacing-1); /** Espacio entre elementos dentro del dropzone */
+  --file-upload-transition-duration: var(--motion-duration-fast); /** Duración de transiciones de estado */
+  --file-upload-transition-easing: var(--motion-easing-default); /** Easing de transiciones */
+  --file-upload-drag-bg: var(--color-white); /** Fondo en drag activo */
+  --file-upload-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --file-upload-list-gap: var(--spacing-2); /** Espacio entre items de la lista */
+  --file-upload-list-margin-block-start: var(--spacing-3); /** Margen superior de la lista de archivos */
+  --file-upload-item-bg: var(--color-white); /** Fondo de cada item */
+  --file-upload-item-padding-block: var(--spacing-2); /** Padding vertical del item */
+  --file-upload-item-padding-inline: var(--spacing-3); /** Padding horizontal del item */
+  --file-upload-item-gap: var(--spacing-3); /** Espacio entre thumb, info y botón */
+  --file-upload-item-name-font-family: var(--font-family-sans); /** Fuente del nombre de archivo */
+  --file-upload-item-size-font-size: var(--font-size-1); /** Tamaño del peso del archivo */
+  --file-upload-item-error-font-size: var(--font-size-1); /** Tamaño del mensaje de error por archivo */
+  --file-upload-item-error-bg: var(--color-white); /** Fondo del item con error */
+  --file-upload-thumb-size: var(--size-component-md); /** Lado de la miniatura: la talla md del sistema (el mismo 2.5rem de antes, ahora con nombre) */
+  --file-upload-progress-margin-block-start: var(--spacing-3); /** Margen superior de la barra de progreso */
+  --file-upload-padding-block: var(--spacing-7); /** Aire vertical del dropzone — talla md */
+  --file-upload-sm-padding-block: var(--spacing-6); /** Aire vertical del dropzone — talla sm */
+  --file-upload-lg-padding-block: var(--spacing-8); /** Aire vertical del dropzone — talla lg */
+  --file-upload-sm-padding-inline: var(--spacing-4); /** Aire horizontal del dropzone — talla sm */
+  --file-upload-lg-padding-inline: var(--spacing-6); /** Aire horizontal del dropzone — talla lg */
+  --file-upload-text-font-family: var(--font-family-sans); /** Tipografía del texto del dropzone */
+  --file-upload-subtext-font-size: var(--font-size-1); /** Tamaño de las restricciones (peso máximo, número de archivos) — talla md */
+  --file-upload-sm-subtext-font-size: var(--font-size-1); /** Restricciones — talla sm: ya está en el peldaño menor de la escala de interfaz */
+  --file-upload-sm-thumb-size: var(--size-component-sm); /** Lado de la miniatura — talla sm */
+  --file-upload-lg-thumb-size: var(--size-component-lg); /** Lado de la miniatura — talla lg */
+  --file-upload-item-info-gap: var(--spacing-1); /** Aire entre el nombre del archivo y su peso (antes 2px, fuera de la escala) */
+  --file-upload-border-dash-length: var(--spacing-4); /** Largo de cada trazo del borde discontinuo del dropzone */
+  --file-upload-border-dash-gap: var(--spacing-2); /** Hueco entre trazos del borde discontinuo (antes 10px, fuera de la escala) */
+  --file-upload-border-color: var(--color-primary); /** Borde del dropzone por defecto */
+  --file-upload-border-width: var(--border-width-default); /** Grosor del borde */
+  --file-upload-border-radius: var(--border-radius-default); /** Radio de esquinas del dropzone */
+  --file-upload-bg: var(--color-surface-secondary-on-light); /** Fondo del dropzone */
+  --file-upload-text-color: var(--color-text-on-light); /** Color del texto principal */
+  --file-upload-subtext-color: var(--color-text-muted-on-light); /** Color del texto secundario y restricciones */
+  --file-upload-icon-color: var(--color-text-on-light); /** Color del icono upload */
+  --file-upload-drag-border-color: var(--color-primary); /** Borde cuando hay drag activo */
+  --file-upload-error-border-color: var(--color-error-text-on-light); /** Borde en estado de error */
+  --file-upload-error-bg: var(--color-surface-secondary-on-light); /** Fondo en estado de error */
+  --file-upload-item-border-color: var(--color-primary); /** Borde de cada item */
+  --file-upload-item-border-width: var(--border-width-default); /** Grosor de borde del item */
+  --file-upload-item-border-radius: var(--border-radius-default); /** Radio de esquinas del item */
+  --file-upload-item-name-font-size: var(--text-font-size); /** El nombre de archivo hereda el cuerpo de la superficie */
+  --file-upload-item-name-font-weight: var(--font-weight-default); /** Peso del nombre de archivo */
+  --file-upload-item-name-color: var(--color-text-on-light); /** Color del nombre de archivo */
+  --file-upload-item-size-color: var(--color-text-muted-on-light); /** Color del peso del archivo */
+  --file-upload-item-error-color: var(--color-error-text-on-light); /** Color del mensaje de error por archivo */
+  --file-upload-item-error-border-color: var(--color-error-text-on-light); /** Borde del item con error */
+  --file-upload-thumb-border-radius: var(--border-radius-default); /** Radio del thumbnail */
+  --file-upload-thumb-bg: var(--color-surface-secondary-on-light); /** Fondo del thumb para iconos (no imagen) */
+  --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light); /** Color del icono de archivo genérico */
+  --file-upload-remove-color: var(--color-text-muted-on-light); /** Color del botón eliminar */
+  --file-upload-remove-color-hover: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
+  --file-upload-text-font-size: var(--text-font-size); /** El texto del dropzone es texto corriente: hereda el cuerpo de la superficie — talla md */
+  --file-upload-sm-text-font-size: var(--text-paragraph-small-font-size); /** Texto del dropzone — talla sm: un peldaño por debajo del cuerpo */
+  --file-upload-lg-text-font-size: var(--text-paragraph-large-font-size); /** Texto del dropzone — talla lg: un peldaño por encima */
+  --file-upload-text-font-weight: var(--font-weight-default); /** Peso del texto del dropzone */
+  --file-upload-subtext-font-weight: var(--font-weight-default); /** Peso del texto secundario del dropzone: el normal, para que no compita con la instrucción */
+  --file-upload-lg-subtext-font-size: var(--text-font-size); /** Restricciones — talla lg: sube al cuerpo */
+  --file-upload-sm-item-name-font-size: var(--text-paragraph-small-font-size); /** Nombre del archivo — talla sm */
+  --file-upload-lg-item-name-font-size: var(--text-paragraph-large-font-size); /** Nombre del archivo — talla lg */
+  --file-upload-remove-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco del aspa */
+  --file-upload-remove-border-radius: var(--border-radius-default); /** Radio del aspa — recto, como toda esquina del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --file-upload-border-color: var(--color-text-on-dark); /** Borde del dropzone — surface-dark: la tinta de la superficie */
+  --file-upload-bg: var(--color-surface-secondary-on-dark); /** Fondo del dropzone — surface-dark: la superficie secundaria oscura */
+  --file-upload-text-color: var(--color-text-on-dark); /** Texto principal — surface-dark */
+  --file-upload-subtext-color: var(--color-text-muted-on-dark); /** Texto secundario — surface-dark */
+  --file-upload-icon-color: var(--color-text-on-dark); /** Icono de subida — surface-dark */
+  --file-upload-drag-border-color: var(--color-text-on-dark); /** Borde con arrastre activo — surface-dark */
+  --file-upload-drag-bg: var(--color-background-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
+  --file-upload-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --file-upload-error-bg: var(--color-surface-secondary-on-dark); /** Fondo en error — surface-dark */
+  --file-upload-item-bg: var(--color-background-dark); /** Fondo de cada archivo — surface-dark */
+  --file-upload-item-border-color: var(--color-text-on-dark); /** Borde de cada archivo — surface-dark */
+  --file-upload-item-name-color: var(--color-text-on-dark); /** Nombre del archivo — surface-dark */
+  --file-upload-item-size-color: var(--color-text-muted-on-dark); /** Peso del archivo — surface-dark */
+  --file-upload-item-error-color: var(--color-error-text-on-dark); /** Mensaje de error por archivo — surface-dark */
+  --file-upload-item-error-border-color: var(--color-error-text-on-dark); /** Borde del archivo con error — surface-dark */
+  --file-upload-item-error-bg: var(--color-background-dark); /** Fondo del archivo con error — surface-dark */
+  --file-upload-thumb-bg: var(--color-surface-secondary-on-dark); /** Fondo de la miniatura — surface-dark */
+  --file-upload-thumb-icon-color: var(--color-text-muted-on-dark); /** Icono de archivo genérico — surface-dark: `grey-dark` no llega a 3:1 sobre prusia */
+  --file-upload-remove-color: var(--color-text-muted-on-dark); /** Aspa de quitar — surface-dark */
+  --file-upload-remove-color-hover: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
+}

package/src/tokens/components/file-upload.ts

@@ -0,0 +1,16 @@
+import tokens from '../../../tokens/component/file-upload.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+const light = all.filter(t => !t.name.startsWith('--file-upload-surface-dark-'));
+const isSize = (name: string) => /^--file-upload-(sm|lg)-/.test(name);
+
+export const fileUploadDropzoneTokens = light.filter(
+  t => !isSize(t.name) && !t.name.match(/--file-upload-(item|thumb|progress|remove)/),
+);
+export const fileUploadSizeTokens = light.filter(t => isSize(t.name) || t.name === '--file-upload-thumb-size');
+export const fileUploadItemTokens = light.filter(
+  t => t.name.match(/--file-upload-(item|thumb|remove)/) && !isSize(t.name) && t.name !== '--file-upload-thumb-size',
+);
+export const fileUploadProgressTokens = light.filter(t => t.name.startsWith('--file-upload-progress'));
+export const fileUploadDarkTokens = all.filter(t => t.name.startsWith('--file-upload-surface-dark-'));

package/src/tokens/components/floating-dock.css

@@ -0,0 +1,50 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --floating-dock-panel-inline-size: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado */
+  --floating-dock-panel-block-size: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
+  --floating-dock-z-index: var(--z-index-bar); /** Capa del ancla: la del chrome de aplicación (100). Por debajo del velo y del modal, para que un diálogo del producto siga tapando al dock */
+  --floating-dock-offset-inline: var(--spacing-5); /** Distancia al borde lateral de la ventana (24px). Se suma al `safe-area-inset` del dispositivo, nunca lo sustituye */
+  --floating-dock-offset-block: var(--spacing-5); /** Distancia al borde superior o inferior de la ventana (24px). Se suma al `safe-area-inset` */
+  --floating-dock-gap: var(--spacing-3); /** Separación entre el lanzador y el panel */
+  --floating-dock-trigger-size: var(--size-component-lg); /** Caja del lanzador (48px, la talla `lg` de icono-botón): objetivo táctil holgado. Es también lo que el panel reserva para no montarse encima */
+  --floating-dock-trigger-icon-size: var(--icon-size-md); /** Glifo del lanzador (24px), la talla por defecto de icono-botón */
+  --floating-dock-badge-offset: var(--spacing-1); /** Distancia del borde del lanzador a la esquina donde se centra el contador */
+  --floating-dock-panel-padding-block: var(--spacing-4); /** Aire vertical del panel */
+  --floating-dock-panel-padding-inline: var(--spacing-4); /** Aire horizontal del panel */
+  --floating-dock-panel-gap: var(--spacing-3); /** Separación entre la cabecera y el cuerpo */
+  --floating-dock-panel-enter-offset: var(--spacing-2); /** Desplazamiento del panel al entrar y al salir (8px), en la dirección de la esquina en la que está anclado */
+  --floating-dock-header-gap: var(--spacing-1); /** Separación entre el título y la descripción */
+  --floating-dock-close-size: var(--size-component-sm); /** Caja del botón de cerrar (32px): el panel es compacto y el aspa no compite con el título */
+  --floating-dock-close-icon-size: var(--icon-size-md); /** Glifo del botón de cerrar (24px) */
+  --floating-dock-transition-duration: var(--motion-duration-base); /** Duración de la entrada y la salida del panel */
+  --floating-dock-transition-easing: var(--motion-easing-in-out); /** Curva de la entrada y la salida del panel */
+  --floating-dock-badge-fill: var(--color-error-fill); /** El contador es rojo: el relleno de error del sistema, universal en claro y oscuro */
+  --floating-dock-badge-color: var(--color-error-fill-text); /** Cifra sobre el relleno */
+  --floating-dock-title-font-size: var(--text-size-4); /** Tamaño del título: paso 4 de la escala de títulos (20px), el de un H5 — sube un peldaño en la superficie pública */
+  --floating-dock-description-font-size: var(--text-paragraph-small-font-size); /** La descripción va un peldaño por debajo del cuerpo de la superficie */
+  --floating-dock-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del panel (lo recibe al abrirse) */
+  --floating-dock-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco del panel */
+  --floating-dock-focus-ring-color: var(--color-primary); /** Color del anillo de foco del panel: la tinta de la superficie */
+  --floating-dock-panel-bg: var(--floating-panel-bg); /** Fondo del panel */
+  --floating-dock-panel-border-width: var(--floating-panel-border-width); /** Grosor del borde: es lo que separa el panel del contenido que tiene debajo */
+  --floating-dock-panel-border-color: var(--floating-panel-border-color); /** Color del borde */
+  --floating-dock-panel-border-radius: var(--floating-panel-border-radius); /** Radio del panel: esquina recta */
+  --floating-dock-panel-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+  --floating-dock-title-color: var(--modal-title-color); /** Color del título */
+  --floating-dock-title-font-weight: var(--modal-title-font-weight); /** Peso del título */
+  --floating-dock-description-color: var(--modal-description-color); /** Color de la descripción */
+  --floating-dock-close-color: var(--modal-close-color); /** Color del glifo: la tinta de la superficie, ya en reposo */
+  --floating-dock-close-focus-ring-width: var(--modal-close-focus-ring-width); /** Grosor del anillo de foco del aspa */
+  --floating-dock-close-focus-ring-offset: var(--modal-close-focus-ring-offset); /** Separación del anillo de foco del aspa */
+  --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color); /** Color del anillo de foco del aspa */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --floating-dock-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del panel — surface-dark */
+}

package/src/tokens/components/floating-dock.ts

@@ -0,0 +1,4 @@
+import floatingDock from '../../../tokens/component/floating-dock.json';
+import { flattenTokens } from '../utils';
+
+export const floatingDockTokens = flattenTokens(floatingDock as never);

package/src/tokens/components/floating-panel.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --floating-panel-z-index: var(--z-index-floating); /** Capa z — por encima del modal (1001) para que los paneles flotantes sean visibles dentro de modales */
+  --floating-panel-transition-duration: var(--motion-duration-fast); /** Duración de la animación de entrada/salida */
+  --floating-panel-transition-easing: var(--motion-easing-default); /** Easing de la animación */
+  --floating-panel-bg: var(--color-background-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
+  --floating-panel-border-width: var(--border-width-default); /** Grosor del borde */
+  --floating-panel-border-color: var(--color-primary); /** Color del borde — prussian en modo claro */
+  --floating-panel-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
+  --floating-panel-shadow: var(--shadow-default); /** Sin sombra */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --floating-panel-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --floating-panel-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+}

package/src/tokens/components/hero.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --hero-actions-block-width: 100%; /** Ancho de cada acción de la portada en móvil (todo el ancho, por debajo de md): en una pantalla estrecha dos botones en fila se quedan sin sitio para su texto */
+  --hero-actions-space-before: var(--spacing-6); /** Aire entre el texto y la fila de acciones (32px): entre componentes */
+  --hero-title-size-compact: var(--font-size-8); /** Talla del título de la portada en móvil (56px, por debajo de md): el paso 10 de la escala son 96px fijos en toda anchura y no cabe en una pantalla de 360px */
+  --hero-space-block-start: var(--section-padding-block-2xl); /** Aire sobre la portada (64px): el ritmo de una banda destacada. Es de la sección, no del envoltorio */
+  --hero-space-block-end: var(--section-padding-block-2xl); /** Aire bajo la portada (64px) */
+  --hero-space-block-start-compact: var(--section-padding-block-xl); /** Aire sobre la portada en móvil (48px, por debajo de md): la pantalla es más corta y el aire baja un peldaño */
+  --hero-space-block-end-compact: var(--section-padding-block-xl); /** Aire bajo la portada en móvil (48px, por debajo de md) */
+}

package/src/tokens/components/hero.ts

@@ -0,0 +1,4 @@
+import hero from '../../../tokens/component/hero.json';
+import { flattenTokens } from '../utils';
+
+export const heroTokens = flattenTokens(hero as never);

package/src/tokens/components/highlight.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --highlight-actions-space-before: var(--spacing-6); /** Aire entre el texto y la fila de acciones (32px): entre componentes, el mismo que en `Hero` */
+  --highlight-space-block-start: var(--section-padding-block-2xl); /** Aire sobre la banda destacada (64px): el mismo ritmo que `Hero`. Es de la sección, no del envoltorio */
+  --highlight-space-block-end: var(--section-padding-block-2xl); /** Aire bajo la banda destacada (64px) */
+  --highlight-space-block-start-compact: var(--section-padding-block-xl); /** Aire sobre la banda en móvil (48px, por debajo de md) */
+  --highlight-space-block-end-compact: var(--section-padding-block-xl); /** Aire bajo la banda en móvil (48px, por debajo de md) */
+}

package/src/tokens/components/highlight.ts

@@ -0,0 +1,4 @@
+import highlight from '../../../tokens/component/highlight.json';
+import { flattenTokens } from '../utils';
+
+export const highlightTokens = flattenTokens(highlight as never);

package/src/tokens/components/icon.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --icon-size-xs: 8px; /** Marca: el punto de estado, el chevron de un desplegable */
+  --icon-size-sm: 16px; /** Dentro de un control: junto al texto de un botón, en una celda */
+  --icon-size-md: 24px; /** Por defecto: iconos-botón, navegación, listas */
+  --icon-size-lg: 48px; /** Destacado: cabecera de un estado vacío, un aviso */
+  --icon-size-xl: 64px; /** Ilustrativo: estados vacíos a pantalla completa */
+}

package/src/tokens/components/image-crop-dialog.ts

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

package/src/tokens/components/inline.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --inline-gap-sm: var(--spacing-2); /** Aire entre piezas en fila — compacto (8px): etiquetas, chips */
+  --inline-gap-md: var(--spacing-4); /** Aire entre piezas en fila — base (16px): botones y enlaces de una fila de acciones */
+  --inline-gap-lg: var(--spacing-5); /** Aire entre piezas en fila — amplio (24px): entre componentes */
+}

package/src/tokens/components/inline.ts

@@ -0,0 +1,4 @@
+import inlineJson from '../../../tokens/component/inline.json';
+import { flattenTokens } from '../utils';
+
+export const inlineTokens = flattenTokens(inlineJson as never);

package/src/tokens/components/input-phone.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --input-phone-country-width: 4.5rem; /** Ancho del selector de país */
+  --input-phone-country-border-style: solid; /** Estilo del separador */
+  --input-phone-content-max-height: 17.5rem; /** Altura máxima del dropdown de país */
+  --input-phone-country-icon-size: 0.625rem; /** Ancho del icono chevron en el selector de país */
+  --input-phone-sm-country-width: 3.5rem; /** Ancho del selector de país — variante sm */
+  --input-phone-lg-country-width: 5.5rem; /** Ancho del selector de país — variante lg */
+  --input-phone-content-z-index: var(--z-index-floating); /** Z-index del dropdown de país */
+  --input-phone-country-gap: var(--spacing-1); /** Separación entre bandera/código y chevron en el selector de país */
+  --input-phone-country-border-width: var(--border-width-default); /** Grosor del separador entre país y número */
+  --input-phone-country-border-color: var(--color-primary); /** Color del separador */
+  --input-phone-country-icon-transition-easing: var(--input-transition-easing); /** Curva del giro del chevron: la de los campos */
+  --input-phone-country-item-padding-block: var(--select-item-padding-block); /** Aire vertical de cada país en la lista: el de las opciones del Select */
+  --input-phone-country-item-highlighted-bg: var(--select-item-highlighted-bg); /** Relleno del país resaltado en la lista — el del Select: la inversión de marca */
+  --input-phone-country-item-highlighted-color: var(--select-item-highlighted-color); /** Texto del país resaltado — el del Select: el prefijo lo hereda por `currentColor` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --input-phone-country-border-color: var(--color-text-on-dark); /** Separador del selector de país — surface-dark */
+  --input-phone-country-item-highlighted-bg: var(--select-item-highlighted-bg); /** Relleno del país resaltado — surface-dark */
+  --input-phone-country-item-highlighted-color: var(--select-item-highlighted-color); /** Texto del país resaltado — surface-dark */
+}

package/src/tokens/components/input-phone.ts

@@ -0,0 +1,4 @@
+import inputPhone from '../../../tokens/component/input-phone.json';
+import { flattenTokens } from '../utils';
+
+export const inputPhoneTokens = flattenTokens(inputPhone as never);

package/src/tokens/components/input.css

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --input-border-style: solid; /** Border style */
+  --input-width: 100%; /** Inputs are always full width */
+  --input-cursor: text; /** Cursor */
+  --input-disabled-cursor: not-allowed; /** Cursor when disabled */
+  --input-height: var(--size-component-md); /** Altura del campo: la talla md del sistema. Las tallas cambian la altura, no el padding vertical */
+  --input-sm-height: var(--size-component-sm); /** Altura — sm */
+  --input-lg-height: var(--size-component-lg); /** Altura — lg */
+  --input-font-family: var(--font-family-sans); /** Font family */
+  --input-font-size: var(--font-size-2); /** Font size */
+  --input-line-height: var(--line-height-none); /** Line height */
+  --input-transition-duration: var(--motion-duration-fast); /** Transition duration */
+  --input-transition-easing: var(--motion-easing-default); /** Transition easing */
+  --input-bg: var(--color-white); /** Background */
+  --input-error-bg: var(--color-white); /** Error background */
+  --input-sm-padding-inline: var(--spacing-3); /** Inline padding — sm */
+  --input-sm-font-size: var(--font-size-1); /** Font size — sm */
+  --input-lg-padding-inline: var(--spacing-5); /** Inline padding — lg */
+  --input-lg-font-size: var(--font-size-3); /** Font size — lg */
+  --input-border-radius: var(--border-radius-default); /** Border radius */
+  --input-border-width: var(--border-width-default); /** Border width */
+  --input-padding-inline: var(--control-padding-inline); /** Inline (horizontal) padding */
+  --input-font-weight: var(--font-weight-default); /** Font weight */
+  --input-color: var(--color-text-on-light); /** Text color */
+  --input-border-color: var(--color-primary); /** Border color */
+  --input-placeholder-color: var(--color-text-placeholder-on-light); /** Placeholder: el gris de placeholder del sistema, para que un campo vacío no parezca relleno */
+  --input-focus-border-color: var(--color-primary); /** Border color on focus */
+  --input-focus-ring-inset-offset: var(--border-width-default); /** Gap between border and focus ring */
+  --input-focus-ring-color: var(--color-primary); /** Focus ring color */
+  --input-disabled-bg: var(--color-disabled-bg-on-light); /** Background when disabled */
+  --input-disabled-color: var(--color-disabled-text-on-light); /** Text color when disabled */
+  --input-disabled-border-color: var(--color-disabled-border-on-light); /** Border color when disabled */
+  --input-error-color: var(--color-text-on-light); /** Error text color */
+  --input-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (excepción a «bordes en prusia») */
+  --input-error-placeholder-color: var(--color-text-placeholder-on-light); /** Placeholder en error: el mismo gris */
+  --input-error-focus-border-color: var(--color-error-text-on-light); /** Borde en foco+error */
+  --input-error-focus-ring-color: var(--color-error-text-on-light); /** Error focus ring color */
+  --input-focus-ring-width: var(--control-focus-ring-width); /** Focus ring width */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --input-bg: var(--color-background-dark); /** Background — surface-dark */
+  --input-color: var(--color-text-on-dark); /** Text color — surface-dark */
+  --input-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
+  --input-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
+  --input-focus-border-color: var(--color-text-on-dark); /** Border color on focus — surface-dark */
+  --input-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --input-error-focus-ring-color: var(--color-error-text-on-dark); /** Error focus ring color — surface-dark */
+  --input-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --input-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
+  --input-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
+  --input-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
+  --input-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --input-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
+  --input-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
+  --input-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */
+}

package/src/tokens/components/input.ts

@@ -0,0 +1,11 @@
+import input from '../../../tokens/component/input.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(input as never);
+
+export const inputBaseTokens     = all.filter(t => !t.name.match(/--input-(focus|error|disabled|dark|sm|lg)/));
+export const inputFocusTokens    = all.filter(t => t.name.includes('focus') && !t.name.includes('dark'));
+export const inputErrorTokens    = all.filter(t => t.name.includes('error') && !t.name.includes('dark'));
+export const inputDisabledTokens = all.filter(t => t.name.includes('disabled'));
+export const inputDarkTokens     = all.filter(t => t.name.includes('dark'));
+export const inputSizeTokens     = all.filter(t => t.name.match(/--input-(sm|lg)-/));

package/src/tokens/components/kbd.css

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --kbd-font-family: var(--font-family-mono); /** Monoespaciada (Google Sans Code) — alineada con el contenido técnico */
+  --kbd-font-size: var(--font-size-2); /** 16px — talla md (por defecto) */
+  --kbd-line-height: var(--line-height-none); /** Sin interlineado extra — el contenido se centra con flexbox */
+  --kbd-padding-block: var(--spacing-1); /** Aire vertical (4px) */
+  --kbd-padding-inline: var(--spacing-3); /** Aire horizontal (12px) */
+  --kbd-sm-font-size: var(--font-size-1); /** 14px — talla sm */
+  --kbd-sm-padding-block: var(--spacing-1); /** Aire vertical sm (4px) */
+  --kbd-sm-padding-inline: var(--spacing-2); /** Aire horizontal sm (8px) */
+  --kbd-lg-font-size: var(--font-size-3); /** 20px — talla lg (el cuerpo de la superficie pública) */
+  --kbd-lg-padding-block: var(--spacing-2); /** Aire vertical lg (8px) */
+  --kbd-lg-padding-inline: var(--spacing-4); /** Aire horizontal lg (16px) */
+  --kbd-border-radius: var(--border-radius-default); /** Esquina recta, como todo el sistema */
+  --kbd-border-width: var(--border-width-default); /** Grosor del borde: es lo que da relieve a la tecla (el sistema no proyecta sombras) */
+  --kbd-border-color: var(--color-primary); /** Borde del keycap: tinta de la superficie */
+  --kbd-bg: var(--color-surface-secondary-on-light); /** Fondo del keycap: la superficie clara secundaria del sistema */
+  --kbd-color: var(--color-text-on-light); /** Color del símbolo de la tecla */
+  --kbd-font-weight: var(--font-weight-emphasis); /** Peso de énfasis: legibilidad en tamaño compacto */
+  --kbd-min-size: calc(var(--kbd-font-size) * var(--kbd-line-height) + 2 * var(--kbd-padding-block) + 2 * var(--kbd-border-width)); /** Ancho mínimo: exactamente la altura de la tecla, así una tecla de un carácter sale casi cuadrada (el ancho real crece por el aire horizontal y el propio carácter, siempre mayor que este mínimo). No es una talla de componente —un keycap es una marca dentro del texto, no un control— sino la medida que sale de su propio cuerpo, su aire y sus bordes (26px en md) */
+  --kbd-sm-min-size: calc(var(--kbd-sm-font-size) * var(--kbd-line-height) + 2 * var(--kbd-sm-padding-block) + 2 * var(--kbd-border-width)); /** Ancho mínimo sm: la misma fórmula con el cuerpo y el aire de la talla (24px) */
+  --kbd-lg-min-size: calc(var(--kbd-lg-font-size) * var(--kbd-line-height) + 2 * var(--kbd-lg-padding-block) + 2 * var(--kbd-border-width)); /** Ancho mínimo lg: la misma fórmula con el cuerpo y el aire de la talla (38px) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --kbd-bg: rgba(255, 255, 255, 0.08); /** Fondo del keycap — surface-dark: el gris claro no existe en superficie oscura, y el velo translúcido es el mismo recurso que usan Skeleton y Table */
+  --kbd-color: var(--color-text-on-dark); /** Símbolo — surface-dark */
+  --kbd-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+}

package/src/tokens/components/kbd.ts

@@ -0,0 +1,8 @@
+import kbd from '../../../tokens/component/kbd.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(kbd as never);
+
+export const kbdTokens     = all.filter(t => !/^--kbd-(sm|lg)-/.test(t.name) && !t.name.startsWith('--kbd-surface-dark-'));
+export const kbdSizeTokens = all.filter(t => /^--kbd-(sm|lg)-/.test(t.name));
+export const kbdDarkTokens = all.filter(t => t.name.startsWith('--kbd-surface-dark-'));

package/src/tokens/components/label.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --label-font-family: var(--font-family-sans); /** Font family */
+  --label-font-size: var(--font-size-1); /** Font size (14px) */
+  --label-sm-font-size: var(--font-size-1); /** Font size — sm (14px: la etiqueta no baja de la talla de interfaz) */
+  --label-lg-font-size: var(--font-size-3); /** Font size — lg (20px: la del control, como en sm) */
+  --label-line-height: var(--line-height-normal); /** Line height */
+  --label-letter-spacing: var(--letter-spacing-normal); /** Letter spacing */
+  --label-font-weight: var(--font-weight-emphasis); /** Font weight */
+  --label-color: var(--color-text-on-light); /** Text color */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --label-color: var(--color-text-on-dark); /** Color — surface-dark */
+}