@studiolxd/brand 38.12.4

package/src/tokens/border.ts

@@ -0,0 +1,13 @@
+import width from '../../tokens/border/width.json';
+import radius from '../../tokens/border/radius.json';
+import { flattenTokens } from './utils';
+
+const isRole = (name: string) => /-(default|focus|round)$/.test(name);
+
+const allWidth = flattenTokens(width as never);
+export const widthRoleTokens  = allWidth.filter((t) => isRole(t.name));
+export const widthScaleTokens = allWidth.filter((t) => !isRole(t.name));
+
+const allRadius = flattenTokens(radius as never);
+export const radiusRoleTokens  = allRadius.filter((t) => isRole(t.name));
+export const radiusScaleTokens = allRadius.filter((t) => !isRole(t.name));

package/src/tokens/breakpoint.ts

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

package/src/tokens/chart-palette.ts

@@ -0,0 +1,5 @@
+import chartPalette from '../../tokens/color/chart.json';
+import { flattenTokens } from './utils';
+
+/** Solo la paleta de datos: `--color-chart-*`. Los roles del organismo van aparte. */
+export const chartPaletteTokens = flattenTokens(chartPalette.color as never, 'color');

package/src/tokens/colors.ts

@@ -0,0 +1,168 @@
+/*
+ * Datos de la página de Colores. TODO sale de los JSON de tokens: la página no
+ * lleva un solo hex escrito a mano, así que no puede desincronizarse de la
+ * fuente. (Antes duplicaba 25 hex a mano y ya mostraba un valor equivocado.)
+ */
+import palette from '../../tokens/color/palette.json';
+import neutral from '../../tokens/color/neutral.json';
+import brand from '../../tokens/color/brand.json';
+import semantic from '../../tokens/color/semantic.json';
+import system from '../../tokens/color/system.json';
+import feedback from '../../tokens/color/feedback.json';
+import tag from '../../tokens/component/tag.json';
+import { flattenTokens, resolveRef } from './utils';
+
+type TokenEntry = { $value: string; $type: string; $description: string };
+type Group = Record<string, TokenEntry>;
+
+/* ---- Mapa de resolución: todas las capas de color ------------------------ */
+const entries = (group: Group, prefix: string) =>
+  Object.fromEntries(Object.entries(group).map(([k, v]) => [`${prefix}.${k}`, v.$value]));
+
+const refMap: Record<string, string> = {
+  ...entries(palette.color as Group, 'color'),
+  ...entries(neutral.color as Group, 'color'),
+  ...entries(system.color as Group, 'color'),
+  ...entries(feedback.color as Group, 'color'),
+  ...entries(brand.color as Group, 'color'),
+  ...entries(semantic.color.text as Group, 'color.text'),
+  ...entries(semantic.color.background as Group, 'color.background'),
+  ...entries(semantic.color.surface as Group, 'color.surface'),
+};
+
+const hex = (value: string) => resolveRef(value, refMap);
+
+/* ---- Tablas de tokens ---------------------------------------------------- */
+export const paletteTokens  = flattenTokens(palette as never);
+export const neutralTokens  = flattenTokens(neutral as never);
+export const brandTokens    = flattenTokens(brand as never);
+export const systemTokens   = flattenTokens(system as never);
+export const feedbackTokens = flattenTokens(feedback as never);
+export const semanticTokens = flattenTokens(semantic as never);
+
+/* ---- Muestras para <ColorPalette> ---------------------------------------- */
+export interface Swatch {
+  title: string;
+  subtitle: string;
+  colors: Record<string, string>;
+}
+
+const p = palette.color as Group;
+const n = neutral.color as Group;
+const b = brand.color as Group;
+const sys = system.color as Group;
+const fb = feedback.color as Group;
+const txt = semantic.color.text as Group;
+const bg = semantic.color.background as Group;
+const surf = semantic.color.surface as Group;
+
+const swatch = (title: string, subtitle: string, tokens: string[], group: Group, prefix = '--color-'): Swatch => ({
+  title,
+  subtitle,
+  colors: Object.fromEntries(tokens.map((t) => [`${prefix}${t}`, hex(group[t].$value)])),
+});
+
+const PALETTE_ES: Record<string, string> = {
+  prussian: 'Prusia', lavender: 'Lavanda', yellow: 'Amarillo', emerald: 'Esmeralda', cayenne: 'Cayena',
+};
+
+const rgb = (h: string) => {
+  const v = h.replace('#', '');
+  return [0, 2, 4].map((i) => parseInt(v.slice(i, i + 2), 16)).join(', ');
+};
+
+export const paletteSwatches: Swatch[] = Object.keys(p).map((k) =>
+  swatch(PALETTE_ES[k] ?? k, `RGB ${rgb(p[k].$value)}`, [k], p),
+);
+
+export const brandSwatches: Swatch[] = [
+  swatch('Primario', '~50% de uso', ['primary'], b),
+  swatch('Acento 1', '~20% de uso', ['accent-1'], b),
+  swatch('Acento 2', '~20% de uso', ['accent-2'], b),
+  swatch('Soporte 1', '~5% de uso', ['support-1'], b),
+  swatch('Soporte 2', '~5% de uso', ['support-2'], b),
+];
+
+export const neutralSwatches: Swatch[] = [
+  swatch('Blanco', 'Fondo claro', ['white'], n),
+  swatch('Gris', 'lightest · light · dark · darkest', ['grey-lightest', 'grey-light', 'grey-dark', 'grey-darkest'], n),
+  swatch('Negro', 'Solo para usos puntuales', ['black'], n),
+];
+
+export const systemSwatches: Swatch[] = [
+  swatch('Rojo', 'base · light', ['red', 'red-light'], sys),
+  swatch('Verde', 'base · light', ['green', 'green-light'], sys),
+];
+
+const inkPair = (name: string, label: string): Swatch =>
+  swatch(`${label} — texto`, `${name}-text-on-light · ${name}-text-on-dark`, [`${name}-text-on-light`, `${name}-text-on-dark`], fb);
+const fillPair = (name: string, label: string): Swatch =>
+  swatch(`${label} — relleno`, `${name}-fill · ${name}-fill-text`, [`${name}-fill`, `${name}-fill-text`], fb);
+const role = (name: string, label: string): Swatch[] => [inkPair(name, label), fillPair(name, label)];
+export const feedbackSwatches: Swatch[] = [
+  ...role('error', 'Error'),
+  ...role('success', 'Éxito'),
+  // El aviso no tiene par de tinta: solo va como relleno. Ver Colors.mdx.
+  fillPair('warning', 'Aviso'),
+  ...role('destructive', 'Destructivo'),
+];
+
+export const semanticSwatches: Swatch[] = [
+  swatch('Texto', 'on-light · on-dark', ['on-light', 'on-dark'], txt, '--color-text-'),
+  swatch('Texto atenuado', 'muted-on-light · muted-on-dark', ['muted-on-light', 'muted-on-dark'], txt, '--color-text-'),
+  swatch('Placeholder', 'placeholder-on-light · placeholder-on-dark', ['placeholder-on-light', 'placeholder-on-dark'], txt, '--color-text-'),
+  swatch('Fondo', 'light · dark', ['light', 'dark'], bg, '--color-background-'),
+  swatch('Superficie secundaria', 'secondary-on-light · secondary-on-dark', ['secondary-on-light', 'secondary-on-dark'], surf, '--color-surface-'),
+  swatch('Superficie invertida', 'inverse-on-light · inverse-on-dark', ['inverse-on-light', 'inverse-on-dark'], surf, '--color-surface-'),
+];
+
+/* ---- Contraste ------------------------------------------------------------ */
+export interface NamedColor { name: string; token: string; hex: string }
+
+export const surfaces: NamedColor[] = [
+  { name: 'Blanco', token: '--color-background-light', hex: hex(bg.light.$value) },
+  { name: 'Prusia', token: '--color-background-dark', hex: hex(bg.dark.$value) },
+];
+
+/** Todo color que pueda acabar como tinta (texto, icono, borde) sobre una superficie. */
+export const inks: NamedColor[] = [
+  ...Object.keys(p).filter((k) => k !== 'prussian').map((k) => ({ name: PALETTE_ES[k] ?? k, token: `--color-${k}`, hex: hex(p[k].$value) })),
+  { name: 'Texto', token: '--color-text-on-light', hex: hex(txt['on-light'].$value) },
+  { name: 'Texto (oscuro)', token: '--color-text-on-dark', hex: hex(txt['on-dark'].$value) },
+  { name: 'Texto atenuado', token: '--color-text-muted-on-light', hex: hex(txt['muted-on-light'].$value) },
+  { name: 'Texto atenuado (oscuro)', token: '--color-text-muted-on-dark', hex: hex(txt['muted-on-dark'].$value) },
+  { name: 'Placeholder', token: '--color-text-placeholder-on-light', hex: hex(txt['placeholder-on-light'].$value) },
+  { name: 'Placeholder (oscuro)', token: '--color-text-placeholder-on-dark', hex: hex(txt['placeholder-on-dark'].$value) },
+  { name: 'Error — texto', token: '--color-error-text-on-light', hex: hex(fb['error-text-on-light'].$value) },
+  { name: 'Error — texto (oscuro)', token: '--color-error-text-on-dark', hex: hex(fb['error-text-on-dark'].$value) },
+  { name: 'Éxito — texto', token: '--color-success-text-on-light', hex: hex(fb['success-text-on-light'].$value) },
+  { name: 'Éxito — texto (oscuro)', token: '--color-success-text-on-dark', hex: hex(fb['success-text-on-dark'].$value) },
+];
+
+/** Los rellenos de marca y feedback, con la tinta que llevan encima. */
+export const fills: { name: string; fill: NamedColor; ink: NamedColor }[] = [
+  ...(['accent-1', 'accent-2', 'support-1', 'support-2'] as const).map((k) => ({
+    name: brandSwatches.find((s) => Object.keys(s.colors)[0] === `--color-${k}`)?.title ?? k,
+    fill: { name: k, token: `--color-${k}`, hex: hex(b[k].$value) },
+    ink: { name: 'Texto', token: '--color-text-on-light', hex: hex(txt['on-light'].$value) },
+  })),
+  { name: 'Primario', fill: { name: 'primary', token: '--color-primary', hex: hex(b.primary.$value) }, ink: { name: 'Texto (oscuro)', token: '--color-text-on-dark', hex: hex(txt['on-dark'].$value) } },
+  { name: 'Error — relleno', fill: { name: 'error-fill', token: '--color-error-fill', hex: hex(fb['error-fill'].$value) }, ink: { name: 'error-fill-text', token: '--color-error-fill-text', hex: hex(fb['error-fill-text'].$value) } },
+  { name: 'Éxito — relleno', fill: { name: 'success-fill', token: '--color-success-fill', hex: hex(fb['success-fill'].$value) }, ink: { name: 'success-fill-text', token: '--color-success-fill-text', hex: hex(fb['success-fill-text'].$value) } },
+  { name: 'Aviso — relleno', fill: { name: 'warning-fill', token: '--color-warning-fill', hex: hex(fb['warning-fill'].$value) }, ink: { name: 'warning-fill-text', token: '--color-warning-fill-text', hex: hex(fb['warning-fill-text'].$value) } },
+];
+
+/* ---- Tag: lo consume la doc del componente, no la de fundamentos --------- */
+const t = tag.tag as Group;
+const tagPair = (variant: string, label: string) => ({
+  label,
+  ink: hex(t[`${variant}-color`].$value),
+  bg: { name: `${label} — fondo`, token: `--tag-${variant}-bg`, hex: hex(t[`${variant}-bg`].$value) },
+});
+export const tagPairs = [
+  tagPair('info', 'Info'), tagPair('warning', 'Aviso'), tagPair('success', 'Éxito'),
+  tagPair('danger', 'Peligro'), tagPair('neutral', 'Neutral'),
+  tagPair('support-1', 'Soporte 1'), tagPair('support-2', 'Soporte 2'),
+];
+
+export const logoTokens = semanticTokens.filter((tk) => tk.name.startsWith('--color-text'));

package/src/tokens/components/accordion.css

@@ -0,0 +1,32 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --accordion-trigger-cursor: pointer; /** Cursor del disparador */
+  --accordion-trigger-padding-block: var(--spacing-5); /** Aire vertical del disparador */
+  --accordion-trigger-padding-inline: var(--spacing-6); /** Aire horizontal del disparador */
+  --accordion-trigger-gap: var(--spacing-4); /** Hueco entre el texto y el chevron */
+  --accordion-index-font-family: var(--font-family-mono); /** Monoespaciada: los números del acordeón numerado se alinean en columna */
+  --accordion-index-min-inline-size: var(--spacing-5); /** Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras */
+  --accordion-content-padding-block: var(--spacing-6); /** Aire inferior del contenido */
+  --accordion-content-padding-inline: var(--spacing-6); /** Aire horizontal del contenido */
+  --accordion-transition-duration: var(--motion-duration-slow); /** Duración de abrir/cerrar (cambio de contexto: el panel entra) */
+  --accordion-transition-easing: var(--motion-easing-in-out); /** Curva de abrir/cerrar */
+  --accordion-border-width: var(--border-width-default); /** Grosor del separador entre ítems */
+  --accordion-border-color: var(--color-primary); /** Color del separador: tinta de la superficie (prusia en claro) */
+  --accordion-index-font-size: var(--text-paragraph-small-font-size); /** Un peldaño por debajo del rótulo del apartado */
+  --accordion-index-color: var(--color-text-muted-on-light); /** Color del número: texto secundario, para que no compita con el rótulo */
+  --accordion-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --accordion-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco (el rol focus gobierna ancho y separación) */
+  --accordion-focus-ring-color: var(--color-primary); /** Color del anillo de foco: la tinta de la superficie */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --accordion-index-color: var(--color-text-muted-on-dark); /** Número — surface-dark */
+  --accordion-border-color: var(--color-text-on-dark); /** Separador — surface-dark */
+  --accordion-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/accordion.ts

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

package/src/tokens/components/alert.ts

@@ -0,0 +1,14 @@
+import alert from '../../../tokens/component/alert.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(alert as never);
+
+const VARIANTS = ['success', 'error', 'warning'];
+
+export const alertBaseTokens = all.filter(
+  t => !VARIANTS.some(v => t.name.startsWith(`--alert-${v}-`)),
+);
+
+export const alertVariantTokens = all.filter(
+  t => VARIANTS.some(v => t.name.startsWith(`--alert-${v}-`)),
+);

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --app-header-content-height: var(--size-component-md); /** Lo más alto que lleva la barra: un control md */
+  --app-header-padding-block: var(--spacing-2); /** Aire arriba y abajo del contenido */
+  --app-header-padding-inline: var(--spacing-4); /** Aire lateral */
+  --app-header-gap: var(--spacing-3); /** Entre el botón de menú, el inicio y los controles del final */
+  --app-header-flyout-offset: var(--spacing-1); /** Separación compartida entre el borde inferior de la cabecera y el flotante que anclan sus disparadores (menú de usuario, panel de notificaciones): la que ya tenía el menú de usuario */
+  --app-header-z-index: var(--z-index-bar); /** Capa de barra fija */
+  --app-header-height: calc(var(--app-header-content-height) + 2 * var(--app-header-padding-block)); /** Altura de la barra: compuesta, 56px */
+  --app-header-bg: var(--color-background-light); /** Fondo */
+  --app-header-border-width: var(--border-width-default); /** Borde inferior que la separa del contenido */
+  --app-header-border-color: var(--color-primary); /** Color del borde */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --app-header-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --app-header-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
+}

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

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

package/src/tokens/components/app-launcher.ts

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

package/src/tokens/components/arrow.css

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

package/src/tokens/components/arrow.ts

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

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

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

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

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --async-multi-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --async-multi-select-content-max-height: var(--multi-select-content-max-height); /** Hereda de `multi-select.content-max-height`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-border-style: var(--multi-select-border-style); /** Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-content-gap: var(--multi-select-content-gap); /** Hereda de `multi-select.content-gap`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-height: var(--multi-select-height); /** Hereda de `multi-select.height`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-lg-height: var(--multi-select-lg-height); /** Hereda de `multi-select.lg-height`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-sm-height: var(--multi-select-sm-height); /** Hereda de `multi-select.sm-height`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-color: var(--multi-select-pill-color); /** Hereda de `multi-select.pill-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-font-size: var(--multi-select-pill-font-size); /** Hereda de `multi-select.pill-font-size`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-gap: var(--multi-select-pill-gap); /** Hereda de `multi-select.pill-gap`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-padding-block: var(--multi-select-pill-padding-block); /** Hereda de `multi-select.pill-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-padding-inline: var(--multi-select-pill-padding-inline); /** Hereda de `multi-select.pill-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-selection-gap: var(--multi-select-selection-gap); /** Hereda de `multi-select.selection-gap`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-item-selected-font-weight: var(--font-weight-emphasis); /** Peso de la opción ya elegida dentro de la lista de resultados */
+  --async-multi-select-empty-color: var(--color-text-muted-on-light); /** Tinta del mensaje de lista vacía: es texto secundario, no un valor */
+  --async-multi-select-bg: var(--multi-select-bg); /** Hereda de `multi-select.bg`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-content-bg: var(--multi-select-content-bg); /** Hereda de `multi-select.content-bg`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-content-z-index: var(--multi-select-content-z-index); /** Hereda de `multi-select.content-z-index`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-error-border-color: var(--multi-select-error-border-color); /** Hereda de `multi-select.error-border-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-font-family: var(--multi-select-font-family); /** Hereda de `multi-select.font-family`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-font-size: var(--multi-select-font-size); /** Hereda de `multi-select.font-size`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-item-padding-block: var(--multi-select-item-padding-block); /** Hereda de `multi-select.item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-lg-font-size: var(--multi-select-lg-font-size); /** Hereda de `multi-select.lg-font-size`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-lg-item-padding-block: var(--multi-select-lg-item-padding-block); /** Hereda de `multi-select.lg-item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-lg-padding-inline: var(--multi-select-lg-padding-inline); /** Hereda de `multi-select.lg-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-placeholder-color: var(--multi-select-placeholder-color); /** Hereda de `multi-select.placeholder-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-sm-font-size: var(--multi-select-sm-font-size); /** Hereda de `multi-select.sm-font-size`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-sm-item-padding-block: var(--multi-select-sm-item-padding-block); /** Hereda de `multi-select.sm-item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-sm-padding-inline: var(--multi-select-sm-padding-inline); /** Hereda de `multi-select.sm-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-bg: var(--multi-select-pill-bg); /** Hereda de `multi-select.pill-bg`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-pill-border-radius: var(--multi-select-pill-border-radius); /** Hereda de `multi-select.pill-border-radius`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-loading-padding-block: var(--multi-select-item-padding-block); /** Aire vertical de la fila de carga: la misma caja que una opción, para que la lista no salte al llegar los resultados */
+  --async-multi-select-empty-padding-block: var(--multi-select-item-padding-block); /** Aire vertical del mensaje de lista vacía */
+  --async-multi-select-empty-font-family: var(--multi-select-font-family); /** Tipografía del mensaje de lista vacía */
+  --async-multi-select-empty-font-size: var(--multi-select-font-size); /** Tamaño del mensaje de lista vacía */
+  --async-multi-select-border-color: var(--multi-select-border-color); /** Hereda de `multi-select.border-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-border-radius: var(--multi-select-border-radius); /** Hereda de `multi-select.border-radius`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-border-width: var(--multi-select-border-width); /** Hereda de `multi-select.border-width`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-color: var(--multi-select-color); /** Hereda de `multi-select.color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-content-border-color: var(--multi-select-content-border-color); /** Hereda de `multi-select.content-border-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-focus-ring-color: var(--multi-select-focus-ring-color); /** Hereda de `multi-select.focus-ring-color`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-focus-ring-width: var(--multi-select-focus-ring-width); /** Hereda de `multi-select.focus-ring-width`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-font-weight: var(--multi-select-font-weight); /** Hereda de `multi-select.font-weight`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-item-highlighted-bg: var(--multi-select-item-highlighted-bg); /** Hereda de `multi-select.item-highlighted-bg`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-item-highlighted-color: var(--multi-select-item-highlighted-color); /** Texto de la opción resaltada — el del MultiSelect */
+  --async-multi-select-line-height: var(--multi-select-line-height); /** Hereda de `multi-select.line-height`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-padding-inline: var(--multi-select-padding-inline); /** Hereda de `multi-select.padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono */
+  --async-multi-select-loading-padding-inline: var(--multi-select-padding-inline); /** Aire horizontal de la fila de carga */
+  --async-multi-select-empty-padding-inline: var(--multi-select-padding-inline); /** Aire horizontal del mensaje de lista vacía */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --async-multi-select-empty-color: var(--color-text-muted-on-dark); /** Tinta del mensaje de lista vacía — surface-dark */
+  --async-multi-select-item-highlighted-bg: var(--multi-select-item-highlighted-bg); /** Relleno de la opción resaltada — surface-dark */
+  --async-multi-select-item-highlighted-color: var(--multi-select-item-highlighted-color); /** Texto de la opción resaltada — surface-dark */
+}

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

@@ -0,0 +1,13 @@
+import tokens from '../../../tokens/component/async-multi-select.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+const light = all.filter(t => !t.name.startsWith('--async-multi-select-surface-dark-'));
+
+export const asyncMultiSelectFaceTokens = light.filter(
+  t => !t.name.match(/--async-multi-select-(loading|empty|item-selected)/),
+);
+export const asyncMultiSelectStateTokens = light.filter(
+  t => t.name.match(/--async-multi-select-(loading|empty|item-selected)/),
+);
+export const asyncMultiSelectDarkTokens = all.filter(t => t.name.startsWith('--async-multi-select-surface-dark-'));

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

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --async-select-border-style: var(--select-border-style); /** Hereda de `select.border-style`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --async-select-content-max-height: var(--select-content-max-height); /** Hereda de `select.content-max-height`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-bg: var(--select-bg); /** Hereda de `select.bg`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-content-bg: var(--select-content-bg); /** Hereda de `select.content-bg`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-content-gap: var(--multi-select-content-gap); /** Hereda de `multi-select.content-gap`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-content-z-index: var(--select-content-z-index); /** Hereda de `select.content-z-index`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-font-family: var(--select-font-family); /** Hereda de `select.font-family`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-font-size: var(--select-font-size); /** Hereda de `select.font-size`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-height: var(--select-height); /** Hereda de `select.height`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-item-padding-block: var(--select-item-padding-block); /** Hereda de `select.item-padding-block`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-lg-font-size: var(--select-lg-font-size); /** Hereda de `select.lg-font-size`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-lg-height: var(--select-lg-height); /** Hereda de `select.lg-height`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-lg-item-padding-block: var(--select-lg-item-padding-block); /** Hereda de `select.lg-item-padding-block`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-lg-padding-inline: var(--select-lg-padding-inline); /** Hereda de `select.lg-padding-inline`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-sm-font-size: var(--select-sm-font-size); /** Hereda de `select.sm-font-size`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-sm-height: var(--select-sm-height); /** Hereda de `select.sm-height`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-sm-item-padding-block: var(--select-sm-item-padding-block); /** Hereda de `select.sm-item-padding-block`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-sm-padding-inline: var(--select-sm-padding-inline); /** Hereda de `select.sm-padding-inline`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-item-selected-font-weight: var(--font-weight-emphasis); /** Peso de la opción ya elegida dentro de la lista de resultados */
+  --async-select-loading-padding-block: var(--select-item-padding-block); /** Aire vertical de la fila de carga: la misma caja que una opción, para que la lista no salte al llegar los resultados */
+  --async-select-empty-padding-block: var(--select-item-padding-block); /** Aire vertical del mensaje de lista vacía */
+  --async-select-empty-font-family: var(--select-font-family); /** Tipografía del mensaje de lista vacía */
+  --async-select-empty-font-size: var(--select-font-size); /** Tamaño del mensaje de lista vacía */
+  --async-select-empty-color: var(--color-text-muted-on-light); /** Tinta del mensaje de lista vacía: es texto secundario, no un valor */
+  --async-select-border-color: var(--select-border-color); /** Hereda de `select.border-color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-border-radius: var(--select-border-radius); /** Hereda de `select.border-radius`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-border-width: var(--select-border-width); /** Hereda de `select.border-width`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-color: var(--select-color); /** Hereda de `select.color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-content-border-color: var(--select-content-border-color); /** Hereda de `select.content-border-color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-error-border-color: var(--select-error-border-color); /** Hereda de `select.error-border-color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-focus-ring-color: var(--select-focus-ring-color); /** Hereda de `select.focus-ring-color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-focus-ring-width: var(--select-focus-ring-width); /** Hereda de `select.focus-ring-width`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-font-weight: var(--select-font-weight); /** Hereda de `select.font-weight`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-item-highlighted-bg: var(--select-item-highlighted-bg); /** Hereda de `select.item-highlighted-bg`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-item-highlighted-color: var(--select-item-highlighted-color); /** Texto de la opción resaltada — el del Select */
+  --async-select-line-height: var(--select-line-height); /** Hereda de `select.line-height`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-padding-inline: var(--select-padding-inline); /** Hereda de `select.padding-inline`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-placeholder-color: var(--multi-select-placeholder-color); /** Hereda de `multi-select.placeholder-color`: el buscador tiene la misma cara que el control síncrono */
+  --async-select-loading-padding-inline: var(--select-padding-inline); /** Aire horizontal de la fila de carga */
+  --async-select-empty-padding-inline: var(--select-padding-inline); /** Aire horizontal del mensaje de lista vacía */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --async-select-empty-color: var(--color-text-muted-on-dark); /** Tinta del mensaje de lista vacía — surface-dark */
+  --async-select-item-highlighted-bg: var(--select-item-highlighted-bg); /** Relleno de la opción resaltada — surface-dark */
+  --async-select-item-highlighted-color: var(--select-item-highlighted-color); /** Texto de la opción resaltada — surface-dark */
+}

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

@@ -0,0 +1,13 @@
+import tokens from '../../../tokens/component/async-select.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+const light = all.filter(t => !t.name.startsWith('--async-select-surface-dark-'));
+
+export const asyncSelectFaceTokens = light.filter(
+  t => !t.name.match(/--async-select-(loading|empty|item-selected)/),
+);
+export const asyncSelectStateTokens = light.filter(
+  t => t.name.match(/--async-select-(loading|empty|item-selected)/),
+);
+export const asyncSelectDarkTokens = all.filter(t => t.name.startsWith('--async-select-surface-dark-'));

package/src/tokens/components/avatar.css

@@ -0,0 +1,33 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --avatar-size-2xl: 6rem; /** 96px — el avatar es además la zona donde se suelta la imagen (`AvatarUpload` a talla `sm`). Vez y media el peldaño anterior, sigue en el múltiplo de 8, y a 96px la diana de arrastre se acierta sin apuntar */
+  --avatar-size-3xl: 8rem; /** 128px — el doble de `xl`. Retrato de la superficie de aplicación cuando la foto es el asunto de la pantalla y la diana del arrastre (`AvatarUpload` a talla `md`, /account) */
+  --avatar-size-4xl: 12rem; /** 192px — el doble de `2xl`, y vez y media `3xl`: el mismo salto que hay de `xl` a `2xl`. Retrato de la superficie pública, donde el avatar es el paso entero de la pantalla (`AvatarUpload` a talla `lg`, el logotipo del alta). A 375px ya no cabe con el botón al lado: la fila del AvatarUpload envuelve y el botón baja */
+  --avatar-size-sm: var(--size-component-sm); /** 32px — en barras y menús (UserMenu, OrgSwitcher) */
+  --avatar-size-md: var(--size-component-md); /** 40px — por defecto: listas, tarjetas */
+  --avatar-size-lg: var(--size-component-lg); /** 48px — cabeceras de perfil */
+  --avatar-size-xl: var(--icon-size-xl); /** 64px — el avatar es el asunto de la pantalla (una cabecera de perfil, la subida de la foto). Es la talla ilustrativa de la escala de iconos, la misma que usan `logo.height-xl` y `logomark.size-xl`, no una talla de control: por encima de `lg` el sistema ya no mide con la escala de controles */
+  --avatar-initials-font-size-sm: var(--font-size-1); /** Iniciales a talla sm */
+  --avatar-initials-font-size-md: var(--font-size-2); /** Iniciales a talla md */
+  --avatar-initials-font-size-lg: var(--font-size-3); /** Iniciales a talla lg */
+  --avatar-initials-font-size-xl: var(--font-size-4); /** Iniciales a talla xl: un peldaño de la escala tipográfica por talla, como las tres anteriores */
+  --avatar-initials-font-size-2xl: var(--font-size-5); /** Iniciales a talla 2xl: un peldaño más, como en el resto de la escala */
+  --avatar-initials-font-size-3xl: var(--font-size-6); /** Iniciales a talla 3xl: un peldaño más */
+  --avatar-initials-font-size-4xl: var(--font-size-7); /** Iniciales a talla 4xl: un peldaño más */
+  --avatar-border-radius: var(--border-radius-round); /** Personas: círculo */
+  --avatar-border-radius-square: var(--border-radius-default); /** Organizaciones (logos): el radio del sistema */
+  --avatar-initials-bg: var(--color-primary); /** Fondo de las iniciales */
+  --avatar-initials-color: var(--color-text-on-dark); /** Iniciales sobre el fondo */
+  --avatar-initials-font-weight: var(--font-weight-emphasis); /** Iniciales: énfasis */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --avatar-initials-bg: var(--color-text-on-dark); /** Iniciales — surface-dark: se invierten */
+  --avatar-initials-color: var(--color-primary); /** Iniciales — surface-dark */
+}

package/src/tokens/components/avatar.ts

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

package/src/tokens/components/breadcrumb.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --breadcrumb-padding-inline: 0; /** Sin padding lateral */
+  --breadcrumb-link-text-decoration: none; /** OBSOLETO — no viste nada. El subrayado de las migas es la línea del sistema, la misma de cualquier enlace, y no `text-decoration`. Se conserva en `none` para no romper a quien lo tenga referenciado; a retirar en el próximo major */
+  --breadcrumb-link-text-decoration-hover: none; /** OBSOLETO — no viste nada. Valía `underline` y era la vía por la que el subrayado de `text-decoration` seguía entrando en el DS. A retirar en el próximo major */
+  --breadcrumb-font-family: var(--font-family-sans); /** Font family */
+  --breadcrumb-line-height: var(--line-height-none); /** Single-line */
+  --breadcrumb-gap: var(--spacing-2); /** Gap entre items y separadores */
+  --breadcrumb-padding-block: var(--spacing-1); /** Padding vertical del nav */
+  --breadcrumb-font-size: var(--text-paragraph-small-font-size); /** Texto de navegación, no control: peldaño por debajo del cuerpo (respira en la superficie pública) */
+  --breadcrumb-font-weight: var(--font-weight-default); /** Font weight base */
+  --breadcrumb-separator-color: var(--color-text-on-light); /** Color del separador */
+  --breadcrumb-link-color: var(--color-text-on-light); /** Color del link navegable */
+  --breadcrumb-link-color-hover: var(--color-primary); /** Color del link en hover */
+  --breadcrumb-current-color: var(--color-text-on-light); /** Color del item activo (página actual) */
+  --breadcrumb-current-font-weight: var(--font-weight-emphasis); /** Peso del item activo */
+  --breadcrumb-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --breadcrumb-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --breadcrumb-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --breadcrumb-link-color: var(--color-text-on-dark); /** Link color — surface-dark */
+  --breadcrumb-link-color-hover: var(--color-text-on-dark); /** Link hover color — surface-dark */
+  --breadcrumb-current-color: var(--color-text-on-dark); /** Current color — surface-dark */
+  --breadcrumb-separator-color: var(--color-text-on-dark); /** Separator color — surface-dark */
+  --breadcrumb-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+}

package/src/tokens/components/breadcrumb.ts

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