@nanoporetech-digital/components 8.9.3 → 8.10.1

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

@@ -5,7 +5,7 @@
 
 var index = require('./index-DGttnXif.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-CUTUqPQt.js');
+var renderer = require('./renderer-jVpDRMfV.js');
 
 const tableCss = ".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
@@ -228,10 +228,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: '75c4089a6d670a16eea3fca8d079ac9a827c4cfa', class: {
+        return (renderer.h(index.Host, { key: 'e2ee468673f70252fc559a82e48b74f12273e416', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '90a1e07d2daa97047c3be1381717a8ae3b53b5e1', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: 'badc595c9931fb6198ab38b4e09cdf4201fcc064', class: "nano-table__overflow" }))), renderer.h("slot", { key: 'd3fd5902fccc42b3412e9cb1950b054b5a69a525' })));
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '63091df4a07695276d762d2a5ad5f535c9ed67dd', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '2defbb73d6077d95351c50685c70e6c32f05fd87', class: "nano-table__overflow" }))), renderer.h("slot", { key: '71a9d57114363f976eb139d494a8383795a67a8b' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/cjs/{page-dots-DR1fLjRi.js → page-dots-Db7Ce8kX.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-CryCLfsK.js');
+var nanoSlides_entry = require('./nano-slides-C2K7j1yc.js');
 require('./index-DGttnXif.js');
-require('./renderer-CUTUqPQt.js');
+require('./renderer-jVpDRMfV.js');
 
 // -------------------------- PageDots -------------------------- //
 function PageDots(parent) {

package/dist/cjs/{renderer-CUTUqPQt.js → renderer-jVpDRMfV.js}

@@ -17,6 +17,7 @@ const CSS_ONLY_COMPONENTS = [
     'nano-icon-item',
     'nano-option-box',
     'nano-progress-bar',
+    'nano-search-result',
     'nano-skeleton',
     'nano-spinner',
     'nano-tag',

package/dist/cjs/{slot-CJgcluNw.js → slot-BUMYLmup.js}

@@ -63,7 +63,21 @@ class HasSlotController {
     hasDefaultSlot() {
         if (!this.host)
             return false;
-        return [...this.host.childNodes].some((node) => {
+        let childNodes;
+        if (this.host.shadowRoot) {
+            // * Regular shadow DOM component *
+            childNodes = [...this.host.shadowRoot.childNodes];
+        }
+        else if (!this.host.classList.contains('hydrated')) {
+            // * Non-shadow, polyfilled component *
+            // Component has not done initial render. Return component internals
+            childNodes = [...(this.host?.__childNodes ?? [])];
+        }
+        else {
+            // Component is ready, return 'light DOM' children
+            childNodes = [...this.host.childNodes];
+        }
+        return childNodes.some((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
             }
@@ -88,12 +102,14 @@ class HasSlotController {
             : this.hasNamedSlot(slotName);
     }
     hostConnected() {
-        this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+        const listenTarget = this.host.shadowRoot ?? this.host;
+        listenTarget.addEventListener('slotchange', this.handleSlotChange);
     }
     hostDisconnected() {
         if (!this.host)
             return;
-        this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+        const listenTarget = this.host.shadowRoot ?? this.host;
+        listenTarget.removeEventListener('slotchange', this.handleSlotChange);
     }
     handleSlotChange = (event) => {
         const slot = event.target;

package/dist/cjs/{table.worker-DBkvxXls.js → table.worker-Ctqp7IJT.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-8XMp5HkS.js');
+var nanoDataTable_entry = require('./nano-data-table-B07AITiQ.js');
 require('./index-DGttnXif.js');
-require('./renderer-CUTUqPQt.js');
+require('./renderer-jVpDRMfV.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
 require('./scroll-C6pO9RvO.js');

package/dist/collection/collection-manifest.json

@@ -54,6 +54,7 @@
     "components/range/range.js",
     "components/rating/rating.js",
     "components/resize-observe/resize-observe.js",
+    "components/search-result/search-result.js",
     "components/select/select.js",
     "components/slides/slide.js",
     "components/slides/slides.js",

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

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

package/dist/collection/components/global-search-results/global-search-results.css

@@ -44,7 +44,7 @@
 
 .main-search {
   display: flex;
-  background: white;
+  background: var(--nano-color-base-0);
   font-size: 14px;
   min-block-size: calc(100vh - 63px);
   justify-content: space-between;
@@ -193,7 +193,7 @@
   position: fixed;
   inline-size: 0;
   block-size: 0;
-  z-index: 10;
+  z-index: var(--nano-z-index-modal);
   inset-block-start: 0;
   inset-inline-end: 0;
   transition: all 0s ease 0.5s;

package/dist/collection/components/global-search-results/global-search-results.js

@@ -162,8 +162,12 @@ export class GlobalSearchResults {
         this.handleGlobalNavReset();
     }
     /** Manually close the search panel */
-    async closeSearch() {
-        this.goback();
+    async closeSearch(clearHistory = false) {
+        if (clearHistory) {
+            this.goback();
+            return;
+        }
+        this.algoliaEle.showResults = false;
     }
     resultClick = (e) => {
         const hit = e.target.closest('.result');
@@ -176,6 +180,7 @@ export class GlobalSearchResults {
                 positions: [Number(hit.dataset.hitCount) + 1],
             });
         }
+        this.closeSearch();
     };
     showFiltersClick = () => {
         this.filtersDiv.tabIndex = -1;
@@ -267,12 +272,12 @@ export class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: 'c88b1cd5b5fcf63cc3961cc3e190fe4432349b03', class: {
+        return (h(Host, { key: '481c6ef8c60a3d9e552ac7e34d39e8b4c6d801d3', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'e27f4efbd7405ca852f9e6ea96d3a53b4ded8041', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '624265ab100bc1b1476bb9bca306d74d138efec4', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search",
             // @ts-expect-error this bubbles from nano-algolia-filter
-            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: 'a614cc2ad29144b19555cf2106b8a38982817918', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '5512db296627ed14b7ad73a4831bd0d63a99a086', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -650,7 +655,7 @@ export class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: 'c759117717909ec2ca8973bd4de0175e06fd73fa', slot: "output" }), h("slot", { key: '45d84a723310889c1acb75b2563839e6bd164296' }))));
+            </div>`), h("div", { key: '5bd881ab628ff64917da008bc134f40a3eb1417a', slot: "output" }), h("slot", { key: '4a53c4a1315db75890c3128cf6c3471870759c47' }))));
     }
     static get is() { return "nano-global-search-results"; }
     static get encapsulation() { return "shadow"; }
@@ -696,8 +701,12 @@ export class GlobalSearchResults {
         return {
             "closeSearch": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(clearHistory?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "clearHistory",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/input-otp/input-otp.css

@@ -47,21 +47,17 @@
    *
    * @prop --color: Text color of the input
    *
-   * @prop --margin-top: Top margin of the input group
-   * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group
-   * @prop --margin-bottom: Bottom margin of the input group
-   * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group
-   *
-   * @prop --padding-top: Top padding of the input group
-   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group
-   * @prop --padding-bottom: Bottom padding of the input group
-   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group
+   * @prop --icon-size: Size of the validity icon
    *
    * @prop --min-width: Minimum width of input boxes
    * @prop --height: Height of input boxes
    * @prop --width: Width of input boxes
    * @prop --gap: Gap between input boxes
-   *
+
+   * @prop --inline-padding: Horizontal padding surrounding the input boxes
+
+   * @prop --spacing: Spacing between input boxes and description
+
    * @prop --separator-color: Color of the separator between boxes
    * @prop --separator-width: Width of the separator between boxes
    * @prop --separator-height: Height of the separator between boxes
@@ -70,19 +66,14 @@
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
    */
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: var(--nano-spacing-md);
-  --padding-end: 0;
-  --padding-bottom: var(--nano-spacing-xl);
-  --padding-start: 0;
   --color: initial;
   --min-width: 40px;
   --width: 40px;
   --height: 50px;
   --gap: 8px;
+  --icon-size: var(--nano-pictogram-size-small);
+  --inline-padding: calc(var(--icon-size) + var(--gap));
+  --spacing: var(--nano-spacing-xl);
   --separator-width: 7px;
   --separator-height: 1px;
   --separator-border-radius: 0;
@@ -94,11 +85,17 @@
   --border-width: 1px;
   display: block;
   position: relative;
+  margin-inline: var(--inline-padding);
+}
+
+.input-otp-container {
+  position: relative;
+  inline-size: fit-content;
+  block-size: fit-content;
+  margin: 0 auto;
 }
 
 .input-otp-group {
-  margin: var(--margin-top) var(--margin-end) var(--margin-bottom) var(--margin-start);
-  padding: var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -133,7 +130,7 @@
   line-height: var(--nano-line-height-normal);
   text-align: center;
   position: relative;
-  inset-inline-start: -24px;
+  margin-inline-start: var(--spacing);
 }
 
 .input-otp-description-hidden {
@@ -171,8 +168,12 @@
 }
 
 .input-otp-icon {
-  inline-size: 24px;
-  block-size: 24px;
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-43%);
+  inset-inline-end: calc((var(--gap) + var(--icon-size)) * -1);
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
   display: flex;
   align-items: center;
 }

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

@@ -2,18 +2,22 @@
  * Custom elements for Nanopore-Digital Web applications
  */
 import { Fragment, Host, h, } from "@stencil/core";
+import { HasSlotController } from "../../utils/slot";
 /**
  * A component for entering one-time passwords (OTP) with multiple input fields.
  *
- * @version 8.7.2
+ * @version 8.8.0
  * @status new
  *
  * @slot - The default slot for the input description.
  * @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
+ *
+ * @part validity-icon - The validity icon.
  */
 export class InputOTP {
     inputRefs = [];
     inputId = `nano-input-otp-${inputIds++}`;
+    slotCtrl = new HasSlotController(this, '[default]');
     /**
      * Stores the initial value of the input when it receives focus.
      * Used to determine if the value changed during the focus session
@@ -675,26 +679,21 @@ export class InputOTP {
         inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
     }
     render() {
-        const { disabled, el, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
+        const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (h(Host, { key: 'f397a0775d2d961ccc9013206fae72a8d0ad90ae', class: {
+        return (h(Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, h("div", { key: 'add5fe905af87f4c9b87d29c66134ede52ff2b6b', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" })))), this.showValidity && (h("div", { key: '71d38d8f343be559d187f1c5710a64733cf7ceaa', class: {
+            } }, h("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, h("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            } }, h("slot", { key: '14529ecc57a6268932bc1485f0a425bb6cb45c51', name: "validity-icon" }, h("nano-icon", { key: '65669a6b4ca76011b721e76fb68b7f9bfeb87092', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), h("div", { key: '3e677ab8517765759a0cc4a0aa6f0fec58767c90', class: {
-                'input-otp-description': true,
-                'input-otp-description-hidden': !hasDescription,
-                'input-otp-description-inset': this.showValidity,
-            } }, h("slot", { key: 'e875d5c5d7ed8f804b9866618b7ed5e5211dd7b1' }))));
+            }, part: "validity-icon" }, h("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, h("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, h("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
     }
     static get is() { return "nano-input-otp"; }
     static get encapsulation() { return "scoped"; }

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

@@ -143,7 +143,7 @@ export class IntersectionObserve {
         this.removeIO();
     }
     render() {
-        return (h(Host, { key: 'c837369d760b533f7bbed5ade5994206923e6ffa', class: "nano-intersection-observe" }, h("slot", { key: 'c12806aaf721afbd10a14a3f6c23bd08217128b6', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: '6ed0913499a9caede509c0394a2be337ddbcfc7c', class: "nano-intersection-observe" }, h("slot", { key: 'a55eeb8c1527dd62aba761b60b6a0764cbd5bfa4', 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: 'cace0ef58ad901ea08d057420906d95ffa2600dd', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '6133235c4eb2be34c93cb681cd612ae7d227e8eb', part: "base", class: {
+        return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', 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: '56f5264594f6963dddbdbad7ecd6c25ae4c0732a', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'be07616305b1753d843f346420149055b59f8023', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', 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: '33c5125be511e2ed550ea4a4130ada309d6d4884', 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: 'c7e3fa9f1272bcd57694aa7dd433f2da1ca4d4cb', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '5029cad9fb763501e8e670f3347e55e7eafbcb87', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '1438ac0d40a0ec2952cf9b66bc2f854d5b96c690', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '05dea3796c9d9e758c229f76fcb4dde2bd90fa65', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', 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: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', 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.js

@@ -147,14 +147,14 @@ export class MenuDrawer {
         }
     }
     render() {
-        return (h(Host, { key: '48267091ca0646f3a1717e2dc3ab21ab3d4b9b28', class: {
+        return (h(Host, { key: 'bed821db8e5a30f26c3c9bad45b01321bdf4ca77', 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: 'f73a9c15c9760493b38ac5b199f2d374eb99ffd0', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a2a254a08025a5d4f33ecd10fb25ee2bedddc657', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '4c93989684795be81b332aa12638424493eda51f', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'fb7fdba72b7e211dd99020b9a78dde35c11f0c7e', class: "head" }, h("button", { key: '1829973a4d5bb9c4053bd5a5b8d7d24befc02599', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '614bca81c5086ed499a62d38540f6c107f5c779e', name: "light/arrow-right-to-line" }), h("span", { key: 'da6cbb5a0c0f0a908afac83b01322bc5bfede0b5', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'd3ddb04ad19784a71575ff50c2cbd4410b70dcb6' }), this.slotCtrl.has('foot') && (h("div", { key: '5282ecb332f91aaedf7996f1a86165656187f12a', class: "foot" }, h("slot", { key: 'c0c227384d0ec749a03c1fdfe5764923f08c2405', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'e80fe18a73873359fc1d86ca93a06b8c6d3173c1', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'fe83b1858bacd94f3e0540ee3933d1018f7bfb9d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'bed3b6c253cf16f8a796393be71c2c1b9aebd266', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'a8ea363c51345c83fcbf8723a32627bd99c5a9cf', class: "head" }, h("button", { key: 'fa9765354704685582e64771ded73c30c88e0374', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '0489c46c0c76a72720daf6656e26c2946433bccc', name: "light/arrow-right-to-line" }), h("span", { key: '81b00aaf09a528d6137351df20e23149a5325bf0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7' }), this.slotCtrl.has('foot') && (h("div", { key: 'dbb8345173ee78b9685cc46c6dcde5c2d617a868', class: "foot" }, h("slot", { key: '93bfeb1493a1d5e9a420803a09e64dced877591b', name: "foot" }))))))));
     }
     static get is() { return "nano-menu-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,8 +65,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: '85aea064a37e2a66a31e8bab208eba423aa32a4e', class: "nano-more-less" }, h("slot", { key: 'c7288c755fa9cb24abb335158fe9ae1e116a012e', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'ff18caab62f14cdff9cc5953cda9d4980e6e4b6a', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '8a7a856af8fca1221c308c2a0982e09b9c9da74f', name: "less" }, h("button", { key: '33578129514a86169e642f32fb9a66d257412719', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', 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/rating/rating.js

@@ -192,20 +192,20 @@ export class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'b28d1a7ff7743338ff5ae18c386e49ee20f8df8e', class: "nano-rating" }, h("label", { key: '6fda8cf5da0b9ed38776ec3a9b93ec4fc02598b0', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'e92e2482a6aefd90bd27b5831ec75f0fb12fcd8b', name: "label" }, this.label)), h("input", { key: 'ef40cee201942dc8f0851f2ee4d785d3b1d27936', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (h(Host, { key: '3011ba88cafed0ec3c79d823a3abac433f68b5d1', class: "nano-rating" }, h("label", { key: 'ea6a01bc5a7f8e7fecbb16a905c472b5e1c62328', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '22e31eeaed0aca337a71c1bbb39c238413f1c00c', name: "label" }, this.label)), h("input", { key: '265bd0055cbd05911611e0a5e45828d4dab7ac8c', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), h("div", { key: '46c610322bc3b802d822cd22bfdcf3ad32f7e4d2', class: "rating-wrap" }, h("div", { key: 'fd509ff1f80a8172c00f2b320e6f5dbfd1252676', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: '4c0af619c68c230a5994871efdf5608870fb83e0', class: "rating-wrap" }, h("div", { key: 'e6f94c258bc04b6a4a6aad66c9364c1c811f859a', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd03101004803060722fd234f3500a5f7ac6e0603', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd514ae0f85be4d59ab6a2ae4496357c5d6601ba9', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '2e5b35988ef0b699c515fd86a5ab14b3a98f9215', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '0caf2f0561d3b74e6891e6c2a4b970fef53298f3', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,

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

@@ -230,13 +230,13 @@ export class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: '5db8e84066e7fd3d903f19e2256844331580947a', class: {
+        return (h(Host, { key: 'a2c57218f65a9af2297e6662c29d3a7c853092df', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, h("slot", { key: 'ee5842c110b25f82eacbb4ba618d33dad345e732' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: 'cf0faa31f7c1daa08238555a46699c1b731e13b8' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),

package/dist/collection/components/search-result/search-result.css

@@ -0,0 +1,41 @@
+: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;
+    }
+  }/**
+* // add any public css props here
+*/

package/dist/collection/components/search-result/search-result.js

@@ -0,0 +1,25 @@
+/**
+ * Displays an article preview and serves as a navigable link to the full content in the context of search results or lists of articles.
+ *
+ * @status new
+ * @version 8.10.0
+ * @type CSS Only
+ *
+ * @slot title - The title of the result. Displayed first.
+ * @slot content - Content of the result. Suitable for a short description or search snippet.
+ * @slot meta - Meta information about the result. Each item is visually separated.
+ * @slot tags - Tags associated with the result. Suitable for use with `nano-tag` components.
+ */
+export class NanoSearchResult {
+    static get is() { return "nano-search-result"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["search-result.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["search-result.css"]
+        };
+    }
+}

package/dist/collection/components/select/select.js

@@ -705,30 +705,30 @@ export class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'fff4c3c510b9c343af91cd44cd31a437bbd15a78', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'a2c56f43fef750f8e336a1612644761293b19bd4', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: '57e3eca97027e9195328c5da6e10c46000ffe67e', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '632d901cdff60d36ae1a410f6c252c671eac8e63', ...wrapOptions, class: {
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
                 'has-helper': this.hasHelperSlot,
                 'is-open': this.hasOpened,
                 masked: this.mask,
-            } }, h(FormControl, { key: 'be1a38b3b662d7cd40ce738ef9185d18dae22318', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '89b7b5b75ef67513c228f230c11122333448408f', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: 'efd35e47435a363be382ceae43d4348479cd50b5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: '236a63937ee3c981bbc2e4d77d72516f4d614326', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'c0e2707266e76ed2714cbd91727c828e4e0e9861', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, h(FormControl, { key: '387a55518ed1c74ea944008c750a0ca42a6bbbe8', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '660b70b098520471d4f7653af5cc50388625cd1c', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: '44f53317d26f2f8b85b5c8b397ccfd68a26eebb5', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '04f3935c7f759e3767f32faecb9e6ef81a36c777', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'aae86b85c3bd2c2c562468f2a33e52c7036ad69b', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
             // @ts-expect-error - this bubbles from the nano-dropdown
             onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: 'bfc7c0f31d962d89369ff173236bebbca134885d', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '2f2f299440d4aca0c718308ad819873cf5f71163', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '5c41abf1e6e6c7b897538beb6b4509ae5f845ce6' }))), h("select", { key: '3443483daf9d524e98cb3614f67a630b349b033f', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: 'cf744eb6bbad3ce2d8d05354d5edaf3eab07a207', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '990e00208c403d92d1586fb0b2c4618768f5fda5', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '54fce41f95c01e0b2ff1619209ebb15a28383677' }))), h("select", { key: '1c5ff40ac84be25c6b7075ef031b29f2b6f9b007', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&

package/dist/collection/components/slides/slide.js

@@ -38,7 +38,7 @@ export class Slide {
         });
     }
     render() {
-        return (h(Host, { key: '599510bff6daf72dca9b1de41767aea575eae98a', class: "nano-slide" }, h("slot", { key: '911f54eb0ad7ee91d7ea358f2e581d55793416ee' })));
+        return (h(Host, { key: '3de94ff45cb6dddcca7f0097f3376361c2666f7e', class: "nano-slide" }, h("slot", { key: '9998d9102bdc69eecd28752b4a2c130497b34d06' })));
     }
     static get is() { return "nano-slide"; }
     static get encapsulation() { return "shadow"; }