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

package/dist/collection/components/option/option.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,39 +26,52 @@
 [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 --padding-top: Defaults to var(--nano-spacing-small, 8px);
-   * @prop --padding-bottom: Defaults to var(--nano-spacing-small, 8px);
-   * @prop --padding-start: Defaults to var(--nano-spacing-small, 8px);
-   * @prop --padding-end: Defaults to var(--nano-spacing-small, 8px);
-
-   * @prop --bg: default background. Defaults to none;
-   * @prop --bg-selected: background when selected. Defaults to var(--nano-select-opt-bg, #f2f7f9);
-   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, nano-color(primary, tint));
-   * @prop --bg-disabled: background when disabled. Defaults to none;
+   * @prop --bg: default background color. Defaults to none;
+   * @prop --bg-selected: background color when selected. Defaults to var(--nano-color-blue-cerulean-1000);
+   * @prop --bg-focus: background color when focused. Defaults to var(--nano-color-primary-300);
+   * @prop --bg-disabled: background color when disabled. Defaults to none;
+   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
+   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
+   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
+   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);
+   * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;
 
-   * @prop --color: default text color. Defaults to var(--input-text-color, var(--nano-input-text-color, #4a4a4a));
-   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, nano-color(primary, base));
-   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, nano-color(primary, contrast));
-   * @prop --color-disabled: text color when disabled. Defaults to #b5aea7;
+   * @prop --color: default text color. Defaults to var(--nano-color-base-1000);
+   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-basic-white);
+   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base-1000);
+   * @prop --color-disabled: text color when disabled. Defaults to var(--nano-color-neutral-300);
 
-    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;
-  */
+   * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1em;
+   */
   --bg: none;
-  --bg-selected: var(--nano-select-opt-bg, #f2f7f9);
-  --bg-focus: var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));
+  --bg-selected: none;
+  --bg-focus: var(--nano-color-blue-cerulean-1000);
   --bg-disabled: none;
-  --color: var(--input-text-color, var(--nano-input-text-color, #4a4a4a));
-  --color-selected: var(--nano-color-base, var(--nano-color-primary, #007495));
-  --color-focus: var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));
-  --color-disabled: #b5aea7;
-  --opt-icon-size: 1.6em;
+  --color: var(--nano-color-base-1000);
+  --color-selected: var(--nano-color-base-1000);
+  --color-focus: var(--nano-color-base-0);
+  --color-disabled: var(--nano-color-neutral-300);
+  --opt-icon-size: 1em;
+  --padding-start: var(--nano-spacing-sm);
+  --padding-end: var(--nano-spacing-md);
+  --padding-bottom: 6px;
+  --padding-top: 6px;
   display: block;
   color: var(--color);
   overflow: hidden;
-  font-size: 14px;
-  font-size: clamp(12px, .9em, 16px);
+  font-size: var(--nano-font-size-xs);
 }
 
 :host(:focus) {
@@ -62,6 +79,8 @@
 }
 
 .option {
+  color: inherit;
+  text-decoration: none;
   position: relative;
   -webkit-user-select: none;
           user-select: none;
@@ -106,7 +125,7 @@
   font-size: var(--opt-icon-size);
 }
 .option__start ::slotted(:last-child) {
-  margin-inline-end: 0.5em;
+  margin-inline-end: var(--padding-end);
 }
 .option__end {
   flex: 0 0 auto;
@@ -117,16 +136,15 @@
   font-size: var(--opt-icon-size);
 }
 .option__end ::slotted(:first-child) {
-  margin-inline-start: 0.5em;
+  margin-inline-start: var(--padding-start);
 }
 .option__check {
   visibility: hidden;
   display: flex;
-  position: absolute;
-  inset-inline-start: 0.6em;
-  inset-block-start: calc(50% - 0.6em);
+  margin-inline-end: var(--padding-start);
   align-items: center;
-  font-size: 0.9em;
+  font-size: var(--nano-font-size-2xs);
+  inline-size: var(--nano-font-size-2xs);
 }
 .option--selected:not(.option--novalue) .option__check {
   visibility: visible;

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

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -17,7 +17,6 @@ let optIds = 0;
 export class Option {
     optId = `nano-option-${optIds++}`;
     host;
-    hasFocus = false;
     constructor() {
         this.handleClick = debounce(this.handleClick.bind(this), 5);
     }
@@ -50,18 +49,20 @@ export class Option {
      * search / filter via extra related terms. Another usecase is 'endonyms'
      */
     filterMeta = '';
+    /** Setting an href will render an `<a>` element */
+    href;
     /** Fired when an option is selected */
     nanoSelect;
     // Event handlers
-    // stop scrolling on select
     handleKeyDown(e) {
-        if (e.key !== ' ' && e.key !== 'Enter')
+        if ((e.key !== ' ' && e.key !== 'Enter') || this.href)
             return;
+        // stop scrolling on select
         e.preventDefault();
         this.nanoSelect.emit(this.host);
     }
     handleClick() {
-        if (this.disabled)
+        if (this.disabled || this.href)
             return;
         this.nanoSelect.emit(this.host);
     }
@@ -78,12 +79,13 @@ export class Option {
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
+        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: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
+            } }, 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" })))));
     }
     static get is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }
@@ -101,6 +103,7 @@ export class Option {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -115,12 +118,12 @@ export class Option {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -135,12 +138,12 @@ export class Option {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -155,12 +158,12 @@ export class Option {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -175,12 +178,12 @@ export class Option {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "filterMeta": {
                 "type": "string",
+                "attribute": "filter-meta",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -195,17 +198,30 @@ export class Option {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-meta",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Setting an href will render an `<a>` element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "hasFocus": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "nanoSelect",
@@ -249,4 +265,3 @@ export class Option {
             }];
     }
 }
-//# sourceMappingURL=option.js.map

package/dist/collection/components/progress-bar/progress-bar.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;
 }
-/**
+@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;
+    }
+  }/**
  * @prop --height: The progress bar's height. Default 1em
  * @prop --track-color: The track color. Default rgb(var(--nano-track-rgb, 228 230 232) / 100%);
  * @prop --indicator-color: The indicator color. Default rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);

package/dist/collection/components/progress-bar/progress-bar.js

@@ -1,10 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host } from "@stencil/core";
 import { h } from "../../utils/renderer";
 /**
- * Used to show the status of an ongoing operation.
+ * Shows the status of an ongoing operation.
+ *
+ * @version 3.0.0
+ * @status stable
  *
  * @slot - A label to show inside the indicator.
  *
@@ -21,12 +24,12 @@ export class ProgressBar {
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (h(Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
+        return (h(Host, { key: '2d33cb1a93d9b155cef4ea64b1a36a275104ed5c', class: "nano-progress-bar" }, h("div", { key: '1477b01e971f00541af5501df4f42c2d69cb87d4', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            } }, h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
             ? `${this.value}%`
             : ''))))));
     }
@@ -46,6 +49,7 @@ export class ProgressBar {
         return {
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -60,12 +64,12 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -80,12 +84,12 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showPercent": {
                 "type": "boolean",
+                "attribute": "show-percent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -100,7 +104,6 @@ export class ProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-percent",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -108,4 +111,3 @@ export class ProgressBar {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=progress-bar.js.map

package/dist/collection/components/range/range.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 --knob-handle-size: defaults to calc(var(--knob-size) * 2);
    * @prop --rgb-inactive: defaults to 165 165 165;