@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/Button/Button.theme.d.ts

@@ -1,87 +1,194 @@
 export declare const buttonTheme: Record<"button", {
-    /**
-     * El botón, y el primer componente propio del que todo lo demás cuelga.
-     *
-     * Las combinaciones no se escriben: la dimensión `color` solo asigna las
-     * variables de acento y la dimensión `variant` las consume, así que siete
-     * colores y cinco variantes son doce entradas en vez de treinta y cinco.
-     * `shape` no depende del tamaño porque un `aspect-square` ya cuadra la
-     * altura que haya puesto `size`.
-     */
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly base: "size-6 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "xs";
+    }, {
+        readonly class: {
+            readonly base: "size-8 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "sm";
+    }, {
+        readonly class: {
+            readonly base: "size-10 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "md";
+    }, {
+        readonly class: {
+            readonly base: "size-12 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "lg";
+    }, {
+        readonly class: {
+            readonly base: "size-16 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "xl";
+    }, {
+        readonly class: {
+            readonly base: "size-20 items-center justify-center p-0 pt-0";
+        };
+        readonly iconOnly: "true";
+        readonly size: "2xl";
+    }, {
+        readonly class: {
+            readonly base: "py-0";
+        };
+        readonly expressive: "true";
+        readonly size: "xs";
+    }, {
+        readonly class: {
+            readonly base: "py-1";
+        };
+        readonly expressive: "true";
+        readonly size: "sm";
+    }, {
+        readonly class: {
+            readonly base: "py-2";
+        };
+        readonly expressive: "true";
+        readonly size: "md";
+    }, {
+        readonly class: {
+            readonly base: "py-3";
+        };
+        readonly expressive: "true";
+        readonly size: "lg";
+    }, {
+        readonly class: {
+            readonly base: "py-[14px]";
+        };
+        readonly expressive: "true";
+        readonly size: "xl";
+    }, {
+        readonly class: {
+            readonly base: "py-[14px]";
+        };
+        readonly expressive: "true";
+        readonly size: "2xl";
+    }, {
+        readonly class: {
+            readonly base: "px-[13px] py-3";
+        };
+        readonly expressive: "true";
+        readonly iconOnly: "true";
+    }, {
+        readonly class: {
+            readonly icon: "ms-0";
+        };
+        readonly iconOnly: "true";
+        readonly kind: "ghost";
+    }, {
+        readonly class: {
+            readonly icon: "ms-0";
+        };
+        readonly iconOnly: "true";
+        readonly kind: "danger--ghost";
+    }, {
+        readonly class: {
+            readonly base: "focus:shadow-[inset_0_0_0_1px_var(--vuno-focus)]";
+        };
+        readonly iconOnly: "true";
+        readonly kind: "ghost";
+    }, {
+        readonly class: {
+            readonly icon: "group-disabled:text-(--vuno-icon-on-color-disabled) group-aria-disabled:text-(--vuno-icon-on-color-disabled)";
+        };
+        readonly iconOnly: "true";
+        readonly kind: "ghost";
+    }, {
+        readonly class: {
+            readonly base: "bg-(--vuno-background-selected)";
+        };
+        readonly iconOnly: "true";
+        readonly kind: "ghost";
+        readonly selected: "true";
+    }];
     readonly slots: {
-        readonly base: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:pointer-events-none disabled:opacity-50";
-        readonly icon: "shrink-0";
-        /**
-         * Caja y no texto suelto: el contenido del slot puede ser cualquier
-         * cosa —la muestra de color del campo es un `span` con `size-4`— y
-         * dentro de un envoltorio en línea el ancho y el alto no se aplican.
-         * Con una muestra de 16 px dio 2, que era solo su borde.
-         */
-        readonly label: "inline-flex items-center";
-        /** El giro se dibuja con un borde: un icono más sería otra descarga. */
-        readonly spinner: "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent";
+        /** Descripción de la acción destructiva, solo para lectores de pantalla. */
+        readonly assistive: "sr-only";
+        readonly base: "group relative m-0 inline-flex w-max max-w-80 shrink-0 cursor-pointer justify-between border border-transparent ps-[15px] pe-[63px] align-top font-normal text-sm leading-[1.125rem] tracking-normal text-start no-underline outline-none transition-[background-color,border-color,box-shadow,outline-color] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) focus:border-(--vuno-focus) focus:shadow-[inset_0_0_0_1px_var(--vuno-focus),inset_0_0_0_2px_var(--vuno-background)] disabled:cursor-not-allowed disabled:border-(--vuno-button-disabled) disabled:bg-(--vuno-button-disabled) disabled:text-(--vuno-text-on-color-disabled) disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:border-(--vuno-button-disabled) aria-disabled:bg-(--vuno-button-disabled) aria-disabled:text-(--vuno-text-on-color-disabled) aria-disabled:shadow-none motion-reduce:transition-none forced-colors:focus:text-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]";
+        readonly icon: "pointer-events-none absolute end-4 size-4 shrink-0";
+        readonly label: "min-w-0";
+        readonly spinner: "animate-spin rounded-full border-2 border-current border-t-transparent";
     };
     readonly variants: {
-        readonly color: Record<import("../../types/base.js").VunoColor, Record<"base", string>>;
-        readonly groupOrientation: {
-            readonly horizontal: {
-                readonly base: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-visible:z-1";
+        /** Tipografía y relleno de `body-compact-02`, con icono de 20 px. */
+        readonly expressive: {
+            readonly false: {};
+            readonly true: {
+                readonly base: "text-base leading-[1.375rem] tracking-normal";
+                readonly icon: "size-5";
             };
-            readonly vertical: {
-                readonly base: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-visible:z-1";
+        };
+        readonly iconOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly icon: "static";
             };
         };
-        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"base", string>>;
-        /**
-         * Sin etiqueta el botón es cuadrado, y eso sí combina con el
-         * tamaño: por eso `size` publica su altura en una variable y aquí
-         * se consume como ancho. Escribirlo con `aspect-square` parecía
-         * bastar y no basta —un `inline-flex` de ancho automático lo
-         * ensancha el relleno lateral—, y fijar el ancho por valor
-         * devolvería las cinco combinaciones.
-         */
-        readonly shape: {
-            readonly square: {
-                readonly base: "w-(--vuno-button-size) px-0";
+        readonly kind: {
+            readonly danger: {
+                readonly base: "border-transparent bg-(--vuno-button-danger-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active)";
+            };
+            readonly 'danger--ghost': {
+                readonly base: "border-transparent bg-transparent pe-[15px] text-(--vuno-button-danger-secondary) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active) active:text-(--vuno-text-on-color) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:border-transparent aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)";
+                readonly icon: "static ms-2";
+            };
+            readonly 'danger--primary': {
+                readonly base: "border-transparent bg-(--vuno-button-danger-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active)";
+            };
+            readonly 'danger--tertiary': {
+                readonly base: "border-(--vuno-button-danger-secondary) bg-transparent text-(--vuno-button-danger-secondary) hover:border-(--vuno-button-danger-hover) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) focus:bg-(--vuno-button-danger-primary) focus:text-(--vuno-text-on-color) active:border-(--vuno-button-danger-active) active:bg-(--vuno-button-danger-active) active:text-(--vuno-text-on-color) disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)";
+            };
+            readonly ghost: {
+                readonly base: "border-transparent bg-transparent pe-[15px] text-(--vuno-link-primary) hover:bg-(--vuno-background-hover) hover:text-(--vuno-link-primary-hover) active:bg-(--vuno-background-active) active:text-(--vuno-link-primary-hover) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:border-transparent aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)";
+                readonly icon: "static ms-2 self-center text-(--vuno-icon-primary) group-disabled:text-(--vuno-text-disabled) group-aria-disabled:text-(--vuno-text-disabled)";
+            };
+            readonly primary: {
+                readonly base: "border-transparent bg-(--vuno-button-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-primary-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-primary-active)";
+            };
+            readonly secondary: {
+                readonly base: "border-transparent bg-(--vuno-button-secondary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-secondary-hover) hover:text-(--vuno-text-on-color) focus:text-(--vuno-text-on-color) active:bg-(--vuno-button-secondary-active)";
+            };
+            readonly tertiary: {
+                readonly base: "border-(--vuno-button-tertiary) bg-transparent text-(--vuno-button-tertiary) hover:bg-(--vuno-button-tertiary-hover) hover:text-(--vuno-text-inverse) focus:bg-(--vuno-button-tertiary) focus:text-(--vuno-text-inverse) active:border-transparent active:bg-(--vuno-button-tertiary-active) active:text-(--vuno-text-inverse) disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)";
             };
         };
+        /** Solo lo usa el botón cuadrado `ghost`, que actúa como interruptor. */
+        readonly selected: {
+            readonly false: {};
+            readonly true: {};
+        };
         readonly size: {
             readonly xs: {
-                readonly base: "h-(--vuno-button-size) gap-1 px-2 text-xs [--vuno-button-size:1.5rem]";
-                readonly icon: "size-3.5";
+                readonly base: "min-h-6 py-[2px] pt-[1.5px]";
+                readonly icon: "top-[3px]";
             };
             readonly sm: {
-                readonly base: "h-(--vuno-button-size) gap-1.5 px-2.5 text-sm [--vuno-button-size:1.75rem]";
-                readonly icon: "size-4";
+                readonly base: "min-h-8 py-[6px]";
+                readonly icon: "top-[7px]";
             };
             readonly md: {
-                readonly base: "h-(--vuno-button-size) gap-1.5 px-3 text-sm [--vuno-button-size:2rem]";
-                readonly icon: "size-4";
+                readonly base: "min-h-10 py-[10px]";
+                readonly icon: "top-[11px]";
             };
             readonly lg: {
-                readonly base: "h-(--vuno-button-size) gap-2 px-3.5 text-base [--vuno-button-size:2.25rem]";
-                readonly icon: "size-5";
+                readonly base: "min-h-12 py-[14px]";
+                readonly icon: "top-[15px]";
             };
             readonly xl: {
-                readonly base: "h-(--vuno-button-size) gap-2 px-4 text-base [--vuno-button-size:2.5rem]";
-                readonly icon: "size-5";
-            };
-        };
-        readonly variant: {
-            readonly ghost: {
-                readonly base: "text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
-            };
-            readonly link: {
-                readonly base: "text-(--vuno-accent) hover:underline";
-            };
-            readonly outline: {
-                readonly base: "border border-(--vuno-accent) text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
-            };
-            readonly soft: {
-                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) hover:bg-(--vuno-accent)/20";
+                readonly base: "min-h-16 py-[14px]";
+                readonly icon: "top-[15px]";
             };
-            readonly solid: {
-                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) hover:bg-(--vuno-accent)/90";
+            readonly '2xl': {
+                readonly base: "min-h-20 py-[14px]";
+                readonly icon: "top-[15px]";
             };
         };
     };

package/dist/runtime/app/components/Button/Button.theme.js

@@ -1,59 +1,94 @@
-import { accentByColor, radiusByStep } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const buttonTheme = defineTheme("button", {
-  /**
-   * El botón, y el primer componente propio del que todo lo demás cuelga.
-   *
-   * Las combinaciones no se escriben: la dimensión `color` solo asigna las
-   * variables de acento y la dimensión `variant` las consume, así que siete
-   * colores y cinco variantes son doce entradas en vez de treinta y cinco.
-   * `shape` no depende del tamaño porque un `aspect-square` ya cuadra la
-   * altura que haya puesto `size`.
-   */
-  slots: {
-    base: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:pointer-events-none disabled:opacity-50",
-    icon: "shrink-0",
-    /**
-     * Caja y no texto suelto: el contenido del slot puede ser cualquier
-     * cosa —la muestra de color del campo es un `span` con `size-4`— y
-     * dentro de un envoltorio en línea el ancho y el alto no se aplican.
-     * Con una muestra de 16 px dio 2, que era solo su borde.
+  compoundVariants: [
+    /* Botón cuadrado: el lado es la altura del tamaño y no queda relleno. */
+    { class: { base: "size-6 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "xs" },
+    { class: { base: "size-8 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "sm" },
+    { class: { base: "size-10 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "md" },
+    { class: { base: "size-12 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "lg" },
+    { class: { base: "size-16 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "xl" },
+    { class: { base: "size-20 items-center justify-center p-0 pt-0" }, iconOnly: "true", size: "2xl" },
+    /*
+     * `expressive` cambia la altura de línea a 22 px, así que su relleno
+     * vertical se recalcula con la misma fórmula y el mismo tope de 14 px.
+     */
+    { class: { base: "py-0" }, expressive: "true", size: "xs" },
+    { class: { base: "py-1" }, expressive: "true", size: "sm" },
+    { class: { base: "py-2" }, expressive: "true", size: "md" },
+    { class: { base: "py-3" }, expressive: "true", size: "lg" },
+    { class: { base: "py-[14px]" }, expressive: "true", size: "xl" },
+    { class: { base: "py-[14px]" }, expressive: "true", size: "2xl" },
+    /* Vuno fija un único relleno para el cuadrado expresivo, sin mirar el tamaño. */
+    { class: { base: "px-[13px] py-3" }, expressive: "true", iconOnly: "true" },
+    /*
+     * En el cuadrado el icono vuelve a estar centrado por el contenedor, así
+     * que sobra el margen que `ghost` le pone para separarlo de la etiqueta.
+     */
+    { class: { icon: "ms-0" }, iconOnly: "true", kind: "ghost" },
+    { class: { icon: "ms-0" }, iconOnly: "true", kind: "danger--ghost" },
+    /* Sin fondo propio el anillo interior de fondo no se distingue: Vuno lo quita. */
+    { class: { base: "focus:shadow-[inset_0_0_0_1px_var(--vuno-focus)]" }, iconOnly: "true", kind: "ghost" },
+    /*
+     * `icon-on-color-disabled` es del cuadrado fantasma y de nadie más: con
+     * etiqueta, el icono deshabilitado acompaña al texto en `text-disabled`.
      */
-    label: "inline-flex items-center",
-    /** El giro se dibuja con un borde: un icono más sería otra descarga. */
-    spinner: "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent"
+    { class: { icon: "group-disabled:text-(--vuno-icon-on-color-disabled) group-aria-disabled:text-(--vuno-icon-on-color-disabled)" }, iconOnly: "true", kind: "ghost" },
+    /*
+     * El fondo de seleccionado solo existe en el cuadrado fantasma, que es
+     * el único que Vuno deja funcionar como interruptor; en cualquier otro
+     * `kind` taparía el fondo de la variante.
+     */
+    { class: { base: "bg-(--vuno-background-selected)" }, iconOnly: "true", kind: "ghost", selected: "true" }
+  ],
+  slots: {
+    /** Descripción de la acción destructiva, solo para lectores de pantalla. */
+    assistive: "sr-only",
+    base: "group relative m-0 inline-flex w-max max-w-80 shrink-0 cursor-pointer justify-between border border-transparent ps-[15px] pe-[63px] align-top font-normal text-sm leading-[1.125rem] tracking-normal text-start no-underline outline-none transition-[background-color,border-color,box-shadow,outline-color] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) focus:border-(--vuno-focus) focus:shadow-[inset_0_0_0_1px_var(--vuno-focus),inset_0_0_0_2px_var(--vuno-background)] disabled:cursor-not-allowed disabled:border-(--vuno-button-disabled) disabled:bg-(--vuno-button-disabled) disabled:text-(--vuno-text-on-color-disabled) disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:border-(--vuno-button-disabled) aria-disabled:bg-(--vuno-button-disabled) aria-disabled:text-(--vuno-text-on-color-disabled) aria-disabled:shadow-none motion-reduce:transition-none forced-colors:focus:text-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]",
+    icon: "pointer-events-none absolute end-4 size-4 shrink-0",
+    label: "min-w-0",
+    spinner: "animate-spin rounded-full border-2 border-current border-t-transparent"
   },
   variants: {
-    color: accentByColor("base"),
-    groupOrientation: {
-      horizontal: { base: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-visible:z-1" },
-      vertical: { base: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-visible:z-1" }
+    /** Tipografía y relleno de `body-compact-02`, con icono de 20 px. */
+    expressive: {
+      false: {},
+      true: { base: "text-base leading-[1.375rem] tracking-normal", icon: "size-5" }
     },
-    radius: radiusByStep("base"),
-    /**
-     * Sin etiqueta el botón es cuadrado, y eso sí combina con el
-     * tamaño: por eso `size` publica su altura en una variable y aquí
-     * se consume como ancho. Escribirlo con `aspect-square` parecía
-     * bastar y no basta —un `inline-flex` de ancho automático lo
-     * ensancha el relleno lateral—, y fijar el ancho por valor
-     * devolvería las cinco combinaciones.
-     */
-    shape: {
-      square: { base: "w-(--vuno-button-size) px-0" }
+    iconOnly: {
+      false: {},
+      /* En el cuadrado el icono vuelve al flujo y lo centra el contenedor. */
+      true: { icon: "static" }
     },
-    size: {
-      xs: { base: "h-(--vuno-button-size) gap-1 px-2 text-xs [--vuno-button-size:1.5rem]", icon: "size-3.5" },
-      sm: { base: "h-(--vuno-button-size) gap-1.5 px-2.5 text-sm [--vuno-button-size:1.75rem]", icon: "size-4" },
-      md: { base: "h-(--vuno-button-size) gap-1.5 px-3 text-sm [--vuno-button-size:2rem]", icon: "size-4" },
-      lg: { base: "h-(--vuno-button-size) gap-2 px-3.5 text-base [--vuno-button-size:2.25rem]", icon: "size-5" },
-      xl: { base: "h-(--vuno-button-size) gap-2 px-4 text-base [--vuno-button-size:2.5rem]", icon: "size-5" }
+    kind: {
+      danger: { base: "border-transparent bg-(--vuno-button-danger-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active)" },
+      "danger--ghost": {
+        base: "border-transparent bg-transparent pe-[15px] text-(--vuno-button-danger-secondary) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active) active:text-(--vuno-text-on-color) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:border-transparent aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)",
+        icon: "static ms-2"
+      },
+      /* Vuno lo declara como alias de `danger` y no le da estilos propios. */
+      "danger--primary": { base: "border-transparent bg-(--vuno-button-danger-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-danger-active)" },
+      "danger--tertiary": { base: "border-(--vuno-button-danger-secondary) bg-transparent text-(--vuno-button-danger-secondary) hover:border-(--vuno-button-danger-hover) hover:bg-(--vuno-button-danger-hover) hover:text-(--vuno-text-on-color) focus:bg-(--vuno-button-danger-primary) focus:text-(--vuno-text-on-color) active:border-(--vuno-button-danger-active) active:bg-(--vuno-button-danger-active) active:text-(--vuno-text-on-color) disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)" },
+      ghost: {
+        base: "border-transparent bg-transparent pe-[15px] text-(--vuno-link-primary) hover:bg-(--vuno-background-hover) hover:text-(--vuno-link-primary-hover) active:bg-(--vuno-background-active) active:text-(--vuno-link-primary-hover) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:border-transparent aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)",
+        /* En `ghost` el icono no sigue al texto: Vuno lo mantiene gris sobre la etiqueta azul. */
+        icon: "static ms-2 self-center text-(--vuno-icon-primary) group-disabled:text-(--vuno-text-disabled) group-aria-disabled:text-(--vuno-text-disabled)"
+      },
+      primary: { base: "border-transparent bg-(--vuno-button-primary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-primary-hover) hover:text-(--vuno-text-on-color) active:bg-(--vuno-button-primary-active)" },
+      secondary: { base: "border-transparent bg-(--vuno-button-secondary) text-(--vuno-text-on-color) hover:bg-(--vuno-button-secondary-hover) hover:text-(--vuno-text-on-color) focus:text-(--vuno-text-on-color) active:bg-(--vuno-button-secondary-active)" },
+      tertiary: { base: "border-(--vuno-button-tertiary) bg-transparent text-(--vuno-button-tertiary) hover:bg-(--vuno-button-tertiary-hover) hover:text-(--vuno-text-inverse) focus:bg-(--vuno-button-tertiary) focus:text-(--vuno-text-inverse) active:border-transparent active:bg-(--vuno-button-tertiary-active) active:text-(--vuno-text-inverse) disabled:bg-transparent disabled:text-(--vuno-text-disabled) aria-disabled:bg-transparent aria-disabled:text-(--vuno-text-disabled)" }
     },
-    variant: {
-      ghost: { base: "text-(--vuno-accent) hover:bg-(--vuno-accent)/10" },
-      link: { base: "text-(--vuno-accent) hover:underline" },
-      outline: { base: "border border-(--vuno-accent) text-(--vuno-accent) hover:bg-(--vuno-accent)/10" },
-      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) hover:bg-(--vuno-accent)/20" },
-      solid: { base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) hover:bg-(--vuno-accent)/90" }
+    /** Solo lo usa el botón cuadrado `ghost`, que actúa como interruptor. */
+    selected: {
+      false: {},
+      true: {}
+    },
+    size: {
+      xs: { base: "min-h-6 py-[2px] pt-[1.5px]", icon: "top-[3px]" },
+      sm: { base: "min-h-8 py-[6px]", icon: "top-[7px]" },
+      md: { base: "min-h-10 py-[10px]", icon: "top-[11px]" },
+      lg: { base: "min-h-12 py-[14px]", icon: "top-[15px]" },
+      xl: { base: "min-h-16 py-[14px]", icon: "top-[15px]" },
+      "2xl": { base: "min-h-20 py-[14px]", icon: "top-[15px]" }
     }
   }
 });

package/dist/runtime/app/components/Button/Button.types.d.ts

@@ -0,0 +1,43 @@
+import type { Component } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentUi } from '#vuno/types/slots';
+/** Los ocho `kind` de Vuno. `danger--primary` es el alias histórico de `danger`. */
+export type ButtonKind = 'danger' | 'danger--ghost' | 'danger--primary' | 'danger--tertiary' | 'ghost' | 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = '2xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+export type ButtonProps = {
+    /**
+     * Lo que oye un lector de pantalla antes de la etiqueta en los `kind`
+     * destructivos. Vuno lo expone porque «Eliminar» a secas no dice qué se
+     * elimina ni que la acción es irreversible; el texto viaja por
+     * `aria-describedby` y no se ve.
+     */
+    dangerDescription?: string;
+    disabled?: boolean;
+    /**
+     * Tipografía y relleno de `body-compact-02` con icono de 20 px. Vuno lo
+     * reserva para páginas expresivas, no para producto.
+     */
+    expressive?: boolean;
+    href?: string;
+    icon?: string;
+    /** Nombre accesible obligatorio cuando el botón no tiene texto visible. */
+    iconDescription?: string;
+    kind?: ButtonKind;
+    label?: string;
+    loading?: boolean;
+    /**
+     * Estado activo del botón cuadrado `ghost`, el único que Vuno deja actuar
+     * como interruptor. Se anuncia con `aria-pressed`.
+     */
+    selected?: boolean;
+    size?: ButtonSize;
+    tag?: Component | string;
+    to?: RouteLocationRaw;
+    /**
+     * @deprecated Vuno coloca el icono siempre al final, así que la prop ya no
+     * tiene efecto. Quítala de las llamadas; desaparecerá en la próxima mayor.
+     */
+    trailing?: boolean;
+    type?: 'button' | 'reset' | 'submit';
+    ui?: ComponentUi<'button'>;
+};

package/dist/runtime/app/components/Button/Button.vue

@@ -1,78 +1,124 @@
 <script setup>
-import { computed } from "vue";
-import { useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
+import { computed, defineComponent, h, onMounted, ref, useAttrs, useId } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
-import Icon from "#vuno/components/Icon/Icon.vue";
-defineOptions({ name: "VunoButton" });
+import { filled } from "#vuno/utils/slots";
+import { NuxtLink } from "#components";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Button", inheritAttrs: false });
 const props = defineProps({
-  color: { type: String, required: false, default: "primary" },
+  dangerDescription: { type: String, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
+  expressive: { type: Boolean, required: false },
+  href: { type: String, required: false, default: void 0 },
   icon: { type: String, required: false, default: void 0 },
+  iconDescription: { type: String, required: false, default: void 0 },
+  kind: { type: String, required: false, default: "primary" },
   label: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false },
-  radius: { type: String, required: false, default: void 0 },
-  size: { type: String, required: false, default: void 0 },
+  selected: { type: Boolean, required: false, default: void 0 },
+  size: { type: String, required: false, default: "lg" },
+  tag: { type: null, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
   trailing: { type: Boolean, required: false },
   type: { type: String, required: false, default: "button" },
-  ui: { type: Object, required: false, default: void 0 },
-  variant: { type: String, required: false, default: "solid" }
+  ui: { type: Object, required: false, default: void 0 }
 });
 const slots = defineSlots();
-const hasContent = computed(() => Boolean(props.label) || Boolean(slots.default));
-const controlGroup = useVunoControlGroup();
-const size = computed(() => props.size ?? controlGroup.size.value ?? "md");
-const isDisabled = computed(() => Boolean(props.disabled) || Boolean(props.loading));
+const attrs = useAttrs();
+const assistiveId = useId();
+const root = ref(null);
+const NativeButton = defineComponent({
+  name: "ButtonRoot",
+  inheritAttrs: false,
+  setup(_, { attrs: nativeAttrs, slots: nativeSlots }) {
+    return () => h("button", nativeAttrs, nativeSlots.default?.());
+  }
+});
+const hasContent = computed(() => Boolean(props.label) || filled(slots.default));
+const iconOnly = computed(() => !hasContent.value);
+const disabled = computed(() => Boolean(props.disabled) || Boolean(props.loading));
+const isButton = computed(() => props.tag === "button" || !props.tag && !props.to && !props.href);
+const rootTag = computed(() => props.tag ?? (props.to ? NuxtLink : props.href ? "a" : NativeButton));
+const hasDangerDescription = computed(() => props.kind.startsWith("danger") && Boolean(props.dangerDescription));
+const describedBy = computed(() => [attrs["aria-describedby"], hasDangerDescription.value ? assistiveId : void 0].filter(Boolean).join(" ") || void 0);
+const ariaPressed = computed(() => {
+  if (attrs["aria-pressed"] !== void 0) return attrs["aria-pressed"];
+  if (!iconOnly.value || props.kind !== "ghost" || props.selected === void 0) return void 0;
+  return props.selected ? "true" : "false";
+});
+const rootAttributes = computed(() => {
+  const contract = {
+    ...props.to ? { to: props.to } : props.href ? { href: props.href } : {},
+    "aria-busy": props.loading ? "true" : void 0,
+    "aria-describedby": describedBy.value,
+    "aria-disabled": !isButton.value && disabled.value ? "true" : void 0,
+    "aria-label": iconOnly.value ? props.iconDescription : void 0,
+    "aria-pressed": ariaPressed.value,
+    disabled: isButton.value ? disabled.value : void 0,
+    tabindex: !isButton.value && disabled.value ? -1 : void 0,
+    title: iconOnly.value ? props.iconDescription : void 0,
+    type: isButton.value ? props.type : void 0
+  };
+  for (const [key, value] of Object.entries(contract)) if (value === void 0) delete contract[key];
+  return { ...attrs, ...contract };
+});
 const ui = useTheme(
   "button",
   () => props.ui,
   () => ({
-    color: props.color,
-    groupOrientation: controlGroup.orientation.value,
-    radius: props.radius,
-    shape: hasContent.value ? void 0 : "square",
-    size: size.value,
-    variant: props.variant
+    expressive: props.expressive ? "true" : "false",
+    iconOnly: iconOnly.value ? "true" : "false",
+    kind: props.kind,
+    selected: props.selected ? "true" : "false",
+    size: props.size
   })
 );
+function captureRoot(target) {
+  const element = target?.$el ?? target;
+  root.value = element instanceof HTMLElement ? element : null;
+}
+function blockDisabledLink(event) {
+  if (isButton.value || !disabled.value) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+onMounted(() => {
+  if (!import.meta.env.DEV || hasContent.value || props.iconDescription || attrs["aria-label"] || root.value?.textContent?.trim()) return;
+  console.warn("[Button] Un bot\xF3n solo con icono necesita `icon-description`.");
+});
 </script>
 
 <template>
-    <button
-        :aria-busy="props.loading ? 'true' : void 0"
+    <component
+        :is="rootTag"
+        :ref="captureRoot"
+        v-bind="rootAttributes"
         :class="ui.base"
-        :disabled="isDisabled"
-        :type="props.type"
+        @click.capture="blockDisabledLink"
     >
-        <!--
-            El giro ocupa el sitio del icono en vez de añadirse: si se sumara, el
-            botón cambiaría de ancho al pulsarlo y el puntero acabaría sobre otra
-            cosa.
-        -->
         <span
-            v-if="props.loading"
-            aria-hidden="true"
-            :class="[ui.icon, ui.spinner]"
-        />
-
-        <Icon
-            v-else-if="props.icon && !props.trailing"
-            :class="ui.icon"
-            :name="props.icon"
-        />
-
+            v-if="hasDangerDescription"
+            :id="assistiveId"
+            :class="ui.assistive"
+        >
+            {{ props.dangerDescription }}
+        </span>
         <span
             v-if="hasContent"
             :class="ui.label"
         >
             <slot>{{ props.label }}</slot>
         </span>
-
+        <span
+            v-if="props.loading"
+            aria-hidden="true"
+            :class="[ui.icon, ui.spinner]"
+        />
         <Icon
-            v-if="props.icon && props.trailing && !props.loading"
+            v-else-if="props.icon"
             :class="ui.icon"
             :name="props.icon"
         />
-
         <slot name="trailing" />
-    </button>
+    </component>
 </template>