@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { resolveColumnGeometry } from "./span";
+defineOptions({ name: "Column" });
+const props = defineProps({
+  sm: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  md: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  lg: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  as: { type: null, required: false, default: "div" },
+  max: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  span: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  xlg: { type: [Object, Boolean, String, Number], required: false, default: void 0 }
+});
+defineSlots();
+const geometry = computed(() => resolveColumnGeometry(props));
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        :data-spans="geometry.spans || void 0"
+        data-vuno-column
+        :style="geometry.variables"
+    >
+        <slot />
+    </component>
+</template>
+
+<style scoped>
+[data-vuno-column]{--vuno-grid-mode-start:var(--vuno-grid-gutter-start);--vuno-grid-mode-end:var(--vuno-grid-gutter-end);grid-column-end:var(--vuno-column-end-sm,auto);grid-column-start:var(--vuno-column-start-sm,auto);margin-inline:var(--vuno-grid-gutter-start) var(--vuno-grid-gutter-end)}[data-vuno-column][data-spans~=sm]{--vuno-grid-columns:var(--vuno-column-columns-sm);display:var(--vuno-column-display-sm)}@media (min-width:42rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-md,auto);grid-column-start:var(--vuno-column-start-md,auto)}[data-vuno-column][data-spans~=md]{--vuno-grid-columns:var(--vuno-column-columns-md);display:var(--vuno-column-display-md)}}@media (min-width:66rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-lg,auto);grid-column-start:var(--vuno-column-start-lg,auto)}[data-vuno-column][data-spans~=lg]{--vuno-grid-columns:var(--vuno-column-columns-lg);display:var(--vuno-column-display-lg)}}@media (min-width:82rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-xlg,auto);grid-column-start:var(--vuno-column-start-xlg,auto)}[data-vuno-column][data-spans~=xlg]{--vuno-grid-columns:var(--vuno-column-columns-xlg);display:var(--vuno-column-display-xlg)}}@media (min-width:99rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-max,auto);grid-column-start:var(--vuno-column-start-max,auto)}[data-vuno-column][data-spans~=max]{--vuno-grid-columns:var(--vuno-column-columns-max);display:var(--vuno-column-display-max)}}
+</style>

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

@@ -0,0 +1,21 @@
+import type { ColumnProps } from './Column.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+    sm: import("./Column.types.js").ColumnValue;
+    md: import("./Column.types.js").ColumnValue;
+    lg: import("./Column.types.js").ColumnValue;
+    span: import("./Column.types.js").ColumnValue;
+    as: import("vue").Component | string;
+    max: import("./Column.types.js").ColumnValue;
+    xlg: import("./Column.types.js").ColumnValue;
+}, {}, {}, {}, 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/Column/span.d.ts

@@ -0,0 +1,22 @@
+import type { ColumnBreakpoint, ColumnProps } from './Column.types.js';
+/** De menor a mayor: el orden en que un valor se arrastra hacia arriba. */
+export declare const columnBreakpoints: readonly ColumnBreakpoint[];
+/** Variables y puntos de ruptura activos que `Column` lleva al marcado. */
+export type ColumnGeometry = {
+    /** Los puntos de ruptura que fijan ancho o visibilidad, separados por espacio. */
+    spans: string;
+    variables: Record<string, number | string>;
+};
+/**
+ * Resuelve la geometría de la columna en los cinco puntos de ruptura.
+ *
+ * Vuno emite una clase por punto de ruptura y deja que la cascada complete los
+ * huecos: `sm={4}` sin más vale a cualquier ancho porque su regla no lleva
+ * consulta de medios. Aquí el arrastre se hace antes, al resolver, para que cada
+ * punto de ruptura publique su valor efectivo completo. El resultado visible es
+ * el mismo y la hoja de estilos deja de depender del orden de sus reglas.
+ *
+ * La precedencia es la de Vuno en la práctica: `span` es el valor de partida y
+ * el punto de ruptura declarado más cercano por debajo lo sustituye.
+ */
+export declare function resolveColumnGeometry(props: Pick<ColumnProps, 'lg' | 'max' | 'md' | 'sm' | 'span' | 'xlg'>): ColumnGeometry;

package/dist/runtime/app/components/Column/span.js

@@ -0,0 +1,42 @@
+export const columnBreakpoints = ["sm", "md", "lg", "xlg", "max"];
+const breakpointColumns = { sm: 4, md: 8, lg: 16, max: 16, xlg: 16 };
+const percentFractions = { "25%": 0.25, "50%": 0.5, "75%": 0.75, "100%": 1 };
+export function resolveColumnGeometry(props) {
+  const spans = [];
+  const variables = {};
+  let inherited = {};
+  for (const breakpoint of columnBreakpoints) {
+    const columns = breakpointColumns[breakpoint];
+    inherited = { ...inherited, ...resolvePlacement(props[breakpoint], columns) };
+    const placement = { ...resolvePlacement(props.span, columns), ...inherited };
+    if (placement.start) variables[`--vuno-column-start-${breakpoint}`] = placement.start;
+    if (placement.end) variables[`--vuno-column-end-${breakpoint}`] = placement.end;
+    if (placement.columns === void 0 && !placement.display) continue;
+    spans.push(breakpoint);
+    variables[`--vuno-column-columns-${breakpoint}`] = placement.columns ?? 0;
+    variables[`--vuno-column-display-${breakpoint}`] = placement.display ?? "block";
+  }
+  return { spans: spans.join(" "), variables };
+}
+function trackSpan(span) {
+  return { columns: span, end: `span ${span}`, start: `span ${span}` };
+}
+function resolveSpan(span, columns) {
+  if (span === void 0 || typeof span === "boolean") return span ? { end: "auto", start: "auto" } : {};
+  if (typeof span === "string") {
+    if (span === "100%") return { end: "-1", start: "1" };
+    return trackSpan(Math.round(columns * percentFractions[span]));
+  }
+  if (span <= 0) return { display: "none" };
+  return { ...trackSpan(span), display: "block" };
+}
+function resolvePlacement(value, columns) {
+  if (value === void 0 || value === null) return {};
+  if (typeof value === "boolean") return value ? { end: "auto", start: "auto" } : {};
+  if (typeof value === "number" || typeof value === "string") return resolveSpan(value, columns);
+  const placement = resolveSpan(value.span, columns);
+  if (typeof value.offset === "number") placement.start = value.offset > 0 ? String(value.offset + 1) : "auto";
+  if (typeof value.start === "number") placement.start = value.start > 0 ? String(value.start) : "auto";
+  if (typeof value.end === "number") placement.end = String(value.end);
+  return placement;
+}

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

@@ -0,0 +1,55 @@
+import type { OptionItem } from '#vuno/types/control';
+import type { ComboBoxProps, ComboBoxValue } from './ComboBox.types.js';
+type __VLS_Props = ComboBoxProps;
+type __VLS_Slots = {
+    /** Lo que Vuno llama `decorator`: un `AILabel` u otra marca dentro del campo. */
+    decorator?: () => unknown;
+    /** Sustituye el texto de una opción; recibe la opción y su estado. */
+    item?: (props: {
+        highlighted: boolean;
+        item: OptionItem;
+        selected: boolean;
+    }) => unknown;
+};
+declare function focus(): void;
+type __VLS_ModelProps = {
+    modelValue?: ComboBoxValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("#vuno/types/control").OptionValue | undefined) => any;
+    inputChange: (query: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("#vuno/types/control").OptionValue | undefined) => any) | undefined;
+    onInputChange?: ((query: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("#vuno/types/control").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    direction: import("./ComboBox.types.js").ComboBoxDirection;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<import("./ComboBox.types.js").ComboBoxSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    portal: import("../../types/base.js").PortalTarget;
+    allowCustomValue: boolean;
+    shouldFilterItem: import("./ComboBox.types.js").ComboBoxFilter;
+    typeahead: boolean;
+}, {}, {}, {}, 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/ComboBox/ComboBox.types.d.ts

@@ -0,0 +1,69 @@
+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 ComboBoxDirection = 'bottom' | 'top';
+/**
+ * Predicado de filtrado, el `shouldFilterItem` de Vuno.
+ *
+ * Recibe el texto escrito sin espacios en los bordes. Devolver `true`
+ * conserva la opción. El respaldo compara sin distinguir mayúsculas ni
+ * acentos, que es lo que espera quien escribe «jose» buscando «José».
+ */
+export type ComboBoxFilter = (item: OptionItem, query: string) => boolean;
+/**
+ * Las clases que acepta `ui`.
+ *
+ * Reutiliza los nombres del tema `dropdown` porque el combobox es la misma
+ * anatomía de Vuno —campo, disparador y lista— y hereda sus clases por
+ * defecto. `warning` es propia: un aviso no es un error y no debe pintarse
+ * con el mismo token.
+ */
+export type ComboBoxSlot = 'clear' | 'content' | 'control' | 'empty' | 'helper' | 'input' | 'item' | 'itemIcon' | 'itemIndicator' | 'message' | 'stateIcon' | 'trigger' | 'triggerIcon' | 'warning' | 'wrapper';
+export type ComboBoxProps = {
+    id?: string;
+    name?: string;
+    /**
+     * Acepta texto que no coincide con ninguna opción.
+     *
+     * Sin esto, lo escrito que no encaja se descarta al salir del campo y el
+     * modelo vuelve a la selección anterior, que es lo que hace Vuno por
+     * defecto. Con esto, ese texto se guarda como valor.
+     */
+    allowCustomValue?: boolean;
+    direction?: ComboBoxDirection;
+    disabled?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    items: OptionItem[];
+    labelText: string;
+    placeholder?: string;
+    portal?: PortalTarget;
+    /** Muestra el valor sin permitir escribir ni abrir la lista. */
+    readonly?: boolean;
+    required?: boolean;
+    shouldFilterItem?: ComboBoxFilter;
+    size?: ControlSize;
+    /**
+     * Completa el campo con la primera opción que empieza por lo escrito y
+     * deja seleccionado lo añadido; `Tab` acepta la sugerencia.
+     *
+     * Como en Vuno, activarlo sustituye el filtro por una comparación por
+     * prefijo: sugerir una opción que la lista no muestra sería incoherente.
+     */
+    typeahead?: boolean;
+    ui?: ControlUi<ComboBoxSlot>;
+    warn?: boolean;
+    warnText?: string;
+};
+/**
+ * El valor del combobox.
+ *
+ * Es el valor de la opción elegida o, con `allowCustomValue`, la cadena que
+ * se escribió. `undefined` significa que no hay selección.
+ */
+export type ComboBoxValue = OptionValue;

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

@@ -0,0 +1,290 @@
+<script setup>
+import { size as sizeMiddleware } from "@floating-ui/dom";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useId, useTemplateRef, watch } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
+import { usePortal } from "#vuno/composables/internal/usePortal";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import { toOptionKey } from "#vuno/components/Dropdown/option";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import { useComboBoxState } from "./useComboBoxState";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ComboBox", 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 },
+  allowCustomValue: { type: Boolean, required: false, default: false },
+  direction: { type: String, required: false, default: "bottom" },
+  disabled: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  items: { type: Array, required: true },
+  labelText: { type: String, required: true },
+  placeholder: { type: String, required: false, default: void 0 },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  shouldFilterItem: { type: Function, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  typeahead: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["inputChange"]);
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const portalTarget = usePortal(() => props.portal);
+const uid = useId();
+const listId = `${uid}-list`;
+const labelId = `${uid}-label`;
+const messageId = `${uid}-message`;
+const boundary = shallowRef(void 0);
+const control = useTemplateRef("control");
+const input = useTemplateRef("input");
+const list = useTemplateRef("list");
+const mounted = shallowRef(false);
+const root = useTemplateRef("root");
+const controlId = computed(() => props.id ?? `${uid}-control`);
+const ui = useTheme(
+  "dropdown",
+  () => props.ui,
+  () => ({ invalid: props.invalid ? "true" : "false", readOnly: props.readonly ? "true" : "false", size: props.size, warn: props.warn && !props.invalid ? "true" : "false" })
+);
+const message = computed(() => props.invalid ? props.invalidText : props.warn ? props.warnText : props.helperText);
+const stateIcon = computed(() => props.invalid ? icons.value.notifyError : props.warn ? icons.value.notifyWarning : void 0);
+const clearClass = computed(() => cn(ui.value.trigger, ui.value.clear, "me-0", props.readonly && "text-(--vuno-icon-disabled) disabled:cursor-default"));
+const triggerClass = computed(() => cn(ui.value.trigger, "disabled:text-(--vuno-icon-disabled)"));
+const optionId = (key) => `${uid}-${key.replace(/[^\w-]/g, "_")}`;
+const { onFocusout, onInput, onKeydown, activeKey, choose, clear, clearable, close, highlighted, isSelected, open, text, toggle, visibleItems } = useComboBoxState({
+  onQuery: (query) => emit("inputChange", query),
+  model,
+  optionId,
+  allowCustomValue: () => props.allowCustomValue,
+  disabled: () => props.disabled,
+  filter: () => props.shouldFilterItem,
+  input: () => input.value ?? void 0,
+  items: () => props.items,
+  list: () => list.value ?? void 0,
+  readonly: () => props.readonly,
+  typeahead: () => props.typeahead
+});
+const { anchor, release } = useAnchor({
+  boundary: () => boundary.value,
+  middleware: () => [
+    sizeMiddleware({
+      boundary: boundary.value,
+      padding: 8,
+      apply: ({ availableHeight, elements, rects }) => {
+        elements.floating.style.setProperty("--vuno-dropdown-width", `${rects.reference.width}px`);
+        elements.floating.style.setProperty("--vuno-dropdown-available-height", `${availableHeight}px`);
+      }
+    })
+  ],
+  placement: () => props.direction === "top" ? "top-start" : "bottom-start"
+});
+function onPointerDownOutside(event) {
+  const target = event.target;
+  if (!target) return;
+  if (root.value?.contains(target) || list.value?.contains(target)) return;
+  close();
+}
+function place() {
+  anchor(control.value?.$el, list.value ?? void 0);
+}
+function focus() {
+  input.value?.focus();
+}
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    release();
+    document.removeEventListener("pointerdown", onPointerDownOutside, true);
+    return;
+  }
+  boundary.value = control.value?.$el?.closest("dialog") ?? void 0;
+  void nextTick(() => {
+    place();
+    document.addEventListener("pointerdown", onPointerDownOutside, true);
+  });
+});
+onMounted(() => mounted.value = true);
+onBeforeUnmount(() => {
+  release();
+  document.removeEventListener("pointerdown", onPointerDownOutside, true);
+});
+defineExpose({ focus });
+</script>
+
+<template>
+    <div
+        ref="root"
+        :class="ui.wrapper"
+        @focusout="onFocusout($event, root ?? void 0)"
+    >
+        <FormLabel
+            :id="labelId"
+            :disabled="props.disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="props.invalid"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <PrimitiveControl
+            ref="control"
+            :data-disabled="props.disabled || void 0"
+            :data-expanded="open || void 0"
+            :data-readonly="props.readonly || void 0"
+            :size="props.size"
+            :ui="{ root: ui.control }"
+        >
+            <input
+                v-bind="$attrs"
+                :id="controlId"
+                ref="input"
+                :aria-activedescendant="open && activeKey ? optionId(activeKey) : void 0"
+                :aria-autocomplete="props.typeahead ? 'both' : 'list'"
+                :aria-controls="listId"
+                :aria-describedby="message ? messageId : void 0"
+                :aria-expanded="open"
+                aria-haspopup="listbox"
+                :aria-invalid="props.invalid || void 0"
+                :aria-readonly="props.readonly || void 0"
+                :aria-required="props.required || void 0"
+                autocomplete="off"
+                :class="ui.input"
+                :disabled="props.disabled"
+                :name="props.name"
+                :placeholder="props.placeholder ?? messages.dropdownPlaceholder"
+                :readonly="props.readonly"
+                role="combobox"
+                :value="text"
+                @input="onInput"
+                @keydown="onKeydown"
+            />
+
+            <template #trailing>
+                <slot name="decorator" />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+
+                <button
+                    v-if="clearable"
+                    :aria-label="messages.clearSelection"
+                    :class="clearClass"
+                    :disabled="props.disabled || props.readonly"
+                    tabindex="-1"
+                    :title="messages.clearSelection"
+                    type="button"
+                    @click="clear"
+                    @mousedown.prevent
+                >
+                    <Icon
+                        :class="ui.triggerIcon"
+                        :name="icons.close"
+                    />
+                </button>
+
+                <button
+                    :aria-controls="listId"
+                    :aria-expanded="open"
+                    :aria-label="messages.dropdownToggle"
+                    :class="[triggerClass, clearable && 'ms-0']"
+                    :disabled="props.disabled || props.readonly"
+                    tabindex="-1"
+                    type="button"
+                    @click="toggle"
+                    @mousedown.prevent
+                >
+                    <Icon
+                        :class="ui.triggerIcon"
+                        :name="icons.dropdownOpen"
+                    />
+                </button>
+            </template>
+        </PrimitiveControl>
+
+        <!--
+            El color se funde con `cn` y no se apila en un array: ayuda, error y
+            aviso son la misma utilidad de Tailwind, y sin fundirlos gana el que
+            la hoja emita más tarde, que es el de la ayuda.
+        -->
+        <p
+            v-if="message"
+            :id="messageId"
+            aria-live="polite"
+            :class="cn(ui.helper, props.invalid && ui.message, props.warn && !props.invalid && ui.warning)"
+        >
+            {{ message }}
+        </p>
+
+        <Teleport
+            v-if="mounted"
+            :to="portalTarget"
+        >
+            <ul
+                v-if="open"
+                :id="listId"
+                ref="list"
+                :aria-labelledby="labelId"
+                :class="ui.content"
+                role="listbox"
+                style="position: fixed; top: 0; left: 0"
+                @mousedown.prevent
+            >
+                <li
+                    v-if="visibleItems.length === 0"
+                    :class="ui.empty"
+                >
+                    {{ messages.noMatches }}
+                </li>
+
+                <li
+                    v-for="(item, index) in visibleItems"
+                    :id="optionId(toOptionKey(item.value))"
+                    :key="toOptionKey(item.value)"
+                    :aria-disabled="item.disabled || void 0"
+                    :aria-selected="isSelected(item)"
+                    :class="ui.item"
+                    :data-disabled="item.disabled || void 0"
+                    :data-highlighted="index === highlighted || void 0"
+                    :data-selected="isSelected(item) || void 0"
+                    role="option"
+                    @click="choose(item)"
+                    @pointermove="item.disabled ? void 0 : highlighted = index"
+                >
+                    <span class="truncate">
+                        <slot
+                            :highlighted="index === highlighted"
+                            :item="item"
+                            name="item"
+                            :selected="isSelected(item)"
+                        >
+                            {{ item.label }}
+                        </slot>
+                    </span>
+
+                    <span
+                        v-if="isSelected(item)"
+                        :class="ui.itemIndicator"
+                    >
+                        <Icon
+                            :class="ui.itemIcon"
+                            :name="icons.dropdownSelected"
+                        />
+                    </span>
+                </li>
+            </ul>
+        </Teleport>
+    </div>
+</template>

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

@@ -0,0 +1,55 @@
+import type { OptionItem } from '#vuno/types/control';
+import type { ComboBoxProps, ComboBoxValue } from './ComboBox.types.js';
+type __VLS_Props = ComboBoxProps;
+type __VLS_Slots = {
+    /** Lo que Vuno llama `decorator`: un `AILabel` u otra marca dentro del campo. */
+    decorator?: () => unknown;
+    /** Sustituye el texto de una opción; recibe la opción y su estado. */
+    item?: (props: {
+        highlighted: boolean;
+        item: OptionItem;
+        selected: boolean;
+    }) => unknown;
+};
+declare function focus(): void;
+type __VLS_ModelProps = {
+    modelValue?: ComboBoxValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("#vuno/types/control").OptionValue | undefined) => any;
+    inputChange: (query: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("#vuno/types/control").OptionValue | undefined) => any) | undefined;
+    onInputChange?: ((query: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("#vuno/types/control").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    direction: import("./ComboBox.types.js").ComboBoxDirection;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<import("./ComboBox.types.js").ComboBoxSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    portal: import("../../types/base.js").PortalTarget;
+    allowCustomValue: boolean;
+    shouldFilterItem: import("./ComboBox.types.js").ComboBoxFilter;
+    typeahead: boolean;
+}, {}, {}, {}, 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/ComboBox/useComboBoxState.d.ts

@@ -0,0 +1,44 @@
+import { type Ref } from 'vue';
+import type { OptionItem, OptionValue } from '#vuno/types/control';
+import type { ComboBoxFilter } from './ComboBox.types.js';
+type ComboBoxStateOptions = {
+    onQuery: (query: string) => void;
+    model: Ref<OptionValue | undefined>;
+    allowCustomValue: () => boolean;
+    disabled: () => boolean;
+    filter: () => ComboBoxFilter | undefined;
+    input: () => HTMLInputElement | undefined;
+    items: () => OptionItem[];
+    list: () => HTMLElement | undefined;
+    optionId: (key: string) => string;
+    readonly: () => boolean;
+    typeahead: () => boolean;
+};
+/**
+ * Estado e interacción del combobox, sin saber cómo se dibuja ni dónde se
+ * monta la lista.
+ *
+ * Vive aparte del `Dropdown` y no encima de él porque el texto manda: en un
+ * desplegable el campo *muestra* la selección, y aquí el campo **es** la
+ * entrada. De ahí salen tres comportamientos que un desplegable no tiene y
+ * que no se añaden con una prop: completar por delante (`typeahead`), aceptar
+ * un valor que no está en la lista (`allowCustomValue`) y decidir, al salir
+ * del campo, qué se hace con lo escrito.
+ */
+export declare function useComboBoxState(options: ComboBoxStateOptions): {
+    onFocusout: (event: FocusEvent, root: HTMLElement | undefined) => void;
+    onInput: (event: Event) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    activeKey: import("vue").ComputedRef<string | undefined>;
+    choose: (item: OptionItem) => void;
+    clear: () => void;
+    clearable: import("vue").ComputedRef<boolean>;
+    close: (refocus?: boolean) => void;
+    highlighted: Ref<number, number>;
+    isSelected: (item: OptionItem) => boolean;
+    open: Ref<boolean, boolean>;
+    text: import("vue").ComputedRef<string>;
+    toggle: () => void;
+    visibleItems: import("vue").ComputedRef<OptionItem[]>;
+};
+export {};