@nanoporetech-digital/components 5.8.2 → 5.8.3

package/hydrate/index.js

@@ -12165,37 +12165,39 @@ class Demo {
  * - OnHide remove show class, listen for transition end, then display: none on finish
  * - OnShow, display block on start then add a show class
  * @param el
- * @param className
- * @param show
+ * @param options
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
+const displayTransition = (el, options) => {
+  const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
   return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
+    const showCb = (e) => {
+      if (e.target === el || e.composedPath().some((el) => el === e.target)) {
+        resolve('shown');
+        el.removeEventListener('transitionend', showCb);
+      }
+    };
+    const hideCb = (e) => {
+      if (e.target === el || e.composedPath().some((el) => el === e.target)) {
+        el.style.display = 'none';
+        resolve('hidden');
+        el.removeEventListener('transitionend', hideCb);
+      }
+    };
+    if (opts.show) {
+      el.addEventListener('transitionend', showCb);
+      el.style.display = opts.showDisplay;
       el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
+      setTimeout(() => el.classList.add(opts.className), 20);
     }
     else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
+      el.addEventListener('transitionend', hideCb);
+      el.classList.remove(opts.className);
     }
   });
 };
 
-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)}";
+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);--content-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));--transition-duration:0.2s;--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(--btn-padding);margin-block:0}/*!@.header .icon--end*/.header.sc-nano-details .icon--end.sc-nano-details{margin-inline:var(--btn-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:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}/*!@.is-hidden .body > **/.is-hidden.sc-nano-details .body.sc-nano-details>*.sc-nano-details{animation:fade 0.1s ease reverse}/*!@.open .body > **/.open.sc-nano-details .body.sc-nano-details>*.sc-nano-details{animation:fade var(--transition-duration, 0.3s) ease forwards}/*!@.content*/.content.sc-nano-details{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
 
 /**
  * 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.
@@ -12269,9 +12271,14 @@ class Details {
     }
     this.cacheHeight = this.contentEl.scrollHeight;
     this.bodyEl.style.height = this.cacheHeight + 'px';
-    displayTransition(this.bodyEl, 'is-shown', false).then(() => {
+    displayTransition(this.bodyEl, {
+      className: 'is-shown',
+      show: false,
+      transitionProp: 'height',
+    }).then(() => {
       this.stateChanging = false;
       this.detailsEl.open = false;
+      this.bodyEl.classList.add('is-hidden');
     });
     requestAnimationFrame(() => {
       this.bodyEl.style.height = '0px';
@@ -12285,7 +12292,11 @@ class Details {
       this.detailsEl.open = false;
       return;
     }
-    displayTransition(this.bodyEl, 'is-shown', true).then(() => {
+    displayTransition(this.bodyEl, {
+      className: 'is-shown',
+      show: true,
+      transitionProp: 'height',
+    }).then(() => {
       this.stateChanging = false;
       this.bodyEl.style.height = 'auto';
     });
@@ -17111,7 +17122,10 @@ class GlobalNav {
     }
   }
   async handleUserMenu() {
-    await displayTransition(this.userLinkPanel, 'show', this.userMenuOpen);
+    await displayTransition(this.userLinkPanel, {
+      className: 'show',
+      show: this.userMenuOpen,
+    });
     if (this.userMenuOpen) {
       this.userLinkPanel.focus();
       this.userLinkPanel.addEventListener('focusout', this.onUserMenuBlur);
@@ -18336,7 +18350,6 @@ 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.
  *
@@ -18355,15 +18368,14 @@ class Grid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.grids = [];
-    this.gridId = 'nano-grid-' + gridId++;
     this.styles = () => {
       const css = /* css */ `
       ${this.grids
         .map((bp) => /* css */ `
-          @container (min-width: ${!!Number(bp.breakpoint)
+          @container (min-width: ${!!Number(bp.breakpoint + 1)
         ? Number(bp.breakpoint) + 1 + 'px'
         : bp.breakpoint}) {
-            #${this.gridId}.grid {
+            [cache-key="${this.cacheKey}"].grid {
               --current-grid-size: "grid size: ${bp.name}";
               ${bp.template
         ? `grid-template: ${bp.template};`
@@ -18373,11 +18385,11 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                     grid-column-start: ${gItm} !important;
                   }
-                  #${this.gridId}.grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                   ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                     grid-column-end: span ${gItm} !important;
                   }
@@ -18388,23 +18400,24 @@ class Grid {
         .map((_, i) => {
         const gItm = i + 1;
         return /* css */ `
-                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                       grid-row-start: ${gItm} !important;
                     }
-                    #${this.gridId}.grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                     ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                       grid-row-end: span ${gItm} !important;
                     }
                 `;
       })
         .join('')}
-            ${this.showHelper &&
-        /* css */ `
-              #${this.gridId} .grid--helper :nth-child(-n+${bp.cols}) {
-                display: block !important;
-              }
-            `}
+            ${this.showHelper
+        ? /* css */ `
+                [cache-key="${this.cacheKey}"] .grid--helper :nth-child(-n+${bp.cols}) {
+                  display: block !important;
+                }
+              `
+        : ''}
           }
         `)
         .join('')}
@@ -18476,7 +18489,7 @@ class Grid {
     this.constructSizeArray();
   }
   render() {
-    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" })))))));
+    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, 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"],
@@ -20038,7 +20051,10 @@ class NavItem {
       if (!this.hasSecondarySlot || !this.didOpen)
         return;
       this.open = false;
-      await displayTransition(this.secondaryDiv, 'open', false);
+      await displayTransition(this.secondaryDiv, {
+        className: 'open',
+        show: false,
+      });
       this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
       this.didOpen = false;
     };
@@ -20050,7 +20066,10 @@ class NavItem {
       if (!this.hasSecondarySlot || this.didOpen)
         return;
       this.open = true;
-      await displayTransition(this.secondaryDiv, 'open', true);
+      await displayTransition(this.secondaryDiv, {
+        className: 'open',
+        show: true,
+      });
       this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
       this.didOpen = true;
     };
@@ -28662,12 +28681,18 @@ class TabGroup {
   hideRightBtn() {
     if (!this.rightBtn)
       return;
-    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);
+    displayTransition(this.rightBtn, {
+      className: 'is-shown',
+      show: !this.hideControlRight,
+    });
   }
   hideLeftBtn() {
     if (!this.leftBtn)
       return;
-    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);
+    displayTransition(this.leftBtn, {
+      className: 'is-shown',
+      show: !this.hideControlLeft,
+    });
   }
   watchScrollControls() {
     if (this.hasScrollControls)

package/package.json

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

package/dist/cjs/table.worker-8f63db76.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-8f63db76.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/transitions-1205f12b.js

@@ -1,48 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- * @param el
- * @param className
- * @param show
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
-  return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
-      el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
-    }
-    else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
-    }
-  });
-};
-
-exports.displayTransition = displayTransition;
-
-//# sourceMappingURL=transitions-1205f12b.js.map

package/dist/cjs/transitions-1205f12b.js.map

@@ -1 +0,0 @@
-{"file":"transitions-1205f12b.js","mappings":";;;;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI,EACpB,cAAsB,OAAO;EAE7B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;MAC/B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true,\n  showDisplay: string = 'block'\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            resolve('shown');\n          }\n        },\n        { once: true }\n      );\n      el.style.display = showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            el.style.display = 'none';\n            resolve('hidden');\n          }\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"],"version":3}

package/dist/esm/table.worker-0c061654.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-0c061654.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/transitions-686c5fec.js

@@ -1,46 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-/**
- * Quality of life for transition handling.
- * Adds / removes transitionend events. Resolves on complete
- */
-/**
- * handles hiding and showing elements properly (with display),
- * along with transitions, so they are no longer viewable in the dom.
- * - OnHide remove show class, listen for transition end, then display: none on finish
- * - OnShow, display block on start then add a show class
- * @param el
- * @param className
- * @param show
- * @returns a promise of resolving as either 'show' or 'hidden'
- */
-const displayTransition = (el, className, show = true, showDisplay = 'block') => {
-  return new Promise((resolve) => {
-    if (show) {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          resolve('shown');
-        }
-      }, { once: true });
-      el.style.display = showDisplay;
-      el.dataset.displayTransition = 'true';
-      setTimeout(() => el.classList.add(className), 20);
-    }
-    else {
-      el.addEventListener('transitionend', (e) => {
-        if (e.target === el ||
-          e.composedPath().some((el) => el === e.target)) {
-          el.style.display = 'none';
-          resolve('hidden');
-        }
-      }, { once: true });
-      el.classList.remove(className);
-    }
-  });
-};
-
-export { displayTransition as d };
-
-//# sourceMappingURL=transitions-686c5fec.js.map

package/dist/esm/transitions-686c5fec.js.map

@@ -1 +0,0 @@
-{"file":"transitions-686c5fec.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI,EACpB,cAAsB,OAAO;EAE7B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC;MAC/B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true,\n  showDisplay: string = 'block'\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            resolve('shown');\n          }\n        },\n        { once: true }\n      );\n      el.style.display = showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (\n            e.target === el ||\n            e.composedPath().some((el) => el === e.target)\n          ) {\n            el.style.display = 'none';\n            resolve('hidden');\n          }\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"],"version":3}

package/dist/nano-components/p-5ca9275c.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as r,B as e,h as o,g as i}from"./p-d6a04b3a.js";import{d as s}from"./p-f6de2d5d.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{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]){opacity:0.5}:host(: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{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(: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){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{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{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{width:100%;max-width:100%;max-height:100%;flex:1;display:inline-block}.header .icon{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{margin-inline:0 var(--padding);margin-block:0}.header .icon--end{margin-inline:var(--padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:var(--content-transition), 0.2s ease border-radius;outline:none}.body>*{opacity:0;transition:opacity 0.2s ease-out}.open .body>*{opacity:1}.content{padding:var(--padding)}";const n=class{constructor(e){t(this,e);this.nanoOpened=r(this,"nanoOpened",7);this.nanoClosed=r(this,"nanoClosed",7);this.stateChanging=false;this.onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};this.onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};this.label="";this.open=false;this.disabled=false;this.noHandle=false;this.iconRotation=90;this.useCacheHeight=false}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,"is-shown",false).then((()=>{this.stateChanging=false;this.detailsEl.open=false}));requestAnimationFrame((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,"is-shown",true).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto"}));this.bodyEl.style.height=(this.useCacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!e.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const r of t){if(r.type==="attributes"&&r.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return o("details",{part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},o("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:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?o("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},o("slot",{name:"icon-start"})):"",o("div",{part:"label",class:"label"},this.label?this.label:o("slot",{name:"label"})),this.hasEndSlot?o("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},o("slot",{name:"icon-end"})):""),o("div",{part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},o("div",{part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},o("slot",null))))}get host(){return i(this)}static get watchers(){return{open:["toggleClick"]}}};n.style=a;export{n as nano_details};
-//# sourceMappingURL=p-5ca9275c.entry.js.map

package/dist/nano-components/p-5ca9275c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["detailsCss","Details","this","stateChanging","onKeyDown","e","disabled","key","preventDefault","open","onMouseDown","headerEl","focus","toggleClick","show","hide","nanoClose","nanoClosed","emit","defaultPrevented","detailsEl","cacheHeight","contentEl","scrollHeight","bodyEl","style","height","displayTransition","then","requestAnimationFrame","nanoOpen","nanoOpened","useCacheHeight","attachMo","mo","Build","isBrowser","MutationObserver","changes","change","type","attributeName","observe","attributes","componentWillLoad","hasStartSlot","host","querySelector","hasEndSlot","componentDidLoad","setAttribute","connectedCallback","disconnectedCallback","disconnect","undefined","render","h","part","ref","d","class","details","tabindex","display","noHandle","id","role","s","onClick","transform","iconRotation","name","label","div"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  height: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: var(--content-transition), 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n}\n\n.content {\n  padding: var(--padding);\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * 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.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n  private cacheHeight: number;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + 'px';\n\n    displayTransition(this.bodyEl, 'is-shown', false).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n    });\n\n    requestAnimationFrame(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +\n      'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <details\n        part=\"base\"\n        ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n        class={{\n          details: true,\n          open: this.open,\n          disabled: this.disabled,\n        }}\n      >\n        <summary\n          part=\"header\"\n          aria-controls=\"content\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? '-1' : '0'}\n          style={{ display: this.noHandle ? 'none' : '' }}\n          id=\"header\"\n          role=\"button\"\n          class=\"header\"\n          ref={(s) => (this.headerEl = s)}\n          onKeyDown={this.onKeyDown}\n          onClick={this.onMouseDown}\n        >\n          {this.hasStartSlot ? (\n            <span\n              part=\"icon--start\"\n              class=\"icon icon--start\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-start\" />\n            </span>\n          ) : (\n            ''\n          )}\n          <div part=\"label\" class=\"label\">\n            {this.label ? this.label : <slot name=\"label\" />}\n          </div>\n          {this.hasEndSlot ? (\n            <span\n              part=\"icon--end\"\n              class=\"icon icon--end\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-end\" />\n            </span>\n          ) : (\n            ''\n          )}\n        </summary>\n        <div\n          part=\"body\"\n          class=\"body\"\n          ref={(div) => (this.bodyEl = div)}\n          tabindex=\"-1\"\n          role=\"region\"\n          aria-labelledby=\"header\"\n        >\n          <div\n            part=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            class=\"content\"\n            id=\"content\"\n          >\n            <slot />\n          </div>\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-92195a83.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","activeEl","document","activeElement","tagName","toLowerCase","key","preventDefault","stopPropagation","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedElements","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","_","async","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","activeTabIndicator","offsetTop","top","scrollTop","offsetLeft","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","requestAnimationFrame","window","resizeObserver","ResizeObserver","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","Object","assign","createColorClasses","color","part","onClick","onKeyDown","ref","btn","onScroll","role","onSlotchange","onTouchStart","onTouchEnd"],"sources":["./src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","./src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n    --grab-offset-x: var(--tabs-padding-start);\n  }\n}\n\n:host([placement='start']) {\n  --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --content-padding: 1rem;\n  --tab-border-radius: 0;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset-block: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      inset-inline-start: 0;\n    }\n\n    &--right {\n      inset-inline-end: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        inset-inline-start: 7%;\n        inset-block-end: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n\n      padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n      padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n          rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--tabs-padding-end)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        padding-inline: 0 var(--tabs-padding-end);\n        padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-block-end: -2px;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n      border-inline-start:\n        solid var(--indicator-size)\n        var(--indicator-track-color);\n      text-align: start;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-inline-start: calc(-1 * 2px);\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      border-radius: var(--content-border-radius);\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n  Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n\n      this.syncActiveTabIndicator();\n\n      // active tab can be changed on init - this won't be ready. No big thing\n      if (this.nav && ['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    if (!tab) return;\n\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n\n    if (!this.activeTabIndicator) return;\n\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const activeEl = document.activeElement as any;\n    if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      ![\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    )\n      return;\n\n    const tabs = this.getAllActiveTabs;\n    let index = tabs.indexOf(activeEl);\n\n    if (event.key === 'Home') index = 0;\n    if (event.key === 'End') index = tabs.length - 1;\n\n    if (this.placement === 'top') {\n      if (\n        (this.isRtl && event.key === 'ArrowRight') ||\n        (!this.isRtl && event.key === 'ArrowLeft')\n      ) {\n        index = Math.max(0, index - 1);\n      }\n      if (\n        (this.isRtl && event.key === 'ArrowLeft') ||\n        (!this.isRtl && event.key === 'ArrowRight')\n      ) {\n        index = Math.min(tabs.length - 1, index + 1);\n      }\n    }\n\n    if (this.placement === 'start') {\n      if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n      if (event.key === 'ArrowDown')\n        index = Math.min(tabs.length - 1, index + 1);\n    }\n\n    tabs[index].setFocus();\n\n    if (this.placement === 'top') {\n      scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n    }\n    // need to stop bubbling otherwise it will focus on parent tabs if nested\n    event.stopPropagation();\n    // stop the browser moving about\n    event.preventDefault();\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    const endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    const endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const xDiff = this.initialTouchX - touch.clientX;\n    const yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedElements({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    if (!window['ResizeObserver']) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    if (Build.isServer) {\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.setAriaLabels();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n                aria-orientation={\n                  this.placement === 'start' ? 'vertical' : 'horizontal'\n                }\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}