/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-BM3Om9WE.js';
import { f as focusInContainer, g as getActiveElement } from './active-element-CKJIkX0R.js';
import { P as Popover } from './popover-DNdFZ1hX.js';
import { a as getNearestTabbableElement, g as getTabbableElements } from './tabbable-BgopY-vd.js';
import { t as transformTag, h } from './renderer-DpNDfhNy.js';
import { g as getDirectChildren } from './dom-dlicJTEJ.js';
import { g as getTextContent } from './slot-Crs4khNK.js';

const dropdownCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";

let dropDownIds = 0;
const Dropdown = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoShow = createEvent(this, "nanoShow", 7);
        this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
        this.nanoHide = createEvent(this, "nanoHide", 7);
        this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
    }
    dropdownId = `dropdown-${dropDownIds++}`;
    labelId = this.dropdownId + '-title';
    ignoreOpenWatcher = false;
    panel;
    popover;
    trigger;
    positioner;
    accessibleTrigger;
    didLoad = false;
    focusFirstEle = true;
    get menu() {
        return this.host.querySelector(transformTag('nano-menu'));
    }
    get host() { return getElement(this); }
    /** Determines if the dropdown should open automatically when the trigger is clicked */
    autoOpen = true;
    /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
    open = false;
    handleOpenChange() {
        if (this.ignoreOpenWatcher)
            return;
        if (this.open)
            this.show();
        else
            this.hide();
        if (this.accessibleTrigger) {
            this.accessibleTrigger.setAttribute('aria-expanded', this.open.toString());
            return;
        }
        this.updateAccessibleTrigger();
    }
    /**
     * Determines whether the dropdown should hide when a menu item is selected.
     */
    closeOnSelect = true;
    /**
     * The dropdown will close when the user interacts outside of this element (e.g. clicking).
     */
    containingElement;
    /**
     * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.
     * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)
     */
    tetherTo = null;
    handleTetherToChange() {
        this.createPopover();
        this.updateAccessibleTrigger();
    }
    /**
     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
     * inside of the viewport.
     */
    placement = 'bottom-start';
    /**
     * The distance in pixels from which to offset the panel away from its trigger.
     */
    distance = 5;
    /**
     * The distance in pixels from which to offset the panel along its trigger.
     */
    skidding = 0;
    /**
     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`.
     */
    hoist = false;
    handlePopoverOptionsChange() {
        if (!this.popover)
            return;
        this.popover.setOptions({
            strategy: this.hoist ? 'fixed' : 'absolute',
            placement: this.placement,
            skidding: this.skidding,
            distance: this.distance,
        });
    }
    /**
     * Title used to describe the dropdown content for accessibility
     */
    dialogTitle;
    // Events
    /**
     * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
     */
    nanoShow;
    /**
     * Emitted after the dropdown opens and all transitions are complete.
     */
    nanoAfterShow;
    /**
     * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
     */
    nanoHide;
    /**
     * Emitted after the dropdown closes and all transitions are complete.
     */
    nanoAfterHide;
    // this is a massive hack to make stencil expose the `EventEmitter` type in the final build
    // because the `Dropdown` class is used as a type in `nano-datalist`
    /** @internal */
    eventType;
    // Listeners
    secondaryOpen(ev) {
        if (!ev.detail.secondaryMenu)
            return;
        ev.stopPropagation();
        this.panel.classList.add('loading');
        this.panel.addEventListener('transitionend', () => {
            this.panel.classList.remove('loading');
        }, { once: true });
        this.panel.style.minHeight =
            ev.detail.secondaryMenu.scrollHeight + 'px';
    }
    secondaryClose(ev) {
        if (!ev.detail.secondaryMenu)
            return;
        ev.stopPropagation();
        if (!ev.target.parentElement)
            return;
        this.panel.style.minHeight =
            ev.target.parentElement.scrollHeight + 'px';
    }
    handlePanelSelect(event) {
        const target = event.target;
        // Hide the dropdown when a menu item is selected
        if (this.closeOnSelect &&
            target.tagName.toLowerCase() === transformTag('nano-menu'))
            this.hide();
    }
    // Methods
    /** Shows the dropdown panel */
    async show() {
        this.ignoreOpenWatcher = true;
        this.open = true;
        const nanoShow = this.nanoShow.emit();
        if (nanoShow.defaultPrevented) {
            this.open = false;
            this.ignoreOpenWatcher = false;
            return;
        }
        if (typeof this.positioner?.showPopover === 'function') {
            this.hoist = true;
            this.popover.show();
            this.positioner.showPopover();
        }
        else {
            this.popover.show();
        }
        this.ignoreOpenWatcher = false;
        document.addEventListener('mousedown', this.handleDocumentMouseDown);
        document.addEventListener('keydown', this.handleDocumentKeyDown);
    }
    /** Hides the dropdown panel */
    async hide() {
        this.ignoreOpenWatcher = true;
        this.open = false;
        const nanoHide = this.nanoHide.emit();
        if (nanoHide.defaultPrevented) {
            this.open = true;
            this.ignoreOpenWatcher = false;
            return;
        }
        if (this.popover)
            this.popover.hide();
        this.ignoreOpenWatcher = false;
        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
        document.removeEventListener('keydown', this.handleDocumentKeyDown);
    }
    // Private methods
    afterHide() {
        if (typeof this.positioner?.hidePopover === 'function') {
            this.positioner.hidePopover();
        }
        this.panel.scrollTop = 0;
        if (this.accessibleTrigger &&
            focusInContainer(this.containingElement, this.trigger)) {
            this.accessibleTrigger.focus();
        }
    }
    togglePanel = () => {
        if (!this.autoOpen)
            return;
        if (this.open)
            this.hide();
        else
            this.show();
    };
    // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
    // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
    // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
    updateAccessibleTrigger() {
        if (!this.didLoad)
            return;
        let accessibleTrigger;
        this.accessibleTrigger = null;
        if (!this.tetherTo) {
            const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
            accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];
        }
        else {
            accessibleTrigger = getNearestTabbableElement(this.tetherTo);
        }
        if (accessibleTrigger && !accessibleTrigger.getAttribute('aria-haspopup')) {
            accessibleTrigger.setAttribute('aria-haspopup', 'true');
            accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
            this.accessibleTrigger = accessibleTrigger;
        }
    }
    // Handlers
    handleDocumentKeyDown(event) {
        // Close when escape is pressed
        if (event.key === 'Escape') {
            this.hide();
            return;
        }
        // Close when tabbing results in the focus leaving the dropdown element
        if (event.key === 'Tab') {
            setTimeout(() => {
                if (!focusInContainer(this.containingElement, this.trigger, event)) {
                    this.hide();
                    return;
                }
            });
        }
        else {
            // If a menu is present, focus on it when certain keys are pressed
            if (this.menu &&
                ((this.placement.match(/bottom|top/) &&
                    ['ArrowDown', 'ArrowUp'].includes(event.key)) ||
                    (this.placement.match(/right|left/) &&
                        ['ArrowRight', 'ArrowLeft'].includes(event.key)))) {
                // must have menu item, must have pressed down, must be open and must not have focus within dd
                if (!this.open ||
                    focusInContainer(this.containingElement, this.trigger, event)) {
                    if (this.containingElement.tagName === 'NANO-DROPDOWN' &&
                        this.containingElement.placement.match(/right|left/) &&
                        this.trigger.getRootNode()?.host?.tagName ===
                            'NANO-DROPDOWN') {
                        // if the dropdown is inside another dropdown, we need to close the inner one
                        this.hide();
                        return;
                    }
                    return;
                }
                event.preventDefault();
                this.menu.setFocus();
                this.focusFirstEle = true;
                return;
            }
            // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
            const ePath = event.composedPath();
            if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
                this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
                return;
            }
        }
    }
    handleDocumentMouseDown(event) {
        // Close when clicking outside of the close element
        if (!focusInContainer(this.containingElement, this.trigger, event)) {
            this.hide();
            return;
        }
    }
    handleTriggerKeyDown = (event) => {
        // Open the panel when pressing down or up while focused on the trigger
        if ((this.placement.match(/bottom|top/) &&
            ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) ||
            (this.placement.match(/right|left/) &&
                ['ArrowRight', 'ArrowLeft', ' ', 'Enter'].includes(event.key))) {
            this.show();
            event.preventDefault();
            event.stopPropagation();
            if (this.menu) {
                this.menu.setFocus();
                this.focusFirstEle = true;
            }
        }
    };
    handleTriggerSlotChange = () => {
        this.updateAccessibleTrigger();
    };
    createPopover() {
        if ((!this.tetherTo && !this.trigger) || !this.positioner)
            return;
        if (this.popover) {
            if (this.open)
                this.hide();
            this.popover.destroy();
            this.popover = null;
        }
        this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {
            strategy: this.hoist ? 'fixed' : 'absolute',
            placement: this.placement,
            distance: this.distance,
            skidding: this.skidding,
            transitionElement: this.panel,
            onAfterHide: () => {
                this.nanoAfterHide.emit();
            },
            onAfterShow: () => {
                this.nanoAfterShow.emit();
            },
            onTransitionEnd: () => {
                if (!this.open) {
                    this.afterHide();
                }
                else if (this.menu) {
                    this.menu.showActiveElement();
                    if (this.focusFirstEle) {
                        this.menu.setFocus();
                        this.focusFirstEle = false;
                    }
                }
            },
        });
        // Show on init if open
        if (this.open) {
            this.show();
        }
    }
    isOverflowing() {
        return ['auto', 'scroll'].includes(window.getComputedStyle(this.host).getPropertyValue('--overflow'));
    }
    // Stencil hooks
    connectedCallback() {
        this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
        this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
        if (!this.containingElement)
            this.containingElement = this.host;
    }
    componentDidLoad() {
        this.didLoad = true;
        this.createPopover();
        setTimeout(() => this.updateAccessibleTrigger(), 100);
    }
    disconnectedCallback() {
        if (this.host.isConnected)
            this.hide();
        if (this.popover)
            this.popover.destroy();
    }
    render() {
        return (h(Host, { key: 'c0ed4b8b03d27f7437c148c8df305886c6cf29d9', class: "nano-dropdown" }, h("div", { key: '27165586e2caa99ba746e7db3aa1574f0e9d1576', part: "base", id: this.dropdownId, class: {
                dropdown: true,
                'dropdown--open': this.open,
            } }, h("span", { key: 'b401a4d341e786ae4fe8c54adf06f8da1be4f531', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e0cb2a8823490b70f6aa01073d3873fa785fd763', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: '3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '19cc4dd331a4c2cbdc73a05687681cb2830fff0c', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                ? undefined
                : 'polite' }, this.dialogTitle)), h("slot", { key: '5da1881086c31481463b3b7244552e17ee66d997' }))))));
    }
    static get watchers() { return {
        "open": ["handleOpenChange"],
        "tetherTo": ["handleTetherToChange"],
        "placement": ["handlePopoverOptionsChange"],
        "distance": ["handlePopoverOptionsChange"],
        "skidding": ["handlePopoverOptionsChange"],
        "hoist": ["handlePopoverOptionsChange"]
    }; }
};
Dropdown.style = dropdownCss;

const menuCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";

const Menu = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoFocus = createEvent(this, "nanoFocus", 7);
        this.nanoBlur = createEvent(this, "nanoBlur", 7);
        this.nanoSelect = createEvent(this, "nanoSelect", 7);
    }
    ignoreMouseEvents = false;
    ignoreMouseTimeout;
    menu;
    typeToSelect = '';
    typeToSelectTimeout;
    get el() { return getElement(this); }
    // Public API
    /** get the focus state of the menu @readonly */
    get hasFocus() {
        return this._hasFocus;
    }
    _hasFocus = false;
    /** changes the role of the underlying control (required for accessibility semantics).
     * By default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`) */
    type;
    // we'll use this internally if it's not set externally
    _type;
    /** an accessible label */
    label;
    // Events
    /** Emitted when the menu gains focus. */
    nanoFocus;
    /** Emitted when the menu loses focus. */
    nanoBlur;
    /** Emitted when a menu item is selected. */
    nanoSelect;
    // Public Methods
    /** Sets focus on the menu. */
    async setFocus() {
        if (this.menu?.focus) {
            this.menu.focus({ preventScroll: true });
        }
    }
    /** Removes focus from the menu. */
    async removeFocus() {
        if (this.menu?.blur)
            this.menu.blur();
    }
    /** Sets the current active item */
    async showActiveElement() {
        if (this.selectedItem)
            this.selectedItem.scrollIntoView({ block: 'nearest' });
    }
    /** Removes any active item's state */
    async resetActiveItem() {
        this.getItems
            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
            .map((i) => i.setAttribute('tabindex', '-1'));
    }
    // Private methods
    get getItems() {
        let items;
        if (this._type === 'listbox') {
            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
        }
        else {
            const opened = this.el.querySelectorAll('[open]');
            items = getTabbableElements(opened[opened.length - 1] || this.el);
        }
        return items.filter((el) => !el.disabled && !el.hidden);
    }
    get activeItem() {
        const activeElement = getActiveElement();
        return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
            i === activeElement ||
            i === document.activeElement ||
            i.classList.contains('has-focus'));
    }
    get selectedItem() {
        return this.getItems.find((i) => i.selected);
    }
    async setActiveFocusItem(item, focus = true, preventScroll = false) {
        const items = this.getItems;
        const activeItem = !item
            ? items.find((i) => i.selected) || items[0]
            : item;
        items
            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
            .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
        if (!focus)
            return;
        if (activeItem) {
            if (preventScroll) {
                activeItem.focus({ preventScroll: true });
            }
            else if (activeItem.setFocus) {
                activeItem.setFocus();
            }
            else {
                activeItem.focus();
            }
        }
        else if (!this.hasFocus) {
            this.menu.focus({ preventScroll });
        }
    }
    // Event Handlers
    handleBlur(e) {
        if (!this.hasFocus)
            return;
        const kev = e;
        let found;
        if (kev.key) {
            if (kev.key !== 'Tab') {
                return;
            }
            found =
                getActiveElement() &&
                    getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
        }
        else {
            found = !!e.composedPath().find((el) => el === this.el);
        }
        if (!found) {
            this.resetActiveItem();
            this._hasFocus = false;
            this.nanoBlur.emit();
        }
    }
    handleFocus = () => {
        this._hasFocus = true;
        this.setActiveFocusItem(this.selectedItem || this.getItems[0]);
        this.nanoFocus.emit();
    };
    handleClick = (event) => {
        const target = event.target;
        const item = target.closest(transformTag('nano-nav-item'));
        if (item && !item.disabled) {
            this.nanoSelect.emit(item);
        }
    };
    handleKeyDown = (event) => {
        // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the
        // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives
        // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.
        clearTimeout(this.ignoreMouseTimeout);
        this.ignoreMouseTimeout = setTimeout(() => (this.ignoreMouseEvents = false), 500);
        this.ignoreMouseEvents = true;
        // Make a selection when pressing enter
        switch (event.key) {
            case ' ':
                if (this.activeItem) {
                    event.stopPropagation();
                    if (this.activeItem.nodeName !== 'BUTTON') {
                        this.activeItem.click();
                    }
                }
                break;
            case 'ArrowDown':
            case 'ArrowUp':
            case 'PageDown':
            case 'PageUp':
            case 'Home':
            case 'End': {
                const items = this.getItems;
                const selectedItem = this.activeItem;
                let index = items.indexOf(selectedItem);
                if (items.length) {
                    event.preventDefault();
                    if (event.key === 'ArrowDown') {
                        index++;
                    }
                    else if (event.key === 'ArrowUp') {
                        index--;
                    }
                    else if (event.key === 'Home' || event.key === 'PageUp') {
                        index = 0;
                    }
                    else if (event.key === 'End' || event.key === 'PageDown') {
                        index = items.length - 1;
                    }
                    if (index < 0)
                        index = items.length - 1;
                    if (index > items.length - 1)
                        index = 0;
                    this.setActiveFocusItem(items[index]);
                    if (items[index])
                        items[index].scrollIntoView({ block: 'nearest' });
                    return;
                }
                break;
            }
        }
        // Handle type-to-search behavior when non-control characters are entered
        if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {
            clearTimeout(this.typeToSelectTimeout);
            this.typeToSelectTimeout = setTimeout(() => (this.typeToSelect = ''), 750);
            this.typeToSelect += event.key;
            const items = this.getItems;
            for (const item of items) {
                const label = getTextContent(item).toLowerCase().trim();
                if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
                    this.setActiveFocusItem(item);
                    break;
                }
            }
        }
    };
    handleMouseOver = (event) => {
        const target = event.target;
        const item = target.closest(transformTag('nano-nav-item')) ||
            target.closest(transformTag('nano-option')) ||
            target.closest('a');
        if (item && !this.ignoreMouseEvents) {
            this.setActiveFocusItem(item, true, true);
        }
    };
    handleSlotContent = () => {
        this._type = this.type || null;
        if (!this._type) {
            let linkCount, btnCount = 0;
            getTabbableElements(this.el).forEach((item) => {
                if (item.tagName === 'A' || item.role === 'link') {
                    linkCount++;
                }
                else {
                    btnCount++;
                }
            });
            this._type = linkCount > btnCount ? 'nav' : 'menu';
        }
        // a nav role can have any type of children
        if (this._type === 'nav')
            return;
        // any direct children of a role="menu|listbox" need an explicit role, other a role of 'none'
        getDirectChildren(this.el, `*:not(${transformTag('nano-nav-item')}, a, ${transformTag('nano-option')}, ${transformTag('nano-dropdown')})`, true).forEach((el) => {
            if (this.getItems.indexOf(el) < 0) {
                el.setAttribute('role', 'none');
            }
        });
        this.el
            .querySelectorAll(`a, ${transformTag('nano-dropdown')}`)
            .forEach((el) => {
            if (el.tagName === 'A') {
                // links need to be set to role="menuitem" to be valid
                el.setAttribute('role', 'menuitem');
            }
            else {
                // nested dropdowns need to be set to role="group" to be valid
                el.setAttribute('role', 'group');
            }
        });
    };
    // Component Lifecycle
    componentWillLoad() {
        this.handleSlotContent();
    }
    render() {
        return (h(Host, { key: '40403e7a4f942f8fa8594edc9ceb24f33aba6979', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, h("div", { key: '561716ed34aa038cebacb31dc3b8562829f062e4', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                menu: true,
                ['menu--' + this._type]: true,
                'menu--has-focus': this.hasFocus,
            }, tabIndex: -1, role: "group" }, h("slot", { key: 'e36d4071433a6e7ddd700aee284868856cbd82ff', onSlotchange: this.handleSlotContent }))));
    }
};
Menu.style = menuCss;

export { Dropdown as nano_dropdown, Menu as nano_menu };
