@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/Layer/Layer.context.d.ts

@@ -0,0 +1,43 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+import { type LayerLevel } from './Layer.types.js';
+/**
+ * Nivel que una capa pasa a lo que contiene. Viaja como `ComputedRef` y no
+ * como número porque `level` es una prop: si una capa cambia de nivel, las que
+ * cuelgan de ella tienen que repintarse con el juego nuevo.
+ */
+export declare const layerKey: InjectionKey<ComputedRef<LayerLevel>>;
+/**
+ * Nivel de partida cuando no hay ninguna capa por encima, y es `1` a
+ * propósito.
+ *
+ * Vuno publica el juego `01` en el documento —`:root` emite el nivel 1 en
+ * `upstream/styles/scss/_layer.scss`—, así que una capa que también emitiera el
+ * `01` no cambiaría nada de lo que ya se veía. Por eso la primera capa avanza
+ * al `02`: es el mismo `createContext(1)` de `LayerContext` en React, y el
+ * escalón que produce la historia `Default` del Storybook, donde el contenido
+ * suelto, la primera capa y la segunda se ven en tres tonos distintos.
+ */
+export declare const layerBaseLevel: LayerLevel;
+/**
+ * Mantiene el nivel dentro de los tres juegos; el cuarto anidamiento no
+ * desborda.
+ *
+ * Los extremos se calculan de la longitud de `layerLevels` y no indexándola,
+ * porque un nivel **es** el índice de su juego: el rango válido es
+ * `0 … layerLevels.length - 1` por definición, y así el recorte sigue a la
+ * tabla sin leer una posición que el compilador no puede garantizar.
+ */
+export declare function clampLayerLevel(level: number): LayerLevel;
+/**
+ * El nivel de capa vigente, para un componente que necesite decidir algo con
+ * él —elegir un icono, un borde o un token numerado— en vez de limitarse a
+ * heredar los tokens contextuales.
+ *
+ * Es el `useLayer` de Vuno: devuelve el mismo valor que consumiría una capa
+ * anidada en ese punto, así que dentro de la primera capa vale `2` y anuncia
+ * que el siguiente escalón es el juego `03`. Cuando el color basta, no hace
+ * falta llamarlo: los tokens sin número ya cambian de valor solos.
+ */
+export declare function useLayer(): {
+    level: ComputedRef<LayerLevel>;
+};

package/dist/runtime/app/components/Layer/Layer.context.js

@@ -0,0 +1,11 @@
+import { computed, inject } from "vue";
+import { layerLevels } from "./Layer.types.js";
+export const layerKey = Symbol("vuno-layer");
+export const layerBaseLevel = 1;
+export function clampLayerLevel(level) {
+  return Math.min(layerLevels.length - 1, Math.max(0, level));
+}
+export function useLayer() {
+  const inherited = inject(layerKey, void 0);
+  return { level: computed(() => inherited?.value ?? layerBaseLevel) };
+}

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

@@ -0,0 +1,17 @@
+import type { LayerProps } from './Layer.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<LayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayerProps> & Readonly<{}>, {
+    as: import("vue").Component | string;
+    level: import("./Layer.types.js").LayerLevel;
+    withBackground: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,41 @@
+import type { Component } from 'vue';
+/**
+ * Los tres niveles que Vuno publica en `$layer-sets`: cada uno resuelve el
+ * grupo contextual completo —`layer`, `field`, `border`— con el juego numerado
+ * que le corresponde.
+ *
+ * Son índices y no números de capa: `0` pinta el juego `01`, `1` el `02` y `2`
+ * el `03`. Es el espacio de la prop `level` de Vuno y el que devuelve
+ * `useLayer`, y se conserva tal cual para que una migración desde React no
+ * tenga que desplazar valores.
+ */
+export declare const layerLevels: readonly [0, 1, 2];
+export type LayerLevel = (typeof layerLevels)[number];
+export type LayerProps = {
+    /**
+     * Raíz alternativa. Una capa suele coincidir con una región con nombre
+     * —`section`, `aside`, `main`—, y forzar un `div` obligaría a envolverla
+     * solo para recuperar la semántica.
+     */
+    as?: Component | string;
+    /**
+     * Fija el nivel y anula el que herede de la jerarquía. Es la vía de Vuno
+     * para reiniciar la cuenta —`level="0"` devuelve una rama al juego `01`— o
+     * para garantizar que una región siempre se pinte en el mismo nivel.
+     *
+     * Sin declararla, cada capa toma el nivel que le pasa la de arriba. El
+     * documento ya está en el juego `01`, así que la primera capa avanza al
+     * `02` y la segunda al `03`; de ahí en adelante el nivel se mantiene en
+     * `03` en lugar de desbordar.
+     */
+    level?: LayerLevel;
+    /**
+     * Pinta el fondo con `layer-background` del nivel vigente.
+     *
+     * No está activado de serie porque Vuno separa las dos cosas: una capa
+     * redefine los tokens contextuales de lo que contiene, y quién pinta el
+     * fondo puede ser el propio contenido. Se activa cuando la capa es la
+     * superficie visible y no solo el contexto de color.
+     */
+    withBackground?: boolean;
+};

package/dist/runtime/app/components/Layer/Layer.types.js

@@ -0,0 +1 @@
+export const layerLevels = [0, 1, 2];

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

@@ -0,0 +1,32 @@
+<script setup>
+import { computed, provide } from "vue";
+import { clampLayerLevel, layerKey, useLayer } from "./Layer.context";
+defineOptions({ name: "Layer" });
+const props = defineProps({
+  as: { type: null, required: false, default: "div" },
+  level: { type: null, required: false, default: void 0 },
+  withBackground: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const inherited = useLayer();
+const level = computed(() => props.level === void 0 ? inherited.level.value : clampLayerLevel(props.level));
+provide(
+  layerKey,
+  computed(() => clampLayerLevel(level.value + 1))
+);
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        :data-background="props.withBackground ? '' : void 0"
+        :data-level="level"
+        data-vuno-layer
+    >
+        <slot />
+    </component>
+</template>
+
+<style scoped>
+[data-vuno-layer][data-level="1"]{--vuno-border-strong-01:var(--vuno-border-strong-02);--vuno-border-subtle-00:var(--vuno-border-subtle-01);--vuno-border-subtle-01:var(--vuno-border-subtle-02);--vuno-border-subtle-selected-01:var(--vuno-border-subtle-selected-02);--vuno-border-tile-01:var(--vuno-border-tile-02);--vuno-field-01:var(--vuno-field-02);--vuno-field-hover-01:var(--vuno-field-hover-02);--vuno-layer-01:var(--vuno-layer-02);--vuno-layer-accent-01:var(--vuno-layer-accent-02);--vuno-layer-accent-active-01:var(--vuno-layer-accent-active-02);--vuno-layer-accent-hover-01:var(--vuno-layer-accent-hover-02);--vuno-layer-active-01:var(--vuno-layer-active-02);--vuno-layer-background-01:var(--vuno-layer-background-02);--vuno-layer-hover-01:var(--vuno-layer-hover-02);--vuno-layer-selected-01:var(--vuno-layer-selected-02);--vuno-layer-selected-hover-01:var(--vuno-layer-selected-hover-02)}[data-vuno-layer][data-level="2"]{--vuno-border-strong-01:var(--vuno-border-strong-03);--vuno-border-subtle-00:var(--vuno-border-subtle-02);--vuno-border-subtle-01:var(--vuno-border-subtle-03);--vuno-border-subtle-selected-01:var(--vuno-border-subtle-selected-03);--vuno-border-tile-01:var(--vuno-border-tile-03);--vuno-field-01:var(--vuno-field-03);--vuno-field-hover-01:var(--vuno-field-hover-03);--vuno-layer-01:var(--vuno-layer-03);--vuno-layer-accent-01:var(--vuno-layer-accent-03);--vuno-layer-accent-active-01:var(--vuno-layer-accent-active-03);--vuno-layer-accent-hover-01:var(--vuno-layer-accent-hover-03);--vuno-layer-active-01:var(--vuno-layer-active-03);--vuno-layer-background-01:var(--vuno-layer-background-03);--vuno-layer-hover-01:var(--vuno-layer-hover-03);--vuno-layer-selected-01:var(--vuno-layer-selected-03);--vuno-layer-selected-hover-01:var(--vuno-layer-selected-hover-03)}[data-vuno-layer][data-background]{background-color:var(--vuno-layer-background-01)}
+</style>

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

@@ -0,0 +1,17 @@
+import type { LayerProps } from './Layer.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<LayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayerProps> & Readonly<{}>, {
+    as: import("vue").Component | string;
+    level: import("./Layer.types.js").LayerLevel;
+    withBackground: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,26 @@
+import type { LinkProps } from './Link.types.js';
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    disabled: boolean;
+    size: import("./Link.types.js").LinkSize;
+    inline: boolean;
+    icon: string;
+    visited: boolean;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"link">;
+    href: string;
+    as: import("vue").Component | string;
+    rel: string;
+    target: string;
+}, {}, {}, {}, 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/Link/Link.theme.d.ts

@@ -0,0 +1,40 @@
+export declare const linkTheme: Record<"link", {
+    readonly slots: {
+        readonly base: "m-0 inline-flex border-0 p-0 align-baseline font-inherit font-normal text-(--vuno-link-primary) no-underline outline-none transition-[color] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) visited:text-(--vuno-link-primary) hover:text-(--vuno-link-primary-hover) hover:underline hover:visited:text-(--vuno-link-primary-hover) focus:underline focus:outline-solid focus:outline-1 focus:outline-(--vuno-focus) active:text-(--vuno-link-primary) active:underline active:outline-solid active:outline-1 active:outline-(--vuno-focus) active:hover:visited:text-(--vuno-link-primary) aria-disabled:cursor-not-allowed aria-disabled:text-(--vuno-text-disabled) aria-disabled:no-underline aria-disabled:hover:text-(--vuno-text-disabled) aria-disabled:hover:no-underline aria-disabled:focus:no-underline aria-disabled:focus:outline-none aria-disabled:active:text-(--vuno-text-disabled) aria-disabled:active:no-underline aria-disabled:active:outline-none motion-reduce:transition-none";
+        readonly icon: "size-4";
+        readonly iconWrapper: "ms-2 inline-flex h-[1lh] items-center align-text-bottom leading-[inherit]";
+    };
+    readonly variants: {
+        readonly inline: {
+            readonly false: {};
+            readonly true: {
+                readonly base: "inline underline aria-disabled:underline";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly base: "text-xs/[1rem] tracking-[0.16px]";
+            };
+            readonly md: {
+                readonly base: "text-sm/[1.125rem] tracking-normal";
+            };
+            readonly lg: {
+                readonly base: "text-base/[1.375rem] tracking-normal";
+                readonly icon: "size-5";
+                readonly iconWrapper: "h-5";
+            };
+        };
+        readonly visited: {
+            readonly false: {};
+            readonly true: {
+                readonly base: "visited:text-(--vuno-link-visited)";
+            };
+        };
+        readonly withIcon: {
+            readonly false: {};
+            readonly true: {
+                readonly base: "inline-block";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,28 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const linkTheme = defineTheme("link", {
+  slots: {
+    base: "m-0 inline-flex border-0 p-0 align-baseline font-inherit font-normal text-(--vuno-link-primary) no-underline outline-none transition-[color] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) visited:text-(--vuno-link-primary) hover:text-(--vuno-link-primary-hover) hover:underline hover:visited:text-(--vuno-link-primary-hover) focus:underline focus:outline-solid focus:outline-1 focus:outline-(--vuno-focus) active:text-(--vuno-link-primary) active:underline active:outline-solid active:outline-1 active:outline-(--vuno-focus) active:hover:visited:text-(--vuno-link-primary) aria-disabled:cursor-not-allowed aria-disabled:text-(--vuno-text-disabled) aria-disabled:no-underline aria-disabled:hover:text-(--vuno-text-disabled) aria-disabled:hover:no-underline aria-disabled:focus:no-underline aria-disabled:focus:outline-none aria-disabled:active:text-(--vuno-text-disabled) aria-disabled:active:no-underline aria-disabled:active:outline-none motion-reduce:transition-none",
+    icon: "size-4",
+    iconWrapper: "ms-2 inline-flex h-[1lh] items-center align-text-bottom leading-[inherit]"
+  },
+  variants: {
+    inline: {
+      false: {},
+      /* Vuno conserva el subrayado del enlace en línea aunque esté deshabilitado. */
+      true: { base: "inline underline aria-disabled:underline" }
+    },
+    size: {
+      sm: { base: "text-xs/[1rem] tracking-[0.16px]" },
+      md: { base: "text-sm/[1.125rem] tracking-normal" },
+      lg: { base: "text-base/[1.375rem] tracking-normal", icon: "size-5", iconWrapper: "h-5" }
+    },
+    visited: {
+      false: {},
+      true: { base: "visited:text-(--vuno-link-visited)" }
+    },
+    withIcon: {
+      false: {},
+      true: { base: "inline-block" }
+    }
+  }
+});

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

@@ -0,0 +1,44 @@
+import type { Component } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentUi } from '#vuno/types/slots';
+/** Los tres tamaños de Vuno: 16, 18 y 22 px de altura de línea. */
+export type LinkSize = 'lg' | 'md' | 'sm';
+export type LinkProps = {
+    /**
+     * Raíz alternativa. Es el `as` polimórfico de Vuno: sirve para envolver el
+     * enlace de otro enrutador o para rendirlo como `button` cuando el destino
+     * se resuelve en JavaScript. Sin `as`, la raíz es `NuxtLink` si hay `to` y
+     * `a` en cualquier otro caso.
+     */
+    as?: Component | string;
+    /**
+     * Un `<a>` no admite `disabled`, así que el enlace deshabilitado pierde su
+     * destino y se anuncia con `role="link"` y `aria-disabled`, como indica
+     * Vuno.
+     */
+    disabled?: boolean;
+    href?: string;
+    /**
+     * Icono al final del enlace autónomo —`launch` para destinos externos,
+     * `arrow--right` para internos—. Vuno no lo dibuja en los enlaces en
+     * línea.
+     */
+    icon?: string;
+    /**
+     * Versión en línea: subrayado permanente y caja `inline` para poder partirse
+     * dentro de un párrafo.
+     */
+    inline?: boolean;
+    /** Sustituye al `noopener` que Vuno añade con `target="_blank"`. */
+    rel?: string;
+    size?: LinkSize;
+    target?: string;
+    /** Destino de `NuxtLink`. Es la extensión de Vuno sobre el contrato de origen. */
+    to?: RouteLocationRaw;
+    ui?: ComponentUi<'link'>;
+    /**
+     * Aplica el color visitado de Vuno al estado `:visited` del navegador. No
+     * está activo por defecto: la guía pide usarlo con moderación.
+     */
+    visited?: boolean;
+};

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

@@ -0,0 +1,72 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { NuxtLink } from "#components";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Link", inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  href: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  inline: { type: Boolean, required: false, default: false },
+  rel: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  target: { type: String, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  visited: { type: Boolean, required: false, default: false }
+});
+const attrs = useAttrs();
+const routed = computed(() => !props.disabled && props.to !== void 0);
+const root = computed(() => props.as ?? (routed.value ? NuxtLink : "a"));
+const iconName = computed(() => props.inline ? void 0 : props.icon);
+const rootAttributes = computed(() => {
+  const contract = {
+    "aria-disabled": props.disabled ? "true" : void 0,
+    href: props.disabled || routed.value ? void 0 : props.href,
+    rel: props.rel ?? (props.target === "_blank" ? "noopener" : void 0),
+    role: props.disabled ? "link" : void 0,
+    tabindex: props.disabled ? -1 : void 0,
+    target: props.target,
+    to: routed.value ? props.to : void 0
+  };
+  for (const [key, value] of Object.entries(contract)) if (value === void 0) delete contract[key];
+  return { ...attrs, ...contract };
+});
+const ui = useTheme(
+  "link",
+  () => props.ui,
+  () => ({
+    inline: props.inline ? "true" : "false",
+    size: props.size,
+    visited: props.visited ? "true" : "false",
+    withIcon: iconName.value ? "true" : "false"
+  })
+);
+function blockDisabled(event) {
+  if (!props.disabled) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+</script>
+
+<template>
+    <component
+        :is="root"
+        v-bind="rootAttributes"
+        :class="ui.base"
+        @click.capture="blockDisabled"
+    >
+        <slot />
+        <span
+            v-if="iconName"
+            :class="ui.iconWrapper"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="iconName"
+            />
+        </span>
+    </component>
+</template>

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

@@ -0,0 +1,26 @@
+import type { LinkProps } from './Link.types.js';
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    disabled: boolean;
+    size: import("./Link.types.js").LinkSize;
+    inline: boolean;
+    icon: string;
+    visited: boolean;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"link">;
+    href: string;
+    as: import("vue").Component | string;
+    rel: string;
+    target: string;
+}, {}, {}, {}, 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/ListItem/ListItem.d.vue.ts

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

@@ -0,0 +1,10 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * `ListItem` no tiene contrato propio más allá del tema: el marcador, la
+ * sangría y la escala los decide la lista que lo contiene, igual que en Vuno,
+ * donde salen de selectores de descendencia. Lo que reciba de más —`id`,
+ * `data-*`, escuchas— llega al `<li>` por atributos heredados.
+ */
+export type ListItemProps = {
+    ui?: ComponentUi<'list'>;
+};

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

@@ -0,0 +1,19 @@
+<script setup>
+import { inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { listKey } from "#vuno/components/UnorderedList/UnorderedList.context";
+defineOptions({ name: "ListItem" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const list = inject(listKey, void 0);
+const ui = useTheme(
+  "list",
+  () => props.ui,
+  () => ({ marker: list?.marker.value ?? "native", nested: list?.nested.value ? "true" : "false" })
+);
+</script>
+
+<template>
+    <li :class="ui.item"><slot /></li>
+</template>

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

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

@@ -0,0 +1,10 @@
+import type { LoadingProps } from './Loading.types.js';
+declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
+    small: boolean;
+    description: string;
+    active: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"loading">;
+    withOverlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+export declare const loadingTheme: Record<"loading", {
+    readonly slots: {
+        readonly focusScope: "focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-transparent";
+        readonly overlay: "fixed inset-0 z-overlay flex items-center justify-center bg-(--vuno-overlay) transition-colors duration-(--vuno-duration-slow-02) ease-(--vuno-easing-standard-expressive) select-none motion-reduce:transition-none";
+        readonly root: "vuno-loading size-22";
+        readonly stroke: "vuno-loading__stroke stroke-(--vuno-interactive)";
+        readonly svg: "size-22 fill-transparent";
+        readonly track: "vuno-loading__background stroke-(--vuno-layer-accent-01)";
+    };
+    /**
+     * `active` no desmonta el indicador: el anillo frena y el overlay se retira.
+     */
+    readonly variants: {
+        readonly active: {
+            readonly false: {
+                readonly overlay: "hidden";
+                readonly root: "vuno-loading--stop";
+            };
+            readonly true: {};
+        };
+        readonly small: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "vuno-loading--small size-4 leading-4";
+                readonly svg: "size-4";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const loadingTheme = defineTheme("loading", {
+  slots: {
+    focusScope: "focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-transparent",
+    overlay: "fixed inset-0 z-overlay flex items-center justify-center bg-(--vuno-overlay) transition-colors duration-(--vuno-duration-slow-02) ease-(--vuno-easing-standard-expressive) select-none motion-reduce:transition-none",
+    root: "vuno-loading size-22",
+    stroke: "vuno-loading__stroke stroke-(--vuno-interactive)",
+    svg: "size-22 fill-transparent",
+    track: "vuno-loading__background stroke-(--vuno-layer-accent-01)"
+  },
+  /**
+   * `active` no desmonta el indicador: el anillo frena y el overlay se retira.
+   */
+  variants: {
+    active: {
+      false: { overlay: "hidden", root: "vuno-loading--stop" },
+      true: {}
+    },
+    small: {
+      false: {},
+      true: { root: "vuno-loading--small size-4 leading-4", svg: "size-4" }
+    }
+  }
+});

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

@@ -0,0 +1,8 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type LoadingProps = {
+    active?: boolean;
+    description?: string;
+    small?: boolean;
+    ui?: ComponentUi<'loading'>;
+    withOverlay?: boolean;
+};

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

@@ -0,0 +1,71 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+import LoadingOverlay from "./internal/LoadingOverlay/LoadingOverlay.vue";
+defineOptions({ name: "Loading", inheritAttrs: false });
+const props = defineProps({
+  active: { type: Boolean, required: false, default: true },
+  description: { type: String, required: false, default: "Cargando" },
+  small: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  withOverlay: { type: Boolean, required: false, default: true }
+});
+const ui = useTheme(
+  "loading",
+  () => props.ui,
+  () => ({ active: String(props.active), small: String(props.small) })
+);
+</script>
+
+<template>
+    <LoadingOverlay
+        :active="props.active"
+        :description="props.description"
+        :overlayClass="ui.overlay"
+        :scopeClass="ui.focusScope"
+        :withOverlay="props.withOverlay"
+    >
+        <!--
+            `aria-live` y `aria-atomic` son los del sistema de origen, que no
+            declara `role`. El `role="status"` es un añadido de Vuno: nombra la
+            región de estado para quien inspecciona el árbol. Ningún componente
+            lo consulta —`InlineLoading` solo monta `Loading`—, así que es una
+            desviación deliberada y no una dependencia. El `aria-live` explícito
+            manda sobre el implícito del rol, así que `off` sigue silenciando la
+            parada.
+        -->
+        <div
+            v-bind="$attrs"
+            aria-atomic="true"
+            :aria-live="props.active ? 'assertive' : 'off'"
+            :class="ui.root"
+            role="status"
+        >
+            <svg
+                :aria-label="props.description"
+                :class="ui.svg"
+                role="img"
+                viewBox="0 0 100 100"
+            >
+                <title>{{ props.description }}</title>
+                <!-- Vuno solo dibuja el anillo de fondo en la variante pequeña; en la grande el hueco queda transparente. -->
+                <circle
+                    v-if="props.small"
+                    :class="ui.track"
+                    cx="50%"
+                    cy="50%"
+                    r="42"
+                />
+                <circle
+                    :class="ui.stroke"
+                    cx="50%"
+                    cy="50%"
+                    :r="props.small ? 42 : 44"
+                />
+            </svg>
+        </div>
+    </LoadingOverlay>
+</template>
+
+<style scoped>
+.vuno-loading{animation:vuno-loading-rotate .69s linear infinite forwards}.vuno-loading circle{animation:vuno-loading-stroke-in 10ms cubic-bezier(.5,0,.1,1);stroke-dasharray:276.4608 276.4608;stroke-linecap:butt;stroke-width:10}.vuno-loading--small circle{stroke-width:16}.vuno-loading__stroke{stroke-dashoffset:52.527552}.vuno-loading--small .vuno-loading__stroke{stroke-dashoffset:143.759616}.vuno-loading__background{stroke-dashoffset:-22}@supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none){circle.vuno-loading__background{stroke-dasharray:265;stroke-dashoffset:0}}.vuno-loading--stop{animation:vuno-loading-rotate-end-p1 var(--vuno-duration-slow-02) cubic-bezier(0,0,.25,1) forwards,vuno-loading-rotate-end-p2 var(--vuno-duration-slow-02) cubic-bezier(0,0,.25,1) var(--vuno-duration-slow-02) forwards}.vuno-loading--stop circle{animation:vuno-loading-stroke-out var(--vuno-duration-slow-02) cubic-bezier(0,0,.25,1) var(--vuno-duration-slow-02) forwards}@media (prefers-reduced-motion:reduce){.vuno-loading circle,.vuno-loading--stop circle{animation:none}}@keyframes vuno-loading-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes vuno-loading-rotate-end-p1{to{transform:rotate(1turn)}}@keyframes vuno-loading-rotate-end-p2{to{transform:rotate(-1turn)}}@keyframes vuno-loading-stroke-in{0%{stroke-dashoffset:276.4608}to{stroke-dashoffset:52.527552}}@keyframes vuno-loading-stroke-out{0%{stroke-dashoffset:52.527552}to{stroke-dashoffset:276.4608}}
+</style>