@studiolxd/brand 38.12.4

package/src/tokens/components/label.ts

@@ -0,0 +1,10 @@
+import labelJson from '../../../tokens/component/label.json';
+import { flattenTokens, type Token } from '../utils';
+
+const all = flattenTokens(labelJson as never);
+
+export const labelBaseTokens = all;
+
+export const labelDarkTokens: Token[] = [
+  { name: '--label-dark-color', value: 'var(--color-text-on-dark)', description: 'Color del texto sobre fondo oscuro' },
+];

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --legal-footer-padding-block: var(--spacing-5); /** Aire arriba y abajo del pie */
+  --legal-footer-gap: var(--spacing-3); /** Entre el título y la lista de enlaces */
+  --legal-footer-links-gap: var(--spacing-4); /** Entre enlaces */
+  --legal-footer-links-gap-stacked: var(--spacing-3); /** Separación entre enlaces apilados (móvil, por debajo de md) */
+}

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

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

package/src/tokens/components/link.css

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --link-hover-underline-width: 0px; /** Grosor de la línea en hover (en claro desaparece) */
+  --link-cursor: pointer; /** Cursor */
+  --link-ink-hover-underline-width: 0px; /** Tono ink: sin línea en hover */
+  --link-accent-1-hover-underline-width: 0px; /** Tono accent-1: sin línea en hover, como accent */
+  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea */
+  --link-icon-gap: var(--spacing-2); /** Aire entre el icono y el texto del enlace */
+  --link-color: var(--color-text-on-light); /** El enlace no tiene color propio: es texto, y lo distingue el subrayado */
+  --link-hover-color: var(--color-text-on-light); /** Color en hover */
+  --link-underline-width: var(--border-width-default); /** El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor */
+  --link-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --link-focus-ring-offset: var(--border-width-default); /** Separación entre el enlace y el anillo */
+  --link-focus-ring-color: var(--color-primary); /** Anillo de foco */
+  --link-ink-color: var(--color-text-on-light); /** Tono ink (enlaces utilitarios: legal, volver): tinta */
+  --link-ink-underline-width: var(--border-width-default); /** Tono ink: línea en reposo, en las dos superficies */
+  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar) */
+  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea */
+  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --link-underline-width: 0px; /** Sin línea en reposo — surface-dark */
+  --link-color: var(--color-accent-2); /** Color — surface-dark: amarillo (accent-2), y sin línea en reposo */
+  --link-hover-color: var(--color-accent-2); /** Hover — surface-dark: amarillo, con línea */
+  --link-hover-underline-width: var(--border-width-default); /** Línea en hover — surface-dark */
+  --link-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --link-ink-color: var(--color-text-on-dark); /** Tono ink — surface-dark: blanco, no amarillo */
+}

package/src/tokens/components/link.ts

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

package/src/tokens/components/logo.css

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --logo-height-sm: var(--size-component-sm); /** Alto del logotipo en barras compactas (Sidebar). El ancho sale de la proporción del trazado */
+  --logo-height-md: var(--size-component-md); /** Alto por defecto: cabeceras y formularios de acceso */
+  --logo-height-lg: var(--size-component-lg); /** Alto destacado: pie de página */
+  --logo-height-xl: var(--icon-size-xl); /** Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control */
+  --logo-height-xxl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
+  --logo-color: var(--color-text-on-light); /** Color del trazado sobre superficie clara */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --logo-color: var(--color-text-on-dark); /** Color del trazado — surface-dark */
+}

package/src/tokens/components/logo.ts

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

package/src/tokens/components/logomark.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --logomark-size-sm: var(--size-component-sm); /** Lado del isotipo en barras compactas. Es cuadrado: alto y ancho coinciden */
+  --logomark-size-md: var(--size-component-md); /** Lado por defecto: cabeceras y avatares de aplicación */
+  --logomark-size-lg: var(--size-component-lg); /** Lado destacado: pie de página y tarjetas */
+  --logomark-size-xl: var(--icon-size-xl); /** Lado de marca (64px): la talla ilustrativa de la escala de iconos, no una talla de control */
+  --logomark-color: var(--color-text-on-light); /** Color del trazado sobre superficie clara */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --logomark-color: var(--color-text-on-dark); /** Color del trazado — surface-dark */
+}

package/src/tokens/components/logomark.ts

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

package/src/tokens/components/menu-button.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --menu-button-line-shift: 6px; /** Cuánto recorre cada barra al plegarse en aspa. Va en unidades del viewBox del icono (24), donde 6 es el paso entre las tres líneas del glifo `menu`: con ese recorrido la primera y la tercera aterrizan exactamente sobre el aspa de `close` */
+  --menu-button-size-sm: var(--size-component-sm); /** Lado del botón en talla sm */
+  --menu-button-size-md: var(--size-component-md); /** Lado del botón en talla md (por defecto) */
+  --menu-button-size-lg: var(--size-component-lg); /** Lado del botón en talla lg: la cabecera del sitio, con el glifo a 48px */
+  --menu-button-transition-duration: var(--motion-duration-base); /** Duración del paso de barras a aspa */
+  --menu-button-transition-easing: var(--motion-easing-in-out); /** Curva del paso de barras a aspa: movimiento */
+  --menu-button-color: var(--color-text-on-light); /** Color del glifo */
+  --menu-button-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --menu-button-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --menu-button-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --menu-button-color: var(--color-text-on-dark); /** Color del glifo — surface-dark */
+  --menu-button-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/menu-button.ts

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

package/src/tokens/components/menu.ts

@@ -0,0 +1,9 @@
+import menu from '../../../tokens/component/menu.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(menu as never);
+
+export const menuPanelTokens = all.filter(t => !t.name.match(/--menu-item|--menu-label|--menu-separator|--menu-disabled/));
+export const menuItemTokens  = all.filter(t => t.name.match(/--menu-item/) && !t.name.match(/destructive/));
+export const menuDestructiveTokens = all.filter(t => t.name.match(/destructive/));
+export const menuLabelSeparatorTokens = all.filter(t => t.name.match(/--menu-label|--menu-separator|--menu-disabled/));

package/src/tokens/components/message-bubble.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --message-bubble-border-style: solid; /** Estilo del contorno */
+  --message-bubble-padding-block: var(--spacing-3); /** Aire vertical del globo */
+  --message-bubble-padding-inline: var(--spacing-4); /** Aire horizontal del globo */
+  --message-bubble-max-width: var(--chat-bubble-max-width); /** Anchura máxima del globo dentro del hilo — cascada desde `chat`, la medida es del hilo, no del globo */
+  --message-bubble-font-family: var(--font-family-sans); /** Familia tipográfica */
+  --message-bubble-line-height: var(--line-height-relaxed); /** Interlineado */
+  --message-bubble-tail-size: var(--spacing-3); /** Lado de la cola triangular que nace en la esquina inferior del lado del emisor y apunta hacia él */
+  --message-bubble-border-radius: var(--border-radius-default); /** Radio del globo: recto en las cuatro esquinas, como todo el sistema. Quien distingue al emisor es la alineación y la cola, no una esquina redondeada */
+  --message-bubble-border-width: var(--border-width-default); /** Grosor del contorno del globo y de su cola */
+  --message-bubble-font-size: var(--text-font-size); /** El mensaje hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --message-bubble-font-weight: var(--font-weight-default); /** Peso tipográfico */
+  --message-bubble-color: var(--color-text-on-light); /** Tinta del mensaje. La misma para los dos emisores: el globo no tiene relleno, así que el texto va sobre la superficie */
+  --message-bubble-border-color: var(--color-text-on-light); /** Contorno del globo. Único separador del mensaje: no hay relleno ni sombra */
+  --message-bubble-tail-fill: var(--color-background-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --message-bubble-color: var(--color-text-on-dark); /** Tinta del mensaje — superficie oscura */
+  --message-bubble-border-color: var(--color-text-on-dark); /** Contorno del globo — superficie oscura */
+  --message-bubble-tail-fill: var(--color-background-dark); /** Vaciado de la cola — superficie oscura */
+}

package/src/tokens/components/message-bubble.ts

@@ -0,0 +1,8 @@
+import messageBubble from '../../../tokens/component/message-bubble.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(messageBubble as never);
+
+export const messageBubbleTokens     = all.filter(t => !t.name.includes('tail') && !t.name.includes('surface-dark'));
+export const messageBubbleTailTokens = all.filter(t => t.name.includes('tail') && !t.name.includes('surface-dark'));
+export const messageBubbleDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/components/message-composer.ts

@@ -0,0 +1,9 @@
+import messageComposer from '../../../tokens/molecule/message-composer.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(messageComposer as never);
+
+export const messageComposerTokens       = all.filter(t => !t.name.includes('surface-dark') && !t.name.includes('helper') && !t.name.includes('focus'));
+export const messageComposerFocusTokens  = all.filter(t => !t.name.includes('surface-dark') && t.name.includes('focus'));
+export const messageComposerHelperTokens = all.filter(t => !t.name.includes('surface-dark') && t.name.includes('helper'));
+export const messageComposerDarkTokens   = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/components/modal.ts

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

package/src/tokens/components/multi-select.css

@@ -0,0 +1,72 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --multi-select-content-max-height: var(--available-height); /** Altura máxima del dropdown (por defecto, el espacio disponible en viewport que expone Base UI) */
+  --multi-select-disabled-cursor: not-allowed; /** Cursor sobre el control deshabilitado */
+  --multi-select-border-style: var(--select-border-style); /** Estilo del borde */
+  --multi-select-height: var(--size-component-md); /** Altura mínima del trigger: la talla md del sistema. Crece solo si las pills ocupan más de una línea */
+  --multi-select-sm-height: var(--size-component-sm); /** Altura mínima del trigger — sm */
+  --multi-select-lg-height: var(--size-component-lg); /** Altura mínima del trigger — lg */
+  --multi-select-content-gap: var(--spacing-2); /** Aire entre el contenido del disparador y el chevron */
+  --multi-select-pill-color: var(--color-white); /** Texto de la pill */
+  --multi-select-pill-padding-block: var(--spacing-1); /** Padding block de la pill */
+  --multi-select-pill-padding-inline: var(--spacing-2); /** Padding inline de la pill */
+  --multi-select-pill-gap: var(--spacing-1); /** Separación entre texto y botón × en la pill */
+  --multi-select-pill-font-size: var(--font-size-1); /** Tamaño de fuente de la pill */
+  --multi-select-disabled-opacity: var(--opacity-disabled); /** Opacidad del control deshabilitado: el mismo velo que el resto de controles del sistema */
+  --multi-select-pill-line-height: var(--line-height-none); /** Interlineado de la píldora: sin holgura, la píldora la mide su propio aire */
+  --multi-select-pill-remove-opacity: var(--opacity-muted); /** Opacidad del aspa en reposo: presente pero en segundo plano */
+  --multi-select-pill-remove-hover-opacity: var(--opacity-full); /** Opacidad del aspa bajo el puntero */
+  --multi-select-item-selected-font-weight: var(--font-weight-bold); /** Peso de la opción ya elegida en la lista: lo elegido se dice con peso, no con relleno */
+  --multi-select-icon-transition-easing: var(--motion-easing-default); /** Curva del giro del chevron al abrir */
+  --multi-select-selection-gap: var(--spacing-1); /** Separación entre pills. Nombrado `selection-gap`, no `values-gap`: Style Dictionary 4.4.0 confunde un segmento de ruta que empieza por «value» (`values-gap`) con el sufijo `.value`/`.$value` del propio alias DTCG (`getReferences.js`, `variable.replace('.value', '')` con un `String.replace` de texto plano, no una regex anclada) y no resuelve la referencia encadenada — ver `surface-dark-derived.css`/release-check § tokens sin resolver */
+  --multi-select-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error */
+  --multi-select-font-family: var(--select-font-family); /** Familia tipográfica */
+  --multi-select-font-size: var(--select-font-size); /** Tamaño de fuente */
+  --multi-select-placeholder-color: var(--color-text-placeholder-on-light); /** Color del placeholder */
+  --multi-select-bg: var(--select-bg); /** Fondo del trigger */
+  --multi-select-icon-transition: var(--select-icon-transition); /** Duración de la transición del icono */
+  --multi-select-content-bg: var(--select-content-bg); /** Fondo del dropdown */
+  --multi-select-content-z-index: var(--select-content-z-index); /** Z-index del dropdown */
+  --multi-select-item-padding-block: var(--select-item-padding-block); /** Padding block de cada opción */
+  --multi-select-pill-bg: var(--color-primary); /** Fondo de la pill de valor seleccionado */
+  --multi-select-pill-border-radius: var(--border-radius-round); /** Radio de la pill */
+  --multi-select-sm-font-size: var(--select-sm-font-size); /** Tamaño de fuente — variante sm */
+  --multi-select-sm-padding-inline: var(--select-sm-padding-inline); /** Padding inline del trigger — variante sm */
+  --multi-select-sm-item-padding-block: var(--select-sm-item-padding-block); /** Padding block de cada opción — variante sm */
+  --multi-select-lg-font-size: var(--select-lg-font-size); /** Tamaño de fuente — variante lg */
+  --multi-select-lg-padding-inline: var(--select-lg-padding-inline); /** Padding inline del trigger — variante lg */
+  --multi-select-lg-item-padding-block: var(--select-lg-item-padding-block); /** Padding block de cada opción — variante lg */
+  --multi-select-border-radius: var(--select-border-radius); /** Radio del borde del trigger */
+  --multi-select-border-width: var(--select-border-width); /** Grosor del borde */
+  --multi-select-border-color: var(--select-border-color); /** Color del borde */
+  --multi-select-padding-inline: var(--select-padding-inline); /** Padding inline del trigger */
+  --multi-select-line-height: var(--select-line-height); /** Interlineado del trigger */
+  --multi-select-font-weight: var(--select-font-weight); /** Peso tipográfico */
+  --multi-select-color: var(--select-color); /** Color del texto */
+  --multi-select-focus-ring-width: var(--select-focus-ring-width); /** Grosor del anillo de foco */
+  --multi-select-focus-ring-color: var(--select-focus-ring-color); /** Color del anillo de foco */
+  --multi-select-content-border-color: var(--select-content-border-color); /** Borde del dropdown */
+  --multi-select-item-highlighted-bg: var(--select-item-highlighted-bg); /** Relleno de la opción resaltada — el del Select: la inversión de marca */
+  --multi-select-item-highlighted-color: var(--select-item-highlighted-color); /** Texto de la opción resaltada — el del Select */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --multi-select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --multi-select-bg: var(--color-background-dark); /** Background — surface-dark */
+  --multi-select-color: var(--color-text-on-dark); /** Text color — surface-dark */
+  --multi-select-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
+  --multi-select-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --multi-select-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder color — surface-dark */
+  --multi-select-content-bg: var(--color-background-dark); /** Dropdown background — surface-dark */
+  --multi-select-content-border-color: var(--color-text-on-dark); /** Dropdown border color — surface-dark */
+  --multi-select-pill-bg: var(--color-accent-1); /** Relleno de las pills — surface-dark: el prusia coincidiría con el lienzo; par de `Button primary` (lavanda con tinta prusia) */
+  --multi-select-pill-color: var(--color-primary); /** Texto de las pills — surface-dark */
+  --multi-select-item-highlighted-bg: var(--select-item-highlighted-bg); /** Relleno de la opción resaltada — surface-dark */
+  --multi-select-item-highlighted-color: var(--select-item-highlighted-color); /** Texto de la opción resaltada — surface-dark */
+}

package/src/tokens/components/multi-select.ts

@@ -0,0 +1,11 @@
+import multiSelect from '../../../tokens/component/multi-select.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(multiSelect as never);
+const dark = (t: { name: string }) => t.name.startsWith('--multi-select-surface-dark-');
+
+export const multiSelectTriggerTokens = all.filter(t => !dark(t) && !t.name.match(/--multi-select-(content|item|pill|sm|lg)-/));
+export const multiSelectPillTokens    = all.filter(t => !dark(t) && t.name.match(/--multi-select-(pill|values)-/));
+export const multiSelectContentTokens = all.filter(t => !dark(t) && t.name.match(/--multi-select-(content|item)-/));
+export const multiSelectSizeTokens    = all.filter(t => !dark(t) && t.name.match(/--multi-select-(sm|lg)-/));
+export const multiSelectDarkTokens    = all.filter(dark);

package/src/tokens/components/number-badge.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --number-badge-min-size: 1rem; /** 16px: una marca, no un control (fuera de la escala de tallas); cabe un dígito redondo, dos en píldora */
+  --number-badge-padding-inline: var(--spacing-1); /** Padding horizontal para números de más de un dígito */
+  --number-badge-font-family: var(--font-family-sans); /** Familia tipográfica */
+  --number-badge-font-size: var(--font-size-0); /** La cifra: el cuerpo de marca (12px) */
+  --number-badge-line-height: var(--line-height-none); /** Sin interlineado extra — centrado por flexbox */
+  --number-badge-border-radius: var(--border-radius-round); /** Forma circular */
+  --number-badge-font-weight: var(--font-weight-default); /** Peso normal: una cifra, no un título */
+  --number-badge-primary-bg: var(--color-primary); /** Fondo primary (prussian) */
+  --number-badge-primary-color: var(--color-text-on-dark); /** Texto sobre primary */
+  --number-badge-accent-1-bg: var(--color-accent-1); /** Fondo accent-1 (lavender) */
+  --number-badge-accent-1-color: var(--color-text-on-light); /** Texto sobre accent-1 */
+  --number-badge-accent-2-bg: var(--color-accent-2); /** Fondo accent-2 (yellow) */
+  --number-badge-accent-2-color: var(--color-text-on-light); /** Texto sobre accent-2 */
+  --number-badge-support-1-bg: var(--color-support-1); /** Fondo support-1 (emerald) */
+  --number-badge-support-1-color: var(--color-text-on-light); /** Texto sobre support-1 */
+  --number-badge-support-2-bg: var(--color-support-2); /** Fondo support-2 (cayenne) */
+  --number-badge-support-2-color: var(--color-text-on-light); /** Texto sobre support-2 */
+  --number-badge-danger-bg: var(--color-error-fill); /** Fondo danger (red) */
+  --number-badge-danger-color: var(--color-error-fill-text); /** Texto sobre danger */
+  --number-badge-success-bg: var(--color-success-fill); /** Fondo success (green) */
+  --number-badge-success-color: var(--color-success-fill-text); /** Texto sobre success */
+  --number-badge-neutral-bg: var(--color-surface-inverse-on-light); /** Fondo neutral (dark grey) */
+  --number-badge-neutral-color: var(--color-text-on-dark); /** Texto sobre neutral */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --number-badge-primary-bg: var(--color-text-on-dark); /** Relleno primary — surface-dark. El prusia es el lienzo y el contador desaparecería; se invierte en vez de pasar a lavanda porque `accent-1` ya es otra variante del mismo componente (mismo caso que `Tag`) */
+  --number-badge-primary-color: var(--color-background-dark); /** Texto sobre primary — surface-dark */
+  --number-badge-neutral-bg: var(--color-surface-inverse-on-dark); /** Relleno neutral — surface-dark: la superficie invertida, como en `Tag` */
+  --number-badge-neutral-color: var(--color-text-on-light); /** Texto sobre neutral — surface-dark */
+}

package/src/tokens/components/number-badge.ts

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

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

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --number-input-border-style: solid; /** Estilo del borde */
+  --number-input-btn-bg: transparent; /** Fondo de los botones */
+  --number-input-btn-width: var(--spacing-6); /** Ancho de los botones +/− */
+  --number-input-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando deshabilitado */
+  --number-input-bg: var(--input-bg); /** Fondo del contenedor */
+  --number-input-font-family: var(--input-font-family); /** Font family */
+  --number-input-font-size: var(--input-font-size); /** Font size */
+  --number-input-line-height: var(--input-line-height); /** Line height */
+  --number-input-height: var(--input-height); /** Altura del control: la talla del sistema, heredada de input */
+  --number-input-transition-duration: var(--input-transition-duration); /** Duración de la transición */
+  --number-input-transition-easing: var(--input-transition-easing); /** Easing de la transición */
+  --number-input-btn-color: var(--color-primary); /** Color del icono de los botones */
+  --number-input-btn-hover-line-width: var(--border-width-default); /** Grosor de la línea de hover de los botones +/−. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el botón */
+  --number-input-btn-hover-line-color: var(--color-primary); /** Color de la línea de hover de los botones +/− */
+  --number-input-error-bg: var(--input-error-bg); /** Fondo en error */
+  --number-input-sm-font-size: var(--input-sm-font-size); /** Font size — sm */
+  --number-input-sm-height: var(--input-sm-height); /** Altura — sm */
+  --number-input-sm-padding-inline: var(--input-sm-padding-inline); /** Padding horizontal — sm */
+  --number-input-lg-font-size: var(--input-lg-font-size); /** Font size — lg */
+  --number-input-lg-height: var(--input-lg-height); /** Altura — lg */
+  --number-input-lg-padding-inline: var(--input-lg-padding-inline); /** Padding horizontal — lg */
+  --number-input-border-radius: var(--input-border-radius); /** Border radius del contenedor */
+  --number-input-border-width: var(--input-border-width); /** Grosor del borde */
+  --number-input-border-color: var(--input-border-color); /** Color del borde */
+  --number-input-color: var(--input-color); /** Color del texto */
+  --number-input-font-weight: var(--input-font-weight); /** Font weight */
+  --number-input-padding-inline: var(--input-padding-inline); /** Padding horizontal del campo */
+  --number-input-btn-separator-color: var(--input-border-color); /** Color del separador entre botón y campo */
+  --number-input-focus-ring-inset-offset: var(--input-focus-ring-inset-offset); /** Gap entre borde y focus ring */
+  --number-input-focus-ring-color: var(--input-focus-ring-color); /** Color del focus ring */
+  --number-input-focus-border-color: var(--input-focus-border-color); /** Color del borde en foco */
+  --number-input-disabled-bg: var(--input-disabled-bg); /** Fondo cuando deshabilitado */
+  --number-input-disabled-color: var(--input-disabled-color); /** Texto cuando deshabilitado */
+  --number-input-disabled-border-color: var(--input-disabled-border-color); /** Borde cuando deshabilitado */
+  --number-input-disabled-btn-color: var(--input-disabled-color); /** Color del icono de botones cuando deshabilitado */
+  --number-input-error-border-color: var(--input-error-border-color); /** Color del borde en error */
+  --number-input-error-color: var(--input-error-color); /** Texto en error */
+  --number-input-error-focus-border-color: var(--input-error-focus-border-color); /** Borde en foco+error */
+  --number-input-error-focus-ring-color: var(--input-error-focus-ring-color); /** Focus ring en error */
+  --number-input-focus-ring-width: var(--input-focus-ring-width); /** Grosor del focus ring */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --number-input-btn-color: var(--color-text-on-dark); /** Icono de los botones +/− — surface-dark */
+  --number-input-btn-hover-line-color: var(--color-text-on-dark); /** Línea de hover de los botones +/− — surface-dark */
+}

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

@@ -0,0 +1,11 @@
+import numberInput from '../../../tokens/component/number-input.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(numberInput as never);
+
+export const numberInputBaseTokens     = all.filter(t => !t.name.match(/--number-input-(focus|error|disabled|sm|lg|btn-hover|btn-separator|disabled)/));
+export const numberInputBtnTokens      = all.filter(t => t.name.includes('btn'));
+export const numberInputFocusTokens    = all.filter(t => t.name.includes('focus'));
+export const numberInputErrorTokens    = all.filter(t => t.name.includes('error'));
+export const numberInputDisabledTokens = all.filter(t => t.name.includes('disabled'));
+export const numberInputSizeTokens     = all.filter(t => t.name.match(/--number-input-(sm|lg)-/));

package/src/tokens/components/org-switcher.ts

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

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --otp-input-cell-inline-size: 3.5ch; /** Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4) */
+  --otp-input-gap: var(--spacing-2); /** Separación entre celdas del código */
+}

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

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

package/src/tokens/components/popover.css

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --popover-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — un contenido largo hace scroll en vez de salirse de la pantalla */
+  --popover-padding-block: var(--spacing-4); /** Aire vertical del panel */
+  --popover-padding-inline: var(--spacing-4); /** Aire horizontal del panel */
+  --popover-offset: var(--spacing-2); /** Separación entre el disparador y el panel (8px). De aquí sale el `sideOffset` por defecto */
+  --popover-z-index: var(--floating-panel-z-index); /** Capa del panel flotante */
+  --popover-transition-duration: var(--floating-panel-transition-duration); /** Duración de la entrada y la salida */
+  --popover-transition-easing: var(--floating-panel-transition-easing); /** Curva de la entrada y la salida */
+  --popover-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del panel (recibe el foco al abrirse) */
+  --popover-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --popover-focus-ring-color: var(--color-primary); /** Color del anillo de foco: la tinta de la superficie */
+  --popover-bg: var(--floating-panel-bg); /** Fondo del panel */
+  --popover-border-width: var(--floating-panel-border-width); /** Grosor del borde: es lo que separa el panel de lo que tiene debajo (el sistema no proyecta sombras) */
+  --popover-border-color: var(--floating-panel-border-color); /** Color del borde */
+  --popover-border-radius: var(--floating-panel-border-radius); /** Radio del panel: esquina recta */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --popover-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/popover.ts

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

package/src/tokens/components/progress-bar.css

@@ -0,0 +1,47 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --progress-bar-inside-label-threshold: 15; /** Porcentaje mínimo de relleno para que la cifra se escriba dentro; por debajo, fuera. Se consume también en JS (no solo CSS) para decidir la posición de la etiqueta */
+  --progress-bar-height-sm: var(--spacing-2); /** 8px — barra compacta, sin etiqueta */
+  --progress-bar-height-md: var(--spacing-5); /** 24px — barra por defecto: la etiqueta cabe dentro */
+  --progress-bar-height-lg: var(--spacing-6); /** 32px — barra destacada */
+  --progress-bar-transition-duration: var(--motion-duration-base); /** Duración del avance del relleno (cambio de estado) */
+  --progress-bar-transition-easing: var(--motion-easing-in-out); /** Curva del avance del relleno */
+  --progress-bar-font-family: var(--font-family-sans); /** Tipografía de la cifra */
+  --progress-bar-font-size: var(--font-size-1); /** 14px — cuerpo de interfaz de la cifra */
+  --progress-bar-line-height: var(--line-height-none); /** Una línea: la cifra se centra con la altura del carril */
+  --progress-bar-label-gap: var(--spacing-2); /** Hueco entre el borde del relleno y la cifra cuando va fuera */
+  --progress-bar-label-padding-inline: var(--spacing-2); /** Aire de la cifra dentro del relleno */
+  --progress-bar-border-radius: var(--border-radius-default); /** Esquina recta, como todo el sistema */
+  --progress-bar-track-bg: var(--color-surface-secondary-on-light); /** Fondo del carril: la superficie clara secundaria del sistema (no es un estado, es una superficie) */
+  --progress-bar-font-weight: var(--font-weight-emphasis); /** Peso de énfasis de la cifra */
+  --progress-bar-fill-border-width: var(--border-width-default); /** Filete de contorno del relleno. Los rellenos de marca (lavanda, amarillo, esmeralda, cayena) son claros y saturados: contra un carril claro no llegan a 3:1, y WCAG 1.4.11 admite que el contorno sea quien identifique el elemento */
+  --progress-bar-fill-border-color: var(--color-text-on-light); /** Color del filete del relleno: la tinta del sistema, que contrasta a la vez con el carril y con los rellenos claros */
+  --progress-bar-track-border-width: var(--border-width-default); /** Filete de contorno del carril, a juego con el del relleno */
+  --progress-bar-track-border-color: var(--color-text-on-light); /** Color del filete del carril: la tinta del sistema, que lo distingue de la superficie ambiente */
+  --progress-bar-primary-fill: var(--color-primary); /** Marca primaria (prusia) — relleno */
+  --progress-bar-primary-label-inside-color: var(--color-text-on-dark); /** Cifra sobre el relleno prusia */
+  --progress-bar-accent-1-fill: var(--color-accent-1); /** Acento 1 (lavanda) — relleno */
+  --progress-bar-accent-1-label-inside-color: var(--color-text-on-light); /** Cifra sobre el relleno lavanda */
+  --progress-bar-accent-2-fill: var(--color-accent-2); /** Acento 2 (amarillo) — relleno */
+  --progress-bar-accent-2-label-inside-color: var(--color-text-on-light); /** Cifra sobre el relleno amarillo */
+  --progress-bar-support-1-fill: var(--color-support-1); /** Soporte 1 (esmeralda) — relleno */
+  --progress-bar-support-1-label-inside-color: var(--color-text-on-light); /** Cifra sobre el relleno esmeralda */
+  --progress-bar-support-2-fill: var(--color-support-2); /** Soporte 2 (cayena) — relleno */
+  --progress-bar-support-2-label-inside-color: var(--color-text-on-light); /** Cifra sobre el relleno cayena */
+  --progress-bar-label-outside-color: var(--color-text-on-light); /** Color de la cifra cuando va fuera, sobre el carril */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --progress-bar-fill-border-color: var(--color-text-on-dark); /** Filete del relleno — surface-dark */
+  --progress-bar-track-border-color: var(--color-text-on-dark); /** Filete del carril — surface-dark */
+  --progress-bar-track-bg: var(--color-surface-secondary-on-dark); /** Fondo del carril — surface-dark */
+  --progress-bar-label-outside-color: var(--color-text-on-dark); /** Cifra fuera del relleno — surface-dark */
+  --progress-bar-primary-fill: var(--color-text-on-dark); /** Relleno de la variante primary — surface-dark. Se invierte en vez de pasar a lavanda porque `accent-1` ya es otra variante del mismo componente */
+  --progress-bar-primary-label-inside-color: var(--color-text-on-light); /** Cifra sobre el relleno primary — surface-dark. El relleno se invierte a blanco, así que la cifra pasa a la tinta clara: si no, quedaría blanco sobre blanco */
+}

package/src/tokens/components/progress-bar.ts

@@ -0,0 +1,10 @@
+import progressBar from '../../../tokens/component/progress-bar.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(progressBar as never);
+
+const VARIANT = /^--progress-bar-(primary|accent-1|accent-2|support-1|support-2)-/;
+
+export const progressBarBaseTokens    = all.filter(t => !VARIANT.test(t.name) && !t.name.startsWith('--progress-bar-surface-dark-'));
+export const progressBarVariantTokens = all.filter(t => VARIANT.test(t.name));
+export const progressBarDarkTokens    = all.filter(t => t.name.startsWith('--progress-bar-surface-dark-'));

package/src/tokens/components/radio-group.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --radio-group-gap: var(--spacing-2); /** Aire entre opciones apiladas */
+  --radio-group-gap-horizontal: var(--spacing-5); /** Aire entre opciones en fila: mayor, para que cada marca se lea con su texto */
+}

package/src/tokens/components/radio-group.ts

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

package/src/tokens/components/radio.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --radio-size: 1.25em; /** Tamaño del radio (ancho y alto) */
+  --radio-dot-size: 0.5em; /** Tamaño del punto interior */
+  --radio-border-radius: 50%; /** Border radius (círculo) */
+  --radio-border-style: solid; /** Border style */
+  --radio-bg: transparent; /** Fondo sin seleccionar */
+  --radio-cursor: pointer; /** Cursor */
+  --radio-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --radio-sm-size: 1rem; /** Tamaño del radio — variante sm (16px) */
+  --radio-sm-dot-size: 0.4rem; /** Tamaño del punto interior — variante sm */
+  --radio-lg-size: 1.5rem; /** Tamaño del radio — variante lg (24px) */
+  --radio-lg-dot-size: 0.65rem; /** Tamaño del punto interior — variante lg */
+  --radio-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el dibujo sea menor. Se extiende de forma invisible y centrada, sin mover la maqueta */
+  --radio-transition-duration: var(--motion-duration-fast); /** Duración de transiciones */
+  --radio-transition-easing: var(--motion-easing-default); /** Easing de transiciones */
+  --radio-border-width: var(--border-width-default); /** Border width */
+  --radio-border-color: var(--color-primary); /** Color del borde */
+  --radio-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (texto/borde, nunca fondo) */
+  --radio-dot-color: var(--color-primary); /** Color del punto cuando está seleccionado */
+  --radio-focus-ring-width: var(--border-width-focus); /** Ancho del anillo de foco */
+  --radio-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco respecto al borde */
+  --radio-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --radio-disabled-border-color: var(--color-disabled-border-on-light); /** Color del borde cuando está deshabilitado */
+  --radio-disabled-dot-color: var(--color-disabled-border-on-light); /** Color del punto cuando está deshabilitado y seleccionado */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --radio-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --radio-border-color: var(--color-text-on-dark); /** Borde de la marca — surface-dark: la tinta de la superficie */
+  --radio-dot-color: var(--color-text-on-dark); /** Punto de la marca — surface-dark */
+  --radio-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}