@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

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

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, Build, readTask, writeTask, } from "@stencil/core";
 import { transformTag, h } from "../../utils/renderer";
@@ -8,10 +8,10 @@ const modulo = (num, div) => {
     return ((num % div) + div) % div;
 };
 /**
- * The Slides component is a multi-section container. Each section can be swiped or dragged between.
- * It contains any number of Slide components.
+ * A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.
  *
- * Uses [Flickity](https://flickity.metafizzy.co/) under the hood.
+ * @version 1.0.0
+ * @status stable
  *
  * @part base - Wrapper around slides and additional ui elements.
  * @part slide-container - Wraps all slide elements.
@@ -499,15 +499,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: 'fec3c2951cb3865b5a90817750783f60791c8152', class: "nano-slides" }, h("div", { key: '6e7da38e24396ff8f274ecf1f12523561f68d7b9', class: {
+        return (h(Host, { key: '778b37c200236cc6940c12f4ed28355c83804434', class: "nano-slides" }, h("div", { key: '29bb9128e4c2e13f754b15deb335d100a4bbd8cc', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '4a80ee977b2c6adab8667be4d5737ee2b3991c12', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: 'bc5e82987d73da6ba47bcc0d6d85694660e63539', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: '34ff051519aeba458f99ea0d164a0acd1bd547cc' })), h("div", { key: '91192bf437b0c614a7f349f4ae7c0740f6768ea7', class: "ui-extras" }, h("slot", { key: 'e278a3193b7b9c4b88f6245cc63def6f2f4dd941', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: 'a26b2ef0d1b133231dec665fd670bdfda1bca949' })), h("div", { key: 'e02f3971f707f6fedeae00d879be04d4b576119a', class: "ui-extras" }, h("slot", { key: '97cabadc46d2011e2ca41d8f5c7c26ef53e32b6a', name: "ui" })))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }
@@ -525,6 +525,7 @@ export class Slides {
         return {
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": true,
                 "complexType": {
                     "original": "FlickityOptions",
@@ -549,6 +550,7 @@ export class Slides {
             },
             "navbtns": {
                 "type": "boolean",
+                "attribute": "navbtns",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -563,12 +565,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "navbtns",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pager": {
                 "type": "boolean",
+                "attribute": "pager",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -583,12 +585,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pager",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullscreenbtn": {
                 "type": "boolean",
+                "attribute": "fullscreenbtn",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -603,12 +605,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fullscreenbtn",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullscreen": {
                 "type": "boolean",
+                "attribute": "fullscreen",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -623,12 +625,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fullscreen",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "animation": {
                 "type": "string",
+                "attribute": "animation",
                 "mutable": false,
                 "complexType": {
                     "original": "SlideAnimation",
@@ -649,12 +651,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animation",
                 "reflect": true,
                 "defaultValue": "'scroll'"
             },
             "currentSlide": {
                 "type": "number",
+                "attribute": "current-slide",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -669,12 +671,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-slide",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "autoplay": {
                 "type": "any",
+                "attribute": "autoplay",
                 "mutable": false,
                 "complexType": {
                     "original": "string | false | number",
@@ -689,12 +691,12 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autoplay",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "ready": {
                 "type": "boolean",
+                "attribute": "ready",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -712,7 +714,6 @@ export class Slides {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ready",
                 "reflect": true,
                 "defaultValue": "false"
             }
@@ -1269,4 +1270,3 @@ const waitForSlides = (host) => {
         host.addEventListener('nano-slide-ready', slideResolver);
     });
 };
-//# sourceMappingURL=slides.js.map

package/dist/collection/components/sortable/sortable.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@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 {
@@ -22,18 +26,26 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@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 {
   position: relative;
   display: block;
 }
 
 .sortable__live-region {
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   block-size: 1px;
-  inline-size: 1px;
-  margin: -1px;
   overflow: hidden;
-  padding: 0;
   position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }

package/dist/collection/components/sortable/sortable.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, readTask, writeTask, Build, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -13,12 +13,11 @@ const orientationMap = {
 };
 let sortableIds = 0;
 /**
- * An accessible and flexible re-order / sort utility component.
+ * An accessible and flexible sort and re-order utility.
+ *
+ * @version 4.0
+ * @status stable
  *
- *- Drag and drop via mouse, touch or keyboard
- *- Live announcements for screen readers
- *- Works with or without an explicit handle (although with is preferable)
-
  * @part announcements - the a11y, live region. Visually hidden by default
  *
  * @slot - The default slot containing any items you might want to sort
@@ -84,6 +83,7 @@ export class Sortable {
      * you must use this function to render a control *outside* of the focusable element.
      * @param _number
      * @param _element
+     * @default () => <nano-icon-button></nano-icon-button>;
      * @returns a function that attaches a keyboard accessible handle control element.
      * The function itself *must* return the handle element.
      */
@@ -419,6 +419,7 @@ export class Sortable {
         const targetElement = e.target;
         let foundHandle;
         let sortEle;
+        console.log('yooo', e.key);
         if (this.handleSelector) {
             foundHandle = targetElement.closest(this.handleSelector);
             sortEle = targetElement.closest(this.itemSelector);
@@ -732,7 +733,7 @@ export class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: 'c9bce5fa4dd5410d54d84a41ab8ece10d316ede0', class: "nano-sortable" }, h("div", { key: 'beffbe43a385e254cb696cb5ba98797c0a8be718', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '9a552eeb74869b9825311907172f44ea0358a3cb' })));
+        return (h(Host, { key: '864871b13cc5f7a14e5b3a72c7776daec8f75bf0', class: "nano-sortable" }, h("div", { key: '9645cde622750e8d9476430712bb71ca090b6d0d', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '5083e13e75b08b68732fccc7181d2358e5a3198d' })));
     }
     static get is() { return "nano-sortable"; }
     static get encapsulation() { return "shadow"; }
@@ -750,6 +751,7 @@ export class Sortable {
         return {
             "itemSelector": {
                 "type": "string",
+                "attribute": "item-selector",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -764,12 +766,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "item-selector",
                 "reflect": false,
                 "defaultValue": "'li'"
             },
             "handleSelector": {
                 "type": "string",
+                "attribute": "handle-selector",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -784,11 +786,11 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "handle-selector",
                 "reflect": false
             },
             "dropzoneSelector": {
                 "type": "string",
+                "attribute": "dropzone-selector",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -803,11 +805,11 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dropzone-selector",
                 "reflect": false
             },
             "helperText": {
                 "type": "string",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -822,12 +824,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper-text",
                 "reflect": false,
                 "defaultValue": "'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n    'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.'"
             },
             "itemDescriptor": {
                 "type": "unknown",
+                "attribute": "item-descriptor",
                 "mutable": false,
                 "complexType": {
                     "original": "(el: Element) => string",
@@ -836,7 +838,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -858,6 +860,7 @@ export class Sortable {
             },
             "grabbedHelperText": {
                 "type": "unknown",
+                "attribute": "grabbed-helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "(el: Element) => string",
@@ -866,7 +869,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -888,6 +891,7 @@ export class Sortable {
             },
             "droppedHelperText": {
                 "type": "unknown",
+                "attribute": "dropped-helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "(el: Element) => string",
@@ -896,7 +900,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -918,6 +922,7 @@ export class Sortable {
             },
             "reorderHelperText": {
                 "type": "unknown",
+                "attribute": "reorder-helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "(el: Element, elements: Element[], position: number) => string",
@@ -926,7 +931,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         }
                     }
                 },
@@ -954,6 +959,7 @@ export class Sortable {
             },
             "createKeyboardHandle": {
                 "type": "unknown",
+                "attribute": "create-keyboard-handle",
                 "mutable": false,
                 "complexType": {
                     "original": "(_number: number, _element: Element) => HTMLElement",
@@ -962,7 +968,7 @@ export class Sortable {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                            "id": "../../../stenciljs/internal/stencil-core/index.d.ts::Element"
                         },
                         "HTMLElement": {
                             "location": "global",
@@ -979,6 +985,9 @@ export class Sortable {
                         }, {
                             "name": "param",
                             "text": "_element"
+                        }, {
+                            "name": "default",
+                            "text": "() => <nano-icon-button></nano-icon-button>;"
                         }, {
                             "name": "returns",
                             "text": "a function that attaches a keyboard accessible handle control element.\nThe function itself *must* return the handle element."
@@ -991,6 +1000,7 @@ export class Sortable {
             },
             "sortableHostElement": {
                 "type": "unknown",
+                "attribute": "sortable-host-element",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
@@ -1013,6 +1023,7 @@ export class Sortable {
             },
             "animationEnabled": {
                 "type": "boolean",
+                "attribute": "animation-enabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1027,12 +1038,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animation-enabled",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "draggedClass": {
                 "type": "string",
+                "attribute": "dragged-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1047,12 +1058,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dragged-class",
                 "reflect": false,
                 "defaultValue": "'nano-sortable__dragged'"
             },
             "handleDraggedClass": {
                 "type": "string",
+                "attribute": "handle-dragged-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1067,12 +1078,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "handle-dragged-class",
                 "reflect": false,
                 "defaultValue": "'nano-sortable__handle-dragged'"
             },
             "placeholderClass": {
                 "type": "string",
+                "attribute": "placeholder-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1087,12 +1098,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder-class",
                 "reflect": false,
                 "defaultValue": "'nano-sortable__placeholder'"
             },
             "dropzoneActiveClass": {
                 "type": "string",
+                "attribute": "dropzone-active-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1107,12 +1118,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dropzone-active-class",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "animationTiming": {
                 "type": "any",
+                "attribute": "animation-timing",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -1127,12 +1138,12 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animation-timing",
                 "reflect": false,
                 "defaultValue": "{ duration: 200, easing: 'ease-out' }"
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -1147,11 +1158,11 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": false
             },
             "dragResize": {
                 "type": "boolean",
+                "attribute": "drag-resize",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1166,7 +1177,6 @@ export class Sortable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "drag-resize",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -1283,4 +1293,3 @@ export class Sortable {
             }];
     }
 }
-//# sourceMappingURL=sortable.js.map

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

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@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 {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@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 --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%));
@@ -60,8 +74,6 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  -webkit-backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
-          backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
 }
 .spinner__loader {
   font-size: var(--spinner-scale, 1em);

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

@@ -1,10 +1,14 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * 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
+ *
  * @slot - Used for loading messages
  */
 export class Spinner {
@@ -18,7 +22,7 @@ export class Spinner {
         this.hasText = !!this.el.childNodes.length;
     }
     render() {
-        return (h(Host, { key: '650f22e1f076d786590389993562fb03d73b50d5', class: "nano-spinner" }, h("div", { key: '392afaac4ae23acdc247a7d4d5dea7166beaa6f4', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: '71699c822304d7bc40bc6510a373bd6da4905dc0', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'f3cf1be6056a3aacd9f08fb2ba20a0196a751912', class: "spinner__dna" }, h("div", { key: '9fbc4e80ce66f14751001ed7e9559e01649d1e7b', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '1242c2d9c928cf0e371133335ad05dc1e1426380', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1dcfced70f0813796681ca5049fb50144d83e9ec', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'cdb111d45ddbab07c9c0fed293bff499e306215e', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '326aa2074a4e16f7d6fddc41354672188c602f70', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: 'd436ba81949ada55d5fe2356e663ba1b2f24f1fd', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'ad2b9393afa3d2e9109fe7af696ab06001541344', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'db18ff89bdfa702a733e817099ec03e550b7a967', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '812f51e0fdb34fae89c048fef6925feeed8e5d7f', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'e53e41b6adc1fbf35ae07f7e0783b097d5a201db', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '0407e5a7234424094b1bc452a6f3bfe2c38ad7a7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'f9c9ee014b3cb7df2f6ca9e1f5ef6fc21a7b2c5c', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '3af97dda00e1ed9eaa738a2e0167f59916a69dbe', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '1f49f2d13828475a24dc318f3f28cca6973e01d5', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: '5aee21e437ab1f35a35a1616e170ce1fed8d2811', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '3e87f7a4aca4c55d750b6f01d14f83c8c9b232e8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '1e3e90c45121e16f4297ccf31d3809910d5721cf' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
+        return (h(Host, { key: 'dbc40d7788bbf362c854bb8e2edfec5eba74dab7', class: "nano-spinner" }, h("div", { key: '43ed7c0bc040a058f5ae2e667d060bc977ab1cd6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'e5b5e56150e94540cb10114ea50414fbfa388f9b', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'd710dd242b6f87267dd7e5e027e06970d50bf404', class: "spinner__dna" }, h("div", { key: '8a352a82329fab518e60016e02b6a8ed5acc2f09', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '11df9066edf3c1976e3a2389d01ec16db6351449', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '4b3491c97ff57acc3630e084965c22f4f2be21ac', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '539be4e37c8ef5942c96a9e956da72edaa85a717', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'cb819582c58208d071303faa623a6d1204eae265', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '852c3b793018c03021555321f9c10f5060a129f0', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: '915260775e7f710e9d54c80ebe66a4be9ffb4d56', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'bad113420011fbeff7421a347459060ea0e27c32', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: 'e2d6aee7635d1262116119240f4d4e7518b26fc6', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '0ccd6e6d73eca5bcc50073bd4502d88cdd1aaaeb', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '1046da948f271f9a8812e1795eca262a86eb5e77', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '65b4f08dd543597c477bf3bb3d1b01d2de29d897', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '7e6df709a6c943e14cafdbcff845a40aaedadca9', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '70e7baee2dea251a9413905a0f8df825ea8a1c9f', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'ca16ebfa9ab9932f67dbe542eacced2056644295', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'fa9e17f125e1f435f75538b24111cefbbce930c8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'c2ce2c01f09a02201a1247f9db1baae3afd62c55' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
     }
     static get is() { return "nano-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -36,6 +40,7 @@ export class Spinner {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'dna' | 'circle'",
@@ -50,12 +55,12 @@ export class Spinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'circle'"
             },
             "overlay": {
                 "type": "boolean",
+                "attribute": "overlay",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -70,7 +75,6 @@ export class Spinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "overlay",
                 "reflect": true,
                 "defaultValue": "false"
             }
@@ -83,4 +87,3 @@ export class Spinner {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=spinner.js.map