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

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

@@ -4,26 +4,26 @@
 import { Host, writeTask, Build, } from "@stencil/core";
 import { closestElement } from "../../utils/dom";
 import { transformTag, h } from "../../utils/renderer";
+import { HasSlotController } from "../../utils/slot";
 /**
- * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
- * Shows menu item logos only on minimised, expands to show entire menu item.
- * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
- * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+ *
+ * Display navigation items in a collapsible drawer at the side of a UI.
+ *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot foot - nav items to be placed at the bottom of the drawer
  * @slot - default slot for nav items
  */
 export class MenuDrawer {
     containerDiv;
     contentDiv;
-    measureEle;
     globalNav;
     children = [];
-    io;
-    currHeight = window.innerHeight;
+    ro;
+    slotCtrl = new HasSlotController(this, 'foot');
     el;
     reset = false;
-    widthOk = true;
-    heightOk = true;
     isLoading = true;
     hide = false;
     /**
@@ -31,60 +31,52 @@ export class MenuDrawer {
      */
     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)
@@ -98,87 +90,64 @@ export class MenuDrawer {
         });
         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)
+    attachRO() {
+        if (!Build.isBrowser || this.ro)
             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'))
-            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 is() { return "nano-menu-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -214,26 +183,6 @@ export class MenuDrawer {
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "saveState": {
-                "type": "boolean",
-                "attribute": "save-state",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Save open state to localStorage"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "hideWidth": {
                 "type": "number",
                 "attribute": "hide-width",
@@ -247,40 +196,18 @@ export class MenuDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Screen width to hide the menu drawer and move the items into the nano-global-nav"
+                    "text": "Global-nav width to hide the menu drawer and move the items into the nano-global-nav"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "576"
-            },
-            "hideHeight": {
-                "type": "boolean",
-                "attribute": "hide-height",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Should element hide and move items into the nano-global-nav when items are cut off\n(this will only work when nano-menu-drawer is displayed at full screen)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "reset": {},
-            "widthOk": {},
-            "heightOk": {},
             "isLoading": {},
             "hide": {}
         };
@@ -290,12 +217,6 @@ export class MenuDrawer {
         return [{
                 "propName": "open",
                 "methodName": "openChange"
-            }, {
-                "propName": "widthOk",
-                "methodName": "widthChange"
-            }, {
-                "propName": "hideHeight",
-                "methodName": "hideHeightChange"
             }];
     }
     static get listeners() {
@@ -311,12 +232,6 @@ export class MenuDrawer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "nanoIsReady",
-                "method": "handleGlobalNavReady",
-                "target": "body",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -65,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '49834d5d379bcc71bfd228cbad3becf4343160ac', class: "nano-more-less" }, h("slot", { key: '4cbea5f74ddd512cacfc2c65c35ce0cd9fbfee00', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd8b9b8135f3789705f18793dd8262bcebb38f2cb', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '564f67099d59d520fbf9a5c40f6f14e681346eff', name: "less" }, h("button", { key: 'a5aa9c0a0eda6b6dda1c72288b18668d4028eec5', 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/collection/components/nav-item/nav-item.css

@@ -42,6 +42,7 @@
   * that the consumer component will apply specific styles using `::part` properties within a `...light-dom` style-sheet.
   *
   * @prop --padding: padding applied to the trigger element. Defaults to `0`
+  * @prop --icon-size: size of the icon. Defaults to `1em`
   */
   display: contents;
 }
@@ -99,97 +100,4 @@ a[disabled], button[disabled] {
 ::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;
 }

package/dist/collection/components/nav-item/nav-item.js

@@ -21,8 +21,15 @@ import { focusInContainer } from "../../utils/active-element";
  * @part trigger--button - the controlling `<button>` element
  * @part trigger--anchor - the controlling <a> element
  * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
- * @part secondary-wrapper - the div surrounding slotted secondary content
- * @part secondary-mask - the div that is added when secondary content is shown
+ * @part label - the label text of the nav item
+ * @part modal - the div that contains the secondary content panel
+ * @part modal--open - the div that contains the secondary content panel when open
+ * @part modal--close - the div that contains the secondary content panel when closed
+ * @part modal-content - the div that contains the secondary content panel content
+ * @part modal-content--open - the div that contains the secondary content panel content when open
+ * @part modal-mask - the div that covers the screen when the secondary content panel is open
+ * @part close-button - the div that contains the close button for the secondary content panel
+ * @part close-button-icon - the icon inside the close button for the secondary content panel
  *
  * @version 1.0.0
  * @status stable
@@ -48,8 +55,6 @@ export class NavItem {
     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. */
@@ -178,24 +183,22 @@ export class NavItem {
         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 is() { return "nano-nav-item"; }
     static get encapsulation() { return "shadow"; }
@@ -350,26 +353,6 @@ export class NavItem {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "notification": {
-                "type": "boolean",
-                "attribute": "notification",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Will show an indicator badge - only when placed in a nano-menu-draw"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/option/option.css

@@ -62,7 +62,7 @@
   --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);
+  --color-disabled: var(--nano-color-neutral-400);
   --opt-icon-size: 1em;
   --padding-start: var(--nano-spacing-sm);
   --padding-end: var(--nano-spacing-md);
@@ -123,8 +123,6 @@
 }
 .option__start ::slotted(.nano-icon) {
   font-size: var(--opt-icon-size);
-}
-.option__start ::slotted(:last-child) {
   margin-inline-end: var(--padding-end);
 }
 .option__end {

package/dist/collection/components/option/option.js

@@ -49,7 +49,7 @@ export class Option {
      */
     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 */
@@ -83,12 +83,12 @@ export class Option {
     }
     render() {
         const WrapTag = this.href ? 'a' : 'div';
-        return (h(Host, { key: '67b4ee2d21105b72d816b42054329fbe54ed8688', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '61ad0172a3d7c0fefacd135121d9f52c15dc9bc5', 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: '029278a486ed9a1dd809940ed702c55ac0f490a2', part: "check-icon", class: "option__check" }, h("slot", { key: '70c6d3b126e18b91f9e298491e11f6c6a188a957', name: "check-icon" }, h("nano-icon", { key: '20543f3436aff8fb152d69b8d89d009b02d18b88', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '548cb4eb15f59c3be72ec1452ca84206c97389da', part: "start", class: "option__start" }, h("slot", { key: '5e9f2ac1c0358b8008799ed08643619fc41055f8', name: "start" })), h("div", { key: '95f3cd28fb34f02d55034322cd5154e06d5fc4c1', part: "label", class: "option__label" }, h("slot", { key: '1c1208ad99a9a123c6a9110c3cd976a502bc5cca' }, this.label || this.value)), h("div", { key: 'fcf9bf3e1c6674811be6a29af94d747903457d33', part: "end", class: "option__end" }, h("slot", { key: 'c49f296954fd5a60920af5b07fb5157bbe6e4e72', 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 is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }
@@ -197,7 +197,7 @@ export class Option {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms. Another usecase is 'endonyms'"
+                    "text": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/progress-bar/progress-bar.css

@@ -51,7 +51,7 @@ nano-progress-bar {
   position: relative;
   overflow: clip;
   border-radius: var(--border-radius);
-  height: var(--height);
+  block-size: var(--height);
   font-size: var(--height);
 }
 nano-progress-bar[size=small] {
@@ -62,8 +62,8 @@ nano-progress-bar[size=large] {
 }
 nano-progress-bar progress {
   appearance: none;
-  width: 100%;
-  height: inherit;
+  inline-size: 100%;
+  block-size: inherit;
   border-radius: var(--border-radius);
   background-color: var(--track-color);
   grid-area: 1/1;
@@ -79,7 +79,7 @@ nano-progress-bar > label progress {
 }
 nano-progress-bar:has(progress:not([value]))::after {
   content: "";
-  width: 100%;
+  inline-size: 100%;
   inset: 0;
   display: block;
   transform: translateZ(0);
@@ -125,7 +125,7 @@ nano-progress-bar[show-percent] progress[value]::before {
   position: absolute;
   inline-size: attr(value %);
   min-inline-size: 6%;
-  top: 50%;
+  inset-block-start: 50%;
   translate: 0 -50%;
   text-align: center;
   transition: inline-size var(--nano-transition-fast);