@nanoporetech-digital/components 2.1.4 → 2.2.0

package/dist/custom-elements/index.js

@@ -9921,7 +9921,7 @@ var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
  * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
  * exposing only those methods and properties that are defined in the spec.
  */
-var ResizeObserver = /** @class */ (function () {
+var ResizeObserver$1 = /** @class */ (function () {
     /**
      * Creates a new instance of ResizeObserver.
      *
@@ -9947,7 +9947,7 @@ var ResizeObserver = /** @class */ (function () {
     'unobserve',
     'disconnect'
 ].forEach(function (method) {
-    ResizeObserver.prototype[method] = function () {
+    ResizeObserver$1.prototype[method] = function () {
         var _a;
         return (_a = observers.get(this))[method].apply(_a, arguments);
     };
@@ -9958,7 +9958,7 @@ var index$2 = (function () {
     if (typeof global$1.ResizeObserver !== 'undefined') {
         return global$1.ResizeObserver;
     }
-    return ResizeObserver;
+    return ResizeObserver$1;
 })();
 
 const detailsCss = ":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{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;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:\"currentColor\"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}";
@@ -22333,6 +22333,278 @@ let Spinner = class extends H {
   static get style() { return spinnerCss; }
 };
 
+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 H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoReposition = createEvent(this, "nanoReposition", 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;
+    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$2(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$2(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$1(this.handlePositionChange.bind(this), 100);
+    this.handleIsDragging = debounce$1(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$1(Host, { style: styles }, h$1("div", { part: "panel start", class: "start" }, h$1("slot", { name: "start" })), h$1("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$1("slot", { name: "handle" }, !this.disabled && this.vertical ? (h$1("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (h$1("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), h$1("div", { part: "panel end", class: "end" }, h$1("slot", { name: "end" }))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "position": ["handlePositionChange"],
+    "positionInPixels": ["handlePositionInPixelsChange"]
+  }; }
+  static get style() { return splitPaneCss; }
+};
+
 const stickerCss = ":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{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index=\"1\"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index=\"2\"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index=\"3\"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index=\"4\"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index=\"5\"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index=\"1\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index=\"2\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index=\"3\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index=\"4\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index=\"5\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 
 function _getScrollTop(ele) {
@@ -22979,7 +23251,7 @@ let Tab = class extends H {
         'nanotab--active': this.active,
         'nanotab--disabled': this.disabled,
         'nanotab--closable': this.closable,
-      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h$1("slot", null), this.closable && (h$1("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
+      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h$1("slot", null), this.closable && (h$1("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, tabIndex: -1 })))));
   }
   get host() { return this; }
   static get style() { return tabCss; }
@@ -23385,6 +23657,7 @@ let TabGroup = class extends H {
       setTimeout(() => {
         this.updateScrollControls();
         this.syncActiveTabIndicator();
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
       }, 500);
     });
     this.resizeObserver.observe(this.nav);
@@ -23655,6 +23928,7 @@ const NanoSkeleton = /*@__PURE__*/proxyCustomElement(Skeleton, [1,"nano-skeleton
 const NanoSlide = /*@__PURE__*/proxyCustomElement(Slide$2, [1,"nano-slide",{"ready":[1540]}]);
 const NanoSlides = /*@__PURE__*/proxyCustomElement(Slides, [1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32]}]);
 const NanoSpinner = /*@__PURE__*/proxyCustomElement(Spinner, [1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]);
+const NanoSplitPane = /*@__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"],"isDragging":[2564,"is-dragging"]}]);
 const NanoSticker = /*@__PURE__*/proxyCustomElement(Sticker, [1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32]}]);
 const NanoTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4]}]);
 const NanoTabContent = /*@__PURE__*/proxyCustomElement(TabPanel, [1,"nano-tab-content",{"name":[513],"active":[516]}]);
@@ -23702,6 +23976,7 @@ const defineCustomElements = (opts) => {
   NanoSlide,
   NanoSlides,
   NanoSpinner,
+  NanoSplitPane,
   NanoSticker,
   NanoTab,
   NanoTabContent,
@@ -27162,6 +27437,6 @@ const index = /*#__PURE__*/Object.freeze({
   GESTURE_CONTROLLER: GESTURE_CONTROLLER
 });
 
-export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFileUpload, NanoGlobalNav, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$1 as nanoDebounce, raf as nanoRaf, nanoShowAlert, nanoShowToast, throttle$1 as nanoThrottle, setAssetPath, setPlatformOptions };
+export { NanoAccordion, NanoAlert, NanoAlgolia, NanoAlgoliaFilter, NanoAlgoliaInput, NanoAlgoliaPagination, NanoAlgoliaResults, NanoAspectRatio, NanoCheckbox, NanoCheckboxGroup, NanoDatalist, NanoDateInput, NanoDatePicker, NanoDetails, NanoDialog, NanoDrawer, NanoDropdown, NanoFileUpload, NanoGlobalNav, NanoGlobalSearchResults, NanoGrid, NanoGridItem, NanoHero, NanoIcon, NanoIconButton, NanoImg, NanoInput, NanoMenu, NanoMenuDrawer, NanoNavItem, NanoOption, NanoRange, NanoRating, NanoResizeObserve, NanoSelect, NanoSkeleton, NanoSlide, NanoSlides, NanoSpinner, NanoSplitPane, NanoSticker, NanoTab, NanoTabContent, NanoTabGroup, NanoTooltip, defineCustomElements, nanoCreateDialog, debounce$1 as nanoDebounce, raf as nanoRaf, nanoShowAlert, nanoShowToast, throttle$1 as nanoThrottle, setAssetPath, setPlatformOptions };
 
 //# sourceMappingURL=index.js.map