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

package/dist/components/masked-overflow.js

@@ -0,0 +1,402 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { g as getDirectChildren, a as getOffset } from './dom.js';
+import { d as debounce } from './throttle.js';
+import { s as scrollIntoView } from './scroll.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onnav--has-indicator .onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onnav--has-indicator .onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
+
+const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow extends HTMLElement {
+    // public surface
+    /** Used to appropriately label the scrolling element for screen-readers */
+    label;
+    /** Disables the scroll arrow buttons that appear when content overflows */
+    scrollControls = true;
+    /** The flex direction of the element */
+    orientation = 'horizontal';
+    /** Shows a track and a highlight line that automatically moves the currently active item. */
+    showIndicator = false;
+    /** Show or hide the browser's default scrollbars. Defaults to `true` on vertical orientation and `false` on `horizontal` orientation */
+    hideScrollbars;
+    watchHideScrollbars() {
+        if (this.hideScrollbars === undefined || this.hideScrollbars === null) {
+            this.hideScrollbars = this.orientation !== 'vertical';
+        }
+    }
+    /**
+     * A function called when an item becomes 'active' (via click or keyboard)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    activeHandler = (item, _index) => item.classList.add('active');
+    /**
+     * A function called when an item becomes 'inactive'
+     * (because another item was made active)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    inactiveHandler = (item, _index) => item.classList.remove('active');
+    /**
+     * A function called to assess an initial, active item
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    isActiveHandler = (item, _index) => item.classList.contains('active');
+    watchIsActiveHandler() {
+        this.instantReCalc = true;
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        setTimeout(() => (this.instantReCalc = false), 300);
+    }
+    /**
+     * Sync up the view to the active item.
+     * Use this when the active item changes outside of this component.
+     */
+    async syncActiveItem() {
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+    }
+    // private state
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
+    }
+    ro;
+    nav;
+    itemContainer;
+    isRtl;
+    endBtn;
+    startBtn;
+    activeIndicator;
+    mutationObservers = new WeakMap();
+    get scrollProp() {
+        return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
+    }
+    get clientDimensionProp() {
+        return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';
+    }
+    get scrollOffset() {
+        return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';
+    }
+    get host() { return this; }
+    instantReCalc = false;
+    hasScrollControls = false;
+    watchScrollControls() {
+        if (this.hasScrollControls)
+            this.handleScroll();
+        else
+            this.hideControlStart = this.hideControlEnd = true;
+    }
+    hideControlEnd = true;
+    hideEndBtn() {
+        if (!this.endBtn)
+            return;
+        this.activateBtn(this.endBtn, !this.hideControlEnd);
+    }
+    hideControlStart = true;
+    hideStartBtn() {
+        if (!this.startBtn)
+            return;
+        this.activateBtn(this.startBtn, !this.hideControlStart);
+    }
+    // private logic
+    activateBtn(btn, activate = true) {
+        if (!activate) {
+            btn.tabIndex = -1;
+            btn.disabled = true;
+            btn.classList.remove('is-shown');
+            return;
+        }
+        btn.removeAttribute('tabindex');
+        btn.disabled = false;
+        btn.classList.add('is-shown');
+    }
+    get allActiveItems() {
+        return this.allItems.filter((el) => !el.disabled || el.classList.contains('disabled'));
+    }
+    get allItems() {
+        return getDirectChildren(this.host, '*', 'slot');
+    }
+    get activeItem() {
+        return this._activeItem;
+    }
+    set activeItem(item) {
+        if (!item ||
+            item === this.activeItem ||
+            item.disabled ||
+            !this.allActiveItems.includes(item)) {
+            return;
+        }
+        this._activeItem = item;
+        this.allActiveItems.forEach((el, i) => {
+            if (el === this._activeItem)
+                this.activeHandler(el, i);
+            else
+                this.inactiveHandler(el, i);
+        });
+        this.recalculatePositions();
+    }
+    _activeItem;
+    get navDim() {
+        if (!this.nav)
+            return 0;
+        const computedStyle = getComputedStyle(this.nav);
+        let clientDim = this.nav[this.clientDimensionProp];
+        if (this.orientation === 'horizontal') {
+            return (clientDim -=
+                parseFloat(computedStyle.paddingLeft) +
+                    parseFloat(computedStyle.paddingRight));
+        }
+        else {
+            return (clientDim -=
+                parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom));
+        }
+    }
+    scrollToActiveItem() {
+        if (!this.nav || !this.activeItem || !this.hasScrollControls)
+            return;
+        scrollIntoView(this.activeItem, this.nav, this.orientation, 'center');
+    }
+    syncActiveItemIndicator() {
+        if (!this.activeItem || !this.showIndicator)
+            return;
+        const item = this.activeItem;
+        const width = item.clientWidth || 0;
+        const height = item.clientHeight + 2 || 0;
+        const offset = getOffset(item, this.itemContainer);
+        if (!this.activeIndicator)
+            return;
+        const offsetTop = offset.top;
+        const offsetLeft = offset.left;
+        if (this.instantReCalc)
+            this.activeIndicator.style.transition = 'none';
+        switch (this.orientation) {
+            case 'horizontal':
+                this.activeIndicator.style.width = `${width}px`;
+                this.activeIndicator.style.height = null;
+                this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;
+                break;
+            case 'vertical':
+                this.activeIndicator.style.width = null;
+                this.activeIndicator.style.height = `${height}px`;
+                this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;
+                break;
+        }
+        setTimeout(() => (this.activeIndicator.style.transition = null), 400);
+    }
+    updateScrollControls = () => {
+        if (!this.nav)
+            return;
+        this.hasScrollControls =
+            this.nav[this.scrollProp] > this.nav[this.clientDimensionProp] &&
+                this.nav[this.scrollProp] >= this.itemContainer[this.clientDimensionProp];
+        this.handleScroll();
+    };
+    handleScroll = () => {
+        if (!this.hasScrollControls) {
+            this.hideControlStart = this.hideControlEnd = true;
+            return;
+        }
+        const finishEnd = this.isRtl
+            ? this.nav[this.scrollOffset] === 0
+            : Math.abs(this.nav[this.clientDimensionProp] -
+                (this.nav[this.scrollProp] - this.nav[this.scrollOffset])) < 2;
+        const finishStart = this.isRtl
+            ? Math.abs(this.nav[this.scrollProp] +
+                this.nav[this.scrollOffset] -
+                this.nav[this.clientDimensionProp]) < 2
+            : this.nav[this.scrollOffset] === 0;
+        if (finishStart) {
+            this.hideControlStart = true;
+            this.hideControlEnd = false;
+        }
+        else if (finishEnd) {
+            this.hideControlStart = false;
+            this.hideControlEnd = true;
+        }
+        else {
+            this.hideControlEnd = false;
+            this.hideControlStart = false;
+        }
+    };
+    handleBtnClick = (goEnd = false) => {
+        const navDim = this.navDim;
+        let scrollAmt;
+        if (goEnd)
+            scrollAmt = this.nav[this.scrollOffset] + navDim - 20;
+        else
+            scrollAmt = this.nav[this.scrollOffset] - navDim + 20;
+        try {
+            this.nav.scroll({
+                left: this.orientation === 'horizontal' ? scrollAmt : 0,
+                top: this.orientation === 'vertical' ? scrollAmt : 0,
+                behavior: 'smooth',
+            });
+        }
+        catch (_e) {
+            this.nav[this.scrollOffset] = scrollAmt;
+        }
+    };
+    slotChangeHandler = () => {
+        if (this.allActiveItems.length < 2)
+            return;
+        const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        if (item)
+            this.activeItem = item;
+        this.recalculatePositions();
+        if (!this.showIndicator)
+            return;
+        /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
+        this.allActiveItems.forEach((item) => {
+            if (this.mutationObservers.get(item))
+                return;
+            const mo = new MutationObserver(() => this.syncActiveItemIndicator());
+            mo.observe(item, {
+                characterData: true,
+                childList: true,
+                subtree: true,
+            });
+            this.mutationObservers.set(item, mo);
+        });
+    };
+    handleClick = (event) => {
+        if (this.allActiveItems.length < 2)
+            return;
+        const foundItem = event
+            .composedPath()
+            .find((e) => this.allActiveItems.includes(e));
+        if (foundItem)
+            this.activeItem = foundItem;
+    };
+    handleKeyDown = (event) => {
+        // Activate a tab
+        if (['Enter', ' '].includes(event.key)) {
+            const foundItem = event
+                .composedPath()
+                .find((e) => this.allActiveItems.includes(e));
+            if (foundItem)
+                this.activeItem = foundItem;
+        }
+    };
+    recalculatePositions = () => {
+        this.updateScrollControls();
+        this.syncActiveItemIndicator();
+        this.scrollToActiveItem();
+    };
+    // lifecycle
+    connectedCallback() {
+        this.instantReCalc = true;
+        this.isRtl =
+            this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
+        if (Build.isBrowser && window['MutationObserver'])
+            this.slotChangeHandler();
+        if (!window['ResizeObserver'])
+            return;
+        if (this.ro) {
+            this.ro.disconnect();
+            this.ro = undefined;
+        }
+        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
+        mo.observe(this.host);
+    }
+    componentWillLoad() {
+        this.watchHideScrollbars();
+    }
+    componentDidLoad() {
+        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        requestAnimationFrame(() => (this.instantReCalc = false));
+    }
+    disconnectedCallback() {
+        if (this.ro) {
+            this.ro.disconnect();
+            this.ro = undefined;
+        }
+    }
+    render() {
+        return (h(Host, { key: '95eee57fdc7f8527fbbe4b6d9fbf6f48d5764ac8', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'fb8fb3b5946a4ce7b8b144df89541012c44d9aff', part: "base", class: {
+                onav: true,
+                [`onav--${this.orientation}`]: true,
+                'onav--has-scroll-controls': this.hasScrollControls,
+                'onav--has-scroll-controls-start': !this.hideControlStart,
+                'onav--has-scroll-controls-end': !this.hideControlEnd,
+                'onav--no-transitions': this.instantReCalc,
+                'onnav--has-indicator': this.showIndicator,
+                'onnav--hide-scrollbars': this.hideScrollbars,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '23da0af8abf895a7bb2b158965f9ef955e798e0c', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '28573455243fe42c090dbcdb569d376a7f9d5eb3', part: "scroll-button scroll-button-prev", class: {
+                'onav__scroll-button': true,
+                'onav__scroll-button--start': true,
+            }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
+                ? 'light/chevron-left'
+                : 'light/chevron-up' })), h("div", { key: 'b1c4626550336c2723ef68df1f4b5a3034c383d5', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'c751fd48b83e957c156448841939df286dff0c37', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '059962178e1c122d95ebbcfb8b98114b0507d3df', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '6cc5fe32c97aa75700feea39cd6d77d18c968c80', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'fe8b6ee6f86a8d96a2ed8a79f2ebd292a6432e95', part: "scroll-button scroll-button-next", class: {
+                'onav__scroll-button': true,
+                'onav__scroll-button--end': true,
+            }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
+                ? 'light/chevron-right'
+                : 'light/chevron-down' }))))));
+    }
+    static get watchers() { return {
+        "hideScrollbars": ["watchHideScrollbars"],
+        "isActiveHandler": ["watchIsActiveHandler"],
+        "hasScrollControls": ["watchScrollControls"],
+        "hideControlEnd": ["hideEndBtn"],
+        "hideControlStart": ["hideStartBtn"]
+    }; }
+    static get style() { return maskedOverflowCss; }
+}, [1, "nano-masked-overflow", {
+        "label": [1],
+        "scrollControls": [516, "scroll-controls"],
+        "orientation": [513],
+        "showIndicator": [516, "show-indicator"],
+        "hideScrollbars": [1032, "hide-scrollbars"],
+        "activeHandler": [16, "active-handler"],
+        "inactiveHandler": [16, "inactive-handler"],
+        "isActiveHandler": [16, "is-active-handler"],
+        "instantReCalc": [32],
+        "hasScrollControls": [32],
+        "hideControlEnd": [32],
+        "hideControlStart": [32],
+        "syncActiveItem": [64]
+    }, undefined, {
+        "hideScrollbars": ["watchHideScrollbars"],
+        "isActiveHandler": ["watchIsActiveHandler"],
+        "hasScrollControls": ["watchScrollControls"],
+        "hideControlEnd": ["hideEndBtn"],
+        "hideControlStart": ["hideStartBtn"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-masked-overflow", "nano-icon", "nano-icon-button", "nano-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-masked-overflow":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MaskedOverflow);
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nano-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { MaskedOverflow as M, defineCustomElement as d };

package/dist/components/math.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /**
  * Returns a given number between a min and max
@@ -33,6 +33,4 @@ function cyrb53(str, seed = 0) {
     return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 }
 
-export { cyrb53 as a, clamp as c };
-
-//# sourceMappingURL=math.js.map
+export { clamp as a, cyrb53 as c };

package/dist/components/menu.js

@@ -1,14 +1,14 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
 import { g as getActiveElement } from './active-element.js';
 import { g as getDirectChildren } from './dom.js';
 import { g as getTextContent } from './slot.js';
+import { g as getTabbableElements } from './tabbable.js';
 
-const menuCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
-const NanoMenuStyle0 = menuCss;
+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 = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     constructor() {
@@ -31,8 +31,11 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         return this._hasFocus;
     }
     _hasFocus = false;
-    /** changes the role of the underlying control - sometimes required for semantics */
-    type = 'menu';
+    /** 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
@@ -45,8 +48,9 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     // Public Methods
     /** Sets focus on the menu. */
     async setFocus() {
-        if (this.menu?.focus)
+        if (this.menu?.focus) {
             this.menu.focus({ preventScroll: true });
+        }
     }
     /** Removes focus from the menu. */
     async removeFocus() {
@@ -67,13 +71,12 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     // Private methods
     get getItems() {
         let items;
-        const opened = this.el.querySelectorAll(`${transformTag('nano-nav-item')}.secondary-open`);
-        if (opened.length) {
-            const ctx = opened[opened.length - 1];
-            items = Array.from(ctx.querySelectorAll(`${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`));
+        if (this._type === 'listbox') {
+            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
         }
         else {
-            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
+            const opened = this.el.querySelectorAll('[open]');
+            items = getTabbableElements(opened[opened.length - 1] || this.el);
         }
         return items.filter((el) => !el.disabled && !el.hidden);
     }
@@ -81,6 +84,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const activeElement = getActiveElement();
         return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
             i === activeElement ||
+            i === document.activeElement ||
             i.classList.contains('has-focus'));
     }
     get selectedItem() {
@@ -88,7 +92,9 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     }
     async setActiveFocusItem(item, focus = true) {
         const items = this.getItems;
-        const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
+        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'));
@@ -110,14 +116,16 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const kev = e;
         let found;
         if (kev.key) {
-            if (kev.key !== 'Tab')
+            if (kev.key !== 'Tab') {
                 return;
+            }
             found =
                 getActiveElement() &&
                     getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
         }
-        else
+        else {
             found = !!e.composedPath().find((el) => el === this.el);
+        }
         if (!found) {
             this.resetActiveItem();
             this._hasFocus = false;
@@ -146,8 +154,12 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         // Make a selection when pressing enter
         switch (event.key) {
             case ' ':
-                if (this.activeItem)
-                    this.activeItem.click();
+                if (this.activeItem) {
+                    event.stopPropagation();
+                    if (this.activeItem.nodeName !== 'BUTTON') {
+                        this.activeItem.click();
+                    }
+                }
                 break;
             case 'ArrowDown':
             case 'ArrowUp':
@@ -191,8 +203,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             this.typeToSelect += event.key;
             const items = this.getItems;
             for (const item of items) {
-                const slot = item.shadowRoot.querySelector('slot:not([name])');
-                const label = getTextContent(slot).toLowerCase().trim();
+                const label = getTextContent(item).toLowerCase().trim();
                 if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
                     this.setActiveFocusItem(item);
                     break;
@@ -203,29 +214,67 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     handleMouseOver = (event) => {
         const target = event.target;
         const item = target.closest(transformTag('nano-nav-item')) ||
-            target.closest(transformTag('nano-option'));
+            target.closest(transformTag('nano-option')) ||
+            target.closest('a');
         if (item && !this.ignoreMouseEvents) {
             this.setActiveFocusItem(item);
         }
     };
-    // Component Lifecycle
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            getDirectChildren(this.el, ':not(nano-nav-item):not(nano-option):not([role])', true).forEach((el) => el.setAttribute('role', 'none'));
+    handleSlotContent = () => {
+        if (!Build.isBrowser)
+            return;
+        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: '78d73e5aceb8bc9890134c9253834d37c0faf1c3', role: this.type === 'menu' ? 'menu' : 'group', class: "nano-menu" }, h("div", { key: 'e38c5896dc520623bf97392954f278f5ea1b0450', 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: {
+        return (h(Host, { key: 'f3908b74fc21b630402f06fac95a75f5a6b2ff27', role: this._type === 'listbox' ? 'group' : this._type, class: "nano-menu" }, 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--' + this._type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '213aae294bd3f00e968561ed98716b67c76387a6' }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '37f40b06d1dc66c46130468c3de79dfeeb38c29c', onSlotchange: this.handleSlotContent }))));
     }
-    static get style() { return NanoMenuStyle0; }
+    static get style() { return menuCss; }
 }, [1, "nano-menu", {
         "hasFocus": [2052, "has-focus"],
         "type": [1],
         "label": [1],
+        "_type": [32],
         "setFocus": [64],
         "removeFocus": [64],
         "showActiveElement": [64],
@@ -246,5 +295,3 @@ function defineCustomElement() {
 }
 
 export { Menu as M, defineCustomElement as d };
-
-//# sourceMappingURL=menu.js.map

package/dist/components/modal.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { g as getTabbableElements } from './tabbable.js';
 
@@ -45,5 +45,3 @@ class Modal {
 }
 
 export { Modal as M };
-
-//# sourceMappingURL=modal.js.map