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

package/dist/collection/assets/img/flags/ja.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480" class="link-toggler">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".67" d="M-88.001 32h640v480h-640z"/>
+    </clipPath>
+  </defs>
+  <g fill-rule="evenodd" clip-path="url(#a)" transform="translate(88.001 -32)" stroke-width="1pt">
+    <path fill="#fff" d="M-128 32h720v480h-720z"/>
+    <ellipse rx="194.93" ry="194.93" transform="translate(-168.44 8.618) scale(.76554)" cy="344.05" cx="523.08" fill="#d30000"/>
+  </g>
+</svg>

package/dist/collection/assets/img/flags/zh.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 180" style="enable-background:new 0 0 240 180;" xml:space="preserve" class="link-toggler">
+<style type="text/css">
+	.st0{fill:#CB2127;}
+	.st1{fill:#F7DE28;}
+</style>
+<rect id="XMLID_7_" x="0.5" class="st0" width="239.5" height="180"/>
+<polygon id="XMLID_6_" class="st1" points="26.2,66.9 31.3,51.4 18,41.7 34.4,41.6 39.5,26.1 44.6,41.6 60.9,41.7 47.7,51.4   52.7,66.9 39.5,57.3 "/>
+<polygon id="XMLID_5_" class="st1" points="71.9,75.3 77.4,77.5 81.2,73 80.8,78.9 86.3,81.2 80.5,82.7 80.1,88.6 76.9,83.5   71.2,85 75,80.4 "/>
+<polygon id="XMLID_4_" class="st1" points="101.7,45.4 95.9,44.4 93.1,49.6 92.2,43.7 86.4,42.7 91.7,40.1 90.9,34.2 95.1,38.5   100.4,35.8 97.6,41.1 "/>
+<polygon id="XMLID_3_" class="st1" points="89.3,72.1 91.1,66.4 86.3,62.9 92.3,62.9 94.1,57.2 95.9,62.9 101.9,62.9 97.1,66.4   98.9,72.1 94.1,68.6 "/>
+<polygon id="XMLID_2_" class="st1" points="72.1,20.4 77.6,22.8 81.6,18.5 80.9,24.4 86.3,27 80.4,28.1 79.7,34 76.8,28.8 71,29.9   75,25.5 "/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -1,6 +1,8 @@
 {
   "entries": [
+    "components/breadcrumb/breadcrumb.js",
     "components/dropdown/dropdown.js",
+    "components/date-picker/date-picker.js",
     "components/accordion/accordion.js",
     "components/alert/alert.js",
     "components/algolia/algolia-filter.js",
@@ -8,13 +10,20 @@
     "components/algolia/algolia-results.js",
     "components/algolia/algolia.js",
     "components/animation/animation.js",
+    "components/avatar/avatar.js",
+    "components/badge/badge.js",
+    "components/card/card.js",
+    "components/card-carousel/card-carousel.js",
     "components/checkbox/checkbox-group.js",
     "components/checkbox/checkbox.js",
+    "components/collapsible-comparison/collapsible-comparison.js",
+    "components/content-links/content-links.js",
+    "components/cta/cta.js",
+    "components/data-table/table.js",
     "components/datalist/datalist.js",
     "components/menu/menu.js",
     "components/option/option.js",
     "components/date-input/date-input.js",
-    "components/date-picker/date-picker.js",
     "components/input/input.js",
     "components/details/details.js",
     "components/dialog/dialog.js",
@@ -22,7 +31,7 @@
     "components/nav-item/nav-item.js",
     "components/field-validator/field-validator.js",
     "components/file-upload/file-upload.js",
-    "components/global-nav/global-nav-user-profile.js",
+    "components/footer/footer.js",
     "components/global-nav/global-nav.js",
     "components/global-search-results/global-search-results.js",
     "components/grid/grid-item.js",
@@ -30,11 +39,13 @@
     "components/hero/hero.js",
     "components/icon/icon.js",
     "components/icon-button/icon-button.js",
+    "components/icon-item/icon-item.js",
     "components/img/img.js",
+    "components/in-page-nav/in-page-nav.js",
     "components/intersection-observe/intersection-observe.js",
+    "components/masked-overflow/masked-overflow.js",
     "components/menu-drawer/menu-drawer.js",
     "components/more-less/more-less.js",
-    "components/overflow-nav/overflow-nav.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
     "components/rating/rating.js",
@@ -51,11 +62,12 @@
     "components/tabs/tab-content.js",
     "components/tabs/tab-group.js",
     "components/tabs/tab.js",
+    "components/tag/tag.js",
     "components/tooltip/tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.27.2",
+    "version": "4.35.1-dev.1750418634.dcb189d",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/accordion/accordion.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,6 +26,16 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  display: block;
+@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 {
+  display: contents;
 }

package/dist/collection/components/accordion/accordion.js

@@ -1,25 +1,19 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { Host, } from "@stencil/core";
 import { h, transformTag } from "../../utils/renderer";
 import { getDirectChildren } from "../../utils/dom";
-import { createColorClasses } from "../../utils/theme";
 /**
- * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
+ * Groups multiple details elements together, allowing only one to be open at a time.
+ *
+ * @version 1.0
+ * @status stable
  */
-export class Accordion {
+export class NanoAccordion {
     itemOpened;
     el;
-    /**
-     * Fires when accordion elements toggle
-     */
+    /** Fires when accordion elements toggle */
     nanoToggle;
-    /**
-     * Color to use from the color palette.
-     */
-    color;
     onToggleHandler(event) {
+        if (event.target?.tagName !== 'NANO-DETAILS')
+            return;
         event.stopPropagation();
         const items = getDirectChildren(this.el, transformTag('nano-details')) ||
             this.el.querySelectorAll(transformTag('nano-details'));
@@ -29,7 +23,7 @@ export class Accordion {
             else
                 this.itemOpened = i;
         });
-        this.nanoToggle.emit();
+        this.nanoToggle.emit(event.target);
     }
     onClosedHandler(event) {
         event.stopPropagation();
@@ -37,11 +31,7 @@ export class Accordion {
         this.nanoToggle.emit();
     }
     render() {
-        return (h(Host, { key: '60b444ced7959370455b575616c5e0cfe45ae85d', class: {
-                ...createColorClasses(this.color),
-                [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number',
-                'nano-accordion': true,
-            } }, h("slot", { key: '53cb7e62571e9bc8e88a958a4b1a62550c4d797c' })));
+        return h("slot", { key: 'ec9331ce0686c1234021e58af9a456aa267e9247' });
     }
     static get is() { return "nano-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -55,35 +45,6 @@ export class Accordion {
             "$": ["accordion.css"]
         };
     }
-    static get properties() {
-        return {
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Color to use from the color palette."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
-                "reflect": false
-            }
-        };
-    }
     static get states() {
         return {
             "itemOpened": {}
@@ -101,22 +62,27 @@ export class Accordion {
                     "text": "Fires when accordion elements toggle"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "HTMLNanoDetailsElement",
+                    "resolved": "HTMLNanoDetailsElement",
+                    "references": {
+                        "HTMLNanoDetailsElement": {
+                            "location": "global",
+                            "id": "global::HTMLNanoDetailsElement"
+                        }
+                    }
                 }
             }];
     }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "nanoOpened",
+                "name": "nanoOpen",
                 "method": "onToggleHandler",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "nanoClosed",
+                "name": "nanoClose",
                 "method": "onClosedHandler",
                 "target": undefined,
                 "capture": false,
@@ -124,4 +90,3 @@ export class Accordion {
             }];
     }
 }
-//# sourceMappingURL=accordion.js.map

package/dist/collection/components/alert/alert.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,42 +26,69 @@
 [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;
+    }
+  }/** Typography */
 :host {
   /**
-   * @prop --border-radius: defaults to var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-   * @prop --border-color: defaults to var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));
-   * @prop --border-width: defaults to var(--nano-layer-border-width, 1px);
-   * @prop --background: defaults to var(--nano-layer-bg, #fff);
-   * @prop --tint-color: defaults to var(--nano-color-base, nano-color(primary, base));
-   * @prop --icon-size: defaults to 1.5rem;
-   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
-   * @prop --close-button-color: defaults to #687576 ;
+   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);
+   * @prop --border-color: Defaults to var(--nano-layer-border-color);
+   * @prop --border-width: Defaults to var(--nano-layer-border-width);
+   * @prop --background: Defaults to var(--nano-layer-background-color);
+   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);
+   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);
+   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);
+   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);
    */
-  --border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-  --border-color: var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));
-  --border-width: var(--nano-layer-border-width, 1px);
-  --background: var(--nano-layer-bg, #fff);
-  --tint-color: var(--nano-color-base, var(--nano-color-primary, #007495));
-  --icon-size: 2rem;
-  --scrim-color: var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
-  --close-button-color: #b5aea7;
+  --border-radius: var(--nano-layer-border-radius);
+  --border-color: var(--nano-layer-border-color);
+  --border-width: var(--nano-layer-border-width);
+  --icon-size: var(--nano-pictogram-size-large);
+  --scrim-color: var(--nano-overlay-background-color);
+  --close-button-color: var(--nano-color-neutral-800);
+  --tint-color: var(--nano-color-primary-1100);
+  --background: var(--nano-color-primary-50);
   display: block;
+  container-type: inline-size;
+}
+
+:host([color=neutral]), :host([theme=neutral]) {
+  --tint-color: var(--nano-color-neutral-1200);
+  --background: var(--nano-color-neutral-75);
 }
 
-:host(.nano-color) {
-  --tint-color: var(--nano-color-base, var(--nano-color-primary, #007495));
+:host([color=success]), :host([theme=success]) {
+  --tint-color: var(--nano-color-success-1100);
+  --background: var(--nano-color-success-50);
+}
+
+:host([color=warning]), :host([theme=warning]) {
+  --tint-color: var(--nano-color-warning-1100);
+  --background: var(--nano-color-warning-75);
+}
+
+:host([color=danger]), :host([theme=danger]) {
+  --tint-color: var(--nano-color-danger-1100);
+  --background: var(--nano-color-danger-100);
 }
 
 .alert {
   position: relative;
   background-color: var(--background);
   border: solid var(--border-width) var(--border-color);
-  border-block-start-width: 4px;
-  border-block-start-color: var(--tint-color);
+  border-inline-start: solid 4px var(--tint-color);
   border-radius: var(--border-radius);
   opacity: 0;
   transform: scale(0.9);
-  transition: var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;
+  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;
 }
 .alert:focus {
   outline: none;
@@ -66,7 +97,6 @@
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
-  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   overflow: hidden;
   pointer-events: none;
@@ -77,8 +107,8 @@
   transform: none;
 }
 .alert--toasty, .alert--modal {
-  box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-  margin: var(--nano-spacing-medium, 16px);
+  box-shadow: var(--nano-shadow-l2);
+  margin: var(--nano-spacing-md);
 }
 .alert--modal.alert--nodismiss {
   animation: cannotClose 0.25s ease-in-out 1;
@@ -95,25 +125,43 @@
   }
 }
 
-.alert__content {
+.alert__main {
   display: flex;
   align-items: stretch;
 }
 
+.alert__content {
+  font-size: var(--nano-font-size-small);
+  line-height: var(--nano-line-height-normal);
+  letter-spacing: var(--nano-letter-spacing-loose);
+  flex: 1 1 auto;
+  padding: var(--nano-spacing-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--nano-spacing-sm);
+}
+
 .alert__modal-wrap {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   inset: 0;
-  z-index: var(--nano-layer-index-alert, 800);
+  z-index: var(--nano-z-index-alert);
 }
 
-.alert__message {
-  flex: 1 1 auto;
-  padding: var(--nano-spacing-medium, 16px);
-  overflow: hidden;
-  line-height: 1.6;
+.alert__heading {
+  font-size: var(--nano-font-size-small);
+  line-height: var(--nano-line-height-normal);
+  font-weight: var(--nano-font-weight-bold);
+  color: var(--tint-color);
+}
+
+.alert__title {
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-medium);
+  line-height: var(--nano-line-height-dense);
 }
 
 .alert__close {
@@ -122,31 +170,17 @@
   display: flex;
   align-items: center;
   font-size: 1.1em;
-  padding-inline: 0 var(--nano-spacing-medium, 16px);
+  padding-inline: 0 var(--nano-spacing-md);
   padding-block: 0;
 }
 
-.alert__footer {
-  padding: 0 var(--nano-spacing-small, 8px) 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-}
-.alert__footer ::slotted(*) {
-  flex: 1;
-  margin: 0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important;
-}
-
 .alert__overlay {
   position: fixed;
   inset: 0;
   background-color: var(--scrim-color);
   opacity: 0;
-  transition: var(--nano-transition-fast, 0.3s) opacity;
-  z-index: var(--nano-layer-index-alert, 800);
-  -webkit-backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
-          backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
+  transition: var(--nano-transition-fast) opacity;
+  z-index: var(--nano-z-index-alert);
   pointer-events: all;
 }
 .alert__overlay--open {
@@ -156,10 +190,45 @@
 .alert__icon {
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
+  align-items: start;
   font-size: var(--icon-size);
+  padding-block: var(--nano-spacing-md);
 }
 .alert__icon ::slotted(*), .alert__icon::slotted(*) {
   color: var(--tint-color);
-  margin-inline-start: var(--nano-spacing-medium, 16px);
+  margin-inline-start: var(--nano-spacing-md);
+}
+@container (width < 280px) {
+  .alert__icon {
+    display: none;
+  }
+}
+
+.alert__countdown {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 4px;
+  background-color: var(--nano-layer-border-color);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.alert__countdown .alert__countdown-elapsed {
+  block-size: 100%;
+  inline-size: 0;
+}
+
+.alert__timer {
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
+.alert__countdown-elapsed {
+  background-color: var(--tint-color);
 }

package/dist/collection/components/alert/alert.helpers.js

@@ -1,18 +1,26 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { transformTag } from "../../utils/renderer";
-const alertContent = (message, buttons = []) => {
+const alertContent = (message, buttons = [], alertTheme) => {
     return `${message}
     ${buttons.length
-        ? buttons
-            .map((btn, i) => `<button data-btn="${i}" class="button ${btn.classes}" slot="footer">${btn.content}</button>`)
-            .join('')
-        : ''}`;
+        ? `<nano-cta group="balanced" slot="footer">` +
+            buttons
+                .map((btn, i) => `<button 
+                  data-btn="${i}" 
+                  class="${btn.classes}"
+                  theme="${btn.theme || alertTheme}"
+                  secondary="${btn.secondary ? 'true' : 'false'}"
+                >${btn.content}</button>`)
+                .join('') +
+            `</nano-cta>`
+        : ''}
+  `;
 };
 const addBtnHandlers = (alert, buttons = []) => {
     if (buttons.length) {
-        Array.from(alert.querySelectorAll('button[slot="footer"]')).map((btn) => {
+        Array.from(alert.querySelectorAll('nano-cta[slot="footer"] button')).map((btn) => {
             const foundBtn = buttons.find((_fb, i) => btn.dataset.btn === i.toString());
             if (foundBtn && foundBtn.handler) {
                 btn.addEventListener('click', foundBtn.handler);
@@ -30,7 +38,7 @@ const addBtnHandlers = (alert, buttons = []) => {
  */
 export async function nanoShowToast(message, position = 'tr', icon, alertOptions, buttons = []) {
     const opts = {
-        color: 'primary',
+        theme: 'primary',
         duration: 3000,
         closable: true,
         ...alertOptions,
@@ -41,7 +49,7 @@ export async function nanoShowToast(message, position = 'tr', icon, alertOptions
         open: false,
         innerHTML: `
         <nano-icon name="${icon}" slot="icon"></nano-icon>
-        ${alertContent(message, buttons)}
+        ${alertContent(message, buttons, opts.theme)}
       `,
     });
     addBtnHandlers(alert, buttons);
@@ -64,7 +72,7 @@ export async function nanoShowToast(message, position = 'tr', icon, alertOptions
  */
 export function nanoShowAlert(message, buttons = [], label, icon = 'light/circle-info', alertOptions = {}) {
     const opts = {
-        color: 'primary',
+        theme: 'primary',
         duration: Infinity,
         closable: false,
         ...alertOptions,
@@ -75,7 +83,7 @@ export function nanoShowAlert(message, buttons = [], label, icon = 'light/circle
         open: false,
         innerHTML: `
         ${icon ? `<nano-icon name="${icon}" slot="icon"></nano-icon>` : ''}
-        ${alertContent(message, buttons)}
+        ${alertContent(message, buttons, opts.theme)}
       `,
     });
     addBtnHandlers(alert, buttons);
@@ -87,4 +95,3 @@ export function nanoShowAlert(message, buttons = [], label, icon = 'light/circle
         }, 100);
     });
 }
-//# sourceMappingURL=alert.helpers.js.map