@groupteknology/vuno 1.0.1 → 2.0.0

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

@@ -0,0 +1,59 @@
+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.
+     */
+    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"
+  },
+  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" }
+    },
+    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" }
+    },
+    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" }
+    },
+    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" }
+    }
+  }
+});

package/dist/runtime/app/components/{actions → Button}/Button.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { computed } from "vue";
+import { useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
 import { useTheme } from "#vuno/composables/useTheme";
-import Icon from "#vuno/components/actions/Icon.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoButton" });
 const props = defineProps({
   color: { type: String, required: false, default: "primary" },
   disabled: { type: Boolean, required: false },
   icon: { type: String, required: false, default: void 0 },
   label: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false },
-  size: { type: String, required: false, default: "md" },
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, 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 },
@@ -16,14 +19,18 @@ const props = defineProps({
 });
 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 ui = useTheme(
   "button",
   () => props.ui,
   () => ({
     color: props.color,
+    groupOrientation: controlGroup.orientation.value,
+    radius: props.radius,
     shape: hasContent.value ? void 0 : "square",
-    size: props.size,
+    size: size.value,
     variant: props.variant
   })
 );

package/dist/runtime/app/components/{actions → Button}/Button.vue.d.ts

@@ -1,6 +1,7 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     disabled?: boolean;
     /** Nombre Iconify, como los de `useIcons`. */
@@ -8,6 +9,8 @@ type __VLS_Props = {
     label?: string;
     /** Bloquea el botón y sustituye el icono por un giro. */
     loading?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
     /** El icono va detrás de la etiqueta en vez de delante. */
     trailing?: boolean;
@@ -17,7 +20,7 @@ type __VLS_Props = {
      * convierte cualquier acción secundaria en un envío accidental.
      */
     type?: 'button' | 'reset' | 'submit';
-    ui?: VunoSlots;
+    ui?: VunoUi<'button'>;
     variant?: VunoButtonVariant;
 };
 type __VLS_Slots = {
@@ -26,14 +29,15 @@ type __VLS_Slots = {
     /** Va después de todo lo demás; la tabla mete ahí su contador. */
     trailing?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     color: VunoColor;
     icon: string;
-    type: "button" | "reset" | "submit";
+    radius: VunoRadius;
     size: VunoSize;
     variant: VunoButtonVariant;
     label: string;
-    ui: VunoSlots;
+    type: "button" | "reset" | "submit";
+    ui: VunoUi<"button">;
 }, {}, {}, {}, 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/{structure → Card}/Card.d.vue.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'vue';
-import type { VunoSlots } from '#vuno/types/base';
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * Una caja que agrupa contenido, con cabecera y pie opcionales.
  *
@@ -14,7 +15,9 @@ import type { VunoSlots } from '#vuno/types/base';
  * lector de pantalla. Si hace falta navegar, se envuelve en un `NuxtLink` o
  * se pone un botón dentro, que es lo que hace el playground.
  */
-type __VLS_Props = {
+type Props = {
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     /**
      * El elemento que pinta. `div` de serie; `form` para una tarjeta que
      * se envía, `NuxtLink` para una que navega, `article` o `section`
@@ -45,7 +48,7 @@ type __VLS_Props = {
      * tarjeta enlazada.
      */
     tag?: Component | string;
-    ui?: VunoSlots;
+    ui?: VunoUi<'card'>;
     /**
      * `outline` para una tarjeta sobre la página: borde y un escalón de
      * elevación. `soft` para una que ya está dentro de algo levantado —un
@@ -75,10 +78,11 @@ type __VLS_Slots = {
     footer?: () => unknown;
     header?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    radius: VunoRadius;
     variant: "outline" | "plain" | "soft";
-    ui: VunoSlots;
     tag: Component | string;
+    ui: VunoUi<"card">;
 }, {}, {}, {}, 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/Card/Card.theme.d.ts

@@ -0,0 +1,57 @@
+export declare const cardTheme: Record<"card", {
+    /**
+     * La tarjeta. Tres regiones apiladas y separadas por una línea, que es la
+     * forma que tenía el caso real escrito a mano antes de que existiera.
+     *
+     * El relleno va en cada región y no en la raíz: con él en la raíz, la línea
+     * divisoria no llegaría a los bordes y quedaría flotando en medio.
+     *
+     * **La raíz lleva anillo de foco desde que existe `tag`.** Con `tag` la
+     * tarjeta puede **ser** un enlace o un botón, y entonces recibe el foco.
+     *
+     * Y aquí hay que decir qué pasaba de verdad, porque lo primero que se
+     * escribió en este mismo comentario era falso y lo desmintió la medición.
+     * **No se quedaba sin contorno**: quitando las tres clases con el elemento
+     * enfocado, el contorno calculado sigue siendo `1px auto` —el del navegador,
+     * que el preflight de Tailwind no neutraliza— y con las clases pasa a `2px
+     * solid` del acento, con 2px de separación. O sea que el defecto no era una
+     * tarjeta invisible al tabular, sino **la única superficie enfocable de vuno
+     * que no llevaba el anillo del sistema**: grosor, color y separación
+     * distintos de los del botón, el campo y el enlace de la miga, y a merced de
+     * lo que pinte cada navegador. Que ya lo era se ve en que el ejemplo de la
+     * ficha llevaba el anillo escrito a mano sobre el enlace que la envolvía.
+     *
+     * Va **siempre puesto y sin variante que lo encienda**, que es lo contrario
+     * de lo que pide el reflejo. El motivo es que la condición ya la impone
+     * `:focus-visible`: un elemento que no puede recibir el foco no la cumple
+     * nunca, así que sobre un `div` las tres clases no pintan nada —medido: con
+     * `tag` por defecto la tarjeta ni siquiera es parada del tabulador—. Una
+     * variante sería una segunda copia, más débil, de una condición que el CSS
+     * ya garantiza, y además tendría que **adivinar** si un `tag` cualquiera es
+     * enfocable; se equivocaría justo en el caso peligroso, el de un `div` con
+     * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
+     * el foco.
+     *
+     * El acento se declara aquí, como en `breadcrumbLink` y en la pestaña: la
+     * tarjeta no tiene variantes de color de las que sacarlo, y sin declararlo
+     * `outline-(--vuno-accent)` se quedaría con lo que hubiera heredado.
+     */
+    readonly slots: {
+        readonly body: "p-4 text-vuno-body";
+        readonly footer: "p-4";
+        readonly header: "p-4 font-semibold text-vuno-strong";
+        readonly root: "flex w-full flex-col divide-y divide-vuno-border rounded-sm [--vuno-accent:var(--color-vuno-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
+    };
+    readonly variants: {
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+        readonly variant: {
+            readonly outline: {
+                readonly root: "border border-vuno-border bg-vuno-surface-1";
+            };
+            readonly plain: {};
+            readonly soft: {
+                readonly root: "bg-vuno-surface-2";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,62 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const cardTheme = defineTheme("card", {
+  /**
+   * La tarjeta. Tres regiones apiladas y separadas por una línea, que es la
+   * forma que tenía el caso real escrito a mano antes de que existiera.
+   *
+   * El relleno va en cada región y no en la raíz: con él en la raíz, la línea
+   * divisoria no llegaría a los bordes y quedaría flotando en medio.
+   *
+   * **La raíz lleva anillo de foco desde que existe `tag`.** Con `tag` la
+   * tarjeta puede **ser** un enlace o un botón, y entonces recibe el foco.
+   *
+   * Y aquí hay que decir qué pasaba de verdad, porque lo primero que se
+   * escribió en este mismo comentario era falso y lo desmintió la medición.
+   * **No se quedaba sin contorno**: quitando las tres clases con el elemento
+   * enfocado, el contorno calculado sigue siendo `1px auto` —el del navegador,
+   * que el preflight de Tailwind no neutraliza— y con las clases pasa a `2px
+   * solid` del acento, con 2px de separación. O sea que el defecto no era una
+   * tarjeta invisible al tabular, sino **la única superficie enfocable de vuno
+   * que no llevaba el anillo del sistema**: grosor, color y separación
+   * distintos de los del botón, el campo y el enlace de la miga, y a merced de
+   * lo que pinte cada navegador. Que ya lo era se ve en que el ejemplo de la
+   * ficha llevaba el anillo escrito a mano sobre el enlace que la envolvía.
+   *
+   * Va **siempre puesto y sin variante que lo encienda**, que es lo contrario
+   * de lo que pide el reflejo. El motivo es que la condición ya la impone
+   * `:focus-visible`: un elemento que no puede recibir el foco no la cumple
+   * nunca, así que sobre un `div` las tres clases no pintan nada —medido: con
+   * `tag` por defecto la tarjeta ni siquiera es parada del tabulador—. Una
+   * variante sería una segunda copia, más débil, de una condición que el CSS
+   * ya garantiza, y además tendría que **adivinar** si un `tag` cualquiera es
+   * enfocable; se equivocaría justo en el caso peligroso, el de un `div` con
+   * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
+   * el foco.
+   *
+   * El acento se declara aquí, como en `breadcrumbLink` y en la pestaña: la
+   * tarjeta no tiene variantes de color de las que sacarlo, y sin declararlo
+   * `outline-(--vuno-accent)` se quedaría con lo que hubiera heredado.
+   */
+  slots: {
+    body: "p-4 text-vuno-body",
+    footer: "p-4",
+    header: "p-4 font-semibold text-vuno-strong",
+    root: "flex w-full flex-col divide-y divide-vuno-border rounded-sm [--vuno-accent:var(--color-vuno-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)"
+  },
+  variants: {
+    radius: radiusByStep("root"),
+    /*
+     * `outline` sube un escalón sobre la página y se cierra con un borde.
+     * `soft` sube dos y no lleva borde, porque va dentro de algo que ya
+     * está levantado y ahí otro borde no separa nada: lo que distingue es
+     * la elevación.
+     */
+    variant: {
+      outline: { root: "border border-vuno-border bg-vuno-surface-1" },
+      /* Sin contenedor: el marco lo pone quien la envuelve. */
+      plain: {},
+      soft: { root: "bg-vuno-surface-2" }
+    }
+  }
+});

package/dist/runtime/app/components/{structure → Card}/Card.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { useTheme } from "#vuno/composables/useTheme";
 import { filled } from "#vuno/internal/slots";
+defineOptions({ name: "VunoCard" });
 const props = defineProps({
+  radius: { type: String, required: false, default: void 0 },
   tag: { type: null, required: false, default: "div" },
   ui: { type: Object, required: false, default: void 0 },
   variant: { type: String, required: false, default: "outline" }
@@ -10,7 +12,7 @@ const slots = defineSlots();
 const ui = useTheme(
   "card",
   () => props.ui,
-  () => ({ variant: props.variant })
+  () => ({ radius: props.radius, variant: props.variant })
 );
 </script>
 

package/dist/runtime/app/components/{structure → Card}/Card.vue.d.ts

@@ -1,5 +1,6 @@
 import type { Component } from 'vue';
-import type { VunoSlots } from '#vuno/types/base';
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * Una caja que agrupa contenido, con cabecera y pie opcionales.
  *
@@ -14,7 +15,9 @@ import type { VunoSlots } from '#vuno/types/base';
  * lector de pantalla. Si hace falta navegar, se envuelve en un `NuxtLink` o
  * se pone un botón dentro, que es lo que hace el playground.
  */
-type __VLS_Props = {
+type Props = {
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     /**
      * El elemento que pinta. `div` de serie; `form` para una tarjeta que
      * se envía, `NuxtLink` para una que navega, `article` o `section`
@@ -45,7 +48,7 @@ type __VLS_Props = {
      * tarjeta enlazada.
      */
     tag?: Component | string;
-    ui?: VunoSlots;
+    ui?: VunoUi<'card'>;
     /**
      * `outline` para una tarjeta sobre la página: borde y un escalón de
      * elevación. `soft` para una que ya está dentro de algo levantado —un
@@ -75,10 +78,11 @@ type __VLS_Slots = {
     footer?: () => unknown;
     header?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    radius: VunoRadius;
     variant: "outline" | "plain" | "soft";
-    ui: VunoSlots;
     tag: Component | string;
+    ui: VunoUi<"card">;
 }, {}, {}, {}, 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/Code/Code.d.vue.ts

@@ -0,0 +1,19 @@
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Código sin transformar. También es lo que se copia al portapapeles. */
+    code: string;
+    /** HTML completo producido por un resaltador de confianza, como Shiki. */
+    highlighted?: string;
+    /** Nombre accesible cuando el bloque necesita desplazamiento horizontal. */
+    label?: string;
+    language?: string;
+    ui?: VunoUi<'code'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    ui: VunoUi<"code">;
+    highlighted: string;
+    language: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+export declare const codeTheme: Record<"code", {
+    readonly slots: {
+        readonly copy: "absolute inset-e-2 top-1 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 max-sm:top-0 max-sm:size-11 max-sm:opacity-100 pointer-coarse:top-0 pointer-coarse:size-11 pointer-coarse:opacity-100";
+        readonly copyError: "border-t border-vuno-error/25 bg-vuno-error/10 px-4 py-2 text-xs text-vuno-error";
+        readonly fallback: "text-vuno-body";
+        readonly header: "flex items-center gap-2 border-b border-vuno-border/70 px-4 py-2 font-mono text-xs text-vuno-muted";
+        readonly live: "sr-only";
+        readonly root: "group relative border-t border-vuno-border";
+        readonly scroller: "overflow-x-auto text-sm/relaxed [&_pre]:px-4 [&_pre]:py-3.5";
+    };
+}>;

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

@@ -0,0 +1,12 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const codeTheme = defineTheme("code", {
+  slots: {
+    copy: "absolute inset-e-2 top-1 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 max-sm:top-0 max-sm:size-11 max-sm:opacity-100 pointer-coarse:top-0 pointer-coarse:size-11 pointer-coarse:opacity-100",
+    copyError: "border-t border-vuno-error/25 bg-vuno-error/10 px-4 py-2 text-xs text-vuno-error",
+    fallback: "text-vuno-body",
+    header: "flex items-center gap-2 border-b border-vuno-border/70 px-4 py-2 font-mono text-xs text-vuno-muted",
+    live: "sr-only",
+    root: "group relative border-t border-vuno-border",
+    scroller: "overflow-x-auto text-sm/relaxed [&_pre]:px-4 [&_pre]:py-3.5"
+  }
+});

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+defineOptions({ name: "VunoCode" });
+const props = defineProps({
+  code: { type: String, required: true },
+  highlighted: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  language: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("code", () => props.ui);
+const copied = ref(false);
+const copyFailed = ref(false);
+const overflows = ref(false);
+const scroller = useTemplateRef("scroller");
+const copyLabel = computed(() => {
+  const action = copied.value ? messages.value.codeCopied : messages.value.codeCopy;
+  return props.label ? `${action}: ${props.label}` : action;
+});
+let observer;
+let timer;
+function syncOverflow() {
+  const element = scroller.value;
+  overflows.value = !!element && element.scrollWidth > element.clientWidth + 1;
+}
+async function copy() {
+  copyFailed.value = false;
+  try {
+    await navigator.clipboard.writeText(props.code);
+  } catch {
+    copied.value = false;
+    copyFailed.value = true;
+    clearTimeout(timer);
+    return;
+  }
+  copied.value = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => copied.value = false, 2e3);
+}
+watch(
+  () => [props.code, props.highlighted],
+  () => void nextTick(syncOverflow)
+);
+onMounted(() => {
+  syncOverflow();
+  observer = new ResizeObserver(syncOverflow);
+  if (scroller.value) observer.observe(scroller.value);
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  clearTimeout(timer);
+});
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.header">{{ props.language }}</div>
+
+        <Button
+            :aria-label="copyLabel"
+            :class="ui.copy"
+            color="neutral"
+            :icon="copied ? icons.codeCopied : icons.codeCopy"
+            size="xs"
+            variant="soft"
+            @click="copy"
+        />
+
+        <div
+            ref="scroller"
+            :aria-label="overflows ? props.label ?? messages.codeRegion : void 0"
+            :class="ui.scroller"
+            :role="overflows ? 'region' : void 0"
+            :tabindex="overflows ? 0 : void 0"
+        >
+            <!-- El HTML viene de un resaltador elegido por quien consume el componente. -->
+            <!-- eslint-disable vue/no-v-html -->
+            <!-- nosemgrep: javascript.vue.security.audit.xss.templates.avoid-v-html.avoid-v-html -->
+            <div
+                v-if="props.highlighted"
+                v-html="props.highlighted"
+            />
+            <!-- eslint-enable vue/no-v-html -->
+
+            <pre
+                v-else
+                :class="ui.fallback"
+            ><code>{{ props.code }}</code></pre>
+        </div>
+
+        <p
+            v-if="copyFailed"
+            :class="ui.copyError"
+            role="alert"
+        >
+            {{ messages.codeCopyFailed }}
+        </p>
+
+        <span
+            aria-live="polite"
+            :class="ui.live"
+            >{{ copied ? messages.codeCopiedAnnouncement : "" }}</span
+        >
+    </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Código sin transformar. También es lo que se copia al portapapeles. */
+    code: string;
+    /** HTML completo producido por un resaltador de confianza, como Shiki. */
+    highlighted?: string;
+    /** Nombre accesible cuando el bloque necesita desplazamiento horizontal. */
+    label?: string;
+    language?: string;
+    ui?: VunoUi<'code'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    ui: VunoUi<"code">;
+    highlighted: string;
+    language: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.d.vue.ts

@@ -1,8 +1,8 @@
 import type { VunoConfirmOptions } from '#vuno/types/confirm';
-import type { VunoSlots } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 type __VLS_Props = VunoConfirmOptions & {
     loading?: boolean;
-    ui?: VunoSlots;
+    ui?: VunoUi<'confirm'>;
 };
 type __VLS_Slots = {
     /**

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

@@ -0,0 +1,12 @@
+export declare const confirmTheme: Record<"confirm", {
+    readonly slots: {
+        readonly body: "flex items-start gap-3";
+        readonly content: "";
+        readonly description: "min-w-0 space-y-1";
+        readonly footer: "justify-end";
+        readonly icon: "size-5 shrink-0 text-(--vuno-accent)";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"icon", string>>;
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const confirmTheme = defineTheme("confirm", {
+  slots: {
+    body: "flex items-start gap-3",
+    content: "",
+    description: "min-w-0 space-y-1",
+    footer: "justify-end",
+    // Mismo caso que el aviso: el color por variable, no por nombre.
+    icon: "size-5 shrink-0 text-(--vuno-accent)"
+  },
+  variants: { color: accentByColor("icon") }
+});

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, nextTick } from "vue";
-import Modal from "#vuno/components/overlays/Modal.vue";
-import Button from "#vuno/components/actions/Button.vue";
-import Icon from "#vuno/components/actions/Icon.vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import Modal from "#vuno/components/Modal/Modal.vue";
+defineOptions({ name: "VunoConfirm" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
   alert: { type: Boolean, required: false },
   cancelLabel: { type: String, required: false },
@@ -17,11 +19,14 @@ const props = defineProps({
 });
 const emit = defineEmits(["cancel", "confirm"]);
 defineSlots();
-const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const icons = useIcons();
 const messages = useMessages();
 const color = computed(() => props.color ?? "error");
-const ui = useTheme("confirm", () => props.ui, () => ({ color: color.value }));
+const ui = useTheme(
+  "confirm",
+  () => props.ui,
+  () => ({ color: color.value })
+);
 const modalUi = computed(() => ({ content: ui.value.content, footer: ui.value.footer }));
 function onCancel() {
   open.value = false;

package/dist/runtime/app/components/{overlays → Confirm}/Confirm.vue.d.ts

@@ -1,8 +1,8 @@
 import type { VunoConfirmOptions } from '#vuno/types/confirm';
-import type { VunoSlots } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 type __VLS_Props = VunoConfirmOptions & {
     loading?: boolean;
-    ui?: VunoSlots;
+    ui?: VunoUi<'confirm'>;
 };
 type __VLS_Slots = {
     /**