kaze 1.3.1 → 2.0.0

data/stubs/inertia-vue-ts/app/assets/tailwind/application.css

@@ -1,4 +1,128 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+/* Drive `dark:` from a `dark` class rather than prefers-color-scheme, so the
+   appearance preference can override the operating system. The layouts apply
+   the class before first paint. */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.87 0 0);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.87 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
 
 @plugin "@tailwindcss/forms";
 

data/stubs/inertia-vue-ts/app/javascript/Components/AppLogo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import ApplicationLogo from '@/Components/ApplicationLogo.vue'
+
+const appName = import.meta.env.VITE_APP_NAME || 'Rails'
+</script>
+
+<template>
+  <div
+    class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
+  >
+    <ApplicationLogo class="size-5 fill-current text-white dark:text-black" />
+  </div>
+
+  <div class="ml-1 grid flex-1 text-left text-sm">
+    <span class="mb-0.5 truncate leading-tight font-semibold">{{ appName }}</span>
+  </div>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/AppShell.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { usePage } from '@inertiajs/vue3'
+import { SidebarProvider } from '@/Components/ui/sidebar'
+
+const sidebarOpen = usePage().props.sidebar_open
+</script>
+
+<template>
+  <SidebarProvider :default-open="sidebarOpen">
+    <slot />
+  </SidebarProvider>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/AppSidebar.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+import { BookOpen, FolderGit2, LayoutGrid } from '@lucide/vue'
+import AppLogo from '@/Components/AppLogo.vue'
+import NavFooter from '@/Components/NavFooter.vue'
+import NavMain from '@/Components/NavMain.vue'
+import NavUser from '@/Components/NavUser.vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/Components/ui/sidebar'
+import { dashboard_path } from '@/routes'
+import { NavItem } from '@/types'
+
+const mainNavItems: NavItem[] = [
+  {
+    title: 'Dashboard',
+    href: dashboard_path(),
+    icon: LayoutGrid,
+  },
+]
+
+const footerNavItems: NavItem[] = [
+  {
+    title: 'Repository',
+    href: 'https://github.com/cuonggt/kaze',
+    icon: FolderGit2,
+  },
+  {
+    title: 'Documentation',
+    href: 'https://github.com/cuonggt/kaze#readme',
+    icon: BookOpen,
+  },
+]
+</script>
+
+<template>
+  <Sidebar collapsible="icon" variant="inset">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <Link :href="dashboard_path()">
+              <AppLogo />
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+
+    <SidebarContent>
+      <NavMain :items="mainNavItems" />
+    </SidebarContent>
+
+    <SidebarFooter>
+      <NavFooter :items="footerNavItems" class="mt-auto" />
+      <NavUser />
+    </SidebarFooter>
+  </Sidebar>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/AppSidebarHeader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Breadcrumbs from '@/Components/Breadcrumbs.vue'
+import { SidebarTrigger } from '@/Components/ui/sidebar'
+import { BreadcrumbItem } from '@/types'
+
+withDefaults(defineProps<{ breadcrumbs?: BreadcrumbItem[] }>(), {
+  breadcrumbs: () => [],
+})
+</script>
+
+<template>
+  <header
+    class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
+  >
+    <div class="flex items-center gap-2">
+      <SidebarTrigger class="-ml-1" />
+      <Breadcrumbs :breadcrumbs="breadcrumbs" />
+    </div>
+  </header>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/Breadcrumbs.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/Components/ui/breadcrumb'
+import { BreadcrumbItem as BreadcrumbItemType } from '@/types'
+
+defineProps<{ breadcrumbs: BreadcrumbItemType[] }>()
+</script>
+
+<template>
+  <Breadcrumb v-if="breadcrumbs.length > 0">
+    <BreadcrumbList>
+      <template v-for="(item, index) in breadcrumbs" :key="item.href">
+        <BreadcrumbItem>
+          <BreadcrumbPage v-if="index === breadcrumbs.length - 1">{{ item.title }}</BreadcrumbPage>
+
+          <BreadcrumbLink v-else as-child>
+            <Link :href="item.href">{{ item.title }}</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+
+        <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+      </template>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/Heading.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ title: string; description?: string; variant?: 'default' | 'small' }>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <header :class="variant === 'small' ? '' : 'mb-8 space-y-0.5'">
+    <h2 :class="variant === 'small' ? 'mb-0.5 text-base font-medium' : 'text-xl font-semibold tracking-tight'">
+      {{ title }}
+    </h2>
+
+    <p v-if="description" class="text-sm text-muted-foreground">{{ description }}</p>
+  </header>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/InputError.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div v-show="message">
-    <p class="text-sm text-red-600 dark:text-red-400">
+    <p class="text-sm text-destructive">
       {{ message }}
     </p>
   </div>

data/stubs/inertia-vue-ts/app/javascript/Components/NavFooter.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/Components/ui/sidebar'
+import { cn } from '@/lib/utils'
+import { NavItem } from '@/types'
+
+const props = defineProps<{ items: NavItem[]; class?: string }>()
+</script>
+
+<template>
+  <SidebarGroup :class="cn('group-data-[collapsible=icon]:p-0', props.class)">
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem v-for="item in items" :key="item.title">
+          <SidebarMenuButton
+            as-child
+            class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+          >
+            <a :href="item.href" target="_blank" rel="noopener noreferrer">
+              <component :is="item.icon" v-if="item.icon" class="h-5 w-5" />
+              <span>{{ item.title }}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/NavMain.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/Components/ui/sidebar'
+import { NavItem } from '@/types'
+
+defineProps<{ items: NavItem[] }>()
+
+const page = usePage()
+</script>
+
+<template>
+  <SidebarGroup class="px-2 py-0">
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in items" :key="item.title">
+        <SidebarMenuButton as-child :is-active="page.url.startsWith(item.href)" :tooltip="item.title">
+          <Link :href="item.href">
+            <component :is="item.icon" v-if="item.icon" />
+            <span>{{ item.title }}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/NavUser.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { usePage } from '@inertiajs/vue3'
+import { ChevronsUpDown } from '@lucide/vue'
+import { computed } from 'vue'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/Components/ui/dropdown-menu'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/Components/ui/sidebar'
+import UserInfo from '@/Components/UserInfo.vue'
+import UserMenuContent from '@/Components/UserMenuContent.vue'
+
+const page = usePage()
+const user = computed(() => page.props.auth.user)
+const { isMobile, state } = useSidebar()
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent"
+          >
+            <UserInfo :user="user" />
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
+          align="end"
+          :side-offset="4"
+        >
+          <UserMenuContent :user="user" />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/UserInfo.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback } from '@/Components/ui/avatar'
+import { useInitials } from '@/composables/useInitials'
+import { User } from '@/types'
+
+withDefaults(defineProps<{ user: User; showEmail?: boolean }>(), {
+  showEmail: false,
+})
+
+const { getInitials } = useInitials()
+</script>
+
+<template>
+  <Avatar class="h-8 w-8 overflow-hidden rounded-full">
+    <AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+      {{ getInitials(user.name) }}
+    </AvatarFallback>
+  </Avatar>
+
+  <div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">{{ user.name }}</span>
+
+    <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{ user.email }}</span>
+  </div>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/UserMenuContent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+import { LogOut, Settings } from '@lucide/vue'
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/Components/ui/dropdown-menu'
+import UserInfo from '@/Components/UserInfo.vue'
+import { logout_path, profile_edit_path } from '@/routes'
+import { User } from '@/types'
+
+defineProps<{ user: User }>()
+
+const handleLogout = () => {
+  router.flushAll()
+}
+</script>
+
+<template>
+  <DropdownMenuLabel class="p-0 font-normal">
+    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+      <UserInfo :user="user" show-email />
+    </div>
+  </DropdownMenuLabel>
+
+  <DropdownMenuSeparator />
+
+  <DropdownMenuGroup>
+    <DropdownMenuItem as-child>
+      <Link class="block w-full cursor-pointer" :href="profile_edit_path()">
+        <Settings class="mr-2 h-4 w-4" />
+        Settings
+      </Link>
+    </DropdownMenuItem>
+  </DropdownMenuGroup>
+
+  <DropdownMenuSeparator />
+
+  <DropdownMenuItem as-child>
+    <Link class="block w-full cursor-pointer" :href="logout_path()" method="post" as="button" @click="handleLogout">
+      <LogOut class="mr-2 h-4 w-4" />
+      Log out
+    </Link>
+  </DropdownMenuItem>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/avatar/Avatar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

data/stubs/inertia-vue-ts/app/javascript/Components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>