@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/Search/Search.theme.d.ts

@@ -0,0 +1,121 @@
+/**
+ * `vuno--search`: la caja del buscador, la lupa, el campo y el botón de limpiar.
+ *
+ * Vuno **no** pinta el buscador con la caja compartida de los campos de
+ * texto: su clase es `vuno--search-input` y no `vuno--text-input`, y la
+ * diferencia no es cosmética. El campo lleva un relleno lateral igual a su
+ * propia altura, y la lupa y el botón de limpiar se colocan *encima* en
+ * posición absoluta ocupando un cuadrado de esa misma altura. Reproducirlo con
+ * la caja flexible de `PrimitiveControl` dejaba el icono y el texto a una
+ * distancia distinta en cada tamaño, así que aquí se reproduce la anatomía tal
+ * como la define el sistema de origen.
+ *
+ * La altura viaja en `--vuno-search-height` en vez de repetirse en cada slot:
+ * el cuadrado de la lupa, el del botón de limpiar, el alto del campo y su
+ * relleno lateral son **el mismo número**, y con una variable el tamaño se
+ * declara una vez —y un proyecto puede cambiarlo desde el tema sin tocar
+ * cuatro clases que tienen que seguir coincidiendo.
+ *
+ * El color del icono cuelga del envoltorio y no del `Icon`: los iconos heredan
+ * `currentColor`, de modo que el estado —lupa primaria plegada, secundaria
+ * desplegada, apagada con el campo deshabilitado— se escribe en un solo sitio.
+ */
+export declare const searchTheme: Record<"search", {
+    readonly slots: {
+        /**
+         * El botón de limpiar se queda en el DOM y se oculta con
+         * `visibility`, como hace Vuno con `vuno--search-close--hidden`: así
+         * sale del recorrido del tabulador y del árbol de accesibilidad sin
+         * que la caja cambie de tamaño al aparecer el primer carácter.
+         */
+        readonly close: "visible absolute end-0 top-0 flex size-(--vuno-search-height) cursor-pointer items-center justify-center border border-transparent bg-clip-padding text-(--vuno-icon-primary) opacity-100 transition-[background-color,opacity,outline-color,visibility] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-background-selected) active:outline-solid active:outline-2 active:-outline-offset-2 active:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-on-color-disabled) disabled:hover:bg-transparent motion-reduce:transition-none peer-focus:hover:bg-transparent peer-focus:hover:outline-none peer-focus:hover:after:absolute peer-focus:hover:after:inset-y-0.5 peer-focus:hover:after:start-0 peer-focus:hover:after:end-0.5 peer-focus:hover:after:bg-(--vuno-field-hover-01) peer-focus:hover:after:content-['']";
+        readonly closeIcon: "relative z-1 size-4";
+        readonly icon: "size-4 shrink-0";
+        /**
+         * `peer` no es decorativo: el contorno de foco del campo lo dibuja el
+         * propio `<input>` y el botón de limpiar se le monta encima, así que
+         * al pasar el ratón por el botón el relleno de hover taparía ese
+         * contorno. Vuno lo resuelve pintando el hover en un pseudoelemento
+         * más estrecho mientras el campo tiene el foco, y para preguntar por
+         * el foco del hermano anterior hace falta la marca.
+         *
+         * El interletrado es la única medida que no se copia: los +0.16 px del
+         * escalón de 14 px están calculados para IBM Plex Sans, e Inter ya
+         * reparte ese aire a 14 px. Es el mismo valor que en `TextInput`, para
+         * que un buscador y un campo de texto vecinos se lean igual.
+         */
+        readonly input: "peer order-1 m-0 h-(--vuno-search-height) w-full appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-(--vuno-search-height) text-sm leading-[1.125rem] tracking-normal text-ellipsis text-(--vuno-text-primary) outline-none transition-[background-color,outline-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) placeholder:opacity-100 placeholder:transition-opacity placeholder:duration-(--vuno-duration-fast-01) placeholder:ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:text-(--vuno-text-disabled) disabled:placeholder:text-(--vuno-field-01) motion-reduce:transition-none motion-reduce:placeholder:transition-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden";
+        readonly magnifier: "absolute inset-y-0 start-0 z-2 flex size-(--vuno-search-height) items-center justify-center text-(--vuno-icon-secondary)";
+        readonly root: "group relative flex w-full items-center";
+    };
+    readonly variants: {
+        /** Vuno solo muestra el botón de limpiar cuando hay algo que limpiar. */
+        readonly filled: {
+            readonly false: {
+                readonly close: "invisible opacity-0";
+            };
+            readonly true: {};
+        };
+        /**
+         * Las cuatro alturas del buscador: 24, 32, 40 y 48 px.
+         *
+         * `xs` es el mínimo de `layout.use('size')` en `_search.scss` y la
+         * altura que usan la barra de herramientas de una tabla y los filtros
+         * embebidos. `TextInput` ya lo ofrece, así que sin él los dos controles
+         * no compartían escala y un filtro compacto no se podía componer con un
+         * buscador a juego.
+         */
+        readonly size: {
+            readonly xs: {
+                readonly root: "[--vuno-search-height:1.5rem]";
+            };
+            readonly sm: {
+                readonly root: "[--vuno-search-height:2rem]";
+            };
+            readonly md: {
+                readonly root: "[--vuno-search-height:2.5rem]";
+            };
+            readonly lg: {
+                readonly root: "[--vuno-search-height:3rem]";
+            };
+        };
+        /**
+         * Plegado, desplegado o fijo. Es una sola dimensión y no dos booleanos
+         * porque `expanded` no significa nada cuando el buscador no es
+         * expandible, y como pareja obligaba a declarar la combinación
+         * imposible para que no se colase por el camino.
+         */
+        readonly state: {
+            /**
+             * Plegado, el buscador ocupa el cuadrado de la lupa. El campo
+             * sigue ahí —conserva su valor y su etiqueta— pero sin ancho,
+             * sin borde y sin fondo, que es como Vuno lo esconde.
+             */
+            readonly collapsed: {
+                readonly close: "invisible opacity-0";
+                readonly input: "w-0 border-0 bg-transparent p-0 placeholder:opacity-0";
+                readonly magnifier: "cursor-pointer text-(--vuno-icon-primary) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-background-hover) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed motion-reduce:transition-none group-has-disabled:text-(--vuno-icon-disabled)";
+                readonly root: "w-(--vuno-search-height) transition-[width] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+            };
+            /** Fijo: la lupa es decorativa y no recibe ni ratón ni foco. */
+            readonly default: {
+                readonly magnifier: "pointer-events-none group-has-disabled:text-(--vuno-icon-on-color-disabled)";
+            };
+            /**
+             * Desplegado: la lupa vuelve a ser decorativa y el campo manda.
+             *
+             * El relleno lateral entra en la transición porque es la mitad de
+             * la apertura: la caja crece de 0 al 100 % y el campo pasa de `p-0`
+             * a un relleno igual a su altura. Sin animarlo, el placeholder y el
+             * cursor saltan a su sitio en el primer fotograma mientras la caja
+             * todavía se está abriendo. Al plegar la clase desaparece y el
+             * cierre vuelve a ser inmediato, como en el original.
+             */
+            readonly expanded: {
+                readonly input: "transition-[background-color,outline-color,padding]";
+                readonly magnifier: "pointer-events-none group-has-disabled:text-(--vuno-icon-disabled)";
+                readonly root: "w-full transition-[width] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,94 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const searchTheme = defineTheme("search", {
+  slots: {
+    /**
+     * El botón de limpiar se queda en el DOM y se oculta con
+     * `visibility`, como hace Vuno con `vuno--search-close--hidden`: así
+     * sale del recorrido del tabulador y del árbol de accesibilidad sin
+     * que la caja cambie de tamaño al aparecer el primer carácter.
+     */
+    close: "visible absolute end-0 top-0 flex size-(--vuno-search-height) cursor-pointer items-center justify-center border border-transparent bg-clip-padding text-(--vuno-icon-primary) opacity-100 transition-[background-color,opacity,outline-color,visibility] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-background-selected) active:outline-solid active:outline-2 active:-outline-offset-2 active:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:text-(--vuno-icon-on-color-disabled) disabled:hover:bg-transparent motion-reduce:transition-none peer-focus:hover:bg-transparent peer-focus:hover:outline-none peer-focus:hover:after:absolute peer-focus:hover:after:inset-y-0.5 peer-focus:hover:after:start-0 peer-focus:hover:after:end-0.5 peer-focus:hover:after:bg-(--vuno-field-hover-01) peer-focus:hover:after:content-['']",
+    closeIcon: "relative z-1 size-4",
+    icon: "size-4 shrink-0",
+    /**
+     * `peer` no es decorativo: el contorno de foco del campo lo dibuja el
+     * propio `<input>` y el botón de limpiar se le monta encima, así que
+     * al pasar el ratón por el botón el relleno de hover taparía ese
+     * contorno. Vuno lo resuelve pintando el hover en un pseudoelemento
+     * más estrecho mientras el campo tiene el foco, y para preguntar por
+     * el foco del hermano anterior hace falta la marca.
+     *
+     * El interletrado es la única medida que no se copia: los +0.16 px del
+     * escalón de 14 px están calculados para IBM Plex Sans, e Inter ya
+     * reparte ese aire a 14 px. Es el mismo valor que en `TextInput`, para
+     * que un buscador y un campo de texto vecinos se lean igual.
+     */
+    input: "peer order-1 m-0 h-(--vuno-search-height) w-full appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-(--vuno-search-height) text-sm leading-[1.125rem] tracking-normal text-ellipsis text-(--vuno-text-primary) outline-none transition-[background-color,outline-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) placeholder:opacity-100 placeholder:transition-opacity placeholder:duration-(--vuno-duration-fast-01) placeholder:ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:text-(--vuno-text-disabled) disabled:placeholder:text-(--vuno-field-01) motion-reduce:transition-none motion-reduce:placeholder:transition-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
+    magnifier: "absolute inset-y-0 start-0 z-2 flex size-(--vuno-search-height) items-center justify-center text-(--vuno-icon-secondary)",
+    root: "group relative flex w-full items-center"
+  },
+  variants: {
+    /** Vuno solo muestra el botón de limpiar cuando hay algo que limpiar. */
+    filled: {
+      false: { close: "invisible opacity-0" },
+      true: {}
+    },
+    /**
+     * Las cuatro alturas del buscador: 24, 32, 40 y 48 px.
+     *
+     * `xs` es el mínimo de `layout.use('size')` en `_search.scss` y la
+     * altura que usan la barra de herramientas de una tabla y los filtros
+     * embebidos. `TextInput` ya lo ofrece, así que sin él los dos controles
+     * no compartían escala y un filtro compacto no se podía componer con un
+     * buscador a juego.
+     */
+    size: {
+      xs: { root: "[--vuno-search-height:1.5rem]" },
+      sm: { root: "[--vuno-search-height:2rem]" },
+      md: { root: "[--vuno-search-height:2.5rem]" },
+      lg: { root: "[--vuno-search-height:3rem]" }
+    },
+    /**
+     * Plegado, desplegado o fijo. Es una sola dimensión y no dos booleanos
+     * porque `expanded` no significa nada cuando el buscador no es
+     * expandible, y como pareja obligaba a declarar la combinación
+     * imposible para que no se colase por el camino.
+     */
+    state: {
+      /**
+       * Plegado, el buscador ocupa el cuadrado de la lupa. El campo
+       * sigue ahí —conserva su valor y su etiqueta— pero sin ancho,
+       * sin borde y sin fondo, que es como Vuno lo esconde.
+       */
+      collapsed: {
+        close: "invisible opacity-0",
+        input: "w-0 border-0 bg-transparent p-0 placeholder:opacity-0",
+        /*
+         * El contorno cuelga de `:focus` y no de `:focus-visible`: la
+         * lupa recupera el foco al plegar con `Escape`, y si el ciclo
+         * empezó con el ratón el foco volvería a un control que no se
+         * señala.
+         */
+        magnifier: "cursor-pointer text-(--vuno-icon-primary) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-background-hover) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed motion-reduce:transition-none group-has-disabled:text-(--vuno-icon-disabled)",
+        root: "w-(--vuno-search-height) transition-[width] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none"
+      },
+      /** Fijo: la lupa es decorativa y no recibe ni ratón ni foco. */
+      default: { magnifier: "pointer-events-none group-has-disabled:text-(--vuno-icon-on-color-disabled)" },
+      /**
+       * Desplegado: la lupa vuelve a ser decorativa y el campo manda.
+       *
+       * El relleno lateral entra en la transición porque es la mitad de
+       * la apertura: la caja crece de 0 al 100 % y el campo pasa de `p-0`
+       * a un relleno igual a su altura. Sin animarlo, el placeholder y el
+       * cursor saltan a su sitio en el primer fotograma mientras la caja
+       * todavía se está abriendo. Al plegar la clase desaparece y el
+       * cierre vuelve a ser inmediato, como en el original.
+       */
+      expanded: {
+        input: "transition-[background-color,outline-color,padding]",
+        magnifier: "pointer-events-none group-has-disabled:text-(--vuno-icon-disabled)",
+        root: "w-full transition-[width] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,59 @@
+import type { ControlProps, ControlSize } from '#vuno/types/control';
+/**
+ * La escala del buscador.
+ *
+ * Admite un paso más corto que los tres de `ControlSize` —`xs`, 24 px, el
+ * mínimo de `layout.use('size')` en `_search.scss`— y por eso se declara aquí
+ * en vez de ensanchar la escala de los controles en general. Es el mismo
+ * recurso que usan `TextInputSize` y `SelectSize`.
+ */
+export type SearchSize = 'xs' | ControlSize;
+/**
+ * Los slots del buscador siguen su anatomía: la caja, la lupa con su icono, el
+ * campo y el botón de limpiar con el suyo.
+ */
+export type SearchSlot = 'close' | 'closeIcon' | 'icon' | 'input' | 'magnifier' | 'root';
+/**
+ * El contrato de `Search` de Vuno, con tres traducciones a Vue y nada más.
+ *
+ * `value` y `onChange` son `v-model`; `isExpanded` es `v-model:expanded`, que
+ * es lo que permite que la barra de herramientas de una tabla sepa si su
+ * filtro está abierto; y `renderIcon` es `icon`, un nombre de Iconify, porque
+ * en Vuno los iconos se nombran y no se pasan como componente.
+ *
+ * `expandable` es la única prop que Vuno no tiene: allí el buscador
+ * expandible es otro componente —`ExpandableSearch`— que reenvía a este con
+ * `onExpand` puesto. Reproducir esa división pedía un segundo componente
+ * público cuyo único aporte era decidir un booleano, así que aquí el
+ * comportamiento es una capacidad declarada del mismo control.
+ *
+ * `id`, `name`, `disabled` y `required` llegan de `ControlProps` —`size` se
+ * redeclara porque el buscador tiene un paso más—, y el resto de atributos cae
+ * al `<input>` como el `...rest` de Vuno.
+ */
+export type SearchProps = Omit<ControlProps<SearchSlot>, 'size'> & {
+    /** Vuno lo deja en `off`: el historial del navegador estorba al buscar. */
+    autocomplete?: string;
+    autofocus?: boolean;
+    /** Nombre accesible del botón de limpiar. */
+    closeButtonLabelText?: string;
+    /** Plegado ocupa el cuadrado de la lupa y se abre al activarla. */
+    expandable?: boolean;
+    /**
+     * Nombre accesible de la lupa cuando hace de disparador. Vuno reutiliza
+     * `labelText` y esta prop solo existe para cuando el texto del campo no
+     * sirve como nombre de la acción de abrirlo.
+     */
+    expandButtonLabelText?: string;
+    expanded?: boolean;
+    /** Nombre Iconify de la lupa. Vuno lo llama `renderIcon`. */
+    icon?: string;
+    /**
+     * Etiqueta del campo. Vuno la oculta siempre a la vista y la conserva en
+     * el árbol de accesibilidad, y además nombra con ella la región de
+     * búsqueda; por eso es obligatoria y no hay forma de mostrarla.
+     */
+    labelText: string;
+    placeholder?: string;
+    size?: SearchSize;
+};

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

@@ -0,0 +1,172 @@
+<script setup>
+import { computed, nextTick, useAttrs, useId, useTemplateRef } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Search", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const expanded = defineModel("expanded", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  autocomplete: { type: String, required: false, default: "off" },
+  autofocus: { type: Boolean, required: false, default: false },
+  closeButtonLabelText: { type: String, required: false, default: void 0 },
+  expandable: { type: Boolean, required: false, default: false },
+  expandButtonLabelText: { type: String, required: false, default: void 0 },
+  expanded: { type: Boolean, required: false },
+  icon: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  placeholder: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["clear", "expand"]);
+const attrs = useAttrs();
+const icons = useIcons();
+const messages = useMessages();
+const input = useTemplateRef("input");
+const magnifier = useTemplateRef("magnifier");
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const labelId = computed(() => `${controlId.value}-search`);
+const filled = computed(() => model.value !== void 0 && model.value !== null && model.value !== "");
+const collapsed = computed(() => props.expandable && !expanded.value);
+const state = computed(() => !props.expandable ? "default" : expanded.value ? "expanded" : "collapsed");
+const closeLabel = computed(() => props.closeButtonLabelText ?? messages.value.clearSearch);
+const searchIcon = computed(() => props.icon ?? icons.value.search);
+const magnifierLabel = computed(() => props.expandButtonLabelText ?? props.labelText);
+const inputAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs;
+  return rest;
+});
+const ui = useTheme(
+  "search",
+  () => props.ui,
+  () => ({ filled: filled.value ? "true" : "false", size: props.size, state: state.value })
+);
+function focus() {
+  input.value?.focus();
+}
+function onInput(event) {
+  model.value = event.target.value;
+}
+function clear() {
+  model.value = "";
+  emit("clear");
+  focus();
+}
+async function expand() {
+  if (props.disabled || expanded.value) return;
+  expanded.value = true;
+  emit("expand");
+  await nextTick();
+  focus();
+}
+async function collapse() {
+  expanded.value = false;
+  await nextTick();
+  magnifier.value?.focus();
+}
+function onKeydown(event) {
+  if (event.key !== "Escape") return;
+  event.stopPropagation();
+  if (filled.value) {
+    clear();
+    return;
+  }
+  if (props.expandable && expanded.value) void collapse();
+}
+function onFocusOut(event) {
+  if (!props.expandable || filled.value) return;
+  const next = event.relatedTarget;
+  const current = event.currentTarget;
+  if (!next || !current.contains(next)) expanded.value = false;
+}
+defineExpose({ focus });
+</script>
+
+<template>
+    <div
+        :aria-labelledby="labelId"
+        :class="[ui.root, $attrs.class]"
+        role="search"
+        @focusout="onFocusOut"
+    >
+        <button
+            v-if="props.expandable"
+            ref="magnifier"
+            :aria-controls="controlId"
+            :aria-expanded="expanded"
+            :aria-label="props.expandButtonLabelText"
+            :aria-labelledby="props.expandButtonLabelText ? void 0 : labelId"
+            :class="ui.magnifier"
+            :disabled="props.disabled"
+            :tabindex="expanded ? -1 : void 0"
+            :title="collapsed ? magnifierLabel : void 0"
+            type="button"
+            @click="expand"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="searchIcon"
+            />
+        </button>
+
+        <span
+            v-else
+            aria-hidden="true"
+            :class="ui.magnifier"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="searchIcon"
+            />
+        </span>
+
+        <FormLabel
+            :id="labelId"
+            :disabled="props.disabled"
+            :for="controlId"
+            hideLabel
+            noMargin
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <input
+            :id="controlId"
+            ref="input"
+            v-bind="inputAttrs"
+            :autocomplete="props.autocomplete"
+            :autofocus="props.autofocus"
+            :class="ui.input"
+            :disabled="props.disabled"
+            :inert="collapsed || void 0"
+            :name="props.name"
+            :placeholder="props.placeholder ?? messages.searchPlaceholder"
+            :required="props.required"
+            :tabindex="collapsed ? -1 : void 0"
+            type="search"
+            :value="model"
+            @input="onInput"
+            @keydown="onKeydown"
+        />
+
+        <button
+            :aria-label="closeLabel"
+            :class="ui.close"
+            :disabled="props.disabled"
+            :title="closeLabel"
+            type="button"
+            @click="clear"
+        >
+            <Icon
+                :class="ui.closeIcon"
+                :name="icons.clearSearch"
+            />
+        </button>
+    </div>
+</template>

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

@@ -0,0 +1,37 @@
+import type { SearchProps } from './Search.types.js';
+type __VLS_Props = SearchProps;
+declare function focus(): void;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+    clear: () => any;
+    "update:modelValue": (value: string | undefined) => any;
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onExpand?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./Search.types.js").SearchSize;
+    icon: string;
+    placeholder: string;
+    name: string;
+    expandable: boolean;
+    id: string;
+    ui: Partial<Record<import("./Search.types.js").SearchSlot, string>>;
+    required: boolean;
+    autocomplete: string;
+    autofocus: boolean;
+    closeButtonLabelText: string;
+    expandButtonLabelText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

@@ -0,0 +1,23 @@
+import type { Component } from 'vue';
+import type { HeadingLevel } from '#vuno/components/Heading/Heading.types';
+export type SectionProps = {
+    /**
+     * Raíz alternativa. Una sección de contenido no siempre es un `section`:
+     * puede ser un `article`, un `aside` o un `nav`, y forzar el elemento
+     * obligaría a envolverla solo para recuperar la semántica correcta.
+     */
+    as?: Component | string;
+    /**
+     * Fija el nivel de los encabezados que contiene y anula el que herede del
+     * anidamiento.
+     *
+     * Es la vía del sistema de origen para colocar una rama entera donde toca
+     * —`level="5"` hace que su `Heading` sea un `h5`— cuando el árbol de
+     * secciones no coincide con la jerarquía visible del documento.
+     *
+     * Sin declararla, cada sección baja un escalón respecto de la de arriba: la
+     * primera lleva sus encabezados al `h2` y la siguiente al `h3`, con tope en
+     * `h6`. Declarada, la cuenta vuelve a empezar desde ese nivel.
+     */
+    level?: HeadingLevel;
+};

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

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, provide } from "vue";
+import { clampHeadingLevel, headingKey, useHeadingLevel } from "#vuno/components/Heading/Heading.context";
+defineOptions({ name: "Section" });
+const props = defineProps({
+  as: { type: null, required: false, default: "section" },
+  level: { type: null, required: false, default: void 0 }
+});
+defineSlots();
+const inherited = useHeadingLevel();
+const level = computed(() => clampHeadingLevel(props.level ?? inherited.level.value + 1));
+provide(headingKey, level);
+</script>
+
+<template>
+    <section v-if="props.as === 'section'">
+        <slot />
+    </section>
+    <component
+        :is="props.as"
+        v-else
+    >
+        <slot />
+    </component>
+</template>

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

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

@@ -0,0 +1,31 @@
+import type { OptionValue } from '#vuno/types/control';
+import type { SelectProps } from './Select.types.js';
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: OptionValue | 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: OptionValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: OptionValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./Select.types.js").SelectSize;
+    inline: boolean;
+    invalid: boolean;
+    warn: boolean;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    id: string;
+    ui: import("#vuno/types/control").ControlUi<import("./Select.types.js").SelectSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    noLabel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;