Header

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Header } from "@dg/ui";
  import { page } from "$app/state";
  const links = [
    { label: "Home", href: "/" },
    { label: "Artworks", href: "/artworks" },
  ];
</script>

<Header app="Collection" identity="example.org" identityUrl="/" {links} path={page.url.pathname} />

Pass actions for compact controls that stay in the bar at every width, such as a button opening a search dialog:

<script>
  import { Header, IconButton } from "@dg/ui";
  import { page } from "$app/state";
  let { links, onsearch } = $props();
</script>

<Header {links} path={page.url.pathname}>
  {#snippet actions()}
    <IconButton label="Search" icon="search" aria-haspopup="dialog" onclick={onsearch} />
  {/snippet}
</Header>

• Native HTML attributes, DOM callbacks, class and style are forwarded to the header element.
• Forwarding uses native attribute types; unknown props are not supported. Pass class as a string. Header does not render a children snippet; pass controls through actions.
• The header keeps its framed side rails and bottom rule, while its top edge stays open.
• Activating any link, including a same-page #anchor, closes the collapsed menu.
• actions renders after the inline links and before the theme switch. Below --medium the links and the theme switch move into the menu, while the actions stay in the bar before the menu button. Keep them compact, such as an IconButton, so the identity keeps its room on narrow screens.
• The app name links to /. The identity becomes muted when an app name is present. The terminal cursor stops blinking under reduced motion.

Pass the current pathname so links expose aria-current. Page's lang translates the navigation name, the menu and close buttons and the theme switch. Below the --medium breakpoint the links move into a modal directory owned by Header; actions stay in the bar at every width, so give each an accessible name.