@nanoporetech-digital/components 8.1.1 → 8.3.0

package/dist/cjs/nano-tab-content.cjs.entry.js

@@ -24,10 +24,10 @@ const NanoTabContent = class {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (renderer.h(index.Host, { key: 'f253c45230dccc1f8c1cd05e300db935380b0845', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (renderer.h(index.Host, { key: 'f182a99dab031220a40b2c5125d3229b8bacca1c', 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,
-            } }, renderer.h("div", { key: 'f01e7dc01e79d835af3414ee157dfa1b41675070', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '3a9ab065ab08e5495f09bae2769f8fba7b0d02e8' }))));
+            } }, renderer.h("div", { key: '47b383859162b6a64518273a9057464de1d37479', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '3f908fec081c956f9ffd8d7de5e0f45b5e193a8c' }))));
     }
 };
 NanoTabContent.style = tabContentCss;

package/dist/cjs/nano-tab.cjs.entry.js

@@ -46,12 +46,12 @@ const NanoTab = class {
         }
     };
     render() {
-        return (renderer.h(index.Host, { key: 'e273e4e931adea13f67b9975d6947e65cf0b2aa8', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h("div", { key: '981d0646a81af06bddfca0c752ef0c29e364b89a', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (renderer.h(index.Host, { key: '7eca94a330509cbd3c6d232444fbcde422b755a6', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h("div", { key: 'fca6ace8b5fc9c0142fcd04d70cb475323d8ef9d', 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,
-            } }, renderer.h("slot", { key: '53d519d25cfe15597d3ad05fb8bad68dc78bd663', name: "start" }), renderer.h("div", { key: '7cdf3e37c1631812cabe958eacc4ac70b2d70bcf', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '842a77bb982f418238128d228b822907f69d14e6' })), renderer.h("slot", { key: 'c596993b46b6a8b6380608556bf05099ae12c183', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '80149bb54834963ef542f185f3519ef1a8cd0382', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, renderer.h("slot", { key: '3693ff8719b24c34db9018941daab7c840434502', name: "start" }), renderer.h("div", { key: 'c792fce22a28175e32f7e0b23a1a62f799016c76', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '76b725cd050993d377bf5c7208ce5b7fdf224136' })), renderer.h("slot", { key: 'f7bd50a43bb64b67b2ce181bf9215ada4c0ccd12', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '96f6bddd3dee12d2e8adeb7a59f98d0cfe8b9c82', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
 };
 NanoTab.style = tabCss;

package/dist/cjs/nano-table.cjs.entry.js

@@ -224,10 +224,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: '29c35d81fa4432d251f86195a7dd8940661e5abc', class: {
+        return (renderer.h(index.Host, { key: '61967ae8d9228be1374d9a4ee4e08b286cd4dd57', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '4984ff894c8b8799917de26a0a4f8355f5cb4c2c', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '5aef0beda315f82d6e361b2607e95d4b9828cfbb', class: "nano-table__overflow" }))), renderer.h("slot", { key: '549e9de13a1b333787fe48c77c5a3be89734c0c4' })));
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: 'eca1991383ebca49f6032066078f02b62c839d6c', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: 'f3bcb6830439858393c1eda96d68c2c5ccadd15a', class: "nano-table__overflow" }))), renderer.h("slot", { key: '7662741dcb672f75bae03c16b5745ff4946f12f7' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/cjs/{page-dots-B69b5Pqb.js → page-dots-DpnNe0bi.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-CFlLOF1V.js');
+var nanoSlides_entry = require('./nano-slides-DLbZhf2H.js');
 require('./index-Bp8uD6Gl.js');
 require('./renderer-BiFPhR1V.js');
 

package/dist/collection/collection-manifest.json

@@ -43,10 +43,12 @@
     "components/icon-item/icon-item.js",
     "components/img/img.js",
     "components/in-page-nav/in-page-nav.js",
+    "components/increment/increment.js",
     "components/intersection-observe/intersection-observe.js",
     "components/masked-overflow/masked-overflow.js",
     "components/menu-drawer/menu-drawer.js",
     "components/more-less/more-less.js",
+    "components/option-box/option-box.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
     "components/rating/rating.js",

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "references": {
                         "Breadcrumb": {
                             "location": "local",
-                            "path": "/builds/W1hp42tj/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/uSGJX_GU/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

package/dist/collection/components/global-nav/assets/local-logged-in.json

@@ -96,7 +96,7 @@
   },
   "search": {
     "app_id": "N8NZI5A47F",
-    "api_key": "MWNlOTA4YWY3OTk5YmFiNDZjZmMzNWJiNDkxN2Q1ZGM0MGMzMzA5Y2FlYTQ5NjVhYzE2MTBiYjk2ZWQ3MzQ4NGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1MzU0MDM2NQ==",
+    "api_key": "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
     "indeces": [
       {
         "index": "ont_prod_en_v3",

package/dist/collection/components/global-nav/assets/local-logged-out.json

@@ -92,7 +92,7 @@
   },
   "search": {
     "app_id": "N8NZI5A47F",
-    "api_key": "MWNlOTA4YWY3OTk5YmFiNDZjZmMzNWJiNDkxN2Q1ZGM0MGMzMzA5Y2FlYTQ5NjVhYzE2MTBiYjk2ZWQ3MzQ4NGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1MzU0MDM2NQ==",
+    "api_key": "MDQ0OWZiMzhmZjI4YmZmMmIzY2NhNzI3NGU4Yjc5YWVhNmExMzcxNDRlZTNlN2U2NGEwNzRlZmJjZTZkZmExZWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1NTk0Mzc5MA==",
     "indeces": [
       {
         "index": "ont_prod_en_v3",

package/dist/collection/components/global-nav/global-nav.css

@@ -146,6 +146,7 @@ nano-badge {
 }
 .gn__main-menu.resizing {
   transition: none;
+  opacity: 0;
 }
 .gn__main-menu > * {
   margin-inline-end: var(--nano-spacing-xl);

package/dist/collection/components/icon-button/icon-button.css

@@ -62,7 +62,7 @@
   align-items: center;
   border: none;
   border-radius: inherit;
-  background: var(--button-bg);
+  background: inherit;
   font-size: inherit;
   color: inherit;
   padding: var(--padding);

package/dist/collection/components/in-page-nav/in-page-nav.js

@@ -5,7 +5,7 @@ import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import { HasSlotController } from "../../utils/slot";
 import { getDirectChildren } from "../../utils/dom";
-/**\
+/**
  * In-page navigation allows users to quickly find different sections on a page.
  *
  * @status new
@@ -58,7 +58,7 @@ export class NanoInPageNav {
         return node;
     }
     render() {
-        return (h(Host, { key: 'd02d05e95dc01cff50937560be67f81e36c692e0', class: "nano-in-page-nav" }, h("nav", { key: '8109f7fc65b9ad5e05728db1d79e8cbe6fd2e8f6', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '5b1bda413e8d37f2cde12863ec05a0571070f25d', class: "header" }, h("slot", { key: 'a598d76293559bb215129001635e758959115e24', name: "back" }), h("slot", { key: 'd263bbdeb8f47f14a692db7575d1c516cbfe4334', name: "accessory" }))), h("div", { key: '53ad7e52f66d837d1abe6f37e73f4ff18c61161d', class: "desktop-nav" }, h("slot", { key: '2740d35f92ccc13add4951ce0f569d755b7a55b7' })), h("nano-details", { key: '5d1707523462beb705c68821f5a2f526561aec7c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
+        return (h(Host, { key: '5fc7993edd48363da225ffce7e8d3dad8689e761', class: "nano-in-page-nav" }, h("nav", { key: '4cc75849661bb1e2fd144ac075a693ce9e5af58f', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '286df7a444423180967750017575414cce154b0d', class: "header" }, h("slot", { key: '255d81a0c2d26b0069a83a08e552e6afeb035295', name: "back" }), h("slot", { key: 'c939561b8be1b4a479e1f0c01684f5dd0a3014ce', name: "accessory" }))), h("div", { key: '411231a64e23575d76722f59446567f5cd68575e', class: "desktop-nav" }, h("slot", { key: '892a93de5de705e392b687ee62ab89c17bcc349a' })), h("nano-details", { key: '34d89f9f7927db1cb817124cf0d053f88963484c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
     }
     static get is() { return "nano-in-page-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/increment/increment.css

@@ -0,0 +1,102 @@
+: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: inline-block;
+}
+
+.root {
+  display: grid;
+  grid-template-columns: min-content auto 1fr;
+  grid-template-rows: max-content max-content;
+  align-items: stretch;
+}
+
+::slotted(*) {
+  text-align: center;
+}
+
+nano-icon-button {
+  background: var(--nano-color-base-0);
+  color: var(--nano-color-primary-1000);
+  display: flex;
+  border-radius: var(--nano-border-radius-pill);
+  position: relative;
+  z-index: 1;
+  inline-size: fit-content;
+  block-size: 100%;
+}
+nano-icon-button:hover {
+  background: var(--nano-color-primary-100);
+}
+nano-icon-button:active {
+  background: var(--nano-color-primary-300);
+}
+nano-icon-button::part(base) {
+  border: 1px solid var(--nano-color-neutral-300);
+}
+nano-icon-button::part(base):focus-visible {
+  outline: var(--nano-focus-ring-color) solid 3px;
+  outline-offset: -2px;
+}
+
+.minus {
+  grid-column: 1;
+  grid-row: 1;
+}
+.minus nano-icon-button {
+  --padding: 0.4375em 0.625em 0.4375em 1.125em;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.minus nano-icon-button::part(base) {
+  border-inline-end: none;
+}
+
+.plus {
+  grid-column: 3;
+  grid-row: 1;
+}
+.plus nano-icon-button {
+  --padding: 0.4375em 1.125em 0.4375em 0.625em;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.plus nano-icon-button::part(base) {
+  border-inline-start: none;
+}

package/dist/collection/components/increment/increment.js

@@ -0,0 +1,97 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+/**
+ * Increments and decrements a value using an [input](/components/input).
+ *
+ * @status new
+ * @version 8.2.0
+ */
+export class NanoIncrement {
+    host;
+    inputElement;
+    ignoreInputChange = false;
+    inputElementChanged(_newValue, oldValue) {
+        if (oldValue) {
+            oldValue.removeEventListener('nanoChange', this.inputChangeHandler);
+        }
+        if (this.inputElement) {
+            this.inputElement.label = this.inputElement.label || 'Increment value';
+            this.inputElement.hideLabel = true;
+            this.inputElement.type = 'number';
+            this.inputElement.max = this.inputElement.max || '10';
+            this.inputElement.min = this.inputElement.min || '0';
+            this.inputElement.step = this.inputElement.step || '1';
+            this.inputElement.value = this.inputElement.value || '0';
+            this.inputElement.addEventListener('nanoChange', this.inputChangeHandler);
+        }
+    }
+    inputChangeHandler = () => {
+        if (!this.ignoreInputChange) {
+            this.ignoreInputChange = true;
+            let value = Number(this.inputElement.value);
+            value = isNaN(value) ? 0 : value;
+            value = Math.max(value, parseFloat(this.inputElement.min) || 0);
+            value = Math.min(value, parseFloat(this.inputElement.max) || Infinity);
+            this.inputElement.value = value.toString();
+            requestAnimationFrame(() => {
+                this.ignoreInputChange = false;
+            });
+        }
+    };
+    handleSlotChange = () => {
+        this.inputElement = this.host.querySelector('nano-input');
+    };
+    handleMinus = () => {
+        if (this.inputElement) {
+            const currentValue = parseFloat(this.inputElement.value) || 0;
+            const step = parseFloat(this.inputElement.step) || 1;
+            const newValue = Math.max(currentValue - step, parseFloat(this.inputElement.min) || 0);
+            this.ignoreInputChange = true;
+            this.inputElement.value = newValue.toString();
+            this.ignoreInputChange = false;
+        }
+    };
+    handlePlus = () => {
+        if (this.inputElement) {
+            const currentValue = parseFloat(this.inputElement.value) || 0;
+            const step = parseFloat(this.inputElement.step) || 1;
+            const newValue = Math.min(currentValue + step, parseFloat(this.inputElement.max) || Infinity);
+            this.ignoreInputChange = true;
+            this.inputElement.value = newValue.toString();
+            this.ignoreInputChange = false;
+        }
+    };
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    render() {
+        return (h(Host, { key: 'fab6b5bdecb8ccd3661d7054e08d66a46c2dd0a8', class: "nano-increment" }, h("div", { key: 'c064903981622ce66ac3a19efce6d595d59b7ed0', class: "root" }, h("div", { key: '447735cf16956d0ae172cc2bb1b3a7ffffd7fa0c', class: "minus" }, h("nano-icon-button", { key: '24e73eee061669ea0dd5423bae53886bed60478a', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), h("slot", { key: '855358fe5a99004f52432dd42cf8c986f67afe69', onSlotchange: this.handleSlotChange }), h("div", { key: '17b1a5d9988023f4869489beffd697f4329a1d61', class: "plus" }, h("nano-icon-button", { key: '8b2e763e3f871355085e13b20a26f751c153a329', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
+    }
+    static get is() { return "nano-increment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["increment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["increment.css"]
+        };
+    }
+    static get states() {
+        return {
+            "inputElement": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "inputElement",
+                "methodName": "inputElementChanged"
+            }];
+    }
+}

package/dist/collection/components/input/input.js

@@ -33,6 +33,7 @@ export class Input {
     pickerDropdown;
     picker;
     pickerCloseBtn;
+    shouldValidate = false;
     // we don't want these rendered eles decorated with @State
     // because that will cause re-renders. User get/set to set datalist options
     _nativeInputWrap;
@@ -211,7 +212,9 @@ export class Input {
      */
     step;
     /**
-     * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
+     * The initial size of the control. This value is in pixels unless the value of the type attribute
+     * is `"text"` or `"password"`, in which case it is an integer number of characters.
+     * This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
      */
     size;
     /**
@@ -245,10 +248,7 @@ export class Input {
                 this.nativeInput.setCustomValidity('');
             }
         }
-        requestAnimationFrame(() => {
-            if (this.validateOn === 'dirty')
-                this.validate();
-        });
+        this.shouldValidate = true;
     }
     /** Represents the value of the input or NaN if numeric conversion is impossible */
     get valueAsNumber() {
@@ -266,13 +266,10 @@ export class Input {
      * Whether to show a character count / remaining count when using the `maxlength` attribute.
      */
     showCharCount = false;
-    shouldValidate() {
+    handleValidatePropChange() {
         if (!this.hasRendered)
             return;
-        requestAnimationFrame(() => {
-            if (this.validateOn === 'dirty')
-                this.validate();
-        });
+        this.shouldValidate = true;
     }
     ///// TYPE SPECIFIC PROPS /////
     /**
@@ -427,7 +424,7 @@ export class Input {
     validate = (ev) => {
         if (this.validateOn === 'submitThenDirty')
             this.validateOn = 'dirty';
-        if (!this.nativeInput.validity.valid) {
+        if (!this.nativeInput.validity?.valid) {
             if (this.showInlineError) {
                 if (ev)
                     ev.preventDefault();
@@ -542,6 +539,12 @@ export class Input {
     componentWillLoad() {
         this.processSlottedContent();
     }
+    componentDidRender() {
+        if (this.shouldValidate) {
+            this.validate();
+            this.shouldValidate = false;
+        }
+    }
     render() {
         const value = this.getValue();
         const labelId = this.inputId + '-lbl';
@@ -580,18 +583,18 @@ export class Input {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '16dd92ebcfae29b11e9edf2d889a4c200f5a3b8f', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '636d7624bcfe136a0e93b55cf9fc38e272f7aed6', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-input': true,
-            } }, h("div", { key: '67bb63b071a14d064aaa9d5686f27fc42adc8919', style: { width: '100%' } }, h(FormControlWrap, { key: '89e15db88ec24f06948bcb8b193bbf84de5ff168', ...wrapOptions, class: {
+            } }, h("div", { key: '942db1636f7d08dd581359b66df66ebf080d23ae', style: { width: '100%' } }, h(FormControlWrap, { key: 'd944b897545398b51ab0a76e1f8d62c57cd85843', ...wrapOptions, class: {
                 'has-helper': this.hasHelperSlot,
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
-            } }, h(FormControl, { key: 'd23e96a2638e5d12fac93e125fbb201cf866c02c', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
+            } }, h(FormControl, { key: 'efd29f841ff0724228fc47754a5aad8d82f88d49', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
                 this.type === 'date' &&
                 !this.readonly &&
                 !this.disabled && [
@@ -606,10 +609,10 @@ export class Input {
                         this.value = e.detail.value;
                         this.pickerDropdown?.hide();
                     }, min: this.min, max: this.max, "is-modal": true, selectedDate: this.value || this.initialPickerDate || undefined }))),
-            ] }, this.type !== 'textarea' && (h("input", { key: '2633a8fc4d57349beb0e53295fd1f424fa3db428', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'd9de96539d7cee13171b7ac3b6dcef2222071693', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+            ] }, this.type !== 'textarea' && (h("input", { key: 'ce5547777de11926717b27712f7d687171d0dde7', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'e1dc2377200cdccda85cdbb6cda08a49d8459c1e', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '1df88e79279640f50480f8f9eeffcd0cea038913' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '564511c369dc13eb85cbf7e1c48b5d5fbbea8679' }))));
     }
     static get is() { return "nano-input"; }
     static get encapsulation() { return "scoped"; }
@@ -1231,7 +1234,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
+                    "text": "The initial size of the control. This value is in pixels unless the value of the type attribute\nis `\"text\"` or `\"password\"`, in which case it is an integer number of characters.\nThis attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored."
                 },
                 "getter": false,
                 "setter": false,
@@ -1799,34 +1802,34 @@ export class Input {
                 "methodName": "valueChanged"
             }, {
                 "propName": "minlength",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "maxlength",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "min",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "max",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "required",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "disabled",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "readonly",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "pattern",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "inputmode",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }, {
                 "propName": "type",
-                "methodName": "shouldValidate"
+                "methodName": "handleValidatePropChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/intersection-observe/intersection-observe.js

@@ -143,7 +143,7 @@ export class IntersectionObserve {
         this.removeIO();
     }
     render() {
-        return (h(Host, { key: 'fadea9249456081d56c6c925c031446aad97fac4', class: "nano-intersection-observe" }, h("slot", { key: '95226a878c5f66dae5d7483404c8b0acd7ca5c44', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'be24c77cb033ff3fdb33b37cd8414edd99785795', class: "nano-intersection-observe" }, h("slot", { key: 'e1cf1e9175a9249c6f6f5b202d27a3f9bf937bac', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "nano-intersection-observe"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/masked-overflow/masked-overflow.js

@@ -327,7 +327,7 @@ export class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '863c3de5a680e075066e21ce42e76c299bb1fd68', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c0a3c54c8149762e4eec11cb8a4c112cd0faff29', part: "base", class: {
+        return (h(Host, { key: '5e3818d9ff886b75194db22fd7f42af484fe17d7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '991fa196ffc2eb42c907519bb8187f15c9868161', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -336,12 +336,12 @@ export class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '96b342204d45cb3f602ed22c1744cc4ee1046b9f', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'cdb6b42a35dcc623c01d613a1a80a2884f79c52a', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e6958d0060691af605afa2c6fd53194b4284f29d', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '167bb7fa1450371ceab4dc8467e5debbd672101f', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: 'bb7148f21545d1b2271971f8a3b2e2d0b6754469', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '910e8182d8991fb34ec51991cd006b72372bb6df', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'aa7689c07f6fdad49e06a8e642ded946e818797b', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '605140127b6168f7a3376dbdcd51b328d267d3ac', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e0545529e2d704964ec0c43ce3fa113bc9ce623e', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '8d8d7c305c0c89738d9660aff6b75ca029506ab7', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'fdd83d15c431538a2992887e58aed07e9393d411', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'a1fba6d2c2e62e05b5a062c563f22c8e2b0222a4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'a6d602d437702479bd67d71bd5ac838d0ae02941', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '30eae4cf86f7bead75734736b7192420255a64fc', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

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

@@ -43,11 +43,12 @@
   --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);
+  --bg-color: var(--nano-color-surface-50);
+  --bg-color-hover: var(--nano-color-neutral-75);
+  --bg-color-selected: var(--nano-color-neutral-300);
+  --bg-color-open: var(--nano-color-neutral-300);
+  --content-color: var(--nano-color-neutral-1400);
+  --divider-color: var(--nano-color-neutral-300);
   --global-nav-height: 76px;
   --menu-width: calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));
   color-scheme: dark;
@@ -63,7 +64,7 @@
 }
 
 .head {
-  border-block-end: var(--nano-color-grey-mono-1400) 1px solid;
+  border-block-end: var(--divider-color) 1px solid;
 }
 
 .container {
@@ -94,6 +95,10 @@
   flex-direction: column;
   align-items: stretch;
   flex: 1;
+  box-shadow: var(--nano-shadow-ls);
+}
+.content-wrap.secondary-open {
+  box-shadow: none;
 }
 .content-wrap::after {
   content: "";
@@ -119,7 +124,6 @@
   inline-size: 100%;
   display: flex;
   justify-items: flex-start;
-  background-color: var(--bg-color);
   appearance: none;
   cursor: pointer;
   font-size: var(--icon-size);

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

@@ -26,6 +26,7 @@ export class MenuDrawer {
     reset = false;
     isLoading = true;
     hide = false;
+    secondaryOpen = false;
     /**
      * Set the initial menu drawer open or closed
      */
@@ -38,6 +39,7 @@ export class MenuDrawer {
         if (!ev.detail.secondaryMenu)
             return;
         ev.stopPropagation();
+        this.secondaryOpen = ev.type === 'nanoOpen';
     }
     openChange() {
         if (Build.isBrowser) {
@@ -145,13 +147,14 @@ export class MenuDrawer {
         }
     }
     render() {
-        return (h(Host, { key: '89b031c7018b39c700e567da7be78c32640e3ebb', class: {
+        return (h(Host, { key: '39da1804ff710702cacbbadf0d8bb1d47c2d732b', class: {
                 open: this.open,
+                'secondary-open': this.secondaryOpen,
                 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: '1d5e20b713018df3ffba0522fcdcc3aa8464fbcb', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: '495e7c951a87dfa07542b00c52a02dc04c67d914', class: "content-wrap" }, h("nav", { key: '8d358809689ff0dfc5a64f363fe461fcc1d2184a', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'e30b5d1e7e6888a6989141f038d97cf14df77b88', class: "head" }, h("button", { key: '586cedfc3daab88447b0c8f8756b3eebd99b0ea0', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '3f8b68ed1ac88478c75925108fded997ce0a5334', name: "light/arrow-right-to-line" }), h("span", { key: 'd9babd8d5f2c5930cd95e842e8b2b35d78f94500', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'b13f35ac984a7817b1cc633b1e86de4c0e6dfccc' }), this.slotCtrl.has('foot') && (h("div", { key: '4844932d4e9ab109c60ac5782be125b8acc01d19', class: "foot" }, h("slot", { key: 'a3f98a1a614ae6d8bb41ddac062c16f410ab1411', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '90b0e1a831d49af7d81fe5ca2da977a697c08ee7', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: '37d6443befe1a93169e15a8becbefe974c8a8d1c', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '7373abf5ec1ef567407abedc4b786ae3d51c9e93', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '6f243a3de7b59072d43fac86c1d9c8acd62ec9d4', class: "head" }, h("button", { key: '6bf443330190314bf84583fc540cd2cb821f4f53', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '87025c0165c2e61bd51724ef15e8e1b110ded3e4', name: "light/arrow-right-to-line" }), h("span", { key: '6bfd0162936fc4ce0546194a227960ce9dd718a1', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '07039af321133321dedceaaff462472bd22b4f12' }), this.slotCtrl.has('foot') && (h("div", { key: '252fe22caae99dc7ba850207a92f9390665bf3c0', class: "foot" }, h("slot", { key: 'f142bd0852c6fa01fcc3fba2de5528d1d96d03b7', name: "foot" }))))))));
     }
     static get is() { return "nano-menu-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -213,7 +216,8 @@ export class MenuDrawer {
         return {
             "reset": {},
             "isLoading": {},
-            "hide": {}
+            "hide": {},
+            "secondaryOpen": {}
         };
     }
     static get elementRef() { return "el"; }