@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,55 @@
+export declare const listTheme: Record<"list", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly ordered: "[counter-reset:item]";
+        };
+        readonly native: "false";
+        readonly nested: "false";
+    }, {
+        readonly class: {
+            readonly ordered: "list-decimal";
+        };
+        readonly native: "true";
+        readonly nested: "false";
+    }];
+    readonly slots: {
+        readonly item: "text-(--vuno-text-primary)";
+        readonly ordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]";
+        readonly unordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]";
+    };
+    readonly variants: {
+        readonly expressive: {
+            readonly false: {};
+            readonly true: {
+                readonly ordered: "text-base leading-6 tracking-normal";
+                readonly unordered: "text-base leading-6 tracking-normal";
+            };
+        };
+        readonly marker: {
+            readonly counter: {
+                readonly item: "relative before:absolute before:-start-6 before:[counter-increment:item] before:content-[counter(item)_'.']";
+            };
+            readonly dash: {
+                readonly item: "relative before:absolute before:-start-4 before:content-['–']";
+            };
+            readonly native: {};
+            readonly square: {
+                readonly item: "relative before:absolute before:-start-3 before:content-['▪︎']";
+            };
+        };
+        readonly native: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly nested: {
+            readonly false: {
+                readonly unordered: "ms-4";
+            };
+            readonly true: {
+                readonly item: "ps-1";
+                readonly ordered: "ms-8 list-[lower-latin]";
+                readonly unordered: "ms-8";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,35 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const listTheme = defineTheme("list", {
+  compoundVariants: [
+    /* Solo la lista ordenada con contador necesita la cuenta, y solo el primer nivel la abre. */
+    { class: { ordered: "[counter-reset:item]" }, native: "false", nested: "false" },
+    /* La lista ordenada nativa de primer nivel recupera el marcador decimal del navegador. */
+    { class: { ordered: "list-decimal" }, native: "true", nested: "false" }
+  ],
+  slots: {
+    item: "text-(--vuno-text-primary)",
+    ordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]",
+    unordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]"
+  },
+  variants: {
+    /* `body-02`. La escala expresiva es para contenido editorial; la productiva para producto. */
+    expressive: {
+      false: {},
+      true: { ordered: "text-base leading-6 tracking-normal", unordered: "text-base leading-6 tracking-normal" }
+    },
+    marker: {
+      counter: { item: "relative before:absolute before:-start-6 before:[counter-increment:item] before:content-[counter(item)_'.']" },
+      /* – en guion medio, no un punto: es el marcador de primer nivel de Vuno. */
+      dash: { item: "relative before:absolute before:-start-4 before:content-['\u2013']" },
+      native: {},
+      /* ▪ con selector de variación textual, para que ningún sistema lo pinte como emoji. */
+      square: { item: "relative before:absolute before:-start-3 before:content-['\u25AA\uFE0E']" }
+    },
+    native: { false: {}, true: {} },
+    nested: {
+      false: { unordered: "ms-4" },
+      /* Segundo nivel y siguientes: 32 px de sangría, letras en la ordenada y 4 px de relleno en el elemento. */
+      true: { item: "ps-1", ordered: "ms-8 list-[lower-latin]", unordered: "ms-8" }
+    }
+  }
+});

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

@@ -0,0 +1,19 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type UnorderedListProps = {
+    /**
+     * Escala expresiva: `body-02` de 16 px en lugar de `body-01` de 14 px.
+     * Vuno la reserva para contenido editorial; en producto la productiva es
+     * casi siempre la correcta. Una lista dentro de otra expresiva la hereda.
+     */
+    isExpressive?: boolean;
+    /**
+     * Segundo nivel de la lista: sangría de 32 px y `▪` en lugar de `–`.
+     *
+     * No hace falta declararla. Una lista dentro de otra lista lo detecta sola,
+     * a diferencia de React, que obliga a pasarla en cada nivel. Se conserva
+     * para el caso en que el anidamiento no sea de componente —un nivel
+     * renderizado aparte— y para mantener el contrato de Vuno.
+     */
+    nested?: boolean;
+    ui?: ComponentUi<'list'>;
+};

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

@@ -0,0 +1,30 @@
+<script setup>
+import { computed, inject, provide } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { listKey } from "./UnorderedList.context";
+defineOptions({ name: "UnorderedList" });
+const props = defineProps({
+  isExpressive: { type: Boolean, required: false, default: false },
+  nested: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const parent = inject(listKey, void 0);
+const expressive = computed(() => props.isExpressive || Boolean(parent?.expressive.value));
+const nested = computed(() => props.nested || parent !== void 0);
+const marker = computed(() => nested.value ? "square" : "dash");
+provide(listKey, { expressive, marker, nested });
+const ui = useTheme(
+  "list",
+  () => props.ui,
+  () => ({ expressive: expressive.value ? "true" : "false", nested: nested.value ? "true" : "false" })
+);
+</script>
+
+<template>
+    <ul
+        :class="ui.unordered"
+        role="list"
+    >
+        <slot />
+    </ul>
+</template>

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

@@ -0,0 +1,18 @@
+import type { UnorderedListProps } from './UnorderedList.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UnorderedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListProps> & Readonly<{}>, {
+    nested: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"list">;
+    isExpressive: 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/composables/internal/useAnchor.d.ts

@@ -0,0 +1,47 @@
+import type { ComputePositionReturn, Middleware } from '@floating-ui/dom';
+import type { MaybeRefOrGetter } from 'vue';
+import type { Placement } 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 AnchorOptions = {
+    /**
+     * 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>;
+    /** Permite desactivar el volteo automático cuando el contrato exige una alineación fija. */
+    flip?: MaybeRefOrGetter<boolean | undefined>;
+    placement?: MaybeRefOrGetter<Placement>;
+    /** Lo que este control necesite además de la base: medir, recortar, lo que sea. */
+    middleware?: () => Middleware[];
+};
+export declare function useAnchor(options?: AnchorOptions): {
+    anchor: (reference: HTMLElement | undefined, floating: HTMLElement | undefined) => void;
+    release: () => void;
+};
+export {};

package/dist/runtime/app/composables/internal/useAnchor.js

@@ -0,0 +1,37 @@
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { onScopeDispose, toValue } from "vue";
+export function useAnchor(options = {}) {
+  let stop;
+  async function place(reference, floating) {
+    const edge = toValue(options.boundary);
+    const overflow = { padding: 8, ...edge ? { boundary: edge } : {} };
+    const middleware = [offset(toValue(options.distance) ?? 4)];
+    if (toValue(options.flip) !== false) middleware.push(flip(overflow));
+    middleware.push(shift(overflow));
+    const arrowElement = toValue(options.arrowElement);
+    if (arrowElement) middleware.push(arrow({ element: arrowElement }));
+    middleware.push(...options.middleware?.() ?? []);
+    const position = await computePosition(reference, floating, {
+      middleware,
+      placement: toValue(options.placement) ?? "bottom-start",
+      strategy: "fixed"
+    });
+    if (!floating.isConnected) return;
+    Object.assign(floating.style, { left: `${position.x}px`, top: `${position.y}px` });
+    options.onPlaced?.(position);
+  }
+  function anchor(reference, floating) {
+    release();
+    if (!reference || !floating) return;
+    stop = autoUpdate(reference, floating, () => void place(reference, floating), {
+      elementResize: typeof ResizeObserver !== "undefined",
+      layoutShift: typeof IntersectionObserver !== "undefined"
+    });
+  }
+  function release() {
+    stop?.();
+    stop = void 0;
+  }
+  onScopeDispose(release, true);
+  return { anchor, release };
+}

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

@@ -0,0 +1,5 @@
+type Direction = 'ltr' | 'rtl';
+type DirectionProvider = () => Direction;
+export declare function provideDirection(direction: DirectionProvider): void;
+export declare function useDirection(): DirectionProvider;
+export {};

package/dist/runtime/app/composables/internal/useDirection.js

@@ -0,0 +1,8 @@
+import { inject, provide } from "vue";
+const directionInjectionKey = Symbol("vuno-direction");
+export function provideDirection(direction) {
+  provide(directionInjectionKey, direction);
+}
+export function useDirection() {
+  return inject(directionInjectionKey, () => "ltr");
+}

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

@@ -0,0 +1,18 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { PortalTarget } from '#vuno/types/base';
+/**
+ * Dónde montar un desplegable para que se vea.
+ *
+ * Un `<dialog>` abierto con `showModal()` vive en la **capa superior** del
+ * navegador, que está por encima de cualquier `z-index`. Un desplegable que se
+ * monte en `body` —lo que hacen por defecto los componentes de Nuxt UI— queda
+ * por debajo de esa capa: se abre de verdad, con su `aria-expanded` y su
+ * `listbox` en el DOM, colocado en el sitio correcto, y no se ve. El campo
+ * parece roto sin que nada falle.
+ *
+ * La salida es montarlo **dentro** del propio diálogo, que ya está en la capa
+ * superior. Fuera de un modal no hay nada que proveer y se usa `body`.
+ */
+export declare function usePortal(target?: MaybeRefOrGetter<PortalTarget | undefined>): ComputedRef<string>;
+/** Lo llama quien abre una capa superior, para que sus campos la encuentren. */
+export declare function providePortal(target: PortalTarget): void;

package/dist/runtime/app/composables/internal/usePortal.js

@@ -0,0 +1,12 @@
+import { computed, inject, provide, toValue } from "vue";
+const portalInjectionKey = Symbol("vuno-portal");
+export function usePortal(target) {
+  const injected = inject(portalInjectionKey, true);
+  return computed(() => {
+    const resolved = toValue(target) ?? injected;
+    return resolved === true ? "body" : resolved;
+  });
+}
+export function providePortal(target) {
+  provide(portalInjectionKey, target);
+}

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

@@ -1,11 +1,11 @@
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { VunoSlots } from '#vuno/types/base';
-import type { VunoResolvedSlots, VunoVariantsOf } from '#vuno/types/slots';
-import type { VunoIcons, VunoMessages, VunoThemeKey } from '#vuno/types/theme';
+import type { ComponentSlots } from '#vuno/types/base';
+import type { ComponentVariants, ResolvedSlots } from '#vuno/types/slots';
+import type { Icons, Messages, ThemeKey } from '#vuno/types/theme';
 /**
  * Resuelve las clases de un componente del módulo.
  *
- * Devuelve cadenas, no `VunoSlots`: ese tipo describe lo que se puede
+ * Devuelve cadenas, no `ComponentSlots`: ese tipo describe lo que se puede
  * *escribir* —el tema, el `app.config` y la prop `ui` admiten un array de
  * clases por comodidad—, y `mergeSlots` lo funde a una sola cadena antes de
  * devolverlo. Un slot ausente sigue siendo `undefined`. Anunciar aquí el tipo
@@ -13,11 +13,11 @@ import type { VunoIcons, VunoMessages, VunoThemeKey } from '#vuno/types/theme';
  * —`enterActiveClass` y compañía de `TransitionGroup`— a afirmar un `string`
  * que el compilador no podía comprobar.
  *
- * @param key Clave del tema (`fieldInput`, `form`, ...).
+ * @param key Clave del tema (`textInput`, `form`, ...).
  * @param ui Override de la instancia, normalmente `props.ui`.
  */
-export declare function useTheme<TKey extends VunoThemeKey>(key: TKey, ui?: MaybeRefOrGetter<undefined | VunoSlots>, variants?: MaybeRefOrGetter<undefined | VunoVariantsOf<TKey>>): ComputedRef<VunoResolvedSlots<TKey>>;
-export declare function useIcons(): ComputedRef<VunoIcons>;
+export declare function useTheme<TKey extends ThemeKey>(key: TKey, ui?: MaybeRefOrGetter<ComponentSlots | undefined>, variants?: MaybeRefOrGetter<ComponentVariants<TKey> | undefined>): ComputedRef<ResolvedSlots<TKey>>;
+export declare function useIcons(): ComputedRef<Icons>;
 /**
  * El idioma con el que se formatea lo que lleva formato: fechas, números y
  * monedas. Sale de `app.config`, como los textos y los iconos.
@@ -28,4 +28,4 @@ export declare function useIcons(): ComputedRef<VunoIcons>;
  * render en servidor, que no tiene ninguno.
  */
 export declare function useLocale(): ComputedRef<string>;
-export declare function useMessages(): ComputedRef<VunoMessages>;
+export declare function useMessages(): ComputedRef<Messages>;

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

@@ -3,11 +3,11 @@ import { useAppConfig } from "#imports";
 import { defaultIcons, defaultMessages, defaultTheme } from "#vuno/theme";
 import { mergeSlots, resolveTheme } from "#vuno/utils/theme";
 export function useTheme(key, ui, variants) {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   const entry = (source) => source[key];
   return computed(() => {
     const requested = toValue(variants);
-    const active = { ...requested, radius: requested?.radius ?? vuno.value.theme?.radius };
+    const active = requested;
     const component = entry(vuno.value.components ?? {});
     const base = entry(defaultTheme);
     const merged = mergeSlots(resolveTheme(base, active), resolveTheme(component, active, Object.keys(base?.slots ?? {})), toValue(ui));
@@ -15,18 +15,18 @@ export function useTheme(key, ui, variants) {
   });
 }
 export function useIcons() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => ({ ...defaultIcons, ...vuno.value.icons }));
 }
 export function useLocale() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => vuno.value.locale ?? "es");
 }
 export function useMessages() {
-  const vuno = useVunoAppConfig();
+  const vuno = useVunoConfig();
   return computed(() => ({ ...defaultMessages, ...vuno.value.messages }));
 }
-function useVunoAppConfig() {
+function useVunoConfig() {
   const appConfig = useAppConfig();
   return computed(() => appConfig.vuno ?? {});
 }

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.d.vue.ts

@@ -1,6 +1,5 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFieldSize } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
 /**
  * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
  *
@@ -14,10 +13,8 @@ import type { VunoUi } from '#vuno/types/slots';
  * se anuncia dejen de coincidir.
  */
 type Props = {
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoFieldSize;
-    ui?: VunoUi<'control'>;
+    size?: ControlSize;
+    ui?: ComponentUi<'control'>;
 };
 type __VLS_Slots = {
     /** El control en sí. */
@@ -28,9 +25,8 @@ type __VLS_Slots = {
     trailing?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    size: VunoFieldSize;
-    ui: VunoUi<"control">;
+    size: ControlSize;
+    ui: ComponentUi<"control">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.theme.d.ts

@@ -17,33 +17,18 @@ export declare const controlTheme: Record<"control", {
      * el texto o el icono de entrada mantengan la misma alineación.
      */
     readonly slots: {
-        readonly root: "flex w-full items-center gap-1.5 rounded-sm border border-vuno-border-strong bg-vuno-surface text-vuno-body transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-vuno-error has-aria-invalid:[--vuno-accent:var(--color-vuno-error)] data-trailing:pe-0";
+        readonly root: "flex w-full items-center gap-2 rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) text-(--vuno-text-primary) focus-within:outline-solid focus-within:outline-2 focus-within:outline-(--vuno-focus) focus-within:outline-offset-[-2px] has-disabled:cursor-not-allowed has-disabled:text-(--vuno-text-disabled) has-aria-invalid:border-(--vuno-support-error) data-trailing:pe-0";
     };
     readonly variants: {
-        readonly groupOrientation: {
-            readonly horizontal: {
-                readonly root: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-within:z-1";
-            };
-            readonly vertical: {
-                readonly root: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-within:z-1";
-            };
-        };
-        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
         readonly size: {
-            readonly xs: {
-                readonly root: "min-h-6 ps-2 pe-2 text-xs";
-            };
             readonly sm: {
-                readonly root: "min-h-7 ps-2.5 pe-2.5 text-sm";
+                readonly root: "min-h-8 px-4 text-xs";
             };
             readonly md: {
-                readonly root: "min-h-8 ps-3 pe-3 text-sm";
+                readonly root: "min-h-10 px-4 text-sm";
             };
             readonly lg: {
-                readonly root: "min-h-9 ps-3.5 pe-3.5 text-base";
-            };
-            readonly xl: {
-                readonly root: "min-h-10 ps-4 pe-4 text-base";
+                readonly root: "min-h-12 px-4 text-sm";
             };
         };
     };

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.theme.js

@@ -1,4 +1,3 @@
-import { radiusByStep } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const controlTheme = defineTheme("control", {
   /**
@@ -19,20 +18,13 @@ export const controlTheme = defineTheme("control", {
    * el texto o el icono de entrada mantengan la misma alineación.
    */
   slots: {
-    root: "flex w-full items-center gap-1.5 rounded-sm border border-vuno-border-strong bg-vuno-surface text-vuno-body transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-vuno-error has-aria-invalid:[--vuno-accent:var(--color-vuno-error)] data-trailing:pe-0"
+    root: "flex w-full items-center gap-2 rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) text-(--vuno-text-primary) focus-within:outline-solid focus-within:outline-2 focus-within:outline-(--vuno-focus) focus-within:outline-offset-[-2px] has-disabled:cursor-not-allowed has-disabled:text-(--vuno-text-disabled) has-aria-invalid:border-(--vuno-support-error) data-trailing:pe-0"
   },
   variants: {
-    groupOrientation: {
-      horizontal: { root: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-within:z-1" },
-      vertical: { root: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-within:z-1" }
-    },
-    radius: radiusByStep("root"),
     size: {
-      xs: { root: "min-h-6 ps-2 pe-2 text-xs" },
-      sm: { root: "min-h-7 ps-2.5 pe-2.5 text-sm" },
-      md: { root: "min-h-8 ps-3 pe-3 text-sm" },
-      lg: { root: "min-h-9 ps-3.5 pe-3.5 text-base" },
-      xl: { root: "min-h-10 ps-4 pe-4 text-base" }
+      sm: { root: "min-h-8 px-4 text-xs" },
+      md: { root: "min-h-10 px-4 text-sm" },
+      lg: { root: "min-h-12 px-4 text-sm" }
     }
   }
 });

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.vue

@@ -1,21 +1,15 @@
 <script setup>
-import { computed } from "vue";
-import { resetControlGroup, useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
 import { useTheme } from "#vuno/composables/useTheme";
-defineOptions({ name: "VunoPrimitiveControl" });
+defineOptions({ name: "PrimitiveControl" });
 const props = defineProps({
-  radius: { type: String, required: false, default: void 0 },
   size: { type: String, required: false, default: void 0 },
   ui: { type: Object, required: false, default: void 0 }
 });
 defineSlots();
-const controlGroup = useVunoControlGroup();
-resetControlGroup();
-const size = computed(() => props.size ?? controlGroup.size.value ?? "md");
 const ui = useTheme(
   "control",
   () => props.ui,
-  () => ({ groupOrientation: controlGroup.orientation.value, radius: props.radius, size: size.value })
+  () => ({ size: props.size ?? "md" })
 );
 </script>
 

package/dist/runtime/app/primitives/PrimitiveControl/PrimitiveControl.vue.d.ts

@@ -1,6 +1,5 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFieldSize } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
 /**
  * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
  *
@@ -14,10 +13,8 @@ import type { VunoUi } from '#vuno/types/slots';
  * se anuncia dejen de coincidir.
  */
 type Props = {
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoFieldSize;
-    ui?: VunoUi<'control'>;
+    size?: ControlSize;
+    ui?: ComponentUi<'control'>;
 };
 type __VLS_Slots = {
     /** El control en sí. */
@@ -28,9 +25,8 @@ type __VLS_Slots = {
     trailing?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    size: VunoFieldSize;
-    ui: VunoUi<"control">;
+    size: ControlSize;
+    ui: ComponentUi<"control">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.d.vue.ts

@@ -0,0 +1,4 @@
+import type { PrimitiveIconProps } from './PrimitiveIcon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PrimitiveIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimitiveIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.types.d.ts

@@ -0,0 +1,3 @@
+export type PrimitiveIconProps = {
+    name: string;
+};

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { resolveDynamicComponent } from "vue";
+defineOptions({ name: "PrimitiveIcon" });
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const renderer = resolveDynamicComponent("VunoIconRenderer");
+const iconComponent = typeof renderer === "string" ? resolveDynamicComponent("Icon") : renderer;
+const unavailable = typeof iconComponent === "string";
+const is = unavailable ? "span" : iconComponent;
+</script>
+
+<template>
+    <!--
+        `data-vuno-icon` no es decorativo: es el asidero por el que `main.css`
+        devuelve al tema el control del tamaño. `@nuxt/icon` marca el nodo con
+        `.iconify`, pero esa clase también la llevan los iconos que el proyecto
+        consumidor pinta por su cuenta y que no nos tocan. El atributo acota la
+        regla a los iconos que sirve Vuno.
+    -->
+    <component
+        :is="is"
+        aria-hidden="true"
+        :class="{ 'inline-block': unavailable }"
+        data-vuno-icon
+        :name="unavailable ? void 0 : props.name"
+    />
+</template>

package/dist/runtime/app/primitives/PrimitiveIcon/PrimitiveIcon.vue.d.ts

@@ -0,0 +1,4 @@
+import type { PrimitiveIconProps } from './PrimitiveIcon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PrimitiveIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimitiveIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/primitives/PrimitiveInput/PrimitiveInput.d.vue.ts

@@ -1,6 +1,5 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFieldSize } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } 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. */
@@ -9,16 +8,14 @@ type __VLS_Slots = {
 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?: VunoFieldSize;
+    size?: ControlSize;
     /**
      * 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'>;
+    ui?: ComponentUi<'control' | 'input'>;
 };
 type __VLS_ModelProps = {
     /**
@@ -37,11 +34,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
 }>, {
+    size: ControlSize;
     icon: string;
-    radius: VunoRadius;
-    size: VunoFieldSize;
     type: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | "url";
-    ui: VunoUi<"control" | "input">;
+    ui: ComponentUi<"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;