@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/internal/Input/Input.vue.d.ts

@@ -0,0 +1,52 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Lo que va al final del campo: un botón de acción, una unidad. */
+    trailing?: () => unknown;
+};
+type Props = {
+    /** Nombre Iconify; se pinta dentro del campo, antes del texto. */
+    icon?: string;
+    /** La curvatura de la caja. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    /**
+     * Los tipos de texto, no los demás: `checkbox`, `radio` y `file`
+     * tienen su propio control porque no se pintan como una caja de
+     * texto ni llevan valor de cadena.
+     */
+    type?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+    ui?: VunoUi<'control' | 'input'>;
+};
+type __VLS_ModelProps = {
+    /**
+         * `number` devuelve número y el resto cadena, que es lo que espera el
+         * estado del formulario: un campo numérico que guardara `'12'` pasaría la
+         * validación de tipo por los pelos y fallaría al comparar o al sumar.
+         * Vacío es `undefined` y no `0` ni `''`: no es un valor, es que no hay.
+         */
+    modelValue?: number | string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    inputRef: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    icon: string;
+    radius: VunoRadius;
+    size: VunoSize;
+    type: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+    ui: VunoUi<"control" | "input">;
+}, {}, {}, {}, 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/internal/NumberInput/NumberInput.d.vue.ts

@@ -0,0 +1,36 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoControlOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    currency?: string;
+    decimals?: number;
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    /** En vertical los botones se apilan; en horizontal, quedan lado a lado. */
+    orientation?: VunoControlOrientation;
+    size?: VunoSize;
+    step?: number;
+    ui?: VunoUi<'control' | 'input' | 'numberInput'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | 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: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    currency: string;
+    size: VunoSize;
+    orientation: VunoControlOrientation;
+    ui: VunoUi<"control" | "input" | "numberInput">;
+    decimals: number;
+    max: number;
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/internal/NumberInput/NumberInput.theme.d.ts

@@ -0,0 +1,31 @@
+export declare const numberInputTheme: Record<"numberInput", {
+    /**
+     * El campo numérico. La caja la pone `baseControl`; aquí solo el control de
+     * dentro y cómo se colocan sus dos botones.
+     *
+     * Los dos botones permanecen juntos al final. En vertical se apilan; en
+     * horizontal quedan lado a lado con el tamaño normal del control. La caja
+     * compartida elimina el relleno final en ambos casos.
+     */
+    readonly slots: {
+        readonly base: "w-full min-w-0 bg-transparent text-right tabular-nums outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed";
+    };
+    readonly variants: {
+        readonly orientation: {
+            readonly horizontal: {
+                readonly actions: "flex items-center";
+            };
+            /**
+             * Apilados tienen que caber dos dentro de la altura de la caja,
+             * así que el botón pierde su altura propia. Con la del tamaño
+             * `xs` —24 px cada uno— el campo crecía a 49 px de alto en vez
+             * de los 32 que mide un control normal.
+             */
+            readonly vertical: {
+                readonly actions: "flex flex-col-reverse";
+                readonly stepper: "h-3.5 w-7 p-0";
+                readonly stepperIcon: "size-3";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/internal/NumberInput/NumberInput.theme.js

@@ -0,0 +1,26 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const numberInputTheme = defineTheme("numberInput", {
+  /**
+   * El campo numérico. La caja la pone `baseControl`; aquí solo el control de
+   * dentro y cómo se colocan sus dos botones.
+   *
+   * Los dos botones permanecen juntos al final. En vertical se apilan; en
+   * horizontal quedan lado a lado con el tamaño normal del control. La caja
+   * compartida elimina el relleno final en ambos casos.
+   */
+  slots: {
+    base: "w-full min-w-0 bg-transparent text-right tabular-nums outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed"
+  },
+  variants: {
+    orientation: {
+      horizontal: { actions: "flex items-center" },
+      /**
+       * Apilados tienen que caber dos dentro de la altura de la caja,
+       * así que el botón pierde su altura propia. Con la del tamaño
+       * `xs` —24 px cada uno— el campo crecía a 49 px de alto en vez
+       * de los 32 que mide un control normal.
+       */
+      vertical: { actions: "flex flex-col-reverse", stepper: "h-3.5 w-7 p-0", stepperIcon: "size-3" }
+    }
+  }
+});

package/dist/runtime/app/components/internal/NumberInput/NumberInput.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { computed, nextTick, ref } from "vue";
+import { useIcons, useLocale, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+import { addStep, clampNumber, isPotentialNumber, parseNumber, snapToStep } from "#vuno/components/internal/NumberInput/number";
+defineOptions({ name: "VunoNumberInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  currency: { type: String, required: false, default: void 0 },
+  decimals: { type: Number, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  max: { type: Number, required: false, default: void 0 },
+  min: { type: Number, required: false, default: void 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: String, required: false, default: "md" },
+  step: { type: Number, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const locale = useLocale();
+const messages = useMessages();
+const ui = useTheme(
+  "numberInput",
+  () => props.ui,
+  () => ({ orientation: props.orientation, size: props.size })
+);
+const pointerFocus = ref(false);
+const typing = ref();
+const isVertical = computed(() => props.orientation === "vertical");
+const buttonSize = computed(() => isVertical.value ? "xs" : props.size);
+const stepperUi = computed(() => ({ base: ui.value.stepper, icon: ui.value.stepperIcon }));
+const decimals = computed(() => {
+  if (props.decimals === void 0 || !Number.isFinite(props.decimals)) return void 0;
+  return Math.min(20, Math.max(0, Math.trunc(props.decimals)));
+});
+const digits = computed(() => decimals.value === void 0 ? {} : { maximumFractionDigits: decimals.value, minimumFractionDigits: decimals.value });
+const formatter = computed(() => {
+  return new Intl.NumberFormat(locale.value, props.currency ? { ...digits.value, currency: props.currency, style: "currency" } : digits.value);
+});
+const editingFormatter = computed(() => {
+  const resolved = formatter.value.resolvedOptions();
+  return new Intl.NumberFormat(locale.value, {
+    maximumFractionDigits: resolved.maximumFractionDigits,
+    minimumFractionDigits: 0,
+    useGrouping: false
+  });
+});
+const step = computed(() => props.step ?? (props.currency ? 10 ** -(formatter.value.resolvedOptions().maximumFractionDigits ?? 0) : 1));
+const display = computed(() => {
+  if (typing.value !== void 0) return typing.value;
+  return model.value === void 0 ? "" : formatter.value.format(model.value);
+});
+const atMin = computed(() => props.min !== void 0 && model.value !== void 0 && model.value <= props.min);
+const atMax = computed(() => props.max !== void 0 && model.value !== void 0 && model.value >= props.max);
+function formatEditing(value) {
+  return editingFormatter.value.formatToParts(value).filter((part) => part.type !== "group" && part.type !== "literal").map((part) => part.value).join("");
+}
+function commit(value) {
+  if (value === void 0) {
+    model.value = void 0;
+    return void 0;
+  }
+  const committed = clampNumber(snapToStep(value, step.value, props.min), props.min, props.max);
+  model.value = committed;
+  return committed;
+}
+function nudge(direction, multiplier = 1) {
+  if (props.disabled) return void 0;
+  const draft = typing.value === void 0 ? void 0 : parseNumber(typing.value, locale.value);
+  const from = draft ?? model.value ?? props.min ?? 0;
+  return commit(draft === void 0 && model.value === void 0 ? from : addStep(from, direction * step.value * multiplier));
+}
+function onKeydown(event) {
+  if (props.disabled) return;
+  const actions = {
+    End: props.max === void 0 ? void 0 : () => commit(props.max),
+    Home: props.min === void 0 ? void 0 : () => commit(props.min),
+    ArrowDown: () => nudge(-1),
+    ArrowUp: () => nudge(1),
+    PageDown: () => nudge(-1, 10),
+    PageUp: () => nudge(1, 10)
+  };
+  const action = actions[event.key];
+  if (!action) return;
+  event.preventDefault();
+  const value = action();
+  typing.value = value === void 0 ? "" : formatEditing(value);
+}
+function onWheel(event) {
+  if (props.disabled || event.target !== document.activeElement) return;
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+  event.preventDefault();
+  const value = nudge(event.deltaY < 0 ? 1 : -1);
+  typing.value = value === void 0 ? "" : formatEditing(value);
+}
+function onInput(event) {
+  const input = event.target;
+  if (isPotentialNumber(input.value, locale.value)) {
+    typing.value = input.value;
+    return;
+  }
+  input.value = typing.value ?? display.value;
+}
+async function beginEditing(input, selectAll) {
+  const formatted = input.value;
+  const formattedCaret = input.selectionStart ?? formatted.length;
+  const editing = model.value === void 0 ? "" : formatEditing(model.value);
+  const editingCharacters = new Set(editing);
+  let charactersBeforeCaret = 0;
+  for (const character of formatted.slice(0, formattedCaret)) {
+    if (editingCharacters.has(character)) charactersBeforeCaret++;
+  }
+  typing.value = editing;
+  await nextTick();
+  if (selectAll) {
+    input.select();
+    return;
+  }
+  let editingCaret = 0;
+  for (const character of [...editing].slice(0, charactersBeforeCaret)) editingCaret += character.length;
+  input.setSelectionRange(editingCaret, editingCaret);
+}
+async function onClick(event) {
+  const input = event.currentTarget;
+  if (typing.value === void 0) await beginEditing(input, false);
+  pointerFocus.value = false;
+}
+function onFocus(event) {
+  if (props.disabled) return;
+  if (pointerFocus.value) return;
+  void beginEditing(event.currentTarget, true);
+}
+function onPointerdown() {
+  pointerFocus.value = true;
+}
+function onPointercancel() {
+  pointerFocus.value = false;
+}
+function onBlur() {
+  pointerFocus.value = false;
+  if (typing.value === void 0) return;
+  const parsed = parseNumber(typing.value, locale.value);
+  if (!typing.value.trim()) commit(void 0);
+  else if (parsed !== void 0) commit(parsed);
+  typing.value = void 0;
+}
+</script>
+
+<template>
+    <ControlShell
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <!--
+            `type="text"` y no `number`: el nativo acepta texto que no es un
+            número, se anuncia como caja de texto y cambia con la rueda sin
+            tener el foco. El papel de `spinbutton` con sus tres `aria-value*`
+            es lo que lo convierte en un control de número para quien no ve la
+            pantalla.
+        -->
+        <input
+            v-bind="$attrs"
+            :aria-valuemax="props.max"
+            :aria-valuemin="props.min"
+            :aria-valuenow="model"
+            :aria-valuetext="props.currency && model !== void 0 ? formatter.format(model) : void 0"
+            autocomplete="off"
+            autocorrect="off"
+            :class="ui.base"
+            :disabled="props.disabled"
+            inputmode="decimal"
+            role="spinbutton"
+            spellcheck="false"
+            type="text"
+            :value="display"
+            @blur="onBlur"
+            @click="onClick"
+            @focus="onFocus"
+            @input="onInput"
+            @keydown="onKeydown"
+            @pointercancel="onPointercancel"
+            @pointerdown="onPointerdown"
+            @wheel="onWheel"
+        />
+
+        <template #trailing>
+            <!--
+                Los botones quedan fuera del tabulador a propósito: el control ya
+                sube y baja con las flechas, y dos paradas más por campo numérico
+                alargan el recorrido del teclado sin añadir nada que no se
+                pudiera hacer.
+            -->
+            <div :class="ui.actions">
+                <Button
+                    :aria-label="messages.numberDecrement"
+                    color="neutral"
+                    :disabled="props.disabled || atMin"
+                    :icon="icons.numberDecrement"
+                    :size="buttonSize"
+                    tabindex="-1"
+                    :ui="stepperUi"
+                    variant="ghost"
+                    @click="nudge(-1)"
+                />
+
+                <Button
+                    :aria-label="messages.numberIncrement"
+                    color="neutral"
+                    :disabled="props.disabled || atMax"
+                    :icon="icons.numberIncrement"
+                    :size="buttonSize"
+                    tabindex="-1"
+                    :ui="stepperUi"
+                    variant="ghost"
+                    @click="nudge(1)"
+                />
+            </div>
+        </template>
+    </ControlShell>
+</template>

package/dist/runtime/app/components/internal/NumberInput/NumberInput.vue.d.ts

@@ -0,0 +1,36 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoControlOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    currency?: string;
+    decimals?: number;
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    /** En vertical los botones se apilan; en horizontal, quedan lado a lado. */
+    orientation?: VunoControlOrientation;
+    size?: VunoSize;
+    step?: number;
+    ui?: VunoUi<'control' | 'input' | 'numberInput'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | 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: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    currency: string;
+    size: VunoSize;
+    orientation: VunoControlOrientation;
+    ui: VunoUi<"control" | "input" | "numberInput">;
+    decimals: number;
+    max: number;
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/internal/NumberInput/number.d.ts

@@ -0,0 +1,42 @@
+/**
+ * La aritmética del campo numérico, aparte del componente para poder probarla.
+ *
+ * Es donde está lo que se rompe sin verse: un paso decimal que arrastra error
+ * de coma flotante, un valor que no cae en la rejilla del paso, un recorte que
+ * no respeta el mínimo. Nada de esto se nota mirando la pantalla — se nota
+ * cuando alguien guarda `0.30000000000000004`.
+ */
+/**
+ * Suma o resta evitando el error de la coma flotante.
+ *
+ * `0.1 + 0.2` da `0.30000000000000004`, y con un paso de `0.1` eso aparece a la
+ * tercera pulsación. Se redondea a los decimales que traigan los operandos, que
+ * son todos los que el resultado puede necesitar.
+ */
+export declare function addStep(value: number, step: number): number;
+/** Recorta a los límites que haya; sin ellos devuelve lo que entra. */
+export declare function clampNumber(value: number, min?: number, max?: number): number;
+/**
+ * Lleva el valor a la rejilla del paso, contando desde el mínimo.
+ *
+ * Desde el mínimo y no desde cero: con `min: 1` y `step: 2`, los válidos son
+ * 1, 3, 5… y no 0, 2, 4. Es la diferencia entre un campo que acepta lo que
+ * escribes y uno que lo corrige a un valor que su propio mínimo prohíbe.
+ */
+export declare function snapToStep(value: number, step: number, min?: number): number;
+/**
+ * Lee un número escrito por una persona, en su idioma.
+ *
+ * En castellano el separador decimal es la coma y el de millares el punto, así
+ * que `Number('1.234,5')` da `NaN` y `Number('1.234')` da `1.234` —mil doscientos
+ * treinta y cuatro leído como uno coma doscientos treinta y cuatro—, que es peor
+ * porque no falla: guarda otro número.
+ */
+export declare function parseNumber(text: string, locale: string): number | undefined;
+/**
+ * Dice si el texto todavía puede convertirse en un número del idioma.
+ *
+ * Admite estados transitorios necesarios al escribir —vacío, signo o separador
+ * decimal sin cifras—, pero no letras, exponentes ni símbolos monetarios.
+ */
+export declare function isPotentialNumber(text: string, locale: string): boolean;

package/dist/runtime/app/components/internal/NumberInput/number.js

@@ -0,0 +1,64 @@
+const numberSymbolsCache = /* @__PURE__ */ new Map();
+export function addStep(value, step) {
+  const decimals = Math.max(decimalsOf(value), decimalsOf(step));
+  return Number((value + step).toFixed(decimals));
+}
+export function clampNumber(value, min, max) {
+  if (min !== void 0 && value < min) return min;
+  if (max !== void 0 && value > max) return max;
+  return value;
+}
+export function snapToStep(value, step, min = 0) {
+  if (!step || step <= 0) return value;
+  const steps = Math.round((value - min) / step);
+  const [, decimals = ""] = String(step).split(".");
+  const offset = Number((steps * step).toFixed(decimals.length));
+  return addStep(min, offset);
+}
+export function parseNumber(text, locale) {
+  const trimmed = text.trim();
+  if (!trimmed) return void 0;
+  const { decimal, digit, digits, group, minus } = numberSymbols(locale);
+  const integer = `(?:${digit}+|${digit}{1,3}(?:${escapeRegExp(group)}${digit}{3})+)`;
+  const complete = new RegExp(`^${escapeRegExp(minus)}?${integer}(?:${escapeRegExp(decimal)}${digit}+)?$`);
+  if (!complete.test(trimmed)) return void 0;
+  let normalised = trimmed.split(group).join("").split(decimal).join(".").replace(minus, "-");
+  for (const [localDigit, asciiDigit] of digits) normalised = normalised.split(localDigit).join(asciiDigit);
+  const parsed = Number(normalised);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+export function isPotentialNumber(text, locale) {
+  const { decimal, digit, group, minus } = numberSymbols(locale);
+  const sign = `${escapeRegExp(minus)}?`;
+  const ungrouped = `${digit}*(?:${escapeRegExp(decimal)}${digit}*)?`;
+  const grouped = `${digit}{1,3}(?:${escapeRegExp(group)}${digit}{3})+(?:${escapeRegExp(decimal)}${digit}*)?`;
+  return new RegExp(`^${sign}(?:${ungrouped}|${grouped})$`).test(text);
+}
+function decimalsOf(value) {
+  const [, decimals = ""] = String(value).split(".");
+  return decimals.length;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+}
+function numberSymbols(locale) {
+  const cached = numberSymbolsCache.get(locale);
+  if (cached) return cached;
+  const formatter = new Intl.NumberFormat(locale);
+  const digitFormatter = new Intl.NumberFormat(locale, { useGrouping: false });
+  const parts = formatter.formatToParts(-12345.6);
+  const digits = /* @__PURE__ */ new Map();
+  for (let value = 0; value <= 9; value++) {
+    digits.set(String(value), String(value));
+    digits.set(digitFormatter.format(value), String(value));
+  }
+  const symbols = {
+    decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+    digit: `(?:${[...digits.keys()].map(escapeRegExp).join("|")})`,
+    digits,
+    group: parts.find((part) => part.type === "group")?.value ?? ",",
+    minus: parts.find((part) => part.type === "minusSign")?.value ?? "-"
+  };
+  numberSymbolsCache.set(locale, symbols);
+  return symbols;
+}

package/dist/runtime/app/composables/defineShortcuts.d.ts

@@ -0,0 +1,19 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { VunoShortcuts, VunoShortcutsOptions } from '#vuno/types/shortcuts';
+/**
+ * Atajos de teclado, declarados donde se usan.
+ *
+ * Se llama `define…` y no `use…` aunque viva en `composables/`, y es
+ * deliberado: no devuelve estado sino una forma de parar, y lo que hace es
+ * **declarar** algo que se recoge solo al desmontar. `useShortcuts` prometería
+ * un valor que nadie lee.
+ *
+ * Se engancha **una vez** al documento y no un oyente por atajo: con quince
+ * atajos declarados en una pantalla, lo segundo instala quince manejadores que
+ * corren todos en cada pulsación.
+ *
+ * @param config El mapa de atajos. Admite un `ref` o un getter para cambiarlos sin volver a montar.
+ * @param options Retardo de la secuencia y comparación por posición física.
+ * @returns Una función que desengancha, por si hay que parar antes de desmontar.
+ */
+export declare function defineShortcuts(config: MaybeRefOrGetter<VunoShortcuts>, options?: VunoShortcutsOptions): () => void;

package/dist/runtime/app/composables/defineShortcuts.js

@@ -0,0 +1,68 @@
+import { onScopeDispose, toValue } from "vue";
+export function defineShortcuts(config, options = {}) {
+  if (typeof document === "undefined") return () => {
+  };
+  const { chainDelay = 800, layoutIndependent = false } = options;
+  const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
+  const isApple = /ipad|iphone|ipod|mac/i.test(platform);
+  let chain = [];
+  let chainedAt = 0;
+  const stop = () => document.removeEventListener("keydown", onKeydown);
+  document.addEventListener("keydown", onKeydown);
+  onScopeDispose(stop, true);
+  return stop;
+  function onKeydown(event) {
+    const entries = Object.entries(toValue(config)).filter(([, shortcut]) => Boolean(shortcut));
+    const now = Date.now();
+    chain = now - chainedAt > chainDelay ? [describe(event)] : [...chain, describe(event)];
+    chainedAt = now;
+    for (let length = chain.length; length > 0; length--) {
+      const candidate = chain.slice(-length).join("-");
+      const found = entries.find(([name]) => normalize(name) === candidate);
+      if (!found) continue;
+      const shortcut = resolve(found[1]);
+      if (!allowed(shortcut.usingInput, event)) continue;
+      event.preventDefault();
+      chain = [];
+      shortcut.handler(event);
+      return;
+    }
+  }
+  function describe(event) {
+    const parts = [];
+    if (isApple ? event.metaKey : event.ctrlKey) parts.push("meta");
+    if (isApple ? event.ctrlKey : false) parts.push("ctrl");
+    if (event.altKey) parts.push("alt");
+    if (event.shiftKey) parts.push("shift");
+    parts.push(key(event));
+    return parts.join("_");
+  }
+  function key(event) {
+    if (layoutIndependent)
+      return event.code.replace(/^Digit/, "").replace(/^Key/, "").toLowerCase();
+    return event.key === " " ? "space" : event.key.toLowerCase();
+  }
+}
+function normalize(name) {
+  return name.split("-").map((step) => {
+    const parts = step.toLowerCase().split("_");
+    const pressed = parts.at(-1) ?? "";
+    const modifiers = new Set(
+      parts.slice(0, -1).map((modifier) => {
+        if (modifier === "command") return "meta";
+        return modifier === "option" ? "alt" : modifier;
+      })
+    );
+    return [...["meta", "ctrl", "alt", "shift"].filter((modifier) => modifiers.has(modifier)), pressed].join("_");
+  }).join("-");
+}
+function resolve(shortcut) {
+  return typeof shortcut === "function" ? { handler: shortcut } : shortcut;
+}
+function allowed(usingInput, event) {
+  const target = event.target;
+  const editing = Boolean(target?.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]'));
+  if (!editing || usingInput === true) return true;
+  if (typeof usingInput === "string") return target?.closest("[name]")?.getAttribute("name") === usingInput;
+  return false;
+}

package/dist/runtime/app/composables/internal/useVunoAnchor.d.ts

@@ -0,0 +1,45 @@
+import type { ComputePositionReturn, Middleware } from '@floating-ui/dom';
+import type { MaybeRefOrGetter } from 'vue';
+import type { VunoPlacement } from '#vuno/types/base';
+/**
+ * Anclar algo flotante a algo que está en la página, y mantenerlo anclado.
+ *
+ * Lo usan el menú, el aviso y la lista del combobox. Antes lo escribía cada uno
+ * y las tres copias **ya habían divergido**: dos comprobaban que
+ * `ResizeObserver` existe antes de pedirle a `autoUpdate` que observe el tamaño
+ * y la tercera no, dos volvían a mirar el elemento después del `await` y la
+ * tercera lo hacía de otra forma. Hoy eso no cuesta nada —el DOM de las pruebas
+ * trae los dos observadores— y por eso vale como aviso y no como avería: es la
+ * misma decisión tomada tres veces, y ya iba por caminos distintos.
+ *
+ * Lo que queda aquí es lo que los tres hacen igual. Lo que los distingue —dónde
+ * se coloca, cuánto se separa, qué mide además— entra por parámetro.
+ */
+type VunoAnchorOptions = {
+    /**
+     * Se llama con la posición ya resuelta, después de colocar.
+     *
+     * Existe por el `placement` **resuelto**: con `flip`, un aviso pedido arriba
+     * que no cabe acaba abajo, y quien pinte una flecha leyendo el prop la deja
+     * pegada al lado que ya no toca.
+     */
+    onPlaced?: (position: ComputePositionReturn) => void;
+    /** El elemento de la flecha, si lo hay. Su posición llega en `onPlaced`. */
+    arrowElement?: MaybeRefOrGetter<HTMLElement | undefined>;
+    /**
+     * Contra qué se recorta. Para una lista dentro de un `<dialog>` es el
+     * diálogo: sin esto voltea contra la ventana y se sale de la caja que de
+     * verdad la contiene.
+     */
+    boundary?: MaybeRefOrGetter<Element | undefined>;
+    /** Separación entre el ancla y lo flotante, en píxeles. */
+    distance?: MaybeRefOrGetter<number | undefined>;
+    placement?: MaybeRefOrGetter<VunoPlacement>;
+    /** Lo que este control necesite además de la base: medir, recortar, lo que sea. */
+    middleware?: () => Middleware[];
+};
+export declare function useVunoAnchor(options?: VunoAnchorOptions): {
+    anchor: (reference: HTMLElement | undefined, floating: HTMLElement | undefined) => void;
+    release: () => void;
+};
+export {};