@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/components/nano-menu-drawer.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, writeTask, Build, h, Host } from '@ste
 import { c as closestElement } from './dom.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);font-family:inherit;font-size: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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{-webkit-padding-before:var(--global-nav-height);padding-block-start:var(--global-nav-height);-webkit-margin-before:calc(var(--global-nav-height) * -1);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;-webkit-box-flex:0;-ms-flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{-webkit-transition:inline-size 0.3s ease;transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-block-size:calc(100vh - 61px);min-block-size:calc(var(--vh, 1vh) * 100 - 61px);z-index:1}.content{inline-size:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);-webkit-margin-before:var(--padding-top);margin-block-start:var(--padding-top);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--padding-bottom);margin-block-end:var(--padding-bottom);-webkit-margin-start:calc(var(--padding-start) / 2);margin-inline-start:calc(var(--padding-start) / 2);border-radius:4px;padding-block:6px;padding-inline:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;inline-size:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{-webkit-margin-before:auto;margin-block-start:auto}.measure-ele{block-size:1px}";
+const menuDrawerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{-webkit-padding-before:var(--global-nav-height);padding-block-start:var(--global-nav-height);-webkit-margin-before:calc(var(--global-nav-height) * -1);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;-webkit-box-flex:0;-ms-flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{-webkit-transition:inline-size 0.3s ease;transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-block-size:calc(100vh - 61px);min-block-size:calc(var(--vh, 1vh) * 100 - 61px);z-index:1}.content{inline-size:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:\"\";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);-webkit-margin-before:var(--padding-top);margin-block-start:var(--padding-top);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--padding-bottom);margin-block-end:var(--padding-bottom);-webkit-margin-start:calc(var(--padding-start) / 2);margin-inline-start:calc(var(--padding-start) / 2);border-radius:4px;padding-block:6px;padding-inline:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;inline-size:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{-webkit-margin-before:auto;margin-block-start:auto}.measure-ele{block-size:1px}";
 
 const MenuDrawer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/nano-menu-drawer.js.map

@@ -1 +1 @@
-{"file":"nano-menu-drawer.js","mappings":"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","names":[],"sources":["./src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","./src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{map.get($colors, white)};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get($colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 61px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block-start: var(--padding-top);\n  margin-inline-end: 0;\n  margin-block-end: var(--padding-bottom);\n  margin-inline-start: calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-menu-drawer.js","mappings":"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","names":[],"sources":["./src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","./src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{map.get($colors, white)};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get($colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 61px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block-start: var(--padding-top);\n  margin-inline-end: 0;\n  margin-block-end: var(--padding-bottom);\n  margin-inline-start: calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-progress-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NanoProgressBar extends Components.NanoProgressBar, HTMLElement {}
+export const NanoProgressBar: {
+  prototype: NanoProgressBar;
+  new (): NanoProgressBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-progress-bar.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { P as ProgressBar, d as defineCustomElement$1 } from './progress-bar.js';
+
+const NanoProgressBar = ProgressBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoProgressBar, defineCustomElement };
+
+//# sourceMappingURL=nano-progress-bar.js.map

package/dist/components/nano-progress-bar.js.map

@@ -0,0 +1 @@
+{"file":"nano-progress-bar.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-tab.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const tabCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg:rgba(var(--bg-rgb), 1);--inactive-bg:rgba(var(--bg-rgb), 0.7);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size: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;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);--padding:var(--nano-spacing-xsmall, 4px) !important}";
+const tabCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg:rgba(var(--bg-rgb), 1);--inactive-bg:rgba(var(--bg-rgb), 0.7);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{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;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);--padding:var(--nano-spacing-xsmall, 4px) !important}";
 
 let id = 0;
 const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/nano-tab.js.map

@@ -1 +1 @@
-{"file":"nano-tab.js","mappings":";;;;;;;AAAA,MAAM,MAAM,GAAG,48FAA48F;;ACY39F,IAAI,EAAE,GAAG,CAAC,CAAC;MAWE,GAAG;;;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.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 --focus-shadow: Defaults to #{$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n  * @prop --text-color: Defaults to #{map.get($colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n  */\n\n:host {\n  --focus-shadow: #{$control-focus-style};\n  --padding: 0.75rem 1rem;\n  --bg-rgb: #{$layer-bg-color-rgb};\n  --active-bg: rgba(var(--bg-rgb), 1);\n  --inactive-bg: rgba(var(--bg-rgb), 0.7);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get($colors, blue)};\n  --disabled-text-color: #{map.get($colors, darkgrey)};\n  --active-text-color: #{map.get($colors, darkblue)};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{map.get($colors, lightblue)};\n  --tab-indicator-size: 5px;\n\n  display: inline-block;\n}\n\n:host([direction='vertical']) {\n  --padding: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-block-start: var(--tab-indicator-size);\n    border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n    &.nanotab--active {\n      margin-block-start: 0;\n      border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include text-inherit();\n\n  margin-inline-end: var(--tab-spacing);\n  padding: var(--padding);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  user-select: none;\n  cursor: pointer;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &:hover:not(.tab--disabled) {\n    text-shadow: 0 0 0.01px var(--text-color);\n  }\n\n  &:focus {\n    outline: none;\n    outline-style: none;\n    box-shadow: none;\n    border-color: transparent;\n  }\n\n  &:focus:not(.nanotab--disabled) {\n    box-shadow: var(--focus-shadow) inset;\n  }\n\n  &--disabled {\n    background: rgba(var(--disabled-bg-rgb), 1);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &__close-button {\n    margin-inline-start: #{$spacing-small};\n\n    --padding: #{$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  private handleCloseKeydown = (e: KeyboardEvent) => {\n    if (e.key === ' ') this.handleCloseClick();\n  };\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/times\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              tabIndex={-1}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-tab.js","mappings":";;;;;;;AAAA,MAAM,MAAM,GAAG,i+FAAi+F;;ACYh/F,IAAI,EAAE,GAAG,CAAC,CAAC;MAWE,GAAG;;;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAClC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,QAAQ,EAAE,CAAC,CAAC,GACZ,CACH,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.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 --focus-shadow: Defaults to #{$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n  * @prop --text-color: Defaults to #{map.get($colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n  */\n\n:host {\n  --focus-shadow: #{$control-focus-style};\n  --padding: 0.75rem 1rem;\n  --bg-rgb: #{$layer-bg-color-rgb};\n  --active-bg: rgba(var(--bg-rgb), 1);\n  --inactive-bg: rgba(var(--bg-rgb), 0.7);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get($colors, blue)};\n  --disabled-text-color: #{map.get($colors, darkgrey)};\n  --active-text-color: #{map.get($colors, darkblue)};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{map.get($colors, lightblue)};\n  --tab-indicator-size: 5px;\n\n  display: inline-block;\n}\n\n:host([direction='vertical']) {\n  --padding: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-block-start: var(--tab-indicator-size);\n    border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n    &.nanotab--active {\n      margin-block-start: 0;\n      border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include text-inherit();\n\n  margin-inline-end: var(--tab-spacing);\n  padding: var(--padding);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  user-select: none;\n  cursor: pointer;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &:hover:not(.tab--disabled) {\n    text-shadow: 0 0 0.01px var(--text-color);\n  }\n\n  &:focus {\n    outline: none;\n    outline-style: none;\n    box-shadow: none;\n    border-color: transparent;\n  }\n\n  &:focus:not(.nanotab--disabled) {\n    box-shadow: var(--focus-shadow) inset;\n  }\n\n  &--disabled {\n    background: rgba(var(--disabled-bg-rgb), 1);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &__close-button {\n    margin-inline-start: #{$spacing-small};\n\n    --padding: #{$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  private handleCloseKeydown = (e: KeyboardEvent) => {\n    if (e.key === ' ') this.handleCloseClick();\n  };\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/times\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              tabIndex={-1}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}