@dsn-starter-kit/components-react 1.0.0

package/dist/PageHeader/PageHeader.css

@@ -0,0 +1,517 @@
+/**
+ * PageHeader Component
+ * Primaire navigatieheader voor een pagina. Mobile-first: menuknop (inline-start),
+ * gecentreerd logo, zoekknop (inline-end). Navigatie via Drawer; zoekpaneel inline.
+ *
+ * Structuur:
+ * <header class="dsn-page-header">
+ *   <div class="dsn-page-header__inner">
+ *     <div class="dsn-page-header__start">
+ *       <!-- Menuknop -->
+ *     </div>
+ *     <div class="dsn-page-header__logo">
+ *       <!-- Logo (svg, img, of <a> wrapper) -->
+ *     </div>
+ *     <div class="dsn-page-header__end">
+ *       <!-- Zoekknop -->
+ *     </div>
+ *   </div>
+ *   <div class="dsn-page-header__search-panel" id="..." hidden>
+ *     <div class="dsn-page-header__search-inner">
+ *       <!-- SearchInput + zoekknop -->
+ *     </div>
+ *   </div>
+ * </header>
+ */
+
+/* =============================================================================
+   Base
+   ============================================================================= */
+
+.dsn-page-header {
+  background-color: var(--dsn-page-header-background-color);
+  border-block-end: var(--dsn-page-header-border-block-end-width) solid
+    var(--dsn-page-header-border-block-end-color);
+}
+
+/* =============================================================================
+   Responsive layout-switcher
+   Small viewport (< 64em): mobile bar zichtbaar, large layout verborgen
+   Large viewport (≥ 64em): large layout zichtbaar, mobile bar verborgen
+   display: none verwijdert de sectie uit de accessibility tree.
+   ============================================================================= */
+
+.dsn-page-header__large-layout,
+.dsn-page-header__compact-layout {
+  display: none;
+}
+
+@media (min-width: 64em) {
+  .dsn-page-header__small-layout {
+    display: none;
+  }
+
+  .dsn-page-header__large-layout {
+    display: block;
+  }
+
+  /* border-block-end onderdrukt op large viewport — de navbar heeft zelf al
+     een accent-1 achtergrond die het visuele scheidingswerk overneemt */
+  .dsn-page-header {
+    border-block-end: none;
+  }
+
+  /* Compact variant: verberg default large layout, toon compact layout */
+  .dsn-page-header--compact .dsn-page-header__large-layout {
+    display: none;
+  }
+
+  .dsn-page-header--compact .dsn-page-header__compact-layout {
+    display: block;
+  }
+
+  /* Compact: border-block-end herstellen — geen accent-1 navbar als visueel
+     scheidingsmiddel, dus dezelfde border als op small viewport */
+  .dsn-page-header--compact {
+    border-block-end: var(--dsn-page-header-border-block-end-width) solid
+      var(--dsn-page-header-border-block-end-color);
+  }
+}
+
+/* =============================================================================
+   Masthead (large viewport) — neutrale achtergrond, logo + servicemenu + zoek
+   ============================================================================= */
+
+.dsn-page-header__masthead {
+  background-color: var(--dsn-page-header-masthead-background-color);
+  padding-block: var(--dsn-page-header-masthead-padding-block);
+}
+
+.dsn-page-header__masthead-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: var(--dsn-page-header-masthead-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* =============================================================================
+   Secondary nav (large viewport) — flex-container: servicemenu + zoekveld
+   ============================================================================= */
+
+.dsn-page-header__secondary-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-page-header-secondary-nav-gap);
+}
+
+/* =============================================================================
+   Searchbox (large viewport) — inline zoekveld + zoekknop naast elkaar
+   ============================================================================= */
+
+.dsn-page-header__searchbox {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-md);
+}
+
+/* SearchInput wrapper vult beschikbare ruimte — button behoudt zijn natuurlijke
+   breedte en padding. Zelfde patroon als dsn-page-header__search-inner. */
+.dsn-page-header__searchbox .dsn-search-input-wrapper {
+  flex: 1;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+
+.dsn-page-header__searchbox .dsn-text-input {
+  max-inline-size: none;
+  inline-size: 100%;
+}
+
+/* =============================================================================
+   Compact layout (large viewport) — één rij: logo | primaire nav | servicemenu
+   CSS-grid 1fr auto 1fr centreert de primaire navigatie optisch tussen
+   logo (inline-start) en servicemenu + zoekknop (inline-end).
+   ============================================================================= */
+
+.dsn-page-header__compact-layout {
+  background-color: var(--dsn-page-header-compact-background-color);
+}
+
+.dsn-page-header__compact-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--dsn-space-column-3xl);
+  align-items: center;
+  padding-block: var(--dsn-page-header-compact-padding-block);
+  padding-inline: var(--dsn-page-header-compact-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* Logo in compact context links uitlijnen — niet centreren zoals in de mobile bar.
+   Scoped op de compact-inner zodat geen media query override nodig is. */
+.dsn-page-header__compact-inner .dsn-page-header__logo {
+  justify-content: flex-start;
+}
+
+/* Primaire navigatie links uitlijnen na het logo */
+.dsn-page-header__compact-primary-nav {
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* Servicemenu + zoekknop uitgelijnd naar inline-end */
+.dsn-page-header__compact-secondary {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--dsn-page-header-secondary-nav-gap);
+}
+
+/* =============================================================================
+   Navbar (large viewport) — accent-1 achtergrond, primaire navigatie
+   ============================================================================= */
+
+.dsn-page-header__navbar {
+  background-color: var(--dsn-page-header-navbar-background-color);
+
+  /* MenuLink-items in de navbar krijgen een grotere min-block-size en ruimere
+     padding-inline. Door de tokens te overschrijven op de container werkt de
+     calc()-compensatie voor de current-indicator automatisch mee. */
+  --dsn-menu-item-min-block-size: 4rem;
+  --dsn-menu-item-padding-inline: var(--dsn-space-inline-xl);
+}
+
+.dsn-page-header__navbar-inner {
+  padding-inline: var(--dsn-page-header-navbar-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* =============================================================================
+   Sticky gedrag
+   ============================================================================= */
+
+.dsn-page-header--sticky {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--dsn-page-header-z-index);
+  transition: box-shadow var(--dsn-transition-duration-normal)
+    var(--dsn-transition-easing-default);
+}
+
+/* =============================================================================
+   Auto-hide (sticky + CSS-transitie)
+   JS toggle via data-hidden attribuut: scroll-down → "true", scroll-up → "false"
+   ============================================================================= */
+
+.dsn-page-header--auto-hide {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--dsn-page-header-z-index);
+  transition:
+    transform var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    box-shadow var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+.dsn-page-header--auto-hide[data-hidden='true'] {
+  transform: translateY(-100%);
+}
+
+/* Drop-shadow zodra content onder de sticky/auto-hide header schuift.
+   JS zet data-scrolled="true" bij scrollY > 0, "false" aan de bovenkant. */
+.dsn-page-header--sticky[data-scrolled='true'],
+.dsn-page-header--auto-hide[data-scrolled='true'] {
+  box-shadow: var(--dsn-box-shadow-sm);
+}
+
+/* =============================================================================
+   Inner — CSS-grid centreert logo onafhankelijk van knopbreedte
+   ============================================================================= */
+
+.dsn-page-header__inner {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding-block: var(--dsn-page-header-padding-block);
+  padding-inline: var(--dsn-page-header-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* =============================================================================
+   Start-slot (inline-start — menuknop)
+   ============================================================================= */
+
+.dsn-page-header__start {
+  display: flex;
+  align-items: center;
+}
+
+/* =============================================================================
+   Logo-slot (gecentreerd via middelste grid-kolom)
+   De SVG/img zelf krijgt de max-block-size — niet de wrapper.
+   SVG-attributen width/height worden overschreven door CSS block-size + inline-size: auto.
+   ============================================================================= */
+
+.dsn-page-header__logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dsn-page-header__logo svg,
+.dsn-page-header__logo img {
+  display: block;
+  block-size: var(--dsn-page-header-logo-max-block-size);
+  inline-size: auto;
+}
+
+/* =============================================================================
+   Knoppen in de header krijgen compacte inline padding
+   ============================================================================= */
+
+.dsn-page-header__inner .dsn-button {
+  padding-inline: var(--dsn-space-row-md);
+}
+
+/* =============================================================================
+   End-slot (inline-end — zoekknop)
+   ============================================================================= */
+
+.dsn-page-header__end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* =============================================================================
+   Zoekpaneel (standaard verborgen via [hidden])
+   ============================================================================= */
+
+.dsn-page-header__search-panel {
+  background-color: var(--dsn-page-header-search-panel-background-color);
+  padding-block: var(--dsn-page-header-search-panel-padding-block);
+}
+
+.dsn-page-header__search-inner {
+  display: flex;
+  gap: var(--dsn-space-inline-md);
+  align-items: flex-start;
+  padding-inline: var(--dsn-page-header-search-panel-padding-inline);
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+}
+
+/* SearchInput wrapper vult beschikbare ruimte volledig — overschrijft de standaard
+   form-control max-inline-size zodat het veld de volledige breedte pakt */
+.dsn-page-header__search-inner .dsn-search-input-wrapper {
+  flex: 1;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+
+/* Input op gelijke hoogte als de Zoeken-knop: padding-block terugbrengen naar
+   8px zodat padding + line-height < min-block-size (48px) — en min-block-size
+   de hoogte bepaalt, net als bij de button */
+.dsn-page-header__search-inner .dsn-text-input {
+  max-inline-size: none;
+  inline-size: 100%;
+  --dsn-text-input-padding-block-start: var(--dsn-space-block-md);
+  --dsn-text-input-padding-block-end: var(--dsn-space-block-md);
+}
+
+/* =============================================================================
+   Inverse kleurvariant — accent-1-inverse achtergrond voor prominente branding
+   Navbar + compact bar: accent-1-inverse.bg-default
+   Zoekpaneel: accent-1-inverse.bg-document (iets donkerder voor visuele scheiding)
+   Masthead: ongewijzigd (neutral.bg-document)
+   Logo-kleuren passen zich automatisch aan via CSS custom property overrides.
+   ============================================================================= */
+
+.dsn-page-header--inverse {
+  /* Small viewport: header-balk en border krijgen de inverse achtergrondkleur */
+  --dsn-page-header-background-color: var(
+    --dsn-color-accent-1-inverse-bg-default
+  );
+  --dsn-page-header-border-block-end-color: var(
+    --dsn-color-accent-1-inverse-bg-default
+  );
+  /* Navbar (large default layout) */
+  --dsn-page-header-navbar-background-color: var(
+    --dsn-color-accent-1-inverse-bg-default
+  );
+  /* Zoekpaneel: bg-document is donkerder dan bg-default — visuele scheiding */
+  --dsn-page-header-search-panel-background-color: var(
+    --dsn-color-accent-1-inverse-bg-document
+  );
+  /* Compact layout balk */
+  --dsn-page-header-compact-background-color: var(
+    --dsn-color-accent-1-inverse-bg-default
+  );
+  /* Logo: primaire kleur en label omdraaien voor donkere achtergrond */
+  --dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-logo-color-label: var(--dsn-color-accent-1-inverse-bg-default);
+}
+
+/* DotBadge op een inverse achtergrond: omschakelen naar lichte bg-default kleuren
+   voor hoog contrast op de donkere achtergrond.
+   Scoped op de donkere vlakken (small-layout, navbar, compact-inner) — de masthead
+   blijft op neutrale achtergrond en heeft de standaard inverse-bg-default kleuren. */
+.dsn-page-header--inverse
+  .dsn-page-header__small-layout
+  .dsn-dot-badge--negative,
+.dsn-page-header--inverse .dsn-page-header__navbar .dsn-dot-badge--negative,
+.dsn-page-header--inverse
+  .dsn-page-header__compact-inner
+  .dsn-dot-badge--negative {
+  --dsn-dot-badge-color: var(--dsn-color-negative-bg-default);
+}
+
+.dsn-page-header--inverse
+  .dsn-page-header__small-layout
+  .dsn-dot-badge--positive,
+.dsn-page-header--inverse .dsn-page-header__navbar .dsn-dot-badge--positive,
+.dsn-page-header--inverse
+  .dsn-page-header__compact-inner
+  .dsn-dot-badge--positive {
+  --dsn-dot-badge-color: var(--dsn-color-positive-bg-default);
+}
+
+.dsn-page-header--inverse
+  .dsn-page-header__small-layout
+  .dsn-dot-badge--warning,
+.dsn-page-header--inverse .dsn-page-header__navbar .dsn-dot-badge--warning,
+.dsn-page-header--inverse
+  .dsn-page-header__compact-inner
+  .dsn-dot-badge--warning {
+  --dsn-dot-badge-color: var(--dsn-color-warning-bg-default);
+}
+
+.dsn-page-header--inverse .dsn-page-header__small-layout .dsn-dot-badge--info,
+.dsn-page-header--inverse .dsn-page-header__navbar .dsn-dot-badge--info,
+.dsn-page-header--inverse .dsn-page-header__compact-inner .dsn-dot-badge--info {
+  --dsn-dot-badge-color: var(--dsn-color-info-bg-default);
+}
+
+.dsn-page-header--inverse
+  .dsn-page-header__small-layout
+  .dsn-dot-badge--neutral,
+.dsn-page-header--inverse .dsn-page-header__navbar .dsn-dot-badge--neutral,
+.dsn-page-header--inverse
+  .dsn-page-header__compact-inner
+  .dsn-dot-badge--neutral {
+  --dsn-dot-badge-color: var(--dsn-color-neutral-bg-default);
+}
+
+/* Masthead blijft op neutrale achtergrond — logo kleuren resetten naar standaard */
+.dsn-page-header--inverse .dsn-page-header__masthead {
+  --dsn-logo-color-primary: var(--dsn-color-accent-1-inverse-bg-default);
+  --dsn-logo-color-label: var(--dsn-color-neutral-bg-document);
+}
+
+/* Buttons in de header-balk (small viewport: menu + zoekknop) op inverse achtergrond */
+.dsn-page-header--inverse .dsn-page-header__small-layout {
+  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-button-subtle-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-hover
+  );
+  --dsn-button-subtle-hover-color: var(
+    --dsn-color-accent-1-inverse-color-hover
+  );
+  --dsn-button-subtle-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-button-subtle-active-color: var(
+    --dsn-color-accent-1-inverse-color-active
+  );
+}
+
+/* Menu-items en knoppen in een Popover erven de inverse kleuren via CSS-cascading.
+   De Popover heeft altijd een lichte achtergrond — reset naar standaard component-kleuren. */
+.dsn-page-header--inverse .dsn-popover {
+  --dsn-menu-item-color: var(--dsn-color-action-2-color-default);
+  --dsn-menu-item-hover-color: var(--dsn-color-action-2-color-hover);
+  --dsn-menu-item-hover-background-color: var(--dsn-color-action-2-bg-hover);
+  --dsn-menu-item-active-color: var(--dsn-color-action-2-color-active);
+  --dsn-menu-item-active-background-color: var(--dsn-color-action-2-bg-active);
+  --dsn-menu-link-current-color: var(--dsn-color-action-2-color-default);
+  --dsn-menu-link-current-background-color: var(--dsn-color-action-2-bg-active);
+  --dsn-menu-link-current-indicator-color: var(
+    --dsn-color-action-2-color-default
+  );
+  --dsn-menu-link-current-hover-color: var(--dsn-color-action-2-color-default);
+  --dsn-menu-link-current-hover-background-color: var(
+    --dsn-color-action-2-bg-active
+  );
+  --dsn-menu-link-current-active-color: var(--dsn-color-action-2-color-default);
+  --dsn-menu-link-current-active-background-color: var(
+    --dsn-color-action-2-bg-active
+  );
+  --dsn-button-subtle-color: var(--dsn-color-action-1-color-default);
+  --dsn-button-subtle-hover-color: var(--dsn-color-action-1-color-hover);
+  --dsn-button-subtle-hover-background-color: var(
+    --dsn-color-action-1-bg-hover
+  );
+  --dsn-button-subtle-active-color: var(--dsn-color-action-1-color-active);
+  --dsn-button-subtle-active-background-color: var(
+    --dsn-color-action-1-bg-active
+  );
+}
+
+/* Menu-items + expand-buttons + zoekknop in de inverse navbar en compacte navigatie */
+.dsn-page-header--inverse .dsn-page-header__navbar,
+.dsn-page-header--inverse .dsn-page-header__compact-primary-nav,
+.dsn-page-header--inverse .dsn-page-header__compact-secondary {
+  /* Menu-item kleuren: tekst en interactiestaten */
+  --dsn-menu-item-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-menu-item-hover-color: var(--dsn-color-accent-1-inverse-color-hover);
+  --dsn-menu-item-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-hover
+  );
+  --dsn-menu-item-active-color: var(--dsn-color-accent-1-inverse-color-active);
+  --dsn-menu-item-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  /* MenuLink current (actieve pagina) */
+  --dsn-menu-link-current-color: var(
+    --dsn-color-accent-1-inverse-color-default
+  );
+  --dsn-menu-link-current-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-menu-link-current-indicator-color: var(
+    --dsn-color-accent-1-inverse-color-default
+  );
+  --dsn-menu-link-current-hover-color: var(
+    --dsn-color-accent-1-inverse-color-hover
+  );
+  --dsn-menu-link-current-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-menu-link-current-active-color: var(
+    --dsn-color-accent-1-inverse-color-active
+  );
+  --dsn-menu-link-current-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  /* Subtle buttons: uitklapknop in MenuLink + icon-only zoekknop */
+  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-button-subtle-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-hover
+  );
+  --dsn-button-subtle-hover-color: var(
+    --dsn-color-accent-1-inverse-color-hover
+  );
+  --dsn-button-subtle-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-button-subtle-active-color: var(
+    --dsn-color-accent-1-inverse-color-active
+  );
+}
+

package/dist/PageHeader/PageHeader.d.ts

@@ -0,0 +1,190 @@
+import React from 'react';
+import './PageHeader.css';
+export type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';
+export type PageHeaderLayout = 'default' | 'compact';
+export type PageHeaderColorScheme = 'default' | 'inverse';
+export 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>
+ *   }
+ * />
+ * ```
+ */
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=PageHeader.d.ts.map