@gemeentenijmegen/web-components 0.0.2-alpha.0 → 0.0.2-alpha.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2-alpha.0",
+  "version": "0.0.2-alpha.1",
   "author": "gemeente Nijmegen",
   "description": "Web components for the gemeente Nijmegen design system",
   "license": "EUPL-1.2",
@@ -20,8 +20,17 @@
     "type": "git+ssh",
     "url": "git@github.com:GemeenteNijmegen/design-system.git"
   },
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rimraf dist"
+  },
   "devDependencies": {
-    "@gemeentenijmegen/components-css": "0.0.1-alpha.23"
+    "@gemeentenijmegen/components-css": "0.0.1-alpha.24",
+    "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": "d2b859494db39ee2ceb3c8d3157e75674d8991b8"
+  "gitHead": "0e6315bddfbc266bd3fe9ed6215ec3f767204f87"
 }

package/src/header/header.js

@@ -1,5 +1,5 @@
-import style from '@gemeentenijmegen/components-css/dist/index.min.css?raw';
-import html from './template.html?raw';
+import style from '@gemeentenijmegen/components-css/menu.scss';
+import html from './template.html';
 
 class NijmegenHeader extends HTMLElement {
   constructor() {

package/src/mobile-menu/mobile-menu.js

@@ -1,5 +1,5 @@
-import style from '@gemeentenijmegen/components-css/dist/index.min.css?raw';
-import html from './template.html?raw';
+import style from '@gemeentenijmegen/components-css/mobile-menu/index.scss';
+import html from './template.html';
 
 class NijmegenMobileMenu extends HTMLElement {
   constructor() {

package/src/toolbar-button/toolbar-button.js

@@ -1,5 +1,5 @@
-import style from '@gemeentenijmegen/components-css/dist/index.min.css?raw';
-import html from './template.html?raw';
+import style from '@gemeentenijmegen/components-css/toolbar-button/index.scss';
+import html from './template.html';
 
 class NijmegenToolbarButton extends HTMLElement {
   constructor() {
@@ -16,7 +16,7 @@ class NijmegenToolbarButton extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['type'];
+    return ['type', 'aria-controls'];
   }
 
   connectedCallback() {
@@ -28,12 +28,28 @@ class NijmegenToolbarButton extends HTMLElement {
           target = event.target.parentElement;
         }
         target.ariaExpanded = target.ariaExpanded === 'true' ? 'false' : 'true';
+
+        // control mobile menu visibility
+        if (target.getAttribute('aria-controls')) {
+          const elementId = target.getAttribute('aria-controls');
+          if (elementId === 'mobile-menu') {
+            const mobileMenu = document.getElementById(elementId);
+            const visibleClass = 'nijmegen-header__mobile-menu--visible';
+            const isExpanded = target.getAttribute('aria-expanded') === 'true';
+
+            // Toggle menu visibility
+            mobileMenu.classList.toggle(visibleClass, isExpanded);
+          }
+        }
       });
     }
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'type') {
       this.#handleType(newValue);
+    } else if (name === 'aria-controls') {
+      const button = this.shadowRoot.querySelector('.nijmegen-toolbar-button');
+      button.setAttribute('aria-controls', newValue);
     }
   }
   #handleType(type) {