@designsystem-se/af 31.3.0

package/components/digi-navigation-sidebar.js

@@ -0,0 +1,360 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f124fce4.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { d as NavigationSidebarPosition, e as NavigationSidebarVariation, c as NavigationSidebarMobileVariation, a as NavigationSidebarHeadingLevel, N as NavigationSidebarCloseButtonPosition, b as NavigationSidebarMobilePosition } from './p-f600576a.js';
+import { U as UtilBreakpointObserverBreakpoints } from './p-cdcaf0eb.js';
+import { d as defineCustomElement$5 } from './p-09e0586b.js';
+import { d as defineCustomElement$4 } from './p-32456868.js';
+import { d as defineCustomElement$3 } from './p-1b6bd776.js';
+import { d as defineCustomElement$2 } from './p-3c2bb3be.js';
+
+const navigationSidebarCss = ".sc-digi-navigation-sidebar-h{--digi--navigation-sidebar--wrapper--position:fixed;--digi--navigation-sidebar--wrapper--background-color:var(--digi--color--background--primary);--digi--navigation-sidebar--wrapper--transition:all var(--digi--animation--duration--base);--digi--navigation-sidebar--wrapper--padding:0;--digi--navigation-sidebar--wrapper--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--navigation-sidebar--wrapper--box-shadow--backdrop:0 0 3.125rem rgba(0, 0, 0, 0.35);--digi--navigation-sidebar--wrapper--border:solid var(--digi--border-width--primary) var(--digi--color--border--primary);--digi--navigation-sidebar--wrapper--width:21.875rem;--digi--navigation-sidebar--wrapper--width--small--fullwidth:100%;--digi--navigation-sidebar--wrapper--width--small:90vw;--digi--navigation-sidebar--wrapper--margin:0 0 0 -21.875rem;--digi--navigation-sidebar--wrapper--z-index:1999;--digi--navigation-sidebar--header--padding:var(--digi--padding--medium);--digi--navigation-sidebar--header--border:solid var(--digi--border-width--primary) var(--digi--color--border--neutral-4);--digi--navigation-sidebar--heading--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-sidebar--heading--font-size:var(--digi--typography--heading-3--font-size--desktop);--digi--navigation-sidebar--heading--font-size--desktop:var(--digi--typography--heading-3--font-size--desktop-large);--digi--navigation-sidebar--heading--font-weight:var(--digi--typography--heading-3--font-weight--desktop);--digi--navigation-sidebar--heading--color:var(--digi--color--text--primary);--digi--navigation-sidebar--backdrop--transition:all var(--digi--animation--duration--base);--digi--navigation-sidebar--backdrop--background:rgba(0, 0, 0, 0.7);--digi--navigation-sidebar--backdrop--z-index:1998;--digi--navigation-sidebar--close-button--padding:0;position:relative;display:block}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar.sc-digi-navigation-sidebar{height:100%}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.sc-digi-navigation-sidebar{top:0;bottom:0;z-index:var(--digi--navigation-sidebar--wrapper--z-index);visibility:hidden;opacity:0;height:100%;background-color:var(--digi--navigation-sidebar--wrapper--background-color);padding:var(--digi--navigation-sidebar--wrapper--padding);box-sizing:border-box;width:var(--digi--navigation-sidebar--wrapper--width);margin:var(--digi--navigation-sidebar--wrapper--margin)}@media (prefers-reduced-motion){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--transition:$animation__duration--reduced}}@media screen and (max-width: 47.9375rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.sc-digi-navigation-sidebar{transition:var(--digi--navigation-sidebar--wrapper--transition)}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.digi-navigation-sidebar__wrapper--mobile--default.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--width:var(\n      --digi--navigation-sidebar--wrapper--width--small\n    )}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.digi-navigation-sidebar__wrapper--mobile--fullwidth.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--width:var(\n      --digi--navigation-sidebar--wrapper--width--small--fullwidth\n    )}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--active.sc-digi-navigation-sidebar{opacity:1;visibility:initial}@media screen and (max-width: 47.9375rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--static.sc-digi-navigation-sidebar{position:var(--digi--navigation-sidebar--wrapper--position)}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--static.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--width:100%}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--over.sc-digi-navigation-sidebar{box-shadow:var(--digi--navigation-sidebar--wrapper--box-shadow)}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--over.sc-digi-navigation-sidebar,.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--push.sc-digi-navigation-sidebar{transition:var(--digi--navigation-sidebar--wrapper--transition);position:var(--digi--navigation-sidebar--wrapper--position)}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--push.digi-navigation-sidebar__wrapper--start.sc-digi-navigation-sidebar{border-right:var(--digi--navigation-sidebar--wrapper--border)}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--push.digi-navigation-sidebar__wrapper--end.sc-digi-navigation-sidebar{border-left:var(--digi--navigation-sidebar--wrapper--border)}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--backdrop.digi-navigation-sidebar__wrapper--push.sc-digi-navigation-sidebar,.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--backdrop.digi-navigation-sidebar__wrapper--over.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--box-shadow:var(\n      --digi--navigation-sidebar--wrapper--box-shadow--backdrop\n    );box-shadow:var(--digi--navigation-sidebar--wrapper--box-shadow)}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--start.sc-digi-navigation-sidebar{left:0}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--start.digi-navigation-sidebar__wrapper--active.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--margin:0}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--end.sc-digi-navigation-sidebar{right:0;--digi--navigation-sidebar--wrapper--margin:0 -21.875rem 0 0}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--end.digi-navigation-sidebar__wrapper--active.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--margin:0}}@media screen and (max-width: 47.9375rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--mobile--start.sc-digi-navigation-sidebar{left:0}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--mobile--start.digi-navigation-sidebar__wrapper--active.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--margin:0}}@media screen and (max-width: 47.9375rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--mobile--end.sc-digi-navigation-sidebar{right:0;--digi--navigation-sidebar--wrapper--margin:0 -21.875rem 0 0}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--mobile--end.digi-navigation-sidebar__wrapper--active.sc-digi-navigation-sidebar{--digi--navigation-sidebar--wrapper--margin:0}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--sticky-header.sc-digi-navigation-sidebar .digi-navigation-sidebar__inner.sc-digi-navigation-sidebar{display:flex;flex-direction:column;max-height:100vh}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--sticky-header.sc-digi-navigation-sidebar .digi-navigation-sidebar__header.sc-digi-navigation-sidebar{border-bottom:var(--digi--navigation-sidebar--header--border)}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--sticky-header.sc-digi-navigation-sidebar .digi-navigation-sidebar__content.sc-digi-navigation-sidebar{overflow-y:auto;overflow-x:hidden;max-height:100vh}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--sticky-header.digi-navigation-sidebar__wrapper--static.sc-digi-navigation-sidebar .digi-navigation-sidebar__inner.sc-digi-navigation-sidebar{max-height:unset}}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper--sticky-header.digi-navigation-sidebar__wrapper--static.sc-digi-navigation-sidebar .digi-navigation-sidebar__content.sc-digi-navigation-sidebar{overflow-y:unset;overflow-x:unset;max-height:unset}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.sc-digi-navigation-sidebar:not(.digi-navigation-sidebar__wrapper--sticky-header) .digi-navigation-sidebar__inner.sc-digi-navigation-sidebar{overflow-y:auto;overflow-x:hidden;max-height:100vh}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__wrapper.sc-digi-navigation-sidebar:not(.digi-navigation-sidebar__wrapper--sticky-header).digi-navigation-sidebar__wrapper--static .digi-navigation-sidebar__inner.sc-digi-navigation-sidebar{overflow-y:unset;overflow-x:unset;max-height:unset}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__header.sc-digi-navigation-sidebar{display:flex;flex-wrap:wrap;align-items:center;padding:var(--digi--navigation-sidebar--header--padding)}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__header--close-button--end.sc-digi-navigation-sidebar{justify-content:flex-end}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__heading.sc-digi-navigation-sidebar{font-family:var(--digi--navigation-sidebar--heading--font-family);font-size:var(--digi--navigation-sidebar--heading--font-size);font-weight:var(--digi--navigation-sidebar--heading--font-weight);color:var(--digi--navigation-sidebar--heading--color);margin:0 auto 0 0}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__heading.sc-digi-navigation-sidebar:focus{outline:none}@media (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__heading.sc-digi-navigation-sidebar{font-size:var(--digi--navigation-sidebar--heading--font-size--desktop)}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__close-button.sc-digi-navigation-sidebar{--digi--button--padding--medium:var(\n    --digi--navigation-sidebar--close-button--padding\n  );--digi--button--outline--focus:solid 2px\n    var(--digi--color--border--secondary)}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop.sc-digi-navigation-sidebar{visibility:hidden;opacity:0;transition:var(--digi--navigation-sidebar--backdrop--transition);position:relative;z-index:var(--digi--navigation-sidebar--backdrop--z-index)}@media (prefers-reduced-motion){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop.sc-digi-navigation-sidebar{--digi--navigation-sidebar--backdrop--transition:$animation__duration--reduced}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--active.sc-digi-navigation-sidebar,.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--active--mobile.sc-digi-navigation-sidebar{background:var(--digi--navigation-sidebar--backdrop--background);width:100%;height:100%;position:fixed;top:0;left:0;visibility:visible;opacity:1}@media screen and (min-width: 48rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop.sc-digi-navigation-sidebar{display:none}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--active.sc-digi-navigation-sidebar{display:block}}@media screen and (max-width: 47.9375rem){.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop.sc-digi-navigation-sidebar{display:none}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--active--mobile.sc-digi-navigation-sidebar{display:block}}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--hidden.sc-digi-navigation-sidebar{display:none}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--hidden--active--mobile.sc-digi-navigation-sidebar{display:block}.sc-digi-navigation-sidebar-h .digi-navigation-sidebar__backdrop--hidden.sc-digi-navigation-sidebar{display:none}";
+const DigiNavigationSidebarStyle0 = navigationSidebarCss;
+
+const NavigationSidebar = /*@__PURE__*/ proxyCustomElement(class NavigationSidebar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.afOnClose = createEvent(this, "afOnClose", 7);
+        this.afOnEsc = createEvent(this, "afOnEsc", 7);
+        this.afOnBackdropClick = createEvent(this, "afOnBackdropClick", 7);
+        this.afOnToggle = createEvent(this, "afOnToggle", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this._focusableElementsSelectors = 'a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]';
+        this.focusableElements = [];
+        this.isMobile = undefined;
+        this.showHeader = true;
+        this.afPosition = NavigationSidebarPosition.START;
+        this.afVariation = NavigationSidebarVariation.OVER;
+        this.afMobilePosition = undefined;
+        this.afMobileVariation = NavigationSidebarMobileVariation.DEFAULT;
+        this.afHeading = undefined;
+        this.afHeadingLevel = NavigationSidebarHeadingLevel.H2;
+        this.afCloseButtonPosition = NavigationSidebarCloseButtonPosition.START;
+        this.afStickyHeader = undefined;
+        this.afCloseButtonText = undefined;
+        this.afCloseButtonAriaLabel = undefined;
+        this.afHideHeader = undefined;
+        this.afFocusableElement = undefined;
+        this.afCloseFocusableElement = undefined;
+        this.afActive = false;
+        this.afBackdrop = true;
+        this.afId = randomIdGenerator('digi-navigation-context-menu');
+    }
+    /**
+     * Uppdatera lista av element som ingår i fokusfälla
+     * @en Update elements in focus trap
+     */
+    async afMSetFocusableElements() {
+        this.getFocusableItems();
+    }
+    toggleHandler(e) {
+        this._closeFocusableElement = e.target.querySelector('button');
+    }
+    breakpointHandler(e) {
+        if (e.target.matches('digi-util-breakpoint-observer')) {
+            this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL
+                    ? true
+                    : false;
+        }
+    }
+    toggleTransitionEndHandler(e) {
+        const element = e.target;
+        if (element.matches('.digi-navigation-sidebar__wrapper') &&
+            e.propertyName === 'visibility') {
+            this.setFocus();
+        }
+    }
+    clickHandler(e) {
+        // If clicking on toggle button, refresh the focusable items list
+        // with the new sub-level of items
+        if (this.shouldUseFocusTrap) {
+            const el = e.detail.target;
+            if (el.tagName.toLowerCase() === 'button') {
+                setTimeout(() => {
+                    this.getFocusableItems();
+                }, 100);
+            }
+        }
+    }
+    setMobileView(isMobile) {
+        isMobile && this.afActive
+            ? (this.disablePageScroll(), this.getFocusableItems())
+            : this.enablePageScroll();
+    }
+    activeChange(active) {
+        if (this.isMobile ||
+            (this.afBackdrop &&
+                !this.isMobile &&
+                this.afVariation !== NavigationSidebarVariation.STATIC)) {
+            this.pageScrollToggler();
+        }
+        if (this.afVariation === NavigationSidebarVariation.PUSH) {
+            this.pushPageContentToggler();
+        }
+        this.afOnToggle.emit(active);
+    }
+    headerChange(hide) {
+        this.setShowHeader(hide);
+    }
+    setShowHeader(hide) {
+        this.showHeader = !hide;
+    }
+    setHasFooter() {
+        const footer = !!this.hostElement.querySelector('[slot="footer"]');
+        if (footer) {
+            this._hasFooter = footer;
+        }
+    }
+    setFocus() {
+        if (this.afActive) {
+            let el;
+            let firstNavLink;
+            // Set first nav link
+            if (!this.afHideHeader) {
+                firstNavLink = this.focusableElements[1];
+            }
+            else {
+                firstNavLink = this.firstFocusableEl;
+            }
+            if (this.afFocusableElement) {
+                el = this.hostElement.querySelector(`${this.afFocusableElement}`);
+            }
+            else {
+                if (this.afHeading) {
+                    el = this._heading;
+                }
+                else {
+                    el = firstNavLink;
+                }
+            }
+            if (el) {
+                el.focus();
+            }
+        }
+        else {
+            if (this.afCloseFocusableElement) {
+                const el = document.querySelector(`${this.afCloseFocusableElement}`);
+                el.focus();
+            }
+            else if (this._closeFocusableElement) {
+                const el = this._closeFocusableElement;
+                el.focus();
+            }
+        }
+    }
+    pushPageContentToggler() {
+        document.body.classList.remove('digi--has-open-sidebar-right-push');
+        document.body.classList.remove('digi--has-open-sidebar-left-push');
+        if (this.afActive && this.afVariation === NavigationSidebarVariation.PUSH) {
+            this.afPosition === NavigationSidebarPosition.END
+                ? document.body.classList.add('digi--has-open-sidebar-right-push')
+                : document.body.classList.add('digi--has-open-sidebar-left-push');
+        }
+    }
+    pageScrollToggler() {
+        this.afActive ? this.disablePageScroll() : this.enablePageScroll();
+    }
+    enablePageScroll() {
+        document.body.style.height = '';
+        document.body.style.overflowY = '';
+        document.body.style.paddingRight = '';
+    }
+    disablePageScroll() {
+        document.body.style.height = '100vh';
+        document.body.style.overflowY = 'hidden';
+        // document.body.style.paddingRight = '17px';
+    }
+    closeHandler(e) {
+        this.afActive = false;
+        this.afOnClose.emit(e);
+    }
+    escHandler(e) {
+        if (this.isMobile ||
+            this.afVariation !== NavigationSidebarVariation.STATIC) {
+            this.afActive = false;
+            this.afOnEsc.emit(e);
+        }
+    }
+    tabHandler(e) {
+        if (this.shouldUseFocusTrap) {
+            if (document.activeElement === this.lastFocusableEl) {
+                e.detail.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    backdropClickHandler(e) {
+        this.afActive = false;
+        this.afOnBackdropClick.emit(e);
+    }
+    shiftHandler(e) {
+        if (this.shouldUseFocusTrap) {
+            if (document.activeElement === this.firstFocusableEl) {
+                e.detail.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+        }
+    }
+    componentWillLoad() {
+        this.setHasFooter();
+        if (!this.afMobilePosition) {
+            this.afMobilePosition =
+                this.afPosition === NavigationSidebarPosition.START
+                    ? NavigationSidebarMobilePosition.START
+                    : NavigationSidebarMobilePosition.END;
+        }
+        if (this.afVariation === NavigationSidebarVariation.PUSH) {
+            this.pushPageContentToggler();
+            const reducedMotion = this.reducedMotion();
+            if (!reducedMotion) {
+                document.body.style.transition = 'var(--digi--page--transition)';
+            }
+        }
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+        setTimeout(() => {
+            this.getFocusableItems();
+        }, 100);
+        this.headerChange(this.afHideHeader);
+        if (this.afBackdrop &&
+            this.afVariation !== NavigationSidebarVariation.STATIC) {
+            this.pageScrollToggler();
+        }
+    }
+    componentWillUpdate() {
+        this.setHasFooter();
+        this.pushPageContentToggler();
+    }
+    get shouldUseFocusTrap() {
+        return ((this.isMobile ||
+            this.afVariation !== NavigationSidebarVariation.STATIC) &&
+            this.focusableElements.length > 0);
+    }
+    getFocusableItems() {
+        const allElements = this._wrapper.querySelectorAll(this._focusableElementsSelectors);
+        // Filters out visible items
+        this.focusableElements = Array.prototype.slice
+            .call(allElements)
+            .filter(function (item) {
+            return item.offsetParent !== null;
+        });
+        // Sets first and last focusable element
+        if (this.focusableElements.length > 0) {
+            this.firstFocusableEl = this.focusableElements[0];
+            this.lastFocusableEl = this.focusableElements[this.focusableElements.length - 1];
+        }
+    }
+    reducedMotion() {
+        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+        return !reduced || reduced.matches ? true : false;
+    }
+    get cssModifiers() {
+        return {
+            'digi-navigation-sidebar__wrapper--start': this.afPosition === NavigationSidebarPosition.START,
+            'digi-navigation-sidebar__wrapper--end': this.afPosition === NavigationSidebarPosition.END,
+            'digi-navigation-sidebar__wrapper--over': this.afVariation === NavigationSidebarVariation.OVER,
+            'digi-navigation-sidebar__wrapper--push': this.afVariation === NavigationSidebarVariation.PUSH,
+            'digi-navigation-sidebar__wrapper--static': this.afVariation === NavigationSidebarVariation.STATIC,
+            'digi-navigation-sidebar__wrapper--mobile--start': this.afMobilePosition === NavigationSidebarMobilePosition.START,
+            'digi-navigation-sidebar__wrapper--mobile--end': this.afMobilePosition === NavigationSidebarMobilePosition.END,
+            'digi-navigation-sidebar__wrapper--mobile--default': this.afMobileVariation === NavigationSidebarMobileVariation.DEFAULT,
+            'digi-navigation-sidebar__wrapper--mobile--fullwidth': this.afMobileVariation === NavigationSidebarMobileVariation.FULLWIDTH,
+            'digi-navigation-sidebar__wrapper--mobile--active': this.isMobile,
+            'digi-navigation-sidebar__wrapper--active': this.afActive,
+            'digi-navigation-sidebar__wrapper--backdrop': this.afBackdrop,
+            'digi-navigation-sidebar__wrapper--sticky-header': this.afStickyHeader
+        };
+    }
+    get cssModifiersBackdrop() {
+        return {
+            'digi-navigation-sidebar__backdrop--active': this.afActive && this.afBackdrop,
+            'digi-navigation-sidebar__backdrop--active--mobile': this.afActive &&
+                this.isMobile &&
+                this.afMobileVariation !== NavigationSidebarMobileVariation.FULLWIDTH,
+            'digi-navigation-sidebar__backdrop--hidden': !this.isMobile && this.afVariation === NavigationSidebarVariation.STATIC
+        };
+    }
+    render() {
+        return (h(Host, { key: '8018462f5dbffcdeea82d827dc89d6757cc19282' }, h("digi-util-breakpoint-observer", { key: '55d663deca445bcce3c717fb1bff8062be9b4f31' }, h("digi-util-keydown-handler", { key: '61c580784ff05009639336c28d6fe54a4e7cd7ba', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '0ab57dd384b464e1d233b13e771aede139c39be8', class: "digi-navigation-sidebar", "aria-hidden": !this.afActive ? 'true' : 'false' }, h("div", { key: '11fc9759bd3b0bd5e7625d49c915aa4f7521801e', "aria-hidden": "true", class: Object.assign({ 'digi-navigation-sidebar__backdrop': true }, this.cssModifiersBackdrop), onClick: (e) => this.backdropClickHandler(e) }), h("div", { key: '5becffb4db0981cd7cb253463acf314e65991670', class: Object.assign({ 'digi-navigation-sidebar__wrapper': true }, this.cssModifiers) }, h("div", { key: '44ad8423569ed198c3a64a3d0b415c951ca2052a', class: "digi-navigation-sidebar__inner", ref: (el) => {
+                this._wrapper = el;
+            } }, this.showHeader ? (h("div", { class: {
+                'digi-navigation-sidebar__header': true,
+                'digi-navigation-sidebar__header--close-button--start': this.afCloseButtonPosition ===
+                    NavigationSidebarCloseButtonPosition.START,
+                '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: 'a8f87375a421a32e8b62d9a5e4f49eb533629599', class: "digi-navigation-sidebar__content" }, h("div", { key: 'a50efdb88a0b5e1a697cbf653ca67a3650920a3d', class: "digi-navigation-sidebar__nav-wrapper" }, h("slot", { key: 'fb36edd395110962a07599a7a1880cd59fbef6b2' })), this._hasFooter && (h("div", { key: 'e1565dcd19b608a1cf679d0c59c5a284f1f97fc1', class: "digi-navigation-sidebar__footer" }, h("slot", { key: 'd6ebd31ee3285a7d3a65eb37ab75da38a38025d1', name: "footer" })))))))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "isMobile": ["setMobileView"],
+        "afActive": ["activeChange"],
+        "afHideHeader": ["headerChange"]
+    }; }
+    static get style() { return DigiNavigationSidebarStyle0; }
+}, [6, "digi-navigation-sidebar", {
+        "afPosition": [1, "af-position"],
+        "afVariation": [1, "af-variation"],
+        "afMobilePosition": [1, "af-mobile-position"],
+        "afMobileVariation": [1, "af-mobile-variation"],
+        "afHeading": [1, "af-heading"],
+        "afHeadingLevel": [1, "af-heading-level"],
+        "afCloseButtonPosition": [1, "af-close-button-position"],
+        "afStickyHeader": [4, "af-sticky-header"],
+        "afCloseButtonText": [1, "af-close-button-text"],
+        "afCloseButtonAriaLabel": [1, "af-close-button-aria-label"],
+        "afHideHeader": [4, "af-hide-header"],
+        "afFocusableElement": [1, "af-focusable-element"],
+        "afCloseFocusableElement": [1, "af-close-focusable-element"],
+        "afActive": [4, "af-active"],
+        "afBackdrop": [4, "af-backdrop"],
+        "afId": [1, "af-id"],
+        "isMobile": [32],
+        "showHeader": [32],
+        "afMSetFocusableElements": [64]
+    }, [[8, "afOnToggle", "toggleHandler"], [0, "afOnChange", "breakpointHandler"], [0, "transitionend", "toggleTransitionEndHandler"], [0, "afOnClick", "clickHandler"]], {
+        "isMobile": ["setMobileView"],
+        "afActive": ["activeChange"],
+        "afHideHeader": ["headerChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-navigation-sidebar", "digi-button", "digi-icon-x", "digi-util-breakpoint-observer", "digi-util-keydown-handler"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-navigation-sidebar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavigationSidebar);
+            }
+            break;
+        case "digi-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "digi-icon-x":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "digi-util-breakpoint-observer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-util-keydown-handler":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DigiNavigationSidebar = NavigationSidebar;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiNavigationSidebar, defineCustomElement };

package/components/digi-navigation-vertical-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DigiNavigationVerticalMenuItem extends Components.DigiNavigationVerticalMenuItem, HTMLElement {}
+export const DigiNavigationVerticalMenuItem: {
+    prototype: DigiNavigationVerticalMenuItem;
+    new (): DigiNavigationVerticalMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/digi-navigation-vertical-menu-item.js

@@ -0,0 +1,194 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f124fce4.js';
+import { r as randomIdGenerator } from './p-ffe5c0e8.js';
+import { d as defineCustomElement$3 } from './p-9dd1b2ec.js';
+import { d as defineCustomElement$2 } from './p-688892ba.js';
+
+const navigationVerticalMenuItemCss = ".digi--util--fs--xs.sc-digi-navigation-vertical-menu-item{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-navigation-vertical-menu-item{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-navigation-vertical-menu-item{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-navigation-vertical-menu-item{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-navigation-vertical-menu-item{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-navigation-vertical-menu-item{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-navigation-vertical-menu-item{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-navigation-vertical-menu-item{padding-top:5rem !important}.digi--util--pb--1.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-navigation-vertical-menu-item{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-navigation-vertical-menu-item{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-navigation-vertical-menu-item{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-navigation-vertical-menu-item{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-navigation-vertical-menu-item{padding:2.5rem !important}.digi--util--p--60.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-navigation-vertical-menu-item{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-navigation-vertical-menu-item{padding:4.5rem !important}.digi--util--p--90.sc-digi-navigation-vertical-menu-item{padding:5rem !important}.digi--util--ptb--1.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-navigation-vertical-menu-item{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-navigation-vertical-menu-item{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-navigation-vertical-menu-item{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-navigation-vertical-menu-item{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-navigation-vertical-menu-item{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-navigation-vertical-menu-item{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-navigation-vertical-menu-item{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-navigation-vertical-menu-item{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-navigation-vertical-menu-item{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-navigation-vertical-menu-item{display:none}.sc-digi-navigation-vertical-menu-item-h{--digi--navigation-vertical-menu-item--toggle-icon--character:\"+\";--digi--navigation-vertical-menu-item--toggle-icon--character--active:\"-\";--digi--navigation-vertical-menu-item--toggle-icon--color:var(--digi--color--icons--complementary-1);--digi--navigation-vertical-menu-item--toggle-icon--color--hover:var(--digi--color--icons--inverted);--digi--navigation-vertical-menu-item--toggle-icon--color--active:var(--digi--color--icons--complementary-1);--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--color--background--neutral-6);--digi--navigation-vertical-menu-item--toggle-icon--background--hover:var(--digi--color--background--inverted-2);--digi--navigation-vertical-menu-item--toggle-icon--background--active:var(--digi--color--background--neutral-7);--digi--navigation-vertical-menu-item--toggle-icon--size:var(--digi--typography--tag--font-size--desktop);--digi--navigation-vertical-menu-item--toggle-icon--width:1.5rem;--digi--navigation-vertical-menu-item--toggle-icon--height:1.5rem;--digi--navigation-vertical-menu-item--icon--margin:0 var(--digi--margin--smaller) 0 0;--digi--navigation-vertical-menu-item--icon--wrapper--width:1.5rem;--digi--navigation-vertical-menu-item--icon--color:var(--digi--color--border--primary);--digi--navigation-vertical-menu-item--icon--height:1.5rem;--digi--navigation-vertical-menu-item--icon--width:1.5rem;--digi--navigation-vertical-menu-item--active-indicator-background-color:var(--digi--color--border--tertiary);--digi--navigation-vertical-menu-item--active-indicator-width:4px;--digi--navigation-vertical-menu-item--active-indicator-left:0;--digi--navigation-vertical-menu-item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-vertical-menu-item--font-size:var(--digi--typography--vertical-menu-level-2--font-size--desktop);--digi--navigation-vertical-menu-item--font-weight:var(--digi--typography--vertical-menu-level-2--font-weight--desktop);--digi--navigation-vertical-menu-item--font-weight--active:var(--digi--typography--vertical-menu-level-1--font-weight--desktop);--digi--navigation-vertical-menu-item--background:transparent;--digi--navigation-vertical-menu-item--background--hover:transparent;--digi--navigation-vertical-menu-item--background--active:var(--digi--color--background--neutral-5);--digi--navigation-vertical-menu-item--color:var(--digi--color--text--primary);--digi--navigation-vertical-menu-item--color--hover:var(--digi--color--text--link);--digi--navigation-vertical-menu-item--color--active:var(--digi--color--text--primary);--digi--navigation-vertical-menu-item--border--width:var(--digi--border-width--primary);--digi--navigation-vertical-menu-item--border--color:var(--digi--color--border--primary);--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium);--digi--navigation-vertical-menu-item--padding--toggle:var(--digi--padding--small) 0;--digi--navigation-vertical-menu-item--width:100%;--digi--navigation-vertical-menu-item--divider--margin:var(--digi--margin--small) var(--digi--margin--medium);--digi--navigation-vertical-menu-item--divider--border:solid var(--digi--border-width--primary) var(--digi--color--border--primary);--digi--navigation-vertical-menu-item--outline:initial;--digi--navigation-vertical-menu-item--outline--focus:solid 2px var(--digi--color--border--secondary);--digi--navigation-vertical-menu-item--outline--focus--offset:-2px}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{display:block}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item[hidden].sc-digi-navigation-vertical-menu-item{display:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__text.sc-digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{margin-right:unset}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{justify-content:flex-start;overflow-wrap:normal}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__badge.sc-digi-navigation-vertical-menu-item{margin-left:11px;font-weight:initial}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__inner.sc-digi-navigation-vertical-menu-item{position:relative}@supports (display: grid){.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__inner--combined.sc-digi-navigation-vertical-menu-item{display:grid;grid-auto-flow:column;grid-gap:0;grid-template-columns:1fr auto;align-items:stretch}}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__collapse--hidden.sc-digi-navigation-vertical-menu-item{display:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__icon.sc-digi-navigation-vertical-menu-item{width:var(--digi--navigation-vertical-menu-item--icon--wrapper--width);margin:var(--digi--navigation-vertical-menu-item--icon--margin)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__text.sc-digi-navigation-vertical-menu-item{margin-right:auto}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item{font-family:var(--digi--navigation-vertical-menu-item--font-family);font-weight:var(--digi--navigation-vertical-menu-item--font-weight);font-size:var(--digi--navigation-vertical-menu-item--font-size);background:var(--digi--navigation-vertical-menu-item--background);color:var(--digi--navigation-vertical-menu-item--color);border:none;padding:var(--digi--navigation-vertical-menu-item--padding);outline:var(--digi--navigation-vertical-menu-item--outline);width:var(--digi--navigation-vertical-menu-item--width);text-align:left;display:flex;justify-content:space-between;box-sizing:border-box;text-decoration:none;overflow-wrap:anywhere}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item *.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item *.sc-digi-navigation-vertical-menu-item{pointer-events:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover{cursor:pointer}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover{text-decoration:underline;--digi--navigation-vertical-menu-item--color:var(\n    --digi--navigation-vertical-menu-item--color--hover\n  );--digi--navigation-vertical-menu-item--background:var(\n    --digi--navigation-vertical-menu-item--background--hover\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible{outline:var(--digi--navigation-vertical-menu-item--outline--focus);outline-offset:var(--digi--navigation-vertical-menu-item--outline--focus--offset)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--color:var(\n    --digi--navigation-vertical-menu-item--color--active\n  );--digi--navigation-vertical-menu-item--font-weight:var(\n    --digi--navigation-vertical-menu-item--font-weight--active\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item:hover{--digi--navigation-vertical-menu-item--color:var(\n    --digi--navigation-vertical-menu-item--color--active\n  )}.digi-navigation-vertical-menu--primary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item::before,.digi-navigation-vertical-menu--primary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item::before{content:\" \";display:block;position:absolute;width:var(--digi--navigation-vertical-menu-item--active-indicator-width);left:var(--digi--navigation-vertical-menu-item--active-indicator-left);top:0;bottom:0;background-color:var(--digi--navigation-vertical-menu-item--active-indicator-background-color);z-index:2}.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item,.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--background:var(\n    --digi--navigation-vertical-menu-item--background--active\n  )}.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item::before,.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item::before{content:\" \";display:block;position:absolute;width:var(--digi--navigation-vertical-menu-item--active-indicator-width);left:0;top:0;bottom:0;background-color:var(--digi--navigation-vertical-menu-item--active-indicator-background-color);z-index:2}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--expanded.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--expanded.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--font-weight:var(\n    --digi--navigation-vertical-menu-item--font-weight--active\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--toggle.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--toggle.sc-digi-navigation-vertical-menu-item{width:calc(1.5rem + var(--digi--padding--medium));display:flex;align-items:stretch;justify-content:center;padding:var(--digi--navigation-vertical-menu-item--padding--toggle)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--only-toggle.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--only-toggle.sc-digi-navigation-vertical-menu-item{padding-right:0}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--only-toggle.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--only-toggle.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item{width:calc(1.5rem + var(--digi--padding--medium))}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover+button.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover+button.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--toggle-icon--color:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--color--hover\n  );--digi--navigation-vertical-menu-item--toggle-icon--background:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--background--hover\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--toggle-icon--color:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--color--active\n  );--digi--navigation-vertical-menu-item--toggle-icon--background:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--background--active\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item:hover{--digi--navigation-vertical-menu-item--toggle-icon--color:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--color--hover\n  );--digi--navigation-vertical-menu-item--toggle-icon--background:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--background--hover\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item{position:relative;display:flex;justify-content:center;color:var(--digi--navigation-vertical-menu-item--toggle-icon--color)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item digi-icon-plus.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item digi-icon-minus.sc-digi-navigation-vertical-menu-item{--digi--icon--width:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--size\n  );--digi--icon--color:var(\n    --digi--navigation-vertical-menu-item--toggle-icon--color\n  )}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item::before{content:\"\";display:flex;position:absolute;align-items:center;justify-content:center;width:var(--digi--navigation-vertical-menu-item--toggle-icon--width);height:var(--digi--navigation-vertical-menu-item--toggle-icon--height);border-radius:var(--digi--navigation-vertical-menu-item--toggle-icon--width);background:var(--digi--navigation-vertical-menu-item--toggle-icon--background)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item>span.sc-digi-navigation-vertical-menu-item{display:inline-flex;position:absolute;align-items:center;justify-content:center;width:var(--digi--navigation-vertical-menu-item--toggle-icon--width);height:var(--digi--navigation-vertical-menu-item--toggle-icon--height)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__divider.sc-digi-navigation-vertical-menu-item{margin:var(--digi--navigation-vertical-menu-item--divider--margin);border:none;border-top:var(--digi--navigation-vertical-menu-item--divider--border)}.digi-navigation-vertical-menu-item__icon.sc-digi-navigation-vertical-menu-item-s>[slot^=icon],.digi-navigation-vertical-menu-item__icon .sc-digi-navigation-vertical-menu-item-s>[slot^=icon]{--digi--icon--color:var(\n    --digi--navigation-vertical-menu-item--icon--color\n  );--digi--icon--width:var(\n    --digi--navigation-vertical-menu-item--icon--width\n  );--digi--icon--height:var(\n    --digi--navigation-vertical-menu-item--icon--height\n  )}";
+const DigiNavigationVerticalMenuItemStyle0 = navigationVerticalMenuItemCss;
+
+const NavigationVerticalMenuItem = /*@__PURE__*/ proxyCustomElement(class NavigationVerticalMenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.afOnClick = createEvent(this, "afOnClick", 7);
+        this.hasSubnav = false;
+        this.hasIcon = false;
+        this.hasBadge = false;
+        this.isActive = undefined;
+        this.activeSubnav = undefined;
+        this.listItems = [];
+        this.afText = undefined;
+        this.afHref = undefined;
+        this.afAriaCurrent = undefined;
+        this.afActiveSubnav = undefined;
+        this.afActive = false;
+        this.afId = randomIdGenerator('digi-navigation-vertical-menu-item');
+        this.afOverrideLink = false;
+        this.afHasSubnav = false;
+        this.afLang = 'sv';
+    }
+    componentWillLoad() {
+        this.activeSubnav = this.afActiveSubnav;
+    }
+    componentDidLoad() {
+        this.setSubnav();
+        this.setHasIcon();
+        this.setHasBadge();
+        this.setHasSubnav();
+        this.setIsActive();
+    }
+    componentWillUpdate() {
+        this.setSubnav();
+        this.setHasIcon();
+        this.setHasBadge();
+        this.setHasSubnav();
+    }
+    setHasSubnav() {
+        var _a, _b;
+        this.hasSubnav = this.activeSubnav !== undefined;
+        if (this.hasSubnav) {
+            if (this.$subnav) {
+                this.$subnav.hidden = !this.activeSubnav;
+            }
+            this.activeSubnav
+                ? (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.classList.add('digi-navigation-vertical-menu__item--active')
+                : (_b = this.$parent) === null || _b === void 0 ? void 0 : _b.classList.remove('digi-navigation-vertical-menu__item--active');
+        }
+    }
+    onAfActiveSubnavChanged(newValue) {
+        this.activeSubnav = newValue;
+        this.setHasSubnav();
+    }
+    setIsActive() {
+        this.isActive = this.afActive;
+        this.isActive
+            ? this.hostElement.parentElement.classList.add('active')
+            : this.hostElement.parentElement.classList.remove('active');
+    }
+    setSubnav() {
+        if (this.hasSubnav) {
+            this.$subnav = this.hostElement.parentElement.querySelector('ul');
+            this.$parent = this.hostElement.parentElement;
+            // Check if UL-element exist or is rendered later dynamically
+            if (this.$subnav) {
+                this.$subnav.setAttribute('id', `${this.afId}-collapse-menu`);
+            }
+        }
+    }
+    setHasIcon() {
+        const icon = !!this.hostElement.querySelector('[slot="icon"]');
+        this.hasIcon = icon;
+    }
+    setHasBadge() {
+        const badge = !!this.hostElement.querySelector('[slot="badge"]');
+        this.hasBadge = badge;
+    }
+    clickHandler(e) {
+        const el = e.target;
+        if (el.tagName.toLowerCase() === 'a') {
+            if (this.afOverrideLink) {
+                e.preventDefault();
+            }
+            if (el.classList.contains('digi-navigation-vertical-menu-item__has-subnav')) {
+                this.activeSubnav = true;
+            }
+        }
+        else {
+            this.activeSubnav = !this.activeSubnav;
+        }
+        this.afOnClick.emit(e);
+    }
+    get toggleButtonText() {
+        return this.activeSubnav ? 'Stäng meny' : 'Öppna meny';
+    }
+    get cssModifiers() {
+        return {
+            'digi-navigation-vertical-menu-item': true,
+            'digi-navigation-vertical-menu-item--active': this.isActive,
+            'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav,
+            'digi-navigation-vertical-menu-item--icon': this.hasIcon,
+            'digi-navigation-vertical-menu-item--badge': this.hasBadge
+        };
+    }
+    get toggleIcon() {
+        if (this.activeSubnav) {
+            return h("digi-icon-minus", null);
+        }
+        else {
+            return h("digi-icon-plus", null);
+        }
+    }
+    render() {
+        return (h("host", { key: 'fa4304261a8eb95b9ed5d6ef084fcbfd96dc6373', class: {
+                'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
+                'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
+            } }, h("div", { key: 'bb742a697b793771cc5fe60442c6651f4ef908de', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '1f6a60c5e7130f92dff98acb238a40468398d86d', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: '45c0d6b9ce4a28060d77cf5486f18c86b24b9b86', 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: 'aee69df35923e0d4dd84dde9bed4e3533fad2eef', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'e7c3716b48f27de039d05b4653d9d5c85335a36b', name: "icon" })), h("span", { key: 'dab859c4567876155892170d140a10faedc25eed', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'f33c7b61e7c7fc17243f07416b497f1fbb870cc4', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'c6b381f8c2c338eb82334b12ff9a8deb34f55416', name: "badge" }))), h("button", { key: '028a345ca2f02e91e861fec1aa6e384918b4b436', 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: '5b53650e5f9dbba622bedca80322412381ad8c07', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '913c19119e9b386e61aee8aafd92dccef1c2011b', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '141db901f279cf4542159cb0d66e1b77baa290f9', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '9fcc67ccb156cedb7ba97a8aa19ea94451e5e582', 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: 'e649725f608b816fc34ed2214ba32d7113d55379', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'e919645dd68e3668e69396dadb220a73284137ce', name: "icon" })), h("span", { key: '69345d921f0065636626deb48448037de98e7fd6', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '55e352b19893b5965141f2c4bb4fdc2c62c98484', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '280019a63a9a95700eff7259a3ff88c7bd443c5d', name: "badge" })), h("span", { key: '2f0e0ce0382eaf656eec715e07199724d830c937', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: '5ea908d07433441545e1236562a9ff031f73e133' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: '7b529203ad4c375e0d0261477cb4f4c4843f6e11', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'e557b3ea90b2482c85da56c029a6343a6510ea88', 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: '4c41df0853fda178cc18d5e27974bf340e88f79d', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '25e9abebe0248ae253da3cf4875d8d834bade518', name: "icon" })), h("span", { key: '567796fe38df5329f5f0242e89350a1c27b7a51f', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '77a4c089247647b63675ea22abe5fa175d50e954', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'b5182ec440eb4b9226a67d3747a0111bef01da49', name: "badge" })))), this.isActive && (h("a", { key: '392e76165330a9871aa651cfae9ad59b424d430b', 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: 'bbab00798470cc791be9bdd392f4da5ea22e242c', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: 'be99d46ebad0860e3bf5b46e4d30307dcf6d6064', name: "icon" })), h("span", { key: '164d061f6d729e12a4406c901c32f828120cd2c4', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '884bfae7997f18a8d71c666b8fbfbd0af3316e39', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'e4fe34d83096356153d69b99fd3c1ae735329786', name: "badge" })))))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "afActiveSubnav": ["setHasSubnav", "onAfActiveSubnavChanged"],
+        "afActive": ["setIsActive"]
+    }; }
+    static get style() { return DigiNavigationVerticalMenuItemStyle0; }
+}, [6, "digi-navigation-vertical-menu-item", {
+        "afText": [1, "af-text"],
+        "afHref": [1, "af-href"],
+        "afAriaCurrent": [1, "af-aria-current"],
+        "afActiveSubnav": [4, "af-active-subnav"],
+        "afActive": [4, "af-active"],
+        "afId": [1, "af-id"],
+        "afOverrideLink": [4, "af-override-link"],
+        "afHasSubnav": [4, "af-has-subnav"],
+        "afLang": [1, "af-lang"],
+        "hasSubnav": [32],
+        "hasIcon": [32],
+        "hasBadge": [32],
+        "isActive": [32],
+        "activeSubnav": [32],
+        "listItems": [32]
+    }, undefined, {
+        "afActiveSubnav": ["setHasSubnav", "onAfActiveSubnavChanged"],
+        "afActive": ["setIsActive"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-navigation-vertical-menu-item", "digi-icon-minus", "digi-icon-plus"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-navigation-vertical-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavigationVerticalMenuItem);
+            }
+            break;
+        case "digi-icon-minus":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-icon-plus":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DigiNavigationVerticalMenuItem = NavigationVerticalMenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiNavigationVerticalMenuItem, defineCustomElement };