Nav

---
// src/components/ui/navigation/nav/Nav.astro — headless primitive (see ../../README.md).
// Static navigation list (<nav> + <ul>). Compose NavItem / NavLink. Active state is the caller's
// job via `aria-current="page"` on the link (route-driven, zero-JS — the platform models it).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"nav"> & { orientation?: "horizontal" | "vertical" };

const { orientation = "horizontal", class: className, ...rest } = Astro.props;
---

<nav data-slot="nav" {...rest}>
  <ul class={className} data-slot="nav-list" data-orientation={orientation}>
    <slot />
  </ul>
</nav>

---
// src/components/ui/navigation/nav/NavItem.astro — Nav compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
---

<li class={className} data-slot="nav-item" {...rest}>
  <slot />
</li>

---
// src/components/ui/navigation/nav/NavLink.astro — Nav compound part (see ../../README.md).
// Active state = `aria-current="page"` set by the caller — the platform already models it, so no
// "active" prop and no data attribute duplicating it. A theme styles hover on non-active links with
// `[data-slot="nav-link"]:not([aria-current="page"]):hover`, which is what the old
// `not-aria-[current=page]:hover:` utility compiled to.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a"> & {
  href: string;
  variant?: "underline" | "pills" | "segment";
};

const { variant = "underline", href, class: className, ...rest } = Astro.props;
---

<a href={href} class={className} data-slot="nav-link" data-variant={variant} {...rest}>
  <slot />
</a>

import Nav from "./Nav.astro";
import NavItem from "./NavItem.astro";
import NavLink from "./NavLink.astro";

export { Nav, NavItem, NavLink };
export default Nav;