@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-dropdown_2.cjs.entry.js

@@ -0,0 +1,640 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var activeElement = require('./active-element-DB7WRcF-.js');
+var popover = require('./popover-CpIMxMWJ.js');
+var tabbable = require('./tabbable-M9OUrhLE.js');
+var renderer = require('./renderer-SkVn69pT.js');
+var dom = require('./dom-a3wgHxbn.js');
+var slot = require('./slot-CBvkJee9.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:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--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) {
+        index.registerInstance(this, hostRef);
+        this.nanoShow = index.createEvent(this, "nanoShow", 7);
+        this.nanoAfterShow = index.createEvent(this, "nanoAfterShow", 7);
+        this.nanoHide = index.createEvent(this, "nanoHide", 7);
+        this.nanoAfterHide = index.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(renderer.transformTag('nano-menu'));
+    }
+    get host() { return index.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() === renderer.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 &&
+            activeElement.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(tabbable.getNearestTabbableElement)[0];
+        }
+        else {
+            accessibleTrigger = tabbable.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 (!activeElement.focusInContainer(this.containingElement, this.trigger)) {
+                    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 ||
+                    activeElement.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 (!activeElement.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.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();
+        }
+    }
+    // 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 (renderer.h(index.Host, { key: 'dd4615946390485d5ad05ff0fbf3714474c38b9b', class: "nano-dropdown" }, renderer.h("div", { key: '9a60642705315c41efaad525f087397b458caf2a', part: "base", id: this.dropdownId, class: {
+                dropdown: true,
+                'dropdown--open': this.open,
+            } }, renderer.h("span", { key: '861f59e5d50c956d53ce75d16ca5430bfb339d26', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, renderer.h("slot", { key: '55e3a353ffd07ca586468bbc213d415484e4427f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), renderer.h("div", { key: '3ac2f6fde7117cf7421ac53e1786c4da59fd4e6c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, renderer.h("div", { key: 'ff5d8d1248c1434aad2c8f042f208ff3d418f1a4', 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 }, this.dialogTitle && (renderer.h("span", { key: 'e71c3b8e09d6b8cf359470872a70da8794a221db', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+                ? undefined
+                : 'polite' }, this.dialogTitle)), renderer.h("slot", { key: 'a9349e44064f7bbd4b32b3658c203575fe39c804' }))))));
+    }
+    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) {
+        index.registerInstance(this, hostRef);
+        this.nanoFocus = index.createEvent(this, "nanoFocus", 7);
+        this.nanoBlur = index.createEvent(this, "nanoBlur", 7);
+        this.nanoSelect = index.createEvent(this, "nanoSelect", 7);
+    }
+    ignoreMouseEvents = false;
+    ignoreMouseTimeout;
+    menu;
+    typeToSelect = '';
+    typeToSelectTimeout;
+    get el() { return index.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() === renderer.transformTag('nano-option'))
+            .map((i) => i.setAttribute('tabindex', '-1'));
+    }
+    // Private methods
+    get getItems() {
+        let items;
+        if (this._type === 'listbox') {
+            items = dom.getDirectChildren(this.el, `${renderer.transformTag('nano-nav-item')}, ${renderer.transformTag('nano-option')}`, 'slot');
+        }
+        else {
+            const opened = this.el.querySelectorAll('[open]');
+            items = tabbable.getTabbableElements(opened[opened.length - 1] || this.el);
+        }
+        return items.filter((el) => !el.disabled && !el.hidden);
+    }
+    get activeItem() {
+        const activeElement$1 = activeElement.getActiveElement();
+        return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
+            i === activeElement$1 ||
+            i === document.activeElement ||
+            i.classList.contains('has-focus'));
+    }
+    get selectedItem() {
+        return this.getItems.find((i) => i.selected);
+    }
+    async setActiveFocusItem(item, focus = true) {
+        const items = this.getItems;
+        const activeItem = !item
+            ? items.find((i) => i.selected) || items[0]
+            : item;
+        items
+            .filter((i) => i.tagName.toLowerCase() === renderer.transformTag('nano-option'))
+            .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
+        if (!focus)
+            return;
+        if (activeItem) {
+            if (activeItem.setFocus)
+                activeItem.setFocus();
+            else
+                activeItem.focus();
+        }
+        else
+            this.menu.focus();
+    }
+    // Event Handlers
+    handleBlur(e) {
+        if (!this.hasFocus)
+            return;
+        const kev = e;
+        let found;
+        if (kev.key) {
+            if (kev.key !== 'Tab') {
+                return;
+            }
+            found =
+                activeElement.getActiveElement() &&
+                    activeElement.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.setActiveFocusItem(this.selectedItem || this.getItems[0]);
+        this._hasFocus = true;
+        this.nanoFocus.emit();
+    };
+    handleClick = (event) => {
+        const target = event.target;
+        const item = target.closest(renderer.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 = slot.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(renderer.transformTag('nano-nav-item')) ||
+            target.closest(renderer.transformTag('nano-option')) ||
+            target.closest('a');
+        if (item && !this.ignoreMouseEvents) {
+            this.setActiveFocusItem(item);
+        }
+    };
+    handleSlotContent = () => {
+        this._type = this.type || null;
+        if (!this._type) {
+            let linkCount, btnCount = 0;
+            tabbable.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'
+        dom.getDirectChildren(this.el, `*:not(${renderer.transformTag('nano-nav-item')}, a, ${renderer.transformTag('nano-option')}, ${renderer.transformTag('nano-dropdown')})`, true).forEach((el) => {
+            if (this.getItems.indexOf(el) < 0) {
+                el.setAttribute('role', 'none');
+            }
+        });
+        this.el
+            .querySelectorAll(`a, ${renderer.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 (renderer.h(index.Host, { key: 'f3908b74fc21b630402f06fac95a75f5a6b2ff27', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, renderer.h("div", { key: '451b5fb6151135ab4cb73d9141086be43d9eaf93', 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" }, renderer.h("slot", { key: '37f40b06d1dc66c46130468c3de79dfeeb38c29c', onSlotchange: this.handleSlotContent }))));
+    }
+};
+Menu.style = menuCss;
+
+exports.nano_dropdown = Dropdown;
+exports.nano_menu = Menu;