@studiolxd/brand 38.12.4

package/src/tokens/components/switcher.css

@@ -0,0 +1,44 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --switcher-track-width: 2.75em; /** Ancho del track */
+  --switcher-track-height: 1.5em; /** Alto del track */
+  --switcher-track-padding: 0.1875em; /** Padding interior del track — separa el thumb de los bordes */
+  --switcher-thumb-size: 1.125em; /** Tamaño del thumb (cuadrado) */
+  --switcher-cursor: pointer; /** Cursor */
+  --switcher-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --switcher-sm-track-width: 2.25em; /** Ancho del track — variante sm */
+  --switcher-sm-track-height: 1.25em; /** Alto del track — variante sm */
+  --switcher-sm-thumb-size: 0.875em; /** Tamaño del thumb — variante sm */
+  --switcher-lg-track-width: 3rem; /** Ancho del track — variante lg (48px, alineado con la talla lg del sistema, size-component.lg). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo */
+  --switcher-lg-track-height: 1.625rem; /** Alto del track — variante lg. En rem, ver lg-track-width */
+  --switcher-lg-thumb-size: 1.25rem; /** Tamaño del thumb — variante lg. En rem, ver lg-track-width */
+  --switcher-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el track (sm) sea menor en bloque. Se extiende de forma invisible y centrada, sin mover la maqueta */
+  --switcher-thumb-bg: var(--color-white); /** Color del thumb */
+  --switcher-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
+  --switcher-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
+  --switcher-transition-easing: var(--motion-easing-default); /** Easing de la transición */
+  --switcher-track-bg: var(--color-border-default-on-light); /** Fondo del track — estado off */
+  --switcher-track-bg-checked: var(--color-primary); /** Fondo del track — estado on */
+  --switcher-track-border-radius: var(--border-radius-round); /** Radio del track (pill) */
+  --switcher-thumb-border-radius: var(--border-radius-round); /** Radio del thumb (circular) */
+  --switcher-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --switcher-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --switcher-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --switcher-error-ring-width: var(--border-width-default); /** Grosor del anillo que marca el error (el track no tiene borde) */
+  --switcher-error-ring-offset: var(--border-width-default); /** Separación del anillo de error */
+  --switcher-error-ring-color: var(--color-error-text-on-light); /** Color del anillo de error */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --switcher-error-ring-color: var(--color-error-text-on-dark); /** Anillo de error — surface-dark */
+  --switcher-track-bg-checked: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-bg-checked` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
+  --switcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
+  --switcher-track-bg: var(--color-text-on-dark); /** Fondo del track (off) — surface-dark. `track-bg` es un rol de borde (`color.border.default-on-light`) y la regla de derivación le da `color.text.on-dark`, igual que el carril sin recorrer del Slider. */
+  --switcher-thumb-bg: var(--color-primary); /** Color del thumb — surface-dark. El thumb blanco desaparecería sobre el track claro del estado off; en prusia contrasta con los dos tracks oscuros (blanco en off, lavanda en on), como el pulgar lavanda del Slider sobre su carril blanco. */
+}

package/src/tokens/components/switcher.ts

@@ -0,0 +1,10 @@
+import switcher from '../../../tokens/component/switcher.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(switcher as never);
+const dark = (t: { name: string }) => t.name.startsWith('--switcher-surface-dark-');
+
+export const switcherBaseTokens     = all.filter(t => !dark(t) && !t.name.match(/--switcher-(focus|error|disabled|sm|lg)-/));
+export const switcherStateTokens    = all.filter(t => !dark(t) && t.name.match(/--switcher-(focus|error|disabled)-/));
+export const switcherSizeTokens     = all.filter(t => !dark(t) && t.name.match(/--switcher-(sm|lg)-/));
+export const switcherDarkTokens     = all.filter(dark);

package/src/tokens/components/tabs.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --tabs-list-gap: var(--spacing-1); /** Gap entre triggers */
+  --tabs-trigger-padding-block: var(--spacing-3); /** Padding vertical del trigger */
+  --tabs-trigger-padding-inline: var(--spacing-4); /** Padding horizontal del trigger */
+  --tabs-trigger-font-size: var(--font-size-2); /** Tamaño de fuente del trigger */
+  --tabs-trigger-pill-color-active: var(--color-white); /** Texto del trigger activo en variante pill */
+  --tabs-trigger-disabled-opacity: var(--opacity-disabled); /** Opacidad del trigger deshabilitado */
+  --tabs-content-padding-block: var(--spacing-4); /** Padding vertical del panel de contenido */
+  --tabs-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
+  --tabs-transition-easing: var(--motion-easing-in-out); /** Easing de la transición */
+  --tabs-list-border-width: var(--border-width-default); /** Ancho del borde inferior de la lista de tabs */
+  --tabs-list-border-color: var(--color-primary); /** Color del borde inferior de la lista */
+  --tabs-trigger-font-weight: var(--font-weight-default); /** Peso de fuente por defecto */
+  --tabs-trigger-active-weight: var(--font-weight-emphasis); /** Peso de fuente del tab activo */
+  --tabs-trigger-color: var(--color-text-muted-on-light); /** Color del trigger inactivo — es texto, nunca grey-dark */
+  --tabs-trigger-hover-color: var(--color-text-on-light); /** Color del trigger en hover */
+  --tabs-trigger-active-color: var(--color-text-on-light); /** Color del trigger activo */
+  --tabs-trigger-indicator-width: var(--border-width-default); /** Grosor del indicador activo (underline) */
+  --tabs-trigger-indicator-color: var(--color-primary); /** Color del indicador activo */
+  --tabs-trigger-pill-bg-active: var(--color-primary); /** Fondo del trigger activo en variante pill */
+  --tabs-trigger-border-radius: var(--border-radius-default); /** Radio de borde del trigger (pill + focus ring) */
+  --tabs-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --tabs-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --tabs-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --tabs-list-border-color: var(--color-text-on-dark); /** Borde inferior de la lista — surface-dark */
+  --tabs-trigger-color: var(--color-text-muted-on-dark); /** Color del trigger inactivo — surface-dark */
+  --tabs-trigger-hover-color: var(--color-text-on-dark); /** Color hover del trigger — surface-dark */
+  --tabs-trigger-active-color: var(--color-text-on-dark); /** Color del trigger activo — surface-dark */
+  --tabs-trigger-pill-bg-active: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
+  --tabs-trigger-pill-color-active: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
+  --tabs-trigger-indicator-color: var(--color-text-on-dark); /** Indicador de pestaña activa (underline) — surface-dark: color.primary colisiona con el fondo */
+  --tabs-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+}

package/src/tokens/components/tabs.ts

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

package/src/tokens/components/tag.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --tag-font-family: var(--font-family-sans); /** Tipografía */
+  --tag-font-size: var(--font-size-1); /** 14px — cuerpo de interfaz, no de prosa */
+  --tag-line-height: var(--line-height-none); /** Una línea */
+  --tag-padding-block: var(--spacing-1); /** Aire vertical */
+  --tag-padding-inline: var(--spacing-3); /** Aire horizontal */
+  --tag-border-radius: var(--border-radius-round); /** Píldora: el tag es una de las formas redondas del sistema */
+  --tag-font-weight: var(--font-weight-emphasis); /** Peso de énfasis */
+  --tag-primary-bg: var(--color-primary); /** Marca primaria (prusia) — relleno */
+  --tag-primary-color: var(--color-text-on-dark); /** Marca primaria — texto sobre el relleno */
+  --tag-accent-1-bg: var(--color-accent-1); /** Acento 1 (lavanda) — relleno */
+  --tag-accent-1-color: var(--color-text-on-light); /** Acento 1 — texto sobre el relleno */
+  --tag-accent-2-bg: var(--color-accent-2); /** Acento 2 (amarillo) — relleno */
+  --tag-accent-2-color: var(--color-text-on-light); /** Acento 2 — texto sobre el relleno */
+  --tag-support-1-bg: var(--color-support-1); /** Soporte 1 (esmeralda) — relleno */
+  --tag-support-1-color: var(--color-text-on-light); /** Soporte 1 — texto sobre el relleno */
+  --tag-support-2-bg: var(--color-support-2); /** Soporte 2 (cayena) — relleno */
+  --tag-support-2-color: var(--color-text-on-light); /** Soporte 2 — texto sobre el relleno */
+  --tag-neutral-bg: var(--color-surface-inverse-on-light); /** Neutral — relleno gris oscuro (AAA con texto blanco) */
+  --tag-neutral-color: var(--color-text-on-dark); /** Neutral — texto sobre el relleno */
+  --tag-info-bg: var(--color-primary); /** Información — relleno prusia (AAA con texto blanco) */
+  --tag-info-color: var(--color-text-on-dark); /** Información — texto sobre el relleno */
+  --tag-warning-bg: var(--color-warning-fill); /** Aviso — relleno universal del rol de feedback. Es el amarillo de siempre, pero llega por el rol, no por la marca */
+  --tag-success-bg: var(--color-success-fill); /** Éxito — relleno universal del sistema */
+  --tag-success-color: var(--color-success-fill-text); /** Éxito — contenido sobre el relleno */
+  --tag-danger-bg: var(--color-error-fill); /** Peligro — relleno universal del sistema */
+  --tag-danger-color: var(--color-error-fill-text); /** Peligro — contenido sobre el relleno */
+  --tag-warning-color: var(--color-warning-fill-text); /** Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --tag-primary-bg: var(--color-text-on-dark); /** Marca primaria, relleno — surface-dark (invertido: el prusia es el fondo de la superficie y el tag desaparecería) */
+  --tag-primary-color: var(--color-background-dark); /** Marca primaria, texto — surface-dark (invertido) */
+  --tag-info-bg: var(--color-text-on-dark); /** Información, relleno — surface-dark (invertido, misma razón que primary) */
+  --tag-info-color: var(--color-background-dark); /** Información, texto — surface-dark (invertido) */
+}

package/src/tokens/components/tag.ts

@@ -0,0 +1,21 @@
+import tag from '../../../tokens/component/tag.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tag as never);
+
+const VARIANT = /^--tag-(primary|accent-1|accent-2|support-1|support-2|neutral|info|warning|success|danger)-/;
+const BRAND = /^--tag-(primary|accent-1|accent-2|support-1|support-2)-/;
+
+export const tagTokens = all;
+
+/** Caja y letra: comunes a las diez variantes. */
+export const tagBaseTokens = all.filter(t => !VARIANT.test(t.name) && !t.name.startsWith('--tag-surface-dark-'));
+
+/** Las cinco variantes de marca. */
+export const tagBrandTokens = all.filter(t => BRAND.test(t.name));
+
+/** Las cinco variantes semánticas de estado. */
+export const tagSemanticTokens = all.filter(t => VARIANT.test(t.name) && !BRAND.test(t.name));
+
+/** Los remapeos de superficie oscura (solo las variantes que colisionan con el fondo). */
+export const tagDarkTokens = all.filter(t => t.name.startsWith('--tag-surface-dark-'));

package/src/tokens/components/text-inline.css

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --text-inline-emphasis-font-weight: var(--font-weight-emphasis); /** Peso del énfasis fuerte en línea */
+  --text-inline-muted-color: var(--color-text-muted-on-light); /** Texto secundario en línea: una aclaración, un metadato */
+  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-success-color: var(--color-success-text-on-light); /** Énfasis en línea con intención de logro */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --text-inline-muted-color: var(--color-text-muted-on-dark); /** Texto secundario en línea — surface-dark */
+  --text-inline-destructive-color: var(--color-destructive-text-on-dark); /** Énfasis destructivo — surface-dark */
+  --text-inline-success-color: var(--color-success-text-on-dark); /** Énfasis de logro — surface-dark */
+}

package/src/tokens/components/text-inline.ts

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

package/src/tokens/components/text.css

@@ -0,0 +1,91 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --text-heading-space-after: 0.5em; /** Aire bajo un título, en em: escala con su tamaño (nivel, size o superficie). Se anula si el título es el último hijo */
+  --text-font-family: var(--font-family-sans); /** Default font family */
+  --text-font-size: var(--font-size-2); /** Cuerpo base (16px). Es el cuerpo de la superficie de aplicación; el SiteShell lo remapea a 20px */
+  --text-line-height: var(--line-height-normal); /** Default line height */
+  --text-letter-spacing: var(--letter-spacing-normal); /** Default letter spacing */
+  --text-size-1: var(--font-size-1); /** Paso 1 de la escala de títulos (14px) */
+  --text-size-2: var(--font-size-2); /** Paso 2 de la escala de títulos (16px) */
+  --text-size-3: var(--font-size-2); /** Paso 3 de la escala de títulos (16px) — el de H6 */
+  --text-size-4: var(--font-size-3); /** Paso 4 de la escala de títulos (20px) — el de H5 */
+  --text-size-5: var(--font-size-4); /** Paso 5 de la escala de títulos (24px) — el de H4 */
+  --text-size-6: var(--font-size-5); /** Paso 6 de la escala de títulos (28px) — el de H3 */
+  --text-size-7: var(--font-size-6); /** Paso 7 de la escala de títulos (32px) — el de H2 */
+  --text-size-8: var(--font-size-7); /** Paso 8 de la escala de títulos (40px) — el de H1 */
+  --text-size-9: var(--font-size-8); /** Paso 9 de la escala de títulos (56px) — display pequeño */
+  --text-size-10: var(--font-size-10); /** Paso 10 de la escala de títulos (96px) — display */
+  --text-heading-font-family: var(--font-family-sans); /** Heading font family */
+  --text-heading-letter-spacing: var(--letter-spacing-tight); /** Heading letter spacing */
+  --text-h1-line-height: var(--line-height-tight); /** H1 line height */
+  --text-h2-line-height: var(--line-height-tight); /** H2 line height */
+  --text-h3-line-height: var(--line-height-tight); /** H3 line height */
+  --text-h4-line-height: var(--line-height-snug); /** H4 line height */
+  --text-h5-line-height: var(--line-height-snug); /** H5 line height */
+  --text-h5-letter-spacing: var(--letter-spacing-normal); /** H5 letter spacing */
+  --text-h6-line-height: var(--line-height-snug); /** H6 line height */
+  --text-h6-letter-spacing: var(--letter-spacing-normal); /** H6 letter spacing */
+  --text-paragraph-small-font-size: var(--font-size-1); /** Párrafo pequeño: un peldaño por debajo del cuerpo (14px en base, 16px en la superficie pública) */
+  --text-paragraph-small-line-height: var(--line-height-relaxed); /** Small paragraph line height */
+  --text-paragraph-large-font-size: var(--font-size-3); /** Párrafo grande: un peldaño por encima del cuerpo (20px en base, 24px en la superficie pública) */
+  --text-paragraph-large-line-height: var(--line-height-snug); /** Large paragraph line height */
+  --text-list-gap: var(--spacing-2); /** Spacing between list items (8px) */
+  --text-list-padding-inline-start: var(--spacing-6); /** Left indent for list (32px) */
+  --text-font-weight: var(--font-weight-default); /** Default font weight */
+  --text-color: var(--color-text-on-light); /** Default text color */
+  --text-background: var(--color-background-light); /** Fondo del lienzo de página (body) */
+  --text-heading-font-weight: var(--font-weight-emphasis); /** Heading font weight */
+  --text-heading-color: var(--color-text-on-light); /** Heading color */
+  --text-h1-font-family: var(--text-heading-font-family); /** H1 font family */
+  --text-h1-font-size: var(--text-size-8); /** H1 font size — paso 8 de la escala (40px en base, un peldaño más en la superficie pública) */
+  --text-h1-letter-spacing: var(--text-heading-letter-spacing); /** H1 letter spacing */
+  --text-h2-font-family: var(--text-heading-font-family); /** H2 font family */
+  --text-h2-font-size: var(--text-size-7); /** H2 font size — paso 7 de la escala (32px en base, un peldaño más en la superficie pública) */
+  --text-h2-letter-spacing: var(--text-heading-letter-spacing); /** H2 letter spacing */
+  --text-h3-font-family: var(--text-heading-font-family); /** H3 font family */
+  --text-h3-font-size: var(--text-size-6); /** H3 font size — paso 6 de la escala (28px en base, un peldaño más en la superficie pública) */
+  --text-h3-letter-spacing: var(--text-heading-letter-spacing); /** H3 letter spacing */
+  --text-h4-font-family: var(--text-heading-font-family); /** H4 font family */
+  --text-h4-font-size: var(--text-size-5); /** H4 font size — paso 5 de la escala (24px en base, un peldaño más en la superficie pública) */
+  --text-h4-letter-spacing: var(--text-heading-letter-spacing); /** H4 letter spacing */
+  --text-h5-font-family: var(--text-heading-font-family); /** H5 font family */
+  --text-h5-font-size: var(--text-size-4); /** H5 font size — paso 4 de la escala (20px en base, un peldaño más en la superficie pública) */
+  --text-h6-font-family: var(--text-heading-font-family); /** H6 font family */
+  --text-h6-font-size: var(--text-size-3); /** H6 font size — paso 3 de la escala (16px en base, un peldaño más en la superficie pública) */
+  --text-list-font-family: var(--text-font-family); /** List font family */
+  --text-list-font-size: var(--text-font-size); /** List font size */
+  --text-list-line-height: var(--text-line-height); /** List line height */
+  --text-list-letter-spacing: var(--text-letter-spacing); /** List letter spacing */
+  --text-h1-font-weight: var(--text-heading-font-weight); /** H1 font weight */
+  --text-h1-color: var(--text-heading-color); /** H1 color */
+  --text-h2-font-weight: var(--text-heading-font-weight); /** H2 font weight */
+  --text-h2-color: var(--text-heading-color); /** H2 color */
+  --text-h3-font-weight: var(--text-heading-font-weight); /** H3 font weight */
+  --text-h3-color: var(--text-heading-color); /** H3 color */
+  --text-h4-font-weight: var(--text-heading-font-weight); /** H4 font weight */
+  --text-h4-color: var(--text-heading-color); /** H4 color */
+  --text-h5-font-weight: var(--text-heading-font-weight); /** H5 font weight */
+  --text-h5-color: var(--text-heading-color); /** H5 color */
+  --text-h6-font-weight: var(--text-heading-font-weight); /** H6 font weight */
+  --text-h6-color: var(--text-heading-color); /** H6 color */
+  --text-list-font-weight: var(--text-font-weight); /** List font weight */
+  --text-list-color: var(--text-color); /** List text color */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --text-color: var(--color-text-on-dark); /** Color de texto por defecto — surface-dark */
+  --text-background: var(--color-background-dark); /** Fondo del lienzo de página — surface-dark */
+  --text-h1-color: var(--color-text-on-dark); /** H1 color — surface-dark */
+  --text-h2-color: var(--color-text-on-dark); /** H2 color — surface-dark */
+  --text-h3-color: var(--color-text-on-dark); /** H3 color — surface-dark */
+  --text-h4-color: var(--color-text-on-dark); /** H4 color — surface-dark */
+  --text-h5-color: var(--color-text-on-dark); /** H5 color — surface-dark */
+  --text-h6-color: var(--color-text-on-dark); /** H6 color — surface-dark */
+  --text-list-color: var(--color-text-on-dark); /** List color — surface-dark */
+}

package/src/tokens/components/text.ts

@@ -0,0 +1,24 @@
+import textJson from '../../../tokens/component/text.json';
+import { flattenTokens, type Token } from '../utils';
+
+const all = flattenTokens(textJson as never);
+
+export const headingBaseTokens = all.filter(t => t.name.startsWith('--text-heading-'));
+
+export const headingLevelTokens = all.filter(t => /^--text-h[1-6]-/.test(t.name));
+
+/** La escala de títulos: los diez pasos de los que beben los niveles y la prop `size`. */
+export const headingScaleTokens = all.filter(t => /^--text-size-\d+$/.test(t.name));
+
+export const headingDarkTokens: Token[] = [
+  { name: '--text-heading-dark-color', value: 'var(--color-text-on-dark)', description: 'Color del texto sobre fondo oscuro' },
+];
+
+export const paragraphSizeTokens = all.filter(t =>
+  t.name.startsWith('--text-paragraph-small-') ||
+  t.name.startsWith('--text-paragraph-large-'),
+);
+
+export const listBaseTokens = all.filter(t => t.name.startsWith('--text-list-'));
+
+export const listDarkTokens = all.filter(t => t.name.startsWith('--text-list-surface-dark-'));

package/src/tokens/components/textarea.css

@@ -0,0 +1,78 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --textarea-border-style: solid; /** Border style */
+  --textarea-width: 100%; /** Textarea is always full width */
+  --textarea-rows: 4; /** Líneas de texto que mide el campo por defecto. Cuatro: dos no se distinguen de un campo de una línea y cinco ya ocupa media pantalla en móvil. De aquí sale `min-height` */
+  --textarea-resize: vertical; /** Resize direction */
+  --textarea-cursor: text; /** Cursor */
+  --textarea-disabled-cursor: not-allowed; /** Cursor when disabled */
+  --textarea-bare-bg: rgba(0, 0, 0, 0); /** Fondo — variante `bare`: el campo no pinta caja, la pinta el contenedor que lo enmarca */
+  --textarea-bare-border-color: rgba(0, 0, 0, 0); /** Borde — variante `bare`: sin contorno propio */
+  --textarea-bare-min-height: auto; /** Altura mínima — variante `bare`: la manda el contenido (`rows`), no la fórmula de la talla */
+  --textarea-bare-padding-block: 0; /** Aire vertical — variante `bare`: lo pone el contenedor */
+  --textarea-bare-padding-inline: 0; /** Aire horizontal — variante `bare`: lo pone el contenedor */
+  --textarea-bare-focus-ring-width: 0; /** Anillo de foco — variante `bare`: no lo dibuja el campo; el contenedor lo dibuja con `:focus-within` */
+  --textarea-bare-disabled-bg: rgba(0, 0, 0, 0); /** Fondo deshabilitado — variante `bare`: el gris de deshabilitado lo pinta el contenedor, no el campo */
+  --textarea-bare-disabled-border-color: rgba(0, 0, 0, 0); /** Borde deshabilitado — variante `bare` */
+  --textarea-bare-resize: none; /** Redimensionado — variante `bare`: el asa rompería la caja del contenedor */
+  --textarea-font-family: var(--font-family-sans); /** Font family */
+  --textarea-font-size: var(--font-size-2); /** Font size */
+  --textarea-line-height: var(--line-height-normal); /** Line height */
+  --textarea-bg: var(--color-white); /** Background */
+  --textarea-border-radius: var(--border-radius-default); /** Border radius */
+  --textarea-border-width: var(--border-width-default); /** Border width */
+  --textarea-padding-block: var(--control-padding-block); /** Block (vertical) padding */
+  --textarea-min-height: calc(var(--textarea-rows) * var(--textarea-line-height) * var(--textarea-font-size) + 2 * var(--textarea-padding-block) + 2 * var(--textarea-border-width)); /** Altura mínima: `rows` líneas de texto (rows × interlineado × cuerpo) más el aire de arriba y abajo y los dos bordes. Con la talla md, 130px */
+  --textarea-transition-duration: var(--motion-duration-fast); /** Transition duration */
+  --textarea-transition-easing: var(--motion-easing-default); /** Transition easing */
+  --textarea-error-bg: var(--color-white); /** Error background */
+  --textarea-sm-padding-block: var(--spacing-2); /** Block padding — variante sm */
+  --textarea-sm-padding-inline: var(--spacing-3); /** Inline padding — variante sm */
+  --textarea-sm-font-size: var(--font-size-1); /** Font size — variante sm (14px) */
+  --textarea-sm-min-height: calc(var(--textarea-rows) * var(--textarea-line-height) * var(--textarea-sm-font-size) + 2 * var(--textarea-sm-padding-block) + 2 * var(--textarea-border-width)); /** Altura mínima — sm: la misma fórmula con el cuerpo y el aire de la talla (102px) */
+  --textarea-lg-padding-block: var(--spacing-5); /** Block padding — variante lg */
+  --textarea-lg-padding-inline: var(--spacing-5); /** Inline padding — variante lg */
+  --textarea-lg-font-size: var(--font-size-3); /** Font size — variante lg (20px) */
+  --textarea-lg-min-height: calc(var(--textarea-rows) * var(--textarea-line-height) * var(--textarea-lg-font-size) + 2 * var(--textarea-lg-padding-block) + 2 * var(--textarea-border-width)); /** Altura mínima — lg: la misma fórmula con el cuerpo y el aire de la talla (170px) */
+  --textarea-padding-inline: var(--control-padding-inline); /** Inline (horizontal) padding */
+  --textarea-font-weight: var(--font-weight-default); /** Font weight */
+  --textarea-color: var(--color-text-on-light); /** Text color */
+  --textarea-border-color: var(--color-primary); /** Border color */
+  --textarea-placeholder-color: var(--color-text-placeholder-on-light); /** Placeholder: el gris de placeholder del sistema, para que un campo vacío no parezca relleno */
+  --textarea-focus-border-color: var(--color-primary); /** Border color on focus */
+  --textarea-focus-ring-inset-offset: var(--border-width-default); /** Gap between border and focus ring */
+  --textarea-focus-ring-color: var(--color-primary); /** Focus ring color */
+  --textarea-disabled-bg: var(--color-disabled-bg-on-light); /** Background when disabled */
+  --textarea-disabled-color: var(--color-disabled-text-on-light); /** Text color when disabled */
+  --textarea-disabled-border-color: var(--color-disabled-border-on-light); /** Border color when disabled */
+  --textarea-error-color: var(--color-text-on-light); /** Error text color */
+  --textarea-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (excepción a «bordes en prusia») */
+  --textarea-error-placeholder-color: var(--color-text-placeholder-on-light); /** Placeholder en error: el mismo gris */
+  --textarea-error-focus-border-color: var(--color-error-text-on-light); /** Borde en foco+error */
+  --textarea-error-focus-ring-color: var(--color-error-text-on-light); /** Error focus ring color */
+  --textarea-focus-ring-width: var(--control-focus-ring-width); /** Focus ring width */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --textarea-bg: var(--color-background-dark); /** Background — surface-dark */
+  --textarea-color: var(--color-text-on-dark); /** Text color — surface-dark */
+  --textarea-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
+  --textarea-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
+  --textarea-focus-border-color: var(--color-text-on-dark); /** Border color on focus — surface-dark */
+  --textarea-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --textarea-error-focus-ring-color: var(--color-error-text-on-dark); /** Error focus ring color — surface-dark */
+  --textarea-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --textarea-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
+  --textarea-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
+  --textarea-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
+  --textarea-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --textarea-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
+  --textarea-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
+  --textarea-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */
+}

package/src/tokens/components/textarea.ts

@@ -0,0 +1,13 @@
+import textarea from '../../../tokens/component/textarea.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(textarea as never);
+const notBare = all.filter(t => !t.name.startsWith('--textarea-bare-'));
+
+export const textareaBaseTokens     = notBare.filter(t => !t.name.match(/--textarea-(focus|error|disabled|dark|sm|lg)/));
+export const textareaFocusTokens    = notBare.filter(t => t.name.includes('focus') && !t.name.includes('dark'));
+export const textareaErrorTokens    = notBare.filter(t => t.name.includes('error') && !t.name.includes('dark'));
+export const textareaDisabledTokens = notBare.filter(t => t.name.includes('disabled'));
+export const textareaDarkTokens     = notBare.filter(t => t.name.includes('dark'));
+export const textareaSizeTokens     = notBare.filter(t => t.name.match(/--textarea-(sm|lg)-/));
+export const textareaBareTokens     = all.filter(t => t.name.startsWith('--textarea-bare-'));

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --time-select-gap: var(--spacing-1); /** Espacio entre selector de horas, separador y selector de minutos */
+  --time-select-sep-font-family: var(--font-family-sans); /** Familia tipográfica del separador «:» */
+  --time-select-sep-line-height: var(--line-height-none); /** Interlineado del separador «:»: sin holgura, para que quede a la altura de los desplegables */
+  --time-select-sep-color: var(--color-text-on-light); /** Color del separador : */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --time-select-sep-color: var(--color-text-on-dark); /** Color del separador «:» — surface-dark */
+}

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

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

package/src/tokens/components/toast.ts

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

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --toggle-group-gap: var(--spacing-2); /** Separación entre los botones del grupo */
+}

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

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

package/src/tokens/components/toggle.css

@@ -0,0 +1,50 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --toggle-bg: rgba(0, 0, 0, 0); /** Fondo sin pulsar: ninguno. El relleno es lo que dice que el valor está elegido */
+  --toggle-cursor: pointer; /** Cursor */
+  --toggle-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --toggle-height: var(--size-component-md); /** Altura del botón (talla md) */
+  --toggle-sm-height: var(--size-component-sm); /** Altura — talla sm */
+  --toggle-lg-height: var(--size-component-lg); /** Altura — talla lg */
+  --toggle-padding-inline: var(--spacing-5); /** Padding inline */
+  --toggle-sm-padding-inline: var(--spacing-4); /** Padding inline — talla sm */
+  --toggle-lg-padding-inline: var(--spacing-6); /** Padding inline — talla lg */
+  --toggle-gap: var(--spacing-2); /** Separación entre el icono y el texto */
+  --toggle-sm-font-size: var(--font-size-1); /** Tamaño de fuente — talla sm */
+  --toggle-lg-font-size: var(--font-size-3); /** Tamaño de fuente — talla lg */
+  --toggle-border-style: var(--control-border-style); /** Estilo del borde */
+  --toggle-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
+  --toggle-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
+  --toggle-transition-easing: var(--motion-easing-default); /** Easing de la transición */
+  --toggle-focus-ring-offset: var(--spacing-1); /** Separación del anillo de foco */
+  --toggle-font-family: var(--control-font-family); /** Familia tipográfica */
+  --toggle-font-size: var(--control-font-size); /** Tamaño de fuente */
+  --toggle-line-height: var(--control-line-height); /** Interlineado */
+  --toggle-border-color: var(--color-icon-secondary-on-light); /** Borde sin pulsar. Es el contorno de un control, no un divisor: el gris de bordes se queda en 1.54:1 sobre blanco y WCAG 1.4.11 pide 3:1. El gris de acción secundaria cumple y deja sitio al paso de hover, que sí es prusia */
+  --toggle-color: var(--color-text-on-light); /** Texto sin pulsar */
+  --toggle-hover-border-color: var(--color-primary); /** Borde al pasar el ratón — el hover no pone fondo, solo marca el borde */
+  --toggle-pressed-bg: var(--color-primary); /** Fondo pulsado: el valor elegido */
+  --toggle-pressed-color: var(--color-text-on-dark); /** Texto pulsado */
+  --toggle-pressed-border-color: var(--color-primary); /** Borde pulsado */
+  --toggle-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --toggle-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --toggle-font-weight: var(--control-font-weight); /** Peso tipográfico */
+  --toggle-border-width: var(--control-border-width); /** Grosor del borde */
+  --toggle-border-radius: var(--control-border-radius); /** Radio del borde (recto, como el resto de controles) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --toggle-border-color: var(--color-text-on-dark); /** Borde sin pulsar — surface-dark */
+  --toggle-color: var(--color-text-on-dark); /** Texto sin pulsar — surface-dark */
+  --toggle-hover-border-color: var(--color-text-on-dark); /** Borde al pasar el ratón — surface-dark. El toggle es un control de contorno, como `Button variant="outline"`: en oscuro el hover marca con la tinta (`color.text.on-dark`, igual que ese botón), no con el acento — el lavanda queda reservado al pulsado */
+  --toggle-pressed-bg: var(--color-accent-1); /** Fondo pulsado — surface-dark. El prusia coincide con el fondo de la superficie; el par es el de `Button primary` */
+  --toggle-pressed-color: var(--color-primary); /** Texto pulsado — surface-dark */
+  --toggle-pressed-border-color: var(--color-accent-1); /** Borde pulsado — surface-dark. Coincide a propósito con `surface-dark-pressed-bg`: el borde pulsado es el del relleno, la misma regla que sigue el modo claro (`pressed-border-color = primary = pressed-bg`) */
+  --toggle-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/toggle.ts

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

package/src/tokens/components/tooltip.css

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --tooltip-max-width: 20rem; /** Ancho máximo antes de romper línea */
+  --tooltip-padding-block: var(--spacing-1); /** Padding vertical del bocadillo */
+  --tooltip-padding-inline: var(--spacing-2); /** Padding horizontal del bocadillo */
+  --tooltip-font-family: var(--font-family-sans); /** Tipografía del bocadillo */
+  --tooltip-font-size: var(--font-size-1); /** Tamaño de texto del bocadillo */
+  --tooltip-line-height: var(--line-height-snug); /** Interlineado del bocadillo */
+  --tooltip-offset: var(--spacing-1); /** Separación entre disparador y bocadillo (4px). Fuente del sideOffset por defecto */
+  --tooltip-bg: var(--color-background-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
+  --tooltip-color: var(--color-text-on-dark); /** Color del texto del bocadillo */
+  --tooltip-border-radius: var(--border-radius-default); /** Radio de esquinas del bocadillo */
+  --tooltip-z-index: var(--floating-panel-z-index); /** Capa z — la misma que el resto de paneles flotantes */
+  --tooltip-transition-duration: var(--floating-panel-transition-duration); /** Duración de la animación de entrada/salida */
+  --tooltip-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --tooltip-bg: var(--color-background-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
+  --tooltip-color: var(--color-text-on-light); /** Texto del bocadillo — surface-dark, el par del fondo claro */
+}

package/src/tokens/components/tooltip.ts

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

package/src/tokens/components/typing-indicator.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --typing-indicator-dot-size: 0.375rem; /** Lado de cada punto cuadrado (6px) */
+  --typing-indicator-dot-rise: 0.25rem; /** Cuánto sube el punto en lo alto del salto (4px): una fracción del propio punto, no un desplazamiento de maqueta */
+  --typing-indicator-dot-gap: var(--spacing-1); /** Separación entre puntos */
+  --typing-indicator-dot-opacity-inactive: var(--opacity-disabled); /** Opacidad del punto en reposo */
+  --typing-indicator-dot-opacity-active: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
+  --typing-indicator-animation-duration: var(--motion-duration-slow); /** Duración del ciclo de animación */
+  --typing-indicator-animation-easing: var(--motion-easing-in-out); /** Curva del salto: movimiento */
+  --typing-indicator-dot-color: var(--color-text-on-light); /** Color de los puntos */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --typing-indicator-dot-color: var(--color-text-on-dark); /** Color de los puntos — surface-dark */
+}

package/src/tokens/components/typing-indicator.ts

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

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

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

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

@@ -0,0 +1,7 @@
+import userMessage from '../../../tokens/molecule/user-message.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(userMessage as never);
+
+export const userMessageTokens     = all.filter(t => !t.name.includes('surface-dark'));
+export const userMessageDarkTokens = all.filter(t => t.name.includes('surface-dark'));