@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,114 @@
+/**
+ * `vuno--select`: el desplegable nativo.
+ *
+ * A diferencia del input y del área de texto, aquí la caja **es** el control:
+ * Vuno pinta el fondo, el borde inferior y el contorno de foco sobre el
+ * propio `<select>`, y lo único que lo acompaña son el chevron y el icono de
+ * estado, colocados encima en posición absoluta. Por eso este tema no reutiliza
+ * `control`: esa caja es un contenedor con `has-[]`, y aplicarla aquí
+ * duplicaría borde y foco en dos elementos que el navegador ya resuelve en uno.
+ * Además el `<select>` necesita cosas que aquella caja no tiene —cursor de
+ * puntero, el paso `xs` de 24 px y un relleno final que cambia con el estado—.
+ *
+ * El relleno final es la parte que más se mueve: 48 px de serie para dejar
+ * sitio al chevron, 64 px cuando además hay icono de error o aviso, y 56 px en
+ * la variante inline, donde todo se estrecha.
+ */
+export declare const selectTheme: Record<"select", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly select: "pe-14";
+        };
+        readonly inline: "true";
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly select: "pe-14";
+        };
+        readonly inline: "true";
+        readonly warn: "true";
+    }];
+    readonly slots: {
+        /** El chevron. No recibe puntero: quien pincha ahí está pinchando el campo. */
+        readonly arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)";
+        /** `vuno--select-input__wrapper`: el ancla de los dos iconos superpuestos. */
+        readonly field: "relative flex w-full items-center";
+        readonly fieldGroup: "contents";
+        /**
+         * `vuno--form__helper-text`, tipografía `helper-text-01`.
+         *
+         * El selector de ancestro reproduce `fieldset[disabled]
+         * .vuno--form__helper-text`: dentro de un `FormGroup` deshabilitado la
+         * ayuda se apaga aunque el campo no declare `disabled` por su cuenta.
+         */
+        readonly helper: "z-0 mt-1 w-full text-xs leading-4 tracking-[0.32px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+        readonly message: "mt-1 w-full text-xs leading-4 tracking-[0.32px] break-words text-(--vuno-text-primary)";
+        /** `vuno--select-option` y `vuno--select-optgroup`. */
+        readonly option: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)";
+        readonly select: "block w-full cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-[1.125rem] tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none";
+        /** El icono de error o de aviso, delante del chevron; el color va en la variante. */
+        readonly stateIcon: "pointer-events-none absolute top-1/2 end-10 size-4 -translate-y-1/2";
+        /** El rótulo. Existe para que la variante inline lo recoloque. */
+        readonly title: "";
+        readonly wrapper: "relative flex w-full flex-col items-start";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+                readonly helper: "text-(--vuno-text-disabled)";
+            };
+        };
+        readonly inline: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "end-2";
+                readonly fieldGroup: "flex min-w-0 flex-col";
+                readonly helper: "mt-0 ms-2";
+                readonly message: "mt-0 inline-flex w-full ps-2";
+                readonly select: "border-b-0 bg-transparent ps-2 focus:bg-(--vuno-background) disabled:bg-(--vuno-background)";
+                readonly stateIcon: "end-8";
+                readonly title: "mb-0 me-2 whitespace-nowrap";
+                readonly wrapper: "flex-row items-center";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly message: "text-(--vuno-text-error)";
+                readonly select: "pe-16 not-focus:outline-solid not-focus:outline-2 not-focus:-outline-offset-2 not-focus:outline-(--vuno-support-error)";
+                readonly stateIcon: "text-(--vuno-support-error)";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+                readonly select: "cursor-default border-(--vuno-border-subtle-01) bg-transparent not-disabled:hover:bg-transparent";
+            };
+        };
+        /** Las cuatro alturas de Vuno; `xs` existe para el selector de `Pagination`. */
+        readonly size: {
+            readonly xs: {
+                readonly select: "h-6";
+            };
+            readonly sm: {
+                readonly select: "h-8";
+            };
+            readonly md: {
+                readonly select: "h-10";
+            };
+            readonly lg: {
+                readonly select: "h-12";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly select: "pe-16";
+                readonly stateIcon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,107 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const selectTheme = defineTheme("select", {
+  compoundVariants: [
+    /*
+     * Inline estrecha el campo, así que el hueco para chevron más icono de
+     * estado no es el mismo que en la disposición apilada.
+     */
+    { class: { select: "pe-14" }, inline: "true", invalid: "true" },
+    { class: { select: "pe-14" }, inline: "true", warn: "true" }
+  ],
+  slots: {
+    /** El chevron. No recibe puntero: quien pincha ahí está pinchando el campo. */
+    arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)",
+    /** `vuno--select-input__wrapper`: el ancla de los dos iconos superpuestos. */
+    field: "relative flex w-full items-center",
+    /*
+     * `vuno--select-input--inline__wrapper`, que solo existe en inline: ahí
+     * agrupa campo y mensaje en una columna al lado del rótulo. En la
+     * disposición apilada no debe existir, y `display: contents` lo borra
+     * del layout sin necesidad de dos plantillas que se desincronicen.
+     */
+    fieldGroup: "contents",
+    /**
+     * `vuno--form__helper-text`, tipografía `helper-text-01`.
+     *
+     * El selector de ancestro reproduce `fieldset[disabled]
+     * .vuno--form__helper-text`: dentro de un `FormGroup` deshabilitado la
+     * ayuda se apaga aunque el campo no declare `disabled` por su cuenta.
+     */
+    helper: "z-0 mt-1 w-full text-xs leading-4 tracking-[0.32px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    /*
+     * `vuno--form-requirement`. El color lo pone el estado: Vuno lo tiñe
+     * de error solo cuando el campo es inválido y deja el aviso en el texto
+     * normal, porque un aviso no es un fallo.
+     */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.32px] break-words text-(--vuno-text-primary)",
+    /** `vuno--select-option` y `vuno--select-optgroup`. */
+    option: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)",
+    select: "block w-full cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-[1.125rem] tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none",
+    /** El icono de error o de aviso, delante del chevron; el color va en la variante. */
+    stateIcon: "pointer-events-none absolute top-1/2 end-10 size-4 -translate-y-1/2",
+    /** El rótulo. Existe para que la variante inline lo recoloque. */
+    title: "",
+    wrapper: "relative flex w-full flex-col items-start"
+  },
+  variants: {
+    /*
+     * El `<select>` se apaga solo con `:disabled`; lo que no puede saberlo
+     * por sí mismo es el chevron —que es un hermano— ni la ayuda, que en
+     * Vuno también se atenúa.
+     */
+    disabled: {
+      false: {},
+      true: { arrow: "text-(--vuno-icon-disabled)", helper: "text-(--vuno-text-disabled)" }
+    },
+    /*
+     * Inline cambia la disposición: el rótulo se pone al lado, el campo
+     * pierde fondo y borde y se estrecha, y el mensaje baja bajo el campo
+     * mientras la ayuda sigue al conjunto entero.
+     */
+    inline: {
+      false: {},
+      true: {
+        arrow: "end-2",
+        fieldGroup: "flex min-w-0 flex-col",
+        helper: "mt-0 ms-2",
+        message: "mt-0 inline-flex w-full ps-2",
+        select: "border-b-0 bg-transparent ps-2 focus:bg-(--vuno-background) disabled:bg-(--vuno-background)",
+        stateIcon: "end-8",
+        title: "mb-0 me-2 whitespace-nowrap",
+        wrapper: "flex-row items-center"
+      }
+    },
+    /*
+     * El contorno rojo solo aparece cuando el campo no tiene el foco: con
+     * foco manda el azul, porque lo que hay que ver entonces es dónde está
+     * el cursor. Es la regla `focus-outline('invalid')` de Vuno, que se
+     * aplica con `:not(:focus)`.
+     */
+    invalid: {
+      false: {},
+      true: {
+        message: "text-(--vuno-text-error)",
+        select: "pe-16 not-focus:outline-solid not-focus:outline-2 not-focus:-outline-offset-2 not-focus:outline-(--vuno-support-error)",
+        stateIcon: "text-(--vuno-support-error)"
+      }
+    },
+    readOnly: {
+      false: {},
+      true: {
+        arrow: "text-(--vuno-icon-disabled)",
+        select: "cursor-default border-(--vuno-border-subtle-01) bg-transparent not-disabled:hover:bg-transparent"
+      }
+    },
+    /** Las cuatro alturas de Vuno; `xs` existe para el selector de `Pagination`. */
+    size: {
+      xs: { select: "h-6" },
+      sm: { select: "h-8" },
+      md: { select: "h-10" },
+      lg: { select: "h-12" }
+    },
+    warn: {
+      false: {},
+      true: { select: "pe-16", stateIcon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,64 @@
+import type { ControlSize, ControlUi, OptionItem, OptionValue } from '#vuno/types/control';
+/**
+ * La escala del campo.
+ *
+ * Vuno admite aquí un paso más corto que el resto de controles —`xs`, 24 px—
+ * porque el selector de tamaño de página de `Pagination` lo necesita. No se
+ * añade a `ControlSize`: esa escala es la de los controles de texto, y un
+ * `<input>` de 24 px no existe en Vuno.
+ */
+export type SelectSize = 'xs' | ControlSize;
+/**
+ * Un grupo de opciones; el `SelectItemGroup` de Vuno, que emite `<optgroup>`.
+ *
+ * Se declara aquí y no en `types/control` porque agrupar solo tiene sentido en
+ * un desplegable nativo: la lista del `Dropdown` es plana.
+ */
+export type SelectOptionGroup = {
+    disabled?: boolean;
+    items: OptionItem[];
+    label: string;
+};
+/** Lo que acepta `items`: opciones sueltas, grupos, o una mezcla de los dos. */
+export type SelectItem = OptionItem | SelectOptionGroup;
+export type SelectSlot = 'arrow' | 'field' | 'fieldGroup' | 'helper' | 'message' | 'option' | 'select' | 'stateIcon' | 'title' | 'wrapper';
+export type SelectProps = {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    helperText?: string;
+    /** Oculta el rótulo a la vista conservándolo en el árbol de accesibilidad. */
+    hideLabel?: boolean;
+    /**
+     * La variante *inline* de Vuno: el rótulo se pone al lado, el campo
+     * pierde fondo y borde inferior, y el mensaje de validación queda debajo
+     * del campo mientras la ayuda sigue a continuación del conjunto.
+     */
+    inline?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    items: SelectItem[];
+    labelText: string;
+    /**
+     * No emite rótulo alguno. Vuno lo reserva para `Pagination`, que ya pone
+     * el suyo; fuera de ese caso el nombre accesible tiene que llegar por
+     * `aria-label` o `aria-labelledby`, y lo normal es querer `hideLabel`.
+     */
+    noLabel?: boolean;
+    /** La opción inicial sin valor, el `SelectItem` vacío de Vuno. */
+    placeholder?: string;
+    /**
+     * Muestra el valor sin permitir cambiarlo.
+     *
+     * `<select>` no admite `readonly`, así que se reproduce como Vuno: el
+     * campo conserva foco y contraste, se anuncia con `aria-readonly`, y se
+     * bloquean el despliegue con puntero y las teclas que lo abren.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    size?: SelectSize;
+    ui?: ControlUi<SelectSlot>;
+    warn?: boolean;
+    warnText?: string;
+};
+export type SelectValue = OptionValue;

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

@@ -0,0 +1,190 @@
+<script setup>
+import { computed, useAttrs, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { fromOptionKey, toOptionKey } from "#vuno/components/Dropdown/option";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Select", inheritAttrs: false });
+const model = defineModel({ type: [Boolean, null, Number, String], 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 },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  inline: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  items: { type: Array, required: true },
+  labelText: { type: String, required: true },
+  noLabel: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+const attrs = useAttrs();
+const icons = useIcons();
+const uid = useId();
+const controlId = computed(() => props.id ?? `${uid}-control`);
+const errorId = computed(() => `${controlId.value}-error-msg`);
+const warnId = computed(() => `${controlId.value}-warn-msg`);
+const helperId = computed(() => `${controlId.value}-helper-text`);
+const disabled = computed(() => !props.readonly && props.disabled);
+const invalid = computed(() => !props.readonly && !disabled.value && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && !disabled.value && props.warn);
+const ui = useTheme(
+  "select",
+  () => props.ui,
+  () => ({
+    disabled: String(disabled.value),
+    inline: String(props.inline),
+    invalid: String(invalid.value),
+    readOnly: String(props.readonly),
+    size: props.size,
+    warn: String(warn.value)
+  })
+);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : void 0);
+const messageId = computed(() => invalid.value ? errorId.value : warnId.value);
+const showHelper = computed(() => Boolean(props.helperText) && (props.inline || !message.value));
+const describedBy = computed(() => message.value ? messageId.value : showHelper.value ? helperId.value : void 0);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const isGroup = (item) => "items" in item;
+const options = computed(() => props.items.flatMap((item) => isGroup(item) ? item.items : [item]));
+const encodedValue = computed(() => model.value === void 0 ? "" : toOptionKey(model.value));
+const selected = computed(() => options.value.find((option) => toOptionKey(option.value) === encodedValue.value));
+const title = computed(() => attrs.title ?? selected.value?.label ?? props.placeholder ?? options.value[0]?.label);
+const openKeys = /* @__PURE__ */ new Set([" ", "ArrowDown", "ArrowUp"]);
+function onChange(event) {
+  const target = event.target;
+  if (props.readonly) {
+    target.value = encodedValue.value;
+    return;
+  }
+  if (target.value === "") {
+    model.value = void 0;
+    return;
+  }
+  const match = options.value.find((option) => toOptionKey(option.value) === target.value);
+  model.value = match ? match.value : fromOptionKey(target.value);
+}
+function onMousedown(event) {
+  if (!props.readonly) return;
+  event.preventDefault();
+  event.target?.focus();
+}
+function onKeydown(event) {
+  if (props.readonly && openKeys.has(event.key)) event.preventDefault();
+}
+</script>
+
+<template>
+    <div :class="ui.wrapper">
+        <FormLabel
+            v-if="!props.noLabel"
+            :disabled="disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="invalid"
+            :ui="{ label: ui.title }"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <div :class="ui.fieldGroup">
+            <div
+                :class="ui.field"
+                :data-invalid="invalid || void 0"
+            >
+                <select
+                    v-bind="$attrs"
+                    :id="controlId"
+                    :aria-describedby="describedBy"
+                    :aria-invalid="invalid || void 0"
+                    :aria-readonly="props.readonly || void 0"
+                    :class="ui.select"
+                    :disabled="disabled"
+                    :name="props.name"
+                    :required="props.required"
+                    :title="title"
+                    :value="encodedValue"
+                    @change="onChange"
+                    @keydown="onKeydown"
+                    @mousedown="onMousedown"
+                >
+                    <option
+                        v-if="props.placeholder"
+                        :class="ui.option"
+                        disabled
+                        hidden
+                        value=""
+                    >
+                        {{ props.placeholder }}
+                    </option>
+
+                    <template
+                        v-for="(item, index) in props.items"
+                        :key="index"
+                    >
+                        <optgroup
+                            v-if="isGroup(item)"
+                            :class="ui.option"
+                            :disabled="item.disabled"
+                            :label="item.label"
+                        >
+                            <option
+                                v-for="option in item.items"
+                                :key="toOptionKey(option.value)"
+                                :class="ui.option"
+                                :disabled="option.disabled"
+                                :value="toOptionKey(option.value)"
+                            >
+                                {{ option.label }}
+                            </option>
+                        </optgroup>
+
+                        <option
+                            v-else
+                            :class="ui.option"
+                            :disabled="item.disabled"
+                            :value="toOptionKey(item.value)"
+                        >
+                            {{ item.label }}
+                        </option>
+                    </template>
+                </select>
+
+                <Icon
+                    :class="ui.arrow"
+                    :name="icons.dropdownOpen"
+                />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+            </div>
+
+            <p
+                v-if="message"
+                :id="messageId"
+                :class="ui.message"
+            >
+                {{ message }}
+            </p>
+        </div>
+
+        <p
+            v-if="showHelper"
+            :id="helperId"
+            :class="ui.helper"
+        >
+            {{ props.helperText }}
+        </p>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+import type { OptionValue } from '#vuno/types/control';
+import type { SelectProps } from './Select.types.js';
+type __VLS_Props = SelectProps;
+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;
+}>, {
+    disabled: boolean;
+    size: import("./Select.types.js").SelectSize;
+    inline: boolean;
+    invalid: boolean;
+    warn: boolean;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<import("./Select.types.js").SelectSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    noLabel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+import type { SelectableTileChange, SelectableTileProps } from './SelectableTile.types.js';
+type __VLS_Props = SelectableTileProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'selected'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: SelectableTileChange & {
+        event: Event;
+    }) => any;
+    "update:selected": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: SelectableTileChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    name: string;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+}, {}, {}, {}, 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/SelectableTile/SelectableTile.types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** Lo que viaja con `change`, además del evento nativo que lo originó. */
+export type SelectableTileChange = {
+    id: string;
+    selected: boolean;
+};
+export type SelectableTileProps = {
+    /** `id` del control. Sin declarar, el componente genera uno estable en servidor y cliente. */
+    id?: string;
+    /**
+     * Agrupa el control en el formulario. Vuno lo marcó obsoleto al dejar de
+     * emitir un `<input>`; aquí sigue siendo el nombre real del campo enviado.
+     */
+    name?: string;
+    disabled?: boolean;
+    ui?: ComponentUi<'tile'>;
+    /**
+     * Valor enviado con el formulario cuando la tile está seleccionada, como en
+     * cualquier casilla. Vuno también lo marcó obsoleto por la misma razón
+     * que `name`.
+     */
+    value?: string;
+};

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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "SelectableTile" });
+const selected = defineModel("selected", { type: Boolean, ...{ default: false } });
+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 },
+  ui: { type: Object, required: false, default: void 0 },
+  value: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["change"]);
+defineSlots();
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const ui = useTheme(
+  "tile",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    interactive: "true",
+    selected: String(selected.value),
+    variant: "selectable"
+  })
+);
+function onChange(event) {
+  selected.value = event.target.checked;
+  emit("change", { id: controlId.value, event, selected: selected.value });
+}
+function onEnter(event) {
+  const control = event.target;
+  if (!(control instanceof HTMLInputElement) || control.type !== "checkbox") return;
+  event.preventDefault();
+  control.click();
+}
+</script>
+
+<template>
+    <label
+        :class="ui.root"
+        @keydown.enter="onEnter"
+    >
+        <input
+            :id="controlId"
+            :checked="selected"
+            :class="ui.input"
+            :disabled="props.disabled"
+            :name="props.name"
+            type="checkbox"
+            :value="props.value"
+            @change="onChange"
+        />
+
+        <span :class="ui.checkmark">
+            <Icon
+                :class="ui.checkmarkIcon"
+                :name="selected ? 'carbon:checkbox-checked-filled' : 'carbon:checkbox'"
+            />
+        </span>
+
+        <slot />
+    </label>
+</template>

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

@@ -0,0 +1,34 @@
+import type { SelectableTileChange, SelectableTileProps } from './SelectableTile.types.js';
+type __VLS_Props = SelectableTileProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'selected'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: SelectableTileChange & {
+        event: Event;
+    }) => any;
+    "update:selected": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: SelectableTileChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    value: string;
+    disabled: boolean;
+    name: string;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+}, {}, {}, {}, 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;
+    };
+};