@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,121 @@
+export declare const progressIndicatorTheme: Record<"progressIndicator", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly icon: "text-(--vuno-support-error)";
+        };
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly icon: "text-(--vuno-icon-disabled)";
+            readonly label: "text-(--vuno-text-disabled) shadow-none";
+        };
+        readonly disabled: "true";
+    }];
+    readonly slots: {
+        /** El estado del paso se anuncia con texto, no solo con la forma del icono. */
+        readonly assistive: "sr-only";
+        /**
+         * `group` existe para la etiqueta: Vuno dibuja el foco alrededor del
+         * rótulo y no del control, y eso solo se puede escribir desde el hijo.
+         */
+        readonly control: "group m-0 flex w-full cursor-default border-0 bg-transparent p-0 text-start outline-none";
+        readonly icon: "relative z-[1] mt-2.5 me-2 size-4 shrink-0 rounded-full text-(--vuno-interactive)";
+        readonly label: string;
+        readonly line: "absolute start-0 top-0 h-0.5 w-32 border border-transparent";
+        readonly root: "m-0 flex list-none p-0";
+        readonly secondary: "absolute start-0 mt-7 ms-6 block text-start text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)";
+        readonly step: "relative m-0 inline-flex w-32 min-w-28 flex-row overflow-visible p-0";
+        readonly text: "flex flex-col";
+    };
+    readonly variants: {
+        /**
+         * Un paso accionable es el que Vuno deja sin `--unclickable`: el
+         * indicador es interactivo, el paso no está deshabilitado y no es el
+         * paso actual. Solo ese responde al puntero, y por eso el subrayado de
+         * enlace vive aquí y no en la etiqueta base.
+         */
+        readonly clickable: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "cursor-pointer";
+                readonly label: "hover:cursor-pointer hover:text-(--vuno-link-primary-hover) hover:shadow-[0_1px_var(--vuno-link-primary-hover)] active:text-(--vuno-text-primary) active:shadow-[0_1px_0_0_var(--vuno-text-primary)]";
+            };
+        };
+        /**
+         * Vuno retira el puntero del paso completo, no solo del control: así ni
+         * la línea ni la etiqueta reaccionan. El color del icono y del rótulo
+         * llega desde `compoundVariants`, que gana al estado.
+         */
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "pointer-events-none cursor-not-allowed";
+                readonly step: "cursor-not-allowed";
+            };
+        };
+        /**
+         * Dimensión sin clases propias a propósito: el error solo cambia el
+         * color del icono y tiene que hacerlo **después** del estado, así que su
+         * única declaración está en `compoundVariants`. Sigue siendo una
+         * variante porque es lo que permite componer esa combinación y
+         * sobreescribirla desde el tema del proyecto.
+         */
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {};
+        };
+        /**
+         * Reparto a partes iguales: el paso crece, la línea deja de medir 128 px
+         * fijos y la etiqueta pierde su ancho máximo de 88 px. El recorte pasa
+         * entonces al contenedor del texto, que necesita `min-w-0` para poder
+         * encogerse por debajo de su contenido; los 2 px de relleno con margen
+         * negativo son los de Vuno y evitan que `overflow: hidden` corte el
+         * foco del rótulo.
+         */
+        readonly spaceEqually: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "me-3 max-w-full";
+                readonly line: "w-full min-w-32";
+                readonly step: "grow min-w-32";
+                readonly text: "-m-0.5 min-w-0 overflow-hidden p-0.5";
+            };
+        };
+        /**
+         * El estado gobierna la línea y el icono. `complete` y `current`
+         * comparten el azul interactivo y se distinguen por la forma del icono
+         * —marca de verificación frente a círculo medio lleno—; `incomplete` baja
+         * el icono a `icon-primary` y la línea a `border-subtle`.
+         */
+        readonly state: {
+            readonly complete: {
+                readonly line: "bg-(--vuno-border-interactive)";
+            };
+            readonly current: {
+                readonly line: "bg-(--vuno-border-interactive)";
+            };
+            readonly incomplete: {
+                readonly icon: "text-(--vuno-icon-primary)";
+                readonly line: "bg-(--vuno-border-subtle-00)";
+            };
+        };
+        /**
+         * En vertical el paso deja de medir un ancho fijo y pasa a medir un alto
+         * mínimo, la etiqueta puede envolver hasta 160 px y la etiqueta
+         * secundaria vuelve al flujo, debajo del rótulo y empujada por `mb-auto`
+         * contra el paso siguiente.
+         */
+        readonly vertical: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "min-h-[3.625rem] w-auto min-w-0 content-start";
+                readonly icon: "mt-px inline-block ms-2 me-2";
+                readonly label: "m-0 inline-block w-auto max-w-40 align-top whitespace-normal";
+                readonly line: "h-full w-px";
+                readonly root: "flex-col";
+                readonly secondary: "static m-0 mb-auto w-full";
+                readonly step: "min-h-[3.625rem] w-auto min-w-0 content-start";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,107 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const progressIndicatorTheme = defineTheme("progressIndicator", {
+  compoundVariants: [
+    /* Vuno pinta `.vuno--progress__warning` sobre cualquier posición del paso. */
+    {
+      class: { icon: "text-(--vuno-support-error)" },
+      invalid: "true"
+    },
+    /* Deshabilitado gana a todo, el error incluido. */
+    {
+      class: { icon: "text-(--vuno-icon-disabled)", label: "text-(--vuno-text-disabled) shadow-none" },
+      disabled: "true"
+    }
+  ],
+  slots: {
+    /** El estado del paso se anuncia con texto, no solo con la forma del icono. */
+    assistive: "sr-only",
+    /**
+     * `group` existe para la etiqueta: Vuno dibuja el foco alrededor del
+     * rótulo y no del control, y eso solo se puede escribir desde el hijo.
+     */
+    control: "group m-0 flex w-full cursor-default border-0 bg-transparent p-0 text-start outline-none",
+    icon: "relative z-[1] mt-2.5 me-2 size-4 shrink-0 rounded-full text-(--vuno-interactive)",
+    label: "mt-2 block max-w-22 overflow-hidden text-sm leading-[1.45] font-normal tracking-[0.16px] text-ellipsis whitespace-nowrap text-(--vuno-text-primary) transition-[box-shadow,color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none before:block before:content-[''] group-focus-visible:text-(--vuno-focus) group-focus-visible:outline-solid group-focus-visible:outline-1 group-focus-visible:outline-(--vuno-focus)",
+    line: "absolute start-0 top-0 h-0.5 w-32 border border-transparent",
+    root: "m-0 flex list-none p-0",
+    secondary: "absolute start-0 mt-7 ms-6 block text-start text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)",
+    step: "relative m-0 inline-flex w-32 min-w-28 flex-row overflow-visible p-0",
+    text: "flex flex-col"
+  },
+  variants: {
+    /**
+     * Un paso accionable es el que Vuno deja sin `--unclickable`: el
+     * indicador es interactivo, el paso no está deshabilitado y no es el
+     * paso actual. Solo ese responde al puntero, y por eso el subrayado de
+     * enlace vive aquí y no en la etiqueta base.
+     */
+    clickable: {
+      false: {},
+      true: {
+        control: "cursor-pointer",
+        label: "hover:cursor-pointer hover:text-(--vuno-link-primary-hover) hover:shadow-[0_1px_var(--vuno-link-primary-hover)] active:text-(--vuno-text-primary) active:shadow-[0_1px_0_0_var(--vuno-text-primary)]"
+      }
+    },
+    /**
+     * Vuno retira el puntero del paso completo, no solo del control: así ni
+     * la línea ni la etiqueta reaccionan. El color del icono y del rótulo
+     * llega desde `compoundVariants`, que gana al estado.
+     */
+    disabled: {
+      false: {},
+      true: { control: "pointer-events-none cursor-not-allowed", step: "cursor-not-allowed" }
+    },
+    /**
+     * Dimensión sin clases propias a propósito: el error solo cambia el
+     * color del icono y tiene que hacerlo **después** del estado, así que su
+     * única declaración está en `compoundVariants`. Sigue siendo una
+     * variante porque es lo que permite componer esa combinación y
+     * sobreescribirla desde el tema del proyecto.
+     */
+    invalid: {
+      false: {},
+      true: {}
+    },
+    /**
+     * Reparto a partes iguales: el paso crece, la línea deja de medir 128 px
+     * fijos y la etiqueta pierde su ancho máximo de 88 px. El recorte pasa
+     * entonces al contenedor del texto, que necesita `min-w-0` para poder
+     * encogerse por debajo de su contenido; los 2 px de relleno con margen
+     * negativo son los de Vuno y evitan que `overflow: hidden` corte el
+     * foco del rótulo.
+     */
+    spaceEqually: {
+      false: {},
+      true: { label: "me-3 max-w-full", line: "w-full min-w-32", step: "grow min-w-32", text: "-m-0.5 min-w-0 overflow-hidden p-0.5" }
+    },
+    /**
+     * El estado gobierna la línea y el icono. `complete` y `current`
+     * comparten el azul interactivo y se distinguen por la forma del icono
+     * —marca de verificación frente a círculo medio lleno—; `incomplete` baja
+     * el icono a `icon-primary` y la línea a `border-subtle`.
+     */
+    state: {
+      complete: { line: "bg-(--vuno-border-interactive)" },
+      current: { line: "bg-(--vuno-border-interactive)" },
+      incomplete: { icon: "text-(--vuno-icon-primary)", line: "bg-(--vuno-border-subtle-00)" }
+    },
+    /**
+     * En vertical el paso deja de medir un ancho fijo y pasa a medir un alto
+     * mínimo, la etiqueta puede envolver hasta 160 px y la etiqueta
+     * secundaria vuelve al flujo, debajo del rótulo y empujada por `mb-auto`
+     * contra el paso siguiente.
+     */
+    vertical: {
+      false: {},
+      true: {
+        control: "min-h-[3.625rem] w-auto min-w-0 content-start",
+        icon: "mt-px inline-block ms-2 me-2",
+        label: "m-0 inline-block w-auto max-w-40 align-top whitespace-normal",
+        line: "h-full w-px",
+        root: "flex-col",
+        secondary: "static m-0 mb-auto w-full",
+        step: "min-h-[3.625rem] w-auto min-w-0 content-start"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,25 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ProgressIndicatorProps = {
+    /**
+     * Nombre de la lista de pasos. Vuno no lo expone y deja el `<ul>` sin
+     * nombre; aquí se conserva porque una lista de progreso sin nombre se
+     * anuncia como «lista de cinco elementos» y no dice de qué proceso informa.
+     */
+    ariaLabel?: string;
+    /**
+     * Convierte cada paso en un botón que lleva al paso elegido. Es la forma
+     * declarativa de lo que Vuno decide mirando si recibió `onChange`: allí el
+     * indicador es interactivo **porque** hay escucha, algo que en Vue no se
+     * puede leer de forma estable —`vnode.props` se reemplaza en cada render del
+     * padre— ni durante el render en servidor.
+     */
+    interactive?: boolean;
+    /**
+     * Reparte el ancho sobrante entre los pasos en vez de dejarlos en sus 128 px
+     * fijos. El sistema de origen lo ignora cuando el indicador es vertical y aquí
+     * también.
+     */
+    spaceEqually?: boolean;
+    ui?: ComponentUi<'progressIndicator'>;
+    vertical?: boolean;
+};

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

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, provide, ref } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { progressIndicatorKey } from "./ProgressIndicator.context";
+defineOptions({ name: "ProgressIndicator" });
+const currentIndex = defineModel("currentIndex", { type: Number, ...{ default: 0 } });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: "Progreso" },
+  interactive: { type: Boolean, required: false, default: false },
+  spaceEqually: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  vertical: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["change"]);
+const count = ref(0);
+const spaceEqually = computed(() => props.spaceEqually && !props.vertical);
+const ui = useTheme(
+  "progressIndicator",
+  () => props.ui,
+  () => ({ spaceEqually: spaceEqually.value ? "true" : "false", vertical: props.vertical ? "true" : "false" })
+);
+provide(progressIndicatorKey, {
+  currentIndex: computed(() => currentIndex.value),
+  interactive: computed(() => props.interactive),
+  spaceEqually,
+  vertical: computed(() => props.vertical),
+  register: () => count.value++,
+  select: (index) => {
+    currentIndex.value = index;
+    emit("change", index);
+  }
+});
+function onKeydown(event) {
+  const previous = props.vertical ? "ArrowUp" : "ArrowLeft";
+  const next = props.vertical ? "ArrowDown" : "ArrowRight";
+  if (!["End", "Home", next, previous].includes(event.key)) return;
+  const steps = [...event.currentTarget.querySelectorAll("[data-progress-step]:not(:disabled)")];
+  if (steps.length === 0) return;
+  const current = steps.indexOf(document.activeElement);
+  const step = event.key === next ? 1 : -1;
+  const target = event.key === "Home" ? steps[0] : event.key === "End" ? steps.at(-1) : steps[(current + step + steps.length) % steps.length];
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+}
+</script>
+
+<template>
+    <ol
+        :aria-label="props.ariaLabel"
+        :class="ui.root"
+        @keydown="onKeydown"
+    >
+        <slot />
+    </ol>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ProgressIndicatorProps } from './ProgressIndicator.types.js';
+type __VLS_Props = ProgressIndicatorProps;
+type __VLS_ModelProps = {
+    'currentIndex'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (index: number) => any;
+    "update:currentIndex": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:currentIndex"?: ((value: number) => any) | undefined;
+}>, {
+    vertical: boolean;
+    spaceEqually: boolean;
+    interactive: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+    ariaLabel: string;
+}, {}, {}, {}, 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/ProgressStep/ProgressStep.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ProgressStepProps } from './ProgressStep.types.js';
+declare const __VLS_export: import("vue").DefineComponent<ProgressStepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressStepProps> & Readonly<{}>, {
+    description: string;
+    disabled: boolean;
+    invalid: boolean;
+    complete: boolean;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ProgressStepProps = {
+    /**
+     * Marca el paso como hecho aunque esté en el índice actual o por delante de
+     * él. Vuno fuerza `complete` en todo lo que queda **detrás** del índice
+     * actual, así que esta prop solo decide los pasos que el índice no resuelve.
+     */
+    complete?: boolean;
+    /**
+     * Descripción del icono. En Vuno es el `<title>` de un `<svg>` marcado
+     * `aria-hidden`, así que funciona como pista del puntero y no como nombre
+     * accesible; aquí se conserva ese comportamiento.
+     */
+    description?: string;
+    disabled?: boolean;
+    /**
+     * Pinta el icono de error sin cambiar el estado del paso: la línea conserva
+     * el color de su posición, igual que en Vuno, y el texto asistivo pasa a
+     * anunciar el fallo.
+     */
+    invalid?: boolean;
+    /**
+     * Qué consigue la persona en este paso, en una o dos palabras. Vuno lo
+     * limita a 16 caracteres y lo trunca con puntos suspensivos cuando no cabe,
+     * dejando el texto completo en el `title` del paso.
+     */
+    label: string;
+    /** Texto de ayuda del paso: que es opcional, o qué ha fallado. */
+    secondaryLabel?: string;
+    ui?: ComponentUi<'progressIndicator'>;
+};

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

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, defineComponent, h, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { progressIndicatorKey } from "#vuno/components/ProgressIndicator/ProgressIndicator.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ProgressStep" });
+const props = defineProps({
+  complete: { type: Boolean, required: false, default: false },
+  description: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  label: { type: String, required: true },
+  secondaryLabel: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const stateMessages = { complete: "Completado", current: "Paso actual", incomplete: "Pendiente", invalid: "Con error" };
+const context = inject(progressIndicatorKey);
+if (!context) throw new Error("[ProgressStep] debe usarse dentro de ProgressIndicator.");
+const index = context.register();
+const complete = computed(() => index < context.currentIndex.value || props.complete);
+const current = computed(() => index === context.currentIndex.value && !complete.value);
+const state = computed(() => current.value ? "current" : complete.value ? "complete" : "incomplete");
+const clickable = computed(() => context.interactive.value && !props.disabled && !current.value);
+const NativeButton = defineComponent({
+  name: "ProgressStepButtonRoot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots: nativeSlots }) {
+    return () => h("button", attrs, nativeSlots.default?.());
+  }
+});
+const rootTag = computed(() => context.interactive.value ? NativeButton : "span");
+const iconName = computed(() => props.invalid ? "carbon:warning" : current.value ? "carbon:incomplete" : complete.value ? "carbon:checkmark-outline" : "carbon:circle-dash");
+const message = computed(() => props.invalid ? stateMessages.invalid : complete.value ? stateMessages.complete : current.value ? stateMessages.current : stateMessages.incomplete);
+const ui = useTheme(
+  "progressIndicator",
+  () => props.ui,
+  () => ({
+    clickable: clickable.value ? "true" : "false",
+    disabled: props.disabled ? "true" : "false",
+    invalid: props.invalid ? "true" : "false",
+    spaceEqually: context.spaceEqually.value ? "true" : "false",
+    state: state.value,
+    vertical: context.vertical.value ? "true" : "false"
+  })
+);
+const onSelect = () => {
+  if (!clickable.value) return;
+  context.select(index);
+};
+</script>
+
+<template>
+    <li :class="ui.step">
+        <component
+            :is="rootTag"
+            :aria-current="current ? 'step' : void 0"
+            :aria-disabled="context.interactive.value && props.disabled ? 'true' : void 0"
+            :class="ui.control"
+            :data-progress-step="context.interactive.value ? '' : void 0"
+            :disabled="context.interactive.value && props.disabled ? true : void 0"
+            :title="props.label"
+            :type="context.interactive.value ? 'button' : void 0"
+            @click="onSelect"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="iconName"
+                :title="props.description"
+            />
+            <span :class="ui.text">
+                <span :class="ui.label">{{ props.label }}</span>
+                <span
+                    v-if="props.secondaryLabel !== void 0"
+                    :class="ui.secondary"
+                >
+                    {{ props.secondaryLabel }}
+                </span>
+            </span>
+            <span :class="ui.assistive">{{ message }}</span>
+            <span :class="ui.line" />
+        </component>
+    </li>
+</template>

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

@@ -0,0 +1,11 @@
+import type { ProgressStepProps } from './ProgressStep.types.js';
+declare const __VLS_export: import("vue").DefineComponent<ProgressStepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressStepProps> & Readonly<{}>, {
+    description: string;
+    disabled: boolean;
+    invalid: boolean;
+    complete: boolean;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+import type { OptionValue } from '#vuno/types/control';
+import type { RadioButtonProps } from './RadioButton.types.js';
+type __VLS_Props = RadioButtonProps;
+type __VLS_ModelProps = {
+    modelValue?: OptionValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: OptionValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: OptionValue | undefined) => any) | undefined;
+}>, {
+    description: string;
+    disabled: boolean;
+    name: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<"control" | "description" | "label" | "root" | "texts">;
+    required: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,64 @@
+/**
+ * El radio de Vuno: círculo de 18 px con borde de 1 px y, al elegirlo, un punto
+ * de 8 px del mismo color en el centro.
+ *
+ * El punto no es un pseudoelemento: el círculo es el propio `input`, un
+ * elemento reemplazado sobre el que los navegadores no renderizan `::before`.
+ * Se dibuja pintando el fondo solo en la caja de contenido —`bg-clip-content`
+ * con 4 px de relleno—, que sobre un círculo de 18 px con borde de 1 px deja
+ * exactamente los 8 px del sistema de origen. El borde no engorda al elegir.
+ *
+ * El fondo del círculo es transparente a propósito: un disco de color propio se
+ * ve desalineado contra la capa que lo contiene, que es la misma razón por la
+ * que el checkbox tampoco lo lleva.
+ *
+ * En alto contraste el fondo lo fuerza el sistema, así que el punto se repinta
+ * con `ButtonText` para que siga viéndose.
+ *
+ * El cursor vive en el círculo y en el rótulo porque los dos activan la
+ * elección: señalar solo uno deja la mitad de la fila sin anunciarse como
+ * pulsable.
+ */
+export declare const radioButtonTheme: Record<"radioButton", {
+    readonly slots: {
+        readonly control: "mt-px mb-0.5 ms-0.5 size-[1.125rem] shrink-0 cursor-pointer appearance-none rounded-full border border-(--vuno-icon-primary) bg-transparent bg-clip-content checked:bg-(--vuno-icon-primary) checked:p-1 focus:outline-solid focus:outline-2 focus:outline-offset-[1.5px] focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-(--vuno-icon-disabled) disabled:checked:bg-(--vuno-text-disabled) forced-colors:checked:bg-[ButtonText]";
+        readonly description: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper) group-has-disabled:text-(--vuno-text-disabled)";
+        readonly label: "cursor-pointer text-sm/[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) group-has-disabled:cursor-not-allowed group-has-disabled:text-(--vuno-text-disabled)";
+        readonly root: "group flex items-start gap-2.5";
+        readonly texts: "flex min-w-0 flex-col gap-1";
+    };
+    readonly variants: {
+        /** El error del grupo pinta el borde del círculo, no solo el mensaje. */
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "border-(--vuno-support-error)";
+            };
+        };
+        /**
+         * Cuando el grupo se apila, el desplazamiento vertical pasa del círculo
+         * a la fila entera: el círculo pierde su margen y la fila gana 2 px de
+         * relleno superior, igual que en el sistema de origen.
+         */
+        readonly orientation: {
+            readonly horizontal: {};
+            readonly vertical: {
+                readonly control: "my-0";
+                readonly root: "pt-0.5";
+            };
+        };
+        /**
+         * Solo lectura enseña la elección sin permitir cambiarla: el aro se
+         * apaga como el deshabilitado, pero el control sigue en el recorrido de
+         * foco y su texto se puede seleccionar y copiar. Por eso el cursor deja
+         * de ofrecer una pulsación y pasa a ser el del texto.
+         */
+        readonly readonly: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "cursor-default border-(--vuno-icon-disabled)";
+                readonly label: "cursor-text";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,39 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const radioButtonTheme = defineTheme("radioButton", {
+  slots: {
+    control: "mt-px mb-0.5 ms-0.5 size-[1.125rem] shrink-0 cursor-pointer appearance-none rounded-full border border-(--vuno-icon-primary) bg-transparent bg-clip-content checked:bg-(--vuno-icon-primary) checked:p-1 focus:outline-solid focus:outline-2 focus:outline-offset-[1.5px] focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-(--vuno-icon-disabled) disabled:checked:bg-(--vuno-text-disabled) forced-colors:checked:bg-[ButtonText]",
+    description: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper) group-has-disabled:text-(--vuno-text-disabled)",
+    label: "cursor-pointer text-sm/[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) group-has-disabled:cursor-not-allowed group-has-disabled:text-(--vuno-text-disabled)",
+    root: "group flex items-start gap-2.5",
+    texts: "flex min-w-0 flex-col gap-1"
+  },
+  variants: {
+    /** El error del grupo pinta el borde del círculo, no solo el mensaje. */
+    invalid: {
+      false: {},
+      true: { control: "border-(--vuno-support-error)" }
+    },
+    /**
+     * Cuando el grupo se apila, el desplazamiento vertical pasa del círculo
+     * a la fila entera: el círculo pierde su margen y la fila gana 2 px de
+     * relleno superior, igual que en el sistema de origen.
+     */
+    orientation: {
+      horizontal: {},
+      vertical: { control: "my-0", root: "pt-0.5" }
+    },
+    /**
+     * Solo lectura enseña la elección sin permitir cambiarla: el aro se
+     * apaga como el deshabilitado, pero el control sigue en el recorrido de
+     * foco y su texto se puede seleccionar y copiar. Por eso el cursor deja
+     * de ofrecer una pulsación y pasa a ser el del texto.
+     */
+    readonly: {
+      false: {},
+      true: {
+        control: "cursor-default border-(--vuno-icon-disabled)",
+        label: "cursor-text"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,16 @@
+import type { ControlUi, OptionValue } from '#vuno/types/control';
+export type RadioButtonProps = {
+    id?: string;
+    name?: string;
+    description?: string;
+    disabled?: boolean;
+    labelText: string;
+    /**
+     * Impide el cambio sin sacar el control del recorrido de foco. El grupo lo
+     * impone a todos sus radios; aquí se declara para el radio suelto.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    ui?: ControlUi<'control' | 'description' | 'label' | 'root' | 'texts'>;
+    value: OptionValue;
+};