@gemeentenijmegen/web-components 0.0.2-alpha.7 → 0.0.2-alpha.72

package/dist/nijmegen-accordion.js

@@ -0,0 +1,88 @@
+(function () {
+  'use strict';
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css_248z = "/* Nijmegen overrides */\n.utrecht-accordion__button {\n  align-items: flex-start; /* Nijmegen override */\n}\n.utrecht-accordion__button .utrecht-accordion__button-icon {\n  position: relative;\n  top: 1px; /* stylelint-disable-line property-disallowed-list */ /* Nijmegen override */\n}";
+  styleInject(css_248z);
+
+  var html = "<div class=\"utrecht-accordion\">\n  <slot></slot>\n</div>\n";
+
+  class NijmegenAccordion extends HTMLElement {
+    constructor() {
+      super();
+      const template = document.createElement('template');
+      template.innerHTML = html;
+
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+
+      const stylesheet = new CSSStyleSheet();
+      stylesheet.replaceSync(css_248z);
+      shadowRoot.adoptedStyleSheets = [stylesheet];
+    }
+
+    connectedCallback() {
+      Array.from(this.children).forEach((child) => {
+        const expandableElements = child.querySelectorAll('[aria-expanded]');
+        expandableElements.forEach((element) => {
+          element.addEventListener('click', (event) => {
+            // Find the closest element with aria-expanded attribute
+            let target = event.target.closest('[aria-expanded]');
+            this.handleClick(target, expandableElements);
+          });
+        });
+      });
+    }
+
+    handleClick(target, expandableElements) {
+      expandableElements.forEach((element) => {
+        if (element === target) {
+          const section = target.closest('.utrecht-accordion__section');
+          const panel = section ? section.querySelector('.utrecht-accordion__panel') : null;
+
+          if (panel) {
+            element.ariaExpanded = element.ariaExpanded === 'true' ? 'false' : 'true';
+            panel.ariaHidden = element.ariaExpanded === 'false' ? 'true' : 'false';
+
+            if (panel.ariaHidden === 'false') {
+              panel.removeAttribute('hidden');
+            } else {
+              panel.setAttribute('hidden', '');
+            }
+          }
+        }
+      });
+    }
+  }
+
+  if (!customElements.get('nijmegen-accordion')) {
+    customElements.define('nijmegen-accordion', NijmegenAccordion);
+  }
+
+})();

package/dist/nijmegen-header.js

@@ -28,7 +28,7 @@
     }
   }
 
-  var css_248z = ".nijmegen-header {\n  background-color: var(--nijmegen-header-background-color, #fff);\n  margin-inline-end: auto;\n  margin-inline-start: auto;\n  max-width: var(--nijmegen-header-content-max-inline-size, 100%); /* stylelint-disable-line property-disallowed-list */\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  writing-mode: horizontal-tb;\n}\n\n.nijmegen-header__content {\n  align-items: center;\n  align-self: center;\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: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  padding-block-end: var(--nijmegen-header-content-large-vw-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-large-vw-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-large-vw-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-large-vw-padding-inline-start, 0);\n}\n@media (width < 1024px) {\n  .nijmegen-header__content {\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}\n@media (width < 1024px) {\n  .nijmegen-header__content {\n    display: none;\n  }\n}\n\n.nijmegen-header__content--small--inner {\n  align-items: center;\n  align-self: center;\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: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-inline: auto;\n  padding-block-end: var(--nijmegen-header-content-large-vw-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-header-content-large-vw-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-header-content-large-vw-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-header-content-large-vw-padding-inline-start, 0);\n}\n@media (width < 1024px) {\n  .nijmegen-header__content--small--inner {\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}\n@media (width >= 1024px) {\n  .nijmegen-header__content--small {\n    display: none;\n  }\n}\n\n.nijmegen-header__mobile-menu {\n  display: none;\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}\n\n.nijmegen-header-item {\n  align-items: end;\n  all: unset;\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  background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);\n  border: var(--nijmegen-header-item-focus-visible-border-line-width, 1px) var(--nijmegen-header-item-focus-visible-border-line-style, dashed) var(--nijmegen-header-item-focus-visible-border-color, #082d26);\n  color: var(--nijmegen-header-item-focus-visible-color, #000);\n}\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/**\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/* stylelint-disable-next-line block-no-empty */\n/**\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-toolbar-button {\n  /*\n  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.\n  The hint color takes priority over the appearance color.\n\n  `--_utrecht-button-appearance` is the internal prefix for the appearance\n  (primary-action, secondary-action or subtle), it is not an API.\n  */\n  --_utrecht-button-background-color: var(\n    --_utrecht-button-hint-background-color,\n    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))\n  );\n  --_utrecht-button-color: var(\n    --_utrecht-button-hint-color,\n    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))\n  );\n  --_utrecht-button-border-color: var(\n    --_utrecht-button-hint-border-color,\n    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))\n  );\n  --_utrecht-button-border-bottom-color: var(\n    --_utrecht-button-hint-border-bottom-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-border-bottom-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))\n        )\n      )\n    )\n  );\n  --_utrecht-button-disabled-background-color: var(\n    --_utrecht-button-hint-disabled-background-color,\n    var(\n      --_utrecht-button-appearance-disabled-background-color,\n      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))\n    )\n  );\n  --_utrecht-button-disabled-border-color: var(\n    --_utrecht-button-hint-disabled-border-color,\n    var(\n      --_utrecht-button-appearance-disabled-border-color,\n      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))\n    )\n  );\n  --_utrecht-button-disabled-color: var(\n    --_utrecht-button-hint-disabled-color,\n    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))\n  );\n  --_utrecht-button-pressed-background-color: var(\n    --_utrecht-button-hint-pressed-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-pressed-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-pressed-border-color: var(\n    --_utrecht-button-hint-pressed-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-pressed-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-pressed-color: var(\n    --_utrecht-button-hint-pressed-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-pressed-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))\n      )\n    )\n  );\n  --_utrecht-button-focus-background-color: var(\n    --_utrecht-button-hint-focus-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-focus-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-focus-border-color: var(\n    --_utrecht-button-hint-focus-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-focus-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-focus-color: var(\n    --_utrecht-button-hint-focus-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-focus-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))\n      )\n    )\n  );\n  --_utrecht-button-hover-background-color: var(\n    --_utrecht-button-hint-hover-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-hover-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-hover-border-color: var(\n    --_utrecht-button-hint-hover-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-hover-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-hover-color: var(\n    --_utrecht-button-hint-hover-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-hover-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))\n      )\n    )\n  );\n  --_utrecht-button-active-background-color: var(\n    --_utrecht-button-hint-active-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-active-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-active-border-color: var(\n    --_utrecht-button-hint-active-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-active-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );\n  --_utrecht-button-active-color: var(\n    --_utrecht-button-hint-active-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-active-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))\n      )\n    )\n  );\n  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));\n  --_utrecht-button-border-block-end-width: var(\n    --utrecht-button-border-bottom-width,\n    var(--_utrecht-button-border-width, 0)\n  );\n  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));\n  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));\n  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);\n  align-items: center;\n  background-color: var(--_utrecht-button-background-color);\n  block-size: fit-content;\n  border-block-end-color: var(--_utrecht-button-border-bottom-color);\n  border-block-end-width: var(--_utrecht-button-border-block-end-width);\n  border-color: var(--_utrecht-button-border-color);\n  border-radius: var(--utrecht-button-border-radius);\n  border-style: solid;\n  border-width: var(--_utrecht-button-border-width);\n  box-sizing: border-box;\n  color: var(--_utrecht-button-color);\n  column-gap: var(--utrecht-button-column-gap);\n  cursor: var(--utrecht-action-activate-cursor, revert);\n  display: inline-flex;\n  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));\n  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));\n  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));\n  inline-size: var(--utrecht-button-inline-size, auto);\n  justify-content: center;\n  line-height: var(--_utrecht-button-line-height);\n  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);\n  min-block-size: var(--utrecht-button-min-block-size, 44px);\n  min-inline-size: var(--utrecht-button-min-inline-size, 44px);\n  padding-block-end: var(--utrecht-button-padding-block-end);\n  padding-block-start: var(--utrecht-button-padding-block-start);\n  padding-inline-end: var(--utrecht-button-padding-inline-end);\n  padding-inline-start: var(--utrecht-button-padding-inline-start);\n  scale: 1;\n  text-transform: var(--utrecht-button-text-transform);\n  -webkit-user-select: none;\n  user-select: none;\n  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);\n  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);\n  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);\n  --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);\n  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);\n  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);\n  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);\n  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);\n  --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);\n  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);\n  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);\n  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);\n  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);\n  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);\n  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);\n  --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);\n  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);\n  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);\n  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);\n  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);\n  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);\n  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);\n  column-gap: var(--nijmegen-toolbar-button-column-gap);\n  cursor: pointer;\n  padding-block-end: var(--nijmegen-toolbar-button-padding-block-end);\n  padding-block-start: var(--nijmegen-toolbar-button-padding-block-start);\n  padding-inline-end: var(--nijmegen-toolbar-button-padding-inline-end);\n  padding-inline-start: var(--nijmegen-toolbar-button-padding-inline-start);\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu::before {\n  mask-image: var(--nijmegen-toolbar-button-menu-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\" className=\"icon icon-tabler icons-tabler-outline icon-tabler-menu-2\" > <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" /> <path d=\"M4 6l16 0\" /> <path d=\"M4 12l16 0\" /> <path d=\"M4 18l16 0\" /> </svg>'));\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu::before {\n  background-color: var(--_utrecht-button-appearance-color);\n  content: \"\";\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-toobar-button-menu-icon-height, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-toobar-button-menu-icon-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-menu[aria-expanded=true]::before {\n  mask-image: var(--nijmegen-toolbar-button-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-toolbar-button.nijmegen-toolbar-button--icon-search::before {\n  mask-image: var(--nijmegen-toolbar-button-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.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search::before {\n  background-color: var(--_utrecht-button-appearance-color);\n  content: \"\";\n  display: inline-block;\n  flex-shrink: 0;\n  /* stylelint-disable-next-line property-disallowed-list */\n  height: var(--nijmegen-toobar-button-menu-icon-height, 1.5rem);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-toobar-button-menu-icon-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-toolbar-button.nijmegen-toolbar-button--icon-search[aria-expanded=true]::before {\n  mask-image: var(--nijmegen-toolbar-button-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-toolbar-button:focus-visible, .nijmegen-toolbar-button.nijmegen-toolbar-button--focus-visible {\n  background-color: var(--_utrecht-button-focus-background-color);\n  border-color: var(--_utrecht-button-focus-border-color);\n  color: var(--_utrecht-button-focus-color);\n  scale: var(--utrecht-button-focus-scale, 1);\n  /* the pseudo-class for `:focus-visible` is implemented via the mixin */\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}\n.nijmegen-toolbar-button:active:not(:disabled, [aria-disabled=true]), .nijmegen-toolbar-button.nijmegen-toolbar-button--active {\n  background-color: var(--_utrecht-button-active-background-color);\n  border-color: var(--_utrecht-button-active-border-color);\n  color: var(--_utrecht-button-active-color);\n}\n.nijmegen-toolbar-button:hover:not(:disabled, [aria-disabled=true]), .nijmegen-toolbar-button.nijmegen-toolbar-button--hover {\n  background-color: var(--_utrecht-button-hover-background-color);\n  border-color: var(--_utrecht-button-hover-border-color);\n  color: var(--_utrecht-button-hover-color);\n  scale: var(--utrecht-button-hover-scale, 1);\n}\n\n.nijmegen-mega-menu {\n  background-color: var(--nijmegen-mega-menu-background-color, #fff);\n  border: 0 solid var(--nijmegen-mega-menu-border-color, transparent);\n  border-block-end-width: var(--nijmegen-mega-menu-border-block-end-width, 1px);\n  writing-mode: horizontal-tb;\n}\n\n.nijmegen-mega-menu__container {\n  margin-inline: auto;\n  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);\n}\n\n.nijmegen-mega-menu__content {\n  column-gap: var(--nijmegen-mega-menu-content-column-gap, 0);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-inline: auto;\n  padding-block-end: var(--nijmegen-mega-menu-content-padding-block-end, 0);\n  padding-block-start: var(--nijmegen-mega-menu-content-padding-block-start, 0);\n  padding-inline-end: var(--nijmegen-mega-menu-content-padding-inline-end, 0);\n  padding-inline-start: var(--nijmegen-mega-menu-content-padding-inline-start, 0);\n  row-gap: var(--nijmegen-mega-menu-content-row-gap, 0);\n}\n.nijmegen-mega-menu__content .utrecht-heading-4 {\n  font-size: 1.25rem;\n}\n.nijmegen-mega-menu__content > * {\n  flex-basis: 100%;\n}\n@media (width >= 768px) {\n  .nijmegen-mega-menu__content > * {\n    flex-basis: calc((100% - var(--nijmegen-mega-menu-content-column-gap, 0) * 2) / 3);\n  }\n  .nijmegen-mega-menu__content > *:only-child {\n    flex-basis: 100%;\n  }\n}\n@media (width >= 992px) {\n  .nijmegen-mega-menu__content > * {\n    flex-basis: calc((100% - var(--nijmegen-mega-menu-content-column-gap, 0) * 3) / 4);\n  }\n  .nijmegen-mega-menu__content > *:only-child {\n    flex-basis: 100%;\n  }\n}\n.nijmegen-mega-menu__content.nijmegen-mega-menu__content--full-width > * {\n  flex-basis: 100%;\n}\n.nijmegen-mega-menu__content ul {\n  padding-block-start: 1rem;\n  row-gap: 1rem;\n}\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable scss/no-global-function-names */\n/**\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/*\n\n# CSS implementation\n\n## `text-decoration-skip`\n\n`text-decoration-skip` can be helpful to avoid making some texts unreadable.\nFor example by obscuring Arabic diacritics.\n\nHowever, the combination of a greater thickness and skipping this thick underline\nleads to a very unappealing rendering of the underline. To avoid this,\n`text-decoration-skip` is disabled for interactive states.\n\nFor design token configurations that have identical thickness for normal and interactive\nstates, this will lead to the (undesirable) effect that the focus/hover effect is switching\nfrom an interrupted to an uninterrupted underline (for some texts).\n\nApart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.\n\n---\n\nDisabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now\nthat moving the pointer away from a link or having focus elsewhere first is simple enough to\nnot make this too inconvenient.\n\n---\n\nSome folks implement the underline of links using `border-bottom` or even using a finely crafted\n`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches\nwould unfortunately not be able to provide the improved readability of `text-decoration-skip`.\n\n## `text-decoration-thickness`\n\nVarying `text-decoration-thickness` can be used to distinguish interactive states.\n\n---\n\n`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.\nIn Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome\nthe underline offset also seems to increase along with the thickness, which effectively means\nthe underline is closer to the next line than in Safari.\n\n---\n\nIt might be nice to use font-relative units for `text-decoration-thickness`, and that is why we\nuse the `max()` function to ensure the underline remains visible for every font size.\n\n## `transition`\n\n`text-decoration-thickness` could be a candidate for animating between interactive states,\nhowever browsers don't seem to have implemented great looking supixel tweening yet.\n\n`text-decoration-skip` also makes the transition more challenging to implement.\n\n*/\n/**\n * Simulate forced-colors mode.\n */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.\n * \n * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.\n */\n/**\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-mobile-menu {\n  background-color: var(--nijmegen-menu-background-color);\n  position: relative;\n}\n\n.nijmegen-mobile-menu__list {\n  display: flex;\n  flex-direction: column;\n  line-height: var(--nijmegen-menu-link-line-height);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.nijmegen-mobile-menu__link {\n  background-color: var(--nijmegen-menu-background-color);\n  box-sizing: border-box;\n  color: var(--nijmegen-menu-link-color);\n  cursor: pointer;\n  display: flex;\n  font-family: var(--nijmegen-menu-link-font-family);\n  font-size: var(--nijmegen-menu-link-font-size);\n  font-weight: var(--nijmegen-menu-link-font-weight);\n  justify-content: space-between;\n  padding-block-end: var(--nijmegen-menu-link-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n  position: relative;\n  text-decoration: none;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-mobile-menu__link:is(button) {\n  appearance: none;\n  border: 0;\n}\n.nijmegen-mobile-menu__link:focus, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n}\n.nijmegen-mobile-menu__link:focus-visible, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus-visible {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  /*\n   * WCAG SC 2.4.12: Focus Not Obscured\n   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`\n   */\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  /*\n   * The following tokens are deprecated, but we keep them for backwards compatibility for now:\n   * \n   * `--utrecht-link-focus-text-decoration`\n   * `--utrecht-link-focus-text-decoration-thickness`\n   */\n  --_utrecht-link-state-text-decoration: var(\n    --utrecht-link-focus-visible-text-decoration,\n    var(--utrecht-link-focus-text-decoration)\n  );\n  --_utrecht-link-state-text-decoration-thickness: var(\n    --utrecht-link-focus-visible-text-decoration-thickness,\n    var(--utrecht-link-focus-text-decoration-thickness)\n  );\n  z-index: var(--utrecht-stack-focus-z-index, 1);\n}\n.nijmegen-mobile-menu__link span {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--nijmegen-menu-link-column-gap);\n}\n.nijmegen-mobile-menu__link svg {\n  stroke: currentColor;\n}\n.nijmegen-mobile-menu__link--small {\n  font-size: var(--nijmegen-menu-link-small-font-size);\n  padding-block-end: var(--nijmegen-menu-link-small-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-small-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-small-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-small-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--small span {\n  gap: var(--nijmegen-menu-link-small-column-gap);\n}\n.nijmegen-mobile-menu__link--strong {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n}\n.nijmegen-mobile-menu__link--back {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n  padding-block-end: var(--nijmegen-menu-button-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-button-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-button-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-button-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--back span::before {\n  background-color: currentColor;\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  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-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15 6l-6 6l6 6\" /></svg>'));\n}\n.nijmegen-mobile-menu__link--current {\n  color: var(--nijmegen-menu-link-current-color);\n  font-weight: var(--nijmegen-menu-link-current-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--current::after {\n  border-inline-start-color: var(--nijmegen-menu-link-current-border-color);\n  border-inline-start-style: solid;\n  border-inline-start-width: var(--nijmegen-menu-link-current-border-width, 4px);\n  content: \"\";\n  inset: 0;\n  position: absolute;\n}\n.nijmegen-mobile-menu__link--expanded, .nijmegen-mobile-menu__link[aria-expanded=true] {\n  background-color: var(--nijmegen-menu-link-expanded-background-color);\n  color: var(--nijmegen-menu-link-expanded-color);\n  font-weight: var(--nijmegen-menu-link-expanded-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--expanded svg, .nijmegen-mobile-menu__link--expanded::after, .nijmegen-mobile-menu__link[aria-expanded=true] svg, .nijmegen-mobile-menu__link[aria-expanded=true]::after {\n  transform: scaleY(-1);\n}\n.nijmegen-mobile-menu__link--chevron::after {\n  background-color: currentColor;\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  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-mobile-menu__link--arrow::after {\n  background-color: currentColor;\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  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-arrow-right\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M13 18l6 -6\" /><path d=\"M13 6l6 6\" /></svg>'));\n}\n\n.nijmegen-mobile-menu__details-content {\n  display: none;\n}\n\n.nijmegen-mobile-menu__details .nijmegen-mobile-menu__list {\n  display: none;\n}\n.nijmegen-mobile-menu__details--open .nijmegen-mobile-menu__list {\n  display: block;\n}\n\n.nijmegen-mobile-menu__separator {\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n}\n\n.nijmegen-mobile-menu__panel {\n  background-color: var(--nijmegen-menu-background-color);\n  display: none;\n  flex-direction: column;\n  gap: var(--nijmegen-menu-link-column-gap);\n  inset: 0;\n  min-height: 100%; /* stylelint-disable-line property-disallowed-list */\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-mobile-menu__panel--active {\n  display: flex;\n}\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/* stylelint-disable scss/no-global-function-names */\n/**\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/*\n\n# CSS implementation\n\n## `text-decoration-skip`\n\n`text-decoration-skip` can be helpful to avoid making some texts unreadable.\nFor example by obscuring Arabic diacritics.\n\nHowever, the combination of a greater thickness and skipping this thick underline\nleads to a very unappealing rendering of the underline. To avoid this,\n`text-decoration-skip` is disabled for interactive states.\n\nFor design token configurations that have identical thickness for normal and interactive\nstates, this will lead to the (undesirable) effect that the focus/hover effect is switching\nfrom an interrupted to an uninterrupted underline (for some texts).\n\nApart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.\n\n---\n\nDisabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now\nthat moving the pointer away from a link or having focus elsewhere first is simple enough to\nnot make this too inconvenient.\n\n---\n\nSome folks implement the underline of links using `border-bottom` or even using a finely crafted\n`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches\nwould unfortunately not be able to provide the improved readability of `text-decoration-skip`.\n\n## `text-decoration-thickness`\n\nVarying `text-decoration-thickness` can be used to distinguish interactive states.\n\n---\n\n`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.\nIn Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome\nthe underline offset also seems to increase along with the thickness, which effectively means\nthe underline is closer to the next line than in Safari.\n\n---\n\nIt might be nice to use font-relative units for `text-decoration-thickness`, and that is why we\nuse the `max()` function to ensure the underline remains visible for every font size.\n\n## `transition`\n\n`text-decoration-thickness` could be a candidate for animating between interactive states,\nhowever browsers don't seem to have implemented great looking supixel tweening yet.\n\n`text-decoration-skip` also makes the transition more challenging to implement.\n\n*/\n/**\n * Simulate forced-colors mode.\n */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.\n * \n * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.\n */\n/**\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-link-list {\n  all: unset;\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--nijmegen-link-list-row-gap, 0.5rem);\n}\n\n.nijmegen-link-list__item {\n  display: inline-flex;\n  list-style: none;\n}\n\n.nijmegen-link-list__link:any-link {\n  align-items: center;\n  color: var(--utrecht-link-color);\n  display: inline-flex;\n  gap: var(--todo-link-list-item-column-gap); /* stylelint-disable-line custom-property-pattern */\n  text-decoration: var(--nijmegen-link-list-item-text-decoration, none);\n}\n.nijmegen-link-list__link:any-link:active, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--active {\n  --_utrecht-link-forced-colors-color: activetext;\n  --_utrecht-link-state-color: var(--utrecht-link-active-color);\n  color: var(--nijmegen-link-list-item-active-color, #0c483d);\n  text-decoration: var(--nijmegen-link-list-item-active-text-decoration, underline);\n}\n.nijmegen-link-list__link:any-link:active::before, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--active::before {\n  background-color: var(--nijmegen-link-list-item-active-color, #0c483d);\n}\n.nijmegen-link-list__link:any-link:hover, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--hover {\n  --_utrecht-link-forced-colors-color: linktext;\n  --_utrecht-link-state-color: var(--utrecht-link-hover-color);\n  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);\n  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  color: var(--nijmegen-link-list-item-hover-color, #116253);\n  text-decoration: var(--nijmegen-link-list-item-hover-text-decoration, underline);\n}\n.nijmegen-link-list__link:any-link:hover::before, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--hover::before {\n  background-color: var(--nijmegen-link-list-item-hover-color, #116253);\n}\n.nijmegen-link-list__link:any-link:focus, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--focus {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  color: var(--nijmegen-link-list-item-focus-color, #000);\n  text-decoration: var(--nijmegen-link-list-item-focus-text-decoration, none);\n}\n.nijmegen-link-list__link:any-link:focus::before, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--focus::before {\n  background-color: var(--nijmegen-link-list-item-focus-color, #000);\n}\n.nijmegen-link-list__link:any-link:focus-visible, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--focus-visible {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  /*\n   * WCAG SC 2.4.12: Focus Not Obscured\n   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`\n   */\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  /*\n   * The following tokens are deprecated, but we keep them for backwards compatibility for now:\n   * \n   * `--utrecht-link-focus-text-decoration`\n   * `--utrecht-link-focus-text-decoration-thickness`\n   */\n  --_utrecht-link-state-text-decoration: var(\n    --utrecht-link-focus-visible-text-decoration,\n    var(--utrecht-link-focus-text-decoration)\n  );\n  --_utrecht-link-state-text-decoration-thickness: var(\n    --utrecht-link-focus-visible-text-decoration-thickness,\n    var(--utrecht-link-focus-text-decoration-thickness)\n  );\n  z-index: var(--utrecht-stack-focus-z-index, 1);\n  color: var(--nijmegen-link-list-item-focus-visible-color, #000);\n}\n.nijmegen-link-list__link:any-link:focus-visible::before, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--focus-visible::before {\n  background-color: var(--nijmegen-link-list-item-focus-visible-color, #000);\n}\n.nijmegen-link-list__link:any-link:visited, .nijmegen-link-list__link:any-link.nijmegen-link-list__link--visited {\n  --_utrecht-link-forced-colors-color: visitedtext;\n  --_utrecht-link-state-color: var(--utrecht-link-visited-color);\n}\n.nijmegen-link-list__link:not(.nijmegen-link-list__link--no-chevron)::before {\n  background-color: var(--utrecht-link-color);\n  content: \"\";\n  display: inline-block;\n  height: var(--nijmegen-icon-functional-size-height, 0.875rem); /* stylelint-disable-line property-disallowed-list */\n  mask-image: var(--nijmegen-link-list-icon, 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\"><path d=\"M9 6l6 6l-6 6\"></path></svg>'));\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  width: var(--nijmegen-icon-functional-size-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */\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  background-color: var(--nijmegen-header-background-color, #fff);\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  border: 0 solid var(--nijmegen-header-border-color, transparent);\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 {\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  border: 0 solid var(--nijmegen-header-border-color, transparent);\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  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--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}";
   styleInject(css_248z);
 
   var html = "<header class=\"nijmegen-header\">\n  <slot></slot>\n</header>\n";
@@ -63,27 +63,53 @@
       expandableElements.forEach((element) => {
         if (element !== target) {
           element.ariaExpanded = 'false';
-          this.#handleMobileMenu(element);
-          this.#updateAriaLabel(element);
-          this.#updateTabOrder(element);
         } else {
           element.ariaExpanded = element.ariaExpanded === 'true' ? 'false' : 'true';
-          this.#handleMobileMenu(target);
-          this.#updateAriaLabel(element);
-          this.#updateTabOrder(element);
         }
+
+        this.#handleContainerToggle(element);
+        this.#updateAriaLabel(element);
+        this.#updateTabOrder(element);
       });
     }
 
-    #handleMobileMenu(button) {
-      if (button.getAttribute('aria-controls') !== 'mobile-menu') return;
+    #handleContainerToggle(button) {
+      const controlsId = button.getAttribute('aria-controls');
+      if (!controlsId) return;
 
-      const mobileMenu = document.getElementById('mobile-menu');
-      const visibleClass = 'nijmegen-header__mobile-menu--visible';
       const isExpanded = button.getAttribute('aria-expanded') === 'true';
 
-      // Toggle menu visibility
-      mobileMenu.classList.toggle(visibleClass, isExpanded);
+      const containers = {
+        'mobile-menu': {
+          element: document.getElementById('mobile-menu'),
+          visibleClass: 'nijmegen-header__mobile-menu--visible',
+          buttonClass: 'nijmegen-toolbar-button--icon-menu',
+        },
+        'search-container': {
+          element: document.getElementById('search-container'),
+          visibleClass: 'nijmegen-header__mobile-menu--visible',
+          buttonClass: 'nijmegen-toolbar-button--icon-search',
+        },
+      };
+
+      const currentContainer = containers[controlsId];
+      if (!currentContainer?.element) return;
+
+      currentContainer.element.classList.toggle(currentContainer.visibleClass, isExpanded);
+
+      if (isExpanded) {
+        Object.entries(containers).forEach(([id, config]) => {
+          if (id !== controlsId && config.element) {
+            config.element.classList.remove(config.visibleClass);
+
+            const otherButton = this.querySelector(`.${config.buttonClass}`);
+            if (otherButton) {
+              otherButton.ariaExpanded = 'false';
+              this.#updateAriaLabel(otherButton);
+            }
+          }
+        });
+      }
     }
 
     #updateTabOrder(button) {

package/dist/nijmegen-mobile-menu.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 scss/no-global-function-names */\n/**\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/*\n\n# CSS implementation\n\n## `text-decoration-skip`\n\n`text-decoration-skip` can be helpful to avoid making some texts unreadable.\nFor example by obscuring Arabic diacritics.\n\nHowever, the combination of a greater thickness and skipping this thick underline\nleads to a very unappealing rendering of the underline. To avoid this,\n`text-decoration-skip` is disabled for interactive states.\n\nFor design token configurations that have identical thickness for normal and interactive\nstates, this will lead to the (undesirable) effect that the focus/hover effect is switching\nfrom an interrupted to an uninterrupted underline (for some texts).\n\nApart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.\n\n---\n\nDisabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now\nthat moving the pointer away from a link or having focus elsewhere first is simple enough to\nnot make this too inconvenient.\n\n---\n\nSome folks implement the underline of links using `border-bottom` or even using a finely crafted\n`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches\nwould unfortunately not be able to provide the improved readability of `text-decoration-skip`.\n\n## `text-decoration-thickness`\n\nVarying `text-decoration-thickness` can be used to distinguish interactive states.\n\n---\n\n`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.\nIn Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome\nthe underline offset also seems to increase along with the thickness, which effectively means\nthe underline is closer to the next line than in Safari.\n\n---\n\nIt might be nice to use font-relative units for `text-decoration-thickness`, and that is why we\nuse the `max()` function to ensure the underline remains visible for every font size.\n\n## `transition`\n\n`text-decoration-thickness` could be a candidate for animating between interactive states,\nhowever browsers don't seem to have implemented great looking supixel tweening yet.\n\n`text-decoration-skip` also makes the transition more challenging to implement.\n\n*/\n/**\n * Simulate forced-colors mode.\n */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.\n * \n * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.\n */\n/**\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-mobile-menu {\n  background-color: var(--nijmegen-menu-background-color);\n  position: relative;\n}\n\n.nijmegen-mobile-menu__list {\n  display: flex;\n  flex-direction: column;\n  line-height: var(--nijmegen-menu-link-line-height);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.nijmegen-mobile-menu__link {\n  background-color: var(--nijmegen-menu-background-color);\n  box-sizing: border-box;\n  color: var(--nijmegen-menu-link-color);\n  cursor: pointer;\n  display: flex;\n  font-family: var(--nijmegen-menu-link-font-family);\n  font-size: var(--nijmegen-menu-link-font-size);\n  font-weight: var(--nijmegen-menu-link-font-weight);\n  justify-content: space-between;\n  padding-block-end: var(--nijmegen-menu-link-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n  position: relative;\n  text-decoration: none;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-mobile-menu__link:is(button) {\n  appearance: none;\n  border: 0;\n}\n.nijmegen-mobile-menu__link:focus, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n}\n.nijmegen-mobile-menu__link:focus-visible, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus-visible {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  /*\n   * WCAG SC 2.4.12: Focus Not Obscured\n   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`\n   */\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  /*\n   * The following tokens are deprecated, but we keep them for backwards compatibility for now:\n   * \n   * `--utrecht-link-focus-text-decoration`\n   * `--utrecht-link-focus-text-decoration-thickness`\n   */\n  --_utrecht-link-state-text-decoration: var(\n    --utrecht-link-focus-visible-text-decoration,\n    var(--utrecht-link-focus-text-decoration)\n  );\n  --_utrecht-link-state-text-decoration-thickness: var(\n    --utrecht-link-focus-visible-text-decoration-thickness,\n    var(--utrecht-link-focus-text-decoration-thickness)\n  );\n  z-index: var(--utrecht-stack-focus-z-index, 1);\n}\n.nijmegen-mobile-menu__link span {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--nijmegen-menu-link-column-gap);\n}\n.nijmegen-mobile-menu__link svg {\n  stroke: currentColor;\n}\n.nijmegen-mobile-menu__link--small {\n  font-size: var(--nijmegen-menu-link-small-font-size);\n  padding-block-end: var(--nijmegen-menu-link-small-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-small-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-small-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-small-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--small span {\n  gap: var(--nijmegen-menu-link-small-column-gap);\n}\n.nijmegen-mobile-menu__link--strong {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n}\n.nijmegen-mobile-menu__link--back {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n  padding-block-end: var(--nijmegen-menu-button-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-button-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-button-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-button-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--back span::before {\n  background-color: currentColor;\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  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-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15 6l-6 6l6 6\" /></svg>'));\n}\n.nijmegen-mobile-menu__link--current {\n  color: var(--nijmegen-menu-link-current-color);\n  font-weight: var(--nijmegen-menu-link-current-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--current::after {\n  border-inline-start-color: var(--nijmegen-menu-link-current-border-color);\n  border-inline-start-style: solid;\n  border-inline-start-width: var(--nijmegen-menu-link-current-border-width, 4px);\n  content: \"\";\n  inset: 0;\n  position: absolute;\n}\n.nijmegen-mobile-menu__link--expanded, .nijmegen-mobile-menu__link[aria-expanded=true] {\n  background-color: var(--nijmegen-menu-link-expanded-background-color);\n  color: var(--nijmegen-menu-link-expanded-color);\n  font-weight: var(--nijmegen-menu-link-expanded-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--expanded svg, .nijmegen-mobile-menu__link--expanded::after, .nijmegen-mobile-menu__link[aria-expanded=true] svg, .nijmegen-mobile-menu__link[aria-expanded=true]::after {\n  transform: scaleY(-1);\n}\n.nijmegen-mobile-menu__link--chevron::after {\n  background-color: currentColor;\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  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-mobile-menu__link--arrow::after {\n  background-color: currentColor;\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  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-arrow-right\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M13 18l6 -6\" /><path d=\"M13 6l6 6\" /></svg>'));\n}\n\n.nijmegen-mobile-menu__details-content {\n  display: none;\n}\n\n.nijmegen-mobile-menu__details .nijmegen-mobile-menu__list {\n  display: none;\n}\n.nijmegen-mobile-menu__details--open .nijmegen-mobile-menu__list {\n  display: block;\n}\n\n.nijmegen-mobile-menu__separator {\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n}\n\n.nijmegen-mobile-menu__panel {\n  background-color: var(--nijmegen-menu-background-color);\n  display: none;\n  flex-direction: column;\n  gap: var(--nijmegen-menu-link-column-gap);\n  inset: 0;\n  min-height: 100%; /* stylelint-disable-line property-disallowed-list */\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-mobile-menu__panel--active {\n  display: flex;\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 scss/no-global-function-names */\n/**\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/*\n\n# CSS implementation\n\n## `text-decoration-skip`\n\n`text-decoration-skip` can be helpful to avoid making some texts unreadable.\nFor example by obscuring Arabic diacritics.\n\nHowever, the combination of a greater thickness and skipping this thick underline\nleads to a very unappealing rendering of the underline. To avoid this,\n`text-decoration-skip` is disabled for interactive states.\n\nFor design token configurations that have identical thickness for normal and interactive\nstates, this will lead to the (undesirable) effect that the focus/hover effect is switching\nfrom an interrupted to an uninterrupted underline (for some texts).\n\nApart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.\n\n---\n\nDisabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now\nthat moving the pointer away from a link or having focus elsewhere first is simple enough to\nnot make this too inconvenient.\n\n---\n\nSome folks implement the underline of links using `border-bottom` or even using a finely crafted\n`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches\nwould unfortunately not be able to provide the improved readability of `text-decoration-skip`.\n\n## `text-decoration-thickness`\n\nVarying `text-decoration-thickness` can be used to distinguish interactive states.\n\n---\n\n`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.\nIn Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome\nthe underline offset also seems to increase along with the thickness, which effectively means\nthe underline is closer to the next line than in Safari.\n\n---\n\nIt might be nice to use font-relative units for `text-decoration-thickness`, and that is why we\nuse the `max()` function to ensure the underline remains visible for every font size.\n\n## `transition`\n\n`text-decoration-thickness` could be a candidate for animating between interactive states,\nhowever browsers don't seem to have implemented great looking supixel tweening yet.\n\n`text-decoration-skip` also makes the transition more challenging to implement.\n\n*/\n/**\n * Simulate forced-colors mode.\n */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/* stylelint-disable-next-line block-no-empty */\n/**\n * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.\n * \n * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.\n */\n/**\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-mobile-menu {\n  background-color: var(--nijmegen-menu-background-color);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  position: relative;\n}\n\n.nijmegen-mobile-menu__list {\n  display: flex;\n  flex-direction: column;\n  line-height: var(--nijmegen-menu-link-line-height);\n  list-style: none;\n  margin: 0; /* stylelint-disable-line property-disallowed-list */\n  padding-inline-start: 0;\n}\n\n.nijmegen-mobile-menu__link {\n  background-color: var(--nijmegen-menu-background-color);\n  box-sizing: border-box;\n  color: var(--nijmegen-menu-link-color);\n  cursor: pointer;\n  display: flex;\n  font-family: var(--nijmegen-menu-link-font-family);\n  font-size: var(--nijmegen-menu-link-font-size);\n  font-weight: var(--nijmegen-menu-link-font-weight);\n  justify-content: space-between;\n  padding-block-end: var(--nijmegen-menu-link-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n  position: relative;\n  text-decoration: none;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-mobile-menu__link:is(button) {\n  appearance: none;\n  border: 0;\n}\n.nijmegen-mobile-menu__link:focus, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n}\n.nijmegen-mobile-menu__link:focus-visible, .nijmegen-mobile-menu__link.nijmegen-mobile-menu__link--focus-visible {\n  --_utrecht-link-state-color: var(--utrecht-link-focus-color);\n  background-color: var(--utrecht-link-focus-background-color, transparent);\n  text-decoration-skip: none;\n  text-decoration-skip-ink: none;\n  /*\n   * WCAG SC 2.4.12: Focus Not Obscured\n   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`\n   */\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  /*\n   * The following tokens are deprecated, but we keep them for backwards compatibility for now:\n   * \n   * `--utrecht-link-focus-text-decoration`\n   * `--utrecht-link-focus-text-decoration-thickness`\n   */\n  --_utrecht-link-state-text-decoration: var(\n    --utrecht-link-focus-visible-text-decoration,\n    var(--utrecht-link-focus-text-decoration)\n  );\n  --_utrecht-link-state-text-decoration-thickness: var(\n    --utrecht-link-focus-visible-text-decoration-thickness,\n    var(--utrecht-link-focus-text-decoration-thickness)\n  );\n  z-index: var(--utrecht-stack-focus-z-index, 1);\n}\n.nijmegen-mobile-menu__link span {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--nijmegen-menu-link-column-gap);\n}\n.nijmegen-mobile-menu__link svg {\n  stroke: currentColor;\n}\n.nijmegen-mobile-menu__link--small {\n  font-size: var(--nijmegen-menu-link-small-font-size);\n  padding-block-end: var(--nijmegen-menu-link-small-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-link-small-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-link-small-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-small-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--small span {\n  gap: var(--nijmegen-menu-link-small-column-gap);\n}\n.nijmegen-mobile-menu__link--strong {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n}\n.nijmegen-mobile-menu__link--back {\n  font-weight: var(--nijmegen-menu-link-level-1-font-weight);\n  padding-block-end: var(--nijmegen-menu-button-padding-block-end);\n  padding-block-start: var(--nijmegen-menu-button-padding-block-start);\n  padding-inline-end: var(--nijmegen-menu-button-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-button-padding-inline-start);\n}\n.nijmegen-mobile-menu__link--back span::before {\n  background-color: currentColor;\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  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-left\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15 6l-6 6l6 6\" /></svg>'));\n}\n.nijmegen-mobile-menu__link--current {\n  color: var(--nijmegen-menu-link-current-color);\n  font-weight: var(--nijmegen-menu-link-current-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--current::after {\n  border-inline-start-color: var(--nijmegen-menu-link-current-border-color);\n  border-inline-start-style: solid;\n  border-inline-start-width: var(--nijmegen-menu-link-current-border-width, 4px);\n  content: \"\";\n  inset: 0;\n  position: absolute;\n}\n.nijmegen-mobile-menu__link--expanded, .nijmegen-mobile-menu__link[aria-expanded=true] {\n  background-color: var(--nijmegen-menu-link-expanded-background-color);\n  color: var(--nijmegen-menu-link-expanded-color);\n  font-weight: var(--nijmegen-menu-link-expanded-font-weight, 600);\n}\n.nijmegen-mobile-menu__link--expanded svg, .nijmegen-mobile-menu__link--expanded::after, .nijmegen-mobile-menu__link[aria-expanded=true] svg, .nijmegen-mobile-menu__link[aria-expanded=true]::after {\n  transform: scaleY(-1);\n}\n.nijmegen-mobile-menu__link--chevron::after {\n  background-color: currentColor;\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  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-mobile-menu__link--arrow::after {\n  background-color: currentColor;\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  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-arrow-right\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M5 12l14 0\" /><path d=\"M13 18l6 -6\" /><path d=\"M13 6l6 6\" /></svg>'));\n}\n\n.nijmegen-mobile-menu__details-content {\n  display: none;\n}\n\n.nijmegen-mobile-menu__details .nijmegen-mobile-menu__list {\n  display: none;\n}\n.nijmegen-mobile-menu__details--open .nijmegen-mobile-menu__list {\n  display: block;\n}\n\n.nijmegen-mobile-menu__separator {\n  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);\n  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);\n}\n\n.nijmegen-mobile-menu__panel {\n  background-color: var(--nijmegen-menu-background-color);\n  display: none;\n  flex-direction: column;\n  gap: var(--nijmegen-menu-link-column-gap);\n  inset: 0;\n  min-height: 100%; /* stylelint-disable-line property-disallowed-list */\n  position: absolute;\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n  z-index: 10;\n}\n.nijmegen-mobile-menu__panel--active {\n  display: flex;\n}";
   styleInject(css_248z);
 
   var html = "<nav class=\"nijmegen-mobile-menu\">\n  <slot></slot>\n</nav>\n";

package/dist/nijmegen-search.js

@@ -0,0 +1,156 @@
+(function () {
+  'use strict';
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  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/**\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/* TODO: Enable ordering properties when the plugin supports logical CSS properties\n * https://github.com/hudochenkov/stylelint-order/pull/162 */\n/* stylelint-disable order/properties-alphabetical-order */\n.nijmegen-search {\n  inline-size: var(--nijmegen-search-input-max-inline-size);\n  max-inline-size: 100%;\n  position: relative;\n}\n.nijmegen-search.nijmegen-search--full-width {\n  inline-size: 100%;\n}\n\n.nijmegen-search__container {\n  display: flex;\n  gap: var(--nijmegen-search-input-column-gap);\n}\n.nijmegen-search__container .utrecht-button {\n  max-block-size: 51px;\n  min-block-size: 51px;\n}\n\n.nijmegen-search__input-holder {\n  flex: 1;\n  position: relative;\n}\n\n.nijmegen-search__search-button.nijmegen-search__search-button--dark {\n  border-color: var(--nijmegen-search-input-button-border-color) !important;\n}\n@media (width < 576px) {\n  .nijmegen-search__search-button svg {\n    display: none;\n  }\n}\n\n.nijmegen-search__clear-button {\n  align-items: center;\n  aspect-ratio: 1/1;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  height: 100%; /* stylelint-disable-line property-disallowed-list */\n  justify-content: center;\n  position: absolute;\n  right: 0; /* stylelint-disable-line property-disallowed-list */\n  top: 0; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__clear-button.nijmegen-search__clear-button--hide {\n  display: none;\n}\n.nijmegen-search__clear-button svg {\n  stroke: var(--nijmegen-interaction-color);\n}\n\n.nijmegen-search__input {\n  background-color: var(--nijmegen-search-input-background-color);\n  border-color: var(--nijmegen-search-input-border-color);\n  border-radius: var(--nijmegen-search-input-border-radius);\n  border-style: solid;\n  border-width: var(--nijmegen-search-input-border-width);\n  box-sizing: border-box;\n  color: var(--nijmegen-search-input-color);\n  font-family: var(--nijmegen-search-input-font-family);\n  font-size: var(--nijmegen-search-input-font-size);\n  font-weight: var(--nijmegen-search-input-font-weight);\n  line-height: var(--nijmegen-search-input-line-height);\n  min-block-size: var(--nijmegen-search-input-min-block-size);\n  padding-block-end: var(--nijmegen-search-input-padding-block-end);\n  padding-block-start: var(--nijmegen-search-input-padding-block-start);\n  padding-inline-end: var(--nijmegen-search-input-padding-inline-end);\n  padding-inline-start: var(--nijmegen-search-input-padding-inline-start);\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__input:hover, .nijmegen-search__input.nijmegen-search__input--hover {\n  background-color: var(--nijmegen-search-input-hover-background-color);\n  border-color: var(--nijmegen-search-input-hover-border-color);\n  color: var(--nijmegen-search-input-hover-color);\n}\n.nijmegen-search__input:focus, .nijmegen-search__input.nijmegen-search__input--focus {\n  background-color: var(--nijmegen-search-input-focus-background-color);\n  border-color: var(--nijmegen-search-input-focus-border-color);\n  color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:focus-visible, .nijmegen-search__input.nijmegen-search__input--focus {\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-search-input-focus-background-color);\n  border-color: var(--nijmegen-search-input-focus-border-color);\n  color: var(--nijmegen-search-input-focus-color);\n}\n.nijmegen-search__input:read-only, .nijmegen-search__input.nijmegen-search__input-read-only {\n  background-color: var(--nijmegen-search-input-read-only-background-color);\n  border-color: var(--nijmegen-search-input-read-only-border-color);\n  color: var(--nijmegen-search-input-read-only-color);\n}\n.nijmegen-search__input.nijmegen-search__input--disabled {\n  background-color: var(--nijmegen-search-input-disabled-background-color);\n  border-color: var(--nijmegen-search-input-disabled-border-color);\n  color: var(--nijmegen-search-input-disabled-color);\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n.nijmegen-search__input::placeholder {\n  color: var(--nijmegen-search-input-placeholder-color);\n}\n\n.nijmegen-search__autocomplete-results {\n  display: none;\n  margin-block-start: var(--nijmegen-search-input-autocomplete-offset, 8px);\n  position: absolute;\n  top: var(--nijmegen-search-input-min-block-size); /* stylelint-disable-line property-disallowed-list */\n  width: 100%; /* stylelint-disable-line property-disallowed-list */\n}\n.nijmegen-search__autocomplete-results--show-results {\n  display: block;\n}\n.nijmegen-search__autocomplete-results--static {\n  position: static;\n}";
+  styleInject(css_248z);
+
+  var html = "<form class=\"nijmegen-search\" method=\"GET\" action=\"\" role=\"search\">\n  <slot></slot>\n</form>\n";
+
+  class NijmegenSearch extends HTMLElement {
+    static get observedAttributes() {
+      return ['full'];
+    }
+
+    constructor() {
+      super();
+      const template = document.createElement('template');
+      template.innerHTML = html;
+
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+
+      const stylesheet = new CSSStyleSheet();
+      stylesheet.replaceSync(css_248z);
+      shadowRoot.adoptedStyleSheets = [stylesheet];
+    }
+
+    connectedCallback() {
+      const input = this.querySelector('.nijmegen-search__input');
+      const clearButton = this.querySelector('.nijmegen-search__clear-button');
+      const resultsList = this.querySelector('.nijmegen-listbox__list');
+      const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
+
+      this.#updateFullWidth();
+
+      this.#initializeSearch(input, clearButton);
+      if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
+        this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
+      }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'full' && oldValue !== newValue) {
+        this.#updateFullWidth();
+      }
+    }
+
+    #updateFullWidth() {
+      const form = this.shadowRoot.querySelector('.nijmegen-search');
+      if (form) {
+        if (this.hasAttribute('full')) {
+          form.classList.add('nijmegen-search--full-width');
+        } else {
+          form.classList.remove('nijmegen-search--full-width');
+        }
+      }
+    }
+
+    #initializeSearch(input, clearButton) {
+      if (input && clearButton) {
+        input.addEventListener('input', () => {
+          this.#toggleClearButton(input, clearButton);
+        });
+
+        clearButton.addEventListener('click', () => {
+          input.value = '';
+          this.#toggleClearButton(input, clearButton);
+          input.focus();
+        });
+      }
+    }
+
+    #initializeAutocomplete(input, clearButton, resultsList, resultsContainer) {
+      if (input && clearButton && resultsList && resultsContainer) {
+        input.addEventListener('input', () => {
+          if (input.value.trim().length >= 3) {
+            this.#getAutocompleteResults(input.value, (results) => {
+              this.#showResults(results, resultsList, resultsContainer);
+            });
+          } else {
+            this.#hideResults(resultsList, resultsContainer);
+          }
+        });
+
+        clearButton.addEventListener('click', () => {
+          this.#hideResults(resultsList, resultsContainer);
+        });
+      }
+    }
+
+    #toggleClearButton(input, clearButton) {
+      if (input.value.trim().length > 0) {
+        clearButton.classList.remove('nijmegen-search__clear-button--hide');
+      } else {
+        clearButton.classList.add('nijmegen-search__clear-button--hide');
+      }
+    }
+
+    #getAutocompleteResults(query, callback) {
+      const cleanQuery = this.#cleanAutoCompleteQuery(query);
+      const results = [
+        { title: 'Finibus ' + cleanQuery, url: '?q=1_' + cleanQuery },
+        { title: cleanQuery + ' elementum urna', url: '?q=2_' + cleanQuery },
+      ];
+
+      callback(results);
+    }
+
+    #showResults(results, resultsList, resultsContainer) {
+      resultsList.innerHTML = results
+        .map((result) => `<li><a href="${result.url}" class="nijmegen-listbox__item">${result.title}</a></li>`)
+        .join('');
+      resultsContainer.classList.add('nijmegen-search__autocomplete-results--show-results');
+    }
+
+    #hideResults(resultsList, resultsContainer) {
+      resultsList.innerHTML = '';
+      resultsContainer.classList.remove('nijmegen-search__autocomplete-results--show-results');
+    }
+
+    #cleanAutoCompleteQuery(query) {
+      const p = document.createElement('p');
+      p.innerText = query;
+      return p.innerHTML;
+    }
+  }
+
+  customElements.define('nijmegen-search', NijmegenSearch);
+
+})();

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2-alpha.7",
+  "version": "0.0.2-alpha.72",
   "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.30",
+    "@gemeentenijmegen/components-css": "0.0.1-alpha.95",
     "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": "a97d469e35796dd4dfdbc7834d128597c5df4d71"
+  "gitHead": "c03ffda643e7af7a6e59d618ccfe35a414a83d1a"
 }

package/src/accordion/accordion.js

@@ -0,0 +1,54 @@
+import style from '@gemeentenijmegen/components-css/accordion/index.scss?inline';
+import html from './template.html?raw';
+
+class NijmegenAccordion extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.createElement('template');
+    template.innerHTML = html;
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(style);
+    shadowRoot.adoptedStyleSheets = [stylesheet];
+  }
+
+  connectedCallback() {
+    Array.from(this.children).forEach((child) => {
+      const expandableElements = child.querySelectorAll('[aria-expanded]');
+      expandableElements.forEach((element) => {
+        element.addEventListener('click', (event) => {
+          // Find the closest element with aria-expanded attribute
+          let target = event.target.closest('[aria-expanded]');
+          this.handleClick(target, expandableElements);
+        });
+      });
+    });
+  }
+
+  handleClick(target, expandableElements) {
+    expandableElements.forEach((element) => {
+      if (element === target) {
+        const section = target.closest('.utrecht-accordion__section');
+        const panel = section ? section.querySelector('.utrecht-accordion__panel') : null;
+
+        if (panel) {
+          element.ariaExpanded = element.ariaExpanded === 'true' ? 'false' : 'true';
+          panel.ariaHidden = element.ariaExpanded === 'false' ? 'true' : 'false';
+
+          if (panel.ariaHidden === 'false') {
+            panel.removeAttribute('hidden');
+          } else {
+            panel.setAttribute('hidden', '');
+          }
+        }
+      }
+    });
+  }
+}
+
+if (!customElements.get('nijmegen-accordion')) {
+  customElements.define('nijmegen-accordion', NijmegenAccordion);
+}

package/src/accordion/template.html

@@ -0,0 +1,3 @@
+<div class="utrecht-accordion">
+  <slot></slot>
+</div>

package/src/header/header.js

@@ -1,4 +1,4 @@
-import style from '@gemeentenijmegen/components-css/menu.scss';
+import style from '@gemeentenijmegen/components-css/header/index.scss';
 import html from './template.html';
 
 class NijmegenHeader extends HTMLElement {
@@ -31,27 +31,53 @@ class NijmegenHeader extends HTMLElement {
     expandableElements.forEach((element) => {
       if (element !== target) {
         element.ariaExpanded = 'false';
-        this.#handleMobileMenu(element);
-        this.#updateAriaLabel(element);
-        this.#updateTabOrder(element);
       } else {
         element.ariaExpanded = element.ariaExpanded === 'true' ? 'false' : 'true';
-        this.#handleMobileMenu(target);
-        this.#updateAriaLabel(element);
-        this.#updateTabOrder(element);
       }
+
+      this.#handleContainerToggle(element);
+      this.#updateAriaLabel(element);
+      this.#updateTabOrder(element);
     });
   }
 
-  #handleMobileMenu(button) {
-    if (button.getAttribute('aria-controls') !== 'mobile-menu') return;
+  #handleContainerToggle(button) {
+    const controlsId = button.getAttribute('aria-controls');
+    if (!controlsId) return;
 
-    const mobileMenu = document.getElementById('mobile-menu');
-    const visibleClass = 'nijmegen-header__mobile-menu--visible';
     const isExpanded = button.getAttribute('aria-expanded') === 'true';
 
-    // Toggle menu visibility
-    mobileMenu.classList.toggle(visibleClass, isExpanded);
+    const containers = {
+      'mobile-menu': {
+        element: document.getElementById('mobile-menu'),
+        visibleClass: 'nijmegen-header__mobile-menu--visible',
+        buttonClass: 'nijmegen-toolbar-button--icon-menu',
+      },
+      'search-container': {
+        element: document.getElementById('search-container'),
+        visibleClass: 'nijmegen-header__mobile-menu--visible',
+        buttonClass: 'nijmegen-toolbar-button--icon-search',
+      },
+    };
+
+    const currentContainer = containers[controlsId];
+    if (!currentContainer?.element) return;
+
+    currentContainer.element.classList.toggle(currentContainer.visibleClass, isExpanded);
+
+    if (isExpanded) {
+      Object.entries(containers).forEach(([id, config]) => {
+        if (id !== controlsId && config.element) {
+          config.element.classList.remove(config.visibleClass);
+
+          const otherButton = this.querySelector(`.${config.buttonClass}`);
+          if (otherButton) {
+            otherButton.ariaExpanded = 'false';
+            this.#updateAriaLabel(otherButton);
+          }
+        }
+      });
+    }
   }
 
   #updateTabOrder(button) {

package/src/search/search.js

@@ -0,0 +1,122 @@
+import style from '@gemeentenijmegen/components-css/search/index.scss';
+import html from './template.html';
+
+class NijmegenSearch extends HTMLElement {
+  static get observedAttributes() {
+    return ['full'];
+  }
+
+  constructor() {
+    super();
+    const template = document.createElement('template');
+    template.innerHTML = html;
+
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(style);
+    shadowRoot.adoptedStyleSheets = [stylesheet];
+  }
+
+  connectedCallback() {
+    const input = this.querySelector('.nijmegen-search__input');
+    const clearButton = this.querySelector('.nijmegen-search__clear-button');
+    const resultsList = this.querySelector('.nijmegen-listbox__list');
+    const resultsContainer = this.querySelector('.nijmegen-search__autocomplete-results');
+
+    this.#updateFullWidth();
+
+    this.#initializeSearch(input, clearButton);
+    if (resultsContainer && resultsContainer.classList.contains('nijmegen-search__autocomplete-results--example')) {
+      this.#initializeAutocomplete(input, clearButton, resultsList, resultsContainer);
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'full' && oldValue !== newValue) {
+      this.#updateFullWidth();
+    }
+  }
+
+  #updateFullWidth() {
+    const form = this.shadowRoot.querySelector('.nijmegen-search');
+    if (form) {
+      if (this.hasAttribute('full')) {
+        form.classList.add('nijmegen-search--full-width');
+      } else {
+        form.classList.remove('nijmegen-search--full-width');
+      }
+    }
+  }
+
+  #initializeSearch(input, clearButton) {
+    if (input && clearButton) {
+      input.addEventListener('input', () => {
+        this.#toggleClearButton(input, clearButton);
+      });
+
+      clearButton.addEventListener('click', () => {
+        input.value = '';
+        this.#toggleClearButton(input, clearButton);
+        input.focus();
+      });
+    }
+  }
+
+  #initializeAutocomplete(input, clearButton, resultsList, resultsContainer) {
+    if (input && clearButton && resultsList && resultsContainer) {
+      input.addEventListener('input', () => {
+        if (input.value.trim().length >= 3) {
+          this.#getAutocompleteResults(input.value, (results) => {
+            this.#showResults(results, resultsList, resultsContainer);
+          });
+        } else {
+          this.#hideResults(resultsList, resultsContainer);
+        }
+      });
+
+      clearButton.addEventListener('click', () => {
+        this.#hideResults(resultsList, resultsContainer);
+      });
+    }
+  }
+
+  #toggleClearButton(input, clearButton) {
+    if (input.value.trim().length > 0) {
+      clearButton.classList.remove('nijmegen-search__clear-button--hide');
+    } else {
+      clearButton.classList.add('nijmegen-search__clear-button--hide');
+    }
+  }
+
+  #getAutocompleteResults(query, callback) {
+    const cleanQuery = this.#cleanAutoCompleteQuery(query);
+    const results = [
+      { title: 'Finibus ' + cleanQuery, url: '?q=1_' + cleanQuery },
+      { title: cleanQuery + ' elementum urna', url: '?q=2_' + cleanQuery },
+    ];
+
+    callback(results);
+  }
+
+  #showResults(results, resultsList, resultsContainer) {
+    resultsList.innerHTML = results
+      .map((result) => `<li><a href="${result.url}" class="nijmegen-listbox__item">${result.title}</a></li>`)
+      .join('');
+    resultsContainer.classList.add('nijmegen-search__autocomplete-results--show-results');
+  }
+
+  #hideResults(resultsList, resultsContainer) {
+    resultsList.innerHTML = '';
+    resultsContainer.classList.remove('nijmegen-search__autocomplete-results--show-results');
+  }
+
+  #cleanAutoCompleteQuery(query) {
+    const p = document.createElement('p');
+    p.innerText = query;
+    return p.innerHTML;
+  }
+}
+
+customElements.define('nijmegen-search', NijmegenSearch);

package/src/search/template.html

@@ -0,0 +1,3 @@
+<form class="nijmegen-search" method="GET" action="" role="search">
+  <slot></slot>
+</form>