@lupinum/ginko-docs 0.2.2

package/app/components/site/SiteHeader.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { useScrollLock, onKeyStroke } from "@vueuse/core";
+import { Button } from "#ginko-docs/components/ui/button";
+import { Kbd } from "#ginko-docs/components/ui/kbd";
+import { Separator } from "#ginko-docs/components/ui/separator";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useI18n, useRoute } from "#imports";
+import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
+import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
+import { useCommandCenterState } from "#ginko-docs/features/search/useCommandCenter";
+import ModeToggle from "#ginko-docs/components/site/ModeToggle.vue";
+
+const { mainNav } = useSiteNavigation();
+const { openCommandCenter } = useCommandCenterState();
+const { t } = useI18n();
+const route = useRoute();
+const isMobileMenuOpen = ref(false);
+const headerElement = ref<HTMLElement | null>(null);
+const mobileMenuTop = ref("var(--site-header-height)");
+const localizedPath = useLocalizedPath();
+
+const isActive = (href: string) => route.path === href || route.path.startsWith(href + "/");
+
+function mobileNavIcon(href: string) {
+  if (href.includes("blog")) return "lucide:file-text";
+  if (href.includes("dok") || href.includes("doc")) return "lucide:book-open";
+  return "lucide:circle";
+}
+
+const mobileNavItems = computed(() =>
+  mainNav.value.map((item) => ({
+    label: item.label,
+    href: item.href,
+    icon: mobileNavIcon(item.href),
+    children: [] as { label: string; href: string }[],
+  })),
+);
+const homePath = computed(() => localizedPath("home"));
+
+// Scroll lock when menu is open
+const scrollLock = useScrollLock(import.meta.client ? document.body : null);
+
+watch(isMobileMenuOpen, (open) => {
+  scrollLock.value = open;
+  if (open) {
+    void nextTick(updateMobileMenuTop);
+  }
+});
+
+function updateMobileMenuTop() {
+  if (!import.meta.client || !headerElement.value) return;
+  mobileMenuTop.value = `${Math.max(0, headerElement.value.getBoundingClientRect().bottom)}px`;
+}
+
+function handleResize() {
+  if (isMobileMenuOpen.value) {
+    updateMobileMenuTop();
+  }
+}
+
+onMounted(() => window.addEventListener("resize", handleResize));
+onBeforeUnmount(() => window.removeEventListener("resize", handleResize));
+
+function openSearch() {
+  isMobileMenuOpen.value = false;
+  openCommandCenter();
+}
+
+// Close on Escape
+onKeyStroke("Escape", () => {
+  if (isMobileMenuOpen.value) {
+    isMobileMenuOpen.value = false;
+  }
+});
+
+// Close menu on navigation
+watch(
+  () => route.path,
+  () => {
+    isMobileMenuOpen.value = false;
+  },
+);
+</script>
+
+<template>
+  <header
+    ref="headerElement"
+    class="sticky top-0 z-50 flex h-14 w-full shrink-0 items-center border-b border-border bg-background/90 backdrop-blur-md"
+  >
+    <div class="mx-auto flex w-full max-w-screen-2xl flex-1 items-center gap-4 px-4 md:px-6">
+      <NuxtLink
+        :to="homePath"
+        class="flex items-center gap-2 font-semibold text-foreground"
+        :aria-label="t('nav.home')"
+      >
+        <SiteLogoMark />
+      </NuxtLink>
+      <nav class="ml-4 hidden items-center gap-1 md:flex" :aria-label="t('nav.main')">
+        <NuxtLink
+          v-for="item in mainNav"
+          :key="item.href"
+          :to="item.href"
+          class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
+          :class="
+            isActive(item.href)
+              ? 'bg-muted text-foreground'
+              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+          "
+        >
+          {{ item.label }}
+        </NuxtLink>
+      </nav>
+      <div class="ml-auto flex items-center gap-1.5">
+        <Button
+          variant="outline"
+          class="hidden h-9 w-52 justify-start gap-2 px-3 text-muted-foreground md:flex"
+          :aria-label="t('nav.search')"
+          type="button"
+          @click="openSearch"
+        >
+          <Icon name="lucide:search" class="size-4 shrink-0" aria-hidden="true" />
+          <span class="flex-1 text-left">{{ t("nav.search") }}...</span>
+          <Kbd class="h-5 bg-background text-[10px]">⌘K</Kbd>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="md:hidden"
+          :aria-label="t('nav.search')"
+          type="button"
+          @click="openSearch"
+        >
+          <Icon name="lucide:search" class="size-5" aria-hidden="true" />
+        </Button>
+
+        <Separator orientation="vertical" class="mx-0.5 hidden h-5 md:block" />
+
+        <ClientOnly>
+          <div class="hidden md:block">
+            <ModeToggle />
+          </div>
+
+          <template #fallback>
+            <span
+              class="hidden size-9 shrink-0 rounded-md border border-border bg-background md:block"
+              aria-hidden="true"
+            />
+          </template>
+        </ClientOnly>
+
+        <SiteLocaleSwitcher class="hidden md:flex" />
+        <Button
+          variant="ghost"
+          size="icon"
+          class="md:hidden"
+          :aria-label="isMobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')"
+          :aria-expanded="isMobileMenuOpen"
+          type="button"
+          @click="isMobileMenuOpen = !isMobileMenuOpen"
+        >
+          <Icon
+            :name="isMobileMenuOpen ? 'lucide:x' : 'lucide:menu'"
+            class="size-5"
+            aria-hidden="true"
+          />
+        </Button>
+      </div>
+    </div>
+  </header>
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out"
+    enter-from-class="-translate-y-4 opacity-0"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-from-class="translate-y-0 opacity-100"
+    leave-to-class="-translate-y-4 opacity-0"
+  >
+    <div
+      v-if="isMobileMenuOpen"
+      class="fixed inset-x-0 bottom-0 z-40 [scrollbar-width:none] overflow-y-auto bg-background/95 backdrop-blur-md md:hidden [&::-webkit-scrollbar]:hidden"
+      :style="{ top: mobileMenuTop }"
+    >
+      <div class="px-5 pt-9 pb-12">
+        <nav v-if="mobileNavItems.length" class="space-y-4" :aria-label="t('nav.mobile')">
+          <p class="px-3 text-xs font-bold tracking-[0.16em] text-muted-foreground uppercase">
+            {{ t("nav.navigationSection") }}
+          </p>
+          <div class="overflow-hidden rounded-xl border border-border bg-background shadow-xs">
+            <NuxtLink
+              v-for="(group, index) in mobileNavItems"
+              :key="group.href"
+              :to="group.href"
+              class="flex h-[4.25rem] items-center gap-4 px-5 text-base font-semibold transition-colors hover:bg-muted/50"
+              :class="[
+                isActive(group.href) ? 'text-primary' : 'text-foreground',
+                index > 0 && 'border-t border-border',
+              ]"
+              @click="isMobileMenuOpen = false"
+            >
+              <span
+                class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
+              >
+                <Icon :name="group.icon" class="size-5" aria-hidden="true" />
+              </span>
+              <span class="min-w-0 flex-1 truncate">{{ group.label }}</span>
+              <Icon
+                name="lucide:chevron-right"
+                class="size-5 shrink-0 text-muted-foreground"
+                aria-hidden="true"
+              />
+            </NuxtLink>
+          </div>
+        </nav>
+
+        <div class="space-y-4" :class="mobileNavItems.length ? 'mt-9' : ''">
+          <p class="px-3 text-xs font-bold tracking-[0.16em] text-muted-foreground uppercase">
+            {{ t("nav.settingsHelp") }}
+          </p>
+          <div class="overflow-hidden rounded-xl border border-border bg-background shadow-xs">
+            <button
+              type="button"
+              class="flex h-[4.25rem] w-full items-center gap-4 px-5 text-start text-base font-semibold transition-colors hover:bg-muted/50"
+              @click="openSearch"
+            >
+              <span
+                class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
+              >
+                <Icon name="lucide:search" class="size-5" aria-hidden="true" />
+              </span>
+              <span class="min-w-0 flex-1 truncate">{{ t("nav.search") }}</span>
+              <Icon
+                name="lucide:chevron-right"
+                class="size-5 shrink-0 text-muted-foreground"
+                aria-hidden="true"
+              />
+            </button>
+            <div class="grid grid-cols-2 border-t border-border">
+              <ModeToggle variant="menu-tile" class="border-r border-border" />
+              <SiteLocaleSwitcher
+                variant="menu-tile"
+                class="flex"
+                @navigate="isMobileMenuOpen = false"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

package/app/components/site/SiteInteractionLayer.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { defineAsyncComponent, onBeforeUnmount, onMounted } from "vue";
+import SiteSearchPageHighlight from "#ginko-docs/features/search/components/SiteSearchPageHighlight.vue";
+import { useCommandCenterState } from "#ginko-docs/features/search/useCommandCenter";
+
+const SiteCommandCenter = defineAsyncComponent(
+  () => import("#ginko-docs/features/search/components/SiteCommandCenter.vue"),
+);
+const { open, openCommandCenter } = useCommandCenterState();
+
+function handleGlobalShortcut(event: KeyboardEvent) {
+  const element = event.target as HTMLElement | null;
+  const typing =
+    element instanceof HTMLElement &&
+    (element.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName));
+
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    openCommandCenter();
+  } else if (!typing && event.key === "/") {
+    event.preventDefault();
+    openCommandCenter();
+  }
+}
+
+onMounted(() => window.addEventListener("keydown", handleGlobalShortcut));
+onBeforeUnmount(() => window.removeEventListener("keydown", handleGlobalShortcut));
+</script>
+
+<template>
+  <ClientOnly>
+    <SiteCommandCenter v-if="open" />
+    <SiteSearchPageHighlight />
+  </ClientOnly>
+</template>

package/app/components/site/SiteLocaleSwitcher.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Button } from "#ginko-docs/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "#ginko-docs/components/ui/dropdown-menu";
+import { cn } from "#ginko-docs/lib/utils";
+import { computed } from "vue";
+import { useI18n } from "#imports";
+import { useLocalizedRouteSwitch } from "#ginko-docs/composables/useLocalizedRouteSwitch";
+import { locales as configuredLocales } from "../../../i18n/locales";
+
+type LocaleSwitcherVariant = "dropdown" | "menu-row" | "menu-tile" | "segmented";
+
+type LocaleEntry = {
+  code: string;
+  language?: string;
+  name?: string;
+  nativeName?: string;
+  shortLabel?: string;
+  flagIcon?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: LocaleSwitcherVariant;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    variant: "dropdown",
+  },
+);
+
+const emit = defineEmits<{
+  navigate: [];
+}>();
+
+const { locale, locales, t } = useI18n();
+const { switchPath } = useLocalizedRouteSwitch();
+
+type ConfiguredLocale = (typeof configuredLocales)[number];
+
+const configuredLocaleMap: ReadonlyMap<string, ConfiguredLocale> = new Map(
+  configuredLocales.map((entry) => [entry.code, entry]),
+);
+
+function normalizeLocale(entry: string | LocaleEntry) {
+  if (typeof entry === "string") {
+    const configured: LocaleEntry | undefined = configuredLocaleMap.get(entry);
+    return {
+      code: entry,
+      language: configured?.language ?? entry,
+      name: configured?.name ?? entry.toUpperCase(),
+      nativeName: configured?.nativeName ?? configured?.name ?? entry.toUpperCase(),
+      shortLabel: configured?.shortLabel ?? entry.toUpperCase(),
+      flagIcon: configured?.flagIcon,
+    };
+  }
+
+  const configured: LocaleEntry | undefined = configuredLocaleMap.get(entry.code);
+  return {
+    code: entry.code,
+    language: entry.language ?? configured?.language ?? entry.code,
+    name: entry.name ?? configured?.name ?? entry.code.toUpperCase(),
+    nativeName:
+      entry.nativeName ?? entry.name ?? configured?.nativeName ?? entry.code.toUpperCase(),
+    shortLabel: entry.shortLabel ?? configured?.shortLabel ?? entry.code.toUpperCase(),
+    flagIcon: entry.flagIcon ?? configured?.flagIcon,
+  };
+}
+
+const localeLinks = computed(() =>
+  locales.value.map((entry) => {
+    const normalized = normalizeLocale(entry as string | LocaleEntry);
+    return {
+      ...normalized,
+      to: switchPath(normalized.code) || "/",
+      current: locale.value === normalized.code,
+    };
+  }),
+);
+
+const currentLocale = computed(
+  () => localeLinks.value.find((entry) => entry.current) ?? localeLinks.value[0],
+);
+const currentMobileLocaleLabel = computed(() => {
+  const code = currentLocale.value?.code;
+  if (!code) return "";
+  return currentLocale.value?.name ?? code.toUpperCase();
+});
+
+function trackLocaleNavigation(_entry: { code: string; current: boolean; to: unknown }) {
+  emit("navigate");
+}
+</script>
+
+<template>
+  <div
+    v-if="localeLinks.length > 1 && variant === 'dropdown'"
+    :class="cn('items-center', props.class)"
+  >
+    <ClientOnly>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="h-9 gap-1.5 px-2.5" :aria-label="t('nav.language')">
+            <Icon
+              v-if="currentLocale?.flagIcon"
+              :name="currentLocale.flagIcon"
+              class="size-4 rounded-full"
+              aria-hidden="true"
+            />
+            <span class="text-xs font-semibold">{{ currentLocale?.shortLabel }}</span>
+            <Icon
+              name="lucide:chevron-down"
+              class="size-3.5 text-muted-foreground"
+              aria-hidden="true"
+            />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" class="w-44">
+          <DropdownMenuItem v-for="entry in localeLinks" :key="entry.code" as-child>
+            <NuxtLink
+              :to="entry.to"
+              :hreflang="entry.language"
+              :lang="entry.code"
+              :aria-label="entry.name"
+              :aria-current="entry.current ? 'page' : undefined"
+              class="flex w-full items-center gap-2"
+              @click="trackLocaleNavigation(entry)"
+            >
+              <Icon
+                v-if="entry.flagIcon"
+                :name="entry.flagIcon"
+                class="size-4 rounded-full"
+                aria-hidden="true"
+              />
+              <span class="flex-1">{{ entry.nativeName }}</span>
+              <span class="text-xs text-muted-foreground">{{ entry.shortLabel }}</span>
+              <Icon
+                v-if="entry.current"
+                name="lucide:check"
+                class="size-4 text-foreground"
+                aria-hidden="true"
+              />
+            </NuxtLink>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <template #fallback>
+        <span
+          class="inline-flex h-9 w-[4.25rem] rounded-md border border-border bg-background"
+          aria-hidden="true"
+        />
+      </template>
+    </ClientOnly>
+  </div>
+
+  <div
+    v-else-if="localeLinks.length > 1 && (variant === 'menu-row' || variant === 'menu-tile')"
+    :class="cn('items-center', props.class)"
+  >
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button
+          variant="ghost"
+          :class="
+            cn(
+              variant === 'menu-tile'
+                ? 'h-14 w-full justify-between rounded-none px-3.5 text-sm font-semibold hover:bg-muted/40'
+                : 'h-[4.25rem] w-full justify-between rounded-none px-5 text-base font-semibold hover:bg-transparent',
+            )
+          "
+          :aria-label="t('nav.language')"
+        >
+          <span
+            class="flex min-w-0 items-center"
+            :class="variant === 'menu-tile' ? 'gap-3' : 'gap-4'"
+          >
+            <span
+              v-if="variant === 'menu-tile' && currentLocale?.flagIcon"
+              class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/60"
+            >
+              <Icon :name="currentLocale.flagIcon" class="size-5 rounded-full" aria-hidden="true" />
+            </span>
+            <Icon
+              v-else-if="currentLocale?.flagIcon"
+              :name="currentLocale.flagIcon"
+              class="size-7 shrink-0 rounded-full"
+              aria-hidden="true"
+            />
+            <span class="truncate">
+              {{ variant === "menu-tile" ? currentMobileLocaleLabel : currentLocale?.shortLabel }}
+            </span>
+          </span>
+          <Icon
+            name="lucide:chevron-down"
+            class="text-muted-foreground"
+            :class="variant === 'menu-tile' ? 'size-4' : 'size-5'"
+            aria-hidden="true"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-44">
+        <DropdownMenuItem v-for="entry in localeLinks" :key="entry.code" as-child>
+          <NuxtLink
+            :to="entry.to"
+            :hreflang="entry.language"
+            :lang="entry.code"
+            :aria-label="entry.name"
+            :aria-current="entry.current ? 'page' : undefined"
+            class="flex w-full items-center gap-2"
+            @click="trackLocaleNavigation(entry)"
+          >
+            <Icon
+              v-if="entry.flagIcon"
+              :name="entry.flagIcon"
+              class="size-4 rounded-full"
+              aria-hidden="true"
+            />
+            <span class="flex-1">{{ entry.nativeName }}</span>
+            <span class="text-xs text-muted-foreground">{{ entry.shortLabel }}</span>
+            <Icon
+              v-if="entry.current"
+              name="lucide:check"
+              class="size-4 text-foreground"
+              aria-hidden="true"
+            />
+          </NuxtLink>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+
+  <div
+    v-else-if="localeLinks.length > 1"
+    :class="cn('items-center gap-1 rounded-md border border-border p-0.5', props.class)"
+    :aria-label="t('nav.language')"
+  >
+    <NuxtLink
+      v-for="entry in localeLinks"
+      :key="entry.code"
+      :to="entry.to"
+      :hreflang="entry.language"
+      :lang="entry.code"
+      :aria-label="entry.name"
+      :aria-current="entry.current ? 'page' : undefined"
+      class="inline-flex h-8 items-center gap-1.5 rounded px-2 text-xs font-medium transition-colors"
+      :class="
+        entry.current
+          ? 'bg-muted text-foreground'
+          : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+      "
+      @click="trackLocaleNavigation(entry)"
+    >
+      <Icon
+        v-if="entry.flagIcon"
+        :name="entry.flagIcon"
+        class="size-4 rounded-full"
+        aria-hidden="true"
+      />
+      <span>{{ entry.shortLabel }}</span>
+    </NuxtLink>
+  </div>
+</template>

package/app/components/site/SiteLogoMark.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
+
+const { site } = useSiteNavigation();
+</script>
+
+<template>
+  <span class="relative inline-flex h-7 shrink-0" aria-hidden="true">
+    <img :src="site.logo.light" alt="" class="h-7 w-auto dark:hidden" loading="eager" />
+    <img :src="site.logo.dark" alt="" class="hidden h-7 w-auto dark:block" loading="eager" />
+  </span>
+</template>

package/app/components/site/SiteSkipLink.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useI18n } from "#imports";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <a
+    href="#main-content"
+    class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-100 focus:rounded-md focus:border focus:border-border focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-md"
+  >
+    {{ t("nav.skip") }}
+  </a>
+</template>

package/app/components/ui/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/app/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionContent } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="accordion-content overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/app/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionItem, useForwardProps } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

package/app/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          name="lucide:chevron-down"
+          class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
+          aria-hidden="true"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>