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

package/dist/PageHeader/PageHeader.css

@@ -1,530 +0,0 @@
-/**
- * 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);
-  }
-}
-
-/* =============================================================================
-   Forced colors (High Contrast mode)
-   Default variant mist op large viewport een border-block-end (navbar neemt de
-   visuele scheiding over). In forced-colors mode is die achtergrondkleur niet
-   zichtbaar, dus de border herstellen voor sectieafbakening.
-   ============================================================================= */
-
-@media (forced-colors: active) and (min-width: 64em) {
-  .dsn-page-header:not(.dsn-page-header--compact) {
-    border-block-end: var(--dsn-border-width-thick) solid transparent;
-  }
-}
-
-/* =============================================================================
-   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
-  );
-}
-