@groupteknology/vuno 3.0.0 → 4.0.0

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

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

package/dist/runtime/app/components/Button/Button.vue.d.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/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)" }
+    }
+  }
+});