@groupteknology/vuno 1.0.0 → 1.0.1

package/dist/runtime/app/components/actions/Menu.vue

@@ -0,0 +1,189 @@
+<script setup>
+import { cloneVNode, Comment, computed, Fragment, nextTick, onBeforeUnmount, ref, Text, useId } from "vue";
+import Icon from "#vuno/components/actions/Icon.vue";
+import { useVunoAnchor } from "#vuno/internal/useVunoAnchor";
+import { useTheme } from "#vuno/composables/useTheme";
+import { useVunoPortal } from "#vuno/internal/useVunoPortal";
+const props = defineProps({
+  items: { type: Array, required: true },
+  portal: { type: [String, Boolean], required: false, default: void 0 }
+});
+const slots = defineSlots();
+const injectedPortal = useVunoPortal();
+const portalTarget = computed(() => {
+  const target = props.portal ?? injectedPortal;
+  return target === true ? "body" : target;
+});
+const ui = useTheme("menu");
+const colors = ["error", "info", "neutral", "primary", "secondary", "success", "warning"];
+const themeByColor = colors.map((color) => [color, useTheme("menu", void 0, () => ({ color }))]);
+const itemByColor = computed(() => Object.fromEntries(themeByColor.map(([color, theme]) => [color, theme.value.item])));
+const menuId = useId();
+const open = ref(false);
+const active = ref(-1);
+const triggerEl = ref(null);
+const contentEl = ref(null);
+const itemEls = ref([]);
+const enabled = computed(() => props.items.map((item, index) => ({ index, usable: !item.disabled })).filter((entry) => entry.usable).map((entry) => entry.index));
+const { anchor, release } = useVunoAnchor({ placement: "bottom-end" });
+const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
+const unfollow = () => release();
+async function focusItem(index) {
+  active.value = index;
+  await nextTick();
+  itemEls.value[index]?.focus();
+}
+async function show(from) {
+  open.value = true;
+  await nextTick();
+  follow();
+  if (from === "none") return contentEl.value?.focus();
+  const order = from === "first" ? enabled.value : [...enabled.value].reverse();
+  if (order.length > 0) await focusItem(order[0]);
+}
+function hide(returnFocus = true) {
+  if (!open.value) return;
+  open.value = false;
+  active.value = -1;
+  unfollow();
+  if (returnFocus) triggerEl.value?.focus();
+}
+function choose(item) {
+  if (item.disabled) return;
+  item.onSelect();
+  hide();
+}
+function step(delta) {
+  const order = enabled.value;
+  if (order.length === 0) return;
+  const current = order.indexOf(active.value);
+  const entry = delta > 0 ? 0 : order.length - 1;
+  const next = current === -1 ? entry : (current + delta + order.length) % order.length;
+  void focusItem(order[next]);
+}
+function onTriggerKeydown(event) {
+  if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    return void show("first");
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    return void show("last");
+  }
+}
+function onContentKeydown(event) {
+  const keys = {
+    ArrowDown: () => step(1),
+    ArrowUp: () => step(-1),
+    End: () => void focusItem(enabled.value.at(-1) ?? -1),
+    Escape: () => hide(),
+    Home: () => void focusItem(enabled.value[0] ?? -1),
+    /* Tabular fuera cierra: dejarlo abierto deja un menú huérfano. */
+    Tab: () => hide(false)
+  };
+  const run = keys[event.key];
+  if (!run) return;
+  if (event.key !== "Tab") event.preventDefault();
+  run();
+}
+function onPointerDown(event) {
+  const target = event.target;
+  if (!target || contentEl.value?.contains(target) || triggerEl.value?.contains(target)) return;
+  hide(false);
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("pointerdown", onPointerDown, true);
+  onBeforeUnmount(() => document.removeEventListener("pointerdown", onPointerDown, true));
+}
+onBeforeUnmount(unfollow);
+function firstElement(nodes) {
+  for (const node of nodes) {
+    if (node.type === Comment || node.type === Text) continue;
+    if (node.type === Fragment) {
+      const inner = firstElement(node.children ?? []);
+      if (inner) return inner;
+      continue;
+    }
+    return node;
+  }
+}
+const Trigger = () => {
+  const node = firstElement(slots.default?.({ open: open.value }) ?? []);
+  if (!node) return null;
+  return cloneVNode(node, {
+    /*
+     * El `stop` es de la tabla pero se queda aquí: sin él, abrir el
+     * menú dispara también el clic de la fila y se acaban abriendo dos
+     * cosas a la vez.
+     */
+    onClick: (event) => {
+      event.stopPropagation();
+      if (open.value) hide();
+      else void show("none");
+    },
+    onKeydown: onTriggerKeydown,
+    "aria-controls": open.value ? menuId : void 0,
+    "aria-expanded": open.value ? "true" : "false",
+    "aria-haspopup": "menu",
+    ref: (el) => {
+      triggerEl.value = el?.$el ?? el;
+    }
+  });
+};
+</script>
+
+<template>
+    <Trigger />
+
+    <Teleport
+        v-if="open"
+        :to="portalTarget"
+    >
+        <div
+            :id="menuId"
+            ref="contentEl"
+            :class="ui.content"
+            role="menu"
+            style="position: fixed; top: 0; left: 0"
+            tabindex="-1"
+            @keydown="onContentKeydown"
+        >
+            <template
+                v-for="(item, index) in props.items"
+                :key="`${item.label}-${index}`"
+            >
+                <!--
+                    `<hr>` y no un `<div role="separator">`: el elemento ya
+                    significa eso, así que la línea existe aunque el CSS no
+                    cargue y no depende de que el papel esté bien escrito.
+                -->
+                <hr
+                    v-if="item.separator && index > 0"
+                    :class="ui.separator"
+                />
+
+                <div
+                    :ref="(el) => itemEls[index] = el"
+                    :aria-disabled="item.disabled ? 'true' : void 0"
+                    :class="item.color ? itemByColor[item.color] : ui.item"
+                    :data-disabled="item.disabled ? '' : void 0"
+                    :data-highlighted="active === index ? '' : void 0"
+                    role="menuitem"
+                    :tabindex="active === index ? 0 : -1"
+                    @click="choose(item)"
+                    @keydown.enter.prevent="choose(item)"
+                    @keydown.space.prevent="choose(item)"
+                    @pointermove="!item.disabled && (active = index)"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+
+                    <span class="truncate">{{ item.label }}</span>
+                </div>
+            </template>
+        </div>
+    </Teleport>
+</template>

package/dist/runtime/app/components/actions/Menu.vue.d.ts

@@ -0,0 +1,34 @@
+import { type VunoPortalTarget } from '#vuno/internal/useVunoPortal';
+import type { VunoColor } from '#vuno/types/base';
+/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
+type VunoMenuItem = {
+    onSelect: () => void;
+    color?: VunoColor;
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    /** Dibuja una línea encima, para separar lo destructivo del resto. */
+    separator?: boolean;
+};
+type __VLS_Props = {
+    items: VunoMenuItem[];
+    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+};
+type __VLS_Slots = {
+    /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    portal: VunoPortalTarget;
+}, {}, {}, {}, 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/actions/Tooltip.d.vue.ts

@@ -0,0 +1,40 @@
+import { type VunoPortalTarget } from '#vuno/internal/useVunoPortal';
+import type { VunoSlots } from '#vuno/types/base';
+/**
+ * El aviso que aparece al posar el ratón o al llegar con el teclado.
+ *
+ * Las cuatro cosas fáciles de dejarse y difíciles de notar que faltan son
+ * el retardo al abrir, cerrarlo con Escape, **abrirlo también al enfocar**
+ * —si solo abre al posar el ratón, para quien navega con el teclado no
+ * existe— y describir el disparador con `aria-describedby`, que es lo que
+ * hace que un lector de pantalla lo lea en vez de dejarlo suelto en la
+ * página. Las cuatro están abajo, cada una con su prueba.
+ */
+type __VLS_Props = {
+    /** Milisegundos antes de abrirse al posar el ratón. */
+    delay?: number;
+    disabled?: boolean;
+    /** Dónde montar el aviso. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+    side?: 'bottom' | 'left' | 'right' | 'top';
+    text?: string;
+    ui?: VunoSlots;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    text: string;
+    delay: number;
+    ui: VunoSlots;
+    portal: VunoPortalTarget;
+    side: "bottom" | "left" | "right" | "top";
+}, {}, {}, {}, 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/actions/Tooltip.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { cloneVNode, Comment, computed, Fragment, nextTick, onBeforeUnmount, ref, Text, useId } from "vue";
+import { useVunoAnchor } from "#vuno/internal/useVunoAnchor";
+import { useTheme } from "#vuno/composables/useTheme";
+import { useVunoPortal } from "#vuno/internal/useVunoPortal";
+const props = defineProps({
+  delay: { type: Number, required: false, default: 300 },
+  disabled: { type: Boolean, required: false },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  side: { type: String, required: false, default: "top" },
+  text: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const ui = useTheme("tooltip", () => props.ui);
+const injectedPortal = useVunoPortal();
+const portalTarget = computed(() => {
+  const target = props.portal ?? injectedPortal;
+  return target === true ? "body" : target;
+});
+const tooltipId = useId();
+const open = ref(false);
+const triggerEl = ref(null);
+const contentEl = ref(null);
+const arrowEl = ref(null);
+const usable = computed(() => !props.disabled && Boolean(props.text));
+const opposite = { bottom: "top", left: "right", right: "left", top: "bottom" };
+const { anchor, release } = useVunoAnchor({
+  onPlaced: (position) => pinArrow(position),
+  distance: 6,
+  arrowElement: () => arrowEl.value ?? void 0,
+  placement: () => props.side
+});
+function pinArrow(position) {
+  const point = position.middlewareData.arrow;
+  if (!arrowEl.value || !point) return;
+  const side = opposite[position.placement.split("-")[0]];
+  Object.assign(arrowEl.value.style, {
+    bottom: "",
+    left: point.x === void 0 ? "" : `${point.x}px`,
+    right: "",
+    /* Medio cuadrado fuera de la caja: la otra mitad la tapa el fondo. */
+    [side]: "-4px",
+    top: point.y === void 0 ? "" : `${point.y}px`
+  });
+}
+const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
+let timer;
+function cancelPending() {
+  if (timer === void 0) return;
+  clearTimeout(timer);
+  timer = void 0;
+}
+async function show() {
+  cancelPending();
+  if (!usable.value || open.value) return;
+  open.value = true;
+  await nextTick();
+  follow();
+}
+function showAfterDelay() {
+  cancelPending();
+  if (!usable.value) return;
+  if (props.delay <= 0) return void show();
+  timer = setTimeout(() => void show(), props.delay);
+}
+function hide() {
+  cancelPending();
+  open.value = false;
+  release();
+}
+function onKeydown(event) {
+  if (event.key !== "Escape" || !open.value) return;
+  event.preventDefault();
+  hide();
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("keydown", onKeydown);
+  onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+}
+onBeforeUnmount(hide);
+function firstElement(nodes) {
+  for (const node of nodes) {
+    if (node.type === Comment || node.type === Text) continue;
+    if (node.type === Fragment) {
+      const inner = firstElement(node.children ?? []);
+      if (inner) return inner;
+      continue;
+    }
+    return node;
+  }
+}
+const Trigger = () => {
+  const node = firstElement(slots.default?.() ?? []);
+  if (!node) return null;
+  return cloneVNode(node, {
+    onBlur: hide,
+    /* Con el teclado no hay retardo que valga: al enfocar, ya. */
+    onFocus: () => void show(),
+    onPointerdown: hide,
+    /*
+     * En un táctil no hay «posar»: el navegador emite un `pointerenter`
+     * al tocar, y el aviso se abriría pegado al dedo y encima de lo que
+     * se acaba de pulsar.
+     */
+    onPointerenter: (event) => {
+      if (event.pointerType !== "touch") showAfterDelay();
+    },
+    onPointerleave: hide,
+    "aria-describedby": open.value ? tooltipId : void 0,
+    ref: (el) => {
+      triggerEl.value = el?.$el ?? el;
+    }
+  });
+};
+</script>
+
+<template>
+    <Trigger />
+
+    <Teleport
+        v-if="open"
+        :to="portalTarget"
+    >
+        <!--
+            No es alcanzable con el tabulador y no recibe el foco: un aviso que
+            lo atrapara dejaría al teclado dentro de algo que se cierra solo.
+        -->
+        <div
+            :id="tooltipId"
+            ref="contentEl"
+            :class="ui.content"
+            role="tooltip"
+            style="position: fixed; top: 0; left: 0; width: max-content"
+        >
+            {{ props.text }}
+
+            <!--
+                Un cuadrado girado y no un polígono: así sirve igual por los
+                cuatro lados. Un triángulo habría que rotarlo según el lado
+                resuelto, y al rotarlo su caja deja de coincidir con lo que se
+                ve, que es de donde salen las flechas descolocadas.
+            -->
+            <div
+                ref="arrowEl"
+                aria-hidden="true"
+                :class="ui.arrow"
+                style="position: absolute"
+            />
+        </div>
+    </Teleport>
+</template>

package/dist/runtime/app/components/actions/Tooltip.vue.d.ts

@@ -0,0 +1,40 @@
+import { type VunoPortalTarget } from '#vuno/internal/useVunoPortal';
+import type { VunoSlots } from '#vuno/types/base';
+/**
+ * El aviso que aparece al posar el ratón o al llegar con el teclado.
+ *
+ * Las cuatro cosas fáciles de dejarse y difíciles de notar que faltan son
+ * el retardo al abrir, cerrarlo con Escape, **abrirlo también al enfocar**
+ * —si solo abre al posar el ratón, para quien navega con el teclado no
+ * existe— y describir el disparador con `aria-describedby`, que es lo que
+ * hace que un lector de pantalla lo lea en vez de dejarlo suelto en la
+ * página. Las cuatro están abajo, cada una con su prueba.
+ */
+type __VLS_Props = {
+    /** Milisegundos antes de abrirse al posar el ratón. */
+    delay?: number;
+    disabled?: boolean;
+    /** Dónde montar el aviso. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+    side?: 'bottom' | 'left' | 'right' | 'top';
+    text?: string;
+    ui?: VunoSlots;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    text: string;
+    delay: number;
+    ui: VunoSlots;
+    portal: VunoPortalTarget;
+    side: "bottom" | "left" | "right" | "top";
+}, {}, {}, {}, 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/forms/Checkbox.d.vue.ts

@@ -0,0 +1,35 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La casilla, nativa.
+ *
+ * Su raíz **es** el `<input>`, así que no apaga la herencia de atributos
+ * como hacen el input de texto o el área: lo que le llegue —el `id` y los
+ * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
+ * elemento correcto sin reenviarlo a mano.
+ */
+type __VLS_Props = {
+    color?: VunoColor;
+    /**
+     * Ni marcada ni sin marcar: la selección de una tabla donde solo
+     * hay algunas filas elegidas.
+     */
+    indeterminate?: boolean;
+    size?: VunoSize;
+    ui?: VunoSlots;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean | 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: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    color: VunoColor;
+    size: VunoSize;
+    ui: VunoSlots;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/forms/Checkbox.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useTemplateRef, watchEffect } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  indeterminate: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
+const ui = useTheme(
+  "checkbox",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    size: props.size
+  })
+);
+const control = useTemplateRef("control");
+watchEffect(() => {
+  const el = control.value;
+  if (el) el.indeterminate = props.indeterminate;
+});
+function onChange(event) {
+  model.value = event.target.checked;
+}
+</script>
+
+<template>
+    <input
+        ref="control"
+        :checked="model === true"
+        :class="ui.base"
+        type="checkbox"
+        @change="onChange"
+    />
+</template>

package/dist/runtime/app/components/forms/Checkbox.vue.d.ts

@@ -0,0 +1,35 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La casilla, nativa.
+ *
+ * Su raíz **es** el `<input>`, así que no apaga la herencia de atributos
+ * como hacen el input de texto o el área: lo que le llegue —el `id` y los
+ * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
+ * elemento correcto sin reenviarlo a mano.
+ */
+type __VLS_Props = {
+    color?: VunoColor;
+    /**
+     * Ni marcada ni sin marcar: la selección de una tabla donde solo
+     * hay algunas filas elegidas.
+     */
+    indeterminate?: boolean;
+    size?: VunoSize;
+    ui?: VunoSlots;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean | 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: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    color: VunoColor;
+    size: VunoSize;
+    ui: VunoSlots;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/forms/ControlShell.d.vue.ts

@@ -0,0 +1,37 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type __VLS_Props = {
+    size?: VunoSize;
+    ui?: VunoSlots;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    ui: VunoSlots;
+}, {}, {}, {}, 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/forms/ControlShell.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme("control", () => props.ui, () => ({ size: props.size }));
+</script>
+
+<template>
+    <div :class="ui.root">
+        <slot name="leading" />
+
+        <slot />
+
+        <slot name="trailing" />
+    </div>
+</template>

package/dist/runtime/app/components/forms/ControlShell.vue.d.ts

@@ -0,0 +1,37 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type __VLS_Props = {
+    size?: VunoSize;
+    ui?: VunoSlots;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    ui: VunoSlots;
+}, {}, {}, {}, 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;
+    };
+};