@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,43 +1,21 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
-type Props = {
-    color?: VunoColor;
-    disabled?: boolean;
-    /** Nombre Iconify, como los de `useIcons`. */
-    icon?: string;
-    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;
-    /**
-     * `button` a propósito, y no `submit`: un botón dentro de un
-     * formulario que no diga lo que es lo envía al pulsarlo, y eso
-     * convierte cualquier acción secundaria en un envío accidental.
-     */
-    type?: 'button' | 'reset' | 'submit';
-    ui?: VunoUi<'button'>;
-    variant?: VunoButtonVariant;
-};
+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<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    color: 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: VunoRadius;
-    size: VunoSize;
-    variant: VunoButtonVariant;
+    selected: boolean;
     label: string;
     type: "button" | "reset" | "submit";
-    ui: VunoUi<"button">;
+    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/ButtonSet/ButtonSet.d.vue.ts

@@ -0,0 +1,17 @@
+import type { ButtonSetProps } from './ButtonSet.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonSetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonSetProps> & Readonly<{}>, {
+    stacked: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"buttonSet">;
+}, {}, {}, {}, 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/ButtonSet/ButtonSet.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const buttonSetTheme: Record<"buttonSet", {
+    readonly slots: {
+        readonly base: "flex [&>*]:relative [&>*]:w-full [&>*]:max-w-49 [&>*+*:not(:focus)]:before:absolute [&>*+*:not(:focus)]:before:content-[''] [&>*+*:not(:focus):not(:disabled)]:before:bg-(--vuno-button-separator)";
+    };
+    readonly variants: {
+        readonly stacked: {
+            readonly false: {
+                readonly base: "[&>*+*:not(:focus)]:before:-inset-y-px [&>*+*:not(:focus)]:before:-start-px [&>*+*:not(:focus)]:before:w-px [&>*+*:disabled]:before:bg-(--vuno-icon-on-color-disabled)";
+            };
+            readonly true: {
+                readonly base: "flex-col [&>*+*:not(:focus)]:before:-inset-x-px [&>*+*:not(:focus)]:before:-top-px [&>*+*:not(:focus)]:before:h-px [&>*+*:disabled]:before:bg-(--vuno-layer-selected-disabled)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,12 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const buttonSetTheme = defineTheme("buttonSet", {
+  slots: {
+    base: "flex [&>*]:relative [&>*]:w-full [&>*]:max-w-49 [&>*+*:not(:focus)]:before:absolute [&>*+*:not(:focus)]:before:content-[''] [&>*+*:not(:focus):not(:disabled)]:before:bg-(--vuno-button-separator)"
+  },
+  variants: {
+    stacked: {
+      false: { base: "[&>*+*:not(:focus)]:before:-inset-y-px [&>*+*:not(:focus)]:before:-start-px [&>*+*:not(:focus)]:before:w-px [&>*+*:disabled]:before:bg-(--vuno-icon-on-color-disabled)" },
+      true: { base: "flex-col [&>*+*:not(:focus)]:before:-inset-x-px [&>*+*:not(:focus)]:before:-top-px [&>*+*:not(:focus)]:before:h-px [&>*+*:disabled]:before:bg-(--vuno-layer-selected-disabled)" }
+    }
+  }
+});

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

@@ -0,0 +1,13 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ButtonSetProps = {
+    /**
+     * Apila los botones en vertical en vez de ponerlos en fila.
+     *
+     * Es el `stacked` del sistema de origen. Su `fluid` —que además reordena
+     * los botones según su `kind` cuando el contenedor se estrecha— no está:
+     * exige medir el contenedor y reordenar el contenido del slot en tiempo de
+     * ejecución, y el orden de las acciones lo decide quien las escribe.
+     */
+    stacked?: boolean;
+    ui?: ComponentUi<'buttonSet'>;
+};

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

@@ -0,0 +1,19 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "ButtonSet" });
+const props = defineProps({
+  stacked: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "buttonSet",
+  () => props.ui,
+  () => ({ stacked: props.stacked ? "true" : "false" })
+);
+</script>
+
+<template>
+    <div :class="ui.base">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { ButtonSetProps } from './ButtonSet.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonSetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonSetProps> & Readonly<{}>, {
+    stacked: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"buttonSet">;
+}, {}, {}, {}, 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/Callout/Callout.d.vue.ts

@@ -0,0 +1,26 @@
+import type { CalloutProps } from './Callout.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: () => any;
+}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{
+    onAction?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("./Callout.types.js").CalloutKind;
+    lowContrast: boolean;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    statusIconDescription: string;
+    actionButtonLabel: string;
+    titleId: 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/Callout/Callout.types.d.ts

@@ -0,0 +1,17 @@
+import type { NotificationProps } from '#vuno/components/InlineNotification/InlineNotification.types';
+/**
+ * Vuno reduce el callout a dos estados. `success` y `error` son respuestas a
+ * algo que ya pasó, y el callout llega antes: acompaña al contenido de la
+ * página para evitar un error, no para contarlo.
+ */
+export type CalloutKind = 'info' | 'warning';
+export type CalloutProps = Omit<NotificationProps, 'closeButtonLabel' | 'hideCloseButton' | 'kind'> & {
+    /** Etiqueta de una acción opcional; Vuno la describe con `titleId`. */
+    actionButtonLabel?: string;
+    kind?: CalloutKind;
+    /**
+     * Identificador del título. Nombra los elementos accionables que el
+     * callout contenga, que sin él quedan sin contexto al leerlos aislados.
+     */
+    titleId?: string;
+};

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

@@ -0,0 +1,80 @@
+<script setup>
+import { onMounted, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import { interactiveChildren, notificationIcons } from "#vuno/components/InlineNotification/notification";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Callout" });
+const props = defineProps({
+  lowContrast: { type: Boolean, required: false, default: false },
+  statusIconDescription: { type: String, required: false, default: void 0 },
+  subtitle: { type: String, required: false, default: void 0 },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  actionButtonLabel: { type: String, required: false, default: void 0 },
+  kind: { type: String, required: false, default: "info" },
+  titleId: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["action"]);
+defineSlots();
+const content = useTemplateRef("content");
+const ui = useTheme(
+  "inlineNotification",
+  () => props.ui,
+  () => ({ kind: props.kind, lowContrast: props.lowContrast ? "true" : "false", variant: "callout" })
+);
+onMounted(() => {
+  if (!import.meta.env.DEV || !props.titleId) return;
+  const orphan = interactiveChildren(content.value).some((child) => child.getAttribute("aria-describedby") !== props.titleId);
+  if (orphan) console.warn('[Callout] Los elementos accionables del cuerpo deben describirse con `aria-describedby="titleId"`.');
+});
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.details">
+            <Icon
+                :class="ui.icon"
+                :name="notificationIcons[props.kind]"
+            />
+            <span
+                v-if="props.statusIconDescription"
+                :class="ui.assistive"
+            >
+                {{ props.statusIconDescription }}
+            </span>
+            <div
+                ref="content"
+                :class="ui.textWrapper"
+            >
+                <div
+                    v-if="props.title"
+                    :id="props.titleId"
+                    :class="ui.title"
+                >
+                    {{ props.title }}
+                </div>
+                <div
+                    v-if="props.subtitle"
+                    :class="ui.subtitle"
+                >
+                    {{ props.subtitle }}
+                </div>
+                <slot />
+            </div>
+        </div>
+        <div
+            v-if="props.actionButtonLabel"
+            :class="ui.actions"
+        >
+            <Button
+                :aria-describedby="props.titleId"
+                kind="ghost"
+                :label="props.actionButtonLabel"
+                size="sm"
+                :ui="{ base: ui.action }"
+                @click="emit('action')"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { CalloutProps } from './Callout.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: () => any;
+}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{
+    onAction?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("./Callout.types.js").CalloutKind;
+    lowContrast: boolean;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    statusIconDescription: string;
+    actionButtonLabel: string;
+    titleId: 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/Checkbox/Checkbox.d.vue.ts

@@ -0,0 +1,35 @@
+import type { CheckboxChange, CheckboxProps } from './Checkbox.types.js';
+type __VLS_Props = CheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: CheckboxChange & {
+        event: Event;
+    }) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: CheckboxChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    title: string;
+    invalid: boolean;
+    warn: boolean;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<import("./Checkbox.types.js").CheckboxSlot, string>>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,63 @@
+/**
+ * El checkbox de Vuno: caja de 16 px, marca dibujada y estados de validación.
+ *
+ * La caja es el propio `input` con `appearance-none`, no un `div` con
+ * listeners, así que el foco, el teclado, el envío del formulario y la
+ * validación nativa siguen perteneciendo al control.
+ *
+ * La marca es el único elemento añadido, y lo es por una razón de plataforma:
+ * los navegadores no renderizan pseudoelementos sobre un `input`, que es un
+ * elemento reemplazado, de modo que la palomita y el guion del estado
+ * indeterminado no pueden dibujarse sobre la caja. Vuno lo resuelve al
+ * contrario —oculta el input y pinta caja y marca sobre la etiqueta—; aquí la
+ * caja se conserva visible y la marca es un `span` hermano que lee el estado
+ * del control con `peer-*`. Así lo que se ve no puede separarse de lo que se
+ * anuncia, y no hay estado duplicado en props.
+ *
+ * Las medidas de la marca son las de Vuno trasladadas al origen de la caja:
+ * 9 × 5 px con dos bordes de 1.5 px girados -45° sobre su esquina inferior
+ * derecha para la palomita, y una línea de 2 px por 8 px de ancho para el
+ * estado indeterminado.
+ *
+ * La geometría de la fila es la del sistema de origen y no una rejilla propia:
+ * la caja arranca a 3 px del borde del envoltorio y 3 px por debajo de su
+ * línea superior, el rótulo baja 1 px, y entre caja y texto quedan 11 px. Así
+ * el texto empieza a 30 px del borde, que es donde lo espera un campo de texto
+ * en la misma columna.
+ *
+ * El estado indeterminado gana al marcado sin depender del orden de las
+ * reglas: cada clase `peer-indeterminate:*` tiene más especificidad que la
+ * clase base con la que compite, y la única propiedad que ambos estados fijan
+ * —la escala— toma el mismo valor.
+ */
+export declare const checkboxTheme: Record<"checkbox", {
+    readonly slots: {
+        readonly base: "peer mt-[3px] ms-[3px] size-4 shrink-0 cursor-pointer appearance-none rounded-[2px] border border-(--vuno-icon-primary) bg-transparent checked:border-transparent checked:bg-(--vuno-icon-primary) indeterminate:border-transparent indeterminate:bg-(--vuno-icon-primary) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-(--vuno-icon-disabled) disabled:checked:bg-(--vuno-icon-disabled) disabled:indeterminate:bg-(--vuno-icon-disabled) aria-readonly:cursor-default aria-readonly:border-(--vuno-icon-disabled) aria-readonly:checked:border-(--vuno-icon-disabled) aria-readonly:checked:bg-transparent aria-readonly:indeterminate:border-(--vuno-icon-disabled) aria-readonly:indeterminate:bg-transparent";
+        readonly field: "relative flex items-start gap-[11px]";
+        readonly icon: "mt-px ms-[3px] me-px size-4 shrink-0";
+        readonly label: "min-h-5 cursor-pointer pt-px text-sm/[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) select-none peer-disabled:cursor-not-allowed peer-disabled:text-(--vuno-text-disabled) peer-aria-readonly:cursor-text peer-aria-readonly:select-text";
+        readonly mark: "pointer-events-none absolute top-1 left-[7px] h-[5px] w-[9px] origin-bottom-right -rotate-45 scale-0 border-b-[1.5px] border-l-[1.5px] border-(--vuno-icon-inverse) peer-checked:scale-100 peer-indeterminate:top-[11px] peer-indeterminate:h-0 peer-indeterminate:w-2 peer-indeterminate:rotate-0 peer-indeterminate:scale-100 peer-indeterminate:border-b-2 peer-indeterminate:border-l-0 peer-aria-readonly:border-(--vuno-text-primary)";
+        readonly message: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper)";
+        readonly root: "w-full";
+        readonly validation: "mt-1 flex w-full items-start gap-2";
+    };
+    readonly variants: {
+        /**
+         * Vuno no altera la caja en advertencia: solo cambia el mensaje. El
+         * error sí marca el borde, incluso con la caja marcada, y su texto usa
+         * `--vuno-text-error`.
+         */
+        readonly state: {
+            readonly default: {};
+            readonly invalid: {
+                readonly base: "border-(--vuno-support-error) checked:border-(--vuno-support-error) indeterminate:border-(--vuno-support-error)";
+                readonly icon: "text-(--vuno-support-error)";
+                readonly message: "text-(--vuno-text-error)";
+            };
+            readonly warn: {
+                readonly icon: "text-(--vuno-support-warning)";
+                readonly message: "text-(--vuno-text-primary)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,29 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const checkboxTheme = defineTheme("checkbox", {
+  slots: {
+    base: "peer mt-[3px] ms-[3px] size-4 shrink-0 cursor-pointer appearance-none rounded-[2px] border border-(--vuno-icon-primary) bg-transparent checked:border-transparent checked:bg-(--vuno-icon-primary) indeterminate:border-transparent indeterminate:bg-(--vuno-icon-primary) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-(--vuno-icon-disabled) disabled:checked:bg-(--vuno-icon-disabled) disabled:indeterminate:bg-(--vuno-icon-disabled) aria-readonly:cursor-default aria-readonly:border-(--vuno-icon-disabled) aria-readonly:checked:border-(--vuno-icon-disabled) aria-readonly:checked:bg-transparent aria-readonly:indeterminate:border-(--vuno-icon-disabled) aria-readonly:indeterminate:bg-transparent",
+    field: "relative flex items-start gap-[11px]",
+    icon: "mt-px ms-[3px] me-px size-4 shrink-0",
+    label: "min-h-5 cursor-pointer pt-px text-sm/[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) select-none peer-disabled:cursor-not-allowed peer-disabled:text-(--vuno-text-disabled) peer-aria-readonly:cursor-text peer-aria-readonly:select-text",
+    mark: "pointer-events-none absolute top-1 left-[7px] h-[5px] w-[9px] origin-bottom-right -rotate-45 scale-0 border-b-[1.5px] border-l-[1.5px] border-(--vuno-icon-inverse) peer-checked:scale-100 peer-indeterminate:top-[11px] peer-indeterminate:h-0 peer-indeterminate:w-2 peer-indeterminate:rotate-0 peer-indeterminate:scale-100 peer-indeterminate:border-b-2 peer-indeterminate:border-l-0 peer-aria-readonly:border-(--vuno-text-primary)",
+    message: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper)",
+    root: "w-full",
+    validation: "mt-1 flex w-full items-start gap-2"
+  },
+  variants: {
+    /**
+     * Vuno no altera la caja en advertencia: solo cambia el mensaje. El
+     * error sí marca el borde, incluso con la caja marcada, y su texto usa
+     * `--vuno-text-error`.
+     */
+    state: {
+      default: {},
+      invalid: {
+        base: "border-(--vuno-support-error) checked:border-(--vuno-support-error) indeterminate:border-(--vuno-support-error)",
+        icon: "text-(--vuno-support-error)",
+        message: "text-(--vuno-text-error)"
+      },
+      warn: { icon: "text-(--vuno-support-warning)", message: "text-(--vuno-text-primary)" }
+    }
+  }
+});

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

@@ -0,0 +1,27 @@
+import type { LabeledControlProps } from '#vuno/types/control';
+/** Slots tematizables del checkbox. */
+export type CheckboxSlot = 'base' | 'field' | 'icon' | 'label' | 'mark' | 'message' | 'root' | 'validation';
+/** Lo que viaja con `change`, además del evento nativo que lo originó. */
+export type CheckboxChange = {
+    id: string;
+    checked: boolean;
+};
+/**
+ * El contrato de Vuno `Checkbox`.
+ *
+ * `size` se retira de `ControlProps` a propósito: la caja de Vuno mide 16 px
+ * en cualquier contexto y el componente no tiene escala, así que ofrecer la
+ * opción anunciaba una capacidad inexistente.
+ */
+export type CheckboxProps = Omit<LabeledControlProps<CheckboxSlot>, 'size'> & {
+    indeterminate?: boolean;
+    /**
+     * Impide el cambio sin sacar el control del recorrido de foco. Predomina
+     * sobre `disabled`, `invalid` y `warn`, igual que en Vuno.
+     */
+    readonly?: boolean;
+    /** `title` de la etiqueta: el recurso de Vuno cuando la etiqueta se oculta. */
+    title?: string;
+    /** Valor enviado con el formulario cuando el control está marcado. */
+    value?: string;
+};

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

@@ -0,0 +1,118 @@
+<script setup>
+import { computed, inject, useId, useTemplateRef, watch } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { checkboxGroupContextKey } from "#vuno/components/CheckboxGroup/internal/context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Checkbox" });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 },
+  indeterminate: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: void 0 },
+  value: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["change"]);
+const icons = useIcons();
+const group = inject(checkboxGroupContextKey, void 0);
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const messageId = `${fallbackId}-message`;
+const control = useTemplateRef("control");
+const readonly = computed(() => props.readonly || (group?.readonly.value ?? false));
+const disabled = computed(() => !readonly.value && props.disabled);
+const invalid = computed(() => !readonly.value && !props.disabled && (props.invalid || (group?.invalid.value ?? false)));
+const warn = computed(() => !readonly.value && !props.disabled && !invalid.value && props.warn);
+const message = computed(() => {
+  if (group) return void 0;
+  return invalid.value ? props.invalidText : warn.value ? props.warnText : props.helperText;
+});
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const ui = useTheme(
+  "checkbox",
+  () => props.ui,
+  () => ({ state: invalid.value ? "invalid" : warn.value ? "warn" : "default" })
+);
+function onChange(event) {
+  if (readonly.value) return;
+  const checked = event.target.checked;
+  model.value = checked;
+  emit("change", { id: controlId.value, checked, event });
+}
+function onClick(event) {
+  if (readonly.value) event.preventDefault();
+}
+watch(
+  [control, () => props.indeterminate, model],
+  ([input, indeterminate]) => {
+    if (input) input.indeterminate = indeterminate;
+  },
+  { flush: "post", immediate: true }
+);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.field">
+            <input
+                :id="controlId"
+                ref="control"
+                :aria-describedby="message ? messageId : void 0"
+                :aria-invalid="invalid || void 0"
+                :aria-readonly="readonly || void 0"
+                :checked="model === true"
+                :class="ui.base"
+                :disabled="disabled"
+                :name="props.name"
+                :required="props.required"
+                type="checkbox"
+                :value="props.value"
+                @change="onChange"
+                @click="onClick"
+            />
+
+            <span
+                aria-hidden="true"
+                :class="ui.mark"
+            />
+
+            <label
+                :class="[ui.label, props.hideLabel && 'sr-only']"
+                :for="controlId"
+                :title="props.title"
+            >
+                {{ props.labelText }}
+            </label>
+        </div>
+
+        <div
+            v-if="message"
+            :class="ui.validation"
+        >
+            <Icon
+                v-if="stateIcon"
+                :class="ui.icon"
+                :name="stateIcon"
+            />
+
+            <p
+                :id="messageId"
+                aria-live="polite"
+                :class="ui.message"
+            >
+                {{ message }}
+            </p>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,35 @@
+import type { CheckboxChange, CheckboxProps } from './Checkbox.types.js';
+type __VLS_Props = CheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: CheckboxChange & {
+        event: Event;
+    }) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: CheckboxChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    title: string;
+    invalid: boolean;
+    warn: boolean;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<import("./Checkbox.types.js").CheckboxSlot, string>>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;