@studiolxd/brand 38.12.4

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

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

package/src/tokens/molecules/toast.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --toast-max-width: 360px; /** Ancho máximo de la pila. En pantallas estrechas cede al ancho de la ventana menos el aire lateral */
+  --toast-stack-scale: 0.05; /** Cuánto encoge cada aviso por peldaño de profundidad con la pila recogida (5%) */
+  --toast-enter-scale: 0.97; /** Escala de la que entra y a la que sale el aviso: aparece un punto más pequeño y se va encogiendo */
+  --toast-z-index: var(--z-index-toast); /** Capa de la pila — `toast` (500): por encima de modales y paneles flotantes */
+  --toast-inset-block: var(--spacing-5); /** Distancia de la pila al borde superior o inferior de la ventana (24px) */
+  --toast-inset-inline: var(--spacing-5); /** Distancia de la pila al borde izquierdo o derecho de la ventana (24px) */
+  --toast-gap: var(--spacing-2); /** Aire entre avisos cuando la pila está desplegada (8px). El `Toaster` lo puede sobreescribir con su prop `gap` */
+  --toast-stack-offset: var(--spacing-3); /** Cuánto asoma cada aviso por detrás del de delante con la pila recogida (12px) */
+  --toast-duration-in: var(--motion-duration-base); /** Duración de la entrada. Con `prefers-reduced-motion: reduce` vale 0ms y el aviso aparece sin animación */
+  --toast-duration-out: var(--motion-duration-base); /** Duración de la salida. Con `prefers-reduced-motion: reduce` vale 0ms */
+  --toast-easing: var(--motion-easing-out); /** Curva de entrada y salida — lo que aparece y desaparece frena al final */
+}

package/src/tokens/molecules/tree-view.css

@@ -0,0 +1,47 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --tree-view-drop-target-border-style: dashed; /** Estilo del borde del destino: discontinuo, el dibujo universal de «suéltalo aquí» */
+  --tree-view-drop-disabled-cursor: not-allowed; /** Cursor sobre una carpeta que no puede recibir lo que se arrastra */
+  --tree-view-cursor: pointer; /** Cursor sobre una fila */
+  --tree-view-disabled-cursor: not-allowed; /** Cursor de una fila deshabilitada */
+  --tree-view-icon-size: var(--icon-size-sm); /** Tamaño de la marca (la carpeta) de cada fila */
+  --tree-view-font-family: var(--font-family-sans); /** Familia tipográfica de las filas */
+  --tree-view-chevron-size: var(--icon-size-sm); /** Tamaño del chevron que abre y cierra una rama */
+  --tree-view-actions-gap: var(--spacing-1); /** Hueco entre el rótulo y las acciones de la fila */
+  --tree-view-drop-disabled-opacity: var(--opacity-disabled); /** Opacidad de una carpeta que NO puede recibir lo que se arrastra */
+  --tree-view-disabled-opacity: var(--opacity-disabled); /** Opacidad de una fila deshabilitada */
+  --tree-view-transition-duration: var(--motion-duration-fast); /** Duración del giro del chevron y de la aparición de las acciones */
+  --tree-view-transition-easing: var(--motion-easing-default); /** Easing del giro del chevron y de la aparición de las acciones */
+  --tree-view-row-gap: var(--sidebar-nav-item-icon-gap); /** Separación entre el chevron, la marca y el rótulo — el hueco icono-texto del ítem de la barra */
+  --tree-view-indent: calc(var(--tree-view-icon-size) + var(--tree-view-row-gap)); /** Sangría que gana cada nivel: exactamente lo que ocupa la marca de la fila padre más su hueco, de modo que el nivel de un hijo se lee contra el rótulo del padre */
+  --tree-view-row-padding-block: var(--sidebar-nav-item-padding-block); /** Aire vertical de cada fila — el del ítem de la barra */
+  --tree-view-row-padding-inline: var(--sidebar-nav-item-padding-inline); /** Aire horizontal de cada fila — el del ítem de la barra */
+  --tree-view-font-size: var(--sidebar-nav-item-font-size); /** Tamaño de fuente de las filas — el del ítem de la barra */
+  --tree-view-line-height: var(--sidebar-nav-item-line-height); /** Interlineado de las filas — el del ítem de la barra */
+  --tree-view-chevron-color: var(--color-text-muted-on-light); /** Tinta del chevron: atenuada, para que no compita con el rótulo */
+  --tree-view-drop-target-bg: var(--color-accent-1); /** Relleno de la carpeta que puede recibir lo que se arrastra: el acento de estado activo del sistema */
+  --tree-view-drop-target-color: var(--color-primary); /** Tinta sobre el relleno de destino. Es el par autocontenido de `Button primary`: se lee igual en claro y en oscuro, así que no lleva par `surface-dark-*` */
+  --tree-view-drop-target-border-width: var(--border-width-default); /** Grosor del borde discontinuo del destino de arrastre */
+  --tree-view-drop-target-border-color: var(--color-primary); /** Color del borde discontinuo del destino de arrastre */
+  --tree-view-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --tree-view-row-border-radius: var(--sidebar-nav-item-border-radius); /** Radio de la fila — el del ítem de la barra */
+  --tree-view-font-weight: var(--sidebar-nav-item-font-weight); /** Peso de una fila cualquiera — el del ítem de la barra */
+  --tree-view-color: var(--sidebar-nav-item-color); /** Tinta de las filas — la del ítem de la barra */
+  --tree-view-selected-color: var(--sidebar-nav-item-color); /** Tinta de la fila elegida: la MISMA tinta, no un acento. En la barra lateral solo el activo lleva color de marca; una carpeta elegida se marca únicamente con el peso */
+  --tree-view-selected-font-weight: var(--sidebar-nav-item-active-font-weight); /** Peso de la fila elegida — el del ítem activo de la barra */
+  --tree-view-focus-ring-width: var(--sidebar-nav-focus-ring-width); /** Grosor del anillo de foco — el de la barra */
+  --tree-view-focus-ring-color: var(--sidebar-nav-focus-ring-color); /** Color del anillo de foco — el de la barra */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --tree-view-chevron-color: var(--color-text-muted-on-dark); /** Tinta del chevron — surface-dark */
+  --tree-view-color: var(--sidebar-nav-item-color); /** Tinta de las filas — surface-dark. Blanca, la del ítem de la barra */
+  --tree-view-selected-color: var(--sidebar-nav-item-color); /** Tinta de la fila elegida — surface-dark. También blanca: en oscuro la lavanda queda reservada al destino de arrastre */
+  --tree-view-focus-ring-color: var(--sidebar-nav-focus-ring-color); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/tree-view.ts

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

package/src/tokens/molecules/uptime-bars.css

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --uptime-bars-gap: var(--spacing-1); /** 4px — hueco entre barritas. El ancho de la barrita no es un token: sale de repartir el contenedor entre los puntos de la serie */
+  --uptime-bars-bar-height: var(--spacing-6); /** 32px — alto de la barrita. Es la única medida fija: el ancho lo pone el contenedor */
+  --uptime-bars-empty-pattern-width: var(--border-width-md); /** 2px — grosor de cada raya del «sin dato» */
+  --uptime-bars-footer-gap: var(--spacing-2); /** Aire entre la tira y la fila de pie (extremos y media) */
+  --uptime-bars-footer-column-gap: var(--spacing-2); /** Aire entre las tres celdas del pie */
+  --uptime-bars-tooltip-gap: var(--spacing-1); /** Aire entre la etiqueta y el detalle dentro del bocadillo */
+  --uptime-bars-bar-radius: var(--border-radius-default); /** Esquina recta, como todo el sistema */
+  --uptime-bars-bar-border-width: var(--border-width-default); /** Filete de contorno de la barrita. Mismo recurso que el relleno de ProgressBar: en superficie oscura los rellenos de feedback no llegan a 3:1 contra el lienzo, y WCAG 1.4.11 admite que sea el contorno quien identifique el elemento */
+  --uptime-bars-bar-border-color: var(--color-primary); /** Filete de la barrita en superficie clara: el prusia. Recuadra cada día —también el «sin dato»— y es quien identifica el tramo intermedio, cuyo relleno amarillo se queda en 1,50:1 contra el blanco */
+  --uptime-bars-ok-bg: var(--color-success-fill); /** Tramo bueno — relleno sólido del rol success. Es un fondo, así que va el sufijo `-fill` */
+  --uptime-bars-degraded-bg: var(--color-warning-fill); /** Tramo intermedio — relleno sólido del rol warning */
+  --uptime-bars-down-bg: var(--color-error-fill); /** Tramo malo — relleno sólido del rol error */
+  --uptime-bars-empty-bg: var(--color-surface-secondary-on-light); /** Sin dato — superficie secundaria: no es un estado del servicio, es la ausencia de medida */
+  --uptime-bars-empty-pattern-color: var(--color-disabled-border-on-light); /** Rayas del «sin dato»: lo que distingue esa barrita de las demás sin depender del color */
+  --uptime-bars-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco de la barrita */
+  --uptime-bars-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco. Es la del sistema encogida al hueco entre barritas: con 30 puntos a 375px el anillo se pisaría con el vecino */
+  --uptime-bars-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --uptime-bars-footer-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del pie: letra menor, un peldaño por debajo del texto corriente */
+  --uptime-bars-edge-color: var(--color-text-on-light); /** Etiquetas de los extremos — la tinta del sistema: acotan la tira y se leen igual que la media */
+  --uptime-bars-summary-color: var(--color-text-on-light); /** La media — tinta del sistema: es el dato que se lee cuando no se miran las barritas */
+  --uptime-bars-summary-font-weight: var(--font-weight-default); /** Peso de la media: el del cuerpo. Es un dato que se lee, no un titular — lo que lo destaca es la tinta plena frente a los extremos, no el peso */
+  --uptime-bars-tooltip-label-font-weight: var(--font-weight-emphasis); /** Peso de la etiqueta del punto dentro del bocadillo */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --uptime-bars-bar-border-color: var(--color-text-on-dark); /** Filete de la barrita — surface-dark: la tinta clara. Es quien identifica la barrita cuando el relleno de feedback se queda en ~2,3:1 contra el prusia */
+  --uptime-bars-empty-bg: var(--color-surface-secondary-on-dark); /** Sin dato — surface-dark */
+  --uptime-bars-empty-pattern-color: var(--color-disabled-border-on-dark); /** Rayas del «sin dato» — surface-dark */
+  --uptime-bars-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --uptime-bars-edge-color: var(--color-text-on-dark); /** Etiquetas de los extremos — surface-dark */
+  --uptime-bars-summary-color: var(--color-text-on-dark); /** La media — surface-dark */
+}

package/src/tokens/molecules/uptime-bars.ts

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

package/src/tokens/molecules/user-menu.css

@@ -0,0 +1,73 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --user-menu-content-min-width: 14rem; /** Ancho mínimo del panel: que quepan nombre y correo en una línea (no es una talla de componente) */
+  --user-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 */
+  --user-menu-trigger-padding-block: var(--spacing-2); /** Padding vertical del trigger */
+  --user-menu-trigger-padding-inline: var(--spacing-3); /** Padding horizontal del trigger */
+  --user-menu-trigger-compact-padding-inline: var(--spacing-1); /** Padding horizontal del botón compacto (solo avatar) */
+  --user-menu-trigger-gap: var(--spacing-3); /** Espacio entre avatar y nombre */
+  --user-menu-name-font-size: var(--font-size-2); /** Tamaño de texto del nombre */
+  --user-menu-badge-offset: var(--spacing-1); /** Cuánto asoma el badge de notificaciones por la esquina del avatar */
+  --user-menu-header-gap: var(--spacing-1); /** Entre nombre y correo en la cabecera del panel */
+  --user-menu-content-padding-block: var(--spacing-2); /** Padding vertical del panel */
+  --user-menu-content-padding-inline: var(--spacing-2); /** Padding horizontal del panel */
+  --user-menu-header-padding-block: var(--spacing-3); /** Padding vertical de la cabecera del dropdown */
+  --user-menu-header-padding-inline: var(--spacing-4); /** Padding horizontal de la cabecera del dropdown */
+  --user-menu-header-name-font-size: var(--font-size-2); /** Tamaño del nombre en la cabecera */
+  --user-menu-header-email-font-size: var(--font-size-1); /** Tamaño del email en la cabecera */
+  --user-menu-item-padding-block: var(--spacing-2); /** Padding vertical de cada ítem */
+  --user-menu-item-padding-inline: var(--spacing-4); /** Padding horizontal de cada ítem */
+  --user-menu-item-icon-gap: var(--spacing-2); /** Gap entre icono y texto del ítem */
+  --user-menu-item-font-family: var(--font-family-sans); /** Tipografía de ítems */
+  --user-menu-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
+  --user-menu-disabled-opacity: var(--opacity-disabled); /** Opacidad de ítems deshabilitados */
+  --user-menu-offset: var(--app-header-flyout-offset); /** Separación entre el disparador y el panel: el desplazamiento compartido de los flotantes de la cabecera */
+  --user-menu-trigger-border-radius: var(--border-radius-default); /** Radio del trigger */
+  --user-menu-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --user-menu-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --user-menu-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+  --user-menu-name-font-weight: var(--font-weight-emphasis); /** Peso del nombre */
+  --user-menu-name-color: var(--color-text-on-light); /** Color del nombre */
+  --user-menu-content-z-index: var(--floating-panel-z-index); /** Z-index del dropdown (por encima del sidebar en mobile) */
+  --user-menu-header-name-font-weight: var(--font-weight-emphasis); /** Peso del nombre en la cabecera */
+  --user-menu-header-name-color: var(--color-text-on-light); /** Color del nombre en la cabecera */
+  --user-menu-header-email-color: var(--color-text-muted-on-light); /** Color del email en la cabecera */
+  --user-menu-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
+  --user-menu-item-font-weight: var(--font-weight-default); /** Peso de ítems */
+  --user-menu-item-color: var(--color-text-on-light); /** Color de ítems */
+  --user-menu-item-destructive-color: var(--color-destructive-text-on-light); /** Color de ítem destructivo */
+  --user-menu-separator-margin-block: var(--separator-spacing-md); /** Margen vertical del separador — el aire md de la línea del sistema */
+  --user-menu-transition-duration: var(--floating-panel-transition-duration); /** Duración de transición */
+  --user-menu-transition-easing: var(--floating-panel-transition-easing); /** Easing de transición */
+  --user-menu-content-bg: var(--floating-panel-bg); /** Fondo del panel */
+  --user-menu-content-border-width: var(--floating-panel-border-width); /** Borde del panel */
+  --user-menu-content-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --user-menu-content-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --user-menu-content-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+  --user-menu-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — el del Menu: la inversión de marca */
+  --user-menu-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — el del Menu */
+  --user-menu-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg); /** Relleno del ítem destructivo resaltado — el del Menu */
+  --user-menu-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color); /** Texto del ítem destructivo resaltado — el del Menu */
+  --user-menu-separator-color: var(--separator-color); /** Color del separador — el de la línea del sistema */
+  --user-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 {
+  --user-menu-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
+  --user-menu-name-color: var(--color-text-on-dark); /** Color del nombre — surface-dark. `name-color` (on-light/prussian) sería ilegible sobre fondo oscuro. */
+  --user-menu-header-name-color: var(--color-text-on-dark); /** Color del nombre en la cabecera del dropdown — surface-dark */
+  --user-menu-header-email-color: var(--color-text-muted-on-dark); /** Color del email en la cabecera del dropdown — surface-dark */
+  --user-menu-item-color: var(--color-text-on-dark); /** Color de ítems — surface-dark */
+  --user-menu-item-destructive-color: var(--color-destructive-text-on-dark); /** Color de ítem destructivo — surface-dark */
+  --user-menu-separator-color: var(--color-text-on-dark); /** Color del separador — surface-dark */
+  --user-menu-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — surface-dark */
+  --user-menu-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — surface-dark */
+  --user-menu-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg); /** Relleno del ítem destructivo resaltado — surface-dark */
+  --user-menu-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color); /** Texto del ítem destructivo resaltado — surface-dark */
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --user-message-gap: var(--spacing-1); /** Separación entre el nombre del autor, el globo y su marca de tiempo */
+  --user-message-author-font-family: var(--font-family-sans); /** Familia tipográfica del nombre del autor */
+  --user-message-author-padding-inline: var(--spacing-1); /** Aire horizontal del nombre del autor */
+  --user-message-timestamp-font-family: var(--font-family-sans); /** Familia tipográfica de la marca de tiempo */
+  --user-message-timestamp-padding-inline: var(--spacing-1); /** Aire horizontal de la marca de tiempo, para que no quede pegada al canto del globo */
+  --user-message-author-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del nombre del autor: un peldaño por debajo del texto de la superficie */
+  --user-message-author-font-weight: var(--font-weight-default); /** Peso del nombre del autor: discreto, a diferencia del nombre del modelo en `AssistantMessage` (que firma la respuesta con énfasis) — aquí el emisor ya lo dicen la alineación y la cola */
+  --user-message-author-color: var(--color-text-muted-on-light); /** Tinta del nombre del autor: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto) */
+  --user-message-timestamp-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la marca de tiempo: un peldaño por debajo del texto de la superficie */
+  --user-message-timestamp-color: var(--color-text-muted-on-light); /** Tinta de la marca de tiempo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --user-message-author-color: var(--color-text-muted-on-dark); /** Tinta del nombre del autor — superficie oscura */
+  --user-message-timestamp-color: var(--color-text-muted-on-dark); /** Tinta de la marca de tiempo — superficie oscura */
+}

package/src/tokens/motion.ts

@@ -0,0 +1,6 @@
+import duration from '../../tokens/motion/duration.json';
+import easing from '../../tokens/motion/easing.json';
+import { flattenTokens } from './utils';
+
+export const durationTokens = flattenTokens(duration as never);
+export const easingTokens = flattenTokens(easing as never);

package/src/tokens/opacity.ts

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

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

@@ -0,0 +1,163 @@
+// Do not edit directly, this file was auto-generated.
+// Legacy entrypoint — usa @import para compiladores que no soportan @use/@forward.
+
+@import 'global/colors';
+@import 'global/breakpoint';
+@import 'global/typography';
+@import 'global/spacing';
+@import 'global/border';
+@import 'global/shadow';
+@import 'global/size';
+@import 'global/motion';
+@import 'global/opacity';
+@import 'global/z-index';
+@import 'global/form';
+@import 'global/section';
+@import 'components/text';
+@import 'components/control';
+@import 'components/input';
+@import 'components/breadcrumb';
+@import 'components/button';
+@import 'components/textarea';
+@import 'components/checkbox';
+@import 'components/radio';
+@import 'components/menu-button';
+@import 'components/close-button';
+@import 'components/logo';
+@import 'components/logomark';
+@import 'components/app-header';
+@import 'components/label';
+@import 'components/link';
+@import 'components/tag';
+@import 'components/kbd';
+@import 'components/separator';
+@import 'components/card';
+@import 'components/container';
+@import 'components/columns';
+@import 'components/site-shell';
+@import 'components/stack';
+@import 'components/inline';
+@import 'components/skip-link';
+@import 'components/site-header';
+@import 'components/code-block';
+@import 'components/select';
+@import 'components/multi-select';
+@import 'components/async-select';
+@import 'components/async-multi-select';
+@import 'components/avatar';
+@import 'components/input-phone';
+@import 'components/accordion';
+@import 'components/arrow';
+@import 'components/icon';
+@import 'molecules/input-field';
+@import 'molecules/form-field';
+@import 'molecules/field-row';
+@import 'molecules/filter-bar';
+@import 'molecules/page-intro';
+@import 'molecules/avatar-upload';
+@import 'molecules/site-nav';
+@import 'molecules/language-switcher';
+@import 'molecules/theme-switcher';
+@import 'molecules/dropdown-field';
+@import 'components/legal-footer';
+@import 'components/site-footer';
+@import 'components/hero';
+@import 'components/highlight';
+@import 'components/figure';
+@import 'components/code';
+@import 'components/radio-group';
+@import 'molecules/notification-button';
+@import 'molecules/notification-panel';
+@import 'molecules/notification-list';
+@import 'molecules/textarea-field';
+@import 'molecules/select-field';
+@import 'molecules/multi-select-field';
+@import 'molecules/checkbox-field';
+@import 'molecules/radio-field';
+@import 'components/floating-panel';
+@import 'components/floating-dock';
+@import 'molecules/menu';
+@import 'molecules/command-palette';
+@import 'molecules/image-crop-dialog';
+@import 'components/popover';
+@import 'components/tooltip';
+@import 'molecules/pagination';
+@import 'molecules/prev-next-nav';
+@import 'molecules/consent';
+@import 'molecules/carousel';
+@import 'molecules/project-card';
+@import 'components/sidebar';
+@import 'molecules/table';
+@import 'molecules/data-table';
+@import 'components/step';
+@import 'molecules/steps';
+@import 'molecules/stepper';
+@import 'molecules/org-switcher';
+@import 'molecules/app-launcher';
+@import 'molecules/user-menu';
+@import 'molecules/sidebar-nav';
+@import 'molecules/modal';
+@import 'molecules/sheet';
+@import 'components/tabs';
+@import 'molecules/calendar';
+@import 'molecules/calendar-planner';
+@import 'molecules/calendar-roster';
+@import 'components/time-select';
+@import 'molecules/time-field';
+@import 'molecules/date-picker';
+@import 'molecules/date-picker-field';
+@import 'molecules/date-time-field';
+@import 'components/switcher';
+@import 'molecules/switcher-field';
+@import 'molecules/password-field';
+@import 'molecules/empty-state';
+@import 'components/progress-bar';
+@import 'components/spinner';
+@import 'components/skeleton';
+@import 'molecules/alert';
+@import 'molecules/banner';
+@import 'molecules/toast';
+@import 'components/number-input';
+@import 'molecules/number-input-field';
+@import 'components/file-upload';
+@import 'molecules/file-upload-field';
+@import 'components/description-list';
+@import 'components/copyable-value';
+@import 'components/number-badge';
+@import 'components/chat';
+@import 'components/message-bubble';
+@import 'components/typing-indicator';
+@import 'molecules/message-composer';
+@import 'molecules/conversation-thread';
+@import 'molecules/conversation-list';
+@import 'molecules/user-message';
+@import 'molecules/assistant-message';
+@import 'molecules/chat-shell';
+@import 'molecules/onboarding-shell';
+@import 'molecules/public-page-shell';
+@import 'molecules/prose';
+@import 'molecules/table-of-contents';
+@import 'molecules/docs-search';
+@import 'molecules/stat-tile';
+@import 'molecules/copy-button';
+@import 'molecules/confirm-dialog';
+@import 'molecules/search-form';
+@import 'molecules/input-phone-field';
+@import 'components/otp-input';
+@import 'molecules/otp-field';
+@import 'molecules/async-select-field';
+@import 'molecules/async-multi-select-field';
+@import 'molecules/chart';
+@import 'components/sparkline';
+@import 'components/star-rating';
+@import 'components/toggle';
+@import 'components/toggle-group';
+@import 'components/collapsible';
+@import 'components/scroll-area';
+@import 'components/slider';
+@import 'molecules/tree-view';
+@import 'molecules/annotation-thread';
+@import 'components/text-inline';
+@import 'molecules/uptime-bars';
+@import 'molecules/recovery-codes';
+@import 'molecules/connector-auth';

package/src/tokens/scss/_index.scss

@@ -0,0 +1,163 @@
+// Do not edit directly, this file was auto-generated.
+// Entrypoint moderno — usa @forward; requiere soporte de @use/@forward.
+
+@forward 'global/colors';
+@forward 'global/breakpoint';
+@forward 'global/typography';
+@forward 'global/spacing';
+@forward 'global/border';
+@forward 'global/shadow';
+@forward 'global/size';
+@forward 'global/motion';
+@forward 'global/opacity';
+@forward 'global/z-index';
+@forward 'global/form';
+@forward 'global/section';
+@forward 'components/text';
+@forward 'components/control';
+@forward 'components/input';
+@forward 'components/breadcrumb';
+@forward 'components/button';
+@forward 'components/textarea';
+@forward 'components/checkbox';
+@forward 'components/radio';
+@forward 'components/menu-button';
+@forward 'components/close-button';
+@forward 'components/logo';
+@forward 'components/logomark';
+@forward 'components/app-header';
+@forward 'components/label';
+@forward 'components/link';
+@forward 'components/tag';
+@forward 'components/kbd';
+@forward 'components/separator';
+@forward 'components/card';
+@forward 'components/container';
+@forward 'components/columns';
+@forward 'components/site-shell';
+@forward 'components/stack';
+@forward 'components/inline';
+@forward 'components/skip-link';
+@forward 'components/site-header';
+@forward 'components/code-block';
+@forward 'components/select';
+@forward 'components/multi-select';
+@forward 'components/async-select';
+@forward 'components/async-multi-select';
+@forward 'components/avatar';
+@forward 'components/input-phone';
+@forward 'components/accordion';
+@forward 'components/arrow';
+@forward 'components/icon';
+@forward 'molecules/input-field';
+@forward 'molecules/form-field';
+@forward 'molecules/field-row';
+@forward 'molecules/filter-bar';
+@forward 'molecules/page-intro';
+@forward 'molecules/avatar-upload';
+@forward 'molecules/site-nav';
+@forward 'molecules/language-switcher';
+@forward 'molecules/theme-switcher';
+@forward 'molecules/dropdown-field';
+@forward 'components/legal-footer';
+@forward 'components/site-footer';
+@forward 'components/hero';
+@forward 'components/highlight';
+@forward 'components/figure';
+@forward 'components/code';
+@forward 'components/radio-group';
+@forward 'molecules/notification-button';
+@forward 'molecules/notification-panel';
+@forward 'molecules/notification-list';
+@forward 'molecules/textarea-field';
+@forward 'molecules/select-field';
+@forward 'molecules/multi-select-field';
+@forward 'molecules/checkbox-field';
+@forward 'molecules/radio-field';
+@forward 'components/floating-panel';
+@forward 'components/floating-dock';
+@forward 'molecules/menu';
+@forward 'molecules/command-palette';
+@forward 'molecules/image-crop-dialog';
+@forward 'components/popover';
+@forward 'components/tooltip';
+@forward 'molecules/pagination';
+@forward 'molecules/prev-next-nav';
+@forward 'molecules/consent';
+@forward 'molecules/carousel';
+@forward 'molecules/project-card';
+@forward 'components/sidebar';
+@forward 'molecules/table';
+@forward 'molecules/data-table';
+@forward 'components/step';
+@forward 'molecules/steps';
+@forward 'molecules/stepper';
+@forward 'molecules/org-switcher';
+@forward 'molecules/app-launcher';
+@forward 'molecules/user-menu';
+@forward 'molecules/sidebar-nav';
+@forward 'molecules/modal';
+@forward 'molecules/sheet';
+@forward 'components/tabs';
+@forward 'molecules/calendar';
+@forward 'molecules/calendar-planner';
+@forward 'molecules/calendar-roster';
+@forward 'components/time-select';
+@forward 'molecules/time-field';
+@forward 'molecules/date-picker';
+@forward 'molecules/date-picker-field';
+@forward 'molecules/date-time-field';
+@forward 'components/switcher';
+@forward 'molecules/switcher-field';
+@forward 'molecules/password-field';
+@forward 'molecules/empty-state';
+@forward 'components/progress-bar';
+@forward 'components/spinner';
+@forward 'components/skeleton';
+@forward 'molecules/alert';
+@forward 'molecules/banner';
+@forward 'molecules/toast';
+@forward 'components/number-input';
+@forward 'molecules/number-input-field';
+@forward 'components/file-upload';
+@forward 'molecules/file-upload-field';
+@forward 'components/description-list';
+@forward 'components/copyable-value';
+@forward 'components/number-badge';
+@forward 'components/chat';
+@forward 'components/message-bubble';
+@forward 'components/typing-indicator';
+@forward 'molecules/message-composer';
+@forward 'molecules/conversation-thread';
+@forward 'molecules/conversation-list';
+@forward 'molecules/user-message';
+@forward 'molecules/assistant-message';
+@forward 'molecules/chat-shell';
+@forward 'molecules/onboarding-shell';
+@forward 'molecules/public-page-shell';
+@forward 'molecules/prose';
+@forward 'molecules/table-of-contents';
+@forward 'molecules/docs-search';
+@forward 'molecules/stat-tile';
+@forward 'molecules/copy-button';
+@forward 'molecules/confirm-dialog';
+@forward 'molecules/search-form';
+@forward 'molecules/input-phone-field';
+@forward 'components/otp-input';
+@forward 'molecules/otp-field';
+@forward 'molecules/async-select-field';
+@forward 'molecules/async-multi-select-field';
+@forward 'molecules/chart';
+@forward 'components/sparkline';
+@forward 'components/star-rating';
+@forward 'components/toggle';
+@forward 'components/toggle-group';
+@forward 'components/collapsible';
+@forward 'components/scroll-area';
+@forward 'components/slider';
+@forward 'molecules/tree-view';
+@forward 'molecules/annotation-thread';
+@forward 'components/text-inline';
+@forward 'molecules/uptime-bars';
+@forward 'molecules/recovery-codes';
+@forward 'molecules/connector-auth';

package/src/tokens/scss/components/_accordion.scss

@@ -0,0 +1,20 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-accordion-border-width: 1px; // Grosor del separador entre ítems
+$lxd-accordion-border-color: #111e30; // Color del separador: tinta de la superficie (prusia en claro)
+$lxd-accordion-trigger-padding-block: 1.5rem; // Aire vertical del disparador
+$lxd-accordion-trigger-padding-inline: 2rem; // Aire horizontal del disparador
+$lxd-accordion-trigger-gap: 1rem; // Hueco entre el texto y el chevron
+$lxd-accordion-trigger-cursor: pointer; // Cursor del disparador
+$lxd-accordion-index-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada: los números del acordeón numerado se alinean en columna
+$lxd-accordion-index-font-size: 0.875rem; // Un peldaño por debajo del rótulo del apartado
+$lxd-accordion-index-color: #4a4a4a; // Color del número: texto secundario, para que no compita con el rótulo
+$lxd-accordion-index-min-inline-size: 1.5rem; // Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras
+$lxd-accordion-content-padding-block: 2rem; // Aire inferior del contenido
+$lxd-accordion-content-padding-inline: 2rem; // Aire horizontal del contenido
+$lxd-accordion-transition-duration: 400ms; // Duración de abrir/cerrar (cambio de contexto: el panel entra)
+$lxd-accordion-transition-easing: ease-in-out; // Curva de abrir/cerrar
+$lxd-accordion-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-accordion-focus-ring-offset: 2px; // Separación del anillo de foco (el rol focus gobierna ancho y separación)
+$lxd-accordion-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie

package/src/tokens/scss/components/_app-header.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-app-header-content-height: 2.5rem; // Lo más alto que lleva la barra: un control md
+$lxd-app-header-padding-block: 0.5rem; // Aire arriba y abajo del contenido
+$lxd-app-header-height: calc(2.5rem + 2 * 0.5rem); // Altura de la barra: compuesta, 56px
+$lxd-app-header-bg: #ffffff; // Fondo
+$lxd-app-header-border-width: 1px; // Borde inferior que la separa del contenido
+$lxd-app-header-border-color: #111e30; // Color del borde
+$lxd-app-header-padding-inline: 1rem; // Aire lateral
+$lxd-app-header-gap: 0.75rem; // Entre el botón de menú, el inicio y los controles del final
+$lxd-app-header-flyout-offset: 0.25rem; // Separación compartida entre el borde inferior de la cabecera y el flotante que anclan sus disparadores (menú de usuario, panel de notificaciones): la que ya tenía el menú de usuario
+$lxd-app-header-z-index: 100; // Capa de barra fija

package/src/tokens/scss/components/_arrow.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-arrow-width-sm: max(1.5625vw, 24px); // Ancho tamaño pequeño
+$lxd-arrow-width-md: max(3.125vw, 48px); // Ancho tamaño mediano
+$lxd-arrow-width-lg: clamp(72px, 9.375vw, 144px); // Ancho tamaño grande (fluido con límite)