@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,236 +0,0 @@
-<script setup>
-import { inject, nextTick, onBeforeUnmount, provide, reactive, ref, useId, watch } from "vue";
-import { useRoute } from "#imports";
-import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
-import { useIcons, useTheme } from "#vuno/composables/useTheme";
-import { vunoNavigationMenuCloseInjectionKey, vunoNavigationMenuOpenInjectionKey, vunoNavigationMenuPinnedInjectionKey } from "#vuno/internal/keys";
-import { cn } from "#vuno/utils/theme";
-import Icon from "#vuno/components/Icon/Icon.vue";
-defineOptions({ name: "VunoNavigationMenu", inheritAttrs: false });
-const props = defineProps({
-  flyout: { type: Boolean, required: false, default: false },
-  items: { type: Array, required: true },
-  level: { type: Number, required: false, default: 0 },
-  path: { type: String, required: false, default: "root" },
-  popup: { type: Boolean, required: false, default: false },
-  ui: { type: Object, required: false, default: void 0 }
-});
-const icons = useIcons();
-const ui = useTheme("navigationMenu", () => props.ui);
-const route = useRoute();
-const inherited = inject(vunoNavigationMenuOpenInjectionKey, null);
-const openKeys = inherited ?? reactive(/* @__PURE__ */ new Set());
-if (!inherited) provide(vunoNavigationMenuOpenInjectionKey, openKeys);
-const inheritedCloseTimers = inject(vunoNavigationMenuCloseInjectionKey, null);
-const closeTimers = inheritedCloseTimers ?? /* @__PURE__ */ new Set();
-if (!inheritedCloseTimers) provide(vunoNavigationMenuCloseInjectionKey, closeTimers);
-const inheritedPinnedKeys = inject(vunoNavigationMenuPinnedInjectionKey, null);
-const pinnedKeys = inheritedPinnedKeys ?? reactive(/* @__PURE__ */ new Set());
-if (!inheritedPinnedKeys) provide(vunoNavigationMenuPinnedInjectionKey, pinnedKeys);
-const isRoot = !inherited;
-const uid = useId();
-const placement = ref("bottom-start");
-const referenceEls = ref([]);
-const sublistEls = ref([]);
-const floatingStyle = {
-  insetInlineStart: "auto",
-  left: "0px",
-  paddingInlineStart: "0px",
-  paddingTop: "0px",
-  position: "fixed",
-  top: "0px"
-};
-const { anchor, release } = useVunoAnchor({
-  placement,
-  distance: () => props.flyout ? 6 : 10
-});
-const keyOf = (index) => `${props.path}.${index}`;
-const sublistId = (index) => `${uid}-${keyOf(index).replace(/[^a-zA-Z0-9-]/g, "-")}`;
-const isOpen = (index) => openKeys.has(keyOf(index));
-function containsRoute(item, path) {
-  if (item.to === path) return true;
-  return (item.children ?? []).some((child) => containsRoute(child, path));
-}
-const isActive = (item) => containsRoute(item, route.path);
-function captureReference(index, element) {
-  referenceEls.value[index] = element ?? null;
-}
-function captureSublist(index, component) {
-  const element = component?.$el;
-  sublistEls.value[index] = element instanceof HTMLElement ? element : null;
-}
-function place(index) {
-  void nextTick(() => {
-    if (!isOpen(index)) return;
-    const reference = referenceEls.value[index] ?? void 0;
-    const floating = sublistEls.value[index] ?? void 0;
-    if (props.flyout && reference) {
-      const direction = reference.ownerDocument.defaultView?.getComputedStyle(reference).direction;
-      placement.value = direction === "rtl" ? "left-start" : "right-start";
-    } else placement.value = "bottom-start";
-    anchor(reference, floating);
-  });
-}
-function open(item, index) {
-  if (item.disabled || !item.children?.length) return;
-  for (const [siblingIndex, sibling] of props.items.entries()) {
-    if (siblingIndex !== index && sibling.children?.length) {
-      openKeys.delete(keyOf(siblingIndex));
-      pinnedKeys.delete(keyOf(siblingIndex));
-    }
-  }
-  openKeys.add(keyOf(index));
-  place(index);
-}
-function close(index) {
-  openKeys.delete(keyOf(index));
-  pinnedKeys.delete(keyOf(index));
-  release();
-}
-function cancelScheduledClose() {
-  for (const timer of closeTimers) clearTimeout(timer);
-  closeTimers.clear();
-}
-function scheduleClose(index) {
-  if (pinnedKeys.has(keyOf(index))) return;
-  const timer = setTimeout(() => {
-    closeTimers.delete(timer);
-    close(index);
-  }, 140);
-  closeTimers.add(timer);
-}
-function onPointerEnter(item, index) {
-  cancelScheduledClose();
-  open(item, index);
-}
-function toggle(item, index) {
-  if (isOpen(index)) close(index);
-  else open(item, index);
-}
-function onToggleClick(item, index, event) {
-  if (event.detail === 0) return toggle(item, index);
-  cancelScheduledClose();
-  const key = keyOf(index);
-  if (pinnedKeys.has(key)) return close(index);
-  pinnedKeys.add(key);
-  open(item, index);
-}
-function onLinkClick() {
-  openKeys.clear();
-  pinnedKeys.clear();
-  release();
-}
-watch(
-  () => openKeys.has(props.path),
-  (visible) => {
-    if (!visible) release();
-  }
-);
-onBeforeUnmount(() => {
-  cancelScheduledClose();
-  release();
-});
-</script>
-
-<template>
-    <component
-        :is="isRoot ? 'nav' : 'div'"
-        v-bind="$attrs"
-        :class="cn(isRoot && ui.root, props.popup && ui.popupRoot, props.flyout && !props.popup && ui.flyoutRoot)"
-    >
-        <ul :class="cn(ui.list, props.flyout && !props.popup && ui.flyoutList, props.popup && ui.popupList)">
-            <li
-                v-for="(item, index) in props.items"
-                :key="keyOf(index)"
-                :class="cn(ui.item, props.flyout && ui.flyoutItem)"
-                @pointerenter="onPointerEnter(item, index)"
-                @pointerleave="scheduleClose(index)"
-            >
-                <div
-                    :ref="(element) => captureReference(index, element)"
-                    :class="cn(ui.row, item.to && item.children?.length && ui.rowLinked)"
-                >
-                    <NuxtLink
-                        v-if="item.to"
-                        :aria-disabled="item.disabled || void 0"
-                        :class="cn(ui.link, item.children?.length && ui.linkBranch, props.flyout && ui.flyoutControl)"
-                        :data-active="isActive(item) || void 0"
-                        :tabindex="item.disabled ? -1 : void 0"
-                        :to="item.to"
-                        @click="onLinkClick"
-                    >
-                        <Icon
-                            v-if="item.icon"
-                            :class="cn(ui.icon, props.flyout && ui.flyoutIcon)"
-                            :name="item.icon"
-                        />
-
-                        <span :class="ui.labelGroup">
-                            <span :class="ui.label">{{ item.label }}</span>
-                        </span>
-
-                        <span
-                            v-if="item.badge"
-                            :class="ui.badge"
-                            >{{ item.badge }}</span
-                        >
-                    </NuxtLink>
-
-                    <button
-                        v-if="item.children?.length"
-                        :aria-controls="sublistId(index)"
-                        :aria-expanded="isOpen(index)"
-                        :class="cn(ui.toggle, item.to && ui.toggleAside, props.flyout && ui.flyoutControl)"
-                        :data-active="isActive(item) || void 0"
-                        :disabled="item.disabled"
-                        type="button"
-                        @click="onToggleClick(item, index, $event)"
-                    >
-                        <template v-if="!item.to">
-                            <Icon
-                                v-if="item.icon"
-                                :class="cn(ui.icon, props.flyout && ui.flyoutIcon)"
-                                :name="item.icon"
-                            />
-
-                            <span :class="ui.labelGroup">
-                                <span :class="ui.label">{{ item.label }}</span>
-                            </span>
-
-                            <span
-                                v-if="item.badge"
-                                :class="ui.badge"
-                                >{{ item.badge }}</span
-                            >
-                        </template>
-
-                        <span
-                            v-if="item.to"
-                            class="sr-only"
-                            >{{ item.label }}</span
-                        >
-
-                        <Icon
-                            :class="cn(ui.toggleIcon, isOpen(index) && ui.toggleIconOpen)"
-                            :name="icons.navigationToggle"
-                        />
-                    </button>
-                </div>
-
-                <VunoNavigationMenu
-                    v-if="item.children?.length"
-                    :id="sublistId(index)"
-                    :ref="(component) => captureSublist(index, component)"
-                    :flyout="props.flyout || props.level === 0"
-                    :hidden="!isOpen(index)"
-                    :items="item.children"
-                    :level="props.level + 1"
-                    :path="keyOf(index)"
-                    :popup="props.level === 0"
-                    :style="floatingStyle"
-                    :ui="props.ui"
-                />
-            </li>
-        </ul>
-    </component>
-</template>

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

@@ -1,31 +0,0 @@
-import type { VunoNavigationItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Navegación horizontal para una barra superior.
- *
- * El primer nivel permanece en la barra y cada rama abre un panel flotante;
- * los niveles siguientes salen como flyouts laterales. No comparte el
- * modelo visual de `VNavigationList`: una lista persistente conserva sus ramas en
- * el flujo, mientras que una barra no puede crecer hacia abajo al abrirse.
- */
-type Props = {
-    /** Interno: los descendientes son paneles laterales. */
-    flyout?: boolean;
-    items: VunoNavigationItem[];
-    /** Interno: profundidad dentro del menú. */
-    level?: number;
-    /** Interno: ruta estructural que evita colisiones entre rótulos. */
-    path?: string;
-    /** Interno: primer panel que cae debajo de la barra. */
-    popup?: boolean;
-    ui?: VunoUi<'navigationMenu'>;
-};
-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<"navigationMenu">;
-    level: number;
-    flyout: boolean;
-    popup: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,14 +0,0 @@
-import type { VunoNavigationTocItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    items: VunoNavigationTocItem[];
-    /** Sustituye el título visible y el nombre accesible de la navegación. */
-    label?: string;
-    ui?: VunoUi<'navigationToc'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: string;
-    ui: VunoUi<"navigationToc">;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,9 +0,0 @@
-export declare const navigationTocTheme: Record<"navigationToc", {
-    readonly slots: {
-        readonly link: "block border-s border-vuno-border py-2 ps-3 text-sm/snug text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-vuno-primary aria-[current=location]:border-vuno-primary aria-[current=location]:font-medium aria-[current=location]:text-vuno-primary";
-        readonly linkDeep: "ps-6";
-        readonly list: "flex flex-col";
-        readonly root: "flex flex-col gap-2";
-        readonly title: "px-3 text-sm font-semibold text-vuno-strong";
-    };
-}>;

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

@@ -1,10 +0,0 @@
-import { defineTheme } from "#vuno/utils/theme";
-export const navigationTocTheme = defineTheme("navigationToc", {
-  slots: {
-    link: "block border-s border-vuno-border py-2 ps-3 text-sm/snug text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-vuno-primary aria-[current=location]:border-vuno-primary aria-[current=location]:font-medium aria-[current=location]:text-vuno-primary",
-    linkDeep: "ps-6",
-    list: "flex flex-col",
-    root: "flex flex-col gap-2",
-    title: "px-3 text-sm font-semibold text-vuno-strong"
-  }
-});

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

@@ -1,81 +0,0 @@
-<script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useMessages, useTheme } from "#vuno/composables/useTheme";
-defineOptions({ name: "VunoNavigationToc" });
-const props = defineProps({
-  items: { type: Array, required: true },
-  label: { type: String, required: false, default: void 0 },
-  ui: { type: Object, required: false, default: void 0 }
-});
-const messages = useMessages();
-const ui = useTheme("navigationToc", () => props.ui);
-const active = ref("");
-const title = computed(() => props.label ?? messages.value.documentToc);
-const BAND = 100;
-let observer;
-let targets = [];
-function targetId(to) {
-  if (!to.startsWith("#")) return;
-  try {
-    return decodeURIComponent(to.slice(1));
-  } catch {
-    return to.slice(1);
-  }
-}
-function sync() {
-  let current = targets[0]?.item.to ?? "";
-  for (const target of targets) {
-    if (target.element.getBoundingClientRect().top > BAND) break;
-    current = target.item.to;
-  }
-  active.value = current;
-}
-function observe() {
-  observer?.disconnect();
-  targets = props.items.flatMap((item) => {
-    const id = targetId(item.to);
-    const element = id ? document.getElementById(id) : null;
-    return element ? [{ element, item }] : [];
-  });
-  if (targets.length === 0) {
-    active.value = "";
-    return;
-  }
-  sync();
-  if (typeof IntersectionObserver === "undefined") return;
-  observer = new IntersectionObserver(sync, { rootMargin: `-${BAND}px 0px 0px 0px` });
-  for (const target of targets) observer.observe(target.element);
-}
-watch(
-  () => props.items,
-  () => void nextTick(observe),
-  { deep: true }
-);
-onMounted(() => void nextTick(observe));
-onBeforeUnmount(() => observer?.disconnect());
-</script>
-
-<template>
-    <nav
-        v-if="items.length > 0"
-        :aria-label="title"
-        :class="ui.root"
-    >
-        <span :class="ui.title">{{ title }}</span>
-
-        <ul :class="ui.list">
-            <li
-                v-for="item in items"
-                :key="item.to"
-            >
-                <a
-                    :aria-current="active === item.to ? 'location' : void 0"
-                    :class="[ui.link, item.level === 3 && ui.linkDeep]"
-                    :href="item.to"
-                >
-                    {{ item.label }}
-                </a>
-            </li>
-        </ul>
-    </nav>
-</template>

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

@@ -1,14 +0,0 @@
-import type { VunoNavigationTocItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    items: VunoNavigationTocItem[];
-    /** Sustituye el título visible y el nombre accesible de la navegación. */
-    label?: string;
-    ui?: VunoUi<'navigationToc'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: string;
-    ui: VunoUi<"navigationToc">;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,40 +0,0 @@
-import type { VunoHeadingLevel } from '#vuno/types/base';
-import type { VunoBreadcrumbItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    breadcrumb?: VunoBreadcrumbItem[];
-    description?: string;
-    /**
-     * El nivel del título. `1` por defecto, que es lo correcto cuando
-     * esto **es** la pantalla.
-     *
-     * Se baja cuando no lo es: un `VPage` dentro de otra página deja dos
-     * `h1` y un salto en lo que venga debajo, y eso no se ve —se oye, y
-     * solo con un lector de pantalla—. El aspecto no cambia: el tamaño y
-     * el peso los pone `ui.title`, no la etiqueta.
-     */
-    level?: VunoHeadingLevel;
-    title: string;
-    ui?: VunoUi<'page'>;
-};
-type __VLS_Slots = {
-    /** Acciones de la pantalla, a la derecha de la barra superior. */
-    actions?: () => unknown;
-    default?: () => unknown;
-    /** Lo que va antes de la miga de pan: un botón de plegado, por ejemplo. */
-    leading?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    description: string;
-    breadcrumb: VunoBreadcrumbItem[];
-    ui: VunoUi<"page">;
-    level: VunoHeadingLevel;
-}, {}, {}, {}, 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/Page/Page.theme.d.ts

@@ -1,32 +0,0 @@
-export declare const pageTheme: Record<"page", {
-    /**
-     * La barra y el panel los pinta el módulo: los componentes de la gama Pro
-     * que había antes solo aportaban dos huecos, y encima había que anularles
-     * el relleno porque el ritmo lo pone `body`.
-     */
-    readonly slots: {
-        readonly body: "flex w-full flex-col gap-7 px-4 py-6 sm:px-6 sm:py-8 lg:p-10";
-        readonly breadcrumb: "hidden min-w-0 sm:block";
-        readonly breadcrumbCurrent: "truncate text-sm font-semibold text-vuno-strong";
-        readonly breadcrumbItem: "flex min-w-0 items-center gap-1.5";
-        readonly breadcrumbLink: "truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
-        readonly breadcrumbList: "flex items-center gap-1.5";
-        readonly breadcrumbSeparator: "size-4 shrink-0 text-vuno-subtle";
-        readonly description: "max-w-prose text-sm text-vuno-muted";
-        readonly heading: "flex flex-col gap-2";
-        readonly navbar: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-vuno-border bg-vuno-surface/90 px-4 backdrop-blur-xl sm:px-6";
-        readonly navbarLeft: "flex min-w-0 items-center gap-1";
-        readonly navbarRight: "flex shrink-0 items-center gap-2";
-        readonly panel: "min-h-0 flex-1 overflow-y-auto";
-        readonly root: "flex min-h-0 w-full flex-1 flex-col";
-        readonly title: "text-2xl font-bold tracking-tight text-vuno-strong sm:text-3xl";
-    };
-    readonly variants: {
-        readonly mobileNavbar: {
-            readonly false: {
-                readonly navbar: "hidden sm:flex";
-            };
-            readonly true: {};
-        };
-    };
-}>;

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

@@ -1,31 +0,0 @@
-import { defineTheme } from "#vuno/utils/theme";
-export const pageTheme = defineTheme("page", {
-  /**
-   * La barra y el panel los pinta el módulo: los componentes de la gama Pro
-   * que había antes solo aportaban dos huecos, y encima había que anularles
-   * el relleno porque el ritmo lo pone `body`.
-   */
-  slots: {
-    body: "flex w-full flex-col gap-7 px-4 py-6 sm:px-6 sm:py-8 lg:p-10",
-    breadcrumb: "hidden min-w-0 sm:block",
-    breadcrumbCurrent: "truncate text-sm font-semibold text-vuno-strong",
-    breadcrumbItem: "flex min-w-0 items-center gap-1.5",
-    breadcrumbLink: "truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)",
-    breadcrumbList: "flex items-center gap-1.5",
-    breadcrumbSeparator: "size-4 shrink-0 text-vuno-subtle",
-    description: "max-w-prose text-sm text-vuno-muted",
-    heading: "flex flex-col gap-2",
-    navbar: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-vuno-border bg-vuno-surface/90 px-4 backdrop-blur-xl sm:px-6",
-    navbarLeft: "flex min-w-0 items-center gap-1",
-    navbarRight: "flex shrink-0 items-center gap-2",
-    panel: "min-h-0 flex-1 overflow-y-auto",
-    root: "flex min-h-0 w-full flex-1 flex-col",
-    title: "text-2xl font-bold tracking-tight text-vuno-strong sm:text-3xl"
-  },
-  variants: {
-    mobileNavbar: {
-      false: { navbar: "hidden sm:flex" },
-      true: {}
-    }
-  }
-});

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

@@ -1,132 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import { filled } from "#vuno/internal/slots";
-import Icon from "#vuno/components/Icon/Icon.vue";
-defineOptions({ name: "VunoPage" });
-const props = defineProps({
-  breadcrumb: { type: Array, required: false, default: void 0 },
-  description: { type: String, required: false, default: void 0 },
-  level: { type: Number, required: false, default: 1 },
-  title: { type: String, required: true },
-  ui: { type: Object, required: false, default: void 0 }
-});
-const slots = defineSlots();
-const icons = useIcons();
-const messages = useMessages();
-const hasMobileNavbar = computed(() => filled(slots.actions) || filled(slots.leading));
-const ui = useTheme(
-  "page",
-  () => props.ui,
-  () => ({ mobileNavbar: String(hasMobileNavbar.value) })
-);
-</script>
-
-<template>
-    <!--
-        El panel y la barra son dos `div` y no los de la gama Pro de Nuxt UI.
-        De aquellos solo se usaban cuatro huecos, y encima había que anularle el
-        relleno al panel porque el ritmo lo pone el cuerpo: lo que traían de
-        verdad —redimensionar, plegar, recordar el tamaño— no se usaba.
-
-        Se gana además quitarse una dependencia que no se veía: el panel de
-        Nuxt UI está pensado para vivir dentro de su grupo, así que `VPage`
-        solo se comportaba bien si el proyecto montaba ese armazón. Ahora
-        funciona en cualquier sitio.
-    -->
-    <div :class="ui.root">
-        <div :class="ui.navbar">
-            <!--
-                La miga ocupa la zona izquierda entera y no un hueco de título:
-                el título de una barra vive dentro de un `<h1>`, y una miga ahí
-                sería un `<nav>` dentro de un encabezado.
-            -->
-            <div :class="ui.navbarLeft">
-                <slot name="leading" />
-
-                <nav
-                    v-if="props.breadcrumb?.length"
-                    :aria-label="messages.breadcrumb"
-                    :class="ui.breadcrumb"
-                >
-                    <ol :class="ui.breadcrumbList">
-                        <li
-                            v-for="(item, index) in props.breadcrumb"
-                            :key="`${item.label ?? item.to ?? index}`"
-                            :class="ui.breadcrumbItem"
-                        >
-                            <!--
-                                El separador va dentro del elemento al que
-                                precede y no como elemento propio: no es un
-                                sitio al que ir, y como `<li>` suelto haría que
-                                un lector anunciara el doble de elementos de los
-                                que hay. Decorativo, así que no se lee.
-                            -->
-                            <Icon
-                                v-if="index > 0"
-                                aria-hidden="true"
-                                :class="ui.breadcrumbSeparator"
-                                :name="icons.breadcrumbSeparator"
-                            />
-
-                            <!--
-                                El último no enlaza a donde ya estás, y lo dice:
-                                `aria-current` es lo que distingue el sitio en el
-                                que uno está de los que lo llevaron hasta aquí.
-                            -->
-                            <span
-                                v-if="index === props.breadcrumb.length - 1"
-                                aria-current="page"
-                                :class="ui.breadcrumbCurrent"
-                            >
-                                {{ item.label }}
-                            </span>
-
-                            <NuxtLink
-                                v-else-if="item.to"
-                                :class="ui.breadcrumbLink"
-                                :to="item.to"
-                            >
-                                {{ item.label }}
-                            </NuxtLink>
-
-                            <span
-                                v-else
-                                :class="ui.breadcrumbLink"
-                            >
-                                {{ item.label }}
-                            </span>
-                        </li>
-                    </ol>
-                </nav>
-            </div>
-
-            <div :class="ui.navbarRight">
-                <slot name="actions" />
-            </div>
-        </div>
-
-        <div :class="ui.panel">
-            <div :class="ui.body">
-                <!-- Un `<div>` y no un `<header>`: un `<header>` suelto es un
-                     landmark `banner`, y solo puede haber uno por página. -->
-                <div :class="ui.heading">
-                    <component
-                        :is="`h${props.level}`"
-                        :class="ui.title"
-                        >{{ props.title }}</component
-                    >
-
-                    <p
-                        v-if="props.description"
-                        :class="ui.description"
-                    >
-                        {{ props.description }}
-                    </p>
-                </div>
-
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>