@groupteknology/vuno 1.0.1 → 3.0.0

package/dist/runtime/app/components/{overlays → App/internal/Toast}/Toast.d.vue.ts

@@ -1,10 +1,10 @@
 import type { VunoNotification } from '#vuno/types/app';
-type __VLS_Props = {
+type Props = {
     notification: VunoNotification;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/App/internal/Toast/Toast.theme.d.ts

@@ -0,0 +1,13 @@
+/** El apilado lo añade `Overlay`; aquí solo lo que sea del proyecto. */
+export declare const toastTheme: Record<"toast", {
+    readonly slots: {
+        readonly actions: "absolute top-2 right-2";
+        readonly close: "rounded text-(--vuno-accent) shadow-none ring-transparent hover:bg-(--vuno-accent)/15 hover:text-(--vuno-accent)";
+        readonly content: "pr-5";
+        readonly description: "text-vuno-muted";
+        readonly root: "relative rounded-xl p-4 shadow-lg ring ring-(--vuno-accent)/25";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"root", string>>;
+    };
+}>;

package/dist/runtime/app/components/App/internal/Toast/Toast.theme.js

@@ -0,0 +1,16 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const toastTheme = defineTheme("toast", {
+  slots: {
+    actions: "absolute top-2 right-2",
+    close: "rounded text-(--vuno-accent) shadow-none ring-transparent hover:bg-(--vuno-accent)/15 hover:text-(--vuno-accent)",
+    content: "pr-5",
+    description: "text-vuno-muted",
+    /*
+     * `Alert` aporta el layout, el icono y el tinte semántico. El toast
+     * solo lo eleva sobre la página y reserva sitio para cerrarlo.
+     */
+    root: "relative rounded-xl p-4 shadow-lg ring ring-(--vuno-accent)/25"
+  },
+  variants: { color: accentByColor("root") }
+});

package/dist/runtime/app/components/App/internal/Toast/Toast.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Alert from "#vuno/components/Alert/Alert.vue";
+import Button from "#vuno/components/Button/Button.vue";
+defineOptions({ name: "VunoToast" });
+const props = defineProps({
+  notification: { type: Object, required: true }
+});
+const emit = defineEmits(["dismiss"]);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("toast", void 0, () => ({ color: props.notification.color ?? "neutral" }));
+</script>
+
+<template>
+    <!--
+        **Sin semántica de zona en vivo, y a propósito.**
+
+        Esto es la tarjeta; quien anuncia es `Toaster.vue`, que tiene dos
+        regiones permanentes y es el único que sabe cuándo llega un aviso. Si
+        además lo anunciara la tarjeta, un aviso normal se oiría **dos veces**, y
+        un anuncio duplicado es peor que uno tardío: quien lo oye no sabe si han
+        pasado dos cosas.
+
+        El hueco que deja: un `<VToast>` suelto, fuera del toaster, no se anuncia
+        solo. Queda dicho aquí y en su ficha para que sea un hueco conocido y no
+        un defecto futuro.
+    -->
+    <Alert
+        :color="props.notification.color"
+        :description="props.notification.description"
+        :icon="props.notification.icon"
+        :role="null"
+        :title="props.notification.title"
+        :ui="{
+  actions: ui.actions,
+  content: ui.content,
+  description: ui.description,
+  root: ui.root
+}"
+    >
+        <template #actions>
+            <Button
+                :aria-label="messages.close"
+                color="neutral"
+                :icon="icons.close"
+                shape="square"
+                size="xs"
+                :ui="{ base: ui.close }"
+                variant="ghost"
+                @click="emit('dismiss')"
+            />
+        </template>
+    </Alert>
+</template>

package/dist/runtime/app/components/{overlays → App/internal/Toast}/Toast.vue.d.ts

@@ -1,10 +1,10 @@
 import type { VunoNotification } from '#vuno/types/app';
-type __VLS_Props = {
+type Props = {
     notification: VunoNotification;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDismiss?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/{overlays → App/internal/Toaster}/Toaster.d.vue.ts

@@ -1,10 +1,10 @@
 import type { VunoNotification } from '#vuno/types/app';
-type __VLS_Props = {
+type Props = {
     notifications: VunoNotification[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDismiss?: ((id: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const toasterTheme: Record<"toaster", {
+    readonly slots: {
+        /** Entra deslizando desde la derecha; sale encogiendo. */
+        readonly enterActive: "transition duration-200 ease-out";
+        readonly enterFrom: "translate-x-4 opacity-0";
+        readonly item: "pointer-events-auto";
+        readonly leaveActive: "absolute inset-x-0 transition duration-150 ease-in";
+        readonly leaveTo: "translate-x-4 opacity-0";
+        readonly list: "flex flex-col gap-3";
+        /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
+        readonly move: "transition-transform duration-200 ease-out";
+        /** Fijo abajo a la derecha; en móvil ocupa el ancho con margen. */
+        readonly root: "pointer-events-none fixed inset-x-4 bottom-4 z-100 flex flex-col gap-3 sm:inset-x-auto sm:right-8 sm:bottom-8 sm:w-85";
+    };
+}>;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.js

@@ -0,0 +1,16 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const toasterTheme = defineTheme("toaster", {
+  slots: {
+    /** Entra deslizando desde la derecha; sale encogiendo. */
+    enterActive: "transition duration-200 ease-out",
+    enterFrom: "translate-x-4 opacity-0",
+    item: "pointer-events-auto",
+    leaveActive: "absolute inset-x-0 transition duration-150 ease-in",
+    leaveTo: "translate-x-4 opacity-0",
+    list: "flex flex-col gap-3",
+    /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
+    move: "transition-transform duration-200 ease-out",
+    /** Fijo abajo a la derecha; en móvil ocupa el ancho con margen. */
+    root: "pointer-events-none fixed inset-x-4 bottom-4 z-100 flex flex-col gap-3 sm:inset-x-auto sm:right-8 sm:bottom-8 sm:w-85"
+  }
+});

package/dist/runtime/app/components/{overlays → App/internal/Toaster}/Toaster.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { nextTick, ref, watch } from "vue";
-import Toast from "#vuno/components/overlays/Toast.vue";
 import { useTheme } from "#vuno/composables/useTheme";
+import Toast from "#vuno/components/App/internal/Toast/Toast.vue";
+defineOptions({ name: "VunoToaster" });
 const props = defineProps({
   notifications: { type: Array, required: true }
 });
 const emit = defineEmits(["dismiss"]);
 const ui = useTheme("toaster");
-const polite = ref("");
 const assertive = ref("");
+const polite = ref("");
 const announced = /* @__PURE__ */ new Set();
 const owners = { assertive: null, polite: null };
 async function announce(region, text) {

package/dist/runtime/app/components/{overlays → App/internal/Toaster}/Toaster.vue.d.ts

@@ -1,10 +1,10 @@
 import type { VunoNotification } from '#vuno/types/app';
-type __VLS_Props = {
+type Props = {
     notifications: VunoNotification[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onDismiss?: ((id: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,10 @@
+import type { VunoAvatarProps } from './Avatar.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Avatar.types.js").VunoAvatarSize;
+    alt: string;
+    ui: import("../../types/slots.js").VunoUi<"avatar">;
+    src: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,30 @@
+export declare const avatarTheme: Record<"avatar", {
+    /**
+     * La escala es la de Nuxt UI y no una propia, para que `size: 'sm'` siga
+     * midiendo los mismos 28 px que hoy en la columna de imagen.
+     */
+    readonly slots: {
+        readonly image: "size-full rounded-[inherit] object-cover";
+        readonly root: "inline-flex shrink-0 items-center justify-center rounded-sm bg-vuno-surface-1 align-middle font-medium text-vuno-muted select-none";
+    };
+    readonly variants: {
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly root: "size-6 text-xs";
+            };
+            readonly sm: {
+                readonly root: "size-7 text-sm";
+            };
+            readonly md: {
+                readonly root: "size-8 text-sm";
+            };
+            readonly lg: {
+                readonly root: "size-9 text-sm";
+            };
+            readonly xl: {
+                readonly root: "size-10 text-base";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,22 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const avatarTheme = defineTheme("avatar", {
+  /**
+   * La escala es la de Nuxt UI y no una propia, para que `size: 'sm'` siga
+   * midiendo los mismos 28 px que hoy en la columna de imagen.
+   */
+  slots: {
+    image: "size-full rounded-[inherit] object-cover",
+    root: "inline-flex shrink-0 items-center justify-center rounded-sm bg-vuno-surface-1 align-middle font-medium text-vuno-muted select-none"
+  },
+  variants: {
+    radius: radiusByStep("root"),
+    size: {
+      xs: { root: "size-6 text-xs" },
+      sm: { root: "size-7 text-sm" },
+      md: { root: "size-8 text-sm" },
+      lg: { root: "size-9 text-sm" },
+      xl: { root: "size-10 text-base" }
+    }
+  }
+});

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

@@ -0,0 +1,10 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoAvatarSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoAvatarProps = {
+    alt?: string;
+    radius?: VunoRadius;
+    size?: VunoAvatarSize;
+    src?: string;
+    ui?: VunoUi<'avatar'>;
+};

package/dist/runtime/app/components/{actions → Avatar}/Avatar.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoAvatar" });
 const props = defineProps({
   alt: { type: String, required: false, default: "" },
+  radius: { type: String, required: false, default: void 0 },
   size: { type: String, required: false, default: "md" },
   src: { type: String, required: false, default: void 0 },
   ui: { type: Object, required: false, default: void 0 }
@@ -10,19 +12,19 @@ const props = defineProps({
 const ui = useTheme(
   "avatar",
   () => props.ui,
-  () => ({ size: props.size })
+  () => ({ radius: props.radius, size: props.size })
 );
 const failed = ref(false);
+const showImage = computed(() => Boolean(props.src) && !failed.value);
+const initials = computed(
+  () => props.alt.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toLocaleUpperCase() ?? "").join("")
+);
 watch(
   () => props.src,
   () => {
     failed.value = false;
   }
 );
-const showImage = computed(() => Boolean(props.src) && !failed.value);
-const initials = computed(
-  () => props.alt.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toLocaleUpperCase() ?? "").join("")
-);
 </script>
 
 <template>

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

@@ -0,0 +1,10 @@
+import type { VunoAvatarProps } from './Avatar.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Avatar.types.js").VunoAvatarSize;
+    alt: string;
+    ui: import("../../types/slots.js").VunoUi<"avatar">;
+    src: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { VunoBadgeProps } from './Badge.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Badge.types.js").VunoBadgeSize;
+    variant: import("./Badge.types.js").VunoBadgeVariant;
+    label: string;
+    ui: import("../../types/slots.js").VunoUi<"badge">;
+}, {}, {}, {}, 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/Badge/Badge.theme.d.ts

@@ -0,0 +1,40 @@
+export declare const badgeTheme: Record<"badge", {
+    readonly slots: {
+        readonly base: "inline-flex shrink-0 items-center rounded-sm font-medium";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"base", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly base: "gap-0.5 px-1.5 py-0.5 text-xs";
+            };
+            readonly sm: {
+                readonly base: "gap-1 px-1.5 py-0.5 text-xs";
+            };
+            readonly md: {
+                readonly base: "gap-1 px-2 py-0.5 text-xs";
+            };
+            readonly lg: {
+                readonly base: "gap-1.5 px-2 py-1 text-sm";
+            };
+            readonly xl: {
+                readonly base: "gap-1.5 px-2.5 py-1 text-sm";
+            };
+        };
+        readonly variant: {
+            readonly outline: {
+                readonly base: "border border-(--vuno-accent) text-(--vuno-accent)";
+            };
+            readonly soft: {
+                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent)";
+            };
+            readonly solid: {
+                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast)";
+            };
+            readonly subtle: {
+                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-1 ring-(--vuno-accent)/25 ring-inset";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,22 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const badgeTheme = defineTheme("badge", {
+  slots: { base: "inline-flex shrink-0 items-center rounded-sm font-medium" },
+  variants: {
+    color: accentByColor("base"),
+    radius: radiusByStep("base"),
+    size: {
+      xs: { base: "gap-0.5 px-1.5 py-0.5 text-xs" },
+      sm: { base: "gap-1 px-1.5 py-0.5 text-xs" },
+      md: { base: "gap-1 px-2 py-0.5 text-xs" },
+      lg: { base: "gap-1.5 px-2 py-1 text-sm" },
+      xl: { base: "gap-1.5 px-2.5 py-1 text-sm" }
+    },
+    variant: {
+      outline: { base: "border border-(--vuno-accent) text-(--vuno-accent)" },
+      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent)" },
+      solid: { base: "bg-(--vuno-accent) text-(--vuno-accent-contrast)" },
+      subtle: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-1 ring-(--vuno-accent)/25 ring-inset" }
+    }
+  }
+});

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

@@ -0,0 +1,12 @@
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoBadgeSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+export type VunoBadgeProps = {
+    color?: VunoColor;
+    label?: string;
+    radius?: VunoRadius;
+    size?: VunoBadgeSize;
+    ui?: VunoUi<'badge'>;
+    variant?: VunoBadgeVariant;
+};

package/dist/runtime/app/components/{actions → Badge}/Badge.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoBadge" });
 const props = defineProps({
   color: { type: String, required: false, default: "primary" },
   label: { type: String, required: false, default: void 0 },
+  radius: { type: String, required: false, default: void 0 },
   size: { type: String, required: false, default: "md" },
   ui: { type: Object, required: false, default: void 0 },
   variant: { type: String, required: false, default: "solid" }
@@ -12,6 +14,7 @@ const ui = useTheme(
   () => props.ui,
   () => ({
     color: props.color,
+    radius: props.radius,
     size: props.size,
     variant: props.variant
   })

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

@@ -0,0 +1,21 @@
+import type { VunoBadgeProps } from './Badge.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Badge.types.js").VunoBadgeSize;
+    variant: import("./Badge.types.js").VunoBadgeVariant;
+    label: string;
+    ui: import("../../types/slots.js").VunoUi<"badge">;
+}, {}, {}, {}, 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.d.vue.ts

@@ -0,0 +1,7 @@
+import type { VunoBreadcrumbProps } from './Breadcrumb.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoBreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBreadcrumbProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").VunoUi<"breadcrumb">;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+export declare const breadcrumbTheme: Record<"breadcrumb", {
+    readonly slots: {
+        readonly collapsedItem: "hidden sm:flex";
+        readonly collapseIndicator: "shrink-0 text-sm font-medium text-vuno-muted sm:hidden";
+        readonly current: "flex min-w-0 items-center gap-1.5 truncate text-sm font-semibold text-vuno-strong";
+        readonly icon: "size-4 shrink-0";
+        readonly item: "flex min-w-0 items-center gap-1.5";
+        readonly link: "flex min-w-0 items-center gap-1.5 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 list: "flex min-w-0 items-center gap-1.5 whitespace-nowrap";
+        readonly root: "min-w-0";
+        readonly separator: "size-4 shrink-0 text-vuno-subtle rtl:rotate-180";
+        readonly skeleton: "h-4 w-24 max-w-[35vw] animate-pulse rounded-full bg-vuno-surface-2 motion-reduce:animate-none";
+        readonly text: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium text-vuno-muted";
+    };
+}>;

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

@@ -0,0 +1,16 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const breadcrumbTheme = defineTheme("breadcrumb", {
+  slots: {
+    collapsedItem: "hidden sm:flex",
+    collapseIndicator: "shrink-0 text-sm font-medium text-vuno-muted sm:hidden",
+    current: "flex min-w-0 items-center gap-1.5 truncate text-sm font-semibold text-vuno-strong",
+    icon: "size-4 shrink-0",
+    item: "flex min-w-0 items-center gap-1.5",
+    link: "flex min-w-0 items-center gap-1.5 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)",
+    list: "flex min-w-0 items-center gap-1.5 whitespace-nowrap",
+    root: "min-w-0",
+    separator: "size-4 shrink-0 text-vuno-subtle rtl:rotate-180",
+    skeleton: "h-4 w-24 max-w-[35vw] animate-pulse rounded-full bg-vuno-surface-2 motion-reduce:animate-none",
+    text: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium text-vuno-muted"
+  }
+});

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

@@ -0,0 +1,7 @@
+import type { VunoBreadcrumbItem } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoBreadcrumbProps = {
+    items: VunoBreadcrumbItem[];
+    loading?: boolean;
+    ui?: VunoUi<'breadcrumb'>;
+};

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

@@ -0,0 +1,109 @@
+<script setup>
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import Text from "#vuno/components/Text/Text.vue";
+defineOptions({ name: "VunoBreadcrumb" });
+const props = defineProps({
+  items: { type: Array, required: true },
+  loading: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("breadcrumb", () => props.ui);
+function isCollapsedItem(index) {
+  return props.items.length > 3 && index < props.items.length - 2;
+}
+</script>
+
+<template>
+    <nav
+        v-if="props.items.length"
+        :aria-busy="props.loading ? 'true' : void 0"
+        :aria-label="messages.breadcrumb"
+        :class="ui.root"
+    >
+        <ol :class="ui.list">
+            <li
+                v-if="props.items.length > 3"
+                aria-hidden="true"
+                :class="[ui.item, ui.collapseIndicator]"
+            >
+                …
+            </li>
+
+            <li
+                v-for="(item, index) in props.items"
+                :key="`${index}:${item.to ?? ''}:${item.label}`"
+                :class="[ui.item, isCollapsedItem(index) ? ui.collapsedItem : void 0]"
+            >
+                <Icon
+                    v-if="index > 0"
+                    aria-hidden="true"
+                    :class="ui.separator"
+                    :name="icons.breadcrumbSeparator"
+                />
+
+                <Text
+                    v-if="index === props.items.length - 1"
+                    :aria-busy="props.loading ? 'true' : void 0"
+                    aria-current="page"
+                    :aria-label="props.loading ? item.label : void 0"
+                    :class="ui.current"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                >
+                    <Text
+                        v-if="props.loading"
+                        aria-hidden="true"
+                        :class="ui.skeleton"
+                        tag="span"
+                        tone="inherit"
+                        variant="inherit"
+                    />
+
+                    <template v-else>
+                        <Icon
+                            v-if="item.icon"
+                            aria-hidden="true"
+                            :class="ui.icon"
+                            :name="item.icon"
+                        />
+                        {{ item.label }}
+                    </template>
+                </Text>
+
+                <NuxtLink
+                    v-else-if="item.to"
+                    :class="ui.link"
+                    :to="item.to"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        aria-hidden="true"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+                    {{ item.label }}
+                </NuxtLink>
+
+                <Text
+                    v-else
+                    :class="ui.text"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        aria-hidden="true"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+                    {{ item.label }}
+                </Text>
+            </li>
+        </ol>
+    </nav>
+</template>