@nanoporetech-digital/components 8.0.0-alpha.5 → 8.0.0-alpha.6

package/hydrate/index.js

@@ -3774,8 +3774,8 @@ class HasSlotController {
         };
     }
     hasDefaultSlot() {
-        if (!this.host || !this.host.isConnected)
-            return;
+        if (!this.host)
+            return false;
         return [...this.host.childNodes].some((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
@@ -3791,9 +3791,9 @@ class HasSlotController {
         });
     }
     hasNamedSlot(name) {
-        if (!this.host || !this.host.isConnected)
-            return;
-        return !!Array.from(this.host.children).find(ele => ele.getAttribute('slot') && ele.getAttribute('slot') === name);
+        if (!this.host)
+            return false;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'
@@ -3813,7 +3813,7 @@ class HasSlotController {
     };
 }
 
-const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
+const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none !important;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
 
 let toastStackTr;
 let toastStackTl;
@@ -18897,7 +18897,7 @@ class NanoBadge {
     }; }
 }
 
-const breadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[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}}:host,*,*::before,*::after{box-sizing:border-box}[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}}";
+const breadcrumbCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n:host {\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n  container-type: inline-size;\n  display: block;\n}\n\n.breadcrumbs {\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n\nol,\nnano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n\nli:not(.return-only li)::after,\nnano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n\na.link {\n  color: var(--text-color);\n}\n\na:not(.link) {\n  color: var(--text-color-secondary);\n}\n\na:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n\na.link:hover {\n  color: var(--text-color-hover);\n}\n\na.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n\n.breadcrumbs__dropdown {\n  inline-size: 100%;\n  display: none;\n}\n.breadcrumbs__dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n.breadcrumbs__dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n\n.trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n.trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n.trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n.trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n\n.trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n.trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n@container (width < 768px) {\n  .main {\n    display: none !important;\n  }\n  .breadcrumbs__dropdown {\n    display: block !important;\n  }\n  nano-menu::part(base) {\n    flex-direction: column !important;\n  }\n  nano-nav-item::after {\n    display: none !important;\n  }\n  .trigger-button_label::after {\n    display: inline-block !important;\n  }\n  .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;\n  }\n}";
 
 /**
  * Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
@@ -18924,7 +18924,7 @@ class NanoBreadcrumb {
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (hAsync("div", { class: "breadcrumbs" }, hAsync("nav", { "aria-label": "Breadcrumb" }, hAsync(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), hAsync("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, hAsync("button", { class: "trigger-button", slot: "trigger" }, hAsync("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (hAsync("span", { class: "trigger-button_label" }, "..")), hAsync("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), hAsync("nano-icon", { class: {
+        return (hAsync("div", { class: "breadcrumbs" }, hAsync("nav", { "aria-label": "Breadcrumb" }, hAsync(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), hAsync("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, hAsync("button", { class: "trigger-button", slot: "trigger" }, hAsync("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (hAsync("span", { class: "trigger-button_label" }, "..")), hAsync("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), hAsync("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
             }, name: "light/chevron-down" })), hAsync("nav", null, hAsync("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (hAsync("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));

package/hydrate/index.mjs

@@ -3772,8 +3772,8 @@ class HasSlotController {
         };
     }
     hasDefaultSlot() {
-        if (!this.host || !this.host.isConnected)
-            return;
+        if (!this.host)
+            return false;
         return [...this.host.childNodes].some((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
@@ -3789,9 +3789,9 @@ class HasSlotController {
         });
     }
     hasNamedSlot(name) {
-        if (!this.host || !this.host.isConnected)
-            return;
-        return !!Array.from(this.host.children).find(ele => ele.getAttribute('slot') && ele.getAttribute('slot') === name);
+        if (!this.host)
+            return false;
+        return !!this.host.querySelector(`[slot="${name}"]`);
     }
     has(slotName) {
         return slotName === '[default]'
@@ -3811,7 +3811,7 @@ class HasSlotController {
     };
 }
 
-const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
+const alertCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n   * @prop --border-color: Defaults to var(--nano-layer-border-color);\n   * @prop --border-width: Defaults to var(--nano-layer-border-width);\n   * @prop --background: Defaults to var(--nano-layer-background-color);\n   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n   * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n   */\n  --border-radius: var(--nano-layer-border-radius);\n  --border-color: var(--nano-layer-border-color);\n  --border-width: var(--nano-layer-border-width);\n  --icon-size: var(--nano-pictogram-size-large);\n  --scrim-color: var(--nano-overlay-background-color);\n  --close-button-color: var(--nano-color-neutral-800);\n  --tint-color: var(--nano-color-primary-1100);\n  --background: var(--nano-color-primary-50);\n  display: block;\n  container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n  --tint-color: var(--nano-color-neutral-1200);\n  --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n  --tint-color: var(--nano-color-success-1100);\n  --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n  --tint-color: var(--nano-color-warning-1100);\n  --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n  --tint-color: var(--nano-color-danger-1100);\n  --background: var(--nano-color-danger-100);\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-inline-start: solid 4px var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n  outline: none;\n}\n.alert:not(.alert--showing) {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n.alert--toasty, .alert--modal {\n  box-shadow: var(--nano-shadow-l2);\n  margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n  animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.08);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.alert__main {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__content {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n  flex: 1 1 auto;\n  padding: var(--nano-spacing-md);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n  font-size: var(--nano-font-size-small);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n  color: var(--tint-color);\n}\n\n.alert__title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-medium);\n  line-height: var(--nano-line-height-dense);\n}\n\n.alert__close {\n  --color: var(--close-button-color);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  padding-inline: 0 var(--nano-spacing-md);\n  padding-block: 0;\n}\n\n.alert__overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: var(--nano-transition-fast) opacity;\n  z-index: var(--nano-z-index-alert);\n  pointer-events: all;\n}\n.alert__overlay--open {\n  opacity: 1;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: start;\n  font-size: var(--icon-size);\n  padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n  color: var(--tint-color);\n  margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n  .alert__icon {\n    display: none !important;\n  }\n}\n\n.alert__countdown {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 4px;\n  background-color: var(--nano-layer-border-color);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n  block-size: 100%;\n  inline-size: 0;\n}\n\n.alert__timer {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n  background-color: var(--tint-color);\n}";
 
 let toastStackTr;
 let toastStackTl;
@@ -18895,7 +18895,7 @@ class NanoBadge {
     }; }
 }
 
-const breadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[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}}:host,*,*::before,*::after{box-sizing:border-box}[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}}";
+const breadcrumbCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n:host {\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n  container-type: inline-size;\n  display: block;\n}\n\n.breadcrumbs {\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n\nol,\nnano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n\nli:not(.return-only li)::after,\nnano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n\na.link {\n  color: var(--text-color);\n}\n\na:not(.link) {\n  color: var(--text-color-secondary);\n}\n\na:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n\na.link:hover {\n  color: var(--text-color-hover);\n}\n\na.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n\n.breadcrumbs__dropdown {\n  inline-size: 100%;\n  display: none;\n}\n.breadcrumbs__dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n.breadcrumbs__dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n\n.trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n.trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n.trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n.trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n\n.trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n.trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n@container (width < 768px) {\n  .main {\n    display: none !important;\n  }\n  .breadcrumbs__dropdown {\n    display: block !important;\n  }\n  nano-menu::part(base) {\n    flex-direction: column !important;\n  }\n  nano-nav-item::after {\n    display: none !important;\n  }\n  .trigger-button_label::after {\n    display: inline-block !important;\n  }\n  .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;\n  }\n}";
 
 /**
  * Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
@@ -18922,7 +18922,7 @@ class NanoBreadcrumb {
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (hAsync("div", { class: "breadcrumbs" }, hAsync("nav", { "aria-label": "Breadcrumb" }, hAsync(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), hAsync("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, hAsync("button", { class: "trigger-button", slot: "trigger" }, hAsync("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (hAsync("span", { class: "trigger-button_label" }, "..")), hAsync("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), hAsync("nano-icon", { class: {
+        return (hAsync("div", { class: "breadcrumbs" }, hAsync("nav", { "aria-label": "Breadcrumb" }, hAsync(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), hAsync("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, hAsync("button", { class: "trigger-button", slot: "trigger" }, hAsync("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (hAsync("span", { class: "trigger-button_label" }, "..")), hAsync("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), hAsync("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
             }, name: "light/chevron-down" })), hAsync("nav", null, hAsync("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (hAsync("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.6",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.0.0-alpha.5"
+    "@nanoporetech-digital/style": "8.0.0-alpha.6"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

package/dist/nano-components/slot-DYFgWo5f.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{a as t,k as s}from"./index-DXvE-U_j.js";function h(t){const s=t.getRootNode();return s.host?s.host.innerText:t.innerText}class i{host;slotNames=[];constructor(s,...h){this.slotNames=h;const i=s.componentWillLoad;s.componentWillLoad=()=>{this.host=t(s),i&&i.call(s)};const o=s.connectedCallback;s.connectedCallback=()=>{this.host=t(s),this.hostConnected(),o&&o.call(s)};const e=s.disconnectedCallback;s.disconnectedCallback=()=>{this.hostDisconnected(),this.host=void 0,e&&e.call(s)}}hasDefaultSlot(){if(this.host&&this.host.isConnected)return[...this.host.childNodes].some((t=>t.nodeType===Node.TEXT_NODE&&""!==t.textContent.trim()||t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}hasNamedSlot(t){if(this.host&&this.host.isConnected)return!!Array.from(this.host.children).find((s=>s.getAttribute("slot")&&s.getAttribute("slot")===t))}has(t){return"[default]"===t?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host&&this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange=t=>{const h=t.target;(this.slotNames.includes("[default]")&&!h.name||h.name&&this.slotNames.includes(h.name))&&s(this.host)}}export{i as H,h as g}