@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,137 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, useId, useTemplateRef } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import { interactiveChildren, notificationIcons } from "#vuno/components/InlineNotification/notification";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ActionableNotification" });
+const props = defineProps({
+  closeButtonLabel: { type: String, required: false, default: "Cerrar notificaci\xF3n" },
+  hideCloseButton: { type: Boolean, required: false, default: false },
+  kind: { type: String, required: false, default: "error" },
+  lowContrast: { type: Boolean, required: false, default: false },
+  statusIconDescription: { type: String, required: false, default: void 0 },
+  subtitle: { type: String, required: false, default: void 0 },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  actionButtonLabel: { type: String, required: false, default: void 0 },
+  caption: { type: String, required: false, default: void 0 },
+  closeOnEscape: { type: Boolean, required: false, default: true },
+  inline: { type: Boolean, required: false, default: false },
+  role: { type: String, required: false, default: "alertdialog" }
+});
+const emit = defineEmits(["action", "close"]);
+defineSlots();
+const icons = useIcons();
+const root = useTemplateRef("root");
+const titleId = useId();
+const subtitleId = useId();
+let previous = null;
+const modal = computed(() => props.role === "alertdialog");
+const ui = useTheme(
+  "inlineNotification",
+  () => props.ui,
+  () => ({ hideCloseButton: props.hideCloseButton ? "true" : "false", kind: props.kind, lowContrast: props.lowContrast ? "true" : "false", variant: props.inline ? "actionable" : "actionableToast" })
+);
+function onKeydown(event) {
+  if (event.key === "Escape" && props.closeOnEscape) {
+    event.preventDefault();
+    emit("close");
+    return;
+  }
+  if (event.key !== "Tab" || !modal.value) return;
+  const focusable = interactiveChildren(root.value);
+  if (focusable.length === 0) return;
+  const first = focusable[0];
+  const last = focusable.at(-1);
+  const target = event.shiftKey && document.activeElement === first ? last : !event.shiftKey && document.activeElement === last ? first : void 0;
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+}
+onMounted(() => {
+  if (!modal.value) return;
+  previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  void nextTick(() => {
+    const action = root.value?.querySelector("[data-notification-action]");
+    const target = action ?? interactiveChildren(root.value)[0];
+    target?.focus();
+  });
+});
+onBeforeUnmount(() => {
+  if (!modal.value || !root.value?.contains(document.activeElement)) return;
+  previous?.focus();
+});
+</script>
+
+<template>
+    <div
+        ref="root"
+        :aria-labelledby="props.title ? titleId : props.subtitle ? subtitleId : void 0"
+        :class="ui.root"
+        :role="props.role"
+        @keydown="onKeydown"
+    >
+        <div :class="ui.details">
+            <Icon
+                :class="ui.icon"
+                :name="notificationIcons[props.kind]"
+            />
+            <span
+                v-if="props.statusIconDescription"
+                :class="ui.assistive"
+            >
+                {{ props.statusIconDescription }}
+            </span>
+            <div :class="ui.textWrapper">
+                <div :class="ui.content">
+                    <div
+                        v-if="props.title"
+                        :id="titleId"
+                        :class="ui.title"
+                    >
+                        {{ props.title }}
+                    </div>
+                    <div
+                        v-if="props.subtitle"
+                        :id="subtitleId"
+                        :class="ui.subtitle"
+                    >
+                        {{ props.subtitle }}
+                    </div>
+                    <div
+                        v-if="props.caption"
+                        :class="ui.caption"
+                    >
+                        {{ props.caption }}
+                    </div>
+                    <slot />
+                </div>
+            </div>
+        </div>
+        <div :class="ui.actions">
+            <Button
+                v-if="props.actionButtonLabel"
+                data-notification-action
+                :kind="props.inline ? 'ghost' : 'tertiary'"
+                :label="props.actionButtonLabel"
+                size="sm"
+                :ui="{ base: ui.action }"
+                @click="emit('action')"
+            />
+            <button
+                v-if="!props.hideCloseButton"
+                :aria-label="props.closeButtonLabel"
+                :class="ui.close"
+                :title="props.closeButtonLabel"
+                type="button"
+                @click="emit('close')"
+            >
+                <Icon
+                    :class="ui.closeIcon"
+                    :name="icons.close"
+                />
+            </button>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,33 @@
+import type { ActionableNotificationProps } from './ActionableNotification.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ActionableNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: () => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<ActionableNotificationProps> & Readonly<{
+    onAction?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    inline: boolean;
+    kind: import("../InlineNotification/InlineNotification.types.js").NotificationKind;
+    lowContrast: boolean;
+    hideCloseButton: boolean;
+    caption: string;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    closeButtonLabel: string;
+    statusIconDescription: string;
+    actionButtonLabel: string;
+    closeOnEscape: boolean;
+    role: "alertdialog" | import("../InlineNotification/InlineNotification.types.js").NotificationRole;
+}, {}, {}, {}, 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/AspectRatio/AspectRatio.d.vue.ts

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

@@ -0,0 +1,31 @@
+import type { Component } from 'vue';
+/**
+ * Las nueve proporciones que publica el sistema de origen, en su orden: cada
+ * pareja apaisada va seguida de su vertical.
+ *
+ * Su guía de retícula recomienda seis —1:1, 2:1, 2:3, 3:2, 4:3 y 16:9— y su
+ * hoja de estilos genera además las verticales que faltan para completar las
+ * parejas: `9x16`, `1x2` y `3x4`. Se conservan las nueve porque la clase
+ * existe en origen y porque una vertical sin su apaisada obligaría a escribir
+ * la razón a mano justo donde el componente debería servir.
+ */
+export declare const aspectRatios: readonly ["16x9", "9x16", "2x1", "1x2", "4x3", "3x4", "3x2", "2x3", "1x1"];
+export type AspectRatioValue = (typeof aspectRatios)[number];
+export type AspectRatioProps = {
+    /**
+     * Raíz alternativa. Una caja con proporción suele ser la figura, el
+     * artículo o el elemento de lista que ya existía en el marcado, y forzar un
+     * `div` obligaría a envolverla solo para recuperar la semántica.
+     *
+     * Debe ser un elemento de bloque: `aspect-ratio` no llega a aplicarse sobre
+     * una caja en línea, así que un `span` no cambiaría de alto.
+     */
+    as?: Component | string;
+    /**
+     * Proporción entre ancho y alto. El ancho lo decide el contenedor —la caja
+     * ocupa el espacio disponible— y de él sale el alto.
+     *
+     * `1x1` de serie, como en el sistema de origen.
+     */
+    ratio?: AspectRatioValue;
+};

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

@@ -0,0 +1 @@
+export const aspectRatios = ["16x9", "9x16", "2x1", "1x2", "4x3", "3x4", "3x2", "2x3", "1x1"];

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

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ name: "AspectRatio" });
+const props = defineProps({
+  as: { type: null, required: false, default: "div" },
+  ratio: { type: null, required: false, default: "1x1" }
+});
+defineSlots();
+const style = computed(() => ({ "--vuno-aspect-ratio": props.ratio.replace("x", " / ") }));
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        data-vuno-aspect-ratio
+        :style="style"
+    >
+        <slot />
+    </component>
+</template>
+
+<style scoped>
+[data-vuno-aspect-ratio]{aspect-ratio:var(--vuno-aspect-ratio,1/1);position:relative}
+</style>

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

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

@@ -0,0 +1,13 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { BreadcrumbSize } from './Breadcrumb.types.js';
+/**
+ * Lo que decide el contenedor y cada elemento necesita para pintarse. El sistema de origen lo
+ * resuelve con clases en el `ol` —los modificadores de tamaño y de barra
+ * final— y selectores de descendencia; aquí cada
+ * `BreadcrumbItem` resuelve su propio tema, así que lo recibe por inyección.
+ */
+export type BreadcrumbContext = {
+    noTrailingSlash: Ref<boolean>;
+    size: Ref<BreadcrumbSize>;
+};
+export declare const breadcrumbKey: InjectionKey<BreadcrumbContext>;

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

@@ -0,0 +1 @@
+export const breadcrumbKey = Symbol("breadcrumb");

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

@@ -0,0 +1,19 @@
+import type { BreadcrumbProps } from './Breadcrumb.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
+    size: import("./Breadcrumb.types.js").BreadcrumbSize;
+    noTrailingSlash: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"breadcrumb">;
+    ariaLabel: 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/Breadcrumb/Breadcrumb.theme.d.ts

@@ -0,0 +1,32 @@
+export declare const breadcrumbTheme: Record<"breadcrumb", {
+    readonly slots: {
+        readonly current: "flex items-center gap-1.5 text-(--vuno-text-primary)";
+        readonly icon: "size-4 shrink-0";
+        readonly item: "relative flex items-center last:me-0";
+        readonly link: "whitespace-nowrap active:text-(--vuno-text-primary) active:decoration-current focus-visible:decoration-current aria-[current=page]:cursor-auto aria-[current=page]:text-(--vuno-text-primary) aria-[current=page]:hover:text-(--vuno-text-primary) aria-[current=page]:hover:no-underline";
+        readonly list: "m-0 flex list-none flex-wrap items-center p-0";
+        readonly root: "min-w-0";
+        readonly separator: "after:text-(--vuno-text-primary) after:content-['/']";
+        readonly text: "flex items-center gap-1.5 text-(--vuno-link-primary)";
+    };
+    readonly variants: {
+        readonly noTrailingSlash: {
+            readonly false: {};
+            readonly true: {
+                readonly separator: "last:after:content-['']";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly item: "me-1 text-xs";
+                readonly link: "min-w-3 justify-center text-xs";
+                readonly separator: "after:ms-1";
+            };
+            readonly md: {
+                readonly item: "me-2 text-sm/[1.125rem]";
+                readonly link: "text-sm/[1.125rem]";
+                readonly separator: "after:ms-2";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,36 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const breadcrumbTheme = defineTheme("breadcrumb", {
+  slots: {
+    current: "flex items-center gap-1.5 text-(--vuno-text-primary)",
+    icon: "size-4 shrink-0",
+    item: "relative flex items-center last:me-0",
+    /*
+     * La página actual sigue siendo un enlace cuando trae destino: lo que
+     * la neutraliza es el estilo, no la falta de ancla, y así la ruta
+     * conserva todas sus paradas de teclado.
+     */
+    link: "whitespace-nowrap active:text-(--vuno-text-primary) active:decoration-current focus-visible:decoration-current aria-[current=page]:cursor-auto aria-[current=page]:text-(--vuno-text-primary) aria-[current=page]:hover:text-(--vuno-text-primary) aria-[current=page]:hover:no-underline",
+    list: "m-0 flex list-none flex-wrap items-center p-0",
+    root: "min-w-0",
+    separator: "after:text-(--vuno-text-primary) after:content-['/']",
+    /* Un tramo sin destino que tampoco es la página actual se pinta como enlace. */
+    text: "flex items-center gap-1.5 text-(--vuno-link-primary)"
+  },
+  variants: {
+    noTrailingSlash: {
+      false: {},
+      true: { separator: "last:after:content-['']" }
+    },
+    size: {
+      /*
+       * El tipo se declara en el `li` —de donde lo heredan la barra y el
+       * texto actual— y otra vez en el enlace, porque `Link` trae el suyo
+       * y Vuno lo neutraliza con `font: inherit`. El interletrado no se
+       * declara aquí: el paso de cada tamaño con Inter se decide en un
+       * solo sitio y el breadcrumb lo hereda como cualquier otro.
+       */
+      sm: { item: "me-1 text-xs", link: "min-w-3 justify-center text-xs", separator: "after:ms-1" },
+      md: { item: "me-2 text-sm/[1.125rem]", link: "text-sm/[1.125rem]", separator: "after:ms-2" }
+    }
+  }
+});

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

@@ -0,0 +1,12 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * Los dos tamaños de Vuno: `sm` usa el token de tipo `label-01` —12 px sobre
+ * 16— y `md`, el predeterminado, usa `body-compact-01` —14 px sobre 18—.
+ */
+export type BreadcrumbSize = 'md' | 'sm';
+export type BreadcrumbProps = {
+    ariaLabel?: string;
+    noTrailingSlash?: boolean;
+    size?: BreadcrumbSize;
+    ui?: ComponentUi<'breadcrumb'>;
+};

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

@@ -0,0 +1,30 @@
+<script setup>
+import { provide, toRef } from "vue";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import { breadcrumbKey } from "./Breadcrumb.context";
+defineOptions({ name: "Breadcrumb" });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: void 0 },
+  noTrailingSlash: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const messages = useMessages();
+provide(breadcrumbKey, { noTrailingSlash: toRef(props, "noTrailingSlash"), size: toRef(props, "size") });
+const ui = useTheme(
+  "breadcrumb",
+  () => props.ui,
+  () => ({ noTrailingSlash: String(props.noTrailingSlash), size: props.size })
+);
+</script>
+
+<template>
+    <nav
+        :aria-label="props.ariaLabel ?? messages.breadcrumb"
+        :class="ui.root"
+    >
+        <ol :class="ui.list">
+            <slot />
+        </ol>
+    </nav>
+</template>

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

@@ -0,0 +1,19 @@
+import type { BreadcrumbProps } from './Breadcrumb.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
+    size: import("./Breadcrumb.types.js").BreadcrumbSize;
+    noTrailingSlash: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"breadcrumb">;
+    ariaLabel: 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/BreadcrumbItem/BreadcrumbItem.d.vue.ts

@@ -0,0 +1,27 @@
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+declare var __VLS_1: {}, __VLS_14: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    overflow: boolean;
+    to: string;
+    ui: import("../../types/slots.js").ComponentUi<"breadcrumb">;
+    href: string;
+    ariaCurrent: import("./BreadcrumbItem.types.js").BreadcrumbItemCurrent;
+    isCurrentPage: 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/BreadcrumbItem/BreadcrumbItem.types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** Valores de `aria-current` que Vuno admite en un elemento de la ruta. */
+export type BreadcrumbItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time';
+export type BreadcrumbItemProps = {
+    ariaCurrent?: BreadcrumbItemCurrent;
+    disabled?: boolean;
+    href?: string;
+    icon?: string;
+    isCurrentPage?: boolean;
+    overflow?: boolean;
+    to?: string;
+    ui?: ComponentUi<'breadcrumb'>;
+};

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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { breadcrumbKey } from "#vuno/components/Breadcrumb/Breadcrumb.context";
+import Link from "#vuno/components/Link/Link.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "BreadcrumbItem" });
+const props = defineProps({
+  ariaCurrent: { type: String, 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 },
+  isCurrentPage: { type: Boolean, required: false, default: false },
+  overflow: { type: Boolean, required: false, default: false },
+  to: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const context = inject(breadcrumbKey, void 0);
+const current = computed(() => props.isCurrentPage ? "page" : props.ariaCurrent);
+const interactive = computed(() => Boolean(props.href ?? props.to));
+const ui = useTheme(
+  "breadcrumb",
+  () => props.ui,
+  () => ({
+    noTrailingSlash: String(context?.noTrailingSlash.value ?? false),
+    size: context?.size.value ?? "md"
+  })
+);
+</script>
+
+<template>
+    <li :class="[ui.item, ui.separator]">
+        <slot v-if="props.overflow" />
+        <Link
+            v-else-if="interactive"
+            :aria-current="current"
+            :disabled="props.disabled"
+            :href="props.href"
+            :to="props.to"
+            :ui="{ base: ui.link }"
+        >
+            <Icon
+                v-if="props.icon"
+                aria-hidden="true"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+            <slot />
+        </Link>
+        <span
+            v-else
+            :aria-current="current"
+            :aria-disabled="props.disabled || void 0"
+            :class="props.isCurrentPage ? ui.current : ui.text"
+        >
+            <Icon
+                v-if="props.icon"
+                aria-hidden="true"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+            <slot />
+        </span>
+    </li>
+</template>

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

@@ -0,0 +1,27 @@
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+declare var __VLS_1: {}, __VLS_14: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    overflow: boolean;
+    to: string;
+    ui: import("../../types/slots.js").ComponentUi<"breadcrumb">;
+    href: string;
+    ariaCurrent: import("./BreadcrumbItem.types.js").BreadcrumbItemCurrent;
+    isCurrentPage: 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/Button/Button.d.vue.ts

@@ -1,43 +1,21 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
-type Props = {
-    color?: VunoColor;
-    disabled?: boolean;
-    /** Nombre Iconify, como los de `useIcons`. */
-    icon?: string;
-    label?: string;
-    /** Bloquea el botón y sustituye el icono por un giro. */
-    loading?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    /** El icono va detrás de la etiqueta en vez de delante. */
-    trailing?: boolean;
-    /**
-     * `button` a propósito, y no `submit`: un botón dentro de un
-     * formulario que no diga lo que es lo envía al pulsarlo, y eso
-     * convierte cualquier acción secundaria en un envío accidental.
-     */
-    type?: 'button' | 'reset' | 'submit';
-    ui?: VunoUi<'button'>;
-    variant?: VunoButtonVariant;
-};
+import type { ButtonProps } from './Button.types.js';
 type __VLS_Slots = {
-    /** Contenido en lugar de la etiqueta. */
     default?: () => unknown;
-    /** Va después de todo lo demás; la tabla mete ahí su contador. */
     trailing?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    color: VunoColor;
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    tag: import("vue").Component | string;
+    size: import("./Button.types.js").ButtonSize;
+    kind: import("./Button.types.js").ButtonKind;
     icon: string;
-    radius: VunoRadius;
-    size: VunoSize;
-    variant: VunoButtonVariant;
+    selected: boolean;
     label: string;
     type: "button" | "reset" | "submit";
-    ui: VunoUi<"button">;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"button">;
+    dangerDescription: string;
+    href: string;
+    iconDescription: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;