@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/cjs/nano-spinner.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nano-spinner.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,msMAAmsM;;MCkBzsM,OAAO;;;mBAEU,KAAK;gBAGA,KAAK;mBAGM,KAAK;;EAEjD,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;GAC5C;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,IACtDA,iBAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KAAK,KAAK,KAClBA,iBAAK,KAAK,EAAC,cAAc,IACvBA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,qCAAqC,GAAO,CACnD,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAIA,kBAAM,KAAK,EAAC,eAAe,GAAQ,CAC1D,EACL,IAAI,CAAC,OAAO,KACXA,iBAAK,KAAK,EAAC,eAAe,IACxBA,qBAAQ,CACJ,CACP,EACA,IAAI,CAAC,OAAO,IAAIA,iBAAK,KAAK,EAAC,kBAAkB,GAAO,CACjD,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$spinner-color-rgb}\n   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$spinner-color-rgb};\n  --indicator-color:\n    var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );\n  --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    inset: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-block-start-color: var(--indicator-color);\n    border-inline-end-color: var(--indicator-color);\n    border-inline-start-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding-block: 0;\n    padding-inline: 0.625em;\n    block-size: 4.375em;\n    inline-size: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 1.875em;\n      inset-inline-start: 50%;\n      transform: translateX(-50%) translateZ(0);\n      inline-size: 0.0625em;\n      inline-size: #{'max(.0625em, 1px)'};\n      block-size: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    inset-inline-start: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-block-start: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && <div class=\"spinner__overlay\"></div>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-spinner.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,oqMAAoqM;;MCkB1qM,OAAO;;;mBAEU,KAAK;gBAGA,KAAK;mBAGM,KAAK;;EAEjD,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;GAC5C;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,IACtDA,iBAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KAAK,KAAK,KAClBA,iBAAK,KAAK,EAAC,cAAc,IACvBA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACNA,iBAAK,KAAK,EAAC,wCAAwC,IACjDA,iBAAK,KAAK,EAAC,oCAAoC,GAAO,EACtDA,iBAAK,KAAK,EAAC,qCAAqC,GAAO,CACnD,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAIA,kBAAM,KAAK,EAAC,eAAe,GAAQ,CAC1D,EACL,IAAI,CAAC,OAAO,KACXA,iBAAK,KAAK,EAAC,eAAe,IACxBA,qBAAQ,CACJ,CACP,EACA,IAAI,CAAC,OAAO,IAAIA,iBAAK,KAAK,EAAC,kBAAkB,GAAO,CACjD,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$progress-indicator-color-rgb}\n   * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$progress-indicator-color-rgb};\n  --indicator-color: var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n  --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    inset: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-block-start-color: var(--indicator-color);\n    border-inline-end-color: var(--indicator-color);\n    border-inline-start-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding-block: 0;\n    padding-inline: 0.625em;\n    block-size: 4.375em;\n    inline-size: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 1.875em;\n      inset-inline-start: 50%;\n      transform: translateX(-50%) translateZ(0);\n      inline-size: 0.0625em;\n      inline-size: #{'max(.0625em, 1px)'};\n      block-size: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    inset-inline-start: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-block-start: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && <div class=\"spinner__overlay\"></div>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nano-tab-group.cjs.entry.js

@@ -11,7 +11,7 @@ const focusVisible = require('./focus-visible-569511f0.js');
 const scroll = require('./scroll-9bb5e060.js');
 const componentStore = require('./component-store-d7c8c326.js');
 const theme = require('./theme-50275e1a.js');
-const transitions = require('./transitions-d295a09e.js');
+const transitions = require('./transitions-5cd8f697.js');
 require('./throttle-f55496c8.js');
 require('./_commonjsHelpers-9f2314fc.js');
 

package/dist/cjs/nano-tab.cjs.entry.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-41582c2a.js');
 
-const tabCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg:rgba(var(--bg-rgb), 1);--inactive-bg:rgba(var(--bg-rgb), 0.7);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);--padding:var(--nano-spacing-xsmall, 4px) !important}";
+const tabCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg:rgba(var(--bg-rgb), 1);--inactive-bg:rgba(var(--bg-rgb), 0.7);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);--padding:var(--nano-spacing-xsmall, 4px) !important}";
 
 let id = 0;
 const Tab = class {

package/dist/cjs/nano-tab.cjs.entry.js.map

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

package/dist/cjs/{nano-table-8a898621.js → nano-table-844394ad.js}

@@ -5,6 +5,7 @@
 
 const index = require('./index-41582c2a.js');
 const math = require('./math-a8123703.js');
+const throttle = require('./throttle-f55496c8.js');
 const index$1 = require('./index-bb2a6ab8.js');
 
 const CSSNAMESPACE = 'nano-tbl';
@@ -111,7 +112,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
   })
 );
 
-const workerPromise = Promise.resolve().then(function () { return require('./table.worker-b0b0044a.js'); }).then(m => m.worker);
+const workerPromise = Promise.resolve().then(function () { return require('./table.worker-1bc19978.js'); }).then(m => m.worker);
 const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
 const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
 const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -130,17 +131,11 @@ function colsToWorker(columns) {
   return safeColumns;
 }
 const stores = new WeakMap();
-async function generateStore(host, rows, columns) {
-  // augment data with some internal props
-  rows = rows.map((row, i) => ({
-    ...row,
-    __index: i,
-    __uuid: math.cyrb53(Object.values(row).join()),
-  }));
+async function generateStore(host, columns, scrollParent) {
   const store = {
-    data: index$1.createStore({ rows }),
+    data: index$1.createStore({ rows: [] }),
     config: index$1.createStore({ columns }),
-    general: index$1.createStore({ workerId: null }),
+    general: index$1.createStore({ workerId: null, scrollParent, host }),
   };
   const id = await createWorkerStore(store.data.state.rows, colsToWorker(store.config.state.columns));
   store.general.state.workerId = id;
@@ -175,9 +170,15 @@ function storeSetData(host, rows) {
   const store = stores.get(host);
   if (!store)
     return;
-  if (store.general.state.workerId)
-    syncDataToWorker(store.general.state.workerId, rows);
+  // augment data with some internal props
+  rows = rows.map((row, i) => ({
+    ...row,
+    __index: i,
+    __uuid: math.cyrb53(Object.values(row).join()),
+  }));
   store.data.state.rows = rows;
+  if (store.general.state.workerId)
+    return syncDataToWorker(store.general.state.workerId, rows);
 }
 function storeSetConfig(host, columns) {
   const store = stores.get(host);
@@ -332,7 +333,7 @@ function cellRender(rowIndex, colIndex) {
  * @param col - the current column config object
  * @returns - a JSX node
  */
-function colheadRender(col) {
+function colheadFootRender(col) {
   const tpl = col?.colTemplate;
   return tpl ? (tpl(index.h, col)) : (index.h(index.Fragment, null, col.title));
 }
@@ -359,33 +360,56 @@ const stickyVIOs = new WeakMap();
 function addHObserver(el, pos, cb) {
   if (stickyHIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
     const positions = {};
-    if (pos === 'start')
-      positions.start = e.boundingClientRect.x < 0 && !e.isIntersecting;
-    if (pos === 'end')
+    if (pos === 'start') {
+      positions.start =
+        e.boundingClientRect.x -
+          (host.getBoundingClientRect().x + root.scrollLeft) <
+          0 && !e.isIntersecting;
+    }
+    if (pos === 'end') {
+      // TODO - sort these out for RtL
       positions.end =
-        e.boundingClientRect.width > e.intersectionRect.width &&
+        e.boundingClientRect.right > e.boundingClientRect.width &&
           !e.isIntersecting;
+    }
     cb(positions);
-  }, { threshold: [1], rootMargin: '1px 0px 1px 0px' });
+  }, {
+    threshold: [1],
+    rootMargin: '1px 0px 1px 0px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyHIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
 function addVObserver(el, pos, cb) {
   if (stickyVIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
-    console.log(e);
     const positions = {};
-    if (pos === 'top')
-      positions.top = e.boundingClientRect.y < 0 && !e.isIntersecting;
+    if (pos === 'top') {
+      positions.top =
+        e.boundingClientRect.y -
+          (host.getBoundingClientRect().y + root.scrollTop) <
+          0 && !e.isIntersecting;
+    }
     if (pos === 'bottom')
       positions.bottom =
         e.boundingClientRect.height > e.intersectionRect.height &&
           !e.isIntersecting;
     cb(positions);
-  }, { threshold: [0.99], rootMargin: '0px 100px 0px 100px' });
+  }, {
+    threshold: [0.99],
+    rootMargin: '0px 100px 0px 100px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyVIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
@@ -458,7 +482,7 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
       default:
         order = 'asc';
     }
-    onColumnOrderClick(order, column.prop, e.target.parentElement);
+    onColumnOrderClick(order, column.prop, e.target.closest('th'));
   }
   let extraProps = {};
   if (column.columnProperties) {
@@ -474,7 +498,7 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
     },
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const content = colheadRender(column);
+  const content = colheadFootRender(column);
   if (!content)
     return index.h(index.Fragment, null);
   props =
@@ -492,8 +516,11 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
         if (['top', 'bottom'].includes(headRenderer.pinned))
           addVObserver(th, headRenderer.pinned, onColumnPinned);
       } },
-      index.h("button", { class: `${CSSNAMESPACE}__order-btn`, onClick: handleColumnOrderClick },
-        colheadRender(column),
+      index.h("button", { class: {
+          [`${CSSNAMESPACE}__order-btn`]: true,
+          [`${CSSNAMESPACE}__cell-content`]: true,
+        }, onClick: handleColumnOrderClick },
+        colheadFootRender(column),
         !!column.filter && index.h("nano-icon", { name: "light/filter" }),
         !!column.order &&
           (column.order === 'desc' ? (index.h("nano-icon", { name: "solid/long-arrow-down" })) : (index.h("nano-icon", { name: "solid/long-arrow-up" }))),
@@ -506,11 +533,12 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
     } },
-    colheadRender(column),
-    !!column.filter && index.h("nano-icon", { name: "light/bars-filter" })));
+    index.h("div", { class: `${CSSNAMESPACE}__cell-content` },
+      colheadFootRender(column),
+      !!column.filter && index.h("nano-icon", { name: "light/bars-filter" }))));
 };
-const TableCell = ({ rowIndex, colIndex, }) => {
-  const content = cellRender(rowIndex, colIndex);
+const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+  const content = nestedContent || cellRender(rowIndex, colIndex);
   if (!content)
     return index.h(index.Fragment, null);
   const store = fetchStores();
@@ -534,7 +562,8 @@ const TableCell = ({ rowIndex, colIndex, }) => {
   }
   return (index.h(CellType
   // role="gridcell"
-  , { ...props }, cellRender(rowIndex, colIndex)));
+  , { ...props },
+    index.h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
 };
 
 const detectScrollSpeed = (() => {
@@ -592,7 +621,7 @@ function isInViewport(el, percentVisible = 100) {
       percentVisible);
 }
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--border-color:var(--nano-color-palegrey, #b5aea7);--border-style:1px solid var(--border-color);--border-tint-color:var(--nano-color-blue, #90c6e7);--border-tint-style:2px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb);--head-bg-rgb:var(--cell-bg-rgb);--foot-bg-rgb:var(--cell-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-lightgrey-rgb);--td-padding:0.5rem 0.625rem 0.4125rem;--th-padding:0.875rem 0.625rem 0.6875rem;--head-th-padding:var(--th-padding);--foot-th-padding:var(--td-padding);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;-webkit-margin-after:32px;margin-block-end:32px;border-collapse:separate;background:rgb(var(--cell-bg-rgb))}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.nano-tbl__loader{font-size:2rem;width:100%;display:block}.nano-tbl__caption{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;-webkit-border-after:var(--border-style);border-block-end:var(--border-style);padding:var(--td-padding);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}@media (min-width: 768px){.nano-tbl__td:first-child,.nano-tbl__th:first-child{-webkit-padding-start:var(--bookend-col-padding) !important;padding-inline-start:var(--bookend-col-padding) !important}.nano-tbl__td:last-child,.nano-tbl__th:last-child{-webkit-padding-end:var(--bookend-col-padding) !important;padding-inline-end:var(--bookend-col-padding) !important}}thead .nano-tbl__td,thead .nano-tbl__th{padding:var(--head-th-padding);font-weight:800;background:rgba(var(--head-bg-rgb), 90%)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{padding:var(--foot-th-padding);font-weight:800;-webkit-border-after:none;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;max-width:65vw;margin:0}.nano-tbl__pin{position:sticky}.nano-tbl__pin--start{inset-inline:-1px auto;will-change:scroll-position;overflow:visible}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:1}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{inset-inline:auto -1px}.nano-tbl__pin--end::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0}.nano-tbl__pinned--end .nano-tbl__pin--end{z-index:2}.nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:3}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:4;-webkit-border-before:var(--border-tint-style);border-block-start:var(--border-tint-style)}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th,.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl .unlimited-width{max-width:none}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset \"UTF-8\";nano-table{display:table;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--border-color:var(--nano-color-palegrey, #b5aea7);--border-style:1px solid var(--border-color);--border-tint-color:var(--nano-color-blue, #90c6e7);--border-tint-style:2px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:var(--cell-bg-rgb);--foot-bg-rgb:var(--cell-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding:0.5rem 0.625rem 0.4125rem;--th-padding:0.875rem 0.625rem 0.6875rem;--head-th-padding:var(--th-padding);--foot-th-padding:var(--td-padding);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;-webkit-transition:scale 0.25s;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-after:var(--border-style);border-block-end:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}@media (min-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding) !important;padding-inline-start:var(--bookend-col-padding) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding) !important;padding-inline-end:var(--bookend-col-padding) !important}}thead .nano-tbl__td,thead .nano-tbl__th{font-weight:800;background:rgba(var(--head-bg-rgb), 90%)}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding:var(--head-th-padding)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{font-weight:800;-webkit-border-after:none;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding:var(--foot-th-padding)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:var(--td-padding)}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;max-width:65vw;margin:0}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;-webkit-transition:max-width 0.25s;transition:max-width 0.25s}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2}@media (max-width: 576px){.nano-tbl__pinned--start .nano-tbl__pin--start{max-width:25vw !important}}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{inset-inline:auto -1px;max-width:min(50vw, 200px);}.nano-tbl__pin--end::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}@media (max-width: 576px){.nano-tbl__pin--start~.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start~.nano-tbl__pin--end::after{display:none}}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;-webkit-border-before:var(--border-tint-style);border-block-start:var(--border-tint-style)}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th,.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;-webkit-transition:scale 0.25s;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:-1}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
 
 let id = 0;
 const Table = class {
@@ -606,6 +635,9 @@ const Table = class {
     this.nanoTblAfterFilter = index.createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = index.createEvent(this, "nanoTblBeforeSearch", 7);
     this.nanoTblAfterSearch = index.createEvent(this, "nanoTblAfterSearch", 7);
+    this.debounceSetLoading = (l) => {
+      this._loading = l;
+    };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
     this.currentFilters = '';
@@ -623,8 +655,10 @@ const Table = class {
      * @returns A promise
      */
     this.sortStart = async (order, column, element) => {
+      // did order change?
       if (this.currentSort === order + ':' + column)
         return;
+      this.loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -649,10 +683,13 @@ const Table = class {
         console.warn('sort failed', e);
         this.currentSort = '';
       }
+      finally {
+        this.loading = false;
+      }
     };
     /**
-     * Attaches an intersection observer to each rendered tbody elements
-     * shows / hides intersecting blocks' and sets heights for when their hidden
+     * Attaches an intersection observer to each rendered tbody element
+     * shows / hides intersecting blocks' and sets heights for when they're hidden
      * @param el - the tbody element to observe
      * @param blockIndex - the rendering tbody we're attaching the IO to
      */
@@ -667,8 +704,8 @@ const Table = class {
           // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
           // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
           // To fix that, we check - for realsies - if the block IS visible.
-          // BUT that test is not as sensitive to a block being visible as the IO,
-          // so doesn't always fire if scrolling slowing
+          // BUT that test is not as sensitive to a block being visible via the IO,
+          // so doesn't always fire if scrolling slowly
           // *sigh*
           index.readTask(() => {
             if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
@@ -685,7 +722,12 @@ const Table = class {
             }
           });
         }
-      }, { threshold: [0] });
+      }, {
+        threshold: [0],
+        root: this.scrollParent === document.scrollingElement
+          ? null
+          : this.scrollParent,
+      });
       blockIo.observe(el);
       this.blockIos.set(el, blockIo);
     };
@@ -697,7 +739,9 @@ const Table = class {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this.rows = [];
+    this._loading = true;
+    this.placeholderSize = 5;
+    this.rows = undefined;
     this.columns = [];
     this.headRender = { pinned: 'top' };
     this.rowRender = undefined;
@@ -710,9 +754,29 @@ const Table = class {
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.measureHeight = 0;
+    this.debounceSetLoading = throttle.debounce(this.debounceSetLoading.bind(this), 50);
+  }
+  /** Will show a loading state when true.
+   * Will be shown automatically if `rows` is a promise waiting to resolve
+   * or when performing custom filtering or sorting  */
+  get loading() {
+    return this._loading;
+  }
+  set loading(l) {
+    this.debounceSetLoading(l);
   }
   handleRowsChange() {
-    storeSetData(this.host, this.rows);
+    if (!this.rows)
+      return;
+    this.loading = true;
+    Promise.resolve(this.rows).then(async (rows) => {
+      await storeSetData(this.host, rows);
+      if (!this.isReady) {
+        await this.columnInit();
+        this.setInitialBlockDimension();
+      }
+      this.loading = false;
+    });
   }
   handleColsChange() {
     storeSetConfig(this.host, this.columns);
@@ -760,6 +824,8 @@ const Table = class {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
+    if (!el)
+      return;
     this.measureHeight = el.getBoundingClientRect().height;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
@@ -806,6 +872,7 @@ const Table = class {
     this.nanoTblAfterSort.emit({ column: column, order });
   }
   async searchStart() {
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -815,7 +882,12 @@ const Table = class {
       await storeSearch(this.host, this.searchTerm);
       this.nanoTblAfterSearch.emit({ term: this.searchTerm });
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('search failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   async filterStart(filters, additive = true) {
     if (filters) {
@@ -831,6 +903,7 @@ const Table = class {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -852,7 +925,12 @@ const Table = class {
       await storeFilter(this.host, this.filters);
       this.filterComplete();
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('filter failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   filterComplete() {
     this.columns = this.columns.map((c) => {
@@ -866,16 +944,20 @@ const Table = class {
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
     const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
-    this.host.scrollIntoView();
+    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1))
+      this.topAnchorEle.scrollIntoView();
     if (element)
-      element.scrollIntoView();
+      element.scrollIntoView({ block: 'start' });
+    if (scrollX)
+      this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
       this.scrollParent.style.scrollBehavior = scrollBehaviour;
   }
   setMeasureElement() {
     index.readTask(() => {
-      this.measureEle = this.blockElements.find((b) => !b.classList?.contains(`${CSSNAMESPACE}__inactive`));
+      this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
     });
   }
   /**
@@ -900,11 +982,6 @@ const Table = class {
           }
           if (i === this.blockElements.length - 1)
             resolve();
-          // const heightGuess = this.getBlockHeight(this.blockElements.indexOf(el));
-          // writeTask(() => {
-          //   el.style.height = heightGuess;
-          //   if (i === this.blockElements.length - 1) resolve();
-          // });
         });
       });
     });
@@ -988,8 +1065,8 @@ const Table = class {
         if (!el)
           return;
         const height = el.getBoundingClientRect().height;
-        // cache height to our block heights
-        // array for subsequent renders
+        // cache height to our block heights array
+        // for subsequent renders
         const fBhI = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
         if (fBhI > 0) {
           this.blockHeights[fBhI] = { height, blockIndex };
@@ -1008,8 +1085,8 @@ const Table = class {
   }
   // Component lifecycle
   async componentWillLoad() {
-    this.store = await generateStore(this.host, this.rows, this.columns);
-    await this.columnInit();
+    this.store = await generateStore(this.host, this.columns, this.scrollParent);
+    await this.handleRowsChange();
     this.processSlots();
     this.setBlocks();
     this.store.data.onChange('rows', () => this.setBlocks());
@@ -1035,9 +1112,17 @@ const Table = class {
   }
   render() {
     this.blockElements = [];
-    return (index.h(index.Host, null, index.h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, index.h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, index.h("caption", { class: `${CSSNAMESPACE}__caption`, id: 'table-caption-' + this.renderId }, index.h("slot", { name: "caption" }, this.caption)), index.h("thead", null, index.h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+    return (index.h(index.Host, null, index.h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), index.h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, index.h("nano-progress-bar", { indeterminate: true, class: {
+        [`${CSSNAMESPACE}__progress-bar`]: true,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this.loading,
+      } }), index.h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, index.h("caption", { class: {
+        [`${CSSNAMESPACE}__caption`]: true,
+        [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
+      }, id: 'table-caption-' + this.renderId }, index.h("slot", { name: "caption" }, this.caption)), index.h("thead", null, index.h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       index.h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this.blocks.map((block, blockIndex) => (index.h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this.loading &&
+      !this.blocks.length &&
+      [...Array(10).keys()].map((rowIndex) => (index.h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: index.h("nano-skeleton", null) })))))), this.blocks.map((block, blockIndex) => (index.h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -1048,9 +1133,12 @@ const Table = class {
       return (index.h(TableRow, { rowRenderer: this.rowRender, row: row }, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (index.h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
-      } }))))), (this.showFooter || !!this.footRender) && (index.h("tfoot", null, index.h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      } }))))), this.showFooter && (index.h("tfoot", null, index.h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       index.h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }),
-    ]))))))));
+    ]))))), !!this.blocks.length && (index.h("nano-spinner", { type: "circle", class: {
+        [`${CSSNAMESPACE}__spinner`]: true,
+        [`${CSSNAMESPACE}__spinner--show`]: this.loading,
+      } })))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -1064,4 +1152,4 @@ Table.style = tableCss;
 exports.Table = Table;
 exports.createWorker = createWorker;
 
-//# sourceMappingURL=nano-table-8a898621.js.map
+//# sourceMappingURL=nano-table-844394ad.js.map