@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/components/nano-tab-group.js

@@ -1,20 +1,19 @@
 /*!
- * 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 { g as getDirectChildren, a as getOffset } from './dom.js';
-import { s as scrollIntoView } from './scroll.js';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, Host } from '@stencil/core/internal/client';
+import { g as getDirectChildren } from './dom.js';
 import { C as ComponentStore } from './component-store.js';
-import { c as createColorClasses } from './theme.js';
-import { d as displayTransition } from './transitions.js';
 import { t as transformTag, h } from './renderer.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './masked-overflow.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
-const tabGroupCss = ":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{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (width <= 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(.nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(.nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button .nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:\"\";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:\" \";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}";
-const NanoTabGroupStyle0 = tabGroupCss;
+const tabGroupCss = ":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{--border:2px solid var(--nano-color-neutral-300);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-track-color:var(--nano-color-neutral-300);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";
 
 let id = 0;
-const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLElement {
+const NanoTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -27,21 +26,27 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
     baseId = `nano-tab-group-${++id}`;
     activeTab;
     activePanel;
-    activeTabIndicator;
-    nav;
-    tabs;
-    rightBtn;
-    leftBtn;
     isRtl;
     initialTouchX = null;
     initialTouchY = null;
-    resizeObserver;
-    mutationObservers = new WeakMap();
+    init = true;
+    _tab;
+    get tab() {
+        return this._tab;
+    }
+    set tab(tabName) {
+        if (this.activeTab && this.activeTab.panel === this._tab)
+            return;
+        const selectedTabEle = this.getAllActiveTabs.find((el) => el.panel === tabName);
+        if (!selectedTabEle)
+            return;
+        if (!this.init && this.storeId) {
+            ComponentStore.update(this.storeId);
+        }
+        this._tab = tabName;
+        this.setActiveTab(selectedTabEle);
+    }
     get host() { return this; }
-    hasScrollControls = false;
-    hideControlRight = true;
-    hideControlLeft = true;
-    tab;
     /**
      * The placement of the tabs.
      */
@@ -50,60 +55,24 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
      * Disables the scroll arrows that appear when tabs overflow.
      */
     noScrollControls = false;
+    /** Make all tabs equal size. This is only recommended when there are a small number of tabs */
+    equalTabSize = false;
+    /** Size of tabs. Default is `regular`. `large` is only available when `placement="top"` */
+    size;
     /**
-     * The color to use from the application's color palette.
-     */
-    color;
-    /**
-     * Store the currently open tab (against this ID) in the component store.
-     * Use in conjunction with storeMethod
+     * Store the open tab against this ID in the component store.
+     * Use in combination with `storeMethod`
      */
     storeId;
     /**
      * The method of storage.
-     * Either session storage, url hash (after the '#') or url query (after the '?').
+     * Either session storage, url hash (after an '#') or url query (after an '?').
      */
-    storeMethod = 'session';
+    storeMethod = 'url-hash';
     /**
      * Disable 'swipe to change tab' on devices with touch
      */
     disableSwipe;
-    handleTabNameChange() {
-        if (this.activeTab && this.activeTab.panel === this.tab)
-            return;
-        const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);
-        this.setActiveTab(tab);
-    }
-    handlePlacementChange() {
-        this.syncActiveTabIndicator();
-    }
-    handleNoScrollControlsChange() {
-        this.updateScrollControls();
-    }
-    hideRightBtn() {
-        if (!this.rightBtn)
-            return;
-        displayTransition(this.rightBtn, {
-            className: 'is-shown',
-            show: !this.hideControlRight,
-        });
-    }
-    hideLeftBtn() {
-        if (!this.leftBtn)
-            return;
-        displayTransition(this.leftBtn, {
-            className: 'is-shown',
-            show: !this.hideControlLeft,
-        });
-    }
-    watchScrollControls() {
-        if (this.hasScrollControls)
-            setTimeout((_) => this.handleTabScroll(), 20);
-        else
-            setTimeout((_) => {
-                this.hideControlLeft = this.hideControlRight = true;
-            }, 20);
-    }
     /** Emitted when a tab is shown. */
     nanoTabShow;
     /** Emitted when a tab is hidden. */
@@ -133,17 +102,6 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
     get getActiveTab() {
         return this.getAllActiveTabs.find((el) => el.active);
     }
-    updateScrollControls = () => {
-        if (this.noScrollControls) {
-            this.hasScrollControls = false;
-        }
-        else {
-            this.hasScrollControls =
-                ['top'].includes(this.placement) &&
-                    this.nav.scrollWidth > this.nav.clientWidth &&
-                    this.nav.scrollWidth > this.tabs.clientWidth;
-        }
-    };
     setActiveTab(tab, emitEvents = true) {
         if (tab &&
             tab !== this.activeTab &&
@@ -163,11 +121,6 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
                     el.active = false;
                 el.removeAttribute('animation-dir');
             });
-            this.syncActiveTabIndicator();
-            // active tab can be changed on init - this won't be ready. No big thing
-            if (this.nav && ['top'].includes(this.placement)) {
-                scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
-            }
             // Emit events
             if (emitEvents) {
                 if (previousTab) {
@@ -193,40 +146,6 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
             }
         });
     }
-    syncActiveTabIndicator() {
-        this.getAllTabs.forEach((tab) => tab.setAttribute('direction', this.placement === 'top' ? 'horizontal' : 'vertical'));
-        const tab = this.getActiveTab;
-        if (!tab)
-            return;
-        const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;
-        const height = tab.clientHeight;
-        const offset = getOffset(tab, this.tabs);
-        if (!this.activeTabIndicator)
-            return;
-        const offsetTop = offset.top + this.nav.scrollTop;
-        const offsetLeft = offset.left;
-        switch (this.placement) {
-            case 'top':
-                this.activeTabIndicator.style.width = `${width}px`;
-                this.activeTabIndicator.style.height = null;
-                this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
-                break;
-            case 'start':
-                this.activeTabIndicator.style.width = null;
-                this.activeTabIndicator.style.height = `${height}px`;
-                this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
-                break;
-        }
-    }
-    getNavWidth() {
-        if (!this.nav)
-            return 0;
-        const computedStyle = getComputedStyle(this.nav);
-        let clientWidth = this.nav.clientWidth;
-        return (clientWidth -=
-            parseFloat(computedStyle.paddingLeft) +
-                parseFloat(computedStyle.paddingRight));
-    }
     // Event handlers
     handleTabClose(ev) {
         let tabIndex = this.getAllActiveTabs.indexOf(ev.target);
@@ -250,6 +169,7 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
         tab.remove();
         panel.remove();
         this.nanoTabClose.emit({ name: tab.panel });
+        forceUpdate(this.host);
     }
     handleClick = (event) => {
         const target = event.target;
@@ -305,55 +225,11 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
                 index = Math.min(tabs.length - 1, index + 1);
         }
         tabs[index].setFocus();
-        if (this.placement === 'top') {
-            scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');
-        }
         // need to stop bubbling otherwise it will focus on parent tabs if nested
         event.stopPropagation();
         // stop the browser moving about
         event.preventDefault();
     };
-    handleTabScroll = () => {
-        if (!this.hasScrollControls) {
-            this.hideControlLeft = this.hideControlRight = true;
-            return;
-        }
-        const endRight = this.isRtl
-            ? this.nav.scrollLeft === 0
-            : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;
-        const endLeft = this.isRtl
-            ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth
-            : this.nav.scrollLeft === 0;
-        if (endLeft) {
-            this.hideControlLeft = true;
-            this.hideControlRight = false;
-        }
-        else if (endRight) {
-            this.hideControlLeft = false;
-            this.hideControlRight = true;
-        }
-        else {
-            this.hideControlRight = false;
-            this.hideControlLeft = false;
-        }
-    };
-    handleBtnClick = (goRight = false) => {
-        const navWidth = this.getNavWidth();
-        let leftAmt;
-        if (goRight)
-            leftAmt = this.nav.scrollLeft + navWidth - 20;
-        else
-            leftAmt = this.nav.scrollLeft - navWidth + 20;
-        try {
-            this.nav.scroll({
-                left: leftAmt,
-                behavior: 'smooth',
-            });
-        }
-        catch (_e) {
-            this.nav.scrollLeft = leftAmt;
-        }
-    };
     handleTouchStart = (event) => {
         if (this.disableSwipe)
             return;
@@ -396,57 +272,43 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
             this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
         });
     };
-    handleTabSlotChange = (ev) => {
+    handleTabSlotChange = () => {
         setTimeout(() => {
             this.setAriaLabels();
-            this.handleTabScroll();
             this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
-            this.updateScrollControls();
         }, 500);
-        /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */
-        const nodes = ev.target.assignedElements({ flatten: true });
-        nodes.forEach((node) => {
-            if (!this.mutationObservers.get(node)) {
-                const mo = new MutationObserver(() => {
-                    setTimeout(() => {
-                        this.syncActiveTabIndicator();
-                        this.handleTabScroll();
-                        this.updateScrollControls();
-                    }, 500);
-                });
-                this.mutationObservers.set(node, mo);
-                mo.observe(node, {
-                    characterData: true,
-                    childList: true,
-                    subtree: true,
-                });
-            }
-        });
     };
     // Stencil hooks
+    componentWillLoad() {
+        this.init = true;
+    }
     componentDidLoad() {
         // Initial IO - watching for all content to be loaded
         const observer = new IntersectionObserver((entries, observer) => {
             if (entries[0].intersectionRatio > 0) {
                 this.setAriaLabels();
-                this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
-                if (this.storeId)
+                if (this.storeId) {
                     ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);
+                    const store = ComponentStore.get(this.storeId);
+                    const storedTab = store.retrieve()?.tab;
+                    // if a tab is in storage, set it as active now
+                    if (storedTab && storedTab !== store.initialState?.tab) {
+                        this.getAllActiveTabs.forEach(element => {
+                            if (element.panel === storedTab) {
+                                element.active = true;
+                            }
+                            else {
+                                element.active = false;
+                            }
+                        });
+                    }
+                }
+                this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
                 observer.unobserve(entries[0].target);
+                this.init = false;
             }
         });
         observer.observe(this.host);
-        requestAnimationFrame(() => this.updateScrollControls());
-        if (!window['ResizeObserver'])
-            return;
-        this.resizeObserver = new ResizeObserver(() => {
-            setTimeout(() => {
-                this.updateScrollControls();
-                this.syncActiveTabIndicator();
-                scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
-            }, 500);
-        });
-        this.resizeObserver.observe(this.nav);
     }
     connectedCallback() {
         this.isRtl =
@@ -456,68 +318,54 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
             this.setAriaLabels();
         }
     }
-    disconnectedCallback() {
-        if (this.resizeObserver)
-            this.resizeObserver.unobserve(this.nav);
-    }
     render() {
         this.isRtl = this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: 'babc67784c37d7ba1c148f2b6672d1e9b2deda19', class: { ...createColorClasses(this.color), 'nano-tab-group': true }, dir: this.isRtl ? 'rtl' : null }, h("div", { key: '7e290c2c4db866dab8444904b90c1abcf1fb8c95', part: "base", class: {
-                'nano-tab-group': true,
-                'nano-tab-group--top': this.placement === 'top',
-                'nano-tab-group--start': this.placement === 'start',
-                'nano-tab-group--has-scroll-controls': this.hasScrollControls,
-                'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
-                'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'af7e627ddbeb08b811ec8b41e240ef1cd28ab7aa', class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (h("button", { key: '9b44ad15be0ec455ba92172edd98164a096f61f8', disabled: !this.hasScrollControls, class: {
-                'nano-tab-group__scroll-button': true,
-                'nano-tab-group__scroll-button--left': true,
-            }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { key: 'c649dadd477ebc80b84772e949103e52c9ef7412', name: "light/chevron-left", ariaLabel: "Scroll tabs towards the start" }))), h("div", { key: '5d013ca00f3adabc6c3571b08a985ca52e8fbc7b', ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { key: '49b533c77d65eb3165dbded564c7eab9802688d8', ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, h("div", { key: '281f29351daf0deae5895e5424956ece03e86b46', ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { key: '2d3c27fe7b67b5c58368421b716cf0a29f435d78', name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (h("button", { key: '883cba058e294b9516a9cd8af6c85f1c50ddaec7', disabled: !this.hasScrollControls, class: {
-                'nano-tab-group__scroll-button': true,
-                'nano-tab-group__scroll-button--right': true,
-            }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, h("nano-icon", { key: 'c3d70037fe6e12370f2e0547cdd98df1e95f3004', name: "light/chevron-right", ariaLabel: "Scroll tabs towards the end" })))), h("slot", { key: '2f1239ebc94dff329eb520388cd0da59d60190ba', name: "tab-content-header" }), h("div", { key: 'a13f28ad6ecc75c5702b92db8cea3be4cbe360d7', part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { key: '42e2b6133c478357b1a105af2961235bb4d0fe92', onSlotchange: this.handleContentSlotChange })))));
+        if (this.getAllTabs.length === 0)
+            return;
+        return (h(Host, { dir: this.isRtl ? 'rtl' : null, class: "nano-tab-group" }, h("div", { part: "base", class: {
+                group: true,
+                'group--top': this.placement === 'top',
+                'group--start': this.placement === 'start',
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("nano-masked-overflow", { role: "nav", class: "group__tabs", part: "tabs__wrapper", exportparts: "items:tabs, scroll-button:tabs__scroll-button, indicator:active-tab-indicator", orientation: this.placement === 'top' ? 'horizontal' : 'vertical', isActiveHandler: (itm) => this.activeTab === itm, scrollControls: !this.noScrollControls, hideScrollbars: true }, h("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }), h("div", { class: "group__tabs-border" })), h("div", { part: "body", class: "group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { onSlotchange: this.handleContentSlotChange })))));
     }
-    static get watchers() { return {
-        "tab": ["handleTabNameChange"],
-        "placement": ["handlePlacementChange"],
-        "noScrollControls": ["handleNoScrollControlsChange"],
-        "hideControlRight": ["hideRightBtn"],
-        "hideControlLeft": ["hideLeftBtn"],
-        "hasScrollControls": ["watchScrollControls"]
-    }; }
-    static get style() { return NanoTabGroupStyle0; }
+    static get style() { return tabGroupCss; }
 }, [1, "nano-tab-group", {
         "placement": [513],
         "noScrollControls": [4, "no-scroll-controls"],
-        "color": [1],
+        "equalTabSize": [516, "equal-tab-size"],
+        "size": [513],
         "storeId": [1, "store-id"],
         "storeMethod": [1, "store-method"],
         "disableSwipe": [4, "disable-swipe"],
-        "hasScrollControls": [32],
-        "hideControlRight": [32],
-        "hideControlLeft": [32],
-        "tab": [32],
         "show": [64]
-    }, [[0, "nanoTabClose", "handleTabClose"]], {
-        "tab": ["handleTabNameChange"],
-        "placement": ["handlePlacementChange"],
-        "noScrollControls": ["handleNoScrollControlsChange"],
-        "hideControlRight": ["hideRightBtn"],
-        "hideControlLeft": ["hideLeftBtn"],
-        "hasScrollControls": ["watchScrollControls"]
-    }]);
+    }, [[0, "nanoTabClose", "handleTabClose"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nano-tab-group", "nano-icon"];
+    const components = ["nano-tab-group", "nano-icon", "nano-icon-button", "nano-masked-overflow", "nano-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "nano-tab-group":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, TabGroup);
+                customElements.define(tagName, NanoTabGroup$1);
             }
             break;
         case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nano-masked-overflow":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
@@ -525,9 +373,7 @@ function defineCustomElement$1() {
     } });
 }
 
-const NanoTabGroup = TabGroup;
+const NanoTabGroup = NanoTabGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoTabGroup, defineCustomElement };
-
-//# sourceMappingURL=nano-tab-group.js.map

package/dist/components/nano-tab.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
@@ -7,11 +7,10 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const tabCss = ":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{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding-v:0.75rem;--padding-h:1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;--border-radius:inherit;display:inline-block;cursor:pointer;border-radius:var(--border-radius)}:host([direction=vertical]){--padding-v:1rem;--padding-h:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host(.nano-sortable__dragged){box-shadow:none}:host(.nano-sortable__dragged) .nanotab{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);margin-block-start:var(--tab-indicator-size);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{margin-block-start:0;border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);margin-inline-end:var(--tab-spacing);padding-block:var(--padding-v);padding-inline:var(--padding-h);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;align-items:center;position:relative}.nanotab ::slotted(*){display:flex;align-items:center}.nanotab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;background:var(--inactive-bg);z-index:1}:host(:last-of-type) .nanotab{margin-inline-end:0}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab--closable{padding-inline-end:0}.nanotab__tab{display:flex;border-radius:inherit}.nanotab__tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab__tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab__tab::before{content:\"\";position:absolute;inset:0;border-radius:inherit}.nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow) inset}.nanotab--active .nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow)}.nanotab__close-button{margin-inline:var(--nano-spacing-small, 8px) calc(var(--padding-h) / 2);appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) !important}";
-const NanoTabStyle0 = tabCss;
+const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1000);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-small);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
 
 let id = 0;
-const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
+const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -21,7 +20,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     tabId = `nano-tab-${++id}`;
     tab;
     get host() { return this; }
-    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+    /** The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group. */
     panel = '';
     /** The active, selected tab. If none active, the first will automatically be selected. */
     active = false;
@@ -43,18 +42,21 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
         this.nanoTabClose.emit();
     };
     handleCloseKeydown = (e) => {
-        if (e.key === ' ')
+        if (e.key === ' ') {
+            // stop scrolling
+            e.preventDefault();
             this.handleCloseClick();
+        }
     };
     render() {
-        return (h(Host, { key: '9204530dd88067b2d463fb75e96094856f5b96f8', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '13093d143297235f93f4d79bbb8c893cfff69b6c', part: "base", class: {
-                nanotab: true,
-                'nanotab--active': this.active,
-                'nanotab--disabled': this.disabled,
-                'nanotab--closable': this.closable,
-            } }, h("slot", { key: '89560d0bc1eb63f654cd67859d20f6a2f7156c6c', name: "start" }), h("div", { key: '2960d4c7ecb1a69d578b46a2a3dc0fce8420cf1b', part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", { key: '8060e84517e8b156b8bec769ff3f3dade3999720' })), this.closable && !this.disabled && (h("nano-icon-button", { key: '0ed730a6b5161e631e4750ff818d03a9144ff5b8', label: "Close this tab", iconName: "light/xmark", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { key: '2dbdea7e63a88719e597bc7237f2f9fdf5ed3ee8', name: "end" }))));
+        return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+                tab: true,
+                'tab--active': this.active,
+                'tab--disabled': this.disabled,
+                'tab--closable': this.closable,
+            } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
-    static get style() { return NanoTabStyle0; }
+    static get style() { return tabCss; }
 }, [1, "nano-tab", {
         "panel": [513],
         "active": [516],
@@ -71,7 +73,7 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "nano-tab":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, Tab);
+                customElements.define(tagName, NanoTab$1);
             }
             break;
         case "nano-icon":
@@ -92,9 +94,7 @@ function defineCustomElement$1() {
     } });
 }
 
-const NanoTab = Tab;
+const NanoTab = NanoTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoTab, defineCustomElement };
-
-//# sourceMappingURL=nano-tab.js.map