@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,24 +1,12 @@
-import type { VunoModalSize, VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    description?: string;
-    /** Cerrar con Escape o pulsando el fondo. */
-    dismissible?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    /** Ancho máximo; `full` ocupa todo el viewport. */
-    size?: VunoModalSize;
-    title?: string;
-    ui?: VunoUi<'modal'>;
-};
+import type { VunoModalProps } from './Modal.types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<VunoModalProps & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<Props & {
+}, string, import("vue").PublicProps, Readonly<VunoModalProps & {
     open?: boolean;
 }> & Readonly<{
     onClose?: (() => any) | undefined;
@@ -26,9 +14,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
 }>, {
     description: string;
     title: string;
-    radius: VunoRadius;
-    size: VunoModalSize;
-    ui: VunoUi<"modal">;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Modal.types.js").VunoModalSize;
+    ui: import("../../types/slots.js").VunoUi<"modal">;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     body?: () => unknown;

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

@@ -13,12 +13,16 @@ export declare const modalTheme: Record<"modal", {
         readonly size: "full";
     }];
     readonly slots: {
-        readonly body: "flex-1 overflow-y-auto p-4 sm:p-6";
-        readonly content: "max-h-[85vh]";
+        readonly body: "min-h-0 flex-1 overflow-y-auto p-4 pt-0";
+        readonly bodyStandalone: "pt-4";
+        readonly close: "-me-2 -mt-2 shrink-0";
+        readonly content: "flex max-h-[calc(85dvh-0.75rem)] min-h-0 flex-col sm:max-h-[calc(100dvh-3.75rem)]";
         readonly description: "mt-1 text-sm text-vuno-muted";
-        readonly footer: "flex items-center justify-end gap-2 p-4 sm:px-6";
-        readonly header: "p-4 sm:px-6";
-        readonly root: "m-auto w-[calc(100dvw-2rem)] max-w-lg rounded-sm bg-vuno-surface-1 p-0 text-vuno-body shadow-lg ring ring-vuno-border";
+        readonly footer: "flex shrink-0 items-center justify-end gap-2 pt-1.5";
+        readonly frame: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-vuno-surface ring ring-vuno-border";
+        readonly header: "flex shrink-0 items-start justify-between gap-4 p-4";
+        readonly heading: "flex min-w-0 flex-col";
+        readonly root: "m-auto mb-0 max-h-[85dvh] w-dvw max-w-none overflow-hidden rounded-none border-0 bg-vuno-surface-1 p-1.5 text-vuno-body shadow-lg ring-0 sm:mb-auto sm:max-h-[calc(100dvh-3rem)] sm:w-[calc(100dvw-2rem)] sm:max-w-lg sm:rounded-sm sm:ring sm:ring-vuno-border";
         readonly title: "font-semibold text-vuno-strong";
     };
     /**
@@ -30,29 +34,29 @@ export declare const modalTheme: Record<"modal", {
         readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
         readonly size: {
             readonly sm: {
-                readonly root: "max-w-sm";
+                readonly root: "sm:max-w-sm";
             };
             readonly md: {
-                readonly root: "max-w-md";
+                readonly root: "sm:max-w-md";
             };
             readonly lg: {
-                readonly root: "max-w-lg";
+                readonly root: "sm:max-w-lg";
             };
             readonly xl: {
-                readonly root: "max-w-xl";
+                readonly root: "sm:max-w-xl";
             };
             readonly '2xl': {
-                readonly root: "max-w-2xl";
+                readonly root: "sm:max-w-2xl";
             };
             readonly '3xl': {
-                readonly root: "max-w-3xl";
+                readonly root: "sm:max-w-3xl";
             };
             readonly '4xl': {
-                readonly root: "max-w-4xl";
+                readonly root: "sm:max-w-4xl";
             };
             readonly full: {
-                readonly content: "h-dvh max-h-dvh";
-                readonly root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0";
+                readonly content: "h-[calc(100dvh-0.75rem)] max-h-[calc(100dvh-0.75rem)]";
+                readonly root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0 sm:rounded-none";
             };
         };
     };

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

@@ -10,20 +10,16 @@ export const modalTheme = defineTheme("modal", {
    */
   compoundVariants: [{ class: { root: "rounded-none" }, size: "full" }],
   slots: {
-    body: "flex-1 overflow-y-auto p-4 sm:p-6",
-    /*
-     * Solo lo que la tarjeta no da. La columna, el `divide-y` y su color
-     * salen de `card`, que es quien define la forma «tres regiones
-     * separadas por una línea»; aquí queda el alto máximo y nada más.
-     * Antes esto repetía las cinco clases, y repetidas no se mantienen
-     * juntas: un proyecto que cambiara el separador de sus tarjetas se
-     * encontraba con que sus modales no cambiaban.
-     */
-    content: "max-h-[85vh]",
+    body: "min-h-0 flex-1 overflow-y-auto p-4 pt-0",
+    bodyStandalone: "pt-4",
+    close: "-me-2 -mt-2 shrink-0",
+    content: "flex max-h-[calc(85dvh-0.75rem)] min-h-0 flex-col sm:max-h-[calc(100dvh-3.75rem)]",
     description: "mt-1 text-sm text-vuno-muted",
-    footer: "flex items-center justify-end gap-2 p-4 sm:px-6",
-    header: "p-4 sm:px-6",
-    root: "m-auto w-[calc(100dvw-2rem)] max-w-lg rounded-sm bg-vuno-surface-1 p-0 text-vuno-body shadow-lg ring ring-vuno-border",
+    footer: "flex shrink-0 items-center justify-end gap-2 pt-1.5",
+    frame: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-vuno-surface ring ring-vuno-border",
+    header: "flex shrink-0 items-start justify-between gap-4 p-4",
+    heading: "flex min-w-0 flex-col",
+    root: "m-auto mb-0 max-h-[85dvh] w-dvw max-w-none overflow-hidden rounded-none border-0 bg-vuno-surface-1 p-1.5 text-vuno-body shadow-lg ring-0 sm:mb-auto sm:max-h-[calc(100dvh-3rem)] sm:w-[calc(100dvw-2rem)] sm:max-w-lg sm:rounded-sm sm:ring sm:ring-vuno-border",
     title: "font-semibold text-vuno-strong"
   },
   /**
@@ -34,14 +30,14 @@ export const modalTheme = defineTheme("modal", {
   variants: {
     radius: radiusByStep("root"),
     size: {
-      sm: { root: "max-w-sm" },
-      md: { root: "max-w-md" },
-      lg: { root: "max-w-lg" },
-      xl: { root: "max-w-xl" },
-      "2xl": { root: "max-w-2xl" },
-      "3xl": { root: "max-w-3xl" },
-      "4xl": { root: "max-w-4xl" },
-      full: { content: "h-dvh max-h-dvh", root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0" }
+      sm: { root: "sm:max-w-sm" },
+      md: { root: "sm:max-w-md" },
+      lg: { root: "sm:max-w-lg" },
+      xl: { root: "sm:max-w-xl" },
+      "2xl": { root: "sm:max-w-2xl" },
+      "3xl": { root: "sm:max-w-3xl" },
+      "4xl": { root: "sm:max-w-4xl" },
+      full: { content: "h-[calc(100dvh-0.75rem)] max-h-[calc(100dvh-0.75rem)]", root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0 sm:rounded-none" }
     }
   }
 });

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

@@ -0,0 +1,12 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/** Anchos que admite el diálogo; `full` ocupa todo el viewport. */
+export type VunoModalSize = Extract<VunoSize, '2xl' | '3xl' | '4xl' | 'full' | 'lg' | 'md' | 'sm' | 'xl'>;
+export type VunoModalProps = {
+    description?: string;
+    dismissible?: boolean;
+    radius?: VunoRadius;
+    size?: VunoModalSize;
+    title?: string;
+    ui?: VunoUi<'modal'>;
+};

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

@@ -14,11 +14,13 @@ function releaseScrollLock() {
 </script>
 
 <script setup>
-import { inject, nextTick, onBeforeUnmount, useId, useTemplateRef, watch } from "vue";
+import { nextTick, onBeforeUnmount, useId, useTemplateRef, watch } from "vue";
+import { useVunoOverlayBehind } from "#vuno/composables/internal/useVunoOverlayBehind";
 import { provideVunoPortal } from "#vuno/composables/internal/useVunoPortal";
-import { useTheme } from "#vuno/composables/useTheme";
-import { vunoOverlayBehindInjectionKey } from "#vuno/internal/keys";
-import Card from "#vuno/components/Card/Card.vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Button from "#vuno/components/Button/Button.vue";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoModal" });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
@@ -30,14 +32,22 @@ const props = defineProps({
   ui: { type: Object, required: false, default: void 0 }
 });
 const emit = defineEmits(["close"]);
-defineSlots();
-const isBehindOverlay = inject(vunoOverlayBehindInjectionKey, () => false);
+const slots = defineSlots();
+const isBehindOverlay = useVunoOverlayBehind();
+const icons = useIcons();
+const messages = useMessages();
 const ui = useTheme(
   "modal",
   () => props.ui,
   () => ({ radius: props.radius, size: props.size })
 );
 const dialog = useTemplateRef("dialog");
+function hasFooter() {
+  return filled(slots.footer);
+}
+function hasHeader() {
+  return Boolean(props.title || props.description) || filled(slots.header) || props.dismissible && !hasFooter();
+}
 const baseId = `vuno-${useId().replace(/[^\w-]/g, "")}`;
 provideVunoPortal(`#${baseId}`);
 let scrollLocked = false;
@@ -122,16 +132,6 @@ onBeforeUnmount(() => lockScroll(false));
         @keydown.capture="onKeydown"
         @mousedown="onPointerDown"
     >
-        <!--
-            El interior es una tarjeta, literalmente.
-            «Tres regiones apiladas y separadas por una línea» es lo que `VCard`
-            define, y el modal lo repetía clase por clase. Ahora lo reutiliza:
-            un proyecto que cambie el separador de sus tarjetas cambia también
-            sus modales, que es lo que uno espera y lo que no ocurría.
-            Va en la variante `plain` porque el marco —el anillo, la sombra y el
-            radio— lo pone el `<dialog>`, y pintarlo otra vez dentro dibujaría
-            una caja dentro de otra.
-        -->
         <!--
             **El contenido se monta al abrir y se desmonta al cerrar.**
 
@@ -152,64 +152,98 @@ onBeforeUnmount(() => lockScroll(false));
             existiendo cerrado. Eso se comprobó antes de tocarlo, porque la
             sospecha de partida era la contraria.
         -->
-        <Card
+        <!--
+            El marco principal y las acciones son hermanos a propósito. `VCard`
+            siempre deja el pie dentro de su superficie primaria; aquí el pie
+            queda fuera del marco para permanecer fijo, mientras cabecera y
+            cuerpo forman la única superficie que puede desplazarse.
+        -->
+        <div
             v-if="open"
-            :ui="{ body: ui.body, footer: ui.footer, header: ui.header, root: ui.content }"
-            variant="plain"
+            :class="ui.content"
         >
-            <template #header>
-                <template v-if="$slots.header">
-                    <!-- El slot reemplaza lo visible, pero no los destinos ARIA. -->
-                    <span
-                        v-if="props.title"
-                        :id="`${baseId}-title`"
-                        class="sr-only"
-                    >
-                        {{ props.title }}
-                    </span>
+            <div :class="ui.frame">
+                <div
+                    v-if="hasHeader()"
+                    :class="ui.header"
+                >
+                    <div :class="ui.heading">
+                        <template v-if="filled(slots.header)">
+                            <!-- El slot reemplaza lo visible, pero no los destinos ARIA. -->
+                            <Text
+                                v-if="props.title"
+                                :id="`${baseId}-title`"
+                                class="sr-only"
+                                tag="span"
+                                tone="inherit"
+                                variant="inherit"
+                            >
+                                {{ props.title }}
+                            </Text>
+
+                            <Text
+                                v-if="props.description"
+                                :id="`${baseId}-description`"
+                                class="sr-only"
+                                tag="span"
+                                tone="inherit"
+                                variant="inherit"
+                            >
+                                {{ props.description }}
+                            </Text>
 
-                    <span
-                        v-if="props.description"
-                        :id="`${baseId}-description`"
-                        class="sr-only"
-                    >
-                        {{ props.description }}
-                    </span>
+                            <slot name="header" />
+                        </template>
 
-                    <slot name="header" />
-                </template>
+                        <template v-else>
+                            <Text
+                                v-if="props.title"
+                                :id="`${baseId}-title`"
+                                :class="ui.title"
+                                tag="h2"
+                                tone="inherit"
+                                variant="inherit"
+                            >
+                                {{ props.title }}
+                            </Text>
 
-                <template v-else>
-                    <template v-if="props.title || props.description">
-                        <h2
-                            v-if="props.title"
-                            :id="`${baseId}-title`"
-                            :class="ui.title"
-                        >
-                            {{ props.title }}
-                        </h2>
+                            <Text
+                                v-if="props.description"
+                                :id="`${baseId}-description`"
+                                :class="ui.description"
+                                tag="p"
+                                tone="inherit"
+                                variant="inherit"
+                            >
+                                {{ props.description }}
+                            </Text>
+                        </template>
+                    </div>
 
-                        <p
-                            v-if="props.description"
-                            :id="`${baseId}-description`"
-                            :class="ui.description"
-                        >
-                            {{ props.description }}
-                        </p>
-                    </template>
-                </template>
-            </template>
+                    <Button
+                        v-if="props.dismissible && !hasFooter()"
+                        :aria-label="messages.close"
+                        :class="ui.close"
+                        :icon="icons.close"
+                        size="sm"
+                        variant="ghost"
+                        @click="requestClose"
+                    />
+                </div>
 
-            <slot name="body">
-                <slot />
-            </slot>
+                <div :class="[ui.body, hasHeader() ? void 0 : ui.bodyStandalone]">
+                    <slot name="body">
+                        <slot />
+                    </slot>
+                </div>
+            </div>
 
-            <template
-                v-if="$slots.footer"
-                #footer
+            <div
+                v-if="hasFooter()"
+                :class="ui.footer"
             >
                 <slot name="footer" />
-            </template>
-        </Card>
+            </div>
+        </div>
     </dialog>
 </template>

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

@@ -1,24 +1,12 @@
-import type { VunoModalSize, VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    description?: string;
-    /** Cerrar con Escape o pulsando el fondo. */
-    dismissible?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    /** Ancho máximo; `full` ocupa todo el viewport. */
-    size?: VunoModalSize;
-    title?: string;
-    ui?: VunoUi<'modal'>;
-};
+import type { VunoModalProps } from './Modal.types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<VunoModalProps & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<Props & {
+}, string, import("vue").PublicProps, Readonly<VunoModalProps & {
     open?: boolean;
 }> & Readonly<{
     onClose?: (() => any) | undefined;
@@ -26,9 +14,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
 }>, {
     description: string;
     title: string;
-    radius: VunoRadius;
-    size: VunoModalSize;
-    ui: VunoUi<"modal">;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Modal.types.js").VunoModalSize;
+    ui: import("../../types/slots.js").VunoUi<"modal">;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     body?: () => unknown;

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

@@ -1,29 +1,4 @@
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * La barra de navegación: izquierda, centro y derecha.
- *
- * **No se pega arriba ni se pinta**, y es lo que la hace reutilizable: eso
- * lo decide el `<header>` de cada aplicación y esta barra solo reparte lo
- * que va dentro. Si trajera su propio fondo habría dos, y si trajera su
- * borde habría dos líneas a un píxel una de otra.
- *
- * Las tres regiones son slots y ninguna es obligatoria. La de la izquierda
- * encoge y la de la derecha no, que es lo que ya se aprendió en la barra de
- * `VPage`: lo que se recorta cuando falta sitio es el texto, nunca los
- * botones.
- *
- * ```vue
- * <header class="sticky top-0">
- *     <VNavbar>
- *         <template #left>vuno</template>
- *         <template #right><VButton label="Entrar" /></template>
- *     </VNavbar>
- * </header>
- * ```
- */
-type Props = {
-    ui?: VunoUi<'navbar'>;
-};
+import type { VunoNavbarProps } from './Navbar.types.js';
 type __VLS_Slots = {
     /** El centro de la barra: la navegación, normalmente. */
     center?: () => unknown;
@@ -32,8 +7,8 @@ type __VLS_Slots = {
     /** Lo de la derecha: sesión, idioma, la acción principal. */
     right?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    ui: VunoUi<"navbar">;
+declare const __VLS_base: import("vue").DefineComponent<VunoNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoNavbarProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").VunoUi<"navbar">;
 }, {}, {}, {}, 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/components/Navbar/Navbar.theme.d.ts

@@ -18,9 +18,8 @@ export declare const navbarTheme: Record<"navbar", {
      * entonces un título largo a la izquierda no se trunca: empuja la barra y
      * saca scroll horizontal a la página.
      *
-     * La izquierda encoge y la derecha no —`min-w-0` contra `shrink-0`—, que es
-     * lo que ya se aprendió en la barra de `VPage`: lo que se recorta es el
-     * texto, nunca los botones.
+     * La izquierda encoge y la derecha no —`min-w-0` contra `shrink-0`—: lo que
+     * se recorta es el texto, nunca los botones.
      */
     readonly slots: {
         readonly center: "flex min-w-0 items-center justify-center gap-2";

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

@@ -19,9 +19,8 @@ export const navbarTheme = defineTheme("navbar", {
    * entonces un título largo a la izquierda no se trunca: empuja la barra y
    * saca scroll horizontal a la página.
    *
-   * La izquierda encoge y la derecha no —`min-w-0` contra `shrink-0`—, que es
-   * lo que ya se aprendió en la barra de `VPage`: lo que se recorta es el
-   * texto, nunca los botones.
+   * La izquierda encoge y la derecha no —`min-w-0` contra `shrink-0`—: lo que
+   * se recorta es el texto, nunca los botones.
    */
   slots: {
     center: "flex min-w-0 items-center justify-center gap-2",

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

@@ -0,0 +1,4 @@
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoNavbarProps = {
+    ui?: VunoUi<'navbar'>;
+};

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

@@ -1,29 +1,4 @@
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * La barra de navegación: izquierda, centro y derecha.
- *
- * **No se pega arriba ni se pinta**, y es lo que la hace reutilizable: eso
- * lo decide el `<header>` de cada aplicación y esta barra solo reparte lo
- * que va dentro. Si trajera su propio fondo habría dos, y si trajera su
- * borde habría dos líneas a un píxel una de otra.
- *
- * Las tres regiones son slots y ninguna es obligatoria. La de la izquierda
- * encoge y la de la derecha no, que es lo que ya se aprendió en la barra de
- * `VPage`: lo que se recorta cuando falta sitio es el texto, nunca los
- * botones.
- *
- * ```vue
- * <header class="sticky top-0">
- *     <VNavbar>
- *         <template #left>vuno</template>
- *         <template #right><VButton label="Entrar" /></template>
- *     </VNavbar>
- * </header>
- * ```
- */
-type Props = {
-    ui?: VunoUi<'navbar'>;
-};
+import type { VunoNavbarProps } from './Navbar.types.js';
 type __VLS_Slots = {
     /** El centro de la barra: la navegación, normalmente. */
     center?: () => unknown;
@@ -32,8 +7,8 @@ type __VLS_Slots = {
     /** Lo de la derecha: sesión, idioma, la acción principal. */
     right?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    ui: VunoUi<"navbar">;
+declare const __VLS_base: import("vue").DefineComponent<VunoNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoNavbarProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").VunoUi<"navbar">;
 }, {}, {}, {}, 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/components/NavigationList/NavigationList.d.vue.ts

@@ -1,37 +1,8 @@
-import type { VunoNavigationItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Navegación anidada: listas dentro de listas, con las ramas que contienen la
- * página actual openKeys.
- *
- * **La apertura se deriva de la ruta, no del clic.** Es lo que hace que al
- * recargar en `config/perfil/contrasena` las dos ramas de arriba estén
- * openKeys, y que lo estén también en el HTML del servidor. Un estado que solo
- * se moviera al pulsar dejaría la página actual escondida en cuanto alguien
- * llegara por un enlace directo. Se recalcula al cambiar de ruta, de forma
- * **aditiva**: navegar abre lo que hace falta y no cierra lo que el usuario
- * abrió a mano.
- *
- * **Listas anidadas y no `role="tree"`.** Un árbol ARIA es un control de
- * selección única con foco móvil, y esto es un menú de enlaces: lo que
- * corresponde es `<ul>` dentro de `<li>` con un botón de desplegar. Ponerle
- * `role="tree"` obligaría a reimplementar el teclado de un widget y a cambiar
- * cómo lo anuncia un lector, para peor.
- */
-type Props = {
-    /** Permite cerrar y abrir ramas; desactivado las mantiene visibles. */
-    collapsible?: boolean;
-    items: VunoNavigationItem[];
-    /** Profundidad de esta lista. Interno: lo pone la propia recursión. */
-    level?: number;
-    /** Ruta estructural de esta lista. Interno: evita colisiones entre rótulos repetidos. */
-    path?: string;
-    ui?: VunoUi<'navigationList'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    path: string;
-    ui: VunoUi<"navigationList">;
+import type { VunoNavigationListProps } from './NavigationList.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoNavigationListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoNavigationListProps> & Readonly<{}>, {
     collapsible: boolean;
+    path: string;
+    ui: import("../../types/slots.js").VunoUi<"navigationList">;
     level: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/NavigationList/NavigationList.keys.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+/** Ramas abiertas compartidas por todos los niveles de la navegación anidada. */
+export declare const vunoNavigationListInjectionKey: InjectionKey<Set<string>>;

package/dist/runtime/app/components/NavigationList/NavigationList.keys.js

@@ -0,0 +1 @@
+export const vunoNavigationListInjectionKey = Symbol("vuno-navigation-list");

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

@@ -0,0 +1,9 @@
+import type { VunoNavigationItem } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoNavigationListProps = {
+    collapsible?: boolean;
+    items: VunoNavigationItem[];
+    level?: number;
+    path?: string;
+    ui?: VunoUi<'navigationList'>;
+};