@nanoporetech-digital/components 5.7.0 → 5.8.1

package/hydrate/index.js

@@ -12195,7 +12195,7 @@ const displayTransition = (el, className, show = true, showDisplay = 'block') =>
   });
 };
 
-const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-details,*.sc-nano-details::before,*.sc-nano-details::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-details{display:none !important}/*!@:host*/.sc-nano-details-h{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}/*!@:host(:last-of-type)*/.sc-nano-details-h:last-of-type{--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:last-of-type) .open .content*/.sc-nano-details-h:last-of-type .open.sc-nano-details .content.sc-nano-details{border-radius:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:first-of-type)*/.sc-nano-details-h:first-of-type{--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}/*!@:host(:first-of-type:last-of-type)*/.sc-nano-details-h:first-of-type:last-of-type{--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}/*!@:host(:not(:last-of-type):not(:first-of-type))*/.sc-nano-details-h:not(:last-of-type):not(:first-of-type){--border-width-dims:0 var(--border-width) var(--border-width)}/*!@:host(.nano-color)*/.nano-color.sc-nano-details-h{--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}/*!@button*/button.sc-nano-details{inset-block:0;inset-inline:auto;margin:0;inline-size:100%;block-size:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;height:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}/*!@button::-moz-focus-inner*/button.sc-nano-details::-moz-focus-inner{border:0}/*!@button:focus*/button.sc-nano-details:focus{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}/*!@:hover button*/.sc-nano-details:hover button.sc-nano-details{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}/*!@.open button*/.open.sc-nano-details button.sc-nano-details{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}/*!@button .label*/button.sc-nano-details .label.sc-nano-details{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}/*!@button .icon*/button.sc-nano-details .icon.sc-nano-details{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}/*!@button .icon--start*/button.sc-nano-details .icon--start.sc-nano-details{margin-inline:0 var(--padding);margin-block:0}/*!@button .icon--end*/button.sc-nano-details .icon--end.sc-nano-details{margin-inline:var(--padding) 0;margin-block:0}/*!@button .icon ::slotted(nano-icon)*/button .icon .sc-nano-details-s>nano-icon{--color:currentcolor}/*!@.content*/.content.sc-nano-details{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;transition:0.2s ease border-radius;outline:none}/*!@.loaded .content*/.loaded.sc-nano-details .content.sc-nano-details{transition:var(--content-transition), 0.2s ease border-radius}/*!@.content > **/.content.sc-nano-details>*.sc-nano-details{opacity:0;transition:opacity 0.2s ease-out}/*!@.open .content > **/.open.sc-nano-details .content.sc-nano-details>*.sc-nano-details{opacity:1}/*!@.content__area*/.content__area.sc-nano-details{padding:var(--padding)}";
+const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-details,*.sc-nano-details::before,*.sc-nano-details::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-details{display:none !important}/*!@:host*/.sc-nano-details-h{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}/*!@:host([disabled])*/[disabled].sc-nano-details-h{opacity:0.5}/*!@:host(:last-of-type)*/.sc-nano-details-h:last-of-type{--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:last-of-type) .open .content*/.sc-nano-details-h:last-of-type .open.sc-nano-details .content.sc-nano-details{border-radius:0 0 var(--border-radius) var(--border-radius)}/*!@:host(:first-of-type)*/.sc-nano-details-h:first-of-type{--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}/*!@:host(:first-of-type:last-of-type)*/.sc-nano-details-h:first-of-type:last-of-type{--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}/*!@:host(:not(:last-of-type):not(:first-of-type))*/.sc-nano-details-h:not(:last-of-type):not(:first-of-type){--border-width-dims:0 var(--border-width) var(--border-width)}/*!@.header*/.header.sc-nano-details{height:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}/*!@.header::-webkit-details-marker*/.header.sc-nano-details::-webkit-details-marker{display:none}/*!@.header:focus*/.header.sc-nano-details:focus{outline:none}/*!@.header:focus-visible*/.header.sc-nano-details:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}/*!@.header:hover*/.header.sc-nano-details:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}/*!@.open .header*/.open.sc-nano-details .header.sc-nano-details{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}/*!@.disabled .header*/.disabled.sc-nano-details .header.sc-nano-details{cursor:not-allowed}/*!@.header .label*/.header.sc-nano-details .label.sc-nano-details{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}/*!@.header .icon*/.header.sc-nano-details .icon.sc-nano-details{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}/*!@.header .icon--start*/.header.sc-nano-details .icon--start.sc-nano-details{margin-inline:0 var(--padding);margin-block:0}/*!@.header .icon--end*/.header.sc-nano-details .icon--end.sc-nano-details{margin-inline:var(--padding) 0;margin-block:0}/*!@.header .icon ::slotted(nano-icon)*/.header .icon .sc-nano-details-s>nano-icon{--color:currentcolor}/*!@.body*/.body.sc-nano-details{overflow:hidden;transition:var(--content-transition), 0.2s ease border-radius;outline:none}/*!@.body > **/.body.sc-nano-details>*.sc-nano-details{opacity:0;transition:opacity 0.2s ease-out}/*!@.open .body > **/.open.sc-nano-details .body.sc-nano-details>*.sc-nano-details{opacity:1}/*!@.content*/.content.sc-nano-details{padding:var(--padding)}";
 
 /**
  * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.
@@ -12206,10 +12206,12 @@ const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n
  * @slot label - can be used when you wish to insert complex label markup
  * @slot icon-end - used for icons at the end of the handle
  *
- * @part button - the main details ui control
+ * @part base - the root `details` element
+ * @part header - the main `summary` ui control
  * @part label - the text wrapper of the ui control
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
+ * @part body - the wrapper around content
  * @part content - the main content wrapper
  */
 class Details {
@@ -12217,27 +12219,39 @@ class Details {
     registerInstance(this, hostRef);
     this.nanoOpened = createEvent(this, "nanoOpened", 7);
     this.nanoClosed = createEvent(this, "nanoClosed", 7);
-    this.slideId = `nano-details-${slideIds++}`;
     this.stateChanging = false;
-    this.onKeyDown = (ev) => {
-      switch (ev.key) {
+    this.onKeyDown = (e) => {
+      if (this.stateChanging || this.disabled)
+        return;
+      switch (e.key) {
         case 'Enter':
         case ' ':
+          e.preventDefault();
           this.open = !this.open;
           break;
+        case 'ArrowUp':
+          e.preventDefault();
+          this.open = false;
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          this.open = true;
+          break;
       }
     };
-    this.onMouseDown = () => {
-      if (this.stateChanging)
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.headerEl.focus();
+      if (this.stateChanging || this.disabled)
         return;
       this.open = !this.open;
     };
-    this.isLoading = true;
     this.label = '';
     this.open = false;
+    this.disabled = false;
     this.noHandle = false;
     this.iconRotation = 90;
-    this.color = undefined;
+    this.useCacheHeight = false;
   }
   toggleClick() {
     this.stateChanging = true;
@@ -12247,72 +12261,83 @@ class Details {
       this.hide();
   }
   hide() {
-    this.nanoClosed.emit(this.open);
-    displayTransition(this.contentEl, 'is-shown', false).then(() => (this.stateChanging = false));
-    this.contentEl.style.height = '0px';
+    const nanoClose = this.nanoClosed.emit(this.open);
+    if (nanoClose.defaultPrevented) {
+      this.open = true;
+      this.detailsEl.open = true;
+      return;
+    }
+    this.cacheHeight = this.contentEl.scrollHeight;
+    this.bodyEl.style.height = this.cacheHeight + 'px';
+    displayTransition(this.bodyEl, 'is-shown', false).then(() => {
+      this.stateChanging = false;
+      this.detailsEl.open = false;
+    });
+    requestAnimationFrame(() => {
+      this.bodyEl.style.height = '0px';
+    });
   }
   show() {
-    this.nanoOpened.emit();
-    displayTransition(this.contentEl, 'is-shown', true).then(() => {
+    const nanoOpen = this.nanoOpened.emit();
+    this.detailsEl.open = true;
+    if (nanoOpen.defaultPrevented) {
+      this.open = false;
+      this.detailsEl.open = false;
+      return;
+    }
+    displayTransition(this.bodyEl, 'is-shown', true).then(() => {
       this.stateChanging = false;
+      this.bodyEl.style.height = 'auto';
     });
-    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
+    this.bodyEl.style.height =
+      (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +
+        'px';
   }
-  resize() {
-    if (!this.open ||
-      !this.contentArea ||
-      !this.contentEl ||
-      this.stateChanging)
+  attachMo() {
+    if (this.mo || !this.detailsEl || !Build.isBrowser)
       return;
-    readTask(() => {
-      if (this.contentArea.scrollHeight > 0) {
-        writeTask(() => {
-          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';
-        });
+    this.mo = new MutationObserver((changes) => {
+      if (this.stateChanging)
+        return;
+      for (const change of changes) {
+        if (change.type === 'attributes' && change.attributeName === 'open') {
+          this.open = this.detailsEl.open;
+        }
       }
     });
-  }
-  attachRO() {
-    if (this.ro || !this.contentArea)
-      return;
-    const ro = (this.ro = new ResizeObserver(() => this.resize()));
-    ro.observe(this.contentArea);
+    this.mo.observe(this.detailsEl, { attributes: true });
   }
   componentWillLoad() {
-    this.hasStartSlot = !!this.el.querySelector('[slot="icon-start"]');
-    this.hasEndSlot = !!this.el.querySelector('[slot="icon-end"]');
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 100);
+    this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
+    this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
   }
   componentDidLoad() {
-    if (this.open) {
-      // disable animation on start
-      setTimeout(() => {
-        this.show();
-      }, 0);
-    }
+    this.bodyEl.style.height = this.open ? 'auto' : '0';
+    if (this.open)
+      this.detailsEl.setAttribute('open', 'true');
+    this.attachMo();
   }
   connectedCallback() {
-    return;
+    this.attachMo();
   }
   disconnectedCallback() {
-    if (this.mo)
+    if (this.mo) {
       this.mo.disconnect();
-    if (this.ro)
-      this.ro.disconnect();
+      this.mo = undefined;
+    }
   }
   render() {
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)) }, hAsync("div", { class: {
+    return (hAsync("details", { part: "base", ref: (d) => (this.detailsEl = d), class: {
+        details: true,
         open: this.open,
-        loaded: !this.isLoading,
-      } }, hAsync("button", { onKeyDown: this.onKeyDown, onMouseDown: this.onMouseDown, onTouchEnd: this.onMouseDown, "aria-controls": this.slideId, "aria-expanded": this.open ? 'true' : 'false', style: { display: this.noHandle ? 'none' : '' }, part: "button" }, this.hasStartSlot ? (hAsync("span", { part: "icon--start", class: "icon icon--start", style: {
+        disabled: this.disabled,
+      } }, hAsync("summary", { part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (hAsync("span", { part: "icon--start", class: "icon icon--start", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, hAsync("slot", { name: "icon-start" }))) : (''), hAsync("div", { class: "label", part: "label" }, this.label ? this.label : hAsync("slot", { name: "label" })), this.hasEndSlot ? (hAsync("span", { part: "icon--end", class: "icon icon--end", style: {
+      } }, hAsync("slot", { name: "icon-start" }))) : (''), hAsync("div", { part: "label", class: "label" }, this.label ? this.label : hAsync("slot", { name: "label" })), this.hasEndSlot ? (hAsync("span", { part: "icon--end", class: "icon icon--end", style: {
         transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-      } }, hAsync("slot", { name: "icon-end" }))) : ('')), hAsync("div", { class: "content", ref: (div) => (this.contentEl = div), tabindex: "-1", id: this.slideId, part: "content" }, hAsync("div", { ref: (div) => (this.contentArea = div), class: "content__area" }, hAsync("slot", null))))));
+      } }, hAsync("slot", { name: "icon-end" }))) : ('')), hAsync("div", { part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, hAsync("div", { part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, hAsync("slot", null)))));
   }
-  get el() { return getElement(this); }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "open": ["toggleClick"]
   }; }
@@ -12323,17 +12348,16 @@ class Details {
     "$members$": {
       "label": [1],
       "open": [1540],
+      "disabled": [1540],
       "noHandle": [4, "no-handle"],
       "iconRotation": [2, "icon-rotation"],
-      "color": [1],
-      "isLoading": [32]
+      "useCacheHeight": [4, "use-cache-height"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["open", "open"]]
+    "$attrsToReflect$": [["open", "open"], ["disabled", "disabled"]]
   }; }
 }
-let slideIds = 0;
 
 /**
  * Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated
@@ -18312,6 +18336,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
   if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
     return Reflect.metadata(k, v);
 };
+let gridId = 0;
 /**
  * A lightweight, context-aware CSS grid implementation.
  *
@@ -18330,6 +18355,7 @@ class Grid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.grids = [];
+    this.gridId = 'nano-grid-' + gridId++;
     this.styles = () => {
       const css = /* css */ `
       ${this.grids
@@ -18337,7 +18363,7 @@ class Grid {
           @container (min-width: ${typeof bp.breakpoint === 'number'
         ? bp.breakpoint + 1 + 'px'
         : bp.breakpoint}) {
-            .grid {
+            #${this.gridId}.grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
@@ -18347,11 +18373,11 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                  .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
@@ -18362,11 +18388,11 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                    .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                       grid-row-start: ${gItm} !important;
                     }
-                    .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                       grid-row-end: span ${gItm} !important;
                     }
@@ -18375,7 +18401,7 @@ class Grid {
         .join('')}
             ${this.showHelper &&
         /* css */ `
-              .grid--helper :nth-child(-n+${bp.cols}) {
+              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {
                 display: block !important;
               }
             `}
@@ -18418,7 +18444,7 @@ class Grid {
         name: 'm',
         template: this.mTpl,
       });
-    if (this.lSize)
+    if (this.lCols)
       this.grids.push({
         cols: this.lCols,
         breakpoint: this.mSize,
@@ -18450,7 +18476,7 @@ class Grid {
     this.constructSizeArray();
   }
   render() {
-    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid" }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
+    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", id: this.gridId }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
   }
   static get watchers() { return {
     "sTpl": ["constructSizeArray"],
@@ -18474,15 +18500,15 @@ class Grid {
     "$flags$": 9,
     "$tagName$": "nano-grid",
     "$members$": {
-      "sSize": [8, "s-size"],
-      "mSize": [8, "m-size"],
-      "lSize": [8, "l-size"],
-      "xlSize": [8, "xl-size"],
-      "sCols": [2, "s-cols"],
-      "mCols": [2, "m-cols"],
-      "lCols": [2, "l-cols"],
-      "xlCols": [2, "xl-cols"],
-      "xxlCols": [2, "xxl-cols"],
+      "sSize": [520, "s-size"],
+      "mSize": [520, "m-size"],
+      "lSize": [520, "l-size"],
+      "xlSize": [520, "xl-size"],
+      "sCols": [514, "s-cols"],
+      "mCols": [514, "m-cols"],
+      "lCols": [514, "l-cols"],
+      "xlCols": [514, "xl-cols"],
+      "xxlCols": [514, "xxl-cols"],
       "sTpl": [1, "s-tpl"],
       "mTpl": [1, "m-tpl"],
       "lTpl": [1, "l-tpl"],
@@ -18493,7 +18519,7 @@ class Grid {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["showHelper", "show-helper"]]
+    "$attrsToReflect$": [["sSize", "s-size"], ["mSize", "m-size"], ["lSize", "l-size"], ["xlSize", "xl-size"], ["sCols", "s-cols"], ["mCols", "m-cols"], ["lCols", "l-cols"], ["xlCols", "xl-cols"], ["xxlCols", "xxl-cols"], ["showHelper", "show-helper"]]
   }; }
 }
 __decorate([
@@ -22237,7 +22263,7 @@ class Skeleton {
   }; }
 }
 
-const slideCss = "/*!@:host*/.sc-nano-slide-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slide,*.sc-nano-slide::before,*.sc-nano-slide::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slide{display:none !important}/*!@:host*/.sc-nano-slide-h{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}/*!@:host([ready])*/[ready].sc-nano-slide-h{opacity:1}";
+const slideCss = "/*!@:host*/.sc-nano-slide-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slide,*.sc-nano-slide::before,*.sc-nano-slide::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slide{display:none !important}/*!@:host*/.sc-nano-slide-h{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}/*!@:host([ready])*/[ready].sc-nano-slide-h{opacity:1}/*!@:host(:not([ready]))*/.sc-nano-slide-h:not([ready]){flex:1 0 auto}";
 
 class Slide$2 {
   constructor(hostRef) {
@@ -26121,7 +26147,7 @@ proto.shiftWrapCells = function () {
 
 const flickity = Flickity;
 
-const slidesCss = "/*!@:host*/.sc-nano-slides-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slides,*.sc-nano-slides::before,*.sc-nano-slides::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@:host*/.sc-nano-slides-h{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}/*!@:host([ready])*/[ready].sc-nano-slides-h{opacity:1}/*!@.slideshow*/.slideshow.sc-nano-slides{max-height:100%;min-height:inherit;height:inherit;position:relative}/*!@.slideshow.not-ready*/.slideshow.not-ready.sc-nano-slides{max-width:98vw}/*!@.flickity-container*/.flickity-container.sc-nano-slides{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.not-ready .flickity-container*/.not-ready.sc-nano-slides .flickity-container.sc-nano-slides{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.flickity-container.slides-ready*/.flickity-container.slides-ready.sc-nano-slides{min-height:inherit;max-height:inherit;height:inherit;width:auto}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@.ui-extras*/.ui-extras.sc-nano-slides{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}/*!@.ui-extras **/.ui-extras.sc-nano-slides *.sc-nano-slides{pointer-events:all}/*!@.flickity-enabled*/.flickity-enabled.sc-nano-slides{position:relative;opacity:1}/*!@.flickity-enabled:focus*/.flickity-enabled.sc-nano-slides:focus{outline:none}/*!@.flickity-viewport*/.flickity-viewport.sc-nano-slides{overflow:hidden;position:relative;min-block-size:100%;flex:1}/*!@.flickity-slider*/.flickity-slider.sc-nano-slides{position:absolute;inline-size:100%;block-size:100%}/*!@.flickity-enabled.is-draggable*/.flickity-enabled.is-draggable.sc-nano-slides{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}/*!@.flickity-enabled.is-draggable .flickity-viewport*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.sc-nano-slides{cursor:move;cursor:grab;cursor:grab}/*!@.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.is-pointer-down.sc-nano-slides{cursor:grabbing}/*!@.flickity-button*/.flickity-button.sc-nano-slides{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}/*!@.flickity-button:hover*/.flickity-button.sc-nano-slides:hover{opacity:1;cursor:pointer}/*!@.flickity-button:focus*/.flickity-button.sc-nano-slides:focus{outline:none;box-shadow:0 0 0 5px #19f}/*!@.flickity-button:active*/.flickity-button.sc-nano-slides:active{opacity:0.6}/*!@.flickity-button:disabled*/.flickity-button.sc-nano-slides:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}/*!@.flickity-button-icon*/.flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color)}/*!@.flickity-button:disabled .flickity-button-icon*/.flickity-button.sc-nano-slides:disabled .flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color-disabled)}/*!@.flickity-prev-next-button*/.flickity-prev-next-button.sc-nano-slides{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}/*!@.flickity-prev-next-button.previous*/.flickity-prev-next-button.previous.sc-nano-slides{inset-inline-start:10px}/*!@.flickity-prev-next-button.next*/.flickity-prev-next-button.next.sc-nano-slides{inset-inline-end:10px}/*!@.flickity-rtl .flickity-prev-next-button.previous*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.previous.sc-nano-slides{inset-inline:auto 10px}/*!@.flickity-rtl .flickity-prev-next-button.next*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.next.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-prev-next-button .flickity-button-icon*/.flickity-prev-next-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}/*!@.flickity-page-dots*/.flickity-page-dots.sc-nano-slides{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}/*!@.flickity-rtl .flickity-page-dots*/.flickity-rtl.sc-nano-slides .flickity-page-dots.sc-nano-slides{direction:rtl}/*!@.flickity-page-dots .dot*/.flickity-page-dots.sc-nano-slides .dot.sc-nano-slides{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}/*!@.flickity-page-dots .dot.is-selected*/.flickity-page-dots.sc-nano-slides .dot.is-selected.sc-nano-slides{opacity:1;background:var(--dot-color-active)}/*!@.flickity-enabled.is-fullscreen*/.flickity-enabled.is-fullscreen.sc-nano-slides{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}/*!@.flickity-enabled.is-fullscreen .flickity-page-dots*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-page-dots.sc-nano-slides{inset-block-end:45px}/*!@html.is-flickity-fullscreen*/html.is-flickity-fullscreen.sc-nano-slides{overflow:hidden}/*!@.flickity-fullscreen-button*/.flickity-fullscreen-button.sc-nano-slides{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}/*!@.flickity-rtl .flickity-fullscreen-button*/.flickity-rtl.sc-nano-slides .flickity-fullscreen-button.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-fullscreen-button-exit*/.flickity-fullscreen-button-exit.sc-nano-slides{display:none}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-exit.sc-nano-slides{display:block}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-view.sc-nano-slides{display:none}/*!@.flickity-fullscreen-button .flickity-button-icon*/.flickity-fullscreen-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}/*!@.flickity-enabled.is-fade .flickity-slider > **/.flickity-enabled.is-fade.sc-nano-slides .flickity-slider.sc-nano-slides>*.sc-nano-slides{pointer-events:none;z-index:0}/*!@.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected)*/.flickity-enabled.is-fade .flickity-slider .sc-nano-slides-s>.is-selected{pointer-events:auto;z-index:1}";
+const slidesCss = "/*!@:host*/.sc-nano-slides-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-slides,*.sc-nano-slides::before,*.sc-nano-slides::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@:host*/.sc-nano-slides-h{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}/*!@:host([ready])*/[ready].sc-nano-slides-h{opacity:1}/*!@.slideshow*/.slideshow.sc-nano-slides{max-height:100%;min-height:inherit;height:inherit;position:relative}/*!@.slideshow.not-ready*/.slideshow.not-ready.sc-nano-slides{width:100%;overflow:hidden}/*!@.flickity-container*/.flickity-container.sc-nano-slides{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.not-ready .flickity-container*/.not-ready.sc-nano-slides .flickity-container.sc-nano-slides{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}/*!@.flickity-container.slides-ready*/.flickity-container.slides-ready.sc-nano-slides{min-height:inherit;max-height:inherit;height:inherit;width:auto}/*!@[hidden]*/[hidden].sc-nano-slides{display:none !important}/*!@.ui-extras*/.ui-extras.sc-nano-slides{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}/*!@.ui-extras **/.ui-extras.sc-nano-slides *.sc-nano-slides{pointer-events:all}/*!@.flickity-enabled*/.flickity-enabled.sc-nano-slides{position:relative;opacity:1}/*!@.flickity-enabled:focus*/.flickity-enabled.sc-nano-slides:focus{outline:none}/*!@.flickity-viewport*/.flickity-viewport.sc-nano-slides{overflow:hidden;position:relative;min-block-size:100%;flex:1}/*!@.flickity-slider*/.flickity-slider.sc-nano-slides{position:absolute;inline-size:100%;block-size:100%}/*!@.flickity-enabled.is-draggable*/.flickity-enabled.is-draggable.sc-nano-slides{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}/*!@.flickity-enabled.is-draggable .flickity-viewport*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.sc-nano-slides{cursor:move;cursor:grab;cursor:grab}/*!@.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down*/.flickity-enabled.is-draggable.sc-nano-slides .flickity-viewport.is-pointer-down.sc-nano-slides{cursor:grabbing}/*!@.flickity-button*/.flickity-button.sc-nano-slides{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}/*!@.flickity-button:hover*/.flickity-button.sc-nano-slides:hover{opacity:1;cursor:pointer}/*!@.flickity-button:focus*/.flickity-button.sc-nano-slides:focus{outline:none;box-shadow:0 0 0 5px #19f}/*!@.flickity-button:active*/.flickity-button.sc-nano-slides:active{opacity:0.6}/*!@.flickity-button:disabled*/.flickity-button.sc-nano-slides:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}/*!@.flickity-button-icon*/.flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color)}/*!@.flickity-button:disabled .flickity-button-icon*/.flickity-button.sc-nano-slides:disabled .flickity-button-icon.sc-nano-slides{fill:var(--navbtns-icon-color-disabled)}/*!@.flickity-prev-next-button*/.flickity-prev-next-button.sc-nano-slides{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}/*!@.flickity-prev-next-button.previous*/.flickity-prev-next-button.previous.sc-nano-slides{inset-inline-start:10px}/*!@.flickity-prev-next-button.next*/.flickity-prev-next-button.next.sc-nano-slides{inset-inline-end:10px}/*!@.flickity-rtl .flickity-prev-next-button.previous*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.previous.sc-nano-slides{inset-inline:auto 10px}/*!@.flickity-rtl .flickity-prev-next-button.next*/.flickity-rtl.sc-nano-slides .flickity-prev-next-button.next.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-prev-next-button .flickity-button-icon*/.flickity-prev-next-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}/*!@.flickity-page-dots*/.flickity-page-dots.sc-nano-slides{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}/*!@.flickity-rtl .flickity-page-dots*/.flickity-rtl.sc-nano-slides .flickity-page-dots.sc-nano-slides{direction:rtl}/*!@.flickity-page-dots .dot*/.flickity-page-dots.sc-nano-slides .dot.sc-nano-slides{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}/*!@.flickity-page-dots .dot.is-selected*/.flickity-page-dots.sc-nano-slides .dot.is-selected.sc-nano-slides{opacity:1;background:var(--dot-color-active)}/*!@.flickity-enabled.is-fullscreen*/.flickity-enabled.is-fullscreen.sc-nano-slides{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}/*!@.flickity-enabled.is-fullscreen .flickity-page-dots*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-page-dots.sc-nano-slides{inset-block-end:45px}/*!@html.is-flickity-fullscreen*/html.is-flickity-fullscreen.sc-nano-slides{overflow:hidden}/*!@.flickity-fullscreen-button*/.flickity-fullscreen-button.sc-nano-slides{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}/*!@.flickity-rtl .flickity-fullscreen-button*/.flickity-rtl.sc-nano-slides .flickity-fullscreen-button.sc-nano-slides{inset-inline:10px auto}/*!@.flickity-fullscreen-button-exit*/.flickity-fullscreen-button-exit.sc-nano-slides{display:none}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-exit.sc-nano-slides{display:block}/*!@.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view*/.flickity-enabled.is-fullscreen.sc-nano-slides .flickity-fullscreen-button-view.sc-nano-slides{display:none}/*!@.flickity-fullscreen-button .flickity-button-icon*/.flickity-fullscreen-button.sc-nano-slides .flickity-button-icon.sc-nano-slides{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}/*!@.flickity-enabled.is-fade .flickity-slider > **/.flickity-enabled.is-fade.sc-nano-slides .flickity-slider.sc-nano-slides>*.sc-nano-slides{pointer-events:none;z-index:0}/*!@.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected)*/.flickity-enabled.is-fade .flickity-slider .sc-nano-slides-s>.is-selected{pointer-events:auto;z-index:1}";
 
 const modulo = (num, div) => {
   return ((num % div) + div) % div;
@@ -28372,12 +28398,12 @@ class Tab {
     this.tab.blur();
   }
   render() {
-    return (hAsync(Host, { id: this.host.id || this.tabId }, hAsync("div", { part: "base", class: {
+    return (hAsync(Host, { id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false' }, hAsync("div", { part: "base", class: {
         nanotab: true,
         'nanotab--active': this.active,
         'nanotab--disabled': this.disabled,
         'nanotab--closable': this.closable,
-      } }, hAsync("slot", { name: "start" }), hAsync("div", { part: "tab", ref: (el) => (this.tab = el), role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, hAsync("slot", null)), this.closable && !this.disabled && (hAsync("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), hAsync("slot", { name: "end" }))));
+      } }, hAsync("slot", { name: "start" }), hAsync("div", { part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, hAsync("slot", null)), this.closable && !this.disabled && (hAsync("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), hAsync("slot", { name: "end" }))));
   }
   get host() { return getElement(this); }
   static get style() { return tabCss; }
@@ -28827,7 +28853,7 @@ class TabGroup {
       }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (hAsync("button", { disabled: !this.hasScrollControls, class: {
         'nano-tab-group__scroll-button': true,
         'nano-tab-group__scroll-button--left': true,
-      }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, hAsync("nano-icon", { name: "light/chevron-left" }))), hAsync("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, hAsync("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" }, hAsync("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), hAsync("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (hAsync("button", { disabled: !this.hasScrollControls, class: {
+      }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, hAsync("nano-icon", { name: "light/chevron-left" }))), hAsync("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, hAsync("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, hAsync("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), hAsync("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (hAsync("button", { disabled: !this.hasScrollControls, class: {
         'nano-tab-group__scroll-button': true,
         'nano-tab-group__scroll-button--right': true,
       }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, hAsync("nano-icon", { name: "light/chevron-right" })))), hAsync("slot", { name: "tab-content-header" }), hAsync("div", { part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync("slot", { onSlotchange: this.handleContentSlotChange })))));
@@ -30175,8 +30201,9 @@ function cellRender(rowIndex, colIndex) {
     // Render it now and output it later.
     const templateEle = document.createElement('template');
     // @ts-expect-error
-    tableInstance.customRenderer(tplResult, templateEle.content);
-    tplResult = templateEle;
+    const result = tableInstance.customRenderer(tplResult, templateEle.content);
+    // custom rendering can render to the templateEle OR return a promise<string>
+    tplResult = result && result['then'] ? result : templateEle;
   }
   return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
 }
@@ -30214,16 +30241,25 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   const ContentWrap = (props) => {
     const content = Content();
     return (hAsync("div", Object.assign({ ref: (d) => {
-        if (d && content instanceof Element) {
+        if (!d)
+          return;
+        if (content instanceof Element) {
+          // custom rendered an element
           d.replaceChildren();
           d.append(content['content'] || content);
         }
+        else if (content['then']) {
+          // custom rendered a promise. Most likely within SSR.
+          // @ts-expect-error
+          content.then((res) => (d.innerHTML = res));
+        }
       } }, props, { class: {
         [`${CSSNAMESPACE}__cell-content`]: true,
         [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
       }, innerHTML: typeof content === 'string' && content.includes('<')
         ? content
         : undefined }), (typeof content !== 'string' || !content.includes('<')) &&
+      !content['then'] &&
       !(content instanceof Element) &&
       content));
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -131,7 +131,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "1a54e7d34a188d439757541b7c190b1fd51c62b7",
+  "gitHead": "fed5a165db8918f46d56956446b279a735c3e546",
   "volta": {
     "node": "14.18.1",
     "npm": "8.6.0"