@nanoporetech-digital/components 8.0.0-alpha.4 → 8.0.0-alpha.6

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

@@ -4,26 +4,15 @@
 'use strict';
 
 var index = require('./index-IR1lkhwT.js');
-var renderer = require('./renderer-h0yo23iy.js');
 
-const spinnerCss = ":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;--base-color-rgb:var(--nano-indicator-rgb, 84 140 175);--indicator-color:var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );--track-color:var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));--overlay-color:var(--nano-layer-overlay-light, rgb(255 255 255 / 70%))}.spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);animation:flex 1.5s linear infinite;transform-origin:center center}.spinner__dnatrack--2::before{animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50%;background:var(--indicator-color);animation:rotate 1.5s linear infinite;transform-origin:center center;inset-inline-start:50%;transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-block-start:0.5em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(-50%) translateY(1.875em) scale(2)}50%{transform:translateX(-50%) translateY(3.75em) scale(1)}75%{transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes flex{0%,100%{transform:translateX(-50%) scaleY(5)}25%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(5)}75%{transform:translateX(-50%) scaleY(1)}}";
+const spinnerCss = ":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}}:where(nano-spinner,.nano-spinner){display:inline-block;--track-size:.1em;--indicator-color:var(--nano-color-primary-1000);--track-color:var(--nano-color-neutral-300);--overlay-color:rgb(var(--nano-color-base-rgb-0) / 88%);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--nano-spacing-xs)}:where(nano-spinner,.nano-spinner)::after{content:\"\";order:-1;font-size:1em;display:block;inline-size:1em;block-size:1em;border-radius:50%;border:solid var(--track-size) var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite loading-spin}:where(nano-spinner,.nano-spinner)>:not([slot=label]){display:none}:where(nano-spinner,.nano-spinner) [slot=label]{font-size:var(--nano-font-size-sm);color:var(--nano-color-neutral-1200);display:block;text-align:center;position:relative;z-index:1}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false]){position:absolute;inset:0;display:grid;grid-template-rows:auto auto;z-index:var(--nano-z-index-mask);justify-items:center}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false])::before{content:\"\";order:-2;position:absolute;inset:0;background:var(--overlay-color);z-index:-1}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false]) [slot=label]{align-self:start;grid-row:2}:where(nano-spinner,.nano-spinner)[overlay]:not([overlay=false])::after{align-self:end;grid-row:1;position:relative}@keyframes loading-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
 const Spinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    get el() { return index.getElement(this); }
-    hasText = false;
-    /** The type of spinner animation */
-    type = 'circle';
     /** Displays absolutely with an overlay */
     overlay = false;
-    componentWillLoad() {
-        this.hasText = !!this.el.childNodes.length;
-    }
-    render() {
-        return (renderer.h(index.Host, { key: '50440a7fb87c4e5b54d5b3ab1c5781a77dc580c9', class: "nano-spinner" }, renderer.h("div", { key: 'c4508214b1b17c54dadf15bf5d03128f560e99b8', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, renderer.h("div", { key: 'ef7f2ac50d9c6f3d8565c692b67d991e175b674a', class: "spinner__loader" }, this.type === 'dna' && (renderer.h("div", { key: '269e356d7c35879d969b9308c00ece4bfa5fbc6b', class: "spinner__dna" }, renderer.h("div", { key: '727b7efd0f96663381e0634e3ce418c9c410f2fe', class: "spinner__dnatrack spinner__dnatrack--1" }, renderer.h("div", { key: '177cf194f19c2eee3a78b9e808637b5f1cd372dd', class: "spinner__dnadot spinner__dnadot--1" }), renderer.h("div", { key: '1b4a7b46b153f26db496499cf383eb442213bbba', class: "spinner__dnadot spinner__dnadot--2" })), renderer.h("div", { key: 'f2a0b517981107faa2ff467802a024f052247f42', class: "spinner__dnatrack spinner__dnatrack--2" }, renderer.h("div", { key: '9240ab7c633a21cc68e3c7848ac1c6a68b86353c', class: "spinner__dnadot spinner__dnadot--3" }), renderer.h("div", { key: '24a36e2fc04dfa727899e2fb0d31a0a6ac4d5ea3', class: "spinner__dnadot spinner__dnadot--4" })), renderer.h("div", { key: 'c9560b3b7566f57c613483e28adae95de5154801', class: "spinner__dnatrack spinner__dnatrack--3" }, renderer.h("div", { key: '9cc8b27ed18bb71b236d9714e74c97420ae102df', class: "spinner__dnadot spinner__dnadot--5" }), renderer.h("div", { key: '63e0ce5e9788e643303a8d99ad417a2d4ebf6ede', class: "spinner__dnadot spinner__dnadot--6" })), renderer.h("div", { key: 'c23c129f65a6c8bc5f9e0fe7fdc7218d1359cb41', class: "spinner__dnatrack spinner__dnatrack--4" }, renderer.h("div", { key: '9f4def6d87deef4c6dcb19952966a73c6783f3b7', class: "spinner__dnadot spinner__dnadot--7" }), renderer.h("div", { key: 'cd66a00f3a954c6e87dd66d2701cadc2fb0ba847', class: "spinner__dnadot spinner__dnadot--8" })), renderer.h("div", { key: '0a445022fdbbd1701c2d1d950532aeec863699c5', class: "spinner__dnatrack spinner__dnatrack--5" }, renderer.h("div", { key: 'd0e880fa837d3ac04dcae98932aff0b96521cdc9', class: "spinner__dnadot spinner__dnadot--9" }), renderer.h("div", { key: 'f269a858d997cf7c6f9bb3d981cc9d3a5735a89b', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && renderer.h("span", { key: '16f2074c1aa97fe5a541cbcac45b76985c16de9e', class: "spinner__spin" })), this.hasText && (renderer.h("div", { class: "spinner__text", key: "spinner-text" }, renderer.h("slot", { key: '2dd688af910babb15d020e14a9bde2228adfee98' }))), this.overlay && (renderer.h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
-    }
 };
 Spinner.style = spinnerCss;
 

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: 'e928d991c33b98de7844974084b955c3168b8766', 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: 'cfdaf007080976d6e556eb66e76e5d6f1bd5cdda', class: {
+        return (renderer.h(index.Host, { key: 'd101390b8f5a9505d6a563181fff96c29716fb88', 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: '7b034516d6af7615fe35b9d2161b5378c0b2d7cf', 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: 'be64fd13b426ca2ecd2f0bc2b240271e0f64bdfc', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: '83903ad04e5465798443ef86fe99ca78940bd45e' })))));
+            }, ref: (div) => (this.sticker = div) }, renderer.h("div", { key: '10491e3b9e0af4220e7f84ab0ae72bf297e0af23', class: "sticker-content", ref: (div) => (this.content = div) }, renderer.h("slot", { key: 'f3efcf1fd5a0bda012258cace4712f398fc71a4f' })))));
     }
     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: '35d8ae3c3bce8bdfbd59b24ac8d56b2b065121bf', 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: 'd75249c18948a3c52f1163cf036cbde27e64ef2c', 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: 'b12340e8aa22961ab261ebe58e150ea5b2434314', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: 'eea7e936ac8ebe2338720d5878e06372c222fda2' }))));
+            } }, renderer.h("div", { key: '11c33106eb61433952881ae701d68e5a0bc738c5', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: 'a9e9ed4679fb0ab7d90ee45dddb3c482e2598242' }))));
     }
 };
 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: '0a14c43ba8ab38ec19e63fff1b7569d9f10457f0', 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: 'bff4ec7769d57b0b5b9e3f936c147023ff7b532c', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (renderer.h(index.Host, { key: 'be35131ea184b6644288e79d3e0bd1ea8c8668dc', 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: '24c2a9b88b258d4332a8fc15e7687ec9b0e2a54e', 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: '797a1904ebaaa96585ff47bff275a9643d09a2b8', name: "start" }), renderer.h("div", { key: '588cb30e4c7dfa85c99c45ac231db0188cb56005', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '6ff03454d9735733007f430cdde78010717d8677' })), renderer.h("slot", { key: '959a2633b41acdd733aa29d43178ef15784a8652', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: '02b6b8158044d7be61450b86774bbe9f63575062', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, renderer.h("slot", { key: '80ab0aa015352e67446cee86a340db6a8b6ed6ee', name: "start" }), renderer.h("div", { key: '008484dda3003b4baa4c603ea43ce8ea15c4f688', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '5ee9fe66f2a58e0c06fafe1eb8ba0941ff0ca082' })), renderer.h("slot", { key: 'b3ef36e571ef16ecc40a2983faf5ade9e3a47a9f', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: 'ba51a18677145770de7b18974a28448fccb593cf', 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: 'd3e5a8138e931cb62fefade6b995111d958ad0a5', class: {
+        return (renderer.h(index.Host, { key: 'e968dfa9cd63226118a11fe73f142236e008b489', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '6775e115264b8810584bfbaa573558d539a6c14d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '297a7ca1929ee780382132ef24ba25f8533c9140', class: "nano-table__overflow" }))), renderer.h("slot", { key: '0741a9939e245d5eea38641ed35fb46b4fecf4c5' })));
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '5dbe429e48270fc449057dee7d7c2090ad35e5e2', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '5e32115ed739865a4452f74ab19c01f7f63aa763', class: "nano-table__overflow" }))), renderer.h("slot", { key: '42bfc9215be8ca00a5d6aa5232475544cff4b2b7' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],

package/dist/cjs/{page-dots-CUrSK-1M.js → page-dots-DJrv0V9e.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoSlides_entry = require('./nano-slides-BcdSNmlz.js');
+var nanoSlides_entry = require('./nano-slides-BHsOLxRZ.js');
 require('./index-IR1lkhwT.js');
 require('./renderer-h0yo23iy.js');
 

package/dist/cjs/{slot-Hlplqf1Z.js → slot-DJxvnd35.js}

@@ -60,8 +60,8 @@ class HasSlotController {
         };
     }
     hasDefaultSlot() {
-        if (!this.host || !this.host.isConnected)
-            return;
+        if (!this.host)
+            return false;
         return [...this.host.childNodes].some((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
@@ -77,9 +77,9 @@ class HasSlotController {
         });
     }
     hasNamedSlot(name) {
-        if (!this.host || !this.host.isConnected)
-            return;
-        return !!Array.from(this.host.children).find(ele => ele.getAttribute('slot') && ele.getAttribute('slot') === name);
+        if (!this.host)
+            return false;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'

package/dist/cjs/{table.worker-D7-NI7ZI.js → table.worker-DjOtTDwg.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-Zj71h_Hm.js');
+var nanoDataTable_entry = require('./nano-data-table-BiTzaPlZ.js');
 require('./index-IR1lkhwT.js');
 require('./renderer-h0yo23iy.js');
 require('./math-DIjJ3V87.js');

package/dist/collection/components/alert/alert.css

@@ -200,7 +200,7 @@
 }
 @container (width < 280px) {
   .alert__icon {
-    display: none;
+    display: none !important;
   }
 }
 

package/dist/collection/components/algolia/algolia.js

@@ -691,7 +691,7 @@ export class Algolia {
             }, "aria-busy": this.isLoading }, this.hasLoadSlot && (h("div", { key: '586696526af9ba7b721ebfe8aeba2b5a45b8a19a', hidden: !this.isLoading }, h("slot", { key: '40556633911954fd20b756fedf71aea7e15b15e1', name: "loader" }))), !this.hasLoadSlot && (h("div", { key: 'e5ee4968b6864b656b3537ec46b69e64ebe76370', class: {
                 loader: true,
                 loading: this.isLoading,
-            } }, h("nano-spinner", { key: '63bbc6292b6a7183fe21a2527ffbd3002548871b', overlay: true, type: "circle" }))), h(Universe.Provider, { key: '64e8d5149940ad9c3353709db00677805f0d9946', state: wormholeState }, h("slot", { key: '700649f3a918fce90e0e4c533c849942b9c0ad5c', name: "search-input" }), h("div", { key: '5e5c54c6365ea0725a5b995115c196eb5b1026ca', class: "results-container", "aria-live": "polite" }, h("div", { key: '0a9559ae98ab627e5529dca1026ac1312127d824', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: 'cf30d2970741dfb1631fca008317e4420d228a98', name: "output" })))), h("div", { key: '4d9cf66b3c2c3d0e10e1a443002db80d686530f7', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: 'fc365faa7953cdf3a0aa2887716e2f0f3af464fa' }))));
+            } }, h("nano-spinner", { key: '420a97d058127ea029329d6eca5055c0c54f4c1f', overlay: true }))), h(Universe.Provider, { key: '9c271e35ea7f850eb1ec2f99415ab2eebf014387', state: wormholeState }, h("slot", { key: '7a7a5ac869321d6db0a2f6f784a28e638cbe1a3f', name: "search-input" }), h("div", { key: '91b799022bee756066f1eb60038fdb428c98d3dc', class: "results-container", "aria-live": "polite" }, h("div", { key: '4209e438e0cefbc244dde4c3a9c10e3e5bf56137', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '44b89a4cae72f8ff38c08dd605df32df03a2fc9a', name: "output" })))), h("div", { key: '7fa2100def56573ef4e098ca6da1a722d50416f9', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: '2d5b9cd557465ceee3f249cc556aa6fa32cffd75' }))));
     }
     static get is() { return "nano-algolia"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -43,4 +43,135 @@
   * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).
   * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).
   * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).
-  */
+  */
+:host {
+  --text-color: var(--nano-color-primary-1000);
+  --text-color-hover: var(--nano-color-primary-1200);
+  --text-color-secondary: var(--nano-color-neutral-1400);
+  --text-color-disabled: var(--nano-color-neutral-1000);
+  --border-color: var(--nano-color-neutral-400);
+  --trigger-bg-color: var(--nano-color-base-0);
+  container-type: inline-size;
+  display: block;
+}
+
+.breadcrumbs {
+  inline-size: 100%;
+  max-inline-size: 1346px;
+}
+
+ol,
+nano-menu::part(base) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--nano-font-size-xs);
+  line-height: var(--nano-line-height-normal);
+  text-wrap: nowrap;
+  margin-block-end: 0;
+}
+
+li:not(.return-only li)::after,
+nano-nav-item::after {
+  content: "/";
+  margin: 0 var(--nano-spacing-xs);
+  color: var(--border-color);
+}
+
+a.link {
+  color: var(--text-color);
+}
+
+a:not(.link) {
+  color: var(--text-color-secondary);
+}
+
+a:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+  z-index: 1;
+}
+
+a.link:hover {
+  color: var(--text-color-hover);
+}
+
+a.return.link {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--nano-spacing-sm) / 2);
+}
+
+.breadcrumbs__dropdown {
+  inline-size: 100%;
+  display: none;
+}
+.breadcrumbs__dropdown[open]::part(trigger) {
+  box-shadow: var(--nano-shadow-l1);
+}
+.breadcrumbs__dropdown[open]::part(panel) {
+  box-shadow: var(--nano-shadow-l1);
+}
+
+.trigger-button {
+  inline-size: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
+  color: var(--text-color);
+  background-color: var(--trigger-bg-color);
+  cursor: pointer;
+  text-align: start;
+  border: none;
+  font-size: var(--nano-font-size-xs);
+}
+.trigger-button .trigger-button_label {
+  text-decoration: underline;
+}
+.trigger-button .trigger-button_label::after {
+  content: "/";
+  margin: 0 var(--nano-spacing-xs);
+  color: var(--border-color);
+}
+.trigger-button:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+}
+
+.trigger-icon {
+  transform: rotate(0deg);
+  transition: var(--nano-transition-x-fast) ease transform;
+}
+.trigger-icon--open {
+  transform: rotate(180deg);
+}
+
+@container (width < 768px) {
+  .main {
+    display: none !important;
+  }
+  .breadcrumbs__dropdown {
+    display: block !important;
+  }
+  nano-menu::part(base) {
+    flex-direction: column !important;
+  }
+  nano-nav-item::after {
+    display: none !important;
+  }
+  .trigger-button_label::after {
+    display: inline-block !important;
+  }
+  .return-only {
+    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;
+  }
+}

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

@@ -28,7 +28,7 @@ export class NanoBreadcrumb {
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
             }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));

package/dist/collection/components/data-table/table.js

@@ -845,7 +845,7 @@ export class NanoDataTable {
             h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))))), !!this.blocks.length && this.showPaginateSpinner && (h("nano-spinner", { type: "circle", class: {
+        ]))))), !!this.blocks.length && this.showPaginateSpinner && (h("nano-spinner", { class: {
                 [`${CSSNAMESPACE}__spinner`]: true,
                 [`${CSSNAMESPACE}__spinner--show`]: this._loading,
             } }))))));

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

@@ -96,7 +96,7 @@
   },
   "search": {
     "app_id": "N8NZI5A47F",
-    "api_key": "ZDg2MjM5YTZmNjMzZjA1YTY1YmE2YmMxY2I1NmZkODc4ZTU3Mjg3NmRiMGUyMTJmZTQ5YTNhYTZhZDU1Njc4ZGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc0OTg1MzQxNw==",
+    "api_key": "MWNlOTA4YWY3OTk5YmFiNDZjZmMzNWJiNDkxN2Q1ZGM0MGMzMzA5Y2FlYTQ5NjVhYzE2MTBiYjk2ZWQ3MzQ4NGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1MzU0MDM2NQ==",
     "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": "ZDg2MjM5YTZmNjMzZjA1YTY1YmE2YmMxY2I1NmZkODc4ZTU3Mjg3NmRiMGUyMTJmZTQ5YTNhYTZhZDU1Njc4ZGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc0OTg1MzQxNw==",
+    "api_key": "MWNlOTA4YWY3OTk5YmFiNDZjZmMzNWJiNDkxN2Q1ZGM0MGMzMzA5Y2FlYTQ5NjVhYzE2MTBiYjk2ZWQ3MzQ4NGZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MTc1MzU0MDM2NQ==",
     "indeces": [
       {
         "index": "ont_prod_en_v3",

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

@@ -358,7 +358,7 @@ label.visually-hide,
   display: grid;
   grid-template-areas: "overlay";
 }
-:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
+:host(:not(.is-invalid):not(.is-valid)) .form-ctrl__validation-icon {
   display: none;
 }
 

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

@@ -7,7 +7,10 @@ import { getDirectChildren } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
 let optIds = 0;
 /**
- * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+ * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
+ *
+ * @version 2.0.0
+ * @status stable
  *
  * @slot - main label. Defaults to `label` or `value` prop
  * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check
@@ -80,12 +83,12 @@ export class Option {
     }
     render() {
         const WrapTag = this.href ? 'a' : 'div';
-        return (h(Host, { key: 'ab20615d63e2e61ae1d685d4e56074e9192aad02', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'b301227561b6201851a03b6b1511fc789d58f872', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '67b4ee2d21105b72d816b42054329fbe54ed8688', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '61ad0172a3d7c0fefacd135121d9f52c15dc9bc5', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: 'ed2d11478560dd2e73f7b1373a6742a3f14368a8', part: "check-icon", class: "option__check" }, h("slot", { key: '23a98f11788b6427ea1187bd4f0ddce6fb945ad1', name: "check-icon" }, h("nano-icon", { key: 'ae544942a830172078186d6b060d06423cdce4f6', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '8cc27b2315e7746e5a239cc5f28f656963736e56', part: "start", class: "option__start" }, h("slot", { key: '774af5f7b50587f609dcefa3ba5c41340d9a6acf', name: "start" })), h("div", { key: '3c4524e66aac70d5e74b42271ff57ab10f747cf6', part: "label", class: "option__label" }, h("slot", { key: 'dc4fa00135857715d9867f747a14a19b01b892d1' }, this.label || this.value)), h("div", { key: '3f59b784aec9d62f4c1aaf731781ff21b53e114b', part: "end", class: "option__end" }, h("slot", { key: '138aa8b09d4195210528e87ff763c8c4d9a668b7', name: "end" })))));
+            } }, h("div", { key: '029278a486ed9a1dd809940ed702c55ac0f490a2', part: "check-icon", class: "option__check" }, h("slot", { key: '70c6d3b126e18b91f9e298491e11f6c6a188a957', name: "check-icon" }, h("nano-icon", { key: '20543f3436aff8fb152d69b8d89d009b02d18b88', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '548cb4eb15f59c3be72ec1452ca84206c97389da', part: "start", class: "option__start" }, h("slot", { key: '5e9f2ac1c0358b8008799ed08643619fc41055f8', name: "start" })), h("div", { key: '95f3cd28fb34f02d55034322cd5154e06d5fc4c1', part: "label", class: "option__label" }, h("slot", { key: '1c1208ad99a9a123c6a9110c3cd976a502bc5cca' }, this.label || this.value)), h("div", { key: 'fcf9bf3e1c6674811be6a29af94d747903457d33', part: "end", class: "option__end" }, h("slot", { key: 'c49f296954fd5a60920af5b07fb5157bbe6e4e72', name: "end" })))));
     }
     static get is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css

@@ -358,7 +358,7 @@ label.visually-hide,
   display: grid;
   grid-template-areas: "overlay";
 }
-:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
+:host(:not(.is-invalid):not(.is-valid)) .form-ctrl__validation-icon {
   display: none;
 }
 

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

@@ -3,6 +3,14 @@
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
+/**
+ * An item to display within [slides](/components/slides).
+ *
+ * @version 1.0.0
+ * @status stable
+ *
+ * @slot - main content of the slide
+ */
 export class Slide {
     /**
      * Fired when the slide has loaded.
@@ -30,7 +38,7 @@ export class Slide {
         });
     }
     render() {
-        return (h(Host, { key: 'f45a8a3b8232fdca227e7d53642f31206ff2a6e0', class: "nano-slide" }, h("slot", { key: '248bc7303404576301a477ed36449388190e8417' })));
+        return (h(Host, { key: 'ef8511e766273878ebc0ceaa121199bd86130bbb', class: "nano-slide" }, h("slot", { key: '4b783b4c3df8662fb590a52ed17df975681d44bc' })));
     }
     static get is() { return "nano-slide"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slides/slides.css

@@ -52,11 +52,11 @@
   --dot-color: var(--nano-color-neutral-400);
   --dot-color-active: var(--nano-color-primary-1000);
   --navbtns-icon-color: var(--dot-color-active);
-  --navbtns-bg-color: var(--nano-color-base-0);
+  --navbtns-bg-color: transparent;
   --navbtns-icon-color-disabled: var(--dot-color-active);
-  --navbtns-bg-color-disabled: var(--nano-color-base-0);
+  --navbtns-bg-color-disabled: transparent;
   --fsbtn-icon-color: var(--dot-color-active);
-  --fsbtn-bg-color: var(--nano-color-base-0);
+  --fsbtn-bg-color: transparent;
   display: block;
   -webkit-user-select: none;
           user-select: none;
@@ -173,8 +173,8 @@ https://flickity.metafizzy.co
 }
 
 .flickity-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 5px #19f;
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
 }
 
 .flickity-button:active {
@@ -202,7 +202,6 @@ https://flickity.metafizzy.co
   inset-block-start: 50%;
   inline-size: 44px;
   block-size: 44px;
-  border-radius: 50%;
   /* vertically center */
   transform: translateY(-50%);
 }
@@ -236,13 +235,14 @@ https://flickity.metafizzy.co
 .flickity-page-dots {
   position: absolute;
   inline-size: 100%;
-  inset-block-end: 10px;
   padding: 0;
   margin: 0;
   text-align: center;
   line-height: 1;
   z-index: 4;
   display: inline-flex;
+  justify-content: center;
+  bottom: 0;
 }
 
 .flickity-rtl .flickity-page-dots {
@@ -261,8 +261,15 @@ https://flickity.metafizzy.co
   block-size: 0.375rem;
   margin-block: 0;
   cursor: pointer;
+  padding: calc(var(--nano-spacing-md) / 2);
+}
+.flickity-page-dots .dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
   background: var(--dot-color);
-  border: calc(var(--nano-spacing-md) / 2) solid var(--nano-color-base-0);
+  margin: calc(var(--nano-spacing-md) / 2);
 }
 .flickity-page-dots .dot:focus-visible {
   outline: var(--nano-focus-ring);
@@ -270,8 +277,7 @@ https://flickity.metafizzy.co
   z-index: 1;
 }
 
-.flickity-page-dots .dot.is-selected {
-  opacity: 1;
+.flickity-page-dots .dot.is-selected::after {
   background: var(--dot-color-active);
 }