@nanoporetech-digital/components 8.0.0-alpha.8 → 8.0.0-alpha.9

package/dist/components/nano-menu-drawer.js

@@ -1,12 +1,13 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, writeTask, Build, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, Build, writeTask, Host } from '@stencil/core/internal/client';
 import { c as closestElement } from './dom.js';
 import { t as transformTag, h } from './renderer.js';
+import { H as HasSlotController } from './slot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const menuDrawerCss = ":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-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(.nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn .nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn .nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}";
+const menuDrawerCss = ":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-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-grey-mono-1600);--bg-color-hover:var(--nano-color-grey-mono-1400);--bg-color-selected:var(--nano-color-grey-mono-1200);--bg-color-open:var(--nano-color-grey-mono-1500);--content-color:var(--nano-color-basic-white);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-height:100%}:host(.hide){display:none}.head{border-bottom:var(--nano-color-grey-mono-1400) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;top:var(--global-nav-height);position:sticky}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex}.content-wrap::after{content:\"\";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0 0;background-color:var(--bg-color);z-index:-1}.content{max-height:100%;inline-size:auto;display:flex;flex-direction:column;overflow:hidden;flex:1 1 0%}.content:has(.foot){height:calc(100vh - var(--global-nav-height))}.collapse-btn{all:unset;padding-block:6px;padding-inline:var(--padding-start) var(--padding-end);width:100%;display:flex;justify-items:flex-start;background-color:var(--bg-color);appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block-start:auto;margin-block-end:var(--padding-bottom)}";
 
 const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTMLElement {
     constructor() {
@@ -16,15 +17,12 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
     }
     containerDiv;
     contentDiv;
-    measureEle;
     globalNav;
     children = [];
-    io;
-    currHeight = window.innerHeight;
+    ro;
+    slotCtrl = new HasSlotController(this, 'foot');
     get el() { return this; }
     reset = false;
-    widthOk = true;
-    heightOk = true;
     isLoading = true;
     hide = false;
     /**
@@ -32,60 +30,52 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
      */
     open = true;
     /**
-     * Save open state to localStorage
-     */
-    saveState = true;
-    /**
-     * Screen width to hide the menu drawer and move the items into the nano-global-nav
+     * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
      */
     hideWidth = 576;
-    /**
-     * Should element hide and move items into the nano-global-nav when items are cut off
-     * (this will only work when nano-menu-drawer is displayed at full screen)
-     */
-    hideHeight = true;
     cancelNavItemEvents(ev) {
         if (!ev.detail.secondaryMenu)
             return;
         ev.stopPropagation();
     }
     openChange() {
-        if (this.saveState)
+        if (Build.isBrowser) {
             localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());
-        if (this.containerDiv) {
-            if (this.open)
-                writeTask(() => (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px'));
-            else
-                writeTask(() => (this.containerDiv.style.width = null));
         }
-    }
-    widthChange() {
-        if (this.widthOk)
-            this.moveItemsToDrawer();
-        else
-            this.moveItemsToGlobalNav();
-    }
-    hideHeightChange() {
-        if (this.hideHeight && !this.io)
-            this.attachIO();
-        else if (!this.hideHeight && this.io) {
-            this.io.disconnect();
-            this.io = undefined;
+        if (this.containerDiv) {
+            const documentWidth = document.documentElement.clientWidth;
+            const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
+            if (this.open) {
+                const menuWidth = this.contentDiv.scrollWidth;
+                writeTask(() => {
+                    this.containerDiv.style.width = menuWidth + 'px';
+                    this.containerDiv.style.setProperty('--menu-width', (menuWidth) + 'px');
+                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+                });
+            }
+            else {
+                writeTask(() => {
+                    this.containerDiv.style.width = null;
+                    this.containerDiv.style.removeProperty('--menu-width');
+                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+                });
+            }
         }
     }
     moveItemsToGlobalNav() {
-        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
         // dimensions not cool - move items out of element and into global nav
+        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
+        this.hide = true;
+        this.globalNav.triggerResize();
         currNavItems.forEach((element) => {
             this.children.push({
                 slot: element.getAttribute('slot'),
                 element: element,
             });
-            element.setAttribute('slot', 'overflow');
+            element.setAttribute('slot', 'menu');
             element.classList.add('nano-global-nav-menu');
             this.globalNav.appendChild(element);
         });
-        this.hide = true;
     }
     moveItemsToDrawer() {
         if (!this.children || !this.children.length)
@@ -99,108 +89,77 @@ const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class MenuDrawer extends HTM
         });
         this.children = [];
         this.hide = false;
-        if (!this.io)
-            this.attachIO();
     }
-    onWindowResize = () => {
-        if (window.innerWidth > this.hideWidth)
-            this.widthOk = true;
-        else
-            this.widthOk = false;
-        const vh = window.innerHeight * 0.01;
-        this.el.style.setProperty('--vh', `${vh}px`);
-        if (window.innerHeight > this.currHeight &&
-            this.widthOk &&
-            !this.heightOk) {
+    onResize = () => {
+        if (!this.globalNav || !Build.isBrowser)
+            return;
+        const { width } = this.globalNav.getBoundingClientRect();
+        if (width > this.hideWidth) {
             this.moveItemsToDrawer();
         }
-        this.currHeight = window.innerHeight;
+        else {
+            this.moveItemsToGlobalNav();
+        }
     };
     toggle = (e) => {
         e.preventDefault();
         this.open = !this.open;
     };
-    onToggleKeyDown = (ev) => {
-        switch (ev.key) {
-            case 'Enter':
-            case ' ':
-                this.open = !this.open;
-                break;
-        }
-    };
-    attachIO() {
-        if (!this.hideHeight)
-            return;
-        const io = (this.io = new window.IntersectionObserver((data) => {
-            this.heightOk = data[0].intersectionRatio !== 0;
-            if (!this.heightOk) {
-                this.moveItemsToGlobalNav();
-                this.io.disconnect();
-                this.io = undefined;
-            }
-        }, { threshold: 1 }));
-        io.observe(this.measureEle);
-    }
-    handleGlobalNavReady(e) {
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
+    attachRO() {
+        if (!Build.isBrowser || this.ro)
             return;
-        setTimeout(() => {
-            this.attachIO();
-            this.openChange();
-            this.onWindowResize();
-            this.isLoading = false;
-        }, 500);
+        this.ro = new ResizeObserver(() => {
+            this.onResize();
+        });
+        this.ro.observe(this.globalNav);
     }
     componentWillLoad() {
         this.globalNav = closestElement(transformTag('nano-global-nav'), this.el);
-        this.widthOk = window.innerWidth > this.hideWidth;
-        this.currHeight = window.innerHeight;
-        if (this.saveState) {
+        if (!this.globalNav) {
+            console.warn('nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.');
+        }
+        if (Build.isBrowser) {
             const localState = localStorage.getItem('nanoMenuDrawerOpen');
-            this.open = localState ? localState === 'true' : this.open;
+            this.open = localState ? (localState === 'true' ? true : false) : this.open;
+            this.globalNav.componentOnReady().then(() => {
+                this.openChange();
+            });
         }
     }
+    connectedCallback() {
+        this.onResize();
+    }
     componentDidLoad() {
-        if (Build.isBrowser) {
-            window.addEventListener('resize', this.onWindowResize);
-        }
+        if (Build.isBrowser)
+            this.attachRO();
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.onWindowResize);
-        if (this.io) {
-            this.io.disconnect();
-            this.io = null;
+        if (Build.isBrowser) {
+            this.ro?.disconnect();
+            this.ro = undefined;
         }
     }
     render() {
-        return (h(Host, { key: 'ce58d5db4ed3a23557189fbc3eb2cf0a0ad32edd', class: {
+        return (h(Host, { key: 'fe9f1c17828f6884f663a0990851f66cbb9ff026', class: {
                 open: this.open,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'a68d7698be7747a6a191a44364b615c3866f8160', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'f6c92461b79e0b3e44f138736ef65089680101a8', class: "content-wrap" }, h("nav", { key: '51ce192b7cbb38233baced954f4228e756052026', ref: (div) => (this.contentDiv = div), class: "content" }, h("button", { key: '5662329d6320ef44d837afc823c09beb1563c0fe', onMouseDown: this.toggle, onKeyDown: this.onToggleKeyDown, class: "collapse-btn" }, h("nano-icon", { key: '77d0e152d06593f3999072a1b557673a8ddc8a72', name: "light/right-to-line", "aria-label": "collapse / expand" })), h("slot", { key: '8369d8882e41547e088ec41401cc2273efb2b59a' }), h("div", { key: '90c996a4d1debfd4965353e5e60548605418dfbd', class: "foot" }, h("div", { key: '3ca7e34bde41f742d20edbef571400c875179858', class: "measure-ele", ref: (div) => (this.measureEle = div) }), h("slot", { key: '1b5d32415c0e727788186bd9011de394cb7b5759', name: "foot" })))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '62bcaa0a299c8887479ec83a067eb8e2ff188de8', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a20706de787a6e6e3b3f1ee4a5a079ed601ac2d2', class: "content-wrap" }, h("nav", { key: 'd487b8709b36b54d207f1a257564b98d12722c09', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'e1fb80d26a27fc35d2999908a3d3f264f9bb15af', class: "head" }, h("button", { key: '0778e6742189405de47c34cbe9e346c6fec4de63', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '5b53c2819fdf51f6b611d11b6ce9c8d621339308', name: "light/arrow-right-to-line" }), h("span", { key: 'b2eff692e0251e2a05a64cc93ed0635ff8659084', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '7a65ca13555e4706728916e116af51cb05263ed2' }), this.slotCtrl.has('foot') && (h("div", { key: '40794aacb4185b8020e94c79dc9d47e65a637fcc', class: "foot" }, h("slot", { key: 'f5b7d990d47e336ad725b0c3c3726d65f8143122', name: "foot" }))))))));
     }
     static get watchers() { return {
-        "open": ["openChange"],
-        "widthOk": ["widthChange"],
-        "hideHeight": ["hideHeightChange"]
+        "open": ["openChange"]
     }; }
     static get style() { return menuDrawerCss; }
 }, [1, "nano-menu-drawer", {
         "open": [1028],
-        "saveState": [4, "save-state"],
         "hideWidth": [2, "hide-width"],
-        "hideHeight": [4, "hide-height"],
         "reset": [32],
-        "widthOk": [32],
-        "heightOk": [32],
         "isLoading": [32],
         "hide": [32]
-    }, [[0, "nanoOpen", "cancelNavItemEvents"], [0, "nanoClose", "cancelNavItemEvents"], [16, "nanoIsReady", "handleGlobalNavReady"]], {
-        "open": ["openChange"],
-        "widthOk": ["widthChange"],
-        "hideHeight": ["hideHeightChange"]
+    }, [[0, "nanoOpen", "cancelNavItemEvents"], [0, "nanoClose", "cancelNavItemEvents"]], {
+        "open": ["openChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/nano-more-less.js

@@ -54,8 +54,8 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'e1afec82d8deaccc2710b9523edb2f46e9918c1b', class: "nano-more-less" }, h("slot", { key: '704bb046e601225e50a7dc5b74dee973bf58274c', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd905bc9d85634c5eed8e33acdc28f0bfae6396a4', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '64c6138dc9e43cfe13e7be7d43740e533fa03630', name: "less" }, h("button", { key: '3c447841fafb877de9e2e16ce2f103da5831d744', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '3bde961caf3acbf1db08892d2131e8afdc457681', class: "nano-more-less" }, h("slot", { key: 'bc9a9c15a5e0ae53735602b23fbb248e8e51649d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '500e8c63e9ef6e0b80318d904388c8cecce8f66f', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '411cfccdaf9eaa3c6443841100791fd656fc71fe', name: "less" }, h("button", { key: '9001e6086687793575b8e3e62529e1c15846aa4e', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

package/dist/components/nano-rating.js

@@ -173,23 +173,23 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: '1f1a4c5f6b8dea2419e75be53db6e74d4455c3c5', class: "nano-rating" }, h("div", { key: '6898eef81bc7e3d634b3054a4694f49db79929c8', class: "rating-wrap" }, h("div", { key: 'bbad068f69e99c12083bb53c00a25b2dff02ddb7', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h(Host, { key: '3c6a6a92555b16420e5a5401f6020a6c2bc66b50', class: "nano-rating" }, h("div", { key: '2ccf681ef28c0f2b804da2c98416c7ea384de6fa', class: "rating-wrap" }, h("div", { key: '529d5315867405bc0b50ebe4e1ee3c38c88002ef', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd2518d1ec73803cdc284c64ff4fcee9c86f6077d', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '81cefbe9454eed12d1689cc7e0e2d525a760a5b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '046a97718d174445372c909eee0d061c4effd770', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '418807cc26fddef01c6f9ea63def433e9b9d71e9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '8a0a62b7419a719e2a2cf08e361aae299dea7d65', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '7c759836e1c59f34140097b9e0026e99fda9abe5', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],

package/dist/components/nano-slide.js

@@ -39,7 +39,7 @@ const Slide = /*@__PURE__*/ proxyCustomElement(class Slide extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: 'ef8511e766273878ebc0ceaa121199bd86130bbb', class: "nano-slide" }, h("slot", { key: '4b783b4c3df8662fb590a52ed17df975681d44bc' })));
+        return (h(Host, { key: '3c6b1d8ac380c330925fdd1688ca54161afa5033', class: "nano-slide" }, h("slot", { key: 'c9befdfd0d120aa6c773ba9ed24d97fcde7f8ce7' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]

package/dist/components/nano-sortable.js

@@ -731,7 +731,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '108dd7db53821adef114521be6a825561c974137', class: "nano-sortable" }, h("div", { key: '7b23e9a51e5cb366676fb61163b031c0ba693599', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a61fca55dd0de8a4dd1611ada70101ca19906528' })));
+        return (h(Host, { key: 'bf0691e59a5832ca8249a7d1253232399f6dcd08', class: "nano-sortable" }, h("div", { key: '5ff7d9c08e496fbfffb5df836dd6834d339106fc', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '6419b77cd7e962726d7b2c5b88997b73b1bc9a3f' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],

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

@@ -24,10 +24,10 @@ const NanoTabContent$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabContent e
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: 'd75249c18948a3c52f1163cf036cbde27e64ef2c', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: 'e77e802472984dd6997e5dbea3b807853c530f9a', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: '11c33106eb61433952881ae701d68e5a0bc738c5', part: "base", class: "nano-tab-content" }, h("slot", { key: 'a9e9ed4679fb0ab7d90ee45dddb3c482e2598242' }))));
+            } }, h("div", { key: '9c642ced7beec01c0cbaa333b977ee23ef83981a', part: "base", class: "nano-tab-content" }, h("slot", { key: 'fcafb5cedc796e0f3661519ccdb1d9374568d59e' }))));
     }
     static get style() { return tabContentCss; }
 }, [1, "nano-tab-content", {

package/dist/components/nano-tab.js

@@ -49,12 +49,12 @@ const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLEle
         }
     };
     render() {
-        return (h(Host, { key: 'be35131ea184b6644288e79d3e0bd1ea8c8668dc', 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: '24c2a9b88b258d4332a8fc15e7687ec9b0e2a54e', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: '42d49d8148bac6792761ca027917184992ac9787', 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: 'a5c816c6faab721c3c8896083f87ead5dd06abd1', 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: '80ab0aa015352e67446cee86a340db6a8b6ed6ee', name: "start" }), h("div", { key: '008484dda3003b4baa4c603ea43ce8ea15c4f688', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ee9fe66f2a58e0c06fafe1eb8ba0941ff0ca082' })), h("slot", { key: 'b3ef36e571ef16ecc40a2983faf5ade9e3a47a9f', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'ba51a18677145770de7b18974a28448fccb593cf', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: 'c1aa8a3a0239d501a65b5db2c263b5ad777360e0', name: "start" }), h("div", { key: '508bd62a360aa2c6ba195f7dbaa2e8503bc79771', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '48d789df0212ed3fcb91b169336540027aa182be' })), h("slot", { key: '29f8662c82ee362daf86d2fda096f1d95b9e80a1', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'bd37054c27603d7cf012c88c99ad472973539e3e', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
 }, [1, "nano-tab", {

package/dist/components/nano-table.js

@@ -229,10 +229,10 @@ const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTM
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'e968dfa9cd63226118a11fe73f142236e008b489', class: {
+        return (h(Host, { key: 'a976d3c4d360aa37eeccf025c4948b8bcf9a6a05', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '5dbe429e48270fc449057dee7d7c2090ad35e5e2', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '5e32115ed739865a4452f74ab19c01f7f63aa763', class: "nano-table__overflow" }))), h("slot", { key: '42bfc9215be8ca00a5d6aa5232475544cff4b2b7' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '6d78f909c2fd7ebd1b478e9b399ac97f5202acb5', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '9a2246d08f3f82efee4a6a6c7aec6002b159b9bc', class: "nano-table__overflow" }))), h("slot", { key: '21fad37f4eda294cd90b11175b8650b63dfe4ab0' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/components/nav-item.js

@@ -80,7 +80,7 @@ const displayTransition = (el, options) => {
     });
 };
 
-const navItemCss = ":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{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .navitem__label{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-start]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer)::slotted(.nano-icon[slot=icon-end]),:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .navitem__modal{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .navitem__modal:focus{outline:none}.navitem--open :host(.nano-menu-drawer) .navitem__modal{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (width >= 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(0%)}.navitem--open :host(.nano-menu-drawer[dir=rtl]) .navitem__modal{transform:translateX(-100%);opacity:1}";
+const navItemCss = ":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{display:contents}.navitem{background:inherit;color:inherit}a,button{all:unset;color:inherit;text-decoration:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--padding);gap:var(--nano-spacing-md);inline-size:100%;box-sizing:border-box;background:inherit}a:hover,a:focus,a:active,button:hover,button:focus,button:active{color:inherit}a:focus-visible,button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}a[disabled],button[disabled]{opacity:0.5;cursor:not-allowed}.navitem__label{margin-inline-end:auto}.navitem__modal{all:unset;display:none;position:absolute;color:initial;opacity:0;transition:var(--nano-transition-fast) ease}.navitem--open .navitem__modal{opacity:1}::slotted([slot=close-button]){all:unset}::slotted([slot=close-button]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}";
 
 const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLElement {
     constructor() {
@@ -112,8 +112,6 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
     checkbox = false;
     /** Whether secondary menus should close on blur */
     closeOnBlur = true;
-    /** Will show an indicator badge - only when placed in a nano-menu-draw */
-    notification = false;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose;
     /** Emitted when the nav item opens it's secondary navigation. */
@@ -242,24 +240,22 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         this.openChange();
     }
     render() {
-        return (h(Host, { key: '7554eb7a4a66fc4f899b40b35265245a3be931f8', class: {
+        return (h(Host, { key: '815fb74d8f91f3efb7c2582439b1e8f4f4aa905d', class: {
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-nav-item': true,
                 disabled: this.disabled,
-            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '4bf288ec9f9162bb746b70b085fde42b871f93fb', class: {
+            }, role: this.host.closest('[role="menu"]') ? 'menuitem' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '63a0f2086fd81b4cbea08c385de2e493d7c8f926', class: {
                 navitem: true,
                 'navitem--open': this.open,
                 'navitem--active': this.selected,
-            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'a9bf5adf3da060452ed58e2c6e1eba45168815a3', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
+            }, part: "trigger-wrapper" }, this.href && !this.disabled && (h("a", { key: 'e50cab85eba47cba80ff30a07bcab83c00595915', part: "trigger trigger--anchor", target: this.target, ref: (a) => (this.controlElement = a), href: this.href, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, h("slot", { key: '47cdd2e84dd51f236675351c599d8e9f9bf66ede', name: "icon-start" }), h("span", { key: 'a15d804a252ed532501fb08536ed5ce8a3b42e47', class: "navitem__label", part: "label" }, h("slot", { key: 'ea37d813d0fd15bd457930b61d06cd97d64fce35', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '384a3212fba3d0cc3d488974dcaf53c23c3942e1', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '698c4beb9cddb3b2037db40b5c9e33a276dad060', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
+            } }, h("slot", { key: '2fc43a8c964c8e34e045e0df85d5bf355b3e9b26', name: "icon-start" }), h("span", { key: '6aed9dea66e87ef15edb69971b1c97fd8d2fbe29', class: "navitem__label", part: "label" }, h("slot", { key: '96f26809714cbe44effe57851814e1e24a6ad851', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: 'f43de3bfdb6cdea0f93fe248d873c73062a3034b', name: "icon-end" }))), (!this.href || this.disabled) && (h("button", { key: '9db35da35c662d588729976d1be17a07ed855642', role: this.checkbox ? 'checkbox' : undefined, "aria-checked": this.checkbox ? this.selected.toString() : undefined, part: "trigger trigger--button", ref: (btn) => (this.controlElement = btn), onClick: this.handleClick, disabled: this.disabled, class: {
                 navitem__trigger: true,
-                notification: this.notification,
-            } }, h("slot", { key: 'c01a71dfaeb867d2792146110fdde1dd134b7f71', name: "icon-start" }), h("span", { key: '6a48071ba10f1407350e87958ed491f704714ea8', class: "navitem__label", part: "label" }, h("slot", { key: '246f807c0a03a8805fea87023f48de2f5fa7a7a0', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '6a246213800a4425464ac41aefe9362e327d412f', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '8928988fd43de734785801c9fc7707fb7efa33c3', part: "modal", class: {
+            } }, h("slot", { key: '394a189a9d5d8b65607bd6089c9a08cdeed8e48a', name: "icon-start" }), h("span", { key: '28b56da5d700f7654c2d42fda996babff390f92e', class: "navitem__label", part: "label" }, h("slot", { key: '13a35382772f7ee79af116c500eba5d4fd4a25ad', onSlotchange: this.handleDefaultSlotChange })), h("slot", { key: '158f3590fcf2025c3c53bd3d3f9dbeddbd2829ba', name: "icon-end" }))), this.slotCtrl.has('secondary') && !this.disabled && (h("div", { key: '44ab1a0d6930f5d60b8540157911d365821f611c', part: "modal", class: {
                 navitem__modal: true,
                 'navitem__modal--open': this.didOpen,
-            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'eca197afa8cb297eeafc4b7a55ffb6fb288c498c', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: '5a774cf15677b3848f80c0cf5bee87da44e3ca04', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: '57a08ef1239b6c29241524e3c7ac977c78c910d5', name: "close-button" }))), h("slot", { key: '6c35ed89b61461fcc294cddc022c57255558a63b', name: "secondary" })), h("div", { key: '163003649197f1ed341836e73e7acd50c7abc640', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
+            }, ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '758dc3ed99502ff459b187fb42dc6f1c83f335e8', class: "navitem__modal-content", part: `modal-content ${this.didOpen ? 'modal-content--open' : ''}` }, this.slotCtrl.has('close-button') && (h("div", { key: 'fb30657f31352b234b8f5f9f7dea697b663dc05d', part: "close-button", onClick: this.closeSecondary }, h("slot", { key: 'de6bdeb04bf0543c2200cca7a7a1d8d70032d0ed', name: "close-button" }))), h("slot", { key: '45c2c6ce36042b43c8177343e238392193a16367', name: "secondary" })), h("div", { key: 'd9ccc26e9f2675dcf5fc9000bc2759fd48247fe2', class: "navitem__modal-mask", onClick: this.closeSecondary, part: `modal-mask ${this.didOpen ? 'modal-mask--open' : ''}` }))))));
     }
     static get watchers() { return {
         "open": ["openChange"],
@@ -274,7 +270,6 @@ const NavItem = /*@__PURE__*/ proxyCustomElement(class NavItem extends HTMLEleme
         "selected": [1540],
         "checkbox": [516],
         "closeOnBlur": [4, "close-on-blur"],
-        "notification": [4],
         "didOpen": [32],
         "isInMenuDrawer": [32],
         "setFocus": [64]

package/dist/components/option.js

@@ -7,7 +7,7 @@ import { g as getDirectChildren } from './dom.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const optionCss = ":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{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-300);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
+const optionCss = ":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{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-400);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 
 let optIds = 0;
 const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
@@ -46,7 +46,7 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
      */
     disabled = false;
     /** You can add extra meta for this option. When displayed in a list, users
-     * search / filter via extra related terms. Another usecase is 'endonyms'
+     * search / filter via extra related terms.
      */
     filterMeta = '';
     /** Setting an href will render an `<a>` element */
@@ -80,12 +80,12 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
     }
     render() {
         const WrapTag = this.href ? 'a' : 'div';
-        return (h(Host, { key: '9cb53ef00c462eeca94b4dbe77d94698cd86f9b2', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'a51a558222fe2b114677ad1bc374058aba990a0a', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '3d7d858dd7c55eadbcb924e1d8462ba27c73dc9e', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '4051c726c3b1a62ed9862e2d82a810847718807b', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: 'fa5ce294668b860ac56cb0b436379057eebb275e', part: "check-icon", class: "option__check" }, h("slot", { key: '2592c5a5435e45023c0cb4b650d43a4cda29928d', name: "check-icon" }, h("nano-icon", { key: '2ad41f653575adc67328f3cea2eb39d3720ad400', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '0d7c8d24179350d535095a0c990e3ac46bdc4a03', part: "start", class: "option__start" }, h("slot", { key: '4d06de2b71ab9b00aa56ba87a09fdaa432b55b59', name: "start" })), h("div", { key: '5e05e3a353da6d50ad54f5ce3b5b63d496a2581b', part: "label", class: "option__label" }, h("slot", { key: '22acfe355130ea11be35f8abb2529476e67e9ab4' }, this.label || this.value)), h("div", { key: '016938a4d89ca5188dc4f7c20b7cd7fedb51cc44', part: "end", class: "option__end" }, h("slot", { key: 'b8c0caa513d3089d607189cb673c9d78e424fabb', name: "end" })))));
+            } }, h("div", { key: '0e8e795ad749c25df46592f41caf8664b2997048', part: "check-icon", class: "option__check" }, h("slot", { key: 'dba5e01284906955e5be879da029c567d7a9046b', name: "check-icon" }, h("nano-icon", { key: 'ae3b584d895112bb62847f6c1ec0076595e7ce47', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'dfc6d63862ff2a4f666f87142cd0aa82d674d689', part: "start", class: "option__start" }, h("slot", { key: '69da1111220411b943e5461d78e1b04c2b57badb', name: "start" })), h("div", { key: 'a13f33b7b3a06d9ebf62053f5f5667884409ee1c', part: "label", class: "option__label" }, h("slot", { key: '685114fae504ec3bc9553c73d5906fbea061d07b' }, this.label || this.value)), h("div", { key: 'f44ccfedcf5d8c22c4dd08374c4421f7f146165b', part: "end", class: "option__end" }, h("slot", { key: '118e4cf34d5b43df7216340c4c401ed274d88d5a', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],