@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,180 @@
+import { type PropType } from 'vue';
+import type { PortalTarget } from '#vuno/types/base';
+import type { ControlSize, ControlUi, OptionItem, OptionValue } from '#vuno/types/control';
+import type { DropdownDirection, DropdownType } from './Dropdown.types.js';
+type __VLS_Slots = {
+    /** Sustituye el texto de una opción; recibe la opción y su estado. */
+    item?: (props: {
+        highlighted: boolean;
+        item: OptionItem;
+        selected: boolean;
+    }) => unknown;
+    /** Sustituye el texto del disparador cuando hay selección. */
+    selected?: (props: {
+        text: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    direction: {
+        default: string;
+        type: PropType<DropdownDirection>;
+    };
+    disabled: BooleanConstructor;
+    helperText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hideLabel: BooleanConstructor;
+    invalid: BooleanConstructor;
+    invalidText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    items: {
+        required: true;
+        type: PropType<OptionItem[]>;
+    };
+    labelText: {
+        required: true;
+        type: StringConstructor;
+    };
+    modelValue: {
+        default: undefined;
+        type: PropType<OptionValue | OptionValue[] | undefined>;
+    };
+    multiple: BooleanConstructor;
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    portal: {
+        default: undefined;
+        type: PropType<PortalTarget>;
+    };
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    searchable: BooleanConstructor;
+    size: {
+        default: undefined;
+        type: PropType<ControlSize>;
+    };
+    type: {
+        default: string;
+        type: PropType<DropdownType>;
+    };
+    ui: {
+        default: undefined;
+        type: PropType<ControlUi>;
+    };
+    warn: BooleanConstructor;
+    warnText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: OptionValue | OptionValue[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    direction: {
+        default: string;
+        type: PropType<DropdownDirection>;
+    };
+    disabled: BooleanConstructor;
+    helperText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    hideLabel: BooleanConstructor;
+    invalid: BooleanConstructor;
+    invalidText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    items: {
+        required: true;
+        type: PropType<OptionItem[]>;
+    };
+    labelText: {
+        required: true;
+        type: StringConstructor;
+    };
+    modelValue: {
+        default: undefined;
+        type: PropType<OptionValue | OptionValue[] | undefined>;
+    };
+    multiple: BooleanConstructor;
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    portal: {
+        default: undefined;
+        type: PropType<PortalTarget>;
+    };
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    searchable: BooleanConstructor;
+    size: {
+        default: undefined;
+        type: PropType<ControlSize>;
+    };
+    type: {
+        default: string;
+        type: PropType<DropdownType>;
+    };
+    ui: {
+        default: undefined;
+        type: PropType<ControlUi>;
+    };
+    warn: BooleanConstructor;
+    warnText: {
+        default: undefined;
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: OptionValue | OptionValue[] | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    type: DropdownType;
+    direction: DropdownDirection;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<string, string>>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    modelValue: OptionValue | OptionValue[] | undefined;
+    portal: PortalTarget;
+    multiple: boolean;
+    searchable: boolean;
+}, {}, {}, {}, 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/Dropdown/Dropdown.theme.d.ts

@@ -0,0 +1,109 @@
+export declare const dropdownTheme: Record<"dropdown", {
+    readonly slots: {
+        /**
+         * El aspa de limpiar del combobox y del multiselect filtrable.
+         *
+         * Lo único que añade al disparador es el filete vertical que el sistema
+         * de origen dibuja entre el aspa y el chevron. Va como pseudoelemento y
+         * con desplazamiento negativo para que caiga dentro del hueco de 8 px
+         * que ya deja el `gap` y no ensanche la fila: en el sistema de origen es
+         * un `::after` de la propia aspa, no una caja más en el flujo.
+         */
+        readonly clear: "relative after:absolute after:top-1/2 after:-end-1 after:h-4 after:w-px after:-translate-y-1/2 after:bg-(--vuno-border-subtle-01)";
+        readonly content: "z-dropdown w-(--vuno-dropdown-width,16rem) overflow-y-auto bg-(--vuno-layer-01) shadow-[0_2px_6px_var(--vuno-shadow)] outline-none";
+        readonly control: "pe-3 text-sm leading-[1.125rem] tracking-[0.16px] transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) data-trailing:pe-3 data-expanded:border-(--vuno-border-subtle-01) hover:bg-(--vuno-field-hover-01) data-expanded:hover:bg-(--vuno-field-01) data-disabled:border-transparent data-disabled:outline-none has-disabled:hover:bg-(--vuno-field-01) motion-reduce:transition-none";
+        readonly empty: "px-4 py-3 text-(--vuno-text-helper)";
+        readonly field: "flex w-full min-w-0 cursor-pointer items-center gap-2 self-stretch bg-transparent text-start outline-none disabled:cursor-not-allowed";
+        /**
+         * `vuno--form__helper-text`.
+         *
+         * 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: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+        readonly input: "w-full min-w-0 bg-transparent py-1 text-(--vuno-text-primary) outline-none placeholder:text-(--vuno-text-placeholder) disabled:cursor-not-allowed";
+        readonly item: "relative flex cursor-pointer items-center justify-between gap-2 px-4 text-sm leading-4 tracking-[0.16px] text-(--vuno-text-secondary) outline-none transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) first:before:hidden before:absolute before:inset-x-4 before:top-0 before:h-px before:bg-(--vuno-border-subtle-01) before:transition-colors before:duration-(--vuno-duration-fast-01) before:ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) hover:before:bg-transparent active:bg-(--vuno-layer-selected-01) data-disabled:cursor-not-allowed data-disabled:text-(--vuno-text-disabled) data-highlighted:text-(--vuno-text-primary) data-highlighted:outline-2 data-highlighted:-outline-offset-2 data-highlighted:outline-solid data-highlighted:outline-(--vuno-focus) data-highlighted:before:bg-transparent data-selected:bg-(--vuno-layer-selected-01) data-selected:text-(--vuno-text-primary) data-selected:before:bg-transparent data-selected:hover:bg-(--vuno-layer-selected-hover-01) [&:hover+li]:before:bg-transparent [&[data-highlighted]+li]:before:bg-transparent [&[data-selected]+li]:before:bg-transparent motion-reduce:transition-none motion-reduce:before:transition-none";
+        readonly itemIcon: "size-4";
+        /** La marca de lo elegido: negra como el texto, no azul de enlace. */
+        readonly itemIndicator: "shrink-0 text-(--vuno-icon-primary)";
+        /** El texto de lo elegido dentro del disparador; se recorta antes que la caja. */
+        readonly label: "min-w-0 flex-1 truncate";
+        readonly message: "text-(--vuno-text-error)";
+        /** Cuando no hay nada elegido, el texto del disparador es una sugerencia. */
+        readonly placeholder: "text-(--vuno-text-placeholder)";
+        /**
+         * El icono de error o de aviso, delante del chevron.
+         *
+         * El color lo pone la variante del estado y no esta clave: son dos
+         * tokens distintos y una sola clase base evita mantener dos ranuras
+         * que solo se diferencian en el color.
+         */
+        readonly stateIcon: "size-4 shrink-0";
+        /** El título del campo. Existe para que la variante inline lo recoloque. */
+        readonly title: "";
+        /**
+         * El chevron. Gira al abrir, como en Vuno.
+         *
+         * La caja mide 24 px aunque el glifo mida 16: es el objetivo de
+         * pulsación del sistema de origen, y en el combobox y el multiselect
+         * filtrable ese chevron es un botón propio. Con el relleno final de 12
+         * px del campo, una caja de 24 deja el glifo a los 16 px que pide la
+         * retícula.
+         *
+         * `data-disabled` existe porque en el desplegable y en el multiselect
+         * no filtrable el chevron es un `span` dentro del botón, y ahí la
+         * variante `disabled:` no puede activarse nunca.
+         */
+        readonly trigger: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center text-(--vuno-icon-primary) transition-transform duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled) data-disabled:text-(--vuno-icon-disabled) data-open:rotate-180 motion-reduce:transition-none";
+        readonly triggerIcon: "size-4";
+        /** El aviso no es un fallo: el sistema de origen lo deja en el texto normal y solo tiñe el icono. */
+        readonly warning: "text-(--vuno-text-primary)";
+        readonly wrapper: "w-full min-w-0";
+    };
+    readonly variants: {
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "border-(--vuno-support-error) outline-2 -outline-offset-2 outline-(--vuno-support-error)";
+                readonly stateIcon: "text-(--vuno-support-error)";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "border-(--vuno-border-subtle-01) bg-transparent hover:bg-transparent";
+                readonly trigger: "text-(--vuno-icon-disabled)";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly content: "max-h-[min(11rem,var(--vuno-dropdown-available-height,11rem))]";
+                readonly item: "min-h-8";
+            };
+            readonly md: {
+                readonly content: "max-h-[min(13.75rem,var(--vuno-dropdown-available-height,13.75rem))]";
+                readonly item: "min-h-10";
+            };
+            readonly lg: {
+                readonly content: "max-h-[min(16.5rem,var(--vuno-dropdown-available-height,16.5rem))]";
+                readonly item: "min-h-12";
+            };
+        };
+        readonly type: {
+            readonly default: {};
+            readonly inline: {
+                readonly control: "w-auto border-b-0 bg-transparent ps-2 pe-2 hover:bg-(--vuno-layer-hover-01) data-expanded:hover:bg-transparent";
+                readonly helper: "col-span-2 mt-0";
+                readonly title: "mb-0 text-sm leading-[1.125rem] tracking-[0.16px]";
+                readonly wrapper: "inline-grid w-auto min-w-0 grid-cols-[auto_auto] items-center gap-x-1";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly stateIcon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,206 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const dropdownTheme = defineTheme("dropdown", {
+  slots: {
+    /**
+     * El aspa de limpiar del combobox y del multiselect filtrable.
+     *
+     * Lo único que añade al disparador es el filete vertical que el sistema
+     * de origen dibuja entre el aspa y el chevron. Va como pseudoelemento y
+     * con desplazamiento negativo para que caiga dentro del hueco de 8 px
+     * que ya deja el `gap` y no ensanche la fila: en el sistema de origen es
+     * un `::after` de la propia aspa, no una caja más en el flujo.
+     */
+    clear: "relative after:absolute after:top-1/2 after:-end-1 after:h-4 after:w-px after:-translate-y-1/2 after:bg-(--vuno-border-subtle-01)",
+    /*
+     * La lista es a la vez la caja y lo que se desplaza: ya no hay un
+     * viewport dentro, así que el alto máximo y el `overflow` van en el
+     * mismo elemento y no hay dos cajas que sumar.
+     *
+     * Las dos medidas las publica el componente al colocarla:
+     * `--vuno-dropdown-width` es el ancho del campo, para que la lista
+     * mida lo mismo, y `--vuno-dropdown-available-height` es el hueco que
+     * queda hasta el borde —la ventana, o el diálogo si lo hay—. El
+     * respaldo de las dos importa: se leen antes del primer cálculo, y
+     * sin él la lista aparecería sin ancho durante un fotograma.
+     *
+     * El alto máximo lo fija la variante de tamaño: Vuno lo define en
+     * unidades de fila —cinco y media, para que la sexta se vea cortada y
+     * se entienda que la lista sigue—, y una fila mide distinto en cada
+     * tamaño.
+     *
+     * La sombra es la del sistema de origen —2 px de desplazamiento y 6 de
+     * desenfoque— y no la de Tailwind, que flota cuatro veces más alto.
+     */
+    content: "z-dropdown w-(--vuno-dropdown-width,16rem) overflow-y-auto bg-(--vuno-layer-01) shadow-[0_2px_6px_var(--vuno-shadow)] outline-none",
+    /*
+     * Lo que esta clave añade a la caja compartida de `PrimitiveControl`:
+     * el hueco del chevron al final, la tipografía del campo, la respuesta
+     * al puntero y lo que cambia por estado —aviso, error, solo lectura,
+     * desplegado— o por variante inline.
+     *
+     * Va aquí y no en el tema `control` porque esa caja la comparten el
+     * input, el área de texto y este combobox, y ninguno de esos tres
+     * quiere el fondo transparente de solo lectura ni el aclarado del
+     * borde al desplegar.
+     *
+     * `pe-3` se repite bajo `data-trailing` porque la caja compartida anula
+     * su relleno final cuando hay una acción al final, y aquí esa acción es
+     * el chevron, que sí conserva su hueco.
+     *
+     * Deshabilitado retira el filete inferior y cualquier contorno, como en
+     * el sistema de origen: un campo apagado no señala un error que ya no
+     * se puede corregir. Lo marca la caja con `data-disabled` y no un
+     * `has-[]`, porque el aspa y el chevron también se deshabilitan en solo
+     * lectura y el selector de ancestro apagaría entonces un campo que sí
+     * se puede leer. El atributo suma además una pseudoclase, así que gana
+     * al borde y al contorno del estado inválido sin depender del orden.
+     *
+     * El tamaño del texto se fija aquí para los tres pasos: el sistema de
+     * origen escribe el campo en `body-compact-01` sin variante por tamaño,
+     * y la caja compartida lo bajaría a 12 px en `sm`.
+     */
+    control: "pe-3 text-sm leading-[1.125rem] tracking-[0.16px] transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) data-trailing:pe-3 data-expanded:border-(--vuno-border-subtle-01) hover:bg-(--vuno-field-hover-01) data-expanded:hover:bg-(--vuno-field-01) data-disabled:border-transparent data-disabled:outline-none has-disabled:hover:bg-(--vuno-field-01) motion-reduce:transition-none",
+    empty: "px-4 py-3 text-(--vuno-text-helper)",
+    /*
+     * El disparador cuando no se teclea: un `button` con `role="combobox"`
+     * que ocupa el campo entero y lleva dentro la etiqueta elegida, el
+     * icono de estado y el chevron.
+     *
+     * Los tres van **dentro** del botón, como en Vuno, y no como
+     * hermanos suyos: un botón anidado en otro botón es HTML inválido, y
+     * dejar el chevron fuera lo volvería una zona muerta justo donde todo
+     * el mundo pincha.
+     *
+     * El cursor se escribe: el preflight de Tailwind ya no lo pone en los
+     * botones, y este campo es pulsable en toda su superficie.
+     */
+    field: "flex w-full min-w-0 cursor-pointer items-center gap-2 self-stretch bg-transparent text-start outline-none disabled:cursor-not-allowed",
+    /**
+     * `vuno--form__helper-text`.
+     *
+     * 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: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    /*
+     * El campo donde se teclea, solo en la variante con búsqueda. Es casi
+     * lo mismo que `input.base` —solo añade el relleno vertical—, y esa
+     * cercanía es a propósito: un combobox tiene que parecerse a un input
+     * hasta en el detalle. Si divergen, se unifican.
+     */
+    input: "w-full min-w-0 bg-transparent py-1 text-(--vuno-text-primary) outline-none placeholder:text-(--vuno-text-placeholder) disabled:cursor-not-allowed",
+    /*
+     * La opción de la lista.
+     *
+     * El filete que separa dos opciones va **arriba** y sangrado 16 px por
+     * cada lado, como en el sistema de origen, donde lo lleva la caja
+     * interior de la opción y no el `li`. Aquí lo dibuja un pseudoelemento
+     * en vez de una caja más: la línea no ocupa alto, el DOM se queda plano
+     * y la fila sigue midiendo exactamente lo que mide el campo.
+     *
+     * Esa línea desaparece en los mismos cinco sitios que en el sistema de
+     * origen: en la primera opción, en la que tiene el puntero encima y en
+     * la siguiente, y en la resaltada o elegida y en la siguiente. De ahí
+     * los selectores `+li`: una fila con fondo propio tiene que salir como
+     * un bloque limpio y no partida por dos rayas.
+     *
+     * El reposo es texto secundario y el puntero lo sube a primario: esa es
+     * la jerarquía con la que el sistema de origen señala la fila bajo el
+     * cursor. El resaltado del teclado no pinta fondo, dibuja el contorno
+     * de foco, para que se distinga de la fila apuntada. Ese contorno
+     * necesita reponer `outline-solid`: `outline-none` fija el estilo de
+     * contorno en la propia caja y sin reponerlo el ancho no dibuja nada.
+     */
+    item: "relative flex cursor-pointer items-center justify-between gap-2 px-4 text-sm leading-4 tracking-[0.16px] text-(--vuno-text-secondary) outline-none transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) first:before:hidden before:absolute before:inset-x-4 before:top-0 before:h-px before:bg-(--vuno-border-subtle-01) before:transition-colors before:duration-(--vuno-duration-fast-01) before:ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) hover:before:bg-transparent active:bg-(--vuno-layer-selected-01) data-disabled:cursor-not-allowed data-disabled:text-(--vuno-text-disabled) data-highlighted:text-(--vuno-text-primary) data-highlighted:outline-2 data-highlighted:-outline-offset-2 data-highlighted:outline-solid data-highlighted:outline-(--vuno-focus) data-highlighted:before:bg-transparent data-selected:bg-(--vuno-layer-selected-01) data-selected:text-(--vuno-text-primary) data-selected:before:bg-transparent data-selected:hover:bg-(--vuno-layer-selected-hover-01) [&:hover+li]:before:bg-transparent [&[data-highlighted]+li]:before:bg-transparent [&[data-selected]+li]:before:bg-transparent motion-reduce:transition-none motion-reduce:before:transition-none",
+    itemIcon: "size-4",
+    /** La marca de lo elegido: negra como el texto, no azul de enlace. */
+    itemIndicator: "shrink-0 text-(--vuno-icon-primary)",
+    /** El texto de lo elegido dentro del disparador; se recorta antes que la caja. */
+    label: "min-w-0 flex-1 truncate",
+    message: "text-(--vuno-text-error)",
+    /** Cuando no hay nada elegido, el texto del disparador es una sugerencia. */
+    placeholder: "text-(--vuno-text-placeholder)",
+    /**
+     * El icono de error o de aviso, delante del chevron.
+     *
+     * El color lo pone la variante del estado y no esta clave: son dos
+     * tokens distintos y una sola clase base evita mantener dos ranuras
+     * que solo se diferencian en el color.
+     */
+    stateIcon: "size-4 shrink-0",
+    /** El título del campo. Existe para que la variante inline lo recoloque. */
+    title: "",
+    /**
+     * El chevron. Gira al abrir, como en Vuno.
+     *
+     * La caja mide 24 px aunque el glifo mida 16: es el objetivo de
+     * pulsación del sistema de origen, y en el combobox y el multiselect
+     * filtrable ese chevron es un botón propio. Con el relleno final de 12
+     * px del campo, una caja de 24 deja el glifo a los 16 px que pide la
+     * retícula.
+     *
+     * `data-disabled` existe porque en el desplegable y en el multiselect
+     * no filtrable el chevron es un `span` dentro del botón, y ahí la
+     * variante `disabled:` no puede activarse nunca.
+     */
+    trigger: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center text-(--vuno-icon-primary) transition-transform duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) disabled:cursor-not-allowed disabled:text-(--vuno-icon-disabled) data-disabled:text-(--vuno-icon-disabled) data-open:rotate-180 motion-reduce:transition-none",
+    triggerIcon: "size-4",
+    /** El aviso no es un fallo: el sistema de origen lo deja en el texto normal y solo tiñe el icono. */
+    warning: "text-(--vuno-text-primary)",
+    wrapper: "w-full min-w-0"
+  },
+  variants: {
+    invalid: {
+      false: {},
+      true: { control: "border-(--vuno-support-error) outline-2 -outline-offset-2 outline-(--vuno-support-error)", stateIcon: "text-(--vuno-support-error)" }
+    },
+    readOnly: {
+      false: {},
+      true: { control: "border-(--vuno-border-subtle-01) bg-transparent hover:bg-transparent", trigger: "text-(--vuno-icon-disabled)" }
+    },
+    /*
+     * La opción, el chevron y el alto de la lista siguen al tamaño del
+     * campo: una fila de la lista mide lo mismo que el campo —es la regla
+     * de Vuno—, y con un texto fijo un dropdown `sm` abriría una lista
+     * con la letra más grande que su propio disparador.
+     *
+     * Lo que cambia con el tamaño es solo el alto de la fila: el sistema
+     * de origen escribe la opción en `body-compact-01` en los tres pasos.
+     */
+    size: {
+      sm: { content: "max-h-[min(11rem,var(--vuno-dropdown-available-height,11rem))]", item: "min-h-8" },
+      md: { content: "max-h-[min(13.75rem,var(--vuno-dropdown-available-height,13.75rem))]", item: "min-h-10" },
+      lg: { content: "max-h-[min(16.5rem,var(--vuno-dropdown-available-height,16.5rem))]", item: "min-h-12" }
+    },
+    /*
+     * Inline no es un adorno: cambia la disposición. El título deja de
+     * estar encima para ponerse al lado, el campo pierde fondo y borde y
+     * pasa a medir lo que mide su contenido, y el mensaje vuelve a ocupar
+     * la línea entera debajo de los dos.
+     *
+     * Se resuelve con una rejilla de dos columnas en el contenedor, que es
+     * lo que hace Vuno, y no midiendo nada en JavaScript.
+     *
+     * Aquí el rótulo comparte línea con el campo, así que sube a la misma
+     * tipografía que él en vez de quedarse en la del rótulo apilado.
+     */
+    type: {
+      default: {},
+      inline: {
+        control: "w-auto border-b-0 bg-transparent ps-2 pe-2 hover:bg-(--vuno-layer-hover-01) data-expanded:hover:bg-transparent",
+        helper: "col-span-2 mt-0",
+        title: "mb-0 text-sm leading-[1.125rem] tracking-[0.16px]",
+        wrapper: "inline-grid w-auto min-w-0 grid-cols-[auto_auto] items-center gap-x-1"
+      }
+    },
+    /*
+     * El aviso no toca el borde del campo: el sistema de origen lo deja en
+     * `border-strong` y solo pinta de amarillo el icono de estado.
+     */
+    warn: {
+      false: {},
+      true: { stateIcon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,65 @@
+import type { PortalTarget } from '#vuno/types/base';
+import type { ControlSize, ControlUi, OptionItem, OptionValue } from '#vuno/types/control';
+/**
+ * Hacia dónde se abre la lista. Vuno lo llama `direction` y admite solo
+ * estos dos valores; el volteo automático sigue actuando cuando no cabe.
+ */
+export type DropdownDirection = 'bottom' | 'top';
+/**
+ * La disposición del campo.
+ *
+ * `default` apila título, campo y mensaje. `inline` —el *inline dropdown* de
+ * Vuno— pone el título al lado, quita el fondo y el borde del campo y lo
+ * deja medir lo que mide su contenido, para incrustarlo en una frase o en una
+ * barra de herramientas.
+ */
+export type DropdownType = 'default' | 'inline';
+/**
+ * Las clases que acepta `ui`.
+ *
+ * Se declaran una a una en vez de derivarlas del tema porque este tipo es
+ * contrato público: si mañana el tema añade una ranura interna, añadirla aquí
+ * tiene que ser una decisión y no un efecto secundario.
+ */
+export type DropdownSlot = 'clear' | 'content' | 'control' | 'empty' | 'field' | 'helper' | 'input' | 'item' | 'itemIcon' | 'itemIndicator' | 'label' | 'message' | 'placeholder' | 'stateIcon' | 'title' | 'trigger' | 'triggerIcon' | 'warning' | 'wrapper';
+export type DropdownProps = {
+    id?: string;
+    name?: string;
+    direction?: DropdownDirection;
+    disabled?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    items: OptionItem[];
+    labelText: string;
+    /**
+     * Permite varias selecciones en el mismo control y convierte el modelo en
+     * un array.
+     *
+     * No es el `MultiSelect` de Vuno —ese trae casillas, recuento y su propio
+     * texto de selección—, sino la capacidad mínima del desplegable, que el
+     * runtime ya implementa.
+     */
+    multiple?: boolean;
+    /** El texto del campo cuando no hay nada elegido; el `label` de Vuno. */
+    placeholder?: string;
+    portal?: PortalTarget;
+    /**
+     * Muestra el valor sin permitir abrir la lista.
+     *
+     * No es `disabled`: el campo conserva el foco y el contraste del texto,
+     * y se anuncia con `aria-disabled`, para que quien navega con teclado o
+     * lector de pantalla pueda leer lo que hay elegido.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    /** Añade un filtro por texto dentro de la lista, sin cambiar el disparador. */
+    searchable?: boolean;
+    size?: ControlSize;
+    type?: DropdownType;
+    ui?: ControlUi<DropdownSlot>;
+    warn?: boolean;
+    warnText?: string;
+};
+export type DropdownValue = OptionValue;