@cl-light-ds/ui 0.1.0

package/src/components/navigation-menu/NavigationMenu.astro

@@ -0,0 +1,414 @@
+---
+/**
+ * @component NavigationMenu
+ * @title Navigation Menu
+ * @description A menu with dropdown content and optional viewport transitions.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5548-10862 
+ *
+ * @preview
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Analytics</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Real-time insights</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Automation</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Workflow builders</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Security</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Enterprise-grade</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Integrations</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Connect tools</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="solutions">
+ *       <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
+ *       <NavigationMenuContent align="center">
+ *         <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Startups</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Move fast</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Enterprise</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Scale securely</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Agencies</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Client delivery</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">E-commerce</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Sell online</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="resources">
+ *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+ *       <NavigationMenuContent align="center">
+ *         <div class="grid grid-cols-3 gap-2 w-[520px] p-2">
+ *           <NavigationMenuLink href="/docs">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Docs</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Get started</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Blog</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Latest updates</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Support</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Get help</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Events</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Upcoming webinars</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Guides</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Best practices</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Contact</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Talk to us</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="company">
+ *       <NavigationMenuTrigger>Company</NavigationMenuTrigger>
+ *       <NavigationMenuContent align="end">
+ *         <div class="w-[180px] p-2">
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">About</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Our story</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Careers</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Join the team</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuIndicator />
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   NavigationMenu,
+ *   NavigationMenuList,
+ *   NavigationMenuItem,
+ *   NavigationMenuTrigger,
+ *   NavigationMenuContent,
+ *   NavigationMenuLink,
+ * } from '@bejamas/ui/components/navigation-menu';
+ * ---
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Analytics</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Real-time insights</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Automation</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Workflow builders</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem value="resources">
+ *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
+ *       <NavigationMenuContent align="center">
+ *         <div class="grid grid-cols-2 gap-2 w-[380px] p-2">
+ *           <NavigationMenuLink href="/docs">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Docs</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Get started</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Support</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Get help</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuIndicator />
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ *
+ * @api
+ *
+ * ### NavigationMenu Props
+ *
+ * | Prop | Type | Default | Description |
+ * |------|------|---------|-------------|
+ * | `align` | `"start" \| "center" \| "end"` | `"start"` | Viewport alignment relative to the trigger row |
+ * | `viewport` | `boolean` | `true` | Enable animated viewport container for content |
+ * | `delayOpen` | `number` | `0` | Delay in ms before opening menu |
+ * | `delayClose` | `number` | `0` | Delay in ms before closing menu |
+ * | `openOnFocus` | `boolean` | `false` | Open menu on keyboard focus |
+ *
+ * ### NavigationMenuItem Props
+ *
+ * | Prop | Type | Default | Description |
+ * |------|------|---------|-------------|
+ * | `value` | `string` | — | Unique identifier for the item |
+ * | `align` | `"start" \| "center" \| "end"` | `"start"` | Content alignment relative to trigger |
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `navigation-menu:change` | `{ value: string \| null }` | Fired when active item changes |
+ *
+ * ### Programmatic Control
+ *
+ * ```js nocollapse
+ * // Open a specific item
+ * element.dispatchEvent(
+ *   new CustomEvent("navigation-menu:set", { detail: { value: "products" } })
+ * );
+ *
+ * // Close the menu
+ * element.dispatchEvent(
+ *   new CustomEvent("navigation-menu:set", { detail: { value: null } })
+ * );
+ * ```
+ *
+ * @examples
+ *
+ * ### With Icons
+ *
+ * Links with Lucide icons for visual enhancement.
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="features">
+ *       <NavigationMenuTrigger>Features</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="grid gap-2 w-[320px] p-2">
+ *           <NavigationMenuLink href="#">
+ *             <ChartBarIcon class="size-5 mt-1 text-muted-foreground" />
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Analytics</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Track your metrics</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <ZapIcon class="size-5 mt-1 text-muted-foreground" />
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Automation</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Streamline workflows</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <ShieldIcon class="size-5 mt-1 text-muted-foreground" />
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Security</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Enterprise-grade protection</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuIndicator />
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ *
+ * ### Featured Card
+ *
+ * Hero-style layout with a featured item alongside regular links.
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="getting-started">
+ *       <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="grid grid-cols-[1fr_200px] gap-2 w-[480px] p-2">
+ *           <div class="row-span-3">
+ *             <NavigationMenuLink href="#" class="flex h-full flex-col items-start rounded-lg bg-accent p-4 no-underline">
+ *               <div class="mb-2 text-base font-medium">Introduction</div>
+ *               <p class="text-sm font-medium text-muted-foreground">Learn the basics and get up to speed quickly with our comprehensive guides.</p>
+ *             </NavigationMenuLink>
+ *           </div>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Installation</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Step-by-step setup</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Configuration</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Customize settings</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *           <NavigationMenuLink href="#">
+ *             <div class="flex flex-col gap-1">
+ *               <div class="text-base font-medium">Examples</div>
+ *               <div class="line-clamp-2 font-medium text-muted-foreground">Code samples</div>
+ *             </div>
+ *           </NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuIndicator />
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ *
+ * ### With Simple Links
+ *
+ * Use `navigationMenuTriggerStyle()` to style regular links to match triggers.
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="w-[200px] p-2">
+ *           <NavigationMenuLink href="#">Product One</NavigationMenuLink>
+ *           <NavigationMenuLink href="#">Product Two</NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink href="#" class={navigationMenuTriggerStyle()}>
+ *         Pricing
+ *       </NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink href="/docs" class={navigationMenuTriggerStyle()}>
+ *         Docs
+ *       </NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuIndicator />
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ *
+ * ### Without Viewport
+ *
+ * Set `viewport={false}` to render content directly without the animated viewport container.
+ *
+ * <NavigationMenu viewport={false}>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="menu">
+ *       <NavigationMenuTrigger>Menu</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div class="w-[200px] p-2 rounded-md border bg-popover shadow-md">
+ *           <NavigationMenuLink href="#">Option One</NavigationMenuLink>
+ *           <NavigationMenuLink href="#">Option Two</NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ */
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import NavigationMenuPositioner from "./NavigationMenuPositioner.astro";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  viewport?: boolean;
+  delayOpen?: number;
+  delayClose?: number;
+  openOnFocus?: boolean;
+}
+
+const {
+  class: className = "",
+  align = "start",
+  viewport = true,
+  delayOpen = 0,
+  delayClose = 0,
+  openOnFocus,
+  ...rest
+} = Astro.props as Props;
+---
+
+<nav
+  {...rest}
+  data-slot="navigation-menu"
+  data-viewport={viewport}
+  data-delay-open={delayOpen}
+  data-delay-close={delayClose}
+  data-open-on-focus={openOnFocus}
+  class={cn(
+    "max-w-max group/navigation-menu relative flex flex-1 items-center justify-center",
+    className,
+  )}
+>
+  <slot />
+  {viewport && <NavigationMenuPositioner align={align} />}
+</nav>
+
+<script>
+  import { createNavigationMenu } from "@data-slot/navigation-menu";
+
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="navigation-menu"]')
+    .forEach((el) => {
+      createNavigationMenu(el);
+    });
+</script>

package/src/components/navigation-menu/NavigationMenuContent.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  align,
+  alignOffset,
+  side,
+  sideOffset = 6,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-content"
+  data-align={align}
+  data-align-offset={alignOffset}
+  data-side={side}
+  data-side-offset={sideOffset}
+  hidden
+  class={cn(
+    "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:border-border p-2 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-200 ease data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/navigation-menu/NavigationMenuIndicator.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-indicator"
+  class={cn(
+    "rounded-md data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in absolute left-0 top-0 z-0 pointer-events-none opacity-0 transition-[translate,width,height,opacity] duration-150 ease data-instant:transition-none data-[state=visible]:opacity-100",
+    "translate-x-(--indicator-left,0px) translate-y-(--indicator-top,0px)",
+    "w-(--indicator-width,0) h-(--indicator-height,0)",
+    className,
+  )}
+>
+  <div class="bg-muted/60 ring-border/40 ring-1 absolute inset-0 rounded-[inherit]"></div>
+  <div class="hidden bg-border rounded-tl-sm shadow-md absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-[40%] rotate-45"></div>
+</div>

package/src/components/navigation-menu/NavigationMenuItem.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+  value?: string;
+  align?: "start" | "center" | "end";
+}
+
+const { class: className = "", value, align, ...rest } = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  data-slot="navigation-menu-item"
+  data-value={value}
+  data-align={align}
+  class={cn("relative z-10", className)}
+>
+  <slot />
+</li>

package/src/components/navigation-menu/NavigationMenuLink.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"a"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<a
+  {...rest}
+  data-slot="navigation-menu-link"
+  class={cn("data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-start gap-4 rounded-lg p-3 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className)}
+>
+  <slot />
+</a>

package/src/components/navigation-menu/NavigationMenuList.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"ul"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<ul
+  {...rest}
+  data-slot="navigation-menu-list"
+  class={cn(
+    "gap-0 group flex flex-1 list-none items-center justify-center relative",
+    className,
+  )}
+>
+  <slot />
+</ul>

package/src/components/navigation-menu/NavigationMenuPositioner.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import NavigationMenuViewport from "./NavigationMenuViewport.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom";
+  sideOffset?: number;
+}
+
+const {
+  class: className = "",
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="navigation-menu-portal">
+  <div
+    {...rest}
+    data-slot="navigation-menu-positioner"
+    data-side={side}
+    data-side-offset={sideOffset}
+    data-align={align}
+    data-align-offset={alignOffset}
+    class={cn(
+      "transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) duration-[0.35s] data-instant:transition-none",
+      className,
+    )}
+  >
+    <div
+      data-slot="navigation-menu-popup"
+      class="bg-popover text-popover-foreground border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s]"
+    >
+      <NavigationMenuViewport />
+    </div>
+  </div>
+</div>

package/src/components/navigation-menu/NavigationMenuTrigger.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+}
+
+export const navigationMenuTriggerStyle = cva(
+  "bg-background text-foreground hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg gap-1.5 px-4 py-2.5 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-11 w-max items-center justify-center outline-none disabled:pointer-events-none",
+);
+
+const {
+  class: className = "",
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  data-slot="navigation-menu-trigger"
+  type={type}
+  class={cn(navigationMenuTriggerStyle(), "group", className)}
+>
+  <slot />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="relative top-px size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+    aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</button>

package/src/components/navigation-menu/NavigationMenuViewport.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="navigation-menu-viewport"
+  class={cn(
+    "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 border border-border rounded-lg shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)] duration-100 relative size-full overflow-hidden",
+    className,
+  )}
+></div>

package/src/components/navigation-menu/index.ts

@@ -0,0 +1,10 @@
+export { default as NavigationMenu } from "./NavigationMenu.astro";
+export { default as NavigationMenuList } from "./NavigationMenuList.astro";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
+export { default as NavigationMenuPositioner } from "./NavigationMenuPositioner.astro";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.astro";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.astro";
+export { navigationMenuTriggerStyle } from "./NavigationMenuTrigger.astro";

package/src/components/popover/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `Popover` component will be documented in this file.
+
+## Unreleased