@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,256 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TextInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  autocomplete: { type: String, required: false, default: void 0 },
+  autofocus: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  enableCounter: { type: Boolean, required: false, default: false },
+  fluid: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  hidePasswordLabel: { type: String, required: false, default: "Ocultar la clave" },
+  icon: { type: String, required: false, default: void 0 },
+  inline: { 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 },
+  max: { type: String, required: false, default: void 0 },
+  maxCount: { type: Number, required: false, default: void 0 },
+  maxlength: { type: Number, required: false, default: void 0 },
+  min: { type: String, required: false, default: void 0 },
+  passwordToggle: { 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 },
+  showPasswordLabel: { type: String, required: false, default: "Mostrar la clave" },
+  size: { type: String, required: false, default: "md" },
+  type: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+defineSlots();
+const attrs = useAttrs();
+const icons = useIcons();
+const uid = useId();
+const announced = ref("");
+const revealed = ref(false);
+let timer;
+const controlId = computed(() => props.id ?? uid);
+const errorId = computed(() => `${controlId.value}-error-msg`);
+const helperId = computed(() => `${controlId.value}-helper-text`);
+const warnId = computed(() => `${controlId.value}-warn-msg`);
+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 showToggle = computed(() => props.passwordToggle && props.type === "password");
+const ui = useTheme(
+  "textInput",
+  () => props.ui,
+  () => ({
+    disabled: String(disabled.value),
+    fluid: String(props.fluid),
+    inline: String(props.inline && !props.fluid),
+    invalid: String(invalid.value),
+    leading: String(Boolean(props.icon)),
+    passwordToggle: String(showToggle.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) && !message.value && !props.fluid);
+const describedBy = computed(() => invalid.value ? void 0 : warn.value && message.value ? warnId.value : showHelper.value ? helperId.value : void 0);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const resolvedType = computed(() => showToggle.value && revealed.value ? "text" : props.type);
+const title = computed(() => attrs.title ?? props.placeholder);
+const maxlength = computed(() => props.maxlength ?? (props.enableCounter ? props.maxCount : void 0));
+const count = computed(() => (model.value ?? "").length);
+const showCounter = computed(() => props.enableCounter && props.maxCount !== void 0);
+const counter = computed(() => `${count.value}/${props.maxCount}`);
+const announcement = computed(() => {
+  if (!showCounter.value || props.maxCount === void 0) return "";
+  const remaining = props.maxCount - count.value;
+  if (remaining <= 0) return "Se alcanz\xF3 el m\xE1ximo de caracteres.";
+  if (remaining > 10) return "";
+  return remaining === 1 ? "Queda 1 car\xE1cter." : `Quedan ${remaining} caracteres.`;
+});
+function announce(value) {
+  clearTimeout(timer);
+  announced.value = "";
+  if (!value) return;
+  timer = setTimeout(() => {
+    announced.value = value;
+  }, 1e3);
+}
+function onInput(event) {
+  model.value = event.target.value;
+}
+watch(announcement, announce);
+onMounted(() => announce(announcement.value));
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <div :class="ui.wrapper">
+        <!-- `vuno--text-input__label-wrapper`. En inline es además el lateral izquierdo de la fila. -->
+        <div :class="ui.labelWrapper">
+            <FormLabel
+                :disabled="disabled"
+                :for="controlId"
+                :hideLabel="props.hideLabel"
+                :invalid="invalid"
+                :ui="{ label: ui.label }"
+            >
+                {{ props.labelText }}
+            </FormLabel>
+
+            <div
+                v-if="showCounter"
+                :class="ui.counter"
+            >
+                {{ counter }}
+            </div>
+        </div>
+
+        <div :class="ui.fieldOuter">
+            <div
+                :class="ui.field"
+                :data-decorator="$slots.decorator ? '' : void 0"
+                :data-invalid="invalid || void 0"
+            >
+                <Icon
+                    v-if="props.icon"
+                    :class="ui.icon"
+                    :name="props.icon"
+                />
+
+                <input
+                    v-bind="$attrs"
+                    :id="controlId"
+                    :aria-describedby="describedBy"
+                    :aria-errormessage="invalid && message ? errorId : void 0"
+                    :aria-invalid="invalid || void 0"
+                    :aria-readonly="props.readonly || void 0"
+                    :autocomplete="props.autocomplete"
+                    :autofocus="props.autofocus"
+                    :class="ui.input"
+                    :data-invalid="invalid || void 0"
+                    :disabled="disabled"
+                    :max="props.max"
+                    :maxlength="maxlength"
+                    :min="props.min"
+                    :name="props.name"
+                    :placeholder="props.placeholder"
+                    :readonly="props.readonly"
+                    :required="props.required"
+                    :title="title"
+                    :type="resolvedType"
+                    :value="model"
+                    @input="onInput"
+                />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+
+                <button
+                    v-if="showToggle"
+                    :aria-label="revealed ? props.hidePasswordLabel : props.showPasswordLabel"
+                    :class="ui.toggle"
+                    :disabled="disabled"
+                    :title="revealed ? props.hidePasswordLabel : props.showPasswordLabel"
+                    type="button"
+                    @click="revealed = !revealed"
+                >
+                    <Icon
+                        :class="ui.toggleIcon"
+                        :name="revealed ? 'carbon:view-off' : 'carbon:view'"
+                    />
+                </button>
+
+                <div
+                    v-if="$slots.decorator"
+                    :class="ui.decorator"
+                >
+                    <slot name="decorator" />
+                </div>
+
+                <span
+                    aria-atomic="true"
+                    aria-live="assertive"
+                    :class="ui.announcer"
+                    role="alert"
+                >
+                    {{ announced }}
+                </span>
+
+                <template v-if="props.fluid">
+                    <hr :class="ui.divider" />
+
+                    <p
+                        v-if="message"
+                        :id="messageId"
+                        :class="ui.message"
+                        role="alert"
+                    >
+                        {{ message }}
+                    </p>
+                </template>
+            </div>
+
+            <template v-if="!props.fluid && !props.inline">
+                <p
+                    v-if="message"
+                    :id="messageId"
+                    :class="ui.message"
+                    role="alert"
+                >
+                    {{ message }}
+                </p>
+
+                <p
+                    v-else-if="showHelper"
+                    :id="helperId"
+                    :class="ui.helper"
+                >
+                    {{ props.helperText }}
+                </p>
+            </template>
+        </div>
+
+        <!-- En inline el mensaje o la ayuda ocupan el lateral derecho de la fila. -->
+        <div
+            v-if="props.inline && !props.fluid && (message || showHelper)"
+            :class="ui.labelWrapper"
+        >
+            <p
+                v-if="message"
+                :id="messageId"
+                :class="ui.message"
+                role="alert"
+            >
+                {{ message }}
+            </p>
+
+            <p
+                v-else
+                :id="helperId"
+                :class="ui.helper"
+            >
+                {{ props.helperText }}
+            </p>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,56 @@
+import type { TextInputProps } from './TextInput.types.js';
+type __VLS_Props = TextInputProps;
+type __VLS_Slots = {
+    /**
+     * El `decorator` de Vuno: un `AILabel` dentro del campo. Se coloca al
+     * final, en el sitio del icono de estado, y los dos se apartan cuando
+     * coinciden.
+     */
+    decorator?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./TextInput.types.js").TextInputSize;
+    inline: boolean;
+    icon: string;
+    invalid: boolean;
+    warn: boolean;
+    type: import("../../types/input.js").TextInputType;
+    placeholder: string;
+    name: string;
+    fluid: boolean;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    passwordToggle: boolean;
+    id: string;
+    ui: import("../../types/control.js").ControlUi<import("./TextInput.types.js").TextInputSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    max: string;
+    autocomplete: string;
+    min: string;
+    autofocus: boolean;
+    enableCounter: boolean;
+    maxCount: number;
+    maxlength: number;
+    hidePasswordLabel: string;
+    showPasswordLabel: 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/Tile/Tile.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TileProps } from './Tile.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TileProps> & Readonly<{}>, {
+    tag: import("vue").Component | 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/Tile/Tile.theme.d.ts

@@ -0,0 +1,106 @@
+export declare const tileTheme: Record<"tile", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly root: "cursor-pointer hover:bg-(--vuno-layer-hover-01)";
+        };
+        readonly disabled: "false";
+        readonly interactive: "true";
+    }, {
+        readonly class: {
+            readonly chevron: "cursor-pointer hover:bg-(--vuno-layer-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
+        };
+        readonly disabled: "false";
+        readonly interactive: "false";
+        readonly variant: "expandable";
+    }, {
+        readonly class: {
+            readonly chevron: "cursor-not-allowed";
+            readonly root: "cursor-default";
+        };
+        readonly disabled: "true";
+        readonly interactive: "false";
+        readonly variant: "expandable";
+    }, {
+        readonly class: {
+            readonly checkmarkIcon: "text-(--vuno-icon-disabled)";
+            readonly root: "border-(--vuno-border-disabled)";
+        };
+        readonly disabled: "true";
+        readonly selected: "true";
+    }];
+    readonly slots: {
+        /** `vuno--tile-content__above-the-fold`: marca el pliegue, no lo maqueta. */
+        readonly above: "block";
+        /** `vuno--tile-content__below-the-fold`. La separación entre pliegues la decide el contenido. */
+        readonly below: "block";
+        readonly checkmark: "absolute end-4 top-4 flex h-4 items-center text-(--vuno-icon-secondary) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+        readonly checkmarkIcon: "size-4";
+        readonly chevron: "absolute end-0 bottom-0 flex h-12 min-w-12 items-center justify-end gap-2 px-4 text-(--vuno-icon-primary)";
+        readonly chevronIcon: "size-4 shrink-0 transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+        readonly chevronLabel: "text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)";
+        /** El `fieldset` de `TileGroup`: solo el reinicio que el sistema de origen le da. */
+        readonly group: "m-0 border-0 p-0";
+        readonly icon: "absolute end-3 bottom-3 size-5 text-(--vuno-icon-interactive)";
+        readonly input: "sr-only";
+        /** `label-01` —12/16 con 0.32 px— y el apagado por herencia del `fieldset`. */
+        readonly legend: "mb-2 text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-secondary) in-[:disabled]:text-(--vuno-text-disabled)";
+        /**
+         * La caja que coloca las tiles del grupo. Una sola columna, que es como
+         * las apila el sistema de origen, y el punto por el que quien compone
+         * pide columnas o separación sin tocar la tile.
+         */
+        readonly options: "grid";
+        readonly panel: "block w-full overflow-hidden opacity-0 transition-all transition-discrete duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+        readonly root: "relative m-0 block min-h-16 min-w-32 border-transparent bg-(--vuno-layer-01) p-4 text-start text-sm/[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary) no-underline outline-solid outline-2 -outline-offset-2 outline-transparent focus:outline-(--vuno-focus)";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly checkmarkIcon: "text-(--vuno-icon-disabled)";
+                readonly chevronIcon: "text-(--vuno-icon-disabled)";
+                readonly chevronLabel: "text-(--vuno-text-disabled)";
+                readonly icon: "hidden";
+                readonly root: "cursor-not-allowed text-(--vuno-text-disabled)";
+            };
+        };
+        readonly expanded: {
+            readonly false: {
+                readonly panel: "hidden max-h-0";
+            };
+            readonly true: {
+                readonly chevronIcon: "rotate-180";
+                readonly panel: "max-h-fit overflow-visible opacity-100 starting:max-h-0 starting:opacity-0";
+            };
+        };
+        /**
+         * La superficie es el control. `ExpandableTile` la pone en `false`
+         * cuando el chevron asume ese papel, y `Tile` no declara la dimensión
+         * porque una tile base no es operable.
+         */
+        readonly interactive: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "transition-colors duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+            };
+        };
+        readonly selected: {
+            readonly false: {};
+            readonly true: {
+                readonly checkmarkIcon: "text-(--vuno-icon-primary)";
+                readonly root: "border border-(--vuno-layer-selected-inverse)";
+            };
+        };
+        readonly variant: {
+            readonly clickable: {
+                readonly root: "hover:no-underline";
+            };
+            readonly expandable: {
+                readonly root: "w-full";
+            };
+            readonly selectable: {
+                readonly root: "border pe-12 has-[input:focus]:outline-(--vuno-focus)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,115 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tileTheme = defineTheme("tile", {
+  compoundVariants: [
+    /* La superficie solo reacciona al puntero mientras es operable. */
+    {
+      class: { root: "cursor-pointer hover:bg-(--vuno-layer-hover-01)" },
+      disabled: "false",
+      interactive: "true"
+    },
+    /*
+     * Cuando el contenido de la tile expandible es interactivo, el control
+     * es el chevron y no la superficie: Vuno le devuelve al botón el
+     * `hover` y el contorno de foco, y se los quita al contenedor.
+     */
+    {
+      class: { chevron: "cursor-pointer hover:bg-(--vuno-layer-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)" },
+      disabled: "false",
+      interactive: "false",
+      variant: "expandable"
+    },
+    /*
+     * Y el bloqueo va al mismo sitio que el control. La superficie conserva
+     * el cursor por defecto —`cursor: default` en el sistema de origen—
+     * porque ahí siguen vivos los enlaces y botones del pliegue superior:
+     * marcarla entera de prohibida mentiría sobre qué está bloqueado.
+     */
+    {
+      class: { chevron: "cursor-not-allowed", root: "cursor-default" },
+      disabled: "true",
+      interactive: "false",
+      variant: "expandable"
+    },
+    /*
+     * Una tile seleccionada y deshabilitada conserva el borde, pero en gris:
+     * Vuno solo le cambia el color para que la selección siga siendo
+     * legible sin anunciarse como operable.
+     */
+    {
+      class: { checkmarkIcon: "text-(--vuno-icon-disabled)", root: "border-(--vuno-border-disabled)" },
+      disabled: "true",
+      selected: "true"
+    }
+  ],
+  slots: {
+    /** `vuno--tile-content__above-the-fold`: marca el pliegue, no lo maqueta. */
+    above: "block",
+    /** `vuno--tile-content__below-the-fold`. La separación entre pliegues la decide el contenido. */
+    below: "block",
+    checkmark: "absolute end-4 top-4 flex h-4 items-center text-(--vuno-icon-secondary) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none",
+    checkmarkIcon: "size-4",
+    chevron: "absolute end-0 bottom-0 flex h-12 min-w-12 items-center justify-end gap-2 px-4 text-(--vuno-icon-primary)",
+    chevronIcon: "size-4 shrink-0 transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none",
+    chevronLabel: "text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)",
+    /** El `fieldset` de `TileGroup`: solo el reinicio que el sistema de origen le da. */
+    group: "m-0 border-0 p-0",
+    icon: "absolute end-3 bottom-3 size-5 text-(--vuno-icon-interactive)",
+    input: "sr-only",
+    /** `label-01` —12/16 con 0.32 px— y el apagado por herencia del `fieldset`. */
+    legend: "mb-2 text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-secondary) in-[:disabled]:text-(--vuno-text-disabled)",
+    /**
+     * La caja que coloca las tiles del grupo. Una sola columna, que es como
+     * las apila el sistema de origen, y el punto por el que quien compone
+     * pide columnas o separación sin tocar la tile.
+     */
+    options: "grid",
+    panel: "block w-full overflow-hidden opacity-0 transition-all transition-discrete duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none",
+    root: "relative m-0 block min-h-16 min-w-32 border-transparent bg-(--vuno-layer-01) p-4 text-start text-sm/[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary) no-underline outline-solid outline-2 -outline-offset-2 outline-transparent focus:outline-(--vuno-focus)"
+  },
+  variants: {
+    disabled: {
+      false: {},
+      /*
+       * `cursor-not-allowed` y no `pointer-events-none`: el cursor de
+       * Vuno solo se ve si el elemento sigue recibiendo el puntero.
+       *
+       * El icono de navegación desaparece en vez de teñirse de gris. Es
+       * lo que hace Vuno hoy —`.vuno--tile--icon { display: none }` bajo
+       * `.vuno--link--disabled`—: la flecha anuncia un destino, y un
+       * destino que no se puede seguir no debe anunciarse. El icono gris
+       * de la pestaña Style pertenece al indicativo de error que solo
+       * aparece con la bandera `enable-v12-tile-default-icons`.
+       */
+      true: { checkmarkIcon: "text-(--vuno-icon-disabled)", chevronIcon: "text-(--vuno-icon-disabled)", chevronLabel: "text-(--vuno-text-disabled)", icon: "hidden", root: "cursor-not-allowed text-(--vuno-text-disabled)" }
+    },
+    expanded: {
+      false: { panel: "hidden max-h-0" },
+      true: { chevronIcon: "rotate-180", panel: "max-h-fit overflow-visible opacity-100 starting:max-h-0 starting:opacity-0" }
+    },
+    /**
+     * La superficie es el control. `ExpandableTile` la pone en `false`
+     * cuando el chevron asume ese papel, y `Tile` no declara la dimensión
+     * porque una tile base no es operable.
+     */
+    interactive: {
+      false: {},
+      true: { root: "transition-colors duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none" }
+    },
+    selected: {
+      false: {},
+      true: { checkmarkIcon: "text-(--vuno-icon-primary)", root: "border border-(--vuno-layer-selected-inverse)" }
+    },
+    variant: {
+      clickable: { root: "hover:no-underline" },
+      /* `inline-size: 100%`, con el chevron de 48 px flotando en la esquina. */
+      expandable: { root: "w-full" },
+      /*
+       * El relleno final reserva la columna de 48 px de la marca, y el
+       * foco se dibuja sobre la superficie porque la casilla que lo
+       * recibe está oculta: es el `.vuno--tile-input:focus + .vuno--tile`
+       * de Vuno.
+       */
+      selectable: { root: "border pe-12 has-[input:focus]:outline-(--vuno-focus)" }
+    }
+  }
+});

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

@@ -0,0 +1,16 @@
+import type { Component } from 'vue';
+import type { ComponentUi } from '#vuno/types/slots';
+export type TileProps = {
+    /**
+     * Raíz alternativa. Vuno siempre emite un `div`, pero una tile base suele
+     * ser el contenedor de una región con nombre —`section`, `article`, `li`—
+     * y forzar un `div` obligaría a envolverla solo para recuperar la
+     * semántica.
+     *
+     * La tile base no es operable: si la raíz pasa a ser un control, el
+     * componente que corresponde es `ClickableTile`, `SelectableTile` o
+     * `ExpandableTile`, que además traen su contrato de teclado.
+     */
+    tag?: Component | string;
+    ui?: ComponentUi<'tile'>;
+};

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

@@ -0,0 +1,19 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "Tile" });
+const props = defineProps({
+  tag: { type: null, required: false, default: "div" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme("tile", () => props.ui);
+</script>
+
+<template>
+    <component
+        :is="props.tag"
+        :class="ui.root"
+    >
+        <slot />
+    </component>
+</template>

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

@@ -0,0 +1,16 @@
+import type { TileProps } from './Tile.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TileProps> & Readonly<{}>, {
+    tag: import("vue").Component | 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/TileAboveTheFoldContent/TileAboveTheFoldContent.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/TileAboveTheFoldContent/TileAboveTheFoldContent.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "TileAboveTheFoldContent" });
+defineSlots();
+const ui = useTheme("tile");
+</script>
+
+<template>
+    <div :class="ui.above">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/TileBelowTheFoldContent/TileBelowTheFoldContent.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};