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

package/dist/collection/components/split-pane/split-pane.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,22 +26,31 @@
 [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 --divider-width: The width of the visible divider. Default 4px.
-  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is
-  *  usually wider than the divider to facilitate easier dragging. Default 12px.
-  * @prop --min: The minimum allowed size of the primary panel. Default 0.
-  * @prop --max: The maximum allowed size of the primary panel. Default 100%.
-  * @prop --background-color: Handle background. Default #e4e6e8.
-  * @prop --content-color: Handle color. Default #918b86.
+  * @prop --divider-hit-area: The width of the hit area for the divider. Default 14px.
+  * @prop --min: The minimum size of the split pane. Default 0%.
+  * @prop --max: The maximum size of the split pane. Default 100%.
+  * @prop --background-color: The background color of the divider. Default var(--nano-color-neutral-300).
+  * @prop --content-color: The text color of the divider. Default var(--nano-color-neutral-1000).
   */
-  --divider-width: 12px;
+  --divider-width: 4px;
   --divider-hit-area: 14px;
   --min: 0%;
   --max: 100%;
-  --background-color: #e4e6e8;
-  --content-color: #918b86;
+  --background-color: var(--nano-color-neutral-300);
+  --content-color: var(--nano-color-neutral-1000);
   display: grid;
 }
 
@@ -63,7 +76,7 @@
 }
 
 :host(:not([disabled])) .divider:focus-visible {
-  background-color: var(--nano-control-focus-color, rgba(144, 198, 231, 0.8));
+  background-color: var(--nano-focus-ring-color);
 }
 
 :host([disabled]) .divider {
@@ -71,7 +84,7 @@
 }
 
 /* Horizontal */
-:host(:not([vertical]):not([disabled])) .divider {
+:host(:not([vertical], [disabled])) .divider {
   cursor: col-resize;
 }
 

package/dist/collection/components/split-pane/split-pane.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";
@@ -9,6 +9,9 @@ import { debounce } from "../../utils/throttle";
 /**
  * Split panes display two adjacent panels, allowing the user to reposition them.
  *
+ * @version 2.0.0
+ * @status stable
+ *
  * @part start - The start panel.
  * @part end - The end panel.
  * @part panel - Targets both the start and end panels.
@@ -291,7 +294,7 @@ export class SplitPane {
         else {
             styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
         }
-        return (h(Host, { style: styles, class: "nano-split-pane" }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
+        return (h(Host, { style: styles, class: "nano-split-pane" }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-dots" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-dots-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
     }
     static get is() { return "nano-split-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -309,6 +312,7 @@ export class SplitPane {
         return {
             "position": {
                 "type": "number",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -323,11 +327,11 @@ export class SplitPane {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "position",
                 "reflect": false
             },
             "positionInPixels": {
                 "type": "number",
+                "attribute": "position-in-pixels",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -342,11 +346,11 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position-in-pixels",
                 "reflect": false
             },
             "vertical": {
                 "type": "boolean",
+                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -361,12 +365,12 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "vertical",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -381,12 +385,12 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "primary": {
                 "type": "string",
+                "attribute": "primary",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end'",
@@ -401,11 +405,11 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "primary",
                 "reflect": false
             },
             "snap": {
                 "type": "string",
+                "attribute": "snap",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -420,11 +424,11 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "snap",
                 "reflect": false
             },
             "snapThreshold": {
                 "type": "number",
+                "attribute": "snap-threshold",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -439,12 +443,12 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "snap-threshold",
                 "reflect": false,
                 "defaultValue": "12"
             },
             "animationDuration": {
                 "type": "number",
+                "attribute": "animation-duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -459,7 +463,6 @@ export class SplitPane {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animation-duration",
                 "reflect": false,
                 "defaultValue": "0.6"
             }
@@ -567,4 +570,3 @@ export class SplitPane {
             }];
     }
 }
-//# sourceMappingURL=split-pane.js.map

package/dist/collection/components/sticker/sticker.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 --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial
   * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial

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

@@ -1,10 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { getOffset } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
-import { findScrollParent } from "../../utils/scroll-parent";
+import { findScrollParent } from "../../utils/scroll";
 import { transformTag, h } from "../../utils/renderer";
 function _getScrollTop(ele) {
     return ele instanceof Document ? window.pageYOffset : ele.scrollTop;
@@ -581,9 +581,6 @@ export class Sticker {
         this.isRtl =
             this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
         // this is all horrible.... shrug
-        document.documentElement.addEventListener('nanoComponentsReady', () => {
-            setTimeout((_) => this.bootstrapGurantor(), 200);
-        });
         setTimeout((_) => {
             if (!this.hasBootstrapped)
                 this.bootstrapGurantor();
@@ -602,12 +599,12 @@ export class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'b282e10cddb66120a13fcade77d1f2b554a20579', 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: '33b8b8a569e522809bc9dd8efba10282728117a8', class: {
+        return (h(Host, { key: '684a30435688dd24ba583b9ad18f262b00863220', 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: '1a27a9545b9e00e492efc809ef10ac291f13f421', 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: 'bc0584d28222ecaa8c362817ef3a71f618fe4796', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '12f6f6dca5d58ccdc446aee97cd5bee39f3c322e' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '323a9081a4b7aec17c6bcc0cc85558fa54fa5253', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '9fc54c6354a8de64bebbaa54881fa4b21f116ba5' })))));
     }
     static get is() { return "nano-sticker"; }
     static get encapsulation() { return "shadow"; }
@@ -625,6 +622,7 @@ export class Sticker {
         return {
             "autoResize": {
                 "type": "boolean",
+                "attribute": "auto-resize",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -639,12 +637,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-resize",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "isSticky": {
                 "type": "boolean",
+                "attribute": "is-sticky",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -659,12 +657,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-sticky",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "offset": {
                 "type": "number",
+                "attribute": "offset",
                 "mutable": true,
                 "complexType": {
                     "original": "number | { v: number; h: number }",
@@ -679,12 +677,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -699,12 +697,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'top'"
             },
             "quietMode": {
                 "type": "string",
+                "attribute": "quiet-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off' | { h: number; w: number }",
@@ -719,12 +717,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "quiet-mode",
                 "reflect": false,
                 "defaultValue": "{\n    h: 600,\n    w: 600,\n  }"
             },
             "hideOnNewStickers": {
                 "type": "boolean",
+                "attribute": "hide-on-new-stickers",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -739,12 +737,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-new-stickers",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "breakPointMax": {
                 "type": "number",
+                "attribute": "break-point-max",
                 "mutable": false,
                 "complexType": {
                     "original": "null | number",
@@ -759,12 +757,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "break-point-max",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "breakPointMin": {
                 "type": "number",
+                "attribute": "break-point-min",
                 "mutable": false,
                 "complexType": {
                     "original": "null | number",
@@ -779,12 +777,12 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "break-point-min",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "scrollParent": {
                 "type": "unknown",
+                "attribute": "scroll-parent",
                 "mutable": true,
                 "complexType": {
                     "original": "HTMLElement | Document",
@@ -811,6 +809,7 @@ export class Sticker {
             },
             "stickTo": {
                 "type": "string",
+                "attribute": "stick-to",
                 "mutable": false,
                 "complexType": {
                     "original": "string | HTMLNanoStickerElement",
@@ -830,7 +829,6 @@ export class Sticker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stick-to",
                 "reflect": false
             }
         };
@@ -1115,4 +1113,3 @@ export class Sticker {
             }];
     }
 }
-//# sourceMappingURL=sticker.js.map