@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/collection/components/hero/hero.js

@@ -1,7 +1,7 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, } from "@stencil/core";
+import { Host, Build, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
@@ -56,7 +56,7 @@ export class Hero {
     /** Set the content structure level of the hero. Defaults to 'top'  */
     level = 'top';
     slotChangeObserver() {
-        if (!window['MutationObserver'])
+        if (Build.isServer)
             return;
         if (this.mo)
             this.mo.disconnect();
@@ -104,7 +104,7 @@ export class Hero {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: '3ea826a0e3c29d25595e2ed95b36398980193ade', class: "nano-hero" }, h("div", { key: '09b08515b8bd244eef354df64e76814ec7fbda6d', class: {
+        return (h(Host, { key: '5d62edb541baa74626690e274ec68fa7a1cdb6b4', class: "nano-hero" }, h("div", { key: '85b443fdc0154a0911cfa7d8338f713249726cfc', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -115,9 +115,9 @@ export class Hero {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, h("div", { key: '46b5daff7c9c768c5354b54a1dd9f8ca8b9fc100', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '0bc5e85862297cbd10bb4953c545eaccfde46d34', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: '96a6199bb1c851b70cbc146b25d722f3c7c7cfbb' }))), !this.imgSrc && [
-            h("div", { key: 'b34f8983859f55762fddd7ebadd95b2db6d96f7a', class: "hero__bg-slot" }, h("slot", { key: 'df7263acd2610a142fe492555b77e6d24bd382a4', name: "background" })),
-            h(this.HeroContent, { key: 'c02cbdf49f60dc755c3103f84df6e1de82b3a7ce' }),
+            } }, h("div", { key: '7f4075117c01f9bcd658e7c315db30e6178b7d5c', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '938f93db20077f16fe0f3c475a7b75fff5fbd753', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'ab363f8fa4899d633039a6533a79147e3db09a4c' }))), !this.imgSrc && [
+            h("div", { key: '260071196444ac93ed8245015dbba9c93b2cf6b1', class: "hero__bg-slot" }, h("slot", { key: '1e1b83f44caca5904ae709e3b9ca7bae0560ef38', name: "background" })),
+            h(this.HeroContent, { key: '4588e32888b9e82221644b74a84364a6e6db9f7f' }),
         ]))));
     }
     static get is() { return "nano-hero"; }
@@ -136,6 +136,7 @@ export class Hero {
         return {
             "imgSrc": {
                 "type": "string",
+                "attribute": "img-src",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -150,11 +151,11 @@ export class Hero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "img-src",
                 "reflect": false
             },
             "imgSrcSet": {
                 "type": "string",
+                "attribute": "img-src-set",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,12 +170,12 @@ export class Hero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "img-src-set",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "largeScreenBP": {
                 "type": "number",
+                "attribute": "large-screen-b-p",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -189,12 +190,12 @@ export class Hero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "large-screen-b-p",
                 "reflect": false,
                 "defaultValue": "900"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -209,12 +210,12 @@ export class Hero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "'dark'"
             },
             "level": {
                 "type": "string",
+                "attribute": "level",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'sub'",
@@ -229,7 +230,6 @@ export class Hero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "level",
                 "reflect": false,
                 "defaultValue": "'top'"
             }
@@ -259,4 +259,3 @@ export class Hero {
             }];
     }
 }
-//# sourceMappingURL=hero.js.map

package/dist/collection/components/icon/device/elysion.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M46.0552 4.25635H5.94583C4.87345 4.25635 4.00101 5.17226 4.00101 6.2981V26.9779H1.15271C0.517107 26.9779 0 27.495 0 28.1306V37.0277C0 37.6633 0.517107 38.1804 1.15271 38.1804H4.00101V40.7981C4.00101 42.1396 5.09235 43.2309 6.43382 43.2309H45.5671C46.9086 43.2309 48 42.1396 48 40.7981V6.2981C48 5.17226 47.1276 4.25635 46.0552 4.25635ZM5.12901 6.2981C5.12901 5.79425 5.49544 5.38435 5.94583 5.38435H46.0552C46.5056 5.38435 46.872 5.79425 46.872 6.2981V14.6009H5.12901V6.2981ZM1.128 37.0277V28.1306C1.128 28.117 1.1391 28.1059 1.15271 28.1059H17.0523C17.0659 28.1059 17.077 28.117 17.077 28.1306V37.0277C17.077 37.0413 17.0659 37.0524 17.0523 37.0524H1.15271C1.1391 37.0524 1.128 37.0413 1.128 37.0277ZM17.0523 26.9779H9.31119V20.8279H42.7373V31.9409L42.7353 31.9477H18.205V28.1306C18.205 27.495 17.6879 26.9779 17.0523 26.9779ZM46.872 40.7981C46.872 41.5176 46.2866 42.1029 45.5671 42.1029H6.43382C5.71434 42.1029 5.12901 41.5176 5.12901 40.7981V38.1804H17.0523C17.6879 38.1804 18.205 37.6633 18.205 37.0277V33.0757H42.8729C43.322 33.0757 43.7006 32.7677 43.8093 32.3515C43.8452 32.2773 43.8653 32.1941 43.8653 32.1062V20.6695C43.8653 20.1348 43.4304 19.6999 42.8958 19.6999H9.15276C8.61815 19.6999 8.18319 20.1348 8.18319 20.6695V26.9779H5.12901V15.7289H46.872V40.7981Z"/>
+<path d="M26.0005 35.355C24.7536 35.355 23.7393 36.3694 23.7393 37.6162C23.7393 38.8631 24.7536 39.8775 26.0005 39.8775C27.2474 39.8775 28.2617 38.8631 28.2617 37.6162C28.2617 36.3694 27.2474 35.355 26.0005 35.355ZM26.0005 38.7495C25.3756 38.7495 24.8673 38.2411 24.8673 37.6162C24.8673 36.9914 25.3756 36.483 26.0005 36.483C26.6254 36.483 27.1337 36.9914 27.1337 37.6162C27.1337 38.2411 26.6254 38.7495 26.0005 38.7495Z"/>
+<path d="M30.8287 12.0068H21.22C20.9085 12.0068 20.656 12.2593 20.656 12.5708C20.656 12.8823 20.9085 13.1348 21.22 13.1348H30.8287C31.1402 13.1348 31.3927 12.8823 31.3927 12.5708C31.3927 12.2593 31.1402 12.0068 30.8287 12.0068Z"/>
+</svg>

package/dist/collection/components/icon/device/flongle.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M18.6705 0C16.491 0 14.6663 1.82471 14.6663 4.00422V47.4424C14.6663 47.7466 14.9197 48 15.2238 48H31.4435C31.7476 48 32.001 47.7466 32.001 47.4424V0.55755C32.001 0.253432 31.7476 0 31.4435 0H18.6705ZM30.8859 46.9356H15.7307V4.00422C15.7307 2.38226 17.0485 1.06441 18.6705 1.06441H30.8352V46.9356H30.8859Z"/>
+<path d="M17.9609 4.46032V41.0052C17.9609 41.3093 18.2144 41.5627 18.5185 41.5627H20.2418V44.0971C20.2418 44.4012 20.4953 44.6546 20.7994 44.6546H25.9694C26.2735 44.6546 26.5269 44.4012 26.5269 44.0971V41.5627H28.2503C28.5544 41.5627 28.8078 41.3093 28.8078 41.0052V4.46032C28.8078 3.85208 28.301 3.34521 27.6927 3.34521H19.076C18.4678 3.34521 17.9609 3.85208 17.9609 4.46032ZM25.868 40.4983C25.5639 40.4983 25.3105 40.7518 25.3105 41.0559V43.5902H21.2049V41.0559C21.2049 40.7518 20.9514 40.4983 20.6473 40.4983H18.924V11.3537H27.5407V40.4983H25.8173H25.868ZM27.5914 4.40963V10.2386H19.0254V4.40963H27.5914Z"/>
+</svg>

package/dist/collection/components/icon/device/gridion.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M9.8433 22.1064C9.14284 22.1064 8.58984 22.6594 8.58984 23.3599V28.5212C8.58984 29.2217 9.14284 29.7746 9.8433 29.7746C10.5438 29.7746 11.0968 29.2217 11.0968 28.5212V23.3599C11.0968 22.6594 10.5438 22.1064 9.8433 22.1064Z"/>
+<path d="M16.9217 22.1064C16.2212 22.1064 15.6682 22.6594 15.6682 23.3599V28.5212C15.6682 29.2217 16.2212 29.7746 16.9217 29.7746C17.6221 29.7746 18.1751 29.2217 18.1751 28.5212V23.3599C18.1751 22.6594 17.6221 22.1064 16.9217 22.1064Z"/>
+<path d="M24 22.1064C23.2996 22.1064 22.7466 22.6594 22.7466 23.3599V28.5212C22.7466 29.2217 23.2996 29.7746 24 29.7746C24.7005 29.7746 25.2535 29.2217 25.2535 28.5212V23.3599C25.2535 22.6594 24.7005 22.1064 24 22.1064Z"/>
+<path d="M31.0784 22.1064C30.3779 22.1064 29.825 22.6594 29.825 23.3599V28.5212C29.825 29.2217 30.3779 29.7746 31.0784 29.7746C31.7789 29.7746 32.3319 29.2217 32.3319 28.5212V23.3599C32.3319 22.6594 31.7789 22.1064 31.0784 22.1064Z"/>
+<path d="M38.1568 22.1064C37.4563 22.1064 36.9033 22.6594 36.9033 23.3599V28.5212C36.9033 29.2217 37.4563 29.7746 38.1568 29.7746C38.8572 29.7746 39.4102 29.2217 39.4102 28.5212V23.3599C39.4102 22.6594 38.8572 22.1064 38.1568 22.1064Z"/>
+<path d="M44.2396 5.92188H3.76037C1.69585 5.92188 0 7.61773 0 9.68224V38.4749C0 40.5394 1.69585 42.2352 3.76037 42.2352H44.2396C46.3041 42.2352 48 40.5394 48 38.4749V9.68224C48 7.61773 46.3041 5.92188 44.2396 5.92188ZM46.9677 38.4749C46.9677 39.9864 45.7512 41.203 44.2396 41.203H3.76037C2.24885 41.203 1.03226 39.9864 1.03226 38.4749V9.68224C1.03226 8.17072 2.24885 6.95413 3.76037 6.95413H44.2396C45.7512 6.95413 46.9677 8.17072 46.9677 9.68224V38.4749Z"/>
+<path d="M42.3225 18.2354H31.8893L31.1151 17.2031C31.0045 17.0557 30.857 16.9819 30.7096 16.9819H17.3639C17.2165 16.9819 17.069 17.0557 16.9584 17.1663L16.1105 18.1985H5.67731C4.60818 18.1985 3.72339 19.0833 3.72339 20.1524V31.7653C3.72339 32.8345 4.60818 33.7193 5.67731 33.7193H42.2856C43.3547 33.7193 44.2395 32.8345 44.2395 31.7653V20.1524C44.2395 19.0833 43.3547 18.1985 42.2856 18.1985L42.3225 18.2354ZM43.2441 31.8391C43.2441 32.3552 42.8386 32.7607 42.3225 32.7607H5.67731C5.16118 32.7607 4.75565 32.3552 4.75565 31.8391V20.2262C4.75565 19.71 5.16118 19.3045 5.67731 19.3045H16.3686C16.516 19.3045 16.6635 19.2308 16.7741 19.1202L17.622 18.0879H30.4515L31.2257 19.1202C31.3363 19.2676 31.4838 19.3414 31.6312 19.3414H42.3225C42.8386 19.3414 43.2441 19.7469 43.2441 20.263V31.8759V31.8391Z"/>
+</svg>

package/dist/collection/components/icon/device/minion-mk1d.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M12.4494 0C12.0899 0 11.8202 0.269663 11.8202 0.629213V42.9663C11.8202 45.7079 14.0674 48 16.8539 48H31.5056C34.2472 48 36.5393 45.7528 36.5393 42.9663V0.629213C36.5393 0.269663 36.2696 0 35.9101 0H12.4494ZM31.5505 1.30337V4.58427H16.764V1.30337H31.5505ZM16.8539 46.6966C14.7865 46.6966 13.1236 45.0337 13.1236 42.9663V1.30337H15.5056V43.0562C15.5056 44.4944 16.1348 45.7978 17.1236 46.6966H16.8539ZM20.4045 46.6966C18.382 46.6966 16.764 45.0787 16.764 43.0562V5.8427H31.5505V43.0562C31.5505 45.0787 29.9325 46.6966 27.9101 46.6966H20.4045ZM35.191 42.9663C35.191 45.0337 33.5281 46.6966 31.4606 46.6966H31.191C32.1797 45.7978 32.809 44.4944 32.809 43.0562V1.30337H35.191V42.9663Z"/>
+<path d="M24.1349 18.9673C21.3484 18.9673 19.1012 21.2145 19.1012 24.001C19.1012 26.7875 21.3484 29.0347 24.1349 29.0347C26.9214 29.0347 29.1686 26.7875 29.1686 24.001C29.1686 21.2145 26.9214 18.9673 24.1349 18.9673ZM24.1349 27.7313C22.0675 27.7313 20.4046 26.0684 20.4046 24.001C20.4046 21.9336 22.0675 20.2707 24.1349 20.2707C26.2023 20.2707 27.8652 21.9336 27.8652 24.001C27.8652 26.0684 26.2023 27.7313 24.1349 27.7313Z"/>
+</svg>

package/dist/collection/components/icon/device/p2-integrated.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M27.2032 26.2479H30.3434C31.2126 26.2479 31.9416 25.5707 31.9416 24.7039V21.67C31.9416 20.8303 31.2406 20.126 30.3434 20.126H27.2032C26.3341 20.126 25.6051 20.8032 25.6051 21.67V24.7039C25.6051 25.5436 26.306 26.2479 27.2032 26.2479Z"/>
+<path d="M17.5863 26.2479H20.7265C21.5956 26.2479 22.3246 25.5707 22.3246 24.7039V21.67C22.3246 20.8303 21.6237 20.126 20.7265 20.126H17.5863C16.7171 20.126 15.9882 20.8032 15.9882 21.67V24.7039C15.9882 25.5436 16.6891 26.2479 17.5863 26.2479Z"/>
+<path d="M15.2032 1.05643H32.7827C33.9322 1.05643 34.8855 1.97743 34.8855 3.08804V15.7381H13.1004V3.08804C13.1004 1.97743 14.0537 1.05643 15.2032 1.05643ZM32.7827 46.9436H15.2032C14.0537 46.9436 13.1004 46.0226 13.1004 44.912V32.614H34.8855V44.912C34.8855 46.0226 33.9322 46.9436 32.7827 46.9436ZM34.8855 31.5305H13.1004V16.7946H34.8855V31.5305ZM15.2032 48H32.7827C34.549 48 35.9789 46.6185 35.9789 44.912V32.2077C35.9789 32.1535 35.9789 32.1264 35.9789 32.0722C35.9789 32.0181 35.9789 31.991 35.9789 31.9368V16.4153C35.9789 16.3612 35.9789 16.3341 35.9789 16.2799C35.9789 16.2257 35.9789 16.1986 35.9789 16.1445V3.08804C35.9789 1.38149 34.549 0 32.7827 0H15.2032C13.4369 0 12.007 1.38149 12.007 3.08804V44.8849C12.007 46.5914 13.4369 47.9729 15.2032 47.9729V48Z"/>
+<path d="M32.4462 42.2846C32.5584 42.3929 32.6985 42.4471 32.8387 42.4471C32.9789 42.4471 33.1191 42.3929 33.2313 42.2846C33.4556 42.0679 33.4556 41.7428 33.2313 41.5261L25.6612 34.2123C25.4369 33.9956 25.1004 33.9956 24.8761 34.2123C24.6518 34.429 24.6518 34.7541 24.8761 34.9708L32.4462 42.2846Z"/>
+<path d="M32.4463 38.3297C32.5584 38.4381 32.6986 38.4922 32.8388 38.4922C32.979 38.4922 33.1192 38.4381 33.2313 38.3297C33.4556 38.113 33.4556 37.788 33.2313 37.5712L29.7547 34.2123C29.5304 33.9956 29.1939 33.9956 28.9696 34.2123C28.7453 34.429 28.7453 34.7541 28.9696 34.9708L32.4463 38.3297Z"/>
+</svg>

package/dist/collection/components/icon/device/p2-solo.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M13.4662 46.7049C12.2747 46.7049 11.2998 45.7336 11.2998 44.5464V28.9241H36.7273V44.5464C36.7273 45.7336 35.7524 46.7049 34.5609 46.7049H13.4662ZM13.4662 1.26813H34.5339C35.7253 1.26813 36.7002 2.23946 36.7002 3.42664V8.63406H11.2998V3.45363C11.2998 2.26644 12.2747 1.29511 13.4662 1.29511V1.26813ZM11.2998 9.92917H36.7273V27.629H11.2998V9.92917ZM34.5339 0H13.4662C11.5435 0 10 1.53794 10 3.45363V44.5464C10 46.4351 11.5435 48 13.4662 48H34.5339C36.4294 48 38 46.4621 38 44.5464V3.45363C38 1.56492 36.4565 0 34.5339 0Z"/>
+<path d="M20.209 16.1886H16.5533C15.5243 16.1886 14.6848 17.025 14.6848 18.0503V21.6928C14.6848 22.7181 15.5243 23.5545 16.5533 23.5545H20.209C21.238 23.5545 22.0775 22.7181 22.0775 21.6928V18.0503C22.0775 17.025 21.238 16.1886 20.209 16.1886Z"/>
+<path d="M31.4197 16.1886H27.764C26.735 16.1886 25.8955 17.025 25.8955 18.0503V21.6928C25.8955 22.7181 26.735 23.5545 27.764 23.5545H31.4197C32.4487 23.5545 33.2882 22.7181 33.2882 21.6928V18.0503C33.2882 17.025 32.4487 16.1886 31.4197 16.1886Z"/>
+</svg>

package/dist/collection/components/icon/device/p24.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M32.2748 26.21H2.53252C1.11902 26.21 0 27.3584 0 28.7425V36.1044C0 37.4885 1.14847 38.637 2.53252 38.637H32.2748C33.6883 38.637 34.8074 37.4885 34.8074 36.1044V28.7425C34.8074 27.3584 33.6589 26.21 32.2748 26.21ZM32.2748 37.9008H2.53252C1.53129 37.9008 0.736196 37.1057 0.736196 36.1044V31.5106C0.736196 31.5106 0.736196 31.5106 0.736196 31.4811C0.736196 30.7744 1.00123 29.9498 2.32638 29.9498H32.5988C33.4233 29.9498 34.0712 30.6271 34.0712 31.4811C34.0712 32.3351 34.0712 31.4811 34.0712 31.5106V36.1044C34.0712 37.1057 33.2761 37.9008 32.2748 37.9008ZM34.1006 29.7731C33.7178 29.4198 33.1877 29.2136 32.6282 29.2136H2.32638C1.67853 29.2136 1.11902 29.3903 0.736196 29.7143V28.7425C0.736196 27.7412 1.53129 26.9462 2.53252 26.9462H32.2748C33.2761 26.9462 34.0712 27.7412 34.0712 28.7425V29.7731H34.1006Z"/>
+<path d="M45.4674 9.77783H39.1656C37.7815 9.77783 36.6331 10.9263 36.6331 12.3103V36.1337C36.6331 37.5472 37.7815 38.6662 39.1656 38.6662H45.4674C46.8515 38.6662 47.9999 37.5177 47.9999 36.1337V12.3103C47.9999 10.8969 46.8515 9.77783 45.4674 9.77783ZM47.2637 36.1631C47.2637 37.1643 46.4686 37.9594 45.4674 37.9594H39.1656C38.1643 37.9594 37.3693 37.1643 37.3693 36.1631V12.3103C37.3693 11.3091 38.1643 10.514 39.1656 10.514H45.4674C46.4686 10.514 47.2637 11.3091 47.2637 12.3103V36.1631Z"/>
+<path d="M17.4036 31.8638C16.2846 31.8638 15.3423 32.7767 15.3423 33.8957C15.3423 35.0147 16.2552 35.9276 17.4036 35.9276C18.5521 35.9276 19.465 35.0147 19.465 33.8957C19.465 32.7767 18.5521 31.8638 17.4036 31.8638ZM17.4036 35.3681C16.6085 35.3681 15.9312 34.7202 15.9312 33.8957C15.9312 33.0711 16.5791 32.4233 17.4036 32.4233C18.2282 32.4233 18.876 33.0711 18.876 33.8957C18.876 34.7202 18.2282 35.3681 17.4036 35.3681Z"/>
+<path d="M42.346 22.2046C41.227 22.2046 40.2847 23.1175 40.2847 24.2365C40.2847 25.3555 41.1975 26.2684 42.346 26.2684C43.4945 26.2684 44.4074 25.3555 44.4074 24.2365C44.4074 23.1175 43.4945 22.2046 42.346 22.2046ZM42.346 25.7089C41.5509 25.7089 40.8736 25.061 40.8736 24.2365C40.8736 23.412 41.5215 22.7641 42.346 22.7641C43.1706 22.7641 43.8184 23.412 43.8184 24.2365C43.8184 25.061 43.1706 25.7089 42.346 25.7089Z"/>
+</svg>

package/dist/collection/components/icon/device/q.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48">
+<path d="M30.1253 36.4284L27.7657 32.9698C26.7313 33.4224 25.5354 33.6486 24.1778 33.6486C18.198 33.6486 15.3212 28.8648 15.3212 23.984C15.3212 19.1032 18.198 14.3516 24.1778 14.3516C30.1576 14.3516 33.002 19.1032 33.002 23.984C33.002 28.8648 31.6768 30.5779 28.9616 32.3234L31.7737 36.4284H30.1253ZM16.8404 23.984C16.8404 28.2183 19.1677 32.2587 24.1778 32.2587C29.1879 32.2587 26.1495 32.0648 26.9576 31.7739L23.1434 26.1496H24.7919L28.1859 31.1274C30.4485 29.6405 31.5152 26.8607 31.5152 23.984C31.5152 19.7496 29.1879 15.7092 24.1778 15.7092C19.1677 15.7092 16.8404 19.7173 16.8404 23.984Z"/>
+<path d="M31.903 9.01833C40.1778 9.01833 46.9333 15.7739 46.9333 24.0486C46.9333 32.3234 40.1778 39.0789 31.903 39.0789H16.097C7.82222 39.0789 1.06667 32.3234 1.06667 24.0486C1.06667 15.7739 7.7899 9.01833 16.097 9.01833H31.903ZM31.903 7.95166H16.097C7.20808 7.95166 0 15.1597 0 24.0486C0 32.9375 7.20808 40.1456 16.097 40.1456H31.903C40.7919 40.1456 48 32.9375 48 24.0486C48 15.1597 40.7919 7.95166 31.903 7.95166Z"/>
+</svg>

package/dist/collection/components/icon/icon.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,26 +26,29 @@
 [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 --color: defaults to current context color
-  * @prop --primary-color: used for duotone icons to set the primary color
-  * @prop --secondary-color: used for duotone icons to set the secondary color
-  * @prop --primary-opacity: used for duotone icons to set the primary opacity
-  * @prop --secondary-opacity: used for duotone icons to set the secondary opacity
-  * @prop --stroke-width: 32px default stroke width
-  */
-  --color: var(--nano-color-base, currentcolor);
-  --primary-color: var(--nano-color-tint, currentcolor);
-  --secondary-color: var(--nano-color-shade, currentcolor);
-  --stroke-width: 32px;
+   * @prop --icon-size: the size of the icon. Defaults to 1em;
+   * @prop --primary-color: used for duotone icons to set the primary color
+   * @prop --secondary-color: used for duotone icons to set the secondary color
+   * @prop --primary-opacity: used for duotone icons to set the primary opacity
+   * @prop --secondary-opacity: used for duotone icons to set the secondary opacity
+   */
+  --icon-size: 1em;
+  --primary-color: currentcolor
+  --secondary-color: color-mix(in srgb, currentColor 50%, transparent);
   --primary-opacity: 0.8;
   --secondary-opacity: 1;
-  --icon-size: var(--nano-icon-size, 1em);
-  --icon-margin-top: var(--nano-icon-margin-top, 0);
-  --icon-margin-end: var(--nano-icon-margin-end, 0);
-  --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);
-  --icon-margin-start: var(--nano-icon-margin-start, 0);
   display: inline-block;
   inline-size: var(--icon-size);
   block-size: var(--icon-size);
@@ -51,9 +58,7 @@
   fill: currentcolor;
   box-sizing: content-box !important;
   transition: opacity 0.3s ease;
-  color: var(--color);
-  margin-inline: var(--icon-margin-start) var(--icon-margin-end);
-  margin-block: var(--icon-margin-top) var(--icon-margin-bottom);
+  color: currentcolor;
 }
 
 :host .nanoicon {
@@ -64,11 +69,6 @@
   fill: none;
 }
 
-.nanoicon-stroke-width {
-  stroke-width: 32px;
-  stroke-width: var(--stroke-width);
-}
-
 .icon-inner,
 .nanoicon,
 svg,
@@ -103,10 +103,49 @@ svg,
 /* Icon Sizes
  * -----------------------------------------------------------
  */
-:host(.icon-small) {
-  font-size: 18px !important;
+:host([name^=pictogram]),
+:host([name^=device]) {
+  font-size: max(var(--nano-pictogram-size-medium), var(--icon-size));
+}
+
+:host([size=small][name^=pictogram]),
+:host([size=small][name^=device]) {
+  font-size: var(--nano-pictogram-size-small);
+}
+
+:host([size=regular]) {
+  font-size: var(--nano-icon-size-small);
+}
+
+:host([size=regular][name^=pictogram]),
+:host([size=regular][name^=device]) {
+  font-size: var(--nano-pictogram-size-medium);
+}
+
+:host([size=large]) {
+  font-size: var(--nano-icon-size-large);
+}
+
+:host([size=large][name^=pictogram]),
+:host([size=large][name^=device]) {
+  font-size: var(--nano-pictogram-size-large);
+}
+
+:host([size=xl][name^=pictogram]),
+:host([size=xl][name^=device]) {
+  font-size: var(--nano-pictogram-size-x-large);
+}
+
+/*
+ * Icon, predefined colours
+ * -----------------------------------------------------------
+ */
+:host([name^=pictogram]),
+:host([name^=device]),
+:host([color=primary]) {
+  color: var(--nano-color-primary-1100);
 }
 
-:host(.icon-large) {
-  font-size: 32px !important;
+:host([color=neutral]) {
+  color: var(--nano-color-base-1000);
 }