@dsn-starter-kit/components-react 3.0.0 → 3.1.0

package/dist/PageHeader/PageHeader.d.mts

@@ -0,0 +1,192 @@
+import React from "react";
+//#region src/PageHeader/PageHeader.d.ts
+type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';
+type PageHeaderLayout = 'default' | 'compact';
+type PageHeaderColorScheme = 'default' | 'inverse';
+interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+  /**
+   * Logo-inhoud — `<svg>`, `<img>`, of een `<a>` die een logo omhult.
+   * De CSS past automatisch `max-block-size` toe op de directe child.
+   */
+  logoSlot: React.ReactNode;
+  /**
+   * Scrollgedrag van de header.
+   * - `none` (standaard): header scrollt mee met de pagina
+   * - `sticky`: header blijft bovenaan de viewport vastgeplakt
+   * - `auto-hide`: sticky + verbergt bij scroll-down, toont bij scroll-up
+   * @default 'none'
+   */
+  sticky?: PageHeaderSticky;
+  /**
+   * Lay-out van de header op large viewport (≥ 64em).
+   * - `default`: twee horizontale banden — Masthead (logo + servicemenu + zoekveld)
+   *   en Navigatiebalk (primaire navigatie op accent-1 achtergrond)
+   * - `compact`: één enkele rij — logo (inline-start), primaire navigatie (gecentreerd),
+   *   servicemenu + zoekknop (inline-end). Geeft `primaryNavigationLarge` voorrang
+   *   boven `primaryNavigation` (en idem voor secondary) zodat de Drawer altijd
+   *   de verticale variant ontvangt.
+   * @default 'default'
+   */
+  layout?: PageHeaderLayout;
+  /**
+   * Kleurschema van de header.
+   * - `default`: neutrale achtergrond met accent-1 navbar
+   * - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk
+   *   voor prominente branding. Het masthead blijft altijd neutraal.
+   *   Logo-kleuren passen zich automatisch aan via CSS context overrides.
+   * @default 'default'
+   */
+  colorScheme?: PageHeaderColorScheme;
+  /**
+   * Initiële open-staat van het zoekpaneel (small viewport).
+   * Handig voor Storybook en tests — het paneel kan daarna nog steeds
+   * worden geopend/gesloten via de knop.
+   * @default false
+   */
+  initialSearchOpen?: boolean;
+  /**
+   * Primaire navigatie-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>` met
+   * `<MenuLink>`-items inclusief uitklapmogelijkheden voor sub-niveaus.
+   */
+  primaryNavigation?: React.ReactNode;
+  /**
+   * Primaire navigatie-inhoud in de Navigatiebalk (large viewport) — doorgaans een horizontale
+   * `<Menu>` met alleen Level 1 `<MenuLink>`-items. Als niet meegegeven valt de component
+   * terug op `primaryNavigation`.
+   */
+  primaryNavigationLarge?: React.ReactNode;
+  /**
+   * Servicemenu-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>`.
+   */
+  secondaryNavigation?: React.ReactNode;
+  /**
+   * Servicemenu-inhoud in de Masthead (large viewport) — doorgaans een horizontale `<Menu>`.
+   * Als niet meegegeven valt de component terug op `secondaryNavigation`.
+   */
+  secondaryNavigationLarge?: React.ReactNode;
+  /**
+   * Inline zoekveld voor de Masthead op large viewport (SearchInput + zoekknop).
+   * Optioneel — toont geen zoekveld als weggelaten.
+   */
+  searchSlot?: React.ReactNode;
+  /**
+   * Visuele badge-indicator bij de menuknop (small viewport), doorgaans een `<DotBadge>`.
+   * Gebruik dit om ongelezen meldingen te signaleren. De badge is altijd `aria-hidden` —
+   * geef de toegankelijke tekst mee via `menuButtonBadgeLabel`.
+   */
+  menuButtonBadge?: React.ReactNode;
+  /**
+   * Toegankelijke tekst die wordt toegevoegd aan het label van de menuknop als er een badge
+   * aanwezig is, bijvoorbeeld `"2 nieuwe berichten"`. Wordt visueel verborgen getoond zodat
+   * screenreadergebruikers de melding horen: "Menu, 2 nieuwe berichten".
+   * Vereist als `menuButtonBadge` is meegegeven.
+   */
+  menuButtonBadgeLabel?: string;
+  /**
+   * Callback wanneer de navigatielade opent.
+   */
+  onMenuOpen?: () => void;
+  /**
+   * Callback wanneer de navigatielade sluit.
+   */
+  onMenuClose?: () => void;
+  /**
+   * Callback wanneer het zoekpaneel opent.
+   */
+  onSearchOpen?: () => void;
+  /**
+   * Callback wanneer het zoekpaneel sluit.
+   */
+  onSearchClose?: () => void;
+  /**
+   * Label van de menuknop en de Drawer-heading.
+   * @default 'Menu'
+   */
+  menuButtonLabel?: string;
+  /**
+   * Label van de zoekknop wanneer het zoekpaneel gesloten is.
+   * @default 'Zoeken'
+   */
+  searchButtonLabel?: string;
+  /**
+   * Label van de zoekknop wanneer het zoekpaneel open is.
+   * @default 'Sluiten'
+   */
+  closeButtonLabel?: string;
+  /**
+   * Placeholder van het zoekveld in het zoekpaneel (small viewport en compact layout).
+   * @default 'Zoeken…'
+   */
+  searchInputPlaceholder?: string;
+  /**
+   * `aria-label` van het zoekveld in het zoekpaneel.
+   * @default 'Zoekopdracht'
+   */
+  searchInputAriaLabel?: string;
+  /**
+   * Label van de zoek-submitknop in het zoekpaneel.
+   * @default 'Zoeken'
+   */
+  searchSubmitLabel?: string;
+  /**
+   * `aria-label` van de primaire navigatie-`<nav>` (large viewport) en
+   * visueel verborgen heading in de Drawer.
+   * @default 'Hoofd-navigatie'
+   */
+  primaryNavAriaLabel?: string;
+  /**
+   * `aria-label` van het servicemenu-`<nav>` (large viewport) en
+   * visueel verborgen heading in de Drawer.
+   * @default 'Service-navigatie'
+   */
+  secondaryNavAriaLabel?: string;
+  /**
+   * Verbergt de menuknop in de small viewport layout.
+   * Gebruik dit wanneer er geen navigatie aanwezig is (bijv. formulierpagina's).
+   * @default false
+   */
+  hideMenuButton?: boolean;
+  /**
+   * Verbergt de zoekknop in zowel de small viewport als compact layout.
+   * Gebruik dit wanneer zoeken niet relevant is (bijv. formulierpagina's).
+   * @default false
+   */
+  hideSearchButton?: boolean;
+  className?: string;
+}
+/**
+ * PageHeader component
+ * Primaire navigatieheader voor een pagina. Mobile-first implementatie.
+ *
+ * Op mobile toont de header drie elementen:
+ * - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie
+ * - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)
+ * - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   logoSlot={
+ *     <a href="/">
+ *       <Logo aria-hidden={true} />
+ *       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ *     </a>
+ *   }
+ *   primaryNavigation={
+ *     <Menu orientation="vertical">
+ *       <MenuLink href="/home" level={1}>Home</MenuLink>
+ *       <MenuLink href="/over" level={1}>Over ons</MenuLink>
+ *     </Menu>
+ *   }
+ *   secondaryNavigation={
+ *     <Menu orientation="vertical">
+ *       <MenuLink href="/contact" level={1}>Contact</MenuLink>
+ *     </Menu>
+ *   }
+ * />
+ * ```
+ */
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky };
+//# sourceMappingURL=PageHeader.d.mts.map

package/dist/PageHeader/PageHeader.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.mts","names":[],"sources":["../../src/PageHeader/PageHeader.tsx"],"mappings":";;KASY;KACA;KACA;UAEK,wBAAwB,KACvC,MAAM,eAAe;;;;;EAOrB,UAAU,MAAM;;;;;;;;EAShB,SAAS;;;;;;;;;;;EAYT,SAAS;;;;;;;;;EAUT,cAAc;;;;;;;EAQd;;;;;EAMA,oBAAoB,MAAM;;;;;;EAO1B,yBAAyB,MAAM;;;;EAK/B,sBAAsB,MAAM;;;;;EAM5B,2BAA2B,MAAM;;;;;EAMjC,aAAa,MAAM;;;;;;EAOnB,kBAAkB,MAAM;;;;;;;EAQxB;;;;EAKA;;;;EAKA;;;;EAKA;;;;EAKA;;;;;EAQA;;;;;EAMA;;;;;EAMA;;;;;EAMA;;;;;EAMA;;;;;EAMA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;EAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmCW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/PageHeader/PageHeader2.mjs

@@ -0,0 +1,275 @@
+import { Stack } from "../Stack/Stack2.mjs";
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+import { SearchInput } from "../SearchInput/SearchInput2.mjs";
+import { Drawer, DrawerBody, DrawerHeader, DrawerHeading } from "../Drawer/Drawer2.mjs";
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/PageHeader/PageHeader.tsx
+/**
+* PageHeader component
+* Primaire navigatieheader voor een pagina. Mobile-first implementatie.
+*
+* Op mobile toont de header drie elementen:
+* - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie
+* - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)
+* - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header
+*
+* @example
+* ```tsx
+* <PageHeader
+*   logoSlot={
+*     <a href="/">
+*       <Logo aria-hidden={true} />
+*       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+*     </a>
+*   }
+*   primaryNavigation={
+*     <Menu orientation="vertical">
+*       <MenuLink href="/home" level={1}>Home</MenuLink>
+*       <MenuLink href="/over" level={1}>Over ons</MenuLink>
+*     </Menu>
+*   }
+*   secondaryNavigation={
+*     <Menu orientation="vertical">
+*       <MenuLink href="/contact" level={1}>Contact</MenuLink>
+*     </Menu>
+*   }
+* />
+* ```
+*/
+const PageHeader = React.forwardRef(({ className, logoSlot, sticky = "none", layout = "default", colorScheme = "default", initialSearchOpen = false, primaryNavigation, primaryNavigationLarge, secondaryNavigation, secondaryNavigationLarge, searchSlot, menuButtonBadge, menuButtonBadgeLabel, onMenuOpen, onMenuClose, onSearchOpen, onSearchClose, menuButtonLabel = "Menu", searchButtonLabel = "Zoeken", closeButtonLabel = "Sluiten", searchInputPlaceholder = "Zoeken…", searchInputAriaLabel = "Zoekopdracht", searchSubmitLabel = "Zoeken", primaryNavAriaLabel = "Hoofd-navigatie", secondaryNavAriaLabel = "Service-navigatie", hideMenuButton = false, hideSearchButton = false, ...props }, ref) => {
+	const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+	const [isSearchOpen, setIsSearchOpen] = React.useState(initialSearchOpen);
+	const headerRef = React.useRef(null);
+	const combinedRef = ref ?? headerRef;
+	const menuButtonRef = React.useRef(null);
+	const searchButtonRef = React.useRef(null);
+	const searchInputRef = React.useRef(null);
+	const compactSearchButtonRef = React.useRef(null);
+	const compactSearchInputRef = React.useRef(null);
+	const searchPanelId = React.useId();
+	const compactSearchPanelId = React.useId();
+	React.useEffect(() => {
+		if (sticky !== "auto-hide") return;
+		let lastScrollY = window.scrollY;
+		const handleScroll = () => {
+			const currentScrollY = window.scrollY;
+			const isScrollingDown = currentScrollY > lastScrollY && currentScrollY > 100;
+			combinedRef.current?.setAttribute("data-hidden", String(isScrollingDown));
+			lastScrollY = currentScrollY;
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [sticky, combinedRef]);
+	React.useEffect(() => {
+		if (sticky === "none") return;
+		const updateScrolled = () => {
+			combinedRef.current?.setAttribute("data-scrolled", String(window.scrollY > 0));
+		};
+		updateScrolled();
+		window.addEventListener("scroll", updateScrolled, { passive: true });
+		return () => window.removeEventListener("scroll", updateScrolled);
+	}, [sticky, combinedRef]);
+	React.useEffect(() => {
+		if (isSearchOpen) {
+			searchInputRef.current?.focus();
+			compactSearchInputRef.current?.focus();
+		}
+	}, [isSearchOpen]);
+	const handleMenuOpen = () => {
+		setIsMenuOpen(true);
+		onMenuOpen?.();
+	};
+	const handleMenuClose = () => {
+		setIsMenuOpen(false);
+		onMenuClose?.();
+		menuButtonRef.current?.focus();
+	};
+	const handleSearchToggle = () => {
+		const opening = !isSearchOpen;
+		setIsSearchOpen(opening);
+		if (opening) onSearchOpen?.();
+		else {
+			onSearchClose?.();
+			searchButtonRef.current?.focus();
+			compactSearchButtonRef.current?.focus();
+		}
+	};
+	const classes = classNames("dsn-page-header", sticky === "sticky" && "dsn-page-header--sticky", sticky === "auto-hide" && "dsn-page-header--auto-hide", layout === "compact" && "dsn-page-header--compact", colorScheme === "inverse" && "dsn-page-header--inverse", className);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
+		ref: combinedRef,
+		className: classes,
+		...sticky === "auto-hide" ? { "data-hidden": "false" } : {},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-page-header__small-layout",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "dsn-page-header__inner",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__start",
+							children: !hideMenuButton && /* @__PURE__ */ jsxs(Button, {
+								ref: menuButtonRef,
+								variant: "subtle",
+								onClick: handleMenuOpen,
+								iconStart: /* @__PURE__ */ jsx(Icon, {
+									name: "menu",
+									"aria-hidden": true
+								}),
+								children: [
+									menuButtonLabel,
+									menuButtonBadgeLabel && /* @__PURE__ */ jsxs("span", {
+										className: "dsn-visually-hidden",
+										children: [", ", menuButtonBadgeLabel]
+									}),
+									menuButtonBadge
+								]
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__logo",
+							children: logoSlot
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__end",
+							children: !hideSearchButton && /* @__PURE__ */ jsx(Button, {
+								ref: searchButtonRef,
+								variant: "subtle",
+								"aria-expanded": isSearchOpen,
+								"aria-controls": searchPanelId,
+								onClick: handleSearchToggle,
+								iconStart: /* @__PURE__ */ jsx(Icon, {
+									name: isSearchOpen ? "x" : "search",
+									"aria-hidden": true
+								}),
+								children: isSearchOpen ? closeButtonLabel : searchButtonLabel
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					id: searchPanelId,
+					className: "dsn-page-header__search-panel",
+					hidden: !isSearchOpen,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "dsn-page-header__search-inner",
+						children: [/* @__PURE__ */ jsx(SearchInput, {
+							ref: searchInputRef,
+							placeholder: searchInputPlaceholder,
+							"aria-label": searchInputAriaLabel
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "strong",
+							children: searchSubmitLabel
+						})]
+					})
+				})]
+			}),
+			layout === "default" && /* @__PURE__ */ jsxs("div", {
+				className: "dsn-page-header__large-layout",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "dsn-page-header__masthead",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "dsn-page-header__masthead-inner",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__logo",
+							children: logoSlot
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "dsn-page-header__secondary-nav",
+							children: [(secondaryNavigationLarge ?? secondaryNavigation) && /* @__PURE__ */ jsx("nav", {
+								"aria-label": secondaryNavAriaLabel,
+								children: secondaryNavigationLarge ?? secondaryNavigation
+							}), searchSlot && /* @__PURE__ */ jsx("div", {
+								className: "dsn-page-header__searchbox",
+								children: searchSlot
+							})]
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "dsn-page-header__navbar",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "dsn-page-header__navbar-inner",
+						children: (primaryNavigationLarge ?? primaryNavigation) && /* @__PURE__ */ jsx("nav", {
+							"aria-label": primaryNavAriaLabel,
+							children: primaryNavigationLarge ?? primaryNavigation
+						})
+					})
+				})]
+			}),
+			layout === "compact" && /* @__PURE__ */ jsxs("div", {
+				className: "dsn-page-header__compact-layout",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "dsn-page-header__compact-inner",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__logo",
+							children: logoSlot
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "dsn-page-header__compact-primary-nav",
+							children: (primaryNavigationLarge ?? primaryNavigation) && /* @__PURE__ */ jsx("nav", {
+								"aria-label": primaryNavAriaLabel,
+								children: primaryNavigationLarge ?? primaryNavigation
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "dsn-page-header__compact-secondary",
+							children: [(secondaryNavigationLarge ?? secondaryNavigation) && /* @__PURE__ */ jsx("nav", {
+								"aria-label": secondaryNavAriaLabel,
+								children: secondaryNavigationLarge ?? secondaryNavigation
+							}), !hideSearchButton && /* @__PURE__ */ jsx(Button, {
+								ref: compactSearchButtonRef,
+								variant: "subtle",
+								iconOnly: true,
+								"aria-expanded": isSearchOpen,
+								"aria-controls": compactSearchPanelId,
+								onClick: handleSearchToggle,
+								iconStart: /* @__PURE__ */ jsx(Icon, {
+									name: isSearchOpen ? "x" : "search",
+									"aria-hidden": true
+								}),
+								children: isSearchOpen ? closeButtonLabel : searchButtonLabel
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					id: compactSearchPanelId,
+					className: "dsn-page-header__search-panel",
+					hidden: !isSearchOpen,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "dsn-page-header__search-inner",
+						children: [/* @__PURE__ */ jsx(SearchInput, {
+							ref: compactSearchInputRef,
+							placeholder: searchInputPlaceholder,
+							"aria-label": searchInputAriaLabel
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "strong",
+							children: searchSubmitLabel
+						})]
+					})
+				})]
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Drawer, {
+		isOpen: isMenuOpen,
+		onClose: handleMenuClose,
+		side: "left",
+		children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerHeading, { children: menuButtonLabel }) }), /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs(Stack, {
+			space: "5xl",
+			children: [primaryNavigation && /* @__PURE__ */ jsx("nav", {
+				"aria-label": primaryNavAriaLabel,
+				children: primaryNavigation
+			}), secondaryNavigation && /* @__PURE__ */ jsx("nav", {
+				"aria-label": secondaryNavAriaLabel,
+				children: secondaryNavigation
+			})]
+		}) })]
+	})] });
+});
+PageHeader.displayName = "PageHeader";
+//#endregion
+export { PageHeader };
+
+//# sourceMappingURL=PageHeader2.mjs.map

package/dist/PageHeader/PageHeader2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader2.mjs","names":[],"sources":["../../src/PageHeader/PageHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { SearchInput } from '../SearchInput';\nimport { Drawer, DrawerBody, DrawerHeader, DrawerHeading } from '../Drawer';\nimport { Stack } from '../Stack';\nimport './PageHeader.css';\n\nexport type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';\nexport type PageHeaderLayout = 'default' | 'compact';\nexport type PageHeaderColorScheme = 'default' | 'inverse';\n\nexport interface PageHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'children'\n> {\n  /**\n   * Logo-inhoud — `<svg>`, `<img>`, of een `<a>` die een logo omhult.\n   * De CSS past automatisch `max-block-size` toe op de directe child.\n   */\n  logoSlot: React.ReactNode;\n\n  /**\n   * Scrollgedrag van de header.\n   * - `none` (standaard): header scrollt mee met de pagina\n   * - `sticky`: header blijft bovenaan de viewport vastgeplakt\n   * - `auto-hide`: sticky + verbergt bij scroll-down, toont bij scroll-up\n   * @default 'none'\n   */\n  sticky?: PageHeaderSticky;\n\n  /**\n   * Lay-out van de header op large viewport (≥ 64em).\n   * - `default`: twee horizontale banden — Masthead (logo + servicemenu + zoekveld)\n   *   en Navigatiebalk (primaire navigatie op accent-1 achtergrond)\n   * - `compact`: één enkele rij — logo (inline-start), primaire navigatie (gecentreerd),\n   *   servicemenu + zoekknop (inline-end). Geeft `primaryNavigationLarge` voorrang\n   *   boven `primaryNavigation` (en idem voor secondary) zodat de Drawer altijd\n   *   de verticale variant ontvangt.\n   * @default 'default'\n   */\n  layout?: PageHeaderLayout;\n\n  /**\n   * Kleurschema van de header.\n   * - `default`: neutrale achtergrond met accent-1 navbar\n   * - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk\n   *   voor prominente branding. Het masthead blijft altijd neutraal.\n   *   Logo-kleuren passen zich automatisch aan via CSS context overrides.\n   * @default 'default'\n   */\n  colorScheme?: PageHeaderColorScheme;\n\n  /**\n   * Initiële open-staat van het zoekpaneel (small viewport).\n   * Handig voor Storybook en tests — het paneel kan daarna nog steeds\n   * worden geopend/gesloten via de knop.\n   * @default false\n   */\n  initialSearchOpen?: boolean;\n\n  /**\n   * Primaire navigatie-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>` met\n   * `<MenuLink>`-items inclusief uitklapmogelijkheden voor sub-niveaus.\n   */\n  primaryNavigation?: React.ReactNode;\n\n  /**\n   * Primaire navigatie-inhoud in de Navigatiebalk (large viewport) — doorgaans een horizontale\n   * `<Menu>` met alleen Level 1 `<MenuLink>`-items. Als niet meegegeven valt de component\n   * terug op `primaryNavigation`.\n   */\n  primaryNavigationLarge?: React.ReactNode;\n\n  /**\n   * Servicemenu-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>`.\n   */\n  secondaryNavigation?: React.ReactNode;\n\n  /**\n   * Servicemenu-inhoud in de Masthead (large viewport) — doorgaans een horizontale `<Menu>`.\n   * Als niet meegegeven valt de component terug op `secondaryNavigation`.\n   */\n  secondaryNavigationLarge?: React.ReactNode;\n\n  /**\n   * Inline zoekveld voor de Masthead op large viewport (SearchInput + zoekknop).\n   * Optioneel — toont geen zoekveld als weggelaten.\n   */\n  searchSlot?: React.ReactNode;\n\n  /**\n   * Visuele badge-indicator bij de menuknop (small viewport), doorgaans een `<DotBadge>`.\n   * Gebruik dit om ongelezen meldingen te signaleren. De badge is altijd `aria-hidden` —\n   * geef de toegankelijke tekst mee via `menuButtonBadgeLabel`.\n   */\n  menuButtonBadge?: React.ReactNode;\n\n  /**\n   * Toegankelijke tekst die wordt toegevoegd aan het label van de menuknop als er een badge\n   * aanwezig is, bijvoorbeeld `\"2 nieuwe berichten\"`. Wordt visueel verborgen getoond zodat\n   * screenreadergebruikers de melding horen: \"Menu, 2 nieuwe berichten\".\n   * Vereist als `menuButtonBadge` is meegegeven.\n   */\n  menuButtonBadgeLabel?: string;\n\n  /**\n   * Callback wanneer de navigatielade opent.\n   */\n  onMenuOpen?: () => void;\n\n  /**\n   * Callback wanneer de navigatielade sluit.\n   */\n  onMenuClose?: () => void;\n\n  /**\n   * Callback wanneer het zoekpaneel opent.\n   */\n  onSearchOpen?: () => void;\n\n  /**\n   * Callback wanneer het zoekpaneel sluit.\n   */\n  onSearchClose?: () => void;\n\n  // ── i18n labels ────────────────────────────────────────────────────────────\n\n  /**\n   * Label van de menuknop en de Drawer-heading.\n   * @default 'Menu'\n   */\n  menuButtonLabel?: string;\n\n  /**\n   * Label van de zoekknop wanneer het zoekpaneel gesloten is.\n   * @default 'Zoeken'\n   */\n  searchButtonLabel?: string;\n\n  /**\n   * Label van de zoekknop wanneer het zoekpaneel open is.\n   * @default 'Sluiten'\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * Placeholder van het zoekveld in het zoekpaneel (small viewport en compact layout).\n   * @default 'Zoeken…'\n   */\n  searchInputPlaceholder?: string;\n\n  /**\n   * `aria-label` van het zoekveld in het zoekpaneel.\n   * @default 'Zoekopdracht'\n   */\n  searchInputAriaLabel?: string;\n\n  /**\n   * Label van de zoek-submitknop in het zoekpaneel.\n   * @default 'Zoeken'\n   */\n  searchSubmitLabel?: string;\n\n  /**\n   * `aria-label` van de primaire navigatie-`<nav>` (large viewport) en\n   * visueel verborgen heading in de Drawer.\n   * @default 'Hoofd-navigatie'\n   */\n  primaryNavAriaLabel?: string;\n\n  /**\n   * `aria-label` van het servicemenu-`<nav>` (large viewport) en\n   * visueel verborgen heading in de Drawer.\n   * @default 'Service-navigatie'\n   */\n  secondaryNavAriaLabel?: string;\n\n  /**\n   * Verbergt de menuknop in de small viewport layout.\n   * Gebruik dit wanneer er geen navigatie aanwezig is (bijv. formulierpagina's).\n   * @default false\n   */\n  hideMenuButton?: boolean;\n\n  /**\n   * Verbergt de zoekknop in zowel de small viewport als compact layout.\n   * Gebruik dit wanneer zoeken niet relevant is (bijv. formulierpagina's).\n   * @default false\n   */\n  hideSearchButton?: boolean;\n\n  className?: string;\n}\n\n/**\n * PageHeader component\n * Primaire navigatieheader voor een pagina. Mobile-first implementatie.\n *\n * Op mobile toont de header drie elementen:\n * - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie\n * - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)\n * - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header\n *\n * @example\n * ```tsx\n * <PageHeader\n *   logoSlot={\n *     <a href=\"/\">\n *       <Logo aria-hidden={true} />\n *       <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n *     </a>\n *   }\n *   primaryNavigation={\n *     <Menu orientation=\"vertical\">\n *       <MenuLink href=\"/home\" level={1}>Home</MenuLink>\n *       <MenuLink href=\"/over\" level={1}>Over ons</MenuLink>\n *     </Menu>\n *   }\n *   secondaryNavigation={\n *     <Menu orientation=\"vertical\">\n *       <MenuLink href=\"/contact\" level={1}>Contact</MenuLink>\n *     </Menu>\n *   }\n * />\n * ```\n */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(\n  (\n    {\n      className,\n      logoSlot,\n      sticky = 'none',\n      layout = 'default',\n      colorScheme = 'default',\n      initialSearchOpen = false,\n      primaryNavigation,\n      primaryNavigationLarge,\n      secondaryNavigation,\n      secondaryNavigationLarge,\n      searchSlot,\n      menuButtonBadge,\n      menuButtonBadgeLabel,\n      onMenuOpen,\n      onMenuClose,\n      onSearchOpen,\n      onSearchClose,\n      menuButtonLabel = 'Menu',\n      searchButtonLabel = 'Zoeken',\n      closeButtonLabel = 'Sluiten',\n      searchInputPlaceholder = 'Zoeken…',\n      searchInputAriaLabel = 'Zoekopdracht',\n      searchSubmitLabel = 'Zoeken',\n      primaryNavAriaLabel = 'Hoofd-navigatie',\n      secondaryNavAriaLabel = 'Service-navigatie',\n      hideMenuButton = false,\n      hideSearchButton = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n    const [isSearchOpen, setIsSearchOpen] = React.useState(initialSearchOpen);\n\n    const headerRef = React.useRef<HTMLElement>(null);\n    const combinedRef = (ref as React.RefObject<HTMLElement>) ?? headerRef;\n\n    const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n    const searchButtonRef = React.useRef<HTMLButtonElement>(null);\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n    const compactSearchButtonRef = React.useRef<HTMLButtonElement>(null);\n    const compactSearchInputRef = React.useRef<HTMLInputElement>(null);\n\n    const searchPanelId = React.useId();\n    const compactSearchPanelId = React.useId();\n\n    // Auto-hide: detecteer scrollrichting en toggle data-hidden attribuut\n    React.useEffect(() => {\n      if (sticky !== 'auto-hide') return;\n\n      let lastScrollY = window.scrollY;\n\n      const handleScroll = () => {\n        const currentScrollY = window.scrollY;\n        const isScrollingDown =\n          currentScrollY > lastScrollY && currentScrollY > 100;\n        combinedRef.current?.setAttribute(\n          'data-hidden',\n          String(isScrollingDown)\n        );\n        lastScrollY = currentScrollY;\n      };\n\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => window.removeEventListener('scroll', handleScroll);\n    }, [sticky, combinedRef]);\n\n    // Drop-shadow: zet data-scrolled op \"true\" zodra de pagina gescrolled is.\n    // Werkt voor zowel sticky als auto-hide — ongeacht scrollrichting.\n    React.useEffect(() => {\n      if (sticky === 'none') return;\n\n      const updateScrolled = () => {\n        combinedRef.current?.setAttribute(\n          'data-scrolled',\n          String(window.scrollY > 0)\n        );\n      };\n\n      // Direct bij mount instellen (pagina kan al gescrolled zijn)\n      updateScrolled();\n\n      window.addEventListener('scroll', updateScrolled, { passive: true });\n      return () => window.removeEventListener('scroll', updateScrolled);\n    }, [sticky, combinedRef]);\n\n    // Focus management: bij openen zoekpaneel → focus naar input (klein of compact)\n    React.useEffect(() => {\n      if (isSearchOpen) {\n        searchInputRef.current?.focus();\n        compactSearchInputRef.current?.focus();\n      }\n    }, [isSearchOpen]);\n\n    const handleMenuOpen = () => {\n      setIsMenuOpen(true);\n      onMenuOpen?.();\n    };\n\n    const handleMenuClose = () => {\n      setIsMenuOpen(false);\n      onMenuClose?.();\n      // Focus terug naar menuknop\n      menuButtonRef.current?.focus();\n    };\n\n    const handleSearchToggle = () => {\n      const opening = !isSearchOpen;\n      setIsSearchOpen(opening);\n      if (opening) {\n        onSearchOpen?.();\n      } else {\n        onSearchClose?.();\n        // Focus terug naar zoek/sluit-knop — afhankelijk van actieve layout\n        searchButtonRef.current?.focus();\n        compactSearchButtonRef.current?.focus();\n      }\n    };\n\n    const classes = classNames(\n      'dsn-page-header',\n      sticky === 'sticky' && 'dsn-page-header--sticky',\n      sticky === 'auto-hide' && 'dsn-page-header--auto-hide',\n      layout === 'compact' && 'dsn-page-header--compact',\n      colorScheme === 'inverse' && 'dsn-page-header--inverse',\n      className\n    );\n\n    return (\n      <>\n        <header\n          ref={combinedRef}\n          className={classes}\n          {...(sticky === 'auto-hide' ? { 'data-hidden': 'false' } : {})}\n          {...props}\n        >\n          {/* ----------------------------------------------------------------\n              Small viewport layout (verborgen boven 64em via CSS display:none)\n              ---------------------------------------------------------------- */}\n          <div className=\"dsn-page-header__small-layout\">\n            <div className=\"dsn-page-header__inner\">\n              {/* Inline-start: menuknop */}\n              <div className=\"dsn-page-header__start\">\n                {!hideMenuButton && (\n                  <Button\n                    ref={menuButtonRef}\n                    variant=\"subtle\"\n                    onClick={handleMenuOpen}\n                    iconStart={<Icon name=\"menu\" aria-hidden />}\n                  >\n                    {menuButtonLabel}\n                    {menuButtonBadgeLabel && (\n                      <span className=\"dsn-visually-hidden\">\n                        , {menuButtonBadgeLabel}\n                      </span>\n                    )}\n                    {menuButtonBadge}\n                  </Button>\n                )}\n              </div>\n\n              {/* Gecentreerd logo */}\n              <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n              {/* Inline-end: zoekknop / sluitknop */}\n              <div className=\"dsn-page-header__end\">\n                {!hideSearchButton && (\n                  <Button\n                    ref={searchButtonRef}\n                    variant=\"subtle\"\n                    aria-expanded={isSearchOpen}\n                    aria-controls={searchPanelId}\n                    onClick={handleSearchToggle}\n                    iconStart={\n                      <Icon name={isSearchOpen ? 'x' : 'search'} aria-hidden />\n                    }\n                  >\n                    {isSearchOpen ? closeButtonLabel : searchButtonLabel}\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Zoekpaneel */}\n            <div\n              id={searchPanelId}\n              className=\"dsn-page-header__search-panel\"\n              hidden={!isSearchOpen}\n            >\n              <div className=\"dsn-page-header__search-inner\">\n                <SearchInput\n                  ref={searchInputRef}\n                  placeholder={searchInputPlaceholder}\n                  aria-label={searchInputAriaLabel}\n                />\n                <Button variant=\"strong\">{searchSubmitLabel}</Button>\n              </div>\n            </div>\n          </div>\n\n          {/* ----------------------------------------------------------------\n              Large viewport layout (zichtbaar boven 64em, alleen bij layout=\"default\")\n              ---------------------------------------------------------------- */}\n          {layout === 'default' && (\n            <div className=\"dsn-page-header__large-layout\">\n              {/* Masthead: neutrale achtergrond — logo + servicemenu + zoek */}\n              <div className=\"dsn-page-header__masthead\">\n                <div className=\"dsn-page-header__masthead-inner\">\n                  <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n                  <div className=\"dsn-page-header__secondary-nav\">\n                    {(secondaryNavigationLarge ?? secondaryNavigation) && (\n                      <nav aria-label={secondaryNavAriaLabel}>\n                        {secondaryNavigationLarge ?? secondaryNavigation}\n                      </nav>\n                    )}\n                    {searchSlot && (\n                      <div className=\"dsn-page-header__searchbox\">\n                        {searchSlot}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Navigatiebalk: accent-1 achtergrond — primaire navigatie (large viewport) */}\n              <div className=\"dsn-page-header__navbar\">\n                <div className=\"dsn-page-header__navbar-inner\">\n                  {(primaryNavigationLarge ?? primaryNavigation) && (\n                    <nav aria-label={primaryNavAriaLabel}>\n                      {primaryNavigationLarge ?? primaryNavigation}\n                    </nav>\n                  )}\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* ----------------------------------------------------------------\n              Compact layout (zichtbaar boven 64em wanneer layout=\"compact\")\n              Eén rij: logo (1fr) | primaire navigatie (auto) | servicemenu + zoek (1fr)\n              ---------------------------------------------------------------- */}\n          {layout === 'compact' && (\n            <div className=\"dsn-page-header__compact-layout\">\n              <div className=\"dsn-page-header__compact-inner\">\n                {/* Logo — inline-start (eerste gridkolom) */}\n                <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n                {/* Primaire navigatie — gecentreerd (middelste gridkolom)\n                    Gebruikt primaryNavigationLarge als aanwezig, anders primaryNavigation.\n                    Dit garandeert dat de Drawer altijd de verticale variant ontvangt. */}\n                <div className=\"dsn-page-header__compact-primary-nav\">\n                  {(primaryNavigationLarge ?? primaryNavigation) && (\n                    <nav aria-label={primaryNavAriaLabel}>\n                      {primaryNavigationLarge ?? primaryNavigation}\n                    </nav>\n                  )}\n                </div>\n\n                {/* Servicemenu + zoekknop (icon-only) — inline-end (derde gridkolom) */}\n                <div className=\"dsn-page-header__compact-secondary\">\n                  {(secondaryNavigationLarge ?? secondaryNavigation) && (\n                    <nav aria-label={secondaryNavAriaLabel}>\n                      {secondaryNavigationLarge ?? secondaryNavigation}\n                    </nav>\n                  )}\n                  {!hideSearchButton && (\n                    <Button\n                      ref={compactSearchButtonRef}\n                      variant=\"subtle\"\n                      iconOnly\n                      aria-expanded={isSearchOpen}\n                      aria-controls={compactSearchPanelId}\n                      onClick={handleSearchToggle}\n                      iconStart={\n                        <Icon\n                          name={isSearchOpen ? 'x' : 'search'}\n                          aria-hidden\n                        />\n                      }\n                    >\n                      {isSearchOpen ? closeButtonLabel : searchButtonLabel}\n                    </Button>\n                  )}\n                </div>\n              </div>\n\n              {/* Zoekpaneel compact layout */}\n              <div\n                id={compactSearchPanelId}\n                className=\"dsn-page-header__search-panel\"\n                hidden={!isSearchOpen}\n              >\n                <div className=\"dsn-page-header__search-inner\">\n                  <SearchInput\n                    ref={compactSearchInputRef}\n                    placeholder={searchInputPlaceholder}\n                    aria-label={searchInputAriaLabel}\n                  />\n                  <Button variant=\"strong\">{searchSubmitLabel}</Button>\n                </div>\n              </div>\n            </div>\n          )}\n        </header>\n\n        {/* Navigatielade (sibling aan PageHeader, altijd in DOM) */}\n        <Drawer isOpen={isMenuOpen} onClose={handleMenuClose} side=\"left\">\n          <DrawerHeader>\n            <DrawerHeading>{menuButtonLabel}</DrawerHeading>\n          </DrawerHeader>\n          <DrawerBody>\n            <Stack space=\"5xl\">\n              {primaryNavigation && (\n                <nav aria-label={primaryNavAriaLabel}>{primaryNavigation}</nav>\n              )}\n              {secondaryNavigation && (\n                <nav aria-label={secondaryNavAriaLabel}>\n                  {secondaryNavigation}\n                </nav>\n              )}\n            </Stack>\n          </DrawerBody>\n        </Drawer>\n      </>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoOA,MAAa,aAAa,MAAM,YAE5B,EACE,WACA,UACA,SAAS,QACT,SAAS,WACT,cAAc,WACd,oBAAoB,OACpB,mBACA,wBACA,qBACA,0BACA,YACA,iBACA,sBACA,YACA,aACA,cACA,eACA,kBAAkB,QAClB,oBAAoB,UACpB,mBAAmB,WACnB,yBAAyB,WACzB,uBAAuB,gBACvB,oBAAoB,UACpB,sBAAsB,mBACtB,wBAAwB,qBACxB,iBAAiB,OACjB,mBAAmB,OACnB,GAAG,SAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,KAAK;CACxD,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,iBAAiB;CAExE,MAAM,YAAY,MAAM,OAAoB,IAAI;CAChD,MAAM,cAAe,OAAwC;CAE7D,MAAM,gBAAgB,MAAM,OAA0B,IAAI;CAC1D,MAAM,kBAAkB,MAAM,OAA0B,IAAI;CAC5D,MAAM,iBAAiB,MAAM,OAAyB,IAAI;CAC1D,MAAM,yBAAyB,MAAM,OAA0B,IAAI;CACnE,MAAM,wBAAwB,MAAM,OAAyB,IAAI;CAEjE,MAAM,gBAAgB,MAAM,MAAM;CAClC,MAAM,uBAAuB,MAAM,MAAM;CAGzC,MAAM,gBAAgB;EACpB,IAAI,WAAW,aAAa;EAE5B,IAAI,cAAc,OAAO;EAEzB,MAAM,qBAAqB;GACzB,MAAM,iBAAiB,OAAO;GAC9B,MAAM,kBACJ,iBAAiB,eAAe,iBAAiB;GACnD,YAAY,SAAS,aACnB,eACA,OAAO,eAAe,CACxB;GACA,cAAc;EAChB;EAEA,OAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACjE,aAAa,OAAO,oBAAoB,UAAU,YAAY;CAChE,GAAG,CAAC,QAAQ,WAAW,CAAC;CAIxB,MAAM,gBAAgB;EACpB,IAAI,WAAW,QAAQ;EAEvB,MAAM,uBAAuB;GAC3B,YAAY,SAAS,aACnB,iBACA,OAAO,OAAO,UAAU,CAAC,CAC3B;EACF;EAGA,eAAe;EAEf,OAAO,iBAAiB,UAAU,gBAAgB,EAAE,SAAS,KAAK,CAAC;EACnE,aAAa,OAAO,oBAAoB,UAAU,cAAc;CAClE,GAAG,CAAC,QAAQ,WAAW,CAAC;CAGxB,MAAM,gBAAgB;EACpB,IAAI,cAAc;GAChB,eAAe,SAAS,MAAM;GAC9B,sBAAsB,SAAS,MAAM;EACvC;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,uBAAuB;EAC3B,cAAc,IAAI;EAClB,aAAa;CACf;CAEA,MAAM,wBAAwB;EAC5B,cAAc,KAAK;EACnB,cAAc;EAEd,cAAc,SAAS,MAAM;CAC/B;CAEA,MAAM,2BAA2B;EAC/B,MAAM,UAAU,CAAC;EACjB,gBAAgB,OAAO;EACvB,IAAI,SACF,eAAe;OACV;GACL,gBAAgB;GAEhB,gBAAgB,SAAS,MAAM;GAC/B,uBAAuB,SAAS,MAAM;EACxC;CACF;CAEA,MAAM,UAAU,WACd,mBACA,WAAW,YAAY,2BACvB,WAAW,eAAe,8BAC1B,WAAW,aAAa,4BACxB,gBAAgB,aAAa,4BAC7B,SACF;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,KAAK;EACL,WAAW;EACX,GAAK,WAAW,cAAc,EAAE,eAAe,QAAQ,IAAI,CAAC;EAC5D,GAAI;EAJN,UAAA;GASE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MAEE,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,CAAC,kBACA,qBAAC,QAAD;QACE,KAAK;QACL,SAAQ;QACR,SAAS;QACT,WAAW,oBAAC,MAAD;SAAM,MAAK;SAAO,eAAA;QAAa,CAAA;QAJ5C,UAAA;SAMG;SACA,wBACC,qBAAC,QAAD;UAAM,WAAU;UAAhB,UAAA,CAAsC,MACjC,oBACC;;SAEP;QACK;;MAEP,CAAA;MAGL,oBAAC,OAAD;OAAK,WAAU;OAAyB,UAAA;MAAc,CAAA;MAGtD,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,CAAC,oBACA,oBAAC,QAAD;QACE,KAAK;QACL,SAAQ;QACR,iBAAe;QACf,iBAAe;QACf,SAAS;QACT,WACE,oBAAC,MAAD;SAAM,MAAM,eAAe,MAAM;SAAU,eAAA;QAAa,CAAA;QAGzD,UAAA,eAAe,mBAAmB;OAC7B,CAAA;MAEP,CAAA;KACF;IAGL,CAAA,GAAA,oBAAC,OAAD;KACE,IAAI;KACJ,WAAU;KACV,QAAQ,CAAC;KAET,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,aAAD;OACE,KAAK;OACL,aAAa;OACb,cAAY;MACb,CAAA,GACD,oBAAC,QAAD;OAAQ,SAAQ;OAAU,UAAA;MAA0B,CAAA,CACjD;;IACF,CAAA,CACF;;GAKJ,WAAW,aACV,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CAEE,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,OAAD;OAAK,WAAU;OAAyB,UAAA;MAAc,CAAA,GAEtD,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,EACI,4BAA4B,wBAC5B,oBAAC,OAAD;QAAK,cAAY;QACd,UAAA,4BAA4B;OAC1B,CAAA,GAEN,cACC,oBAAC,OAAD;QAAK,WAAU;QACZ,UAAA;OACE,CAAA,CAEJ;MACF,CAAA,CAAA;;IACF,CAAA,GAGL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,OAAD;MAAK,WAAU;MACX,WAAA,0BAA0B,sBAC1B,oBAAC,OAAD;OAAK,cAAY;OACd,UAAA,0BAA0B;MACxB,CAAA;KAEJ,CAAA;IACF,CAAA,CACF;;GAON,WAAW,aACV,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MAEE,oBAAC,OAAD;OAAK,WAAU;OAAyB,UAAA;MAAc,CAAA;MAKtD,oBAAC,OAAD;OAAK,WAAU;OACX,WAAA,0BAA0B,sBAC1B,oBAAC,OAAD;QAAK,cAAY;QACd,UAAA,0BAA0B;OACxB,CAAA;MAEJ,CAAA;MAGL,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,EACI,4BAA4B,wBAC5B,oBAAC,OAAD;QAAK,cAAY;QACd,UAAA,4BAA4B;OAC1B,CAAA,GAEN,CAAC,oBACA,oBAAC,QAAD;QACE,KAAK;QACL,SAAQ;QACR,UAAA;QACA,iBAAe;QACf,iBAAe;QACf,SAAS;QACT,WACE,oBAAC,MAAD;SACE,MAAM,eAAe,MAAM;SAC3B,eAAA;QACD,CAAA;QAGF,UAAA,eAAe,mBAAmB;OAC7B,CAAA,CAEP;;KACF;IAGL,CAAA,GAAA,oBAAC,OAAD;KACE,IAAI;KACJ,WAAU;KACV,QAAQ,CAAC;KAET,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,aAAD;OACE,KAAK;OACL,aAAa;OACb,cAAY;MACb,CAAA,GACD,oBAAC,QAAD;OAAQ,SAAQ;OAAU,UAAA;MAA0B,CAAA,CACjD;;IACF,CAAA,CACF;;EAED;CAGR,CAAA,GAAA,qBAAC,QAAD;EAAQ,QAAQ;EAAY,SAAS;EAAiB,MAAK;EAA3D,UAAA,CACE,oBAAC,cAAD,EAAA,UACE,oBAAC,eAAD,EAAA,UAAgB,gBAA+B,CAAA,EACnC,CAAA,GACd,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;GAAO,OAAM;GAAb,UAAA,CACG,qBACC,oBAAC,OAAD;IAAK,cAAY;IAAsB,UAAA;GAAuB,CAAA,GAE/D,uBACC,oBAAC,OAAD;IAAK,cAAY;IACd,UAAA;GACE,CAAA,CAEF;EACG,CAAA,EAAA,CAAA,CACN;CACR,CAAA,CAAA,EAAA,CAAA;AAEN,CACF;AAEA,WAAW,cAAc"}

package/dist/PageHeader/index.d.mts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky } from "./PageHeader.mjs";
+export { PageHeader, PageHeaderColorScheme, PageHeaderLayout, PageHeaderProps, PageHeaderSticky };

package/dist/PageLayout/PageLayout.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+//#region src/PageLayout/PageLayout.d.ts
+interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Paginainhoud: doorgaans `PageHeader`, `PageBody` en `PageFooter`.
+   */
+  children: React.ReactNode;
+  /**
+   * Extra CSS-klassen
+   */
+  className?: string;
+}
+/**
+ * PageLayout component
+ * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal
+ * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport
+ * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat
+ * zodra `PageBody` `flex: 1` heeft.
+ *
+ * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische
+ * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).
+ *
+ * @example
+ * ```tsx
+ * <SkipLink href="#main-content" />
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PageLayout, PageLayoutProps };
+//# sourceMappingURL=PageLayout.d.mts.map

package/dist/PageLayout/PageLayout.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.d.mts","names":[],"sources":["../../src/PageLayout/PageLayout.tsx"],"mappings":";;UAIiB,wBAAwB,MAAM,eAAe;;;;EAI5D,UAAU,MAAM;;;;EAKhB;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/PageLayout/PageLayout2.mjs

@@ -0,0 +1,42 @@
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/PageLayout/PageLayout.tsx
+/**
+* PageLayout component
+* Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal
+* stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport
+* vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat
+* zodra `PageBody` `flex: 1` heeft.
+*
+* `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische
+* landmarks komen van de children (`<header>`, `<main>`, `<footer>`).
+*
+* @example
+* ```tsx
+* <SkipLink href="#main-content" />
+* <PageLayout>
+*   <PageHeader logoSlot={<Logo />} />
+*   <PageBody>
+*     <main id="main-content" tabIndex={-1}>
+*       <Container>...</Container>
+*     </main>
+*   </PageBody>
+*   <PageFooter slot1={<Logo />} />
+* </PageLayout>
+* ```
+*/
+const PageLayout = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-page-layout", className),
+		...props,
+		children
+	});
+});
+PageLayout.displayName = "PageLayout";
+//#endregion
+export { PageLayout };
+
+//# sourceMappingURL=PageLayout2.mjs.map

package/dist/PageLayout/PageLayout2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout2.mjs","names":[],"sources":["../../src/PageLayout/PageLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PageLayout.css';\n\nexport interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Paginainhoud: doorgaans `PageHeader`, `PageBody` en `PageFooter`.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Extra CSS-klassen\n   */\n  className?: string;\n}\n\n/**\n * PageLayout component\n * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal\n * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport\n * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat\n * zodra `PageBody` `flex: 1` heeft.\n *\n * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische\n * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).\n *\n * @example\n * ```tsx\n * <SkipLink href=\"#main-content\" />\n * <PageLayout>\n *   <PageHeader logoSlot={<Logo />} />\n *   <PageBody>\n *     <main id=\"main-content\" tabIndex={-1}>\n *       <Container>...</Container>\n *     </main>\n *   </PageBody>\n *   <PageFooter slot1={<Logo />} />\n * </PageLayout>\n * ```\n */\nexport const PageLayout = React.forwardRef<HTMLDivElement, PageLayoutProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-page-layout', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nPageLayout.displayName = 'PageLayout';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,mBAAmB,SAAS;EAClD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc"}

package/dist/PageLayout/index.d.mts

@@ -0,0 +1,2 @@
+import { PageLayout, PageLayoutProps } from "./PageLayout.mjs";
+export { PageLayout, PageLayoutProps };