@gemeentenijmegen/web-components 0.0.2-alpha.87 → 0.0.2-alpha.88

package/dist/nijmegen-header.js

@@ -28,7 +28,7 @@
     }
   }
 
-  var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n.nijmegen-header {\n  background-color: var(--nijmegen-header-background-color, #fff);\n  border: 0 solid var(--nijmegen-header-border-color, transparent);\n  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);\n  writing-mode: horizontal-tb;\n}\n.nijmegen-header .nijmegen-search {\n  background-color: red;\n  inline-size: 100%;\n}\n\n.nijmegen-header__content {\n  align-items: center;\n  align-self: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);\n  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n}\n@media (width < 1024px) {\n  .nijmegen-header__content {\n    display: none;\n  }\n}\n\n.nijmegen-header__content--small {\n  position: relative;\n}\n.nijmegen-header__content--small--inner {\n  align-items: center;\n  align-self: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);\n  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);\n}\n@media (width >= 1024px) {\n  .nijmegen-header__content--small {\n    display: none;\n  }\n}\n\n.nijmegen-header__mobile-menu {\n  background-color: var(--nijmegen-menu-background-color);\n  border: 0 solid var(--nijmegen-header-border-color, transparent);\n  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);\n  display: none;\n  padding-block-end: var(--nijmegen-menu-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-padding-block-start);\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-header__mobile-menu nijmegen-search,\n.nijmegen-header__mobile-menu .nijmegen-search {\n  display: block;\n  max-inline-size: calc(100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(--nijmegen-header-content-padding-inline-start, 0));\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n}\n.nijmegen-header__mobile-menu--visible {\n  display: block;\n}\n\n.nijmegen-header__navigation,\n.nijmegen-header__actions {\n  column-gap: var(--nijmegen-header-content-column-gap, 0);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.nijmegen-header__panel {\n  display: none;\n  left: 0; /* stylelint-disable-line property-disallowed-list */\n  padding-block-start: 1.5rem;\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-header__panel--small {\n  width: auto; /* stylelint-disable-line property-disallowed-list */\n}\n\n.nijmegen-header-action--relative {\n  position: relative;\n}\n.nijmegen-header-action--relative .nijmegen-header__panel {\n  left: auto; /* stylelint-disable-line property-disallowed-list */\n  right: 0; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-action--relative .nijmegen-header__panel .nijmegen-listbox {\n  min-inline-size: 240px;\n}\n\n.nijmegen-header-item {\n  all: unset; /* stylelint-disable-line order/properties-alphabetical-order */\n  align-items: end; /* stylelint-disable-line order/properties-alphabetical-order */\n  color: var(--nijmegen-header-item-color, #000);\n  column-gap: var(--nijmegen-header-item-column-gap, 0);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--nijmegen-header-item-font-family, inherit);\n  font-size: var(--nijmegen-header-item-font-size, 1rem);\n  font-weight: var(--nijmegen-header-item-font-weight, 400);\n  justify-content: space-between;\n  line-height: var(--nijmegen-header-item-line-height, 1.5);\n  text-decoration: none;\n  user-select: none;\n}\n.nijmegen-header-item[aria-expanded]::after {\n  background-color: var(--nijmegen-header-item-color, #000);\n  content: \"\";\n  display: inline-block;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-header-item-icon-size, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-item--active, .nijmegen-header-item[aria-expanded=true] {\n  -webkit-text-stroke-width: 1px;\n}\n.nijmegen-header-item--active + .nijmegen-header__panel, .nijmegen-header-item[aria-expanded=true] + .nijmegen-header__panel {\n  display: block;\n}\n.nijmegen-header-item[aria-expanded=false]::after {\n  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 9l6 6l6 -6\" /></svg>'));\n}\n.nijmegen-header-item[aria-expanded=true]::after {\n  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 15l6 -6l6 6\" /></svg>'));\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-]::before {\n  background-color: var(--nijmegen-header-item-color, #000);\n  content: \"\";\n  display: inline-block;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-header-item-icon-size, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded]::after {\n  all: unset;\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded=true]::before {\n  mask-image: var(--nijmegen-header-item-close-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-x\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 6l-12 12\" /><path d=\"M6 6l12 12\" /></svg>'));\n}\n.nijmegen-header-item--icon-search::before {\n  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" /><path d=\"M21 21l-6 -6\" /></svg>'));\n}\n@media (width < 1280px) {\n  .nijmegen-header-item--icon-user span {\n    display: none;\n  }\n}\n.nijmegen-header-item--icon-user::before {\n  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" /><path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" /></svg>'));\n}\n.nijmegen-header-item:hover, .nijmegen-header-item--hover {\n  color: var(--nijmegen-header-item-hover-color, #000);\n  text-decoration: var(--nijmegen-header-item-hover-text-decoration, none);\n}\n.nijmegen-header-item:hover::before, .nijmegen-header-item:hover::after, .nijmegen-header-item--hover::before, .nijmegen-header-item--hover::after {\n  background-color: var(--nijmegen-header-item-hover-color, #000);\n}\n.nijmegen-header-item:active, .nijmegen-header-item--active {\n  color: var(--nijmegen-header-item-active-color, #000);\n  text-decoration: var(--nijmegen-header-item-active-text-decoration, none);\n}\n.nijmegen-header-item:focus-visible, .nijmegen-header-item--focus-visible {\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);\n  color: var(--nijmegen-header-item-focus-visible-color, #000);\n}";
+  var css_248z = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable-next-line block-no-empty */\n.nijmegen-header {\n  position: relative;\n  writing-mode: horizontal-tb;\n}\n.nijmegen-header .nijmegen-search {\n  inline-size: 100%;\n}\n\n.nijmegen-header__backdrop {\n  background-color: var(--utrecht-backdrop-background-color);\n  display: none;\n  height: 100vh; /* stylelint-disable-line property-disallowed-list */\n  opacity: var(--utrecht-backdrop-opacity);\n  position: fixed;\n  top: 0; /* stylelint-disable-line property-disallowed-list */\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 100;\n}\n.nijmegen-header__backdrop--visible {\n  display: block;\n}\n\n.nijmegen-header__content {\n  background-color: var(--nijmegen-header-background-color, #fff);\n  border: 0 solid var(--nijmegen-header-border-color, transparent);\n  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);\n  position: relative;\n  z-index: 101;\n}\n.nijmegen-header__content .nijmegen-header__content--inner {\n  align-items: center;\n  align-self: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);\n  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n}\n@media (width < 1024px) {\n  .nijmegen-header__content {\n    display: none;\n  }\n}\n\n.nijmegen-header__content--small {\n  background-color: var(--nijmegen-header-background-color, #fff);\n  border: 0 solid var(--nijmegen-header-border-color, transparent);\n  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);\n  position: relative;\n  z-index: 101;\n}\n.nijmegen-header__content--small--inner {\n  align-items: center;\n  align-self: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);\n  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n}\n@media (width >= 1024px) {\n  .nijmegen-header__content--small {\n    display: none;\n  }\n}\n\n.nijmegen-header__mobile-menu {\n  background-color: var(--nijmegen-menu-background-color);\n  border: 0 solid var(--nijmegen-header-border-color, transparent);\n  border-block-start-width: var(--nijmegen-header-border-block-end-width, 0);\n  display: none;\n  padding-block-end: var(--nijmegen-menu-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-padding-block-start);\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-header__mobile-menu nijmegen-search,\n.nijmegen-header__mobile-menu .nijmegen-search {\n  display: block;\n  max-inline-size: calc(100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(--nijmegen-header-content-padding-inline-start, 0));\n  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);\n}\n.nijmegen-header__mobile-menu--visible {\n  display: block;\n}\n\n.nijmegen-header__navigation,\n.nijmegen-header__actions {\n  column-gap: var(--nijmegen-header-content-column-gap, 0);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.nijmegen-header__panel {\n  display: none;\n  left: 0; /* stylelint-disable-line property-disallowed-list */\n  padding-block-start: calc(1.5rem + 2px);\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-header__panel--small {\n  width: auto; /* stylelint-disable-line property-disallowed-list */\n}\n\n.nijmegen-header-action--relative {\n  position: relative;\n}\n.nijmegen-header-action--relative .nijmegen-header__panel {\n  left: auto; /* stylelint-disable-line property-disallowed-list */\n  right: 0; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-action--relative .nijmegen-header__panel .nijmegen-listbox {\n  min-inline-size: 240px;\n}\n\n.nijmegen-header-item {\n  all: unset; /* stylelint-disable-line order/properties-alphabetical-order */\n  align-items: end; /* stylelint-disable-line order/properties-alphabetical-order */\n  color: var(--nijmegen-header-item-color, #000);\n  column-gap: var(--nijmegen-header-item-column-gap, 0);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--nijmegen-header-item-font-family, inherit);\n  font-size: var(--nijmegen-header-item-font-size, 1rem);\n  font-weight: var(--nijmegen-header-item-font-weight, 400);\n  justify-content: space-between;\n  line-height: var(--nijmegen-header-item-line-height, 1.5);\n  text-decoration: none;\n  user-select: none;\n}\n.nijmegen-header-item[aria-expanded]::after {\n  background-color: var(--nijmegen-header-item-color, #000);\n  content: \"\";\n  display: inline-block;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-header-item-icon-size, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-item--active, .nijmegen-header-item[aria-expanded=true] {\n  -webkit-text-stroke-width: 1px;\n}\n.nijmegen-header-item--active + .nijmegen-header__panel, .nijmegen-header-item[aria-expanded=true] + .nijmegen-header__panel {\n  display: block;\n}\n.nijmegen-header-item[aria-expanded=false]::after {\n  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 9l6 6l6 -6\" /></svg>'));\n}\n.nijmegen-header-item[aria-expanded=true]::after {\n  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 15l6 -6l6 6\" /></svg>'));\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-]::before {\n  background-color: var(--nijmegen-header-item-color, #000);\n  content: \"\";\n  display: inline-block;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-header-item-icon-size, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded]::after {\n  all: unset;\n}\n.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded=true]::before {\n  mask-image: var(--nijmegen-header-item-close-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-x\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M18 6l-12 12\" /><path d=\"M6 6l12 12\" /></svg>'));\n}\n.nijmegen-header-item--icon-search::before {\n  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" /><path d=\"M21 21l-6 -6\" /></svg>'));\n}\n@media (width < 1280px) {\n  .nijmegen-header-item--icon-user span {\n    display: none;\n  }\n}\n.nijmegen-header-item--icon-user::before {\n  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"  class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" /><path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" /></svg>'));\n}\n.nijmegen-header-item:hover, .nijmegen-header-item--hover {\n  color: var(--nijmegen-header-item-hover-color, #000);\n  text-decoration: var(--nijmegen-header-item-hover-text-decoration, none);\n}\n.nijmegen-header-item:hover::before, .nijmegen-header-item:hover::after, .nijmegen-header-item--hover::before, .nijmegen-header-item--hover::after {\n  background-color: var(--nijmegen-header-item-hover-color, #000);\n}\n.nijmegen-header-item:active, .nijmegen-header-item--active {\n  color: var(--nijmegen-header-item-active-color, #000);\n  text-decoration: var(--nijmegen-header-item-active-text-decoration, none);\n}\n.nijmegen-header-item:focus-visible, .nijmegen-header-item--focus-visible {\n  /* - The browser default focus ring should apply when these CSS custom properties are not set.\n   * - Make the `box-shadow` value available, so components that have their own `box-shadow`\n   *   can combine it with the focus ring box shadow.\n   */\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);\n  color: var(--nijmegen-header-item-focus-visible-color, #000);\n}";
   styleInject(css_248z);
 
   var html = "<header class=\"nijmegen-header\">\n  <slot></slot>\n</header>\n";
@@ -57,6 +57,14 @@
           });
         });
       });
+
+      // Add backdrop click handler
+      const backdrop = this.querySelector('.nijmegen-header__backdrop');
+      if (backdrop) {
+        backdrop.addEventListener('click', () => {
+          this.#closeAllMenus();
+        });
+      }
     }
 
     #handleClick(target, expandableElements) {
@@ -71,6 +79,9 @@
         this.#updateAriaLabel(element);
         this.#updateTabOrder(element);
       });
+
+      // Handle backdrop visibility
+      this.#updateBackdrop();
     }
 
     #handleContainerToggle(button) {
@@ -142,6 +153,50 @@
         button.ariaLabel = isExpanded ? 'Zoeken sluiten' : 'Zoeken';
       }
     }
+
+    #hasSmallPanel(button) {
+      // Check if the button's next sibling is a small panel
+      const panel = button.nextElementSibling;
+      if (panel && panel.classList.contains('nijmegen-header__panel--small')) {
+        return true;
+      }
+
+      return false;
+    }
+
+    #updateBackdrop() {
+      const backdrop = this.querySelector('.nijmegen-header__backdrop');
+      if (!backdrop) return;
+
+      // Check ALL expandable elements in the component
+      const allExpandableElements = this.querySelectorAll('[aria-expanded]:not(.nijmegen-mobile-menu__link)');
+
+      const anyExpanded = Array.from(allExpandableElements).some((element) => {
+        const isExpanded = element.getAttribute('aria-expanded') === 'true';
+
+        // Ignore small panels
+        if (this.#hasSmallPanel(element)) {
+          return false;
+        }
+
+        return isExpanded;
+      });
+
+      backdrop.classList.toggle('nijmegen-header__backdrop--visible', anyExpanded);
+    }
+
+    #closeAllMenus() {
+      const expandableElements = this.querySelectorAll('[aria-expanded="true"]:not(.nijmegen-mobile-menu__link)');
+
+      expandableElements.forEach((element) => {
+        element.ariaExpanded = 'false';
+        this.#handleContainerToggle(element);
+        this.#updateAriaLabel(element);
+        this.#updateTabOrder(element);
+      });
+
+      this.#updateBackdrop();
+    }
   }
 
   customElements.define('nijmegen-header', NijmegenHeader);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2-alpha.87",
+  "version": "0.0.2-alpha.88",
   "author": "gemeente Nijmegen",
   "description": "Web components for the gemeente Nijmegen design system",
   "license": "EUPL-1.2",
@@ -26,12 +26,12 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@gemeentenijmegen/components-css": "0.0.1-alpha.110",
+    "@gemeentenijmegen/components-css": "0.0.1-alpha.111",
     "postcss-discard-duplicates": "7.0.1",
     "rollup": "4.12.1",
     "rollup-plugin-html": "0.2.1",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-postcss": "4.0.2"
   },
-  "gitHead": "b77392be9211eb760a8b36407c7d0ed6531dac43"
+  "gitHead": "738a0a6a92308311f21d17612712bcfd1bac757c"
 }

package/src/header/header.js

@@ -25,6 +25,14 @@ class NijmegenHeader extends HTMLElement {
         });
       });
     });
+
+    // Add backdrop click handler
+    const backdrop = this.querySelector('.nijmegen-header__backdrop');
+    if (backdrop) {
+      backdrop.addEventListener('click', () => {
+        this.#closeAllMenus();
+      });
+    }
   }
 
   #handleClick(target, expandableElements) {
@@ -39,6 +47,9 @@ class NijmegenHeader extends HTMLElement {
       this.#updateAriaLabel(element);
       this.#updateTabOrder(element);
     });
+
+    // Handle backdrop visibility
+    this.#updateBackdrop();
   }
 
   #handleContainerToggle(button) {
@@ -110,6 +121,50 @@ class NijmegenHeader extends HTMLElement {
       button.ariaLabel = isExpanded ? 'Zoeken sluiten' : 'Zoeken';
     }
   }
+
+  #hasSmallPanel(button) {
+    // Check if the button's next sibling is a small panel
+    const panel = button.nextElementSibling;
+    if (panel && panel.classList.contains('nijmegen-header__panel--small')) {
+      return true;
+    }
+
+    return false;
+  }
+
+  #updateBackdrop() {
+    const backdrop = this.querySelector('.nijmegen-header__backdrop');
+    if (!backdrop) return;
+
+    // Check ALL expandable elements in the component
+    const allExpandableElements = this.querySelectorAll('[aria-expanded]:not(.nijmegen-mobile-menu__link)');
+
+    const anyExpanded = Array.from(allExpandableElements).some((element) => {
+      const isExpanded = element.getAttribute('aria-expanded') === 'true';
+
+      // Ignore small panels
+      if (this.#hasSmallPanel(element)) {
+        return false;
+      }
+
+      return isExpanded;
+    });
+
+    backdrop.classList.toggle('nijmegen-header__backdrop--visible', anyExpanded);
+  }
+
+  #closeAllMenus() {
+    const expandableElements = this.querySelectorAll('[aria-expanded="true"]:not(.nijmegen-mobile-menu__link)');
+
+    expandableElements.forEach((element) => {
+      element.ariaExpanded = 'false';
+      this.#handleContainerToggle(element);
+      this.#updateAriaLabel(element);
+      this.#updateTabOrder(element);
+    });
+
+    this.#updateBackdrop();
+  }
 }
 
 customElements.define('nijmegen-header', NijmegenHeader);