@studiolxd/brand 38.12.4

package/src/tokens/components/radio.ts

@@ -0,0 +1,11 @@
+import radio from '../../../tokens/component/radio.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(radio as never);
+
+const light = all.filter(t => !t.name.startsWith('--radio-surface-dark-'));
+
+export const radioBaseTokens     = light.filter(t => !t.name.match(/--radio-(focus|disabled)/));
+export const radioFocusTokens    = light.filter(t => t.name.includes('focus'));
+export const radioDisabledTokens = light.filter(t => t.name.includes('disabled'));
+export const radioDarkTokens     = all.filter(t => t.name.startsWith('--radio-surface-dark-'));

package/src/tokens/components/scroll-area.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --scroll-area-scrollbar-bg: rgba(0, 0, 0, 0); /** Carril de la barra: sin relleno, la barra es el pulgar */
+  --scroll-area-scrollbar-size: var(--spacing-2); /** Grosor de la barra de desplazamiento */
+  --scroll-area-transition-duration: var(--motion-duration-fast); /** Duración de la aparición de la barra */
+  --scroll-area-transition-easing: var(--motion-easing-default); /** Easing de la aparición de la barra */
+  --scroll-area-thumb-bg: var(--color-border-default-on-light); /** Pulgar de la barra */
+  --scroll-area-thumb-hover-bg: var(--color-icon-secondary-on-light); /** Pulgar al pasar el ratón o arrastrarlo */
+  --scroll-area-thumb-border-radius: var(--border-radius-default); /** Radio del pulgar (recto, como el resto del sistema) */
+  --scroll-area-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del área desplazable */
+  --scroll-area-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --scroll-area-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --scroll-area-thumb-bg: var(--color-text-on-dark); /** Pulgar — surface-dark */
+  --scroll-area-thumb-hover-bg: var(--color-accent-1); /** Pulgar señalado — surface-dark */
+  --scroll-area-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/scroll-area.ts

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

package/src/tokens/components/select.css

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --select-border-style: solid; /** Estilo del borde */
+  --select-content-max-height: var(--available-height); /** Altura máxima del dropdown (por defecto, el espacio disponible en viewport que expone Base UI) */
+  --select-height: var(--size-component-md); /** Altura del control: la talla md del sistema. Las tallas cambian la altura, no el padding vertical */
+  --select-sm-height: var(--size-component-sm); /** Altura — sm */
+  --select-lg-height: var(--size-component-lg); /** Altura — lg */
+  --select-icon-gap: var(--spacing-2); /** Entre el valor y el chevron (el chevron mide su talla de icono) */
+  --select-font-family: var(--font-family-sans); /** Familia tipográfica */
+  --select-font-size: var(--font-size-2); /** Tamaño de fuente */
+  --select-bg: var(--color-white); /** Fondo del trigger */
+  --select-icon-transition: var(--motion-duration-fast); /** Duración de la transición del icono */
+  --select-content-bg: var(--color-white); /** Fondo del dropdown */
+  --select-content-z-index: var(--z-index-floating); /** Capa del desplegable: flotante */
+  --select-item-padding-block: var(--spacing-2); /** Padding block de cada opción */
+  --select-sm-font-size: var(--font-size-1); /** Cuerpo — sm */
+  --select-sm-padding-inline: var(--spacing-2); /** Padding inline del trigger — variante sm */
+  --select-sm-item-padding-block: var(--spacing-1); /** Padding block de cada opción — variante sm */
+  --select-lg-font-size: var(--font-size-3); /** Cuerpo — lg */
+  --select-lg-padding-inline: var(--spacing-5); /** Padding inline del trigger — variante lg */
+  --select-lg-item-padding-block: var(--spacing-3); /** Padding block de cada opción — variante lg */
+  --select-border-radius: var(--border-radius-default); /** Radio del borde del trigger */
+  --select-border-width: var(--border-width-default); /** Grosor del borde */
+  --select-border-color: var(--color-primary); /** Color del borde */
+  --select-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (excepción a «bordes en prusia») */
+  --select-padding-inline: var(--control-padding-inline); /** Padding inline del trigger */
+  --select-line-height: var(--control-line-height); /** Interlineado del trigger */
+  --select-font-weight: var(--font-weight-default); /** Peso tipográfico */
+  --select-color: var(--color-text-on-light); /** Color del texto */
+  --select-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --select-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --select-content-border-color: var(--color-primary); /** Borde del dropdown */
+  --select-item-selected-font-weight: var(--font-weight-emphasis); /** La opción elegida, en énfasis */
+  --select-item-highlighted-bg: var(--color-primary); /** Relleno de la opción 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 recorre la lista */
+  --select-item-highlighted-color: var(--color-text-on-dark); /** Texto de la opción resaltada: invierte con el relleno — el glifo de marcado lo hereda por `currentColor` */
+  --select-separator-color: var(--separator-color); /** Color del separador entre grupos — el de la línea del sistema */
+  --select-separator-height: var(--separator-thickness); /** Grosor del separador entre grupos — el de la línea del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --select-bg: var(--color-background-dark); /** Fondo del trigger — surface-dark */
+  --select-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
+  --select-border-color: var(--color-text-on-dark); /** Color del borde — surface-dark */
+  --select-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — surface-dark */
+  --select-content-bg: var(--color-background-dark); /** Fondo del dropdown — surface-dark */
+  --select-content-border-color: var(--color-text-on-dark); /** Borde del dropdown — surface-dark */
+  --select-separator-color: var(--color-text-on-dark); /** Color del separador entre grupos — surface-dark */
+  --select-item-highlighted-bg: var(--color-text-on-dark); /** Relleno de la opción resaltada — surface-dark: la misma inversión de marca, al revés */
+  --select-item-highlighted-color: var(--color-primary); /** Texto de la opción resaltada — surface-dark */
+}

package/src/tokens/components/select.ts

@@ -0,0 +1,8 @@
+import select from '../../../tokens/component/select.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(select as never);
+
+export const selectTriggerTokens  = all.filter(t => !t.name.match(/--select-(content|item|focus)/));
+export const selectFocusTokens    = all.filter(t => t.name.includes('focus'));
+export const selectDropdownTokens = all.filter(t => t.name.match(/--select-(content|item)/));

package/src/tokens/components/separator.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --separator-spacing-sm: var(--spacing-1); /** Aire a ambos lados, talla sm — dentro de un control */
+  --separator-spacing-md: var(--spacing-2); /** Aire a ambos lados, talla md — entre grupos de un menú o de una lista. Es el aire que ya usaban Menu, UserMenu, OrgSwitcher y Sidebar */
+  --separator-spacing-lg: var(--spacing-4); /** Aire a ambos lados, talla lg — entre bloques de una tarjeta o de un panel */
+  --separator-color: var(--color-primary); /** Color de la línea sobre superficie clara. Es el prusia del sistema: una línea de separación no es un gris de estado */
+  --separator-thickness: var(--border-width-default); /** Grosor de la línea. Todo borde del sistema mide lo mismo (Foundations → Bordes) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --separator-color: var(--color-text-on-dark); /** Color de la línea — surface-dark */
+}

package/src/tokens/components/separator.ts

@@ -0,0 +1,8 @@
+import separator from '../../../tokens/component/separator.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(separator as never);
+
+export const separatorTokens     = all.filter(t => !t.name.startsWith('--separator-spacing-') && !t.name.startsWith('--separator-surface-dark-'));
+export const separatorSpacingTokens = all.filter(t => t.name.startsWith('--separator-spacing-'));
+export const separatorDarkTokens = all.filter(t => t.name.startsWith('--separator-surface-dark-'));

package/src/tokens/components/sheet.ts

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

package/src/tokens/components/sidebar-nav.ts

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

package/src/tokens/components/sidebar.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --sidebar-width: 15rem; /** Ancho por defecto desplegada (240px). Medida de maqueta, como la de lectura: no pertenece a la escala de tallas */
+  --sidebar-min-width: 12rem; /** Ancho mínimo desplegada (192px): por debajo, al redimensionar, salta a rail */
+  --sidebar-max-width: 24rem; /** Ancho máximo desplegada (384px) */
+  --sidebar-resize-step: 16; /** Píxeles por pulsación de flecha en el asa (teclado) */
+  --sidebar-padding-inline: var(--spacing-2); /** Aire lateral de desplegada (8px). El rail no usa este token — ver `rail-padding-inline-start`, simétrico a ambos lados */
+  --sidebar-padding-block: var(--spacing-4); /** Aire vertical de cabecera y pie */
+  --sidebar-panel-padding-block: var(--spacing-6); /** Aire vertical del panel (arriba y abajo de la lista de navegación), incondicional — con o sin logo/footer, en rail y desplegada. El doble del aire de cabecera/pie: antes dependía de que hubiera logo, ahora no */
+  --sidebar-gap: var(--spacing-3); /** Entre cabecera, panel y pie */
+  --sidebar-resizer-width: var(--spacing-2); /** Zona de agarre del asa de redimensión (8px), centrada en el borde */
+  --sidebar-transition-duration: var(--motion-duration-base); /** Apertura y cierre */
+  --sidebar-transition-easing: var(--motion-easing-in-out); /** Curva de apertura y cierre */
+  --sidebar-drawer-z-index: var(--z-index-modal); /** En móvil la sidebar es un cajón sobre la página */
+  --sidebar-backdrop-z-index: var(--z-index-backdrop); /** Velo bajo el cajón */
+  --sidebar-group-padding-block: var(--spacing-2); /** Aire vertical de una sección del panel */
+  --sidebar-group-gap: var(--spacing-1); /** Entre elementos de una sección */
+  --sidebar-rail-width: calc(2 * var(--app-header-padding-inline) + var(--size-component-md)); /** Ancho del rail (72px): inset simétrico `1rem` (16px) a los dos lados — el izquierdo alinea el centro del icono con el centro del `MenuButton` del header — + caja de icono `2.5rem` (40px). Ver `rail-padding-inline-start` */
+  --sidebar-bg: var(--color-background-light); /** Fondo */
+  --sidebar-border-width: var(--border-width-default); /** Borde que separa la sidebar del contenido */
+  --sidebar-border-color: var(--color-primary); /** Color del borde */
+  --sidebar-rail-padding-inline-start: var(--app-header-padding-inline); /** Inset del rail (16px), igual a `--app-header-padding-inline`, a AMBOS lados (simétrico): alinea el centro del icono del rail con el centro del `MenuButton` del header (x=36px) y evita el aire desigual de una columna estrecha. Desacoplado del padding de desplegada (`padding-inline`) para no romper su alineación, ya correcta por composición de otros tokens */
+  --sidebar-resizer-hover-color: var(--color-primary); /** El borde se marca al pasar por el asa o al arrastrar */
+  --sidebar-backdrop-bg: var(--modal-backdrop-bg); /** El velo del sistema */
+  --sidebar-backdrop-opacity: var(--modal-backdrop-opacity); /** Opacidad del velo, la del sistema */
+  --sidebar-separator-margin-block: var(--separator-spacing-md); /** Aire de la línea — el aire md de la línea del sistema */
+  --sidebar-separator-color: var(--separator-color); /** Línea entre secciones — el color de la línea del sistema */
+  --sidebar-separator-height: var(--separator-thickness); /** Grosor de la línea — el de la línea del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --sidebar-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --sidebar-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+  --sidebar-separator-color: var(--color-text-on-dark); /** Línea — surface-dark */
+  --sidebar-resizer-hover-color: var(--color-text-on-dark); /** Asa de redimensionado bajo el puntero — surface-dark */
+}

package/src/tokens/components/sidebar.ts

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

package/src/tokens/components/site-footer.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-footer-column-min-size: 10rem; /** Ancho mínimo de una columna de enlaces: por debajo, las columnas se apilan */
+  --site-footer-gap: var(--spacing-7); /** Aire entre los bloques del pie (marca, columnas, contacto) */
+  --site-footer-brand-gap: var(--spacing-4); /** Aire entre el logotipo y la frase de marca */
+  --site-footer-columns-gap: var(--spacing-6); /** Aire entre columnas de enlaces */
+  --site-footer-column-gap: var(--spacing-3); /** Aire entre el título de una columna y sus enlaces */
+  --site-footer-links-gap: var(--spacing-2); /** Aire entre enlaces de una columna */
+  --site-footer-legal-space-before: var(--spacing-6); /** Aire entre el cuerpo del pie y el bloque legal */
+  --site-footer-space-block-start: var(--section-padding-block-2xl); /** Aire sobre el pie (64px): el ritmo de una banda destacada. Es del pie, no del envoltorio */
+  --site-footer-space-block-end: var(--section-padding-block-2xl); /** Aire bajo el pie (64px) */
+  --site-footer-space-block-start-compact: var(--section-padding-block-xl); /** Aire sobre el pie en móvil (48px, por debajo de md) */
+  --site-footer-space-block-end-compact: var(--section-padding-block-xl); /** Aire bajo el pie en móvil (48px, por debajo de md) */
+  --site-footer-legal-separator-color: var(--separator-color); /** Línea sobre el bloque legal. Es la línea de separación del sistema */
+  --site-footer-legal-separator-thickness: var(--separator-thickness); /** Grosor de la línea sobre el bloque legal */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --site-footer-legal-separator-color: var(--color-text-on-dark); /** Línea sobre el bloque legal — surface-dark */
+}

package/src/tokens/components/site-footer.ts

@@ -0,0 +1,7 @@
+import siteFooter from '../../../tokens/component/site-footer.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(siteFooter as never);
+
+export const siteFooterTokens     = all.filter(t => !t.name.includes('-surface-dark-'));
+export const siteFooterDarkTokens = all.filter(t => t.name.includes('-surface-dark-'));

package/src/tokens/components/site-header.css

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-header-gap-narrow: var(--spacing-2); /** Separación entre marca y controles en teléfono (por debajo de sm) */
+  --site-header-gap: var(--spacing-3); /** Separación entre logo y controles */
+  --site-header-panel-padding-block-end: var(--spacing-5); /** Aire inferior del panel, bajo los ajustes (idioma, tema), que van pegados al fondo: menos que arriba */
+  --site-header-panel-z-index: var(--z-index-modal); /** El panel a pantalla completa es una capa modal: sobre el contenido, bajo lo flotante */
+  --site-header-panel-transition-duration: var(--motion-duration-slow); /** Entrada y salida del panel: cambio de contexto */
+  --site-header-panel-transition-easing: var(--motion-easing-in-out); /** Curva del panel: movimiento */
+  --site-header-panel-gap: var(--spacing-7); /** Ritmo vertical entre las secciones del panel: el índice, el buscador y los ajustes del sitio. Es un solo aire para todas, no uno por sección */
+  --site-header-settings-gap: var(--spacing-5); /** Separación entre los ajustes del sitio: en fila en escritorio, apilados en móvil */
+  --site-header-content-height-compact: var(--logo-height-lg); /** Lo más alto que lleva la barra en móvil (por debajo de md): el logotipo a talla lg (48px), para que quepa con los controles */
+  --site-header-content-height-narrow: var(--logo-height-md); /** Lo más alto que lleva la barra en teléfono (por debajo de sm): el logotipo a talla md (40px), para caber en 360px con idioma y menú */
+  --site-header-bg: var(--color-background-light); /** Fondo de la barra */
+  --site-header-z-index: var(--app-header-z-index); /** Capa z — sobre el contenido, bajo los paneles flotantes */
+  --site-header-panel-bg: var(--color-background-light); /** Fondo del panel de navegación */
+  --site-header-panel-padding-block: var(--section-padding-block-xl); /** Aire superior del panel, entre la barra y el índice */
+  --site-header-settings-margin-block-start: var(--site-header-panel-gap); /** Aire mínimo entre el índice y los ajustes del sitio (idioma, tema), que van pegados al borde inferior del panel: el ritmo del panel. Se mantiene por compatibilidad; quien quiera cambiarlo toca `panel-gap` */
+  --site-header-content-height: var(--logo-height-xxl); /** Lo más alto que lleva la barra: el logotipo a talla xxl (85px) */
+  --site-header-height-narrow: calc(var(--site-header-content-height-narrow) + 2 * var(--app-header-padding-block)); /** Alto de la barra en teléfono (56px, la misma que la barra de aplicación) */
+  --site-header-height-compact: calc(var(--site-header-content-height-compact) + 2 * var(--app-header-padding-block)); /** Alto de la barra en móvil (64px) */
+  --site-header-logo-margin-inline-start: calc(-1 * var(--container-padding-inline)); /** La marca sale del aire lateral del Container: el logotipo trae su propio espacio de seguridad en el trazado, y con el padding encima se veía descolgado del borde del contenido */
+  --site-header-panel-padding-inline: var(--container-padding-inline); /** Aire lateral del panel: el mismo del Container, para que su contenido caiga en la misma columna que la barra. El panel es `position: fixed`, así que sale del flujo de la banda y no hereda el aire que esta ya puso */
+  --site-header-height: calc(var(--site-header-content-height) + 2 * var(--app-header-padding-block)); /** Alto de la barra: el logotipo más el aire del sistema arriba y abajo (101px). La barra de aplicación mide 56: en la web manda la marcacación, para que ambas superficies coincidan */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --site-header-bg: var(--color-background-dark); /** Fondo de la barra — surface-dark */
+  --site-header-panel-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+}

package/src/tokens/components/site-header.ts

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

package/src/tokens/components/site-shell.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-shell-text-font-size: var(--font-size-3); /** Cuerpo de texto de la superficie pública (20px): la talla de los controles lg. Dentro del SiteShell todo el texto que hereda del lienzo va a esta talla; AppShell sigue a la base */
+  --site-shell-text-line-height: var(--line-height-normal); /** Interlineado del cuerpo en la superficie pública */
+  --site-shell-paragraph-small-font-size: var(--font-size-2); /** Párrafo pequeño en la superficie pública (16px): un peldaño por debajo del cuerpo de 20px */
+  --site-shell-paragraph-large-font-size: var(--font-size-4); /** Párrafo grande en la superficie pública (24px): un peldaño por encima del cuerpo de 20px */
+  --site-shell-heading-size-1: var(--font-size-2); /** Paso 1 de la escala de títulos en la superficie pública (16px): un peldaño por encima del paso base */
+  --site-shell-heading-size-2: var(--font-size-3); /** Paso 2 de la escala de títulos en la superficie pública (20px) */
+  --site-shell-heading-size-3: var(--font-size-3); /** Paso 3 de la escala de títulos en la superficie pública (20px) — el de H6: iguala al cuerpo, y se distingue por el peso */
+  --site-shell-heading-size-4: var(--font-size-4); /** Paso 4 de la escala de títulos en la superficie pública (24px) — el de H5: por encima del cuerpo */
+  --site-shell-heading-size-5: var(--font-size-5); /** Paso 5 de la escala de títulos en la superficie pública (28px) — el de H4 */
+  --site-shell-heading-size-6: var(--font-size-6); /** Paso 6 de la escala de títulos en la superficie pública (32px) — el de H3 */
+  --site-shell-heading-size-7: var(--font-size-7); /** Paso 7 de la escala de títulos en la superficie pública (40px) — el de H2 */
+  --site-shell-heading-size-8: var(--font-size-8); /** Paso 8 de la escala de títulos en la superficie pública (56px) — el de H1 */
+  --site-shell-heading-size-9: var(--font-size-9); /** Paso 9 de la escala de títulos en la superficie pública (72px) — display pequeño */
+  --site-shell-heading-size-10: var(--font-size-10); /** Paso 10 de la escala de títulos en la superficie pública (96px): el techo de la escala, no sube más */
+  --site-shell-close-size: var(--size-component-lg); /** Caja del botón de cerrar de Modal/Sheet en la superficie pública: objetivo táctil lg */
+  --site-shell-close-icon-size: var(--icon-size-lg); /** Glifo del botón de cerrar de Modal/Sheet en la superficie pública: lg, a juego con la caja lg — el aspa pesa lo mismo que el resto de la superficie pública, más grande que en aplicación */
+}

package/src/tokens/components/site-shell.ts

@@ -0,0 +1,9 @@
+import siteShellJson from '../../../tokens/component/site-shell.json';
+import { flattenTokens } from '../utils';
+
+export const siteShellTokens = flattenTokens(siteShellJson as never);
+
+/** Los que redefinen la escala de lectura de la superficie pública. */
+export const siteShellTypeTokens = siteShellTokens.filter(
+  (t) => /^--site-shell-(text|paragraph|heading)-/.test(t.name),
+);

package/src/tokens/components/skeleton.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --skeleton-height: 1lh; /** Alto por defecto — una línea de texto */
+  --skeleton-duration: 1400ms; /** Duración del barrido — igual que Spinner, token propio: un bucle no es una transición del sistema */
+  --skeleton-highlight: var(--color-white); /** Brillo que recorre el bloque */
+  --skeleton-bg: var(--color-surface-secondary-on-light); /** Fondo base del bloque en carga — superficie clara secundaria, mismo rol que kbd/code-block */
+  --skeleton-border-radius: var(--border-radius-default); /** Radio del bloque */
+  --skeleton-circle-border-radius: var(--border-radius-round); /** Radio de la variante circular (avatares) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --skeleton-bg: var(--color-surface-secondary-on-dark); /** Fondo base — surface-dark */
+  --skeleton-highlight: var(--color-surface-highlight-on-dark); /** Brillo — surface-dark, un paso más claro que el fondo */
+}

package/src/tokens/components/skeleton.ts

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

package/src/tokens/components/skip-link.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --skip-link-padding-block: var(--spacing-2); /** Aire vertical del enlace revelado */
+  --skip-link-padding-inline: var(--spacing-4); /** Aire horizontal del enlace revelado */
+  --skip-link-inset: var(--spacing-2); /** Separación de la esquina de la ventana al revelarse */
+  --skip-link-focus-ring-offset: var(--spacing-1); /** Separación del anillo de foco (4px): el hueco es la página, como en los botones */
+  --skip-link-z-index: var(--z-index-skip); /** Sobre cualquier otra capa: es lo primero al tabular */
+  --skip-link-bg: var(--color-primary); /** Fondo del enlace revelado: relleno de marca */
+  --skip-link-color: var(--color-text-on-dark); /** Texto sobre el relleno */
+  --skip-link-font-weight: var(--font-weight-emphasis); /** Peso del texto: es una acción */
+  --skip-link-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --skip-link-focus-ring-color: var(--color-primary); /** Anillo de foco: va por fuera, sobre la página, así que es la tinta de la superficie (prusia), no la que contrasta con el relleno */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --skip-link-bg: var(--color-text-on-dark); /** Fondo — surface-dark: el relleno se invierte para verse sobre prusia */
+  --skip-link-color: var(--color-primary); /** Texto — surface-dark */
+  --skip-link-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark (blanco sobre la página prusia) */
+}

package/src/tokens/components/skip-link.ts

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

package/src/tokens/components/slider.css

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --slider-cursor: pointer; /** Cursor sobre la banda */
+  --slider-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --slider-control-block-size: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
+  --slider-track-size: var(--spacing-1); /** Grosor del carril */
+  --slider-thumb-size: var(--icon-size-sm); /** Lado del pulgar (cuadrado, como el resto de formas del sistema) */
+  --slider-value-gap: var(--spacing-3); /** Separación entre la banda y el valor */
+  --slider-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
+  --slider-transition-duration: var(--motion-duration-fast); /** Duración de la transición del pulgar */
+  --slider-transition-easing: var(--motion-easing-default); /** Easing de la transición del pulgar */
+  --slider-focus-ring-offset: var(--spacing-1); /** Separación del anillo de foco */
+  --slider-track-bg: var(--color-border-default-on-light); /** Carril sin recorrer */
+  --slider-track-border-radius: var(--border-radius-default); /** Radio del carril (recto, como el resto del sistema) */
+  --slider-indicator-bg: var(--color-primary); /** Tramo recorrido */
+  --slider-thumb-bg: var(--color-primary); /** Relleno del pulgar */
+  --slider-thumb-border-width: var(--border-width-default); /** Grosor del borde del pulgar */
+  --slider-thumb-border-color: var(--color-primary); /** Borde del pulgar */
+  --slider-thumb-border-radius: var(--border-radius-default); /** Radio del pulgar */
+  --slider-value-font-family: var(--control-font-family); /** Familia del valor cuando se muestra */
+  --slider-value-font-size: var(--control-font-size); /** Tamaño del valor cuando se muestra */
+  --slider-value-color: var(--color-text-on-light); /** Tinta del valor cuando se muestra */
+  --slider-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --slider-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --slider-track-bg: var(--color-text-on-dark); /** Carril sin recorrer — surface-dark */
+  --slider-indicator-bg: var(--color-accent-1); /** Tramo recorrido — surface-dark. El prusia coincide con el fondo de la superficie; el par es el de `Button primary` */
+  --slider-thumb-bg: var(--color-accent-1); /** Relleno del pulgar — surface-dark */
+  --slider-thumb-border-color: var(--color-accent-1); /** Borde del pulgar — surface-dark */
+  --slider-value-color: var(--color-text-on-dark); /** Tinta del valor — surface-dark */
+  --slider-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/slider.ts

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

package/src/tokens/components/sparkline.css

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --sparkline-width: 5rem; /** 80px — ancho por defecto de la chispa dentro de un StatTile */
+  --sparkline-height: var(--spacing-5); /** 24px — alto por defecto: la chispa acompaña a una cifra, no la compite */
+  --sparkline-fill-opacity: var(--chart-area-fill-opacity); /** Velo bajo la línea cuando la chispa se pinta como área */
+  --sparkline-accent-color: var(--chart-series-1); /** Periodo actual y punto final: la ranura de apertura del sistema */
+  --sparkline-marker-size: var(--chart-marker-size); /** Diámetro del punto final */
+  --sparkline-line-width: var(--chart-line-width); /** Grosor de la línea. Es la misma marca que en Chart */
+  --sparkline-color: var(--chart-muted-color); /** Trazo de la serie: gris de atenuación, porque el dato que se lee es la cifra que va al lado */
+  --sparkline-baseline-color: var(--chart-axis-color); /** Línea del cero cuando la serie cruza el cero: es el ancla del dato, no rejilla, así que lleva la tinta del eje (≥3:1 contra la superficie, WCAG 1.4.11) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --sparkline-accent-color: var(--color-chart-series-1-on-dark); /** Acento — surface-dark */
+  --sparkline-color: var(--color-text-muted-on-dark); /** Trazo — surface-dark */
+  --sparkline-baseline-color: var(--color-disabled-border-on-dark); /** Línea del cero — surface-dark: la tinta del eje en oscuro */
+}

package/src/tokens/components/sparkline.ts

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

package/src/tokens/components/spinner.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --spinner-border-width-sm: 2px; /** Grosor del trazo (stroke) para sm */
+  --spinner-border-width-md: 2px; /** Grosor del trazo (stroke) para md */
+  --spinner-border-width-lg: 3px; /** Grosor del trazo (stroke) para lg */
+  --spinner-animation-duration: 1000ms; /** Tiempo en dibujar el contorno completo (un ciclo del bucle) */
+  --spinner-size-sm: var(--spacing-4); /** 16px — compact spinner */
+  --spinner-size-md: var(--spacing-5); /** 24px — default spinner */
+  --spinner-size-lg: var(--spacing-6); /** 32px — large spinner */
+}

package/src/tokens/components/spinner.ts

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

package/src/tokens/components/stack.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --stack-gap-sm: var(--spacing-2); /** Aire entre piezas apiladas — compacto (8px): líneas de un mismo dato (nombre y correo, título y subtítulo). Es el mismo peldaño que `inline.gap-sm`, y queda por debajo del aire entre dos párrafos (`prose.flow-space`, 16px): las líneas se leen como una sola cosa */
+  --stack-gap-md: var(--spacing-5); /** Aire entre piezas apiladas — base */
+  --stack-gap-lg: var(--spacing-7); /** Aire entre piezas apiladas — amplio */
+}

package/src/tokens/components/stack.ts

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

package/src/tokens/components/star-rating.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --star-rating-star-size: 1.25em; /** Tamaño de la estrella — relativo al texto que la rodea, como el resto de marcas en línea */
+  --star-rating-sm-star-size: 1em; /** Tamaño de la estrella — talla sm */
+  --star-rating-lg-star-size: 1.5em; /** Tamaño de la estrella — talla lg */
+  --star-rating-cursor: pointer; /** Cursor sobre una estrella elegible */
+  --star-rating-disabled-cursor: not-allowed; /** Cursor cuando la entrada está deshabilitada */
+  --star-rating-gap: var(--spacing-1); /** Separación entre estrellas */
+  --star-rating-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando la entrada está deshabilitada */
+  --star-rating-transition-duration: var(--motion-duration-fast); /** Duración del cambio de relleno */
+  --star-rating-transition-easing: var(--motion-easing-default); /** Easing del cambio de relleno */
+  --star-rating-track-color: var(--color-icon-secondary-on-light); /** Contorno de la estrella sin ganar */
+  --star-rating-fill-color: var(--color-primary); /** Relleno y contorno de la estrella ganada */
+  --star-rating-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --star-rating-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --star-rating-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --star-rating-track-color: var(--color-text-on-dark); /** Contorno de la estrella sin ganar — surface-dark */
+  --star-rating-fill-color: var(--color-accent-1); /** Relleno de la estrella ganada — surface-dark. `fill-color` (prussian) coincide con el fondo de la superficie y quedaría invisible. */
+  --star-rating-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/star-rating.ts

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

package/src/tokens/components/step.css

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --step-size-sm: var(--spacing-5); /** 24px — marca compacta: listas de proceso densas */
+  --step-size-md: var(--spacing-6); /** 32px — por defecto: la talla que ya usaba Stepper */
+  --step-icon-size: var(--icon-size-sm); /** El check de un paso `done`, o el icono que trae el paso: el icono dentro de un control */
+  --step-font-family: var(--font-family-sans); /** Tipografía de la cifra */
+  --step-font-size-sm: var(--font-size-0); /** 12px — cifra en marca `sm` */
+  --step-font-size-md: var(--font-size-1); /** 14px — cifra en marca `md` */
+  --step-transition-duration: var(--motion-duration-fast); /** Duración del cambio de fondo de la marca (un paso que pasa a completado, o vuelve a pendiente) */
+  --step-transition-easing: var(--motion-easing-default); /** Curva del cambio de fondo */
+  --step-border-radius: var(--border-radius-default); /** Marca cuadrada, el radio del sistema — no `round`: la marca de un paso es identidad de marca, no un avatar ni una píldora */
+  --step-border-width: var(--border-width-default); /** Filete de la marca hueca (estado `pending`). Todo borde del sistema mide lo mismo */
+  --step-font-weight: var(--font-weight-default); /** Peso de la cifra: dentro de una marca rellena de otro color el peso no señala nada — el estado ya lo dicen el relleno y el filete */
+  --step-pending-bg: var(--color-background-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
+  --step-pending-border-color: var(--color-border-default-on-light); /** Filete de una marca hueca: el borde general del sistema */
+  --step-pending-color: var(--color-text-muted-on-light); /** Cifra de una marca hueca: texto secundario */
+  --step-tone-primary-bg: var(--color-primary); /** Relleno tono primary: la marca del sistema */
+  --step-tone-primary-color: var(--color-text-on-dark); /** Tinta sobre el relleno primary */
+  --step-tone-accent-1-bg: var(--color-accent-1); /** Relleno tono accent-1 (lavender) */
+  --step-tone-accent-1-color: var(--color-text-on-light); /** Tinta sobre accent-1 */
+  --step-tone-accent-2-bg: var(--color-accent-2); /** Relleno tono accent-2 (yellow) */
+  --step-tone-accent-2-color: var(--color-text-on-light); /** Tinta sobre accent-2 */
+  --step-tone-support-1-bg: var(--color-support-1); /** Relleno tono support-1 (emerald) */
+  --step-tone-support-1-color: var(--color-text-on-light); /** Tinta sobre support-1 */
+  --step-tone-support-2-bg: var(--color-support-2); /** Relleno tono support-2 (cayenne) */
+  --step-tone-support-2-color: var(--color-text-on-light); /** Tinta sobre support-2 */
+  --step-tone-danger-bg: var(--color-error-fill); /** Relleno tono danger */
+  --step-tone-danger-color: var(--color-error-fill-text); /** Tinta sobre danger */
+  --step-tone-success-bg: var(--color-success-fill); /** Relleno tono success */
+  --step-tone-success-color: var(--color-success-fill-text); /** Tinta sobre success */
+  --step-tone-neutral-bg: var(--color-surface-inverse-on-light); /** Relleno tono neutral (gris oscuro) */
+  --step-tone-neutral-color: var(--color-text-on-dark); /** Tinta sobre neutral */
+  --step-connector-thickness: var(--border-width-default); /** Grosor de la línea entre pasos. Compartido por Stepper y Steps */
+  --step-connector-color: var(--color-border-default-on-light); /** Tramo sin recorrer / línea de unión: el rol de borde del sistema, el mismo que el filete de la marca `pending` */
+  --step-connector-done-color: var(--color-primary); /** Tramo recorrido (solo Stepper, que tiene estado): la marca del sistema */
+  --step-description-color: var(--color-text-muted-on-light); /** Línea de detalle bajo una marca: texto secundario. La usan la descripción de Stepper y la de Steps, para que digan lo mismo con el mismo color */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --step-pending-bg: var(--color-background-dark); /** Fondo de la marca hueca — surface-dark */
+  --step-pending-border-color: var(--color-text-on-dark); /** Filete de la marca hueca — surface-dark */
+  --step-pending-color: var(--color-text-muted-on-dark); /** Cifra de la marca hueca — surface-dark */
+  --step-tone-primary-bg: var(--color-accent-2); /** Relleno primary — surface-dark. El prusia es el lienzo; se aparta de la derivación (lavanda, el par de Button primary) a propósito, en amarillo, para que el progreso no se confunda con una acción — decisión heredada de Stepper */
+  --step-tone-primary-color: var(--color-primary); /** Tinta sobre el relleno primary — surface-dark: 11,2:1 sobre accent-2 */
+  --step-tone-neutral-bg: var(--color-surface-inverse-on-dark); /** Relleno neutral — surface-dark: la superficie invertida, como en NumberBadge/Tag */
+  --step-tone-neutral-color: var(--color-text-on-light); /** Tinta sobre neutral — surface-dark */
+  --step-connector-color: var(--color-text-on-dark); /** Tramo sin recorrer / línea de unión — surface-dark */
+  --step-connector-done-color: var(--color-accent-2); /** Tramo recorrido — surface-dark: el mismo amarillo que la marca hecha */
+  --step-description-color: var(--color-text-muted-on-dark); /** Línea de detalle bajo una marca — surface-dark */
+}