@nanoporetech-digital/components 8.7.2 → 8.8.0

package/dist/cjs/nano-intersection-observe.cjs.entry.js

@@ -145,7 +145,7 @@ const IntersectionObserve = class {
         this.removeIO();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'aadf019427b2d2c3020fd6e667d5932fd14aea45', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'eae74417c304de7b8e377229b603d88468a5c7f5', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (renderer.h(index.Host, { key: 'c837369d760b533f7bbed5ade5994206923e6ffa', class: "nano-intersection-observe" }, renderer.h("slot", { key: 'c12806aaf721afbd10a14a3f6c23bd08217128b6', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],

package/dist/cjs/nano-masked-overflow.cjs.entry.js

@@ -317,7 +317,7 @@ const MaskedOverflow = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
+        return (renderer.h(index.Host, { key: 'cace0ef58ad901ea08d057420906d95ffa2600dd', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, renderer.h("div", { key: '6133235c4eb2be34c93cb681cd612ae7d227e8eb', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -326,12 +326,12 @@ const MaskedOverflow = class {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, renderer.h("div", { key: '56f5264594f6963dddbdbad7ecd6c25ae4c0732a', class: "onav__nav" }, this.scrollControls && (renderer.h("nano-icon-button", { key: 'be07616305b1753d843f346420149055b59f8023', 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' })), renderer.h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', 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 }, renderer.h("div", { key: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), renderer.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 }, renderer.h("div", { key: 'c7e3fa9f1272bcd57694aa7dd433f2da1ca4d4cb', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (renderer.h("div", { key: '5029cad9fb763501e8e670f3347e55e7eafbcb87', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), renderer.h("slot", { key: '1438ac0d40a0ec2952cf9b66bc2f854d5b96c690', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (renderer.h("nano-icon-button", { key: '05dea3796c9d9e758c229f76fcb4dde2bd90fa65', 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/cjs/nano-menu-drawer.cjs.entry.js

@@ -144,14 +144,14 @@ const MenuDrawer = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', class: {
+        return (renderer.h(index.Host, { key: '48267091ca0646f3a1717e2dc3ab21ab3d4b9b28', 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 }, renderer.h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, renderer.h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, renderer.h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), renderer.h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, renderer.h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, renderer.h("div", { key: 'f73a9c15c9760493b38ac5b199f2d374eb99ffd0', ref: (div) => (this.containerDiv = div), class: "container" }, renderer.h("div", { key: 'a2a254a08025a5d4f33ecd10fb25ee2bedddc657', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, renderer.h("nav", { key: '4c93989684795be81b332aa12638424493eda51f', ref: (div) => (this.contentDiv = div), class: "content" }, renderer.h("div", { key: 'fb7fdba72b7e211dd99020b9a78dde35c11f0c7e', class: "head" }, renderer.h("button", { key: '1829973a4d5bb9c4053bd5a5b8d7d24befc02599', onClick: this.toggle, class: "collapse-btn" }, renderer.h("nano-icon", { key: '614bca81c5086ed499a62d38540f6c107f5c779e', name: "light/arrow-right-to-line" }), renderer.h("span", { key: 'da6cbb5a0c0f0a908afac83b01322bc5bfede0b5', class: "visually-hidden" }, "collapse / expand menu"))), renderer.h("slot", { key: 'd3ddb04ad19784a71575ff50c2cbd4410b70dcb6' }), this.slotCtrl.has('foot') && (renderer.h("div", { key: '5282ecb332f91aaedf7996f1a86165656187f12a', class: "foot" }, renderer.h("slot", { key: 'c0c227384d0ec749a03c1fdfe5764923f08c2405', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]

package/dist/cjs/nano-more-less.cjs.entry.js

@@ -54,8 +54,8 @@ const Rating = class {
         this.handleShowHideElements();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, renderer.h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            renderer.h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, renderer.h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (renderer.h(index.Host, { key: '85aea064a37e2a66a31e8bab208eba423aa32a4e', class: "nano-more-less" }, renderer.h("slot", { key: 'c7288c755fa9cb24abb335158fe9ae1e116a012e', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            renderer.h("div", { key: 'ff18caab62f14cdff9cc5953cda9d4980e6e4b6a', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: '8a7a856af8fca1221c308c2a0982e09b9c9da74f', name: "less" }, renderer.h("button", { key: '33578129514a86169e642f32fb9a66d257412719', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (renderer.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { name: "more" }, renderer.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

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

@@ -195,20 +195,20 @@ const Rating = class {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (renderer.h(index.Host, { key: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, renderer.h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, renderer.h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), renderer.h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (renderer.h(index.Host, { key: 'b28d1a7ff7743338ff5ae18c386e49ee20f8df8e', class: "nano-rating" }, renderer.h("label", { key: '6fda8cf5da0b9ed38776ec3a9b93ec4fc02598b0', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, renderer.h("slot", { key: 'e92e2482a6aefd90bd27b5831ec75f0fb12fcd8b', name: "label" }, this.label)), renderer.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: () => {
                 this.setFocus();
-            } }), renderer.h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, renderer.h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), renderer.h("div", { key: '46c610322bc3b802d822cd22bfdcf3ad32f7e4d2', class: "rating-wrap" }, renderer.h("div", { key: 'fd509ff1f80a8172c00f2b320e6f5dbfd1252676', 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 }, renderer.h("span", { key: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.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 }, renderer.h("span", { key: 'd03101004803060722fd234f3500a5f7ac6e0603', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.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) })))), renderer.h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: '2e5b35988ef0b699c515fd86a5ab14b3a98f9215', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (renderer.h("span", { class: {
                 rating__symbol: true,

package/dist/cjs/nano-resize-observe.cjs.entry.js

@@ -228,13 +228,13 @@ const ResizeObserve = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', class: {
+        return (renderer.h(index.Host, { key: '5db8e84066e7fd3d903f19e2256844331580947a', 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,
-            } }, renderer.h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!this.notifyContentFit &&
+            } }, renderer.h("slot", { key: 'ee5842c110b25f82eacbb4ba618d33dad345e732' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (renderer.h("slot", { name: "content-fit-x" })) : (renderer.h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (renderer.h("slot", { name: "content-fit-y" })) : (renderer.h("slot", { name: "content-nofit-y" })),

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

@@ -39,7 +39,7 @@ const Slide = class {
         });
     }
     render() {
-        return (renderer.h(index.Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, renderer.h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
+        return (renderer.h(index.Host, { key: '599510bff6daf72dca9b1de41767aea575eae98a', class: "nano-slide" }, renderer.h("slot", { key: '911f54eb0ad7ee91d7ea358f2e581d55793416ee' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]

package/dist/cjs/{nano-slides-ycRcUf0g.js → nano-slides-CryCLfsK.js}

@@ -2813,19 +2813,19 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-D5cgtwoy.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-lcdCtrG6.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-Dm1NcTJ1.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-BjSSEx9f.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasDotsModule && opts.pageDots) {
-            await Promise.resolve().then(function () { return require('./page-dots--38yVfTZ.js'); });
+            await Promise.resolve().then(function () { return require('./page-dots-DR1fLjRi.js'); });
             this.hasDotsModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-NeUskjyB.js'); });
+            await Promise.resolve().then(function () { return require('./fade-DBKqk3wh.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2960,15 +2960,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (renderer.h(index.Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, renderer.h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
+        return (renderer.h(index.Host, { key: 'e259a3a5de2c5dc025ab6dc61c3a41e1f812f077', class: "nano-slides" }, renderer.h("div", { key: '74abbe2dd44755ae5e5c5c766e6833c74c152aa8', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, renderer.h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: '1a0a00d3ad6651a06fe46f1beff537f9cd483fc7', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, renderer.h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), renderer.h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, renderer.h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
+            }, part: "slide-container" }, renderer.h("slot", { key: '7a0edeee40901099cc455337acad6e798041f4f1' })), renderer.h("div", { key: 'bef46a7658a4ff89d02a2feb6dbcdd64d8e965f2', class: "ui-extras" }, renderer.h("slot", { key: '2f0603645945a8e77de9252036363e770e8e424d', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-ycRcUf0g.js');
+var nanoSlides_entry = require('./nano-slides-CryCLfsK.js');
 require('./index-DGttnXif.js');
 require('./renderer-CUTUqPQt.js');
 

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

@@ -728,7 +728,7 @@ const Sortable = class {
         }
     }
     render() {
-        return (renderer.h(index.Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, renderer.h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
+        return (renderer.h(index.Host, { key: 'db8dbc8b62755164c30650a9485205f8ea2c6107', class: "nano-sortable" }, renderer.h("div", { key: '0c4646d0cf095e9970787ae4a5101765f0f5fe4f', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (renderer.h("div", null, str)))), renderer.h("slot", { key: '41e538783cb246a7ada58353374228a833b4fc4a' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],

package/dist/cjs/nano-step-accordion.cjs.entry.js

@@ -83,7 +83,7 @@ const NanoStepAccordion = class {
         }
     }
     render() {
-        return (renderer.h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
+        return (renderer.h("nano-accordion", { key: '1edc585b390f5dd6c1fe6edaf103e096b8d02d06', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index$1) => (renderer.h("nano-details", { open: index$1 === this.activeStep, disabled: !step.enabled, class: {
                 step: true,
                 'step--active': index$1 === this.activeStep,
                 'step--complete': step.complete,

package/dist/cjs/nano-step-breadcrumb.cjs.entry.js

@@ -106,10 +106,10 @@ const NanoStepBreadcrumb = class {
     };
     render() {
         const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
-        return (renderer.h(index.Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, renderer.h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, renderer.h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, renderer.h("div", { key: '9d60be986e00fdd6814a910641cf94ef97fb2eed', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+        return (renderer.h(index.Host, { key: 'e54c227339a1e973cad1889abb1828cef81061a1' }, renderer.h(Wrapper, { key: '9a9ef044e63d1cebb713c0e9184ed58ed7865a32', class: "step-wrapper" }, renderer.h("ul", { key: 'cf3ef2fa474ae023be0059434fc03f1bfeade40c', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (renderer.h("li", { class: "step-item-wrapper", key: index }, renderer.h(this.ControlTag, { step: step, index: index }))))), renderer.h("div", { key: '18a9e9e00597e8ef15df7134a29dabb5f51fad93', class: `step-list mobile ${this.cacheKey}` }, renderer.h("nano-dropdown", { key: '0e174964823bc2c6e1cc0bcd4e1d320bc3e74e11', dialogTitle: "Steps", class: "step-dropdown" }, renderer.h("button", { key: '75863494b5e948c53b91f15e083270ac142abe61', slot: "trigger", class: "step-trigger" }, renderer.h("div", { key: '093819821dc278086f12d5f8cb008649b43b3230', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                 '--value': '' + (this.activeStep + 1),
                 '--max': '' + this.steps.length,
-            } }, renderer.h("span", { key: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, renderer.h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, renderer.h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, this.steps.map((step, index) => (renderer.h("nano-nav-item", { class: {
+            } }, renderer.h("span", { key: 'da12da205c5e4942dc6b158ab4366a87b3d600c0', class: "step-progress-text" }, renderer.h("strong", { key: '15298a28fd78508485b54ed24df255087560e627' }, this.activeStep + 1), " of", ' ', this.steps.length)), renderer.h("div", { key: 'a67108bd294391381e5e9fa17e6132844eb510c4', class: "step-trigger-text" }, renderer.h("div", { key: '46906878f501008c8ceab76276d4f5b47469d9e3', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), renderer.h("div", { key: '898e4abb1800652352efe446e45c48d3673a656c', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), renderer.h("nano-icon", { key: 'f972d82aaed693d49536862f45c268646dd8742b', class: "step-trigger-icon", name: "light/chevron-down" })), renderer.h("nano-menu", { key: '2b6555a0ef2743486e940d75cb3486110f88cad1' }, this.steps.map((step, index) => (renderer.h("nano-nav-item", { class: {
                 'step-item-mobile': true,
                 'step-item-mobile step-item--active': index === this.activeStep,
                 'step-item-mobile step-item--complete': step.complete,

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

@@ -607,12 +607,12 @@ const Sticker = class {
         this.hasBootstrapped = false;
     }
     render() {
-        return (renderer.h(index.Host, { key: 'd0e4e1b0cc7c63db0389ee67b999c30347f7e16b', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, renderer.h("div", { key: '6f9852e2cfeb2e203e5dde6f71e7a042a996dd86', class: {
+        return (renderer.h(index.Host, { key: '6626d945b580e7e23d940db522958250e89261ad', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, renderer.h("div", { key: '1e4b7f859218a5ed2256f7f860dcffa4b1b8f5be', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
+            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '4f7cd61f38b78433296a9708ddbd702d97cf2435', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'a88a8500ee1ea99324f9b1b7390675486035496c' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],

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: '7afee777be86f5847c5ac4c8de6babae3199b01d', 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: '3118031c009c947f2a7882a8dd65556b686d1c9d', 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: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
+            } }, renderer.h("div", { key: 'cab097ece6d3473e5fc425dbde951fcaf399c5ba', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: 'b4ce04af8ea780022c5a9e63a16f1d087432a931' }))));
     }
 };
 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: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', 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: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (renderer.h(index.Host, { key: 'ad80886d87f28ad3a2ae019f361662f21c6617b3', 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: '445b8acdf4a87b4541f8bc1b9354c91bad6d77a4', 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: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), renderer.h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), renderer.h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, renderer.h("slot", { key: 'a72a156f0792fb7943c46d7edc6da51d222f4285', name: "start" }), renderer.h("div", { key: 'e7c654c4efe7bafaa41fdbafaae96976f4089f67', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '65f9a3b5342dfca0a8e6ec9be289f3ad4bb5da4e' })), renderer.h("slot", { key: 'e044937dc98a2650b58f7a792e0e190de80e2d00', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: 'c7809dea53cb6ca1660f58f06f3a861f18950cba', 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

@@ -228,10 +228,10 @@ const NanoTable = class {
         this.cleanUpObservers();
     }
     render() {
-        return (renderer.h(index.Host, { key: 'dfcda7c6604792e025f1ed4997395857ad786be3', class: {
+        return (renderer.h(index.Host, { key: '75c4089a6d670a16eea3fca8d079ac9a827c4cfa', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '2ef0536af50f22134e4c0d295172817287c46196', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '1b9ba48be1ccf92ac46f9873ac08b43a51cfcabc', class: "nano-table__overflow" }))), renderer.h("slot", { key: 'ab86c4eab83b69cb4ba31b22ae18f9cb0c31033a' })));
+            } }, 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' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-ycRcUf0g.js');
+var nanoSlides_entry = require('./nano-slides-CryCLfsK.js');
 require('./index-DGttnXif.js');
 require('./renderer-CUTUqPQt.js');
 

package/dist/collection/collection-manifest.json

@@ -44,6 +44,7 @@
     "components/img/img.js",
     "components/in-page-nav/in-page-nav.js",
     "components/increment/increment.js",
+    "components/input-otp/input-otp.js",
     "components/intersection-observe/intersection-observe.js",
     "components/masked-overflow/masked-overflow.js",
     "components/menu-drawer/menu-drawer.js",

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,184 @@
+: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 {
+  /**
+   * @prop --background: Background color of the input boxes
+   *
+   * @prop --border-radius: Border radius of the input boxes
+   *
+   * @prop --border-width: Border width of the input boxes
+   * @prop --border-color: Border color of the input boxes
+   *
+   * @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 --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 --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
+   * @prop --separator-border-radius: Border radius of the separator between boxes
+   *
+   * @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;
+  --separator-width: 7px;
+  --separator-height: 1px;
+  --separator-border-radius: 0;
+  --separator-color: var(--nano-color-primary-1000);
+  --highlight-color-valid: var(--nano-color-success-1100);
+  --highlight-color-invalid: var(--nano-color-warning-1100);
+  --border-radius: 8px;
+  --border-color: var(--nano-color-neutral-700);
+  --border-width: 1px;
+  display: block;
+  position: relative;
+}
+
+.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;
+  gap: var(--gap);
+}
+
+.native-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--min-width);
+}
+
+.native-input {
+  border-radius: var(--border-radius);
+  inline-size: var(--width);
+  min-inline-size: inherit;
+  block-size: var(--height);
+  border-width: var(--border-width);
+  border-style: solid;
+  border-color: var(--border-color);
+  background: var(--background);
+  color: var(--color);
+  font-size: inherit;
+  text-align: center;
+  appearance: none;
+}
+
+.input-otp-description {
+  color: currentcolor;
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  text-align: center;
+  position: relative;
+  inset-inline-start: -24px;
+}
+
+.input-otp-description-hidden {
+  display: none;
+}
+
+.input-otp-separator {
+  border-radius: var(--separator-border-radius);
+  flex-shrink: 0;
+  inline-size: var(--separator-width);
+  block-size: var(--separator-height);
+  background: var(--separator-color);
+}
+
+:host(.input-otp-disabled) {
+  --color: var(--nano-color-neutral-700);
+  opacity: 0.5;
+}
+
+:host(.input-otp-disabled),
+:host(.input-otp-disabled) .native-input:disabled {
+  cursor: not-allowed;
+}
+
+:host(.has-focus) .native-input:focus {
+  outline: var(--nano-focus-ring);
+}
+
+:host(.nano-invalid) .native-input {
+  border-color: var(--highlight-color-invalid);
+}
+
+:host(.nano-valid) .native-input {
+  border-color: var(--highlight-color-valid);
+}
+
+.input-otp-icon {
+  inline-size: 24px;
+  block-size: 24px;
+  display: flex;
+  align-items: center;
+}
+.input-otp-icon--valid {
+  color: var(--nano-color-success-1100);
+}
+.input-otp-icon--invalid {
+  color: var(--nano-color-warning-1100);
+}