@nanoporetech-digital/components 2.1.4 → 2.2.0

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

@@ -0,0 +1,479 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Prop, Component, Watch, Event, Element, Host, h, } from '@stencil/core';
+import { clamp, raf, debounce } from '../../utils';
+import { drag } from '../../utils/drag';
+/**
+ * Split panes display two adjacent panels, allowing the user to reposition them.
+ *
+ * @part start - The start panel.
+ * @part end - The end panel.
+ * @part panel - Targets both the start and end panels.
+ * @part divider - The divider that separates the start and end panels.
+ *
+ * @slot start - The start panel.
+ * @slot end - The end panel.
+ * @slot handle - An optional handle to render at the center of the divider.
+ */
+export class SplitPane {
+  constructor() {
+    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;
+    this._isDragging = false;
+    this.handleIsDragging = (dragging) => {
+      this._isDragging = dragging;
+    };
+    // Event handlers
+    this.handleDrag = (e) => {
+      if (this.disabled) {
+        return;
+      }
+      // Prevent text selection when dragging
+      e.preventDefault();
+      drag(this.host, (x, y) => {
+        this.handleIsDragging(true);
+        let newPositionInPixels = this.vertical ? y : x;
+        // 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.handleIsDragging(false);
+      });
+    };
+    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);
+    this.handleIsDragging = debounce(this.handleIsDragging, 200);
+  }
+  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) {
+      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);
+  }
+  /** @readonly - hook to know if the pane is currently being dragged */
+  get isDragging() {
+    return this._isDragging;
+  }
+  // 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 (this.position === undefined)
+        this.position = 50;
+    });
+  }
+  render() {
+    if (!this.position)
+      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" }))));
+  }
+  static get is() { return "nano-split-pane"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["split-pane.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["split-pane.css"]
+  }; }
+  static get properties() { return {
+    "position": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size."
+      },
+      "getter": true,
+      "setter": true,
+      "attribute": "position",
+      "reflect": false
+    },
+    "positionInPixels": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current position of the divider from the primary panel's edge in pixels."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "position-in-pixels",
+      "reflect": false
+    },
+    "vertical": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Draws the split panel in a vertical orientation with the start and end panels stacked."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "vertical",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables resizing. Note that the position may still change as a result of resizing the host element."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "primary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "primary",
+      "reflect": false
+    },
+    "snap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "snap",
+      "reflect": false
+    },
+    "snapThreshold": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "How close the divider must be to a snap point until snapping occurs."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "snap-threshold",
+      "reflect": false,
+      "defaultValue": "12"
+    },
+    "animationDuration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "animation-duration",
+      "reflect": false,
+      "defaultValue": "0.6"
+    },
+    "isDragging": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "readonly",
+            "text": "- hook to know if the pane is currently being dragged"
+          }],
+        "text": ""
+      },
+      "getter": true,
+      "setter": false,
+      "attribute": "is-dragging",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "nanoReposition",
+      "name": "nanoReposition",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the divider's position changes."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "position",
+      "methodName": "handlePositionChange"
+    }, {
+      "propName": "positionInPixels",
+      "methodName": "handlePositionInPixelsChange"
+    }]; }
+}
+//# sourceMappingURL=split-pane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["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    this.handleIsDragging = debounce(this.handleIsDragging, 200);\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 (this.shouldAnimate && this.animationDuration > 0) {\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  /** @readonly - hook to know if the pane is currently being dragged */\n  @Prop({ reflect: true }) get isDragging() {\n    return this._isDragging;\n  }\n  private _isDragging = false;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\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  private handleIsDragging = (dragging?: boolean) => {\n    this._isDragging = dragging;\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      this.handleIsDragging(true);\n      let newPositionInPixels = this.vertical ? y : x;\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      this.handleIsDragging(false);\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 (this.position === undefined) this.position = 50;\n    });\n  }\n\n  render() {\n    if (!this.position) 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"]}

package/dist/collection/components/tabs/tab-group.js

@@ -394,6 +394,7 @@ export class TabGroup {
       setTimeout(() => {
         this.updateScrollControls();
         this.syncActiveTabIndicator();
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
       }, 500);
     });
     this.resizeObserver.observe(this.nav);
@@ -501,7 +502,7 @@ export class TabGroup {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -544,7 +545,7 @@ export class TabGroup {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },