@nanoporetech-digital/components 5.9.3 → 5.9.5

package/dist/components/transitions.js

@@ -19,14 +19,14 @@ const displayTransition = (el, options) => {
   return new Promise((resolve) => {
     const showCb = (e) => {
       if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-        (!opts.transitionProp || opts.transitionProp === e.propertyName)) {
+        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
         resolve('shown');
         el.removeEventListener('transitionend', showCb);
       }
     };
     const hideCb = (e) => {
       if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
-        (!opts.transitionProp || opts.transitionProp === e.propertyName)) {
+        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
         el.style.display = 'none';
         resolve('hidden');
         el.removeEventListener('transitionend', hideCb);

package/dist/components/transitions.js.map

@@ -1 +1 @@
-{"file":"transitions.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACxD;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;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 options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string;\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp === e.propertyName)\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp === e.propertyName)\n      ) {\n        el.style.display = 'none';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(opts.className), 20);\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"version":3}
+{"file":"transitions.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACxD;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;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 options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(opts.className), 20);\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"version":3}

package/dist/esm/{dom-311c9e1e.js → dom-8599fac1.js}

@@ -30,7 +30,7 @@ function getDirectChildren(el, sel, elesOnly = true) {
       return Array.from(el.querySelectorAll(sel));
     }
     catch (e) {
-      console.log(e, 'an error sad');
+      console.error(e, 'an error sad');
     }
   }
   const ret = [];
@@ -72,4 +72,4 @@ function getOffset(element, parent) {
 
 export { getOffset as a, getSiblings as b, closestElement as c, getDirectChildren as g };
 
-//# sourceMappingURL=dom-311c9e1e.js.map
+//# sourceMappingURL=dom-8599fac1.js.map

package/dist/esm/{dom-311c9e1e.js.map → dom-8599fac1.js.map}

@@ -1 +1 @@
-{"file":"dom-311c9e1e.js","mappings":"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","names":[],"sources":["./src/utils/dom.ts"],"sourcesContent":["import { Build } from '@stencil/core';\n\nexport enum NODE_TYPE {\n  ElementNode = 1,\n  TextNode = 3,\n  CommentNode = 8,\n  DocumentNode = 9,\n  DocumentTypeNode = 10,\n  DocumentFragment = 11,\n}\n\nexport function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    const found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n * @returns an array of direct child DOM nodes\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (!Build.isServer && elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.log(e, 'an error sad');\n    }\n  }\n\n  const ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (\n          slotEl.nodeType === NODE_TYPE.ElementNode &&\n          (slotEl as Element).matches(sel)\n        )\n          ret.push(slotEl);\n        else if (slotEl.nodeType !== NODE_TYPE.ElementNode && !elesOnly)\n          ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = <T extends Element>(\n  el: Element,\n  sel?: string\n): Array<T> => {\n  const siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return { top: 0, left: 0 };\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"],"version":3}
+{"file":"dom-8599fac1.js","mappings":"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","names":[],"sources":["./src/utils/dom.ts"],"sourcesContent":["import { Build } from '@stencil/core';\n\nexport enum NODE_TYPE {\n  ElementNode = 1,\n  TextNode = 3,\n  CommentNode = 8,\n  DocumentNode = 9,\n  DocumentTypeNode = 10,\n  DocumentFragment = 11,\n}\n\nexport function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    const found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n * @returns an array of direct child DOM nodes\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (!Build.isServer && elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.error(e, 'an error sad');\n    }\n  }\n\n  const ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (\n          slotEl.nodeType === NODE_TYPE.ElementNode &&\n          (slotEl as Element).matches(sel)\n        )\n          ret.push(slotEl);\n        else if (slotEl.nodeType !== NODE_TYPE.ElementNode && !elesOnly)\n          ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = <T extends Element>(\n  el: Element,\n  sel?: string\n): Array<T> => {\n  const siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return { top: 0, left: 0 };\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"],"version":3}

package/dist/esm/nano-accordion.entry.js

@@ -2,7 +2,7 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-06666022.js';
-import { g as getDirectChildren } from './dom-311c9e1e.js';
+import { g as getDirectChildren } from './dom-8599fac1.js';
 import { c as createColorClasses } from './theme-82feb8cf.js';
 
 const accordionCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}";

package/dist/esm/nano-alert.entry.js

@@ -3,10 +3,10 @@
  */
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-06666022.js';
 import { M as Modal } from './modal-bd9638c0.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-952d292a.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-ec7ac257.js';
 import { c as createColorClasses } from './theme-82feb8cf.js';
 import './tabbable-26a66a22.js';
-import './dom-311c9e1e.js';
+import './dom-8599fac1.js';
 
 const alertCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px)}";
 

package/dist/esm/nano-algolia-pagination.entry.js

@@ -27,7 +27,7 @@ const AlgoliaPagination = class {
   async prevPage() { }
   /** Go to a particular page */
   async goToPage(page) {
-    console.log(page);
+    console.info(page);
   }
   updateContent() {
     this.outputTo = this.outputSlot || this.outputEle;

package/dist/esm/nano-algolia-pagination.entry.js.map

@@ -1 +1 @@
-{"file":"nano-algolia-pagination.entry.js","mappings":";;;;;;MAsBa,iBAAiB;;;;uBASG,IAAI;qBACL,KAAK;qBACL,KAAK;gBACV,IAAI;;wBAEQ,IAAI;0BACN,KAAK;qBAGZ,IAAI;;EAQhC,iBAAiB,MAAK;EAGtB,oBAAoB;IAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAClC;;EAID,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,CAAC,IAAY;IACzB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;GACnB;EAEO,aAAa;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC7D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;;;;;GAMF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;;GAEzE;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,IAAI;OAC7B,IAED,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP;GACH;;;;;;;AAGH;AACA,QAAQ,CAAC,iBAAgD,EAAE;EACzD,cAAc;EACd,eAAe;EACf,aAAa;CACd,CAAC;;;;","names":[],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport type { IndexResult } from '../../interface';\n\n/**\n * Displays results from Algolia searches.\n * TODO / WIP */\n@Component({\n  tag: 'nano-algolia-pagination',\n  shadow: true,\n})\nexport class AlgoliaPagination {\n  @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n  private outputEle: HTMLDivElement;\n  private outputSlot: HTMLElement;\n  private outputTo: HTMLElement;\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n\n  @State() currentPage: number = null;\n  @State() canGoPrev: boolean = false;\n  @State() canGoNext: boolean = false;\n  @State() show: boolean = true;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() indexResults: IndexResult = null;\n  @State() infiniteScroll: boolean = false;\n\n  /** Max number of page numbers to show */\n  @Prop() maxToShow: number = null;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n  @Watch('currentPage')\n  currentPageChange() {}\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.show = !this.infiniteScroll;\n  }\n\n  /** Go to next page from current */\n  @Method()\n  async nextPage() {}\n\n  /** Go to previous page from current */\n  @Method()\n  async prevPage() {}\n\n  /** Go to a particular page */\n  @Method()\n  async goToPage(page: number) {\n    console.log(page);\n  }\n\n  private updateContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n    if (!this.templateStr || !this.outputTo || !this.indexResults) {\n      this.show = false;\n      return;\n    }\n\n    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n    //   orig: { ...this.currentIndex.origFilters[this.filterName] },\n    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n    // });\n  }\n\n  componentWillLoad() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n    if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n    // this.boundChangeEvent = this.handleChangeEvent.bind(this);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-pagination': this.show,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n  'indexResults',\n  'filterChanged',\n  'tplRenderFn',\n]);\n"],"version":3}
+{"file":"nano-algolia-pagination.entry.js","mappings":";;;;;;MAsBa,iBAAiB;;;;uBASG,IAAI;qBACL,KAAK;qBACL,KAAK;gBACV,IAAI;;wBAEQ,IAAI;0BACN,KAAK;qBAGZ,IAAI;;EAQhC,iBAAiB,MAAK;EAGtB,oBAAoB;IAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAClC;;EAID,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,MAAK;;EAInB,MAAM,QAAQ,CAAC,IAAY;IACzB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpB;EAEO,aAAa;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MAC7D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;;;;;GAMF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;;GAEzE;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,IAAI;OAC7B,IAED,WAAK,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IACvC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP;GACH;;;;;;;AAGH;AACA,QAAQ,CAAC,iBAAgD,EAAE;EACzD,cAAc;EACd,eAAe;EACf,aAAa;CACd,CAAC;;;;","names":[],"sources":["./src/components/algolia/algolia-pagination.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport type { IndexResult } from '../../interface';\n\n/**\n * Displays results from Algolia searches.\n * TODO / WIP */\n@Component({\n  tag: 'nano-algolia-pagination',\n  shadow: true,\n})\nexport class AlgoliaPagination {\n  @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n  private outputEle: HTMLDivElement;\n  private outputSlot: HTMLElement;\n  private outputTo: HTMLElement;\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n\n  @State() currentPage: number = null;\n  @State() canGoPrev: boolean = false;\n  @State() canGoNext: boolean = false;\n  @State() show: boolean = true;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() indexResults: IndexResult = null;\n  @State() infiniteScroll: boolean = false;\n\n  /** Max number of page numbers to show */\n  @Prop() maxToShow: number = null;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n  @Watch('currentPage')\n  currentPageChange() {}\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.show = !this.infiniteScroll;\n  }\n\n  /** Go to next page from current */\n  @Method()\n  async nextPage() {}\n\n  /** Go to previous page from current */\n  @Method()\n  async prevPage() {}\n\n  /** Go to a particular page */\n  @Method()\n  async goToPage(page: number) {\n    console.info(page);\n  }\n\n  private updateContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n    if (!this.templateStr || !this.outputTo || !this.indexResults) {\n      this.show = false;\n      return;\n    }\n\n    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n    //   orig: { ...this.currentIndex.origFilters[this.filterName] },\n    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n    // });\n  }\n\n  componentWillLoad() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n    if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n    // this.boundChangeEvent = this.handleChangeEvent.bind(this);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-pagination': this.show,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole(AlgoliaPagination as WormholeConsumerConstructor, [\n  'indexResults',\n  'filterChanged',\n  'tplRenderFn',\n]);\n"],"version":3}

package/dist/esm/nano-algolia.entry.js

@@ -3,7 +3,7 @@
  */
 import { g as getElement, e as getRenderingRef, r as registerInstance, c as createEvent, w as writeTask, d as readTask, h, a as Host } from './index-06666022.js';
 import { a as algoliasearch } from './algoliasearch-lite.esm.browser-04891fdc.js';
-import { g as getDirectChildren } from './dom-311c9e1e.js';
+import { g as getDirectChildren } from './dom-8599fac1.js';
 import { C as ComponentStore } from './component-store-54df2005.js';
 import { g as getDefaultExportFromCjs, c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-04a0e019.js';
 import { d as debounce } from './throttle-ac4fcefa.js';

package/dist/esm/nano-datalist_3.entry.js

@@ -4,7 +4,7 @@
 import { r as registerInstance, c as createEvent, w as writeTask, h, a as Host, g as getElement } from './index-06666022.js';
 import { g as getActiveElement } from './active-element-75b7c8a0.js';
 import { d as debounce } from './throttle-ac4fcefa.js';
-import { g as getDirectChildren } from './dom-311c9e1e.js';
+import { g as getDirectChildren } from './dom-8599fac1.js';
 import { g as getTextContent } from './slot-8126e238.js';
 
 const datalistCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";

package/dist/esm/nano-details.entry.js

@@ -2,7 +2,7 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { r as registerInstance, c as createEvent, B as Build, h, g as getElement } from './index-06666022.js';
-import { d as displayTransition } from './transitions-d4403d6f.js';
+import { d as displayTransition } from './transitions-b4657201.js';
 
 const detailsCss = ":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);--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]){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(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
 
@@ -66,7 +66,7 @@ const Details = class {
     displayTransition(this.bodyEl, {
       className: 'is-shown',
       show: false,
-      transitionProp: 'height',
+      transitionProp: ['height'],
     }).then(() => {
       this.stateChanging = false;
       this.detailsEl.open = false;
@@ -88,7 +88,7 @@ const Details = class {
     displayTransition(this.bodyEl, {
       className: 'is-shown',
       show: true,
-      transitionProp: 'height',
+      transitionProp: ['height'],
     }).then(() => {
       this.stateChanging = false;
       this.bodyEl.style.height = 'auto';

package/dist/esm/nano-details.entry.js.map

@@ -1 +1 @@
-{"file":"nano-details.entry.js","mappings":"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","names":[],"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 --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\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  --content-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  --transition-duration: 0.2s;\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(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-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: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\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  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: 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, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: 'height',\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\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, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: 'height',\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + '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"],"version":3}
+{"file":"nano-details.entry.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,q0GAAq0G;;MCkC30G,OAAO;;;;;;;IAIV,kBAAa,GAAY,KAAK,CAAC;IAsD/B,cAAS,GAAG,CAAC,CAAgB;MACnC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAEhD,QAAQ,CAAC,CAAC,GAAG;QACX,KAAK,OAAO,CAAC;QACb,KAAK,GAAG;UACN,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;UACvB,MAAM;QACR,KAAK,SAAS;UACZ,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,MAAM;QACR,KAAK,WAAW;UACd,CAAC,CAAC,cAAc,EAAE,CAAC;UACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;UACjB,MAAM;OACT;KACF,CAAC;IAEM,gBAAW,GAAG,CAAC,CAAa;MAClC,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;MAEtB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAChD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB,CAAC;iBAtEsB,EAAE;gBAG8B,KAAK;oBAGD,KAAK;oBAGrC,KAAK;wBAGF,EAAE;0BAKR,KAAK;;EAqB9B,WAAW;IACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;MACtB,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EA8BO,IAAI;IACV,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElD,IAAI,SAAS,CAAC,gBAAgB,EAAE;MAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;MAC3B,OAAO;KACR;IAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IAC/C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAEnD,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE;MAC7B,SAAS,EAAE,UAAU;MACrB,IAAI,EAAE,KAAK;MACX,cAAc,EAAE,CAAC,QAAQ,CAAC;KAC3B,CAAC,CAAC,IAAI,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;MAC5B,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;KAC7B,CAAC,CAAC;IAEH,qBAAqB,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;KAClC,CAAC,CAAC;GACJ;EAEO,IAAI;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;IAE3B,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;MAC5B,OAAO;KACR;IAED,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE;MAC7B,SAAS,EAAE,UAAU;MACrB,IAAI,EAAE,IAAI;MACV,cAAc,EAAE,CAAC,QAAQ,CAAC;KAC3B,CAAC,CAAC,IAAI,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;MAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;MAClC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;KAC7B,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;MACtB,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,WAAW;UACpC,IAAI,CAAC,WAAW;UAChB,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,IAAI,CAAC;GAC3C;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS;MAAE,OAAO;IAE3D,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO;MACrC,IAAI,IAAI,CAAC,aAAa;QAAE,OAAO;MAE/B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,IAAI,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,MAAM,CAAC,aAAa,KAAK,MAAM,EAAE;UACnE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACjC;OACF;KACF,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;GACvD;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACrE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;GAClE;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,GAAG,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3D,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAED,MAAM;IACJ,QACE,eACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,CAAqB,MAAM,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EACpD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eACE,IAAI,EAAC,QAAQ,mBACC,SAAS,mBACR,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,mBAC5B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACpC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAE,EAAE,EAC/C,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,YAAY,IAChB,YACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,IAAI,CAAC,YAAY,MAAM,GAAG,EAAE;OAC9D,IAED,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,KAEP,EAAE,CACH,EACD,WAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,YAAM,IAAI,EAAC,OAAO,GAAG,CAC5C,EACL,IAAI,CAAC,UAAU,IACd,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE;QACL,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,IAAI,CAAC,YAAY,MAAM,GAAG,EAAE;OAC9D,IAED,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,KAEP,EAAE,CACH,CACO,EACV,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,EACjC,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,qBACG,QAAQ,IAExB,WACE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EACpC,KAAK,EAAC,SAAS,EACf,EAAE,EAAC,SAAS,IAEZ,eAAQ,CACJ,CACF,CACE,EACV;GACH;;;;;;;;;;","names":[],"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 --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\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  --content-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  --transition-duration: 0.2s;\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(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-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: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\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  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: 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, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\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, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + '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"],"version":3}

package/dist/esm/nano-dialog.entry.js

@@ -3,11 +3,11 @@
  */
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-06666022.js';
 import { M as Modal } from './modal-bd9638c0.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-952d292a.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-ec7ac257.js';
 import { h as hasSlot } from './slot-8126e238.js';
 import { C as ComponentStore } from './component-store-54df2005.js';
 import './tabbable-26a66a22.js';
-import './dom-311c9e1e.js';
+import './dom-8599fac1.js';
 import './throttle-ac4fcefa.js';
 
 const dialogCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{-webkit-border-before:5px solid var(--tint-color);border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{-webkit-padding-before:var(--body-padding-v);padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){-webkit-margin-end:var(--nano-spacing-small, 8px) !important;margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";

package/dist/esm/nano-drawer.entry.js

@@ -3,12 +3,12 @@
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-06666022.js';
 import { M as Modal } from './modal-bd9638c0.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-952d292a.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-ec7ac257.js';
 import { h as hasSlot } from './slot-8126e238.js';
 import { w as waitForEvent } from './events-6a805b42.js';
 import { C as ComponentStore } from './component-store-54df2005.js';
 import './tabbable-26a66a22.js';
-import './dom-311c9e1e.js';
+import './dom-8599fac1.js';
 import './throttle-ac4fcefa.js';
 
 const drawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline-end:auto;inset-inline-start:0;width:100%;height:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline-end:auto;inset-inline-start:0;width:100%;height:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline-end:auto;inset-inline-start:0;width:var(--size);height:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline-end:0;inset-inline-start:auto;width:var(--size);height:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{-webkit-padding-before:var(--body-spacing);padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){-webkit-margin-end:var(--nano-spacing-xsmall, 4px);margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";

package/dist/esm/nano-global-nav-user-profile_3.entry.js

@@ -2,8 +2,8 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { r as registerInstance, h, i as getAssetPath, c as createEvent, a as Host, g as getElement } from './index-06666022.js';
-import { b as getSiblings, g as getDirectChildren, c as closestElement } from './dom-311c9e1e.js';
-import { d as displayTransition } from './transitions-d4403d6f.js';
+import { b as getSiblings, g as getDirectChildren, c as closestElement } from './dom-8599fac1.js';
+import { d as displayTransition } from './transitions-b4657201.js';
 import { g as getTabbableElements } from './tabbable-26a66a22.js';
 import { g as getActiveElement } from './active-element-75b7c8a0.js';
 import { c as createColorClasses } from './theme-82feb8cf.js';
@@ -199,7 +199,7 @@ const NavItem = class {
     }
   }
   handleClose(e) {
-    if (!this.didOpen || !this.hasSecondarySlot)
+    if (!this.didOpen || !this.hasSecondarySlot || !this.closeOnBlur)
       return;
     if (!e.composedPath().some((el) => el === this.secondaryDiv))
       this.toggleSecondary();
@@ -228,6 +228,9 @@ const NavItem = class {
       this.el.parentElement === this.globalNavEle ||
         !!this.el.closest('.global-nav');
   }
+  componentDidLoad() {
+    this.openChange();
+  }
   disconnectedCallback() {
     this.btn.removeEventListener('click', this.toggleSecondary);
     this.btn.removeEventListener('focus', this.handleFocus);