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

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

@@ -38,138 +38,116 @@
     }
   }:host {
   --padding-top: 13px;
-  --padding-end: 12px;
+  --padding-end: 13px;
   --padding-bottom: 13px;
-  --padding-start: 12px;
+  --padding-start: 13px;
   --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;
+  --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);
-}
-: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;
+  min-height: 100%;
 }
 
 :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);
+.head {
+  border-bottom: var(--nano-color-grey-mono-1400) 1px solid;
 }
 
 .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%;
+  inline-size: var(--menu-width);
+  transition: inline-size 0.3s ease;
+  top: var(--global-nav-height);
+  position: sticky;
 }
 
 :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);
+  font-size: var(--font-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-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;
-  background: var(--bg-color);
-  flex: 1;
+  flex: 1 1 0%;
 }
-.content::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 0;
-  background: var(--bg-color);
-  z-index: -1;
-  block-size: 100vh;
+.content:has(.foot) {
+  height: calc(100vh - var(--global-nav-height));
 }
 
 .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;
+  all: unset;
   padding-block: 6px;
-  padding-inline: 5px;
+  padding-inline: var(--padding-start) var(--padding-end);
+  width: 100%;
   display: flex;
-  align-content: center;
-  inline-size: 30px;
-  flex: 0 0 auto;
+  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 {
-  font-size: var(--icon-size);
-  transition: 0.2s transform ease-in-out;
-  transform: translateZ(0) rotate(0deg);
+  transition: var(--nano-transition-x-fast) rotate ease-in-out;
+  rotate: 0deg;
 }
 :host(.open) .collapse-btn .nano-icon {
-  transform: translateZ(0) rotate(180deg);
+  rotate: 180deg;
 }
 
-.foot {
-  margin-block-start: auto;
+.visually-hidden {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 
-.measure-ele {
-  block-size: 1px;
+.foot {
+  margin-block-start: auto;
+  margin-block-end: var(--padding-bottom);
 }

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: '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/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;
 }