@nanoporetech-digital/components 2.1.4 → 2.3.0

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

@@ -1 +1 @@
-{"file":"nano-rating.js","mappings":"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","names":[],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-rating.js","mappings":"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","names":[],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-split-pane.d.ts

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

package/dist/components/nano-split-pane.js

@@ -0,0 +1,308 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as clamp, r as raf } from './index2.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as debounce } from './throttle.js';
+
+function drag(container, onMove) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    onMove(x, y);
+  }
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+  }
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+}
+
+const splitPaneCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:\"\";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:\"\";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}";
+
+let SplitPane = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoReposition = createEvent(this, "nanoReposition", 7);
+    this.nanoDragging = createEvent(this, "nanoDragging", 7);
+    this.isAnimating = false;
+    this.didLoad = false;
+    this._shouldAnimate = true;
+    /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+    this.vertical = false;
+    /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+    this.disabled = false;
+    /** How close the divider must be to a snap point until snapping occurs. */
+    this.snapThreshold = 12;
+    /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */
+    this.animationDuration = 0.6;
+    // Event handlers
+    this.handleDrag = (e) => {
+      if (this.disabled) {
+        return;
+      }
+      // Prevent text selection when dragging
+      e.preventDefault();
+      drag(this.host, (x, y) => {
+        let newPositionInPixels = this.vertical ? y : x;
+        this.nanoDragging.emit(newPositionInPixels);
+        // Flip for end panels
+        if (this.primary === 'end') {
+          newPositionInPixels = this.size - newPositionInPixels;
+        }
+        // Check snap points
+        if (this.snap) {
+          const snaps = this.snap.split(' ');
+          snaps.forEach((value) => {
+            let snapPoint;
+            if (value.endsWith('%')) {
+              snapPoint = this.size * (parseFloat(value) / 100);
+            }
+            else {
+              snapPoint = parseFloat(value);
+            }
+            if (newPositionInPixels >= snapPoint - this.snapThreshold &&
+              newPositionInPixels <= snapPoint + this.snapThreshold) {
+              newPositionInPixels = snapPoint;
+            }
+          });
+        }
+        this.shouldAnimate = false;
+        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+        raf(() => (this.shouldAnimate = true));
+      });
+    };
+    this.handleKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      if ([
+        'ArrowLeft',
+        'ArrowRight',
+        'ArrowUp',
+        'ArrowDown',
+        'Home',
+        'End',
+      ].includes(event.key)) {
+        let newPosition = this.position;
+        const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+        event.preventDefault();
+        if ((event.key === 'ArrowLeft' && !this.vertical) ||
+          (event.key === 'ArrowUp' && this.vertical)) {
+          newPosition -= incr;
+        }
+        if ((event.key === 'ArrowRight' && !this.vertical) ||
+          (event.key === 'ArrowDown' && this.vertical)) {
+          newPosition += incr;
+        }
+        if (event.key === 'Home') {
+          newPosition = this.primary === 'end' ? 100 : 0;
+        }
+        if (event.key === 'End') {
+          newPosition = this.primary === 'end' ? 0 : 100;
+        }
+        this.shouldAnimate = false;
+        this.position = clamp(newPosition, 0, 100);
+        raf(() => (this.shouldAnimate = true));
+      }
+    };
+    this.handleResize = () => {
+      if (!this.didLoad || this.isAnimating)
+        return;
+      // Resize when a primary panel is set
+      if (this.primary) {
+        this.shouldAnimate = false;
+        this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+        raf(() => (this.shouldAnimate = true));
+      }
+    };
+    this.handlePositionChange = debounce(this.handlePositionChange.bind(this), 100);
+  }
+  get size() {
+    const { width, height } = this.host.getBoundingClientRect();
+    return this.vertical ? height : width;
+  }
+  get shouldAnimate() {
+    return this.didLoad && this._shouldAnimate;
+  }
+  set shouldAnimate(sa) {
+    this._shouldAnimate = sa;
+  }
+  /**
+   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+   * container's initial size.
+   */
+  get position() {
+    return this._position;
+  }
+  set position(pos) {
+    // override too high / low
+    pos = Math.min(Math.max(pos, 0), 100);
+    if (isNaN(pos) || pos === this._position)
+      return;
+    if (this.shouldAnimate &&
+      this.animationDuration > 0 &&
+      !isNaN(this.position)) {
+      this.animatePosition(pos);
+      return;
+    }
+    this._position = pos;
+  }
+  // eslint-disable-next-line @stencil/no-unused-watch
+  handlePositionChange() {
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.positionInPixels = this.percentageToPixels(this.position);
+    this.nanoReposition.emit();
+  }
+  handlePositionInPixelsChange() {
+    this.position = this.pixelsToPercentage(this.positionInPixels);
+  }
+  // Private logic
+  animatePosition(end) {
+    if (this.isAnimating)
+      return;
+    const duration = this.animationDuration; // seconds
+    const fps = 60;
+    const start = this.position;
+    const distance = end - start;
+    let position = start;
+    let time = 0;
+    function easeInOutQuad(t, s, e, d) {
+      if ((t /= d / 2) < 1)
+        return (e / 2) * t * t + s;
+      else
+        return (-e / 2) * (--t * (t - 2) - 1) + s;
+    }
+    const go = () => {
+      time += 1 / fps;
+      position = easeInOutQuad(time, start, distance, duration);
+      if ((end > start && position >= end) ||
+        (end < start && position <= end)) {
+        this.position = end;
+        this.shouldAnimate = true;
+        this.isAnimating = false;
+        return;
+      }
+      this.position = position;
+      raf(go);
+    };
+    this.shouldAnimate = false;
+    this.isAnimating = true;
+    raf(go);
+  }
+  percentageToPixels(value) {
+    return this.size * (value / 100);
+  }
+  pixelsToPercentage(value) {
+    return (value / this.size) * 100;
+  }
+  attachRO() {
+    this.detachRO();
+    this.ro = new ResizeObserver(() => this.handleResize());
+    this.ro.observe(this.host);
+  }
+  detachRO() {
+    if (!this.ro)
+      return;
+    this.ro.unobserve(this.host);
+    this.ro = undefined;
+  }
+  componentDidLoad() {
+    if (this.positionInPixels)
+      this.handlePositionInPixelsChange();
+    setTimeout(() => (this.didLoad = true));
+  }
+  connectedCallback() {
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.attachRO();
+  }
+  disconnectedCallback() {
+    this.detachRO();
+  }
+  componentDidRender() {
+    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute
+    // if we set a default position in the class, this causes the divider to jump (from default to user set position)
+    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not
+    raf(() => {
+      if (typeof this.position === 'undefined') {
+        this.position = 50;
+      }
+    });
+  }
+  render() {
+    if (typeof this.position === 'undefined')
+      return;
+    const styles = {};
+    const gridTemplate = this.vertical
+      ? 'gridTemplateRows'
+      : 'gridTemplateColumns';
+    const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+    const secondary = 'auto';
+    if (this.primary === 'end') {
+      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+    }
+    else {
+      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+    }
+    return (h(Host, { style: styles }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "position": ["handlePositionChange"],
+    "positionInPixels": ["handlePositionInPixelsChange"]
+  }; }
+  static get style() { return splitPaneCss; }
+};
+SplitPane = /*@__PURE__*/ proxyCustomElement(SplitPane, [1, "nano-split-pane", {
+    "position": [6146],
+    "positionInPixels": [1026, "position-in-pixels"],
+    "vertical": [516],
+    "disabled": [516],
+    "primary": [1],
+    "snap": [1],
+    "snapThreshold": [2, "snap-threshold"],
+    "animationDuration": [2, "animation-duration"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-split-pane", "nano-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-split-pane":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SplitPane);
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const NanoSplitPane = SplitPane;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSplitPane, defineCustomElement };
+
+//# sourceMappingURL=nano-split-pane.js.map

package/dist/components/nano-split-pane.js.map

@@ -0,0 +1 @@
+{"file":"nano-split-pane.js","mappings":"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","names":[],"sources":["./src/utils/drag.ts","./src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","./src/components/split-pane/split-pane.tsx"],"sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  height: 100%;\n  left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  height: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      raf(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    raf(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      raf(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    raf(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -390,6 +390,7 @@ let TabGroup = class extends HTMLElement {
       setTimeout(() => {
         this.updateScrollControls();
         this.syncActiveTabIndicator();
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
       }, 500);
     });
     this.resizeObserver.observe(this.nav);