@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { breadcrumbKey } from "#vuno/components/Breadcrumb/Breadcrumb.context";
+import Link from "#vuno/components/Link/Link.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "BreadcrumbItem" });
+const props = defineProps({
+  ariaCurrent: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  href: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  isCurrentPage: { type: Boolean, required: false, default: false },
+  overflow: { type: Boolean, required: false, default: false },
+  to: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const context = inject(breadcrumbKey, void 0);
+const current = computed(() => props.isCurrentPage ? "page" : props.ariaCurrent);
+const interactive = computed(() => Boolean(props.href ?? props.to));
+const ui = useTheme(
+  "breadcrumb",
+  () => props.ui,
+  () => ({
+    noTrailingSlash: String(context?.noTrailingSlash.value ?? false),
+    size: context?.size.value ?? "md"
+  })
+);
+</script>
+
+<template>
+    <li :class="[ui.item, ui.separator]">
+        <slot v-if="props.overflow" />
+        <Link
+            v-else-if="interactive"
+            :aria-current="current"
+            :disabled="props.disabled"
+            :href="props.href"
+            :to="props.to"
+            :ui="{ base: ui.link }"
+        >
+            <Icon
+                v-if="props.icon"
+                aria-hidden="true"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+            <slot />
+        </Link>
+        <span
+            v-else
+            :aria-current="current"
+            :aria-disabled="props.disabled || void 0"
+            :class="props.isCurrentPage ? ui.current : ui.text"
+        >
+            <Icon
+                v-if="props.icon"
+                aria-hidden="true"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+            <slot />
+        </span>
+    </li>
+</template>

package/dist/runtime/app/components/BreadcrumbItem/BreadcrumbItem.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+declare var __VLS_1: {}, __VLS_14: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    overflow: boolean;
+    to: string;
+    ui: import("../../types/slots.js").ComponentUi<"breadcrumb">;
+    href: string;
+    ariaCurrent: import("./BreadcrumbItem.types.js").BreadcrumbItemCurrent;
+    isCurrentPage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,23 +1,21 @@
-import type { VunoButtonProps } from './Button.types.js';
+import type { ButtonProps } from './Button.types.js';
 type __VLS_Slots = {
-    /** Contenido en lugar de la etiqueta. */
     default?: () => unknown;
-    /** Va después de todo lo demás; la tabla mete ahí su contador. */
     trailing?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<VunoButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoButtonProps> & Readonly<{}>, {
-    color: import("../../types/base.js").VunoColor;
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    tag: import("vue").Component | string;
+    size: import("./Button.types.js").ButtonSize;
+    kind: import("./Button.types.js").ButtonKind;
     icon: string;
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Button.types.js").VunoButtonSize;
-    variant: import("./Button.types.js").VunoButtonVariant;
+    selected: boolean;
     label: string;
-    shape: import("./Button.types.js").VunoButtonShape;
-    tag: import("vue").Component | string;
     type: "button" | "reset" | "submit";
-    ui: import("../../types/slots.js").VunoUi<"button">;
-    href: string;
     to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"button">;
+    dangerDescription: string;
+    href: string;
+    iconDescription: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,101 +1,194 @@
 export declare const buttonTheme: Record<"button", {
+    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: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
-        readonly content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)";
-        readonly emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)";
-        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";
-            };
-            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";
+        /** 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 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 base: {};
-            readonly circle: {
-                readonly base: "w-(--vuno-button-size) rounded-full px-0";
-            };
-            readonly square: {
-                readonly base: "w-(--vuno-button-size) px-0";
+        readonly iconOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly icon: "static";
             };
         };
-        readonly size: {
-            readonly xs: {
-                readonly base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]";
-                readonly icon: "size-3";
+        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 sm: {
-                readonly base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]";
-                readonly icon: "size-3.5";
-            };
-            readonly md: {
-                readonly base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]";
-                readonly icon: "size-4";
+            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 lg: {
-                readonly base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]";
-                readonly icon: "size-5";
+            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 xl: {
-                readonly base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]";
-                readonly icon: "size-5";
+            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 variant: {
-            readonly destructive: {
-                readonly base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover";
+            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 'destructive-subtle': {
-                readonly base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30";
+            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 ghost: {
-                readonly base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong";
+            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 link: {
-                readonly base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline";
+            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)";
             };
-            readonly outline: {
-                readonly base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
+        };
+        /** 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: "min-h-6 py-[2px] pt-[1.5px]";
+                readonly icon: "top-[3px]";
             };
-            readonly primary: {
-                readonly base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover";
+            readonly sm: {
+                readonly base: "min-h-8 py-[6px]";
+                readonly icon: "top-[7px]";
             };
-            readonly secondary: {
-                readonly base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
+            readonly md: {
+                readonly base: "min-h-10 py-[10px]";
+                readonly icon: "top-[11px]";
             };
-            readonly soft: {
-                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20";
+            readonly lg: {
+                readonly base: "min-h-12 py-[14px]";
+                readonly icon: "top-[15px]";
             };
-            readonly solid: {
-                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]";
+            readonly xl: {
+                readonly base: "min-h-16 py-[14px]";
+                readonly icon: "top-[15px]";
             };
-        };
-        readonly variantAccent: {
-            readonly on: {
-                readonly base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)";
+            readonly '2xl': {
+                readonly base: "min-h-20 py-[14px]";
+                readonly icon: "top-[15px]";
             };
         };
     };

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

@@ -1,67 +1,94 @@
-import { accentByColor, radiusByStep } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const buttonTheme = defineTheme("button", {
-  slots: {
-    base: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
-    content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)",
-    emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)",
-    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: {
-      base: {},
-      circle: { base: "w-(--vuno-button-size) rounded-full px-0" },
-      square: { base: "w-(--vuno-button-size) px-0" }
-    },
-    size: {
-      xs: { base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]", icon: "size-3" },
-      sm: { base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]", icon: "size-3.5" },
-      md: { base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]", icon: "size-4" },
-      lg: { base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]", icon: "size-5" },
-      xl: { base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]", icon: "size-5" }
+    iconOnly: {
+      false: {},
+      /* En el cuadrado el icono vuelve al flujo y lo centra el contenedor. */
+      true: { icon: "static" }
     },
-    variant: {
-      destructive: {
-        base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover"
+    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"
       },
-      "destructive-subtle": { base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30" },
-      ghost: { base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong" },
-      link: { base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline" },
-      outline: { base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
-      primary: {
-        base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover"
+      /* 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)"
       },
-      secondary: { base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
-      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20" },
-      solid: {
-        base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]"
-      }
+      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)" }
     },
-    variantAccent: {
-      on: { base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)" }
+    /** 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

@@ -1,24 +1,43 @@
 import type { Component } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-export type VunoButtonShape = 'base' | 'circle' | 'square';
-export type VunoButtonSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
-export type VunoButtonVariant = 'destructive' | 'destructive-subtle' | 'ghost' | 'link' | 'outline' | 'primary' | 'secondary' | 'soft' | 'solid';
-export type VunoButtonProps = {
-    color?: VunoColor;
+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;
-    radius?: VunoRadius;
-    shape?: VunoButtonShape;
-    size?: VunoButtonSize;
+    /**
+     * 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?: VunoUi<'button'>;
-    variant?: VunoButtonVariant;
+    ui?: ComponentUi<'button'>;
 };