@designsystem-se/af 39.2.1 → 39.2.2

package/dist/collection/components/_navigation/navigation-vertical-menu/navigation-vertical-menu.js

@@ -81,16 +81,28 @@ export class NavigationVerticalMenu {
         }
     }
     componentWillLoad() {
-        this.getListItems();
-        this.initNav();
-        this.setLevelClass();
+        this.syncNav();
+        // Angular attaches the host first and slots children on the next frame
+        // (Stencil 4.36+). React/vanilla that already have slotted nodes skip
+        // the delay. Do not warn here — Angular/React may still be projecting.
+        if (!this.hostElement.children.length) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.syncNav();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
         this.initCurrentActiveLevel();
         this.afOnReady.emit();
     }
     componentWillUpdate() {
-        this.getListItems();
+        this.syncNav();
+    }
+    syncNav(options) {
+        this.getListItems(options);
         this.initNav();
         this.setLevelClass();
     }
@@ -140,12 +152,12 @@ export class NavigationVerticalMenu {
         }
     }
     setLevelClass() {
-        this.hostElement
-            .querySelector('ul')
-            .classList.remove('primary', 'secondary');
-        this.hostElement
-            .querySelector('ul')
-            .classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
+        const rootList = this.hostElement.querySelector('ul');
+        if (!rootList) {
+            return;
+        }
+        rootList.classList.remove('primary', 'secondary');
+        rootList.classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
     }
     initNav() {
         const $ul = this.hostElement.querySelectorAll('ul');
@@ -158,10 +170,12 @@ export class NavigationVerticalMenu {
         this.initNav();
         this.setClasses(e);
     }
-    getListItems() {
+    getListItems(options) {
         const menuItems = this.hostElement.children;
         if (!menuItems || menuItems.length <= 0) {
-            logger.warn(`The slot contains no children elements.`, this.hostElement);
+            if (options === null || options === void 0 ? void 0 : options.warnIfEmpty) {
+                logger.warn(`The slot contains no children elements.`, this.hostElement);
+            }
             return;
         }
         this.listItems = [...Array.from(menuItems)].map((filter) => {
@@ -180,7 +194,7 @@ export class NavigationVerticalMenu {
         };
     }
     render() {
-        return (h("nav", { key: '0c7b96501a70d813b8d8f5b8014dc420d472f4a9', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '2b5d92cada1cde5bb5155257be77a584c2e708ec' })));
+        return (h("nav", { key: 'df2239de80363247c33eadf6995331a74a40966f', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'dc2e22c2cfd00786964855ea3bc2b7271879510c', onSlotchange: () => this.syncNav() })));
     }
     static get is() { return "digi-navigation-vertical-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/design-tokens/components/_logo.variables.scss

@@ -15,4 +15,6 @@
   --digi--logo--secondary--symbol: var(--digi--color--logotype--secondary--symbol);
   --digi--logo--primary--text: var(--digi--color--logotype--primary--text);
   --digi--logo--secondary--text: var(--digi--color--logotype--secondary--text);
+}g: 1.375rem;
+  --digi--title-logo-gap: 9px;
 }