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

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/{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/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/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);
 }
 

package/dist/collection/components/spinner/spinner.css

@@ -36,173 +36,80 @@
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
-  }:host {
+  }:where(nano-spinner, .nano-spinner) {
   /**
-   * @prop --base-color-rgb: default var(--nano-indicator-rgb, 84 140 175)
-   * @prop --indicator-color: default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));
-   * @prop --track-color: default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));
-   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size
-   * @prop --overlay-color: var(--nano-layer-overlay-light, rgb(255 255 255 / 70%));
+   * @prop --track-size: Size of the spinner track. Defaults to .1em.
+   * @prop --indicator-color: Color of the spinner indicator. Defaults to var(--nano-color-primary-1000).
+   * @prop --track-color: Color of the spinner track. Defaults to var(--nano-color-neutral-300).
+   * @prop --overlay-color: Color of the overlay when the spinner has the `overlay` attribute. Defaults to rgb(var(--nano-color-base-rgb-0) / 88%).
    */
   display: inline-block;
-  --base-color-rgb: var(--nano-indicator-rgb, 84 140 175);
-  --indicator-color:
-    var(
-      --nano-indicator-color,
-      rgb(var(--base-color-rgb) / 100%)
-    );
-  --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;
+  --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);
 }
-: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 {
+:where(nano-spinner, .nano-spinner)::after {
+  content: "";
+  order: -1;
+  font-size: 1em;
   display: block;
-  margin: auto;
   inline-size: 1em;
   block-size: 1em;
   border-radius: 50%;
-  border: solid 0.1em var(--track-color);
+  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 spin;
+  animation: 1s linear infinite loading-spin;
 }
-.spinner__dna {
-  font-size: 0.2286em;
-  display: flex;
+:where(nano-spinner, .nano-spinner) > :not([slot=label]) {
+  display: none;
 }
-.spinner__dnatrack {
+: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;
-  padding-block: 0;
-  padding-inline: 0.625em;
-  block-size: 4.375em;
-  inline-size: 0.625em;
-  overflow: hidden;
+  z-index: 1;
 }
-.spinner__dnatrack::before {
-  content: "";
+:where(nano-spinner, .nano-spinner)[overlay]:not([overlay=false]) {
   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;
+  inset: 0;
+  display: grid;
+  grid-template-rows: auto auto;
+  z-index: var(--nano-z-index-mask);
+  justify-items: center;
 }
-.spinner__dnadot {
+:where(nano-spinner, .nano-spinner)[overlay]:not([overlay=false])::before {
+  content: "";
+  order: -2;
   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;
+  inset: 0;
+  background: var(--overlay-color);
+  z-index: -1;
 }
-.spinner__dnadot--10 {
-  animation: rotate 1.5s 0s linear infinite;
+:where(nano-spinner, .nano-spinner)[overlay]:not([overlay=false]) [slot=label] {
+  align-self: start;
+  grid-row: 2;
 }
-.spinner__text {
-  text-align: center;
+:where(nano-spinner, .nano-spinner)[overlay]:not([overlay=false])::after {
+  align-self: end;
+  grid-row: 1;
   position: relative;
-  margin-block-start: 0.5em;
 }
-@keyframes spin {
+
+@keyframes loading-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);
-  }
 }

package/dist/collection/components/spinner/spinner.js

@@ -1,31 +1,17 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { Host, } from "@stencil/core";
-import { h } from "../../utils/renderer";
 /**
  * Spinners are used to show the progress of an indeterminate operation.
  *
  * @version 1.0.0
  * @status stable
+ * @type CSS Only
  *
- * @slot - Used for loading messages
+ * @slot - Used for loading messages that should scale with current spinner / font size.
+ * @slot label - Used for loading messages that should not scale with spinner / font size.
  */
 export class Spinner {
-    el;
-    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 (h(Host, { key: '50440a7fb87c4e5b54d5b3ab1c5781a77dc580c9', class: "nano-spinner" }, h("div", { key: 'c4508214b1b17c54dadf15bf5d03128f560e99b8', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'ef7f2ac50d9c6f3d8565c692b67d991e175b674a', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: '269e356d7c35879d969b9308c00ece4bfa5fbc6b', class: "spinner__dna" }, h("div", { key: '727b7efd0f96663381e0634e3ce418c9c410f2fe', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '177cf194f19c2eee3a78b9e808637b5f1cd372dd', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1b4a7b46b153f26db496499cf383eb442213bbba', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'f2a0b517981107faa2ff467802a024f052247f42', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '9240ab7c633a21cc68e3c7848ac1c6a68b86353c', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '24a36e2fc04dfa727899e2fb0d31a0a6ac4d5ea3', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'c9560b3b7566f57c613483e28adae95de5154801', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: '9cc8b27ed18bb71b236d9714e74c97420ae102df', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '63e0ce5e9788e643303a8d99ad417a2d4ebf6ede', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'c23c129f65a6c8bc5f9e0fe7fdc7218d1359cb41', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '9f4def6d87deef4c6dcb19952966a73c6783f3b7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'cd66a00f3a954c6e87dd66d2701cadc2fb0ba847', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '0a445022fdbbd1701c2d1d950532aeec863699c5', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: 'd0e880fa837d3ac04dcae98932aff0b96521cdc9', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'f269a858d997cf7c6f9bb3d981cc9d3a5735a89b', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '16f2074c1aa97fe5a541cbcac45b76985c16de9e', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '2dd688af910babb15d020e14a9bde2228adfee98' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
-    }
     static get is() { return "nano-spinner"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["spinner.scss"]
@@ -38,26 +24,6 @@ export class Spinner {
     }
     static get properties() {
         return {
-            "type": {
-                "type": "string",
-                "attribute": "type",
-                "mutable": false,
-                "complexType": {
-                    "original": "'dna' | 'circle'",
-                    "resolved": "\"circle\" | \"dna\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of spinner animation"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'circle'"
-            },
             "overlay": {
                 "type": "boolean",
                 "attribute": "overlay",
@@ -80,10 +46,4 @@ export class Spinner {
             }
         };
     }
-    static get states() {
-        return {
-            "hasText": {}
-        };
-    }
-    static get elementRef() { return "el"; }
 }

package/dist/collection/components/sticker/sticker.js

@@ -599,12 +599,12 @@ export class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(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" }, h("div", { key: 'cfdaf007080976d6e556eb66e76e5d6f1bd5cdda', class: {
+        return (h(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" }, 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) }, h("div", { key: 'be64fd13b426ca2ecd2f0bc2b240271e0f64bdfc', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '83903ad04e5465798443ef86fe99ca78940bd45e' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '10491e3b9e0af4220e7f84ab0ae72bf297e0af23', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'f3efcf1fd5a0bda012258cace4712f398fc71a4f' })))));
     }
     static get is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -227,10 +227,10 @@ export class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'd3e5a8138e931cb62fefade6b995111d958ad0a5', class: {
+        return (h(Host, { key: 'e968dfa9cd63226118a11fe73f142236e008b489', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '6775e115264b8810584bfbaa573558d539a6c14d', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '297a7ca1929ee780382132ef24ba25f8533c9140', class: "nano-table__overflow" }))), h("slot", { key: '0741a9939e245d5eea38641ed35fb46b4fecf4c5' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '5dbe429e48270fc449057dee7d7c2090ad35e5e2', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '5e32115ed739865a4452f74ab19c01f7f63aa763', class: "nano-table__overflow" }))), h("slot", { key: '42bfc9215be8ca00a5d6aa5232475544cff4b2b7' })));
     }
     static get is() { return "nano-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tab-content.js

@@ -24,10 +24,10 @@ export class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(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 (h(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,
-            } }, h("div", { key: 'b12340e8aa22961ab261ebe58e150ea5b2434314', part: "base", class: "nano-tab-content" }, h("slot", { key: 'eea7e936ac8ebe2338720d5878e06372c222fda2' }))));
+            } }, h("div", { key: '11c33106eb61433952881ae701d68e5a0bc738c5', part: "base", class: "nano-tab-content" }, h("slot", { key: 'a9e9ed4679fb0ab7d90ee45dddb3c482e2598242' }))));
     }
     static get is() { return "nano-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab.js

@@ -51,12 +51,12 @@ export class NanoTab {
         }
     };
     render() {
-        return (h(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" }, h("div", { key: 'bff4ec7769d57b0b5b9e3f936c147023ff7b532c', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(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" }, 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,
-            } }, h("slot", { key: '797a1904ebaaa96585ff47bff275a9643d09a2b8', name: "start" }), h("div", { key: '588cb30e4c7dfa85c99c45ac231db0188cb56005', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '6ff03454d9735733007f430cdde78010717d8677' })), h("slot", { key: '959a2633b41acdd733aa29d43178ef15784a8652', name: "end" }), this.closable && !this.disabled && (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" })))));
+            } }, h("slot", { key: '80ab0aa015352e67446cee86a340db6a8b6ed6ee', name: "start" }), h("div", { key: '008484dda3003b4baa4c603ea43ce8ea15c4f688', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ee9fe66f2a58e0c06fafe1eb8ba0941ff0ca082' })), h("slot", { key: 'b3ef36e571ef16ecc40a2983faf5ade9e3a47a9f', name: "end" }), this.closable && !this.disabled && (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" })))));
     }
     static get is() { return "nano-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -41,8 +41,8 @@ export class NanoTag {
     render() {
         return (this.closable &&
             !this.containsAnchor() && [
-            h("slot", { key: '2ef94e5651a0428b93d9d3619ad0440bf70587e2' }),
-            h("nano-icon-button", { key: '0ad6bfbe3fd9ab8a796bbe915c6d522986236f1d', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
+            h("slot", { key: '7b5455fe29a182a51e9d9dc884e5d40dd3aaafd6' }),
+            h("nano-icon-button", { key: 'af79797da765a4da2d6a49d9ca1a7bd9295a8429', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
         ]);
     }
     static get is() { return "nano-tag"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -227,10 +227,10 @@ export class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '08c87af28b192ca65f9adf1d62dd83b7e75ae3b5', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'c132792e3f32e824735783e6284f1c12ea3c234a', onSlotchange: this.handleSlotChange }), h("div", { key: 'd27cc6ed095544d4f81680191647ead58ed2cc89', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'c002bf4ec9a19eb5631d120498df58956d81e9ba', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '11084ad6ae4888255ad9118d9f230eb8d6f7f582', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '04718a12adc5a00cd2a467d1f5eada0efb10b4aa', onSlotchange: this.handleSlotChange }), h("div", { key: 'c010b4767a12f50a3004a403f7f905a1b32be517', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'b3923b2b512bbcb962f19066456a5f739cf6030e', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '9f25b5ba1a2732bf2b6f6791bc47fb6c66e08bb6', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8d9e9b42fc0fb8e6491492b28019c184b7fc4fac', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1eb8412dcf8f2517a9e2c0786844492acf97e77c', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '89e9f4859aefcee96afe6a3099a03ef1c544d7c7', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get is() { return "nano-tooltip"; }
     static get encapsulation() { return "shadow"; }