@nanoporetech-digital/components 7.5.5 → 7.7.0

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

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

package/dist/components/nano-tab.js

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
@@ -46,12 +47,12 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
             this.handleCloseClick();
     };
     render() {
-        return (h(Host, { key: 'd563546e0cf992e2dd33534b6a39706e1ed3094a', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false' }, h("div", { key: 'a467e6b0bf36c32efe02a00f7596eaea92ac21c9', part: "base", class: {
+        return (h(Host, { key: '9204530dd88067b2d463fb75e96094856f5b96f8', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '13093d143297235f93f4d79bbb8c893cfff69b6c', part: "base", class: {
                 nanotab: true,
                 'nanotab--active': this.active,
                 'nanotab--disabled': this.disabled,
                 'nanotab--closable': this.closable,
-            } }, h("slot", { key: 'b7d6bfeca2bb488155bfdb7c2c7ab97ef6f68280', name: "start" }), h("div", { key: '035e2c120ed6773969dee5477b871314938e60d2', part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", { key: '6690cc8020408cd2b30bfcc5b5eac9f24e461156' })), this.closable && !this.disabled && (h("nano-icon-button", { key: '4dc8951c12d07a89acfec20dbc722bb147cae53d', label: "Close this tab", iconName: "light/xmark", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { key: '0f54d47bb9b53e5de97ca9ed6b4362087727c8f6', name: "end" }))));
+            } }, h("slot", { key: '89560d0bc1eb63f654cd67859d20f6a2f7156c6c', name: "start" }), h("div", { key: '2960d4c7ecb1a69d578b46a2a3dc0fce8420cf1b', part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", { key: '8060e84517e8b156b8bec769ff3f3dade3999720' })), this.closable && !this.disabled && (h("nano-icon-button", { key: '0ed730a6b5161e631e4750ff818d03a9144ff5b8', label: "Close this tab", iconName: "light/xmark", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { key: '2dbdea7e63a88719e597bc7237f2f9fdf5ed3ee8', name: "end" }))));
     }
     static get style() { return NanoTabStyle0; }
 }, [1, "nano-tab", {

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

@@ -1 +1 @@
-{"file":"nano-tab.js","mappings":";;;;;;;;AAAA,MAAM,MAAM,GAAG,kuGAAkuG,CAAC;AAClvG,sBAAe,MAAM;;ACWrB,IAAI,EAAE,GAAG,CAAC,CAAC;MAiBE,GAAG;;;;;;;IACN,KAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC3B,GAAG,CAAc;;;IAKA,KAAK,GAAG,EAAE,CAAC;;IAGX,MAAM,GAAG,KAAK,CAAC;;IAGf,QAAQ,GAAG,KAAK,CAAC;;IAGlC,QAAQ,GAAG,KAAK,CAAC;;IAGhB,YAAY,CAAe;;IAIpC,MAAM,QAAQ;QACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACzC;;IAID,MAAM,WAAW;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KACjB;IAEO,gBAAgB,GAAG;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAgB;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAC9B,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE7C,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,IAED,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EACpD,KAAK,EAAC,cAAc,IAEpB,8DAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9B,yEACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,IAAI,EAAC,WAAW,GAChB,CACH,EACD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n  * @prop --focus-shadow: Defaults to #{tokens.$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 #{tokens.$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n  * @prop --text-color: Defaults to #{map.get(tokens.$colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get(tokens.$colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get(tokens.$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(tokens.$colors, lightblue)};\n  * @prop --border-radius: inherit;\n  */\n\n:host {\n  --focus-shadow: #{tokens.$control-focus-style};\n  --padding-v: 0.75rem;\n  --padding-h: 1rem;\n  --bg-rgb: #{tokens.$layer-bg-color-rgb};\n  --active-bg: rgb(var(--bg-rgb) / 100%);\n  --inactive-bg: rgb(var(--bg-rgb) / 70%);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get(tokens.$colors, blue)};\n  --disabled-text-color: #{map.get(tokens.$colors, darkgrey)};\n  --active-text-color: #{map.get(tokens.$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(tokens.$colors, lightblue)};\n  --tab-indicator-size: 5px;\n  --border-radius: inherit;\n\n  display: inline-block;\n  cursor: pointer;\n  border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n  --padding-v: 1rem;\n  --padding-h: 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(.nano-sortable__dragged) {\n  box-shadow: none;\n\n  .nanotab {\n    box-shadow: tokens.$layer-shadow-large;\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:\n        solid var(--tab-indicator-size)\n        var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include mx.text-inherit();\n\n  border-radius: var(--border-radius);\n  margin-inline-end: var(--tab-spacing);\n  padding-block: var(--padding-v);\n  padding-inline: var(--padding-h);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  user-select: none;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n  position: relative;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  & ::slotted(.nano-sortable__keyboard-handle) {\n    position: absolute;\n    inset-inline-end: -1em;\n    background: var(--inactive-bg);\n    z-index: 1;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &--disabled {\n    background: rgb(var(--disabled-bg-rgb) / 100%);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &--closable {\n    padding-inline-end: 0;\n  }\n\n  &__tab {\n    display: flex;\n    border-radius: inherit;\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    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n    }\n\n    &:focus-visible:not(.nanotab--disabled)::before {\n      box-shadow: var(--focus-shadow) inset;\n\n      .nanotab--active & {\n        box-shadow: var(--focus-shadow);\n      }\n    }\n  }\n\n  &__close-button {\n    margin-inline: #{tokens.$spacing-small} calc(var(--padding-h) / 2);\n    appearance: none !important;\n\n    --padding: #{tokens.$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 start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\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\n        id={this.host.id || this.tabId}\n        role=\"tab\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n      >\n        <div\n          part=\"base\"\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n        >\n          <slot name=\"start\" />\n          <div\n            part=\"tab\"\n            ref={(el) => (this.tab = el)}\n            tabindex={this.disabled || !this.active ? '-1' : '0'}\n            class=\"nanotab__tab\"\n          >\n            <slot />\n          </div>\n          {this.closable && !this.disabled && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/xmark\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              part=\"close-btn\"\n            />\n          )}\n          <slot name=\"end\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-tab.js","mappings":";;;;;;;;;AAAA,MAAM,MAAM,GAAG,kuGAAkuG,CAAC;AAClvG,sBAAe,MAAM;;ACWrB,IAAI,EAAE,GAAG,CAAC,CAAC;MAiBE,GAAG;;;;;;;IACN,KAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAC3B,GAAG,CAAc;;;IAKA,KAAK,GAAG,EAAE,CAAC;;IAGX,MAAM,GAAG,KAAK,CAAC;;IAGf,QAAQ,GAAG,KAAK,CAAC;;IAGlC,QAAQ,GAAG,KAAK,CAAC;;IAGhB,YAAY,CAAe;;IAIpC,MAAM,QAAQ;QACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACzC;;IAID,MAAM,WAAW;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KACjB;IAEO,gBAAgB,GAAG;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAgB;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAC9B,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,KAAK,EAAC,UAAU,IAEhB,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,IAED,6DAAM,IAAI,EAAC,OAAO,GAAG,EACrB,4DACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EACpD,KAAK,EAAC,cAAc,IAEpB,8DAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9B,yEACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,IAAI,EAAC,WAAW,GAChB,CACH,EACD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n  * @prop --focus-shadow: Defaults to #{tokens.$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 #{tokens.$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n  * @prop --text-color: Defaults to #{map.get(tokens.$colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get(tokens.$colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get(tokens.$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(tokens.$colors, lightblue)};\n  * @prop --border-radius: inherit;\n  */\n\n:host {\n  --focus-shadow: #{tokens.$control-focus-style};\n  --padding-v: 0.75rem;\n  --padding-h: 1rem;\n  --bg-rgb: #{tokens.$layer-bg-color-rgb};\n  --active-bg: rgb(var(--bg-rgb) / 100%);\n  --inactive-bg: rgb(var(--bg-rgb) / 70%);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get(tokens.$colors, blue)};\n  --disabled-text-color: #{map.get(tokens.$colors, darkgrey)};\n  --active-text-color: #{map.get(tokens.$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(tokens.$colors, lightblue)};\n  --tab-indicator-size: 5px;\n  --border-radius: inherit;\n\n  display: inline-block;\n  cursor: pointer;\n  border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n  --padding-v: 1rem;\n  --padding-h: 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(.nano-sortable__dragged) {\n  box-shadow: none;\n\n  .nanotab {\n    box-shadow: tokens.$layer-shadow-large;\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:\n        solid var(--tab-indicator-size)\n        var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include mx.text-inherit();\n\n  border-radius: var(--border-radius);\n  margin-inline-end: var(--tab-spacing);\n  padding-block: var(--padding-v);\n  padding-inline: var(--padding-h);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  user-select: none;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n  position: relative;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  & ::slotted(.nano-sortable__keyboard-handle) {\n    position: absolute;\n    inset-inline-end: -1em;\n    background: var(--inactive-bg);\n    z-index: 1;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &--disabled {\n    background: rgb(var(--disabled-bg-rgb) / 100%);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &--closable {\n    padding-inline-end: 0;\n  }\n\n  &__tab {\n    display: flex;\n    border-radius: inherit;\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    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n    }\n\n    &:focus-visible:not(.nanotab--disabled)::before {\n      box-shadow: var(--focus-shadow) inset;\n\n      .nanotab--active & {\n        box-shadow: var(--focus-shadow);\n      }\n    }\n  }\n\n  &__close-button {\n    margin-inline: #{tokens.$spacing-small} calc(var(--padding-h) / 2);\n    appearance: none !important;\n\n    --padding: #{tokens.$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nlet id = 0;\n\n/**\n * @slot start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\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\n        id={this.host.id || this.tabId}\n        role=\"tab\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        class=\"nano-tab\"\n      >\n        <div\n          part=\"base\"\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n        >\n          <slot name=\"start\" />\n          <div\n            part=\"tab\"\n            ref={(el) => (this.tab = el)}\n            tabindex={this.disabled || !this.active ? '-1' : '0'}\n            class=\"nanotab__tab\"\n          >\n            <slot />\n          </div>\n          {this.closable && !this.disabled && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/xmark\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              part=\"close-btn\"\n            />\n          )}\n          <slot name=\"end\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-table.js

@@ -2,6 +2,7 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { consoleError, h, Fragment, getElement, getRenderingRef, writeTask, readTask, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { h as h$1 } from './renderer.js';
 import { a as cyrb53 } from './math.js';
 import { d as debounce } from './throttle.js';
 import { f as findScrollParent } from './scroll-parent.js';
@@ -451,7 +452,7 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
     let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
     const content = colheadFootRender(column);
     if (!content)
-        return h(Fragment, null);
+        return h$1(Fragment, null);
     props =
         Number(props.colSpan) > 1
             ? { ...props, scope: 'colgroup' }
@@ -464,18 +465,18 @@ const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
             : 'none';
         props = { ...props, 'aria-sort': sort };
     }
-    return (h("th", { ...props, key: column.prop }, isSortable() ? (h("button", { class: {
+    return (h$1("th", { ...props, key: column.prop }, isSortable() ? (h$1("button", { class: {
             [`${CSSNAMESPACE}__order-btn`]: true,
             [`${CSSNAMESPACE}__cell-content`]: true,
         }, onClick: handleColumnSortClick },
         colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/filter" })),
+        column.filter !== undefined && column.filter !== null && (h$1("nano-icon", { name: "light/filter" })),
         !!column.order &&
-            (column.order === 'desc' ? (h("nano-icon", { name: "solid/arrow-down-long" })) : (h("nano-icon", { name: "solid/arrow-up-long" }))),
-        h("div", { class: `${CSSNAMESPACE}__status-icons` },
-            h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` },
+            (column.order === 'desc' ? (h$1("nano-icon", { name: "solid/arrow-down-long" })) : (h$1("nano-icon", { name: "solid/arrow-up-long" }))),
+        h$1("div", { class: `${CSSNAMESPACE}__status-icons` },
+            h$1("nano-icon", { name: "light/chevron-down" })))) : (h$1("div", { class: `${CSSNAMESPACE}__cell-content` },
         colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/bars-filter" }))))));
+        column.filter !== undefined && column.filter !== null && (h$1("nano-icon", { name: "light/bars-filter" }))))));
 };
 
 // TABLE CELL
@@ -505,7 +506,8 @@ function cellRender(rowIndex, colIndex) {
     let hCalled = false;
     const hWrap = (...args) => {
         hCalled = true;
-        return h(...args);
+        // @ts-expect-error - h mismatch
+        return h$1(...args);
     };
     let tplResult = tpl ? tpl(hWrap, model) : undefined;
     if (tplResult &&
@@ -521,7 +523,7 @@ function cellRender(rowIndex, colIndex) {
         // custom rendering can render to the templateEle OR return a promise<string>
         tplResult = result && result['then'] ? result : templateEle;
     }
-    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, model.cellModel?.toString())) : ('');
+    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h$1(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
     const store = fetchStores();
@@ -540,7 +542,7 @@ const baseCellClasses = (colIndex, toString = false) => {
 const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
     const Content = () => nestedContent
         ? nestedContent()
-        : cellRender(rowIndex, colIndex) || (h("span", { class: "placeholder" }, "\u00A0"));
+        : cellRender(rowIndex, colIndex) || (h$1("span", { class: "placeholder" }, "\u00A0"));
     let CellType = 'td';
     const tableInstance = getRenderingRef();
     const store = fetchStores();
@@ -557,7 +559,7 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
     }
     const ContentWrap = (props) => {
         const content = Content();
-        return (h("div", { ref: (d) => {
+        return (h$1("div", { ref: (d) => {
                 if (!d)
                     return;
                 if (content instanceof Element) {
@@ -579,20 +581,20 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
             !(content instanceof Element) &&
             content));
     };
-    return (h(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+    return (h$1(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (h$1("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
             e.detail.x) },
-        h("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
-            h(ContentWrap, null),
-            h("span", { slot: "content" },
-                h(Content, null))))) : (h(ContentWrap, null))));
+        h$1("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
+            h$1(ContentWrap, null),
+            h$1("span", { slot: "content" },
+                h$1(Content, null))))) : (h$1(ContentWrap, null))));
 };
 
 const tableCellContent = (props, children, ctx) => {
-    const cell = (h("div", { ...props.wrapperProps, class: {
+    const cell = (h$1("div", { ...props.wrapperProps, class: {
             [`${CSSNAMESPACE}__cell-content`]: true,
             [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
         } }, children));
-    return props.header ? (h("th", { scope: ctx, ...props.cellProps }, cell)) : (h("td", { ...props.cellProps }, cell));
+    return props.header ? (h$1("th", { scope: ctx, ...props.cellProps }, cell)) : (h$1("td", { ...props.cellProps }, cell));
 };
 const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
     // helper, generates <td> or <th>
@@ -631,8 +633,8 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
         });
     };
     if (tpl) {
-        let toRender = tpl(h, {
-            renderedRow: (h("tr", { ...props, key: rowModel.__uuid }, children)),
+        let toRender = tpl(h$1, {
+            renderedRow: (h$1("tr", { ...props, key: rowModel.__uuid }, children)),
             rowModel,
             rowIndex,
         }, TableCell);
@@ -651,7 +653,7 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
         }
         return toRender;
     }
-    return (h("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
+    return (h$1("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
 };
 const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
 children, utils) => {
@@ -667,8 +669,8 @@ children, utils) => {
     const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
     const tpl = rowRenderer?.template;
     if (tpl) {
-        let toRender = tpl(h, {
-            renderedRow: h("tr", { ...props }, children),
+        let toRender = tpl(h$1, {
+            renderedRow: h$1("tr", { ...props }, children),
         }, TableHeadFootCell);
         if (Array.isArray(toRender)) {
             toRender = utils.map(toRender, (node) => {
@@ -690,7 +692,7 @@ children, utils) => {
         }
         return toRender;
     }
-    return h("tr", { ...props }, children);
+    return h$1("tr", { ...props }, children);
 };
 
 function addStyleSheet(id, css) {
@@ -1077,7 +1079,7 @@ class TablePinService {
     }
 }
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{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))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{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))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}";
 const NanoTableStyle0 = tableCss;
 
 const measurePerf = false;
@@ -1836,34 +1838,34 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
     }
     render() {
         this.blockElements = [];
-        return (h(Host, { key: '0dfa70321c64a0bcf724a2d569002ad2a7628b3e' }, h("div", { key: '2529765a9a47555b0ffc7a6c102f5ee8c8e826c6', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { key: '2064df2843d52c767582bd55f5c80402b88a961a', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
+        return (h$1(Host, { key: '7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa', class: "nano-table" }, h$1("div", { key: 'acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { key: '9a38da33f0cfb64329331510f196ef7c42e51ca3', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
                 if (this.tablePinnedService)
                     this.tablePinnedService.onResize();
-            } }), h("div", { key: '6d5bb14190158f9048d80e7c798bfd2f5187903b', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { key: 'bc3c93ec5824ad7b422d16245358fd48e02c739c', indeterminate: true, class: {
+            } }), h$1("div", { key: '25aad643f108a5e48319a20a70a36066eb099d5d', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h$1("nano-progress-bar", { key: '519fc388c4926af6bd9dfaba2112fa2db1dbc3cd', indeterminate: true, class: {
                 [`${CSSNAMESPACE}__progress-bar`]: true,
                 [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), h("table", { key: 'a606496f55694b411e2d6c205a83f542046f3dd0', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h("caption", { key: '90119adabff158e080227d8a3861e447841d9b20', class: {
+            } }), h$1("table", { key: 'b58a665666893b4b15aad6ab7e7a08bd20527cb2', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h$1("caption", { key: '5bc653ff3a487546e652cd787996dfde662fdf67', class: {
                 [`${CSSNAMESPACE}__caption`]: true,
                 [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-            }, id: 'nano-table-caption-' + this.renderId }, h("slot", { key: 'f6c0350ebd2ad4830bf78f1a585bace5ce1952b6', name: "caption" }, this.caption)), h("thead", { key: '7025ca54cd2abd4e2e62e5cf96c54e0f17a70040' }, h(TableHeadFootRow, { key: '099e17abd7c52510e7c9ba86eee41b46633a30eb', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
-            h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
+            }, id: 'nano-table-caption-' + this.renderId }, h$1("slot", { key: 'a6c855db5a74c123d08ad4e65954f17573c9ea3a', name: "caption" }, this.caption)), h$1("thead", { key: '743820b2abc85adac1fe4babf918be10a8e62a26' }, h$1(TableHeadFootRow, { key: 'e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
+            h$1(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (h("tbody", { key: 'ea169915fac335b9a07d1eccc410524d32d76fc4', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { key: '6b2a9cb5d8ff0d3388086fe3ea87eea5a9ef9f15', hidden: !!this._loading || !!this.blocks.length }, h("th", { key: '25e7f61517a3908cd63d086566180796b0f7186f', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { key: 'f6aa064a71d2c90d20a23eb7ad357b7f944b941b', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { key: 'a6b0dcf69763081eda4da4cf8d558096b169d314', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h$1("tbody", { key: '6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h$1("nano-skeleton", null) })))))))), h$1("tr", { key: '092f27f8726f12b7fa10d166b560d6df6593bbc1', hidden: !!this._loading || !!this.blocks.length }, h$1("th", { key: 'edfbca925f99550897c3b460a6efcb326863a591', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { key: '5d4b996c3141b6583317a2b28357fe7af3a873bc', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { key: '00db3e5649ccdc97062881ff7b3801fb1847c2db', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
                 [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
             } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
             const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-            return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-        })) : (h("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h("td", { colSpan: this.store.config.state.columns.length, style: {
+            return (h$1(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+        })) : (h$1("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h$1("td", { colSpan: this.store.config.state.columns.length, style: {
                 height: this.getBlockHeight(blockIndex) + 'px',
-            } })))))), this.showFooter && (h("tfoot", { key: '0110d1266efc39669b4ed953acf6d9cd0519e0ca' }, h(TableHeadFootRow, { key: '27c728a576ca2b4c54782914bc31726ec66a9b97', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
-            h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
+            } })))))), this.showFooter && (h$1("tfoot", { key: '15a1a79049ad87f63c87e2d905bc401a7d4bbb60' }, h$1(TableHeadFootRow, { key: 'ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
+            h$1(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))))), !!this.blocks.length && (h("nano-spinner", { key: '0486a33a182b6f6904efa9e2131d35a5c35c27ee', type: "circle", class: {
+        ]))))), !!this.blocks.length && (h$1("nano-spinner", { key: 'dd0041a5232a79a9f1882d2b9e5beebd79587a5d', type: "circle", class: {
                 [`${CSSNAMESPACE}__spinner`]: true,
                 [`${CSSNAMESPACE}__spinner--show`]: this._loading,
             } })))));