@designsystem-se/af 32.3.1-beta.1 → 33.0.0

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

@@ -15,6 +15,9 @@ function deserializeProp(prop) {
 export class ContextMenu {
     constructor() {
         this.itemRefs = {};
+        this.visible = false;
+        this.activeItemIdx = undefined;
+        this.selectItemIdx = 0;
         this.afId = randomIdGenerator('digi-context-menu');
         this.afIcon = undefined;
         this.afTitle = undefined;
@@ -24,9 +27,6 @@ export class ContextMenu {
         this.afAriaLabel = undefined;
         this.afMenuPosition = 'left-bottom';
         this.afActiveItem = undefined;
-        this.items = [];
-        this.visible = false;
-        this.activeItemIdx = undefined;
     }
     clickHandler(e) {
         const target = e.target;
@@ -43,6 +43,24 @@ export class ContextMenu {
             this.afBlur.emit();
         }
     }
+    syncActiveItem() {
+        if (this.afActiveItem != null) {
+            const menuItems = this.afMenuItems;
+            this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
+        }
+    }
+    syncItems() {
+        this.afMenuItems = deserializeProp(this.afMenuItems);
+    }
+    componentWillLoad() {
+        this.syncItems();
+        this.syncActiveItem();
+    }
+    get digiIcon() {
+        if (this.afIcon != null) {
+            return `digi-icon-${this.afIcon}`;
+        }
+    }
     hideMenu() {
         this.visible = false;
         this.afToggleMenu.emit(this.visible);
@@ -51,66 +69,155 @@ export class ContextMenu {
         this.visible = true;
         this.afToggleMenu.emit(this.visible);
     }
-    handleToggle() {
-        var _a, _b;
+    isLink() {
+        if (this.afMenuItems && this.afMenuItems.length > 0) {
+            const itemToCheck = this.afMenuItems[0];
+            return itemToCheck.type && itemToCheck.type === 'link';
+        }
+        return false;
+    }
+    async handleToggle() {
         if (this.visible) {
             this.hideMenu();
-            (_b = (_a = this.buttonRef).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.focusOnButton();
         }
         else {
             this.showMenu();
-            const idx = this.activeItemIdx || 0;
-            const item = this.items[idx];
-            setTimeout(() => this.itemRefs[item.id].focus(), 25);
+            if (!this.isLink()) {
+                const idx = this.activeItemIdx || 0;
+                const item = this.afMenuItems[idx];
+                setTimeout(() => this.itemRefs[item.id].focus(), 25);
+            }
         }
     }
+    async focusOnButton() {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        const digiButton = this.buttonRef;
+        const button = (await digiButton.afMGetButtonElement());
+        button.focus();
+    }
     handleChangeItem(item, idx) {
         this.activeItemIdx = idx;
         this.handleToggle();
         this.afChangeItem.emit({ item, idx });
     }
-    handleFocusItem(item, idx) {
-        this.afFocusItem.emit({ item, idx });
-    }
     handleRef(ref, refId, payload) {
         if (refId === 'item') {
             this.itemRefs[payload.id] = ref;
         }
     }
-    syncActiveItem() {
-        if (this.afActiveItem != null) {
-            this.activeItemIdx = this.items.findIndex((item) => item.id.toString() === this.afActiveItem);
+    isActive(idx) {
+        if ((this.activeItemIdx !== undefined || this.activeItemIdx !== null) &&
+            this.activeItemIdx === idx) {
+            return true;
         }
+        return false;
     }
-    syncItems() {
-        this.items = deserializeProp(this.afMenuItems);
+    isSelected(idx) {
+        return this.selectItemIdx === idx;
     }
-    componentWillLoad() {
-        this.syncItems();
-        this.syncActiveItem();
+    nextIdx(idx) {
+        if (idx > this.afMenuItems.length - 1) {
+            return 0;
+        }
+        else if (idx < 0) {
+            return this.afMenuItems.length - 1;
+        }
+        else {
+            return idx;
+        }
     }
-    get digiIcon() {
-        if (this.afIcon != null) {
-            return `digi-icon-${this.afIcon}`;
+    activateItem(idx) {
+        const item = this.afMenuItems[idx];
+        this.activeItemIdx = idx;
+        this.focusItem(idx);
+        this.handleChangeItem(item, idx);
+    }
+    focusItem(idx) {
+        var _a;
+        const item = this.afMenuItems[idx];
+        this.selectItemIdx = idx;
+        (_a = this.itemRefs[item.id]) === null || _a === void 0 ? void 0 : _a.focus();
+        this.afFocusItem.emit({ item, idx });
+    }
+    focusCaptured() {
+        const menuItems = this.afMenuItems;
+        return menuItems.some((item) => this.itemRefs[item.id] === document.activeElement);
+    }
+    handleKey(e) {
+        if (!this.focusCaptured())
+            return;
+        switch (e.key) {
+            case 'ArrowUp':
+                this.focusItem(this.nextIdx(this.selectItemIdx - 1));
+                break;
+            case 'ArrowDown':
+                this.focusItem(this.nextIdx(this.selectItemIdx + 1));
+                break;
+            case 'Escape':
+                this.hideMenu();
+                this.focusOnButton();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                e.stopPropagation();
+                this.activateItem(this.selectItemIdx);
+                break;
+            default:
+                break;
+        }
+    }
+    handleLinkClick(e, item, idx) {
+        if (!item.overrideLink) {
+            window.location.assign(item.href);
+        }
+        else {
+            e.preventDefault();
+            this.handleChangeItem(item, idx);
         }
     }
+    renderLink(item, idx) {
+        const menuItem = this.afMenuItems[idx];
+        return (h("li", { id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
+                'digi-navigation-context-menu__item': true,
+                'digi-navigation-context-menu__item--link': true,
+                'digi-navigation-context-menu__item--active': this.isActive(idx)
+            }, dir: this.afDir, lang: this.afLang, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, h("a", { "aria-label": item.ariaLabel ? item.ariaLabel : null, href: menuItem.href ? menuItem.href : null, onClick: (e) => this.handleLinkClick(e, item, idx) }, item.title)));
+    }
+    renderDiv(item, idx) {
+        return (h("div", { role: "option", id: `${this.afId}-listbox-item-${item.id}`, key: item.id, class: {
+                'digi-navigation-context-menu__item': true,
+                'digi-navigation-context-menu__item--active': this.isActive(idx)
+            }, dir: this.afDir, lang: this.afLang, "aria-selected": this.isActive(idx).toString(), tabIndex: this.isSelected(idx) ? 0 : -1, onClick: () => { var _a; return (_a = this.handleChangeItem) === null || _a === void 0 ? void 0 : _a.call(this, item, idx); }, ref: (ref) => { var _a; return (_a = this.handleRef) === null || _a === void 0 ? void 0 : _a.call(this, ref, 'item', item); } }, h("div", { class: "content-wrapper" }, h("digi-icon-check", { class: "digi-navigation-context-menu__button-icon", slot: "icon", style: {
+                visibility: idx === this.activeItemIdx && this.visible
+                    ? 'visible'
+                    : 'hidden'
+            } }), h("span", { "aria-label": item.ariaLabel ? item.ariaLabel : null }, item.title)), ' '));
+    }
     render() {
-        return (h(Host, { key: 'b56dc8e0ca38fa90bf6ac4495b9fb583e00b75ed', id: `${this.afId}-identifier` }, h("digi-navigation-dropdown", { key: 'c196f5442e8c21397ea6a5cb284c6f7e96af15e1', afAriaLabelledby: `${this.afId}-trigger`, afItems: this.items, afVisible: this.visible, afMenuPosition: this.afMenuPosition, afDir: this.afDir, afActiveItem: this.activeItemIdx, afLang: this.afLang, onAfRef: (e) => this.handleRef(e.detail.ref, e.detail.id, e.detail.payload), onAfChangeItem: (e) => this.handleChangeItem(e.detail.item, e.detail.idx), onAfFocusItem: (e) => this.handleFocusItem(e.detail.item, e.detail.idx), afRenderItem: (item, idx) => {
-                const menuItem = this.items[idx];
-                const Container = menuItem.type === 'link' ? 'a' : 'div';
-                const containerArgs = menuItem.type === 'link'
-                    ? { href: menuItem.href, tabindex: -1 }
-                    : {};
-                const showIcon = menuItem.type !== 'link';
-                return (h(Container, Object.assign({ class: "content-wrapper" }, containerArgs), showIcon && (h("digi-icon-check", { class: "digi-navigation-context-menu__button-icon", slot: "icon", style: {
-                        visibility: idx === this.activeItemIdx && this.visible
-                            ? 'visible'
-                            : 'hidden'
-                    } })), h("p", null, item.title)));
-            } }, h("digi-button", { key: 'b8e22491a441218e7f2d47ff7a64acdbceb8291a', id: `${this.afId}-trigger`, afInputRef: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: this.afId, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
+        const menuItems = this.afMenuItems;
+        return (h(Host, { key: '8b9ddb1d31e294505f5ae3f226510ba587ecfc04', class: 'digi-navigation-context-menu' }, h("div", { key: 'bcc94554eb00a58409b7cae6a5c3668767ddb26d', id: `${this.afId}-identifier`, class: "digi-navigation-context-menu--id-wrapper" }, h("digi-button", { key: '287e0f1f1afba43c8250185e5ea589aa26c5367c', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, !!this.afIcon && h(this.digiIcon, { key: '46475907cc2794c222199e447bd875f62899b956', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'bc867a2cfa17c6fedc3651dac5d117df13415535', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })))));
+            } }, !!this.afIcon && h(this.digiIcon, { key: 'db42fdd3432f87096be2e5da8b3e05732b0aedf4', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '7977ded8cc5a7aa0aec7e2735dc38f95a4d31a06', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '5ff21d52bb2f57c8777bd04bf906730c960bc054', class: "digi-navigation-context-menu__list" }, h("div", { key: 'a8e81ab1b3c371ef501bf96f7c14c11d54a97836', onKeyDown: (e) => {
+                this.handleKey(e);
+            }, id: `${this.afId}-dropdown`, style: {
+                visibility: this.visible ? 'visible' : 'hidden'
+            }, role: this.isLink() ? 'list' : 'listbox', "aria-labelledby": `${this.afId}-trigger`, class: {
+                'dropdown-wrapper': true,
+                'dropdown-wrapper--visible': this.visible,
+                'dropdown-wrapper--position-right': this.afMenuPosition === 'right-bottom',
+                'dropdown-wrapper--position-center': this.afMenuPosition === 'center-bottom'
+            } }, menuItems &&
+            menuItems.map((item, idx) => {
+                const menuItem = menuItems[idx];
+                if (menuItem.type && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) === 'link') {
+                    return this.renderLink(item, idx);
+                }
+                return this.renderDiv(item, idx);
+            }))))));
     }
     static get is() { return "digi-context-menu"; }
     static get originalStyleUrls() {
@@ -136,8 +243,11 @@ export class ContextMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets a unique Id. If not set, one will be created"
+                        }],
+                    "text": "(Frivillig) Om du vill att komponenten ska ha ett unikt ID, kan du skicka in detta h\u00E4r, annars genereras ett automatiskt"
                 },
                 "getter": false,
                 "setter": false,
@@ -154,10 +264,13 @@ export class ContextMenu {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets which icon that should be shown"
+                        }],
+                    "text": "Anv\u00E4nds till att v\u00E4lja ikon som visas, skriv i namnet p\u00E5 ikonen"
                 },
                 "getter": false,
                 "setter": false,
@@ -175,8 +288,11 @@ export class ContextMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets the title of the button"
+                        }],
+                    "text": "S\u00E4tter titeln p\u00E5 knappen"
                 },
                 "getter": false,
                 "setter": false,
@@ -197,11 +313,14 @@ export class ContextMenu {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets the title of the button"
+                        }],
+                    "text": "Lista av typen ContextMenuItem som"
                 },
                 "getter": false,
                 "setter": false,
@@ -217,16 +336,19 @@ export class ContextMenu {
                     "references": {
                         "HTMLDir": {
                             "location": "import",
-                            "path": "../navigation-dropdown/navigation-dropdown.types",
-                            "id": "src/components/_navigation/navigation-dropdown/navigation-dropdown.types.ts::HTMLDir"
+                            "path": "./navigation-context-menu.types",
+                            "id": "src/components/_navigation/navigation-context-menu/navigation-context-menu.types.ts::HTMLDir"
                         }
                     }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets dir-attribute"
+                        }],
+                    "text": "S\u00E4tter dir-attributet"
                 },
                 "getter": false,
                 "setter": false,
@@ -244,8 +366,11 @@ export class ContextMenu {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets lang-attribute"
+                        }],
+                    "text": "S\u00E4tter lang-attributet"
                 },
                 "getter": false,
                 "setter": false,
@@ -261,10 +386,13 @@ export class ContextMenu {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets aria-label on expandable button"
+                        }],
+                    "text": "S\u00E4tter aria-label p\u00E5 expanderbar knapp"
                 },
                 "getter": false,
                 "setter": false,
@@ -275,13 +403,13 @@ export class ContextMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "RelativePosition",
+                    "original": "ContextMenuPosition",
                     "resolved": "\"center-bottom\" | \"left-bottom\" | \"right-bottom\"",
                     "references": {
-                        "RelativePosition": {
+                        "ContextMenuPosition": {
                             "location": "import",
-                            "path": "../navigation-dropdown/navigation-dropdown.types",
-                            "id": "src/components/_navigation/navigation-dropdown/navigation-dropdown.types.ts::RelativePosition"
+                            "path": "./navigation-context-menu.types",
+                            "id": "src/components/_navigation/navigation-context-menu/navigation-context-menu.types.ts::ContextMenuPosition"
                         }
                     }
                 },
@@ -332,9 +460,9 @@ export class ContextMenu {
     }
     static get states() {
         return {
-            "items": {},
             "visible": {},
-            "activeItemIdx": {}
+            "activeItemIdx": {},
+            "selectItemIdx": {}
         };
     }
     static get events() {

package/dist/collection/components/_navigation/navigation-context-menu-legacy/navigation-context-menu.js

@@ -228,13 +228,13 @@ export class NavigationContextMenu {
         };
     }
     render() {
-        return (h("div", { key: 'd065b8e2dd16892fa6f69c5f80cf494225bda71d', class: Object.assign({ 'digi-navigation-context-menu': true }, this.cssModifiers), id: `${this.afId}-identifier` }, h("digi-util-keydown-handler", { key: '0382e43c3573cd51ce929efeef64f3cda74ef5b7', onAfOnEsc: () => this.setInactive(true) }, h("digi-button", { key: '2538eda16fb9d994722b44d9832264834269ebb8', ref: (el) => (this._toggleButton = el), onClick: (e) => this.toggleMenu(e), id: `${this.afId}-trigger`, "af-variation": "function", "af-aria-controls": this.afId, "af-aria-expanded": this.isActive ? 'true' : 'false', class: {
+        return (h("div", { key: 'c807f0ab3459be7e91d946e61293295181bcd80c', class: Object.assign({ 'digi-navigation-context-menu': true }, this.cssModifiers), id: `${this.afId}-identifier` }, h("digi-util-keydown-handler", { key: 'ff38f5fb09e9bdcf47d1c14385f9d6863e6f1d9f', onAfOnEsc: () => this.setInactive(true) }, h("digi-button", { key: '440a855733e0b2f6ff0c9729141eefa2e9a8b688', ref: (el) => (this._toggleButton = el), onClick: (e) => this.toggleMenu(e), id: `${this.afId}-trigger`, "af-variation": "function", "af-aria-controls": this.afId, "af-aria-expanded": this.isActive ? 'true' : 'false', class: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.isActive
-            } }, !!this.afIcon && h(this.digiIcon, { key: '44a48c69c26a975337451f571ade3d9ea1074424', slot: "icon" }), this.afText, h("digi-icon-chevron-down", { key: '74266793b220464592f3656c38bd0d9038036818', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '40195409c29b584f26d34cfc5ebcebd07f4c20f7', class: {
+            } }, !!this.afIcon && h(this.digiIcon, { key: 'e36465dff1c19c4854982849be74c0075fe418b5', slot: "icon" }), this.afText, h("digi-icon-chevron-down", { key: 'f32eab5d3b948ceb36f933aa578d7f8be8deb171', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '89b8b4d23790d590bcac9f1ab0992448a4300ebb', class: {
                 'digi-navigation-context-menu__content': true,
                 'digi-navigation-context-menu__content--hidden': !this.isActive
-            } }, h("digi-util-keydown-handler", { key: 'aa80e2083933f767377acc7b612f37823a7ee7af', onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnDown: (e) => this.downHandler(e), onAfOnTab: () => this.setInactive(), onAfOnShiftTab: () => this.setInactive() }, h("ul", { key: '569c4e778a95272898edf0a0029b4f1c4b2bdb0a', id: this.afId, class: {
+            } }, h("digi-util-keydown-handler", { key: '5a0f489027f45983db0c8a56bf0894636874f53c', onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnDown: (e) => this.downHandler(e), onAfOnTab: () => this.setInactive(), onAfOnShiftTab: () => this.setInactive() }, h("ul", { key: '117b0505fb7b85f60f325af7e0ea72a15a9ca827', id: this.afId, class: {
                 'digi-navigation-context-menu__items': true,
                 'digi-navigation-context-menu__items--bordered': this.listItems.length > 4
             }, role: "menu", "aria-describedby": `${this.afId}-trigger` }, this.listItems.map((item) => {
@@ -245,9 +245,9 @@ export class NavigationContextMenu {
                     'digi-navigation-context-menu__item--selected': Number(item.index) ===
                         Number(this.selectedListItemIndex)
                 }, key: item.index, "data-key": item.index, dir: item.dir }, this.showCheckIcon(item.index, item.type) && (h("digi-icon-check", { class: "digi-navigation-context-menu__button-icon", slot: "icon" })), item.type === 'button' && (h("digi-button", { "af-tabindex": "-1", afRole: "menuitemradio", "data-type": item.type, "data-value": item.value, class: "digi-navigation-context-menu__button", afDir: item.dir, afLang: item.lang, onClick: (e) => this.itemClickHandler(e, true), afAriaChecked: this.showCheckIcon(item.index, item.type) }, item.text)), item.type === 'link' && (h("a", { tabindex: "-1", role: "menuitem", class: "digi-navigation-context-menu__link", href: item.href, "data-type": item.type, onClick: (e) => this.itemClickHandler(e), dir: item.dir, lang: item.lang }, item.text))));
-        }))))), h("digi-util-mutation-observer", { key: 'ae2baa14644facaeddf6c86b110a15d116ca5ee0', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: this.debounce(() => {
+        }))))), h("digi-util-mutation-observer", { key: 'fadd9063b8c46ce6d44dc51e7deb85bbdadabf23', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: this.debounce(() => {
                 this.generateListItems(this._observer.children);
-            }) }, h("slot", { key: '19c51afd9b03b72f18d71c31a5c993abe6eef84c' }))));
+            }) }, h("slot", { key: '65921a6880190a8fde38409994bae985511c12ba' }))));
     }
     static get is() { return "digi-navigation-context-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-pagination/navigation-pagination.js

@@ -124,15 +124,15 @@ export class NavigationPagination {
         }
     }
     render() {
-        return (h("div", { key: '1cd6e56aa20351f03649d0b91781c2804ed88041', class: "digi-navigation-pagination" }, h("digi-util-resize-observer", { key: '0beef37b035b0ab5cd4fc9cebe1cbf6934571e83', onAfOnChange: (e) => {
+        return (h("div", { key: '78a0c9b0111a713414b6054516ca77e1ccbeb005', class: "digi-navigation-pagination" }, h("digi-util-resize-observer", { key: '1041fa4a1646b2fd15b2f1c727e9a660d2c315ec', onAfOnChange: (e) => {
                 this.handleResizeObserver(e);
-            } }), h("span", { key: '579540c5d47c61dec104bf85ae3c1918f135d163', id: `${this.afId}-aria-label`, "aria-hidden": "true", class: "digi-navigation-pagination__aria-label" }, "Paginering"), h("nav", { key: '1e49e11840682a250fda2c8d1cf9af153f854cf1', "aria-labelledby": this.labelledby(), class: `digi-navigation-pagination__pagination ${this.twoRows ? 'digi-navigation-pagination--two-rows' : ''}` }, h("digi-button", { key: '6e43c967bde5d2c297202126e610b74c9d5f23bf', onClick: () => this.prevPage(), class: {
+            } }), h("span", { key: 'ae9b310fe9445e675d0bdfa1a539e5f09144af4b', id: `${this.afId}-aria-label`, "aria-hidden": "true", class: "digi-navigation-pagination__aria-label" }, "Paginering"), h("nav", { key: 'a477d801bdb33ffd80d75d5c6e1620517ce380fc', "aria-labelledby": this.labelledby(), class: `digi-navigation-pagination__pagination ${this.twoRows ? 'digi-navigation-pagination--two-rows' : ''}` }, h("digi-button", { key: '6d484990a96b9922f06e9ec11b948755ae308b3c', onClick: () => this.prevPage(), class: {
                 'digi-navigation-pagination__button digi-navigation-pagination__button--previous': true,
                 'digi-navigation-pagination__button--hidden': this.currentPage === 1
-            }, afVariation: "secondary", afAriaLabel: "F\u00F6reg\u00E5ende" }, h("digi-icon-chevron-left", { key: '760a8c4115649ab0428239979950fbe957559dd5', slot: "icon" }), h("span", { key: 'eb63a8fd9aa51ec3fadec8fe623c1bd8031b438e' }, "F\u00F6reg\u00E5ende")), h("digi-button", { key: '7f40d440358b9c10585a48b96861f12bd8e3099f', onClick: () => this.nextPage(), class: {
+            }, afVariation: "secondary", afAriaLabel: "F\u00F6reg\u00E5ende" }, h("digi-icon-chevron-left", { key: 'a36537d8d5f333778d18be1d8616cd7a65bee6e7', slot: "icon" }), h("span", { key: '03290c16634c64d353378e062bc766e98b2e3044' }, "F\u00F6reg\u00E5ende")), h("digi-button", { key: '10c78fa592a81dc7cf647c1a5fd2c3d643ff2b89', onClick: () => this.nextPage(), class: {
                 'digi-navigation-pagination__button digi-navigation-pagination__button--next': true,
                 'digi-navigation-pagination__button--hidden': this.currentPage === this.afTotalPages
-            }, afVariation: "secondary", afAriaLabel: "N\u00E4sta" }, h("digi-icon-chevron-right", { key: 'c1cb9100b5e909f0549e03c1fc4b95fd734f1030', slot: "icon-secondary" }), h("span", { key: '336ee5118de2901e4d11bb6305b6f0735a745dde' }, "N\u00E4sta")), h("div", { key: '43d78e83ae0f0cceb81ec9c0c6641cb5f39212d8', class: "digi-navigation-pagination__pages" }, h("ol", { key: '03278ed5eabe0bf35b0b4d126c09422d26831d37', class: "digi-navigation-pagination__page-list" }, this.currentInterval.map((pageValue) => {
+            }, afVariation: "secondary", afAriaLabel: "N\u00E4sta" }, h("digi-icon-chevron-right", { key: 'fe6384ea7c761d2ed8b98b973587a73db49d25cc', slot: "icon-secondary" }), h("span", { key: '359b1452f66b801192c0870c70673e3ea60d04fe' }, "N\u00E4sta")), h("div", { key: '9dbc2f31e802dfb49cd5b0ee42a39c72c46f557e', class: "digi-navigation-pagination__pages" }, h("ol", { key: '85e87ec458c7d48ea79f7cea88048bf1f1762fe2', class: "digi-navigation-pagination__page-list" }, this.currentInterval.map((pageValue) => {
             const page = isNaN(pageValue)
                 ? parseInt(pageValue.replace('…', ''))
                 : pageValue;
@@ -143,10 +143,10 @@ export class NavigationPagination {
                 }, afVariation: this.currentPage === page
                     ? ButtonVariation.PRIMARY
                     : ButtonVariation.SECONDARY }, h("span", { class: `digi-navigation-pagination__page-text` }, page))));
-        })))), this.afTotalResults > 0 && (h("div", { key: '924f0639488c1e36f5198f37f1f249ccbeba3031', class: {
+        })))), this.afTotalResults > 0 && (h("div", { key: '788a812309eb4f14ff76390f644e11820d420a5a', class: {
                 'digi-navigation-pagination__result': true,
                 'digi-navigation-pagination__result--pages': this.afTotalPages > 1
-            }, "aria-hidden": this.afTotalPages > 1 ? 'true' : 'false', id: `${this.afId}-result` }, h("digi-typography", { key: 'c29398339e79724ad67ce3c73d7ad0bc1d6fa826' }, h("span", { key: 'e6bfb1a2e05f4845cc4dceeb2f32f59b403f1820', id: `${this.afId}-result-show` }, "Visar "), h("strong", { key: '19cc2e4debc9e29d2b734582fd8e6a1586a43279', id: `${this.afId}-result-current` }, this.afCurrentResultStart, "-", this.afCurrentResultEnd), h("span", { key: 'ce55a11fdf1b1cf5776abb118af998d370a98a33', id: `${this.afId}-result-of` }, " av "), h("strong", { key: 'fe6eff60da1ae09d338a090b7069ef93d229da31', id: `${this.afId}-result-total` }, this.afTotalResults), this.afResultName && (h("span", { key: '03a46bbce9c6c0f1cf454bb511124bb29170aa25', id: `${this.afId}-result-name` }, ` ${this.afResultName}`)))))));
+            }, "aria-hidden": this.afTotalPages > 1 ? 'true' : 'false', id: `${this.afId}-result` }, h("digi-typography", { key: 'a48519e08c288a011d8f6a34606d650037aac21c' }, h("span", { key: '94205b0d38dd6d2cb980a9e78c9778f4d9a56bcc', id: `${this.afId}-result-show` }, "Visar "), h("strong", { key: '567b3490941c533fbda1b1463b55e4472779f13f', id: `${this.afId}-result-current` }, this.afCurrentResultStart, "-", this.afCurrentResultEnd), h("span", { key: '9189447acda031c0d6864dec369a78099c6f064a', id: `${this.afId}-result-of` }, " av "), h("strong", { key: '5aa4106a61c5bdd3c77033442b9a932b5d762bd0', id: `${this.afId}-result-total` }, this.afTotalResults), this.afResultName && (h("span", { key: 'f665e8c988854f35284242d48ee30923c4c421e2', id: `${this.afId}-result-name` }, ` ${this.afResultName}`)))))));
     }
     static get is() { return "digi-navigation-pagination"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-sidebar/navigation-sidebar.js

@@ -278,7 +278,7 @@ export class NavigationSidebar {
         };
     }
     render() {
-        return (h(Host, { key: '417f349e0c426171cf5ece707c7676d6617727cf' }, h("digi-util-breakpoint-observer", { key: 'a70dfd0073ac0dae26fca5755e1be82497cffc27' }, h("digi-util-keydown-handler", { key: '35ba7fb3fc233e1de5ada527708ac98f87c78387', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '67daf7df0de6d73ea57c55524effb800a43db15d', class: "digi-navigation-sidebar", "aria-hidden": !this.afActive ? 'true' : 'false' }, h("div", { key: '80c78bfd00fc2f9c95fa999b3f6ab73c85f9c80f', "aria-hidden": "true", class: Object.assign({ 'digi-navigation-sidebar__backdrop': true }, this.cssModifiersBackdrop), onClick: (e) => this.backdropClickHandler(e) }), h("div", { key: 'e126f26ed0d2a6c45cbdfbf0bef5b2c896d1a942', class: Object.assign({ 'digi-navigation-sidebar__wrapper': true }, this.cssModifiers) }, h("div", { key: 'c751ef62e67ed35b9a8ffa61edff1f35f6b0f52b', class: "digi-navigation-sidebar__inner", ref: (el) => {
+        return (h(Host, { key: '5626465a5b84eab9eeb95d78922990ed7e12d5e2' }, h("digi-util-breakpoint-observer", { key: '04a1bb4d90251f028d5486c2606f8b56fb9be132' }, h("digi-util-keydown-handler", { key: '0623f5974acc30ef8778d26ba9f3913eb4f04dab', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '9fc53cb121f03c4db8c81e3fc165e5b9a270ad5b', class: "digi-navigation-sidebar", "aria-hidden": !this.afActive ? 'true' : 'false' }, h("div", { key: 'c93b854b2c0d971983d22235258b58bbb08a36a2', "aria-hidden": "true", class: Object.assign({ 'digi-navigation-sidebar__backdrop': true }, this.cssModifiersBackdrop), onClick: (e) => this.backdropClickHandler(e) }), h("div", { key: 'd959f2bd96456de3a598447706da62264edb4ba9', class: Object.assign({ 'digi-navigation-sidebar__wrapper': true }, this.cssModifiers) }, h("div", { key: '7bf5238552a08738c449a3f4deb5f4b38d43c5d0', class: "digi-navigation-sidebar__inner", ref: (el) => {
                 this._wrapper = el;
             } }, this.showHeader ? (h("div", { class: {
                 'digi-navigation-sidebar__header': true,
@@ -287,7 +287,7 @@ export class NavigationSidebar {
                 'digi-navigation-sidebar__header--close-button--end': this.afCloseButtonPosition ===
                     NavigationSidebarCloseButtonPosition.END,
                 'digi-navigation-sidebar__header--reversed': !!this.afHeading
-            } }, this.afHeading && (h(this.afHeadingLevel, { ref: (el) => (this._heading = el), class: "digi-navigation-sidebar__heading", tabindex: "-1" }, this.afHeading)), h("digi-button", { onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-navigation-sidebar__close-button" }, this.afCloseButtonText, h("digi-icon-x", { slot: "icon-secondary" })))) : (h("div", null)), h("div", { key: '060ae91b557d532c868288fbaf3b2469d556acf9', class: "digi-navigation-sidebar__content" }, h("div", { key: '15a9a04be1b24591ce28a73a10e502b30288c029', class: "digi-navigation-sidebar__nav-wrapper" }, h("slot", { key: 'f35a9df504085d627402e85a62b766717880ba6d' })), this._hasFooter && (h("div", { key: '0b67d68328f8f5cdac1a2555ec979232f3a7757e', class: "digi-navigation-sidebar__footer" }, h("slot", { key: '4955eba4bace184d10a1cbb10a4254d730ef8afd', name: "footer" })))))))))));
+            } }, this.afHeading && (h(this.afHeadingLevel, { ref: (el) => (this._heading = el), class: "digi-navigation-sidebar__heading", tabindex: "-1" }, this.afHeading)), h("digi-button", { onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-navigation-sidebar__close-button" }, this.afCloseButtonText, h("digi-icon-x", { slot: "icon-secondary" })))) : (h("div", null)), h("div", { key: '01acb6fe480569238677836cbe5cd5afa1afd81d', class: "digi-navigation-sidebar__content" }, h("div", { key: '8a174b798ef129fa9fe9ade633e8f7de8d952ae6', class: "digi-navigation-sidebar__nav-wrapper" }, h("slot", { key: 'f2e86c0bf80b36d1ff6c12a884abc16964c7c001' })), this._hasFooter && (h("div", { key: '4bc6ced8a6333bf05aefe623a5a000b75bd7b010', class: "digi-navigation-sidebar__footer" }, h("slot", { key: 'c04599b4192a266d4f631588b8b329c4ac2e7bef', name: "footer" })))))))))));
     }
     static get is() { return "digi-navigation-sidebar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-sidebar-button/navigation-sidebar-button.js

@@ -15,7 +15,7 @@ export class NavigationSidebarButton {
         this.afOnToggle.emit(this.isActive);
     }
     render() {
-        return (h("digi-button", { key: '9304dd2121a3758e9bef83ad45539aabc2390f11', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '6d419ac71efe6e91ae71e069f81c3b753e22af26', slot: "icon" })));
+        return (h("digi-button", { key: 'f90df32c8458d64c6460066c62c656aa5e75fa63', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '35681837fa0887f2614f9cf04621d89b9add6fbe', slot: "icon" })));
     }
     static get is() { return "digi-navigation-sidebar-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-tablist/navigation-tablist.js

@@ -221,14 +221,14 @@ export class NavigationTablist {
             cancelAnimationFrame(this._requestAnimationFrame);
     }
     render() {
-        return (h(Host, { key: '1c4f02178c4ec0a728bc08b9679a9c067d58e64b' }, h("div", { key: '8cd714379823932261c1903babf6cbe6c1df6b95', class: {
+        return (h(Host, { key: 'b254db2497b74752d34aa4672ae38ac5a1051024' }, h("div", { key: '4028d5c2ee9954fb5755285dfe88029fec02d516', class: {
                 'digi-tablist': true,
                 'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                 'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, h("div", { key: 'c263bdf6f3d1904d43e90d7ff92547f6c3665bb0', class: "control-wrapper", style: {
+            } }, h("div", { key: '1643904cc02630eb56f711b7decf3157cefab417', class: "control-wrapper", style: {
                 left: '0',
                 visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, h("button", { key: 'ed97d0d647af8f9cd4c8b93a789f247297df5c6c', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: 'afcb7a95d3e2ac83b4af9881ddde8163905cc4c8' }))), h("div", { key: '9de31c4f7e188a5105f806cd0a6b1af800bc5b28', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
+            } }, h("button", { key: 'd71bb576079e486f2bf197c1654e47ef81147455', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: 'e9d6cfbbb9aa6175d591db7fa67918b266506ed1' }))), h("div", { key: 'ae8db9b6af8276c07fef53b1e376ccf975dd1822', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
             const focusable = tab.id === this.tabs[this.selectedTab].id;
             const isActive = tab.id === this.tabs[this.activeTab].id;
             const Icon = `digi-icon-${tab.icon}`;
@@ -237,10 +237,10 @@ export class NavigationTablist {
                     'digi-tab': true,
                     'is-active': isActive
                 }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "tablist-content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
-        })), h("div", { key: 'c476c9b8713f87bddfc2bf7c22f1f0d32fa6af59', class: "control-wrapper", style: {
+        })), h("div", { key: 'fad2b3c44632c2354abef8c4a863654cfb44954a', class: "control-wrapper", style: {
                 right: '0',
                 visibility: this.showNext ? 'visible' : 'hidden'
-            } }, h("button", { key: '9c4432ddaa1318580ca5dcad137c677444d463dc', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '2f72fddaa29d6ba0d6956f8fcf1db6b457f8c0fd' })))), h("div", { key: '2294cc2cb2c5947d904340b0daa3a81e6b18f1e1', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: '14844d23f7ae2ac24c82fe0d21f5f2f5b423c53e' }))));
+            } }, h("button", { key: '75df669a8a5693fb90755daccbb85a09478124cc', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: 'b9d9fe9346d98fda9c97f999a1667645a58e3686' })))), h("div", { key: '03997499224b2d881c755eef234cee9dda4e2828', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: '0d983ff976eb7a90b92030b3ef9a33c135aab90a' }))));
     }
     static get is() { return "digi-tablist"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-tablist-panel/tablist-panel.js

@@ -9,11 +9,11 @@ export class NavigationTabPanel {
         this.isVisible = false;
     }
     render() {
-        return (h(Host, { key: 'c6085ad48782a59362e55f1c12cfaf928fc40c47' }, h("div", { key: '23da99f4d99d1a88e1125f127e7de150e6ef0aea', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
+        return (h(Host, { key: '86f137cc5e2a52c59307d8efd21981606c84478e' }, h("div", { key: '642ae49a6b9c667b786acd732d30b5e62f0a629e', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
                 display: this.isVisible ? 'initial' : 'none',
                 overflowX: 'hidden',
                 overflowY: 'auto'
-            } }, h("slot", { key: 'a798b98cbc83639854995d446b457f3f39fbf3ab' }))));
+            } }, h("slot", { key: '01cdafb4516423f5561fdf8d8128fc7370e4f9ec' }))));
     }
     static get is() { return "digi-tablist-panel"; }
     static get encapsulation() { return "scoped"; }

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

@@ -168,7 +168,7 @@ export class NavigationVerticalMenu {
         };
     }
     render() {
-        return (h("nav", { key: 'e7dd90acdde937b4474ffc6d615aa32324e60437', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'e060c8c7455c3db6bd7c18a9ceb52ee0d13cc6ac' })));
+        return (h("nav", { key: 'fbfc0638443d0632580c4ae2c53090b4e3f1e5a6', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '755eafab9d245bf601b28f3b5b5777920f344156' })));
     }
     static get is() { return "digi-navigation-vertical-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -115,24 +115,24 @@ export class NavigationVerticalMenuItem {
         }
     }
     render() {
-        return (h("host", { key: '90998bfdc035aafce066f5c449b2baf7b22013a4', class: {
+        return (h("host", { key: '2f2359793d28c6ba0716683157208d17efc6251a', class: {
                 'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
                 'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
-            } }, h("div", { key: '5aa15246813f9c19cb5a11b51a3364f9c4c81ecb', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '51a6359d7acd27c3233640291799c507cc9abea4', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '05d2730b34df61b45cb4529ab06724d76135c2bf', id: `${this.afId}-link`, href: this.afHref, class: {
+            } }, h("div", { key: 'b3bff02bdaf99cca35c2f4b17fe25b85ea816656', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '7e312eeeec0f3f458208739d95856c32379da7c4', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '1ab2faf7e35bc196d35521b27681a0bc7fc40774', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__has-subnav': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive,
                 'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '728fcec109a200b1bc88b94aa65a0cd95f7f26ec', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '3f8f7112d0b425241470c5895616217b88e337a2', name: "icon" })), h("span", { key: '16e6a72b7e54fc6a05418882809bfa3a5001d733', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a71df07d1edcf382b014045c03f4dd3f24308a78', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '333224149090b0511766d970337872255a037c40', name: "badge" }))), h("button", { key: '6225b3945f66c7d8309727972a6c78d5e389e089', type: "button", id: `${this.afId}-toggle-button`, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'cd3f002b2f815b4408c98e8321d57475e24233de', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '5eadc9a85b08e5b6c543ce935c266d7b9151b4fb', name: "icon" })), h("span", { key: '759938bb34b8af5c480c6dd1e51ef42c6a79d0b8', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '5c81f925ab25ed96e0819d55ee06daad4e47ae9a', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '7b7dfe574e6355428823ce168911c6e03884797d', name: "badge" }))), h("button", { key: 'a0a7e83416fc0797ef8aca5ff0c612731901a03e', type: "button", id: `${this.afId}-toggle-button`, class: {
                 'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
                 'digi-navigation-vertical-menu-item__button--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '03cfa0a703525883cbed486d55e21f0977d8ba90', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '8085c37fb501a202dd892e2afd218cd961f23948', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '597bbb20edad42bff6cd072b3df0b4fc7b48ac85', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: 'f1930269af1d34f9bb5dad7660e5316a5d55c9a1', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '7b2bc0c07007fd87f5d665f43ce0d543f09e5d71', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '938fc1e8f1aa2c61f96bb280639275cacfa7db91', name: "icon" })), h("span", { key: 'bdd05664a67e04fda3a70553cf07a5a9915eda55', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '053bab38d026bde9be6440a9ef446e761da81fad', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '338867e2b365f9912aec5c81200fcb2a5cfaf2b1', name: "badge" })), h("span", { key: '87275b1021b7257114f2c9d99335821c6de13696', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'aa36f5138af4bf36029ddcb4a83a836c5a8bf455' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '63ad76cfdf49432658d6d9cb4dfad57283739136', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '6ed218c0c51b2444f5f3c3028554cfb38eee50ec', id: `${this.afId}-link`, href: this.afHref, class: {
+            }, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: '9c42984717dee2b6eac09ff50611e63cea6e189b', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'acd1fe02c6dcb6113f7849c4b0c29b7e5359da06', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '68c573eb24d342396f932b4474e704a85199dbf6', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '8510c79aa62ba83064b8ea1a464a4c973e96d83c', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '72bc6c4d86ff6c3999d1902adf5dbe516dde8863', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '16e2647a296b7021163381f8fa42c570167696ef', name: "icon" })), h("span", { key: '5c44a355878aaa6f5528ea9b220f25daf80f34f7', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '42f91b15bb3d99347b93bc1c06adf3095f88c153', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'b016a90afff30650ebd88e86c2b52c32be67c209', name: "badge" })), h("span", { key: '35ae3a1d50831d977730d4fb7dea0b5ad90d0466', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '7b482d5ecab31c6d98e6cdfba5808b74c5dd050c' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '47a5658c6f6e049e4b52c5146130e1ea9f4de598', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: '934f930abd86abf7014bfd59f737339714c82ff1', id: `${this.afId}-link`, href: this.afHref, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '8f973191164b025edc6af194a4a51768c4c72e74', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '2f7ab8db20dcd3850af9041eda318a8732e2f79a', name: "icon" })), h("span", { key: 'ef02a477469133bbd5469f1a65d345e8fa445697', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '29f5efe7b0397a2156cf1149b551e3de2356a606', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'f198a9ee32674f68c34b94243d9564c3cc359323', name: "badge" })))), this.isActive && (h("a", { key: 'b23cc5d4ef0c6795412628eedcea7330c6524f40', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'c112a0e8462e04be069feb62a4af311c150cbb18', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '8884a6a300bf211b177354ce34ce7aac8f49d228', name: "icon" })), h("span", { key: 'c26f8fd29f0b4a1d8612a5a576d6410ca930d754', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'ecad78e4ea28f5aaea194e2c84fd0c04b3c331d1', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '734ba82ec71353f514a700921c8fe23d8c6ca2f5', name: "badge" })))), this.isActive && (h("a", { key: 'ccdff17960fe8d78d111435d11626f901c096f11', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
                 'digi-navigation-vertical-menu-item__link': true,
                 'digi-navigation-vertical-menu-item__link--active': this.isActive
-            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'f8fffcbdc3b3e177dae3457b6997a2fc08e0dbcd', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '44aa12c4095825a0c9de923123778334d3c1a6b3', name: "icon" })), h("span", { key: 'd67c07434dec6d29dead94264bbb1a56b87b6dbc', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '0e627f689ca82f5eeea9f2cc86e1e8841323d55b', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'b70c627546c1358aeeea11ebc9aae3f015cbb160', name: "badge" })))))))));
+            }, onClick: (e) => this.clickHandler(e) }, h("div", { key: '98b6ef79ab34656585aa442ea9a7004d845fa46c', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '5dc5abd4ec44aa243b07b8c30694560fec15c4b5', name: "icon" })), h("span", { key: '657145f6767c2ce1be8e2a9dab7489e5cfa694ef', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'e868ca7ce91446e75a7850b1f65629167124db43', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'dee1d6d5c667890a005ed3f4c22eb1daee71f4e2', name: "badge" })))))))));
     }
     static get is() { return "digi-navigation-vertical-menu-item"; }
     static get encapsulation() { return "scoped"; }