@nanoporetech-digital/components 4.9.3 → 4.10.0

package/hydrate/index.js

@@ -17720,13 +17720,12 @@ class GlobalNav {
       return;
     switch (this.env) {
       case 'prod':
-        this.userProfileUrl = 'https://community.nanoporetech.com/profile/me';
+        this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
       case 'local':
       case 'dev':
       case 'test':
       default:
-        this.userProfileUrl =
-          'https://community-test.nanoporetech.com/profile/me';
+        this.userProfileUrl = 'https://myaccount.nanoporetech.com/';
         break;
     }
     if (!this.getMyAccountData || this.myAccData) {
@@ -19651,7 +19650,7 @@ class Icon {
   }; }
 }
 
-const iconButtonCss = ".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
+const iconButtonCss = "/*!@:host*/.sc-nano-icon-button-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-icon-button{display:none !important}/*!@:host*/.sc-nano-icon-button-h{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;border-radius:var(--border-radius);display:inline-block}/*!@.icon-button*/.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}/*!@.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled)*/.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}/*!@.icon-button:active:not(.icon-button--disabled)*/.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}/*!@.icon-button:focus*/.icon-button.sc-nano-icon-button:focus{outline:none}/*!@.icon-button--disabled*/.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}/*!@.focus-visible.icon-button:focus*/.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
 
 /** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
  *
@@ -19661,6 +19660,20 @@ const iconButtonCss = ".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-ic
 class IconButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.handleClick = (ev) => {
+      if (this.type === 'button')
+        return;
+      const formEl = this.findForm();
+      if (formEl) {
+        ev.preventDefault();
+        const fakeButton = document.createElement('button');
+        fakeButton.type = this.type;
+        fakeButton.style.display = 'none';
+        formEl.appendChild(fakeButton);
+        fakeButton.click();
+        fakeButton.remove();
+      }
+    };
     this.iconName = undefined;
     this.iconSrc = undefined;
     this.type = 'button';
@@ -19670,12 +19683,34 @@ class IconButton {
     this.showTooltip = false;
     this.disabled = false;
     this.href = undefined;
+    this.rel = undefined;
     this.target = undefined;
+    this.form = undefined;
   }
   /** Sets focus on the internal button */
   async setFocus() {
     this.button.focus();
   }
+  /**
+   * Finds the form element based on the provided `form` selector
+   * or element reference provided.
+   * @returns the found form element (if found)
+   */
+  findForm() {
+    const { form, host } = this;
+    if (!form)
+      return host.closest('form');
+    if (form instanceof HTMLFormElement) {
+      return form;
+    }
+    if (typeof form === 'string') {
+      const el = document.getElementById(form);
+      if (el instanceof HTMLFormElement) {
+        return el;
+      }
+    }
+    return null;
+  }
   componentDidLoad() {
     focusVisible.observe(this.button);
   }
@@ -19688,10 +19723,10 @@ class IconButton {
   }
   content() {
     const TagType = this.href === undefined ? 'button' : 'a';
-    return (hAsync(TagType, { part: "base", ref: (el) => (this.button = el), class: {
+    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null }, hAsync(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, hAsync("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
+      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, hAsync("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" }))));
   }
   render() {
     if (this.showTooltip) {
@@ -19699,9 +19734,10 @@ class IconButton {
     }
     return this.content();
   }
+  get host() { return getElement(this); }
   static get style() { return iconButtonCss; }
   static get cmpMeta() { return {
-    "$flags$": 2,
+    "$flags$": 9,
     "$tagName$": "nano-icon-button",
     "$members$": {
       "iconName": [1, "icon-name"],
@@ -19713,7 +19749,9 @@ class IconButton {
       "showTooltip": [4, "show-tooltip"],
       "disabled": [516],
       "href": [1],
+      "rel": [1],
       "target": [1],
+      "form": [1],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -20958,18 +20996,18 @@ class NavItem {
       }, 50);
     }
     else {
-      /* the secondadry panel is not opening via hover,
+      /* the secondary panel is not opening via hover,
       scroll content into view, focus on it and add blur events */
       if (!this.fromHover) {
-        const panelio = new window.IntersectionObserver((data) => {
+        const panelIO = new window.IntersectionObserver((data) => {
           if (data[0].boundingClientRect.top < 0) {
             this.secondaryDiv.scrollIntoView({
               behavior: 'smooth',
             });
           }
-          panelio.disconnect();
+          panelIO.disconnect();
         }, { threshold: 1 });
-        panelio.observe(this.secondaryDiv);
+        panelIO.observe(this.secondaryDiv);
         this.secondaryDiv.focus({ preventScroll: true });
         const focusableChild = getTabbableElements(this.secondaryDiv, true);
         if (focusableChild[0])
@@ -27366,6 +27404,732 @@ const waitForSlides = (host) => {
   });
 };
 
+/** Begins listening for dragging. */
+function drag(container, options) {
+  const initialOffsets = {
+    pageX: 0,
+    pageY: 0,
+    offsetX: 0,
+    offsetY: 0,
+  };
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    let x = 0;
+    let y = 0;
+    if (options.relative) {
+      x =
+        pointerEvent.pageX -
+          initialOffsets.pageX -
+          (offsetX - initialOffsets.offsetX);
+      y =
+        pointerEvent.pageY -
+          initialOffsets.pageY -
+          (offsetY - initialOffsets.offsetY);
+    }
+    else {
+      x = pointerEvent.pageX - offsetX;
+      y = pointerEvent.pageY - offsetY;
+    }
+    if (options === null || options === void 0 ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+    if (options === null || options === void 0 ? void 0 : options.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+  if (!!!(options === null || options === void 0 ? void 0 : options.initialEvent))
+    return;
+  let initialEvent;
+  if (options === null || options === void 0 ? void 0 : options.initialEvent['touches']) {
+    initialEvent = {
+      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageX,
+      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).touches[0].pageY,
+    };
+  }
+  else {
+    initialEvent = {
+      pageX: (options === null || options === void 0 ? void 0 : options.initialEvent).pageX,
+      pageY: (options === null || options === void 0 ? void 0 : options.initialEvent).pageY,
+    };
+  }
+  const defaultView = container.ownerDocument.defaultView;
+  const dims = container.getBoundingClientRect();
+  initialOffsets.pageX = initialEvent.pageX;
+  initialOffsets.pageY = initialEvent.pageY;
+  initialOffsets.offsetX = dims.left + defaultView.pageXOffset;
+  initialOffsets.offsetY = dims.top + defaultView.pageYOffset;
+  // move(initialEvent);
+}
+
+const sortableCss = "/*!@:host*/.sc-nano-sortable-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-sortable,*.sc-nano-sortable::before,*.sc-nano-sortable::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-sortable{display:none !important}/*!@:host*/.sc-nano-sortable-h{position:relative;display:block}/*!@.sortable__live-region*/.sortable__live-region.sc-nano-sortable{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
+
+// Orientation map to limit dragging to horizontal or vertical.
+const orientationMap = {
+  horizontal: { x: 1, y: 0 },
+  vertical: { x: 0, y: 1 },
+};
+let sortableIds = 0;
+/**
+ * An accessible and flexible re-order / sort utility component.
+ *
+ *- Drag and drop via mouse, touch or keyboard
+ *- Live announcements for screen readers
+ *- Works with or without an explicit handle (although with is preferable)
+
+ * @part announcements - the a11y, live region. Visually hidden by default
+ *
+ * @slot - The default slot containing any items you might want to sort
+ */
+class Sortable {
+  handleItemSelectorChange() {
+    this.refreshKeyboardHandles();
+  }
+  handleHandleSelectorChange() {
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+  }
+  handleCreateKeyboardHandleChange() {
+    this.refreshKeyboardHandles();
+  }
+  handleSortableHostElement(_newVal, oldVal) {
+    if (oldVal)
+      this.removeEventHandlers(oldVal);
+    this.addEventHandlers();
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+    if (this.sortableHostElement) {
+      // sortable host must have position relative
+      this.sortableHostElement.style.position = 'relative';
+    }
+  }
+  /** If sortable elements change dynamically, use this method to add handle controls to new elements */
+  async refreshKeyboardHandles() {
+    var _a, _b, _c;
+    if (this.handleSelector) {
+      if ((_a = this.keyboardHandleMap) === null || _a === void 0 ? void 0 : _a.size) {
+        this.keyboardHandleMap.clear();
+      }
+      this.sortableHost
+        .querySelectorAll(this.handleSelector)
+        .forEach((handle) => {
+        if (!handle.getAttribute('aria-describedby'))
+          handle.setAttribute('aria-describedby', this.sortableId);
+        const sortEle = handle.closest(this.itemSelector);
+        if (sortEle)
+          this.keyboardHandleMap.set(handle, sortEle);
+      });
+      return;
+    }
+    if ((_b = this.keyboardHandleMap) === null || _b === void 0 ? void 0 : _b.size) {
+      (_c = this.keyboardHandleMap) === null || _c === void 0 ? void 0 : _c.forEach((_ele, handle) => handle.remove());
+      this.keyboardHandleMap.clear();
+    }
+    this.sortableHost
+      .querySelectorAll(this.itemSelector)
+      .forEach((ele, i) => {
+      const handle = this.createKeyboardHandle(i, ele);
+      if (!handle) {
+        console.error('`createKeyboardHandle` *must* return the handle element it creates');
+        return;
+      }
+      this.keyboardHandleMap.set(handle, ele);
+      handle.setAttribute('aria-describedby', this.sortableId);
+    });
+  }
+  /**
+   * Get instance of sortable host.
+   * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`
+   */
+  get sortableHost() {
+    if (this.sortableHostElement)
+      return this.sortableHostElement;
+    return this.host;
+  }
+  /**
+   * Queues aria messages which are then displayed in a 'live' region.
+   * Messages are cleared after 10s
+   * @param msg aria message to announce
+   */
+  addAriaMsg(msg) {
+    this.ariaTextList = [...this.ariaTextList, msg];
+    setTimeout(() => {
+      const mIdx = this.ariaTextList.indexOf(msg);
+      this.ariaTextList.splice(mIdx, 1);
+      this.ariaTextList = [...this.ariaTextList];
+    }, 10000);
+  }
+  /**
+   * Try to stop text highlight whilst dragging
+   * @param userSelect
+   */
+  updateUserSelectStyle(userSelect) {
+    this.host.style.userSelect = userSelect;
+    // @ts-ignore
+    this.host.style.MozUserSelect = userSelect;
+    // @ts-ignore
+    this.host.style.msUserSelect = userSelect;
+    this.host.style.webkitUserSelect = userSelect;
+  }
+  /**
+   * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
+   * given targets. Returns an array of matches.
+   * @param node
+   * @param targets
+   * @returns all the items that currently intersect with the target node
+   */
+  hitTest(node, targets) {
+    const { left: l, top: t, width: w, height: h, } = node.getBoundingClientRect();
+    const x = l + w / 2;
+    const y = t + h / 2;
+    return targets.filter((item) => {
+      const { left, right, top, bottom } = item.getBoundingClientRect();
+      return !(x < left || x > right || y < top || y > bottom);
+    });
+  }
+  /**
+   * Returns a boolean indicating whether the node is currently in an animation.
+   * @param node
+   * @returns whether a node is currently animating or not
+   */
+  isAnimating(node) {
+    return this.animatedElements.indexOf(node) !== -1;
+  }
+  /**
+   * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
+   * if nodes animate from their old to their new position in the dom. */
+  animateNode(node, dx = 0, dy = 0) {
+    if (!node.animate) {
+      return;
+    }
+    // keep a stack of currently animating nodes to exclude as drag & drop targets.
+    this.animatedElements.push(node);
+    node.style.willChange = 'transform';
+    // animate from dx/dy (old node position) to none (new node position)
+    writeTask(() => {
+      this.animationPromise = new Promise((resolve) => {
+        node
+          .animate([
+          { transform: `translate3d(${dx}px, ${dy}px, 0)` },
+          { transform: 'none' },
+        ], this.animationTiming)
+          .addEventListener('finish', () => {
+          const index = this.animatedElements.indexOf(node);
+          node.style.willChange = '';
+          if (index !== -1) {
+            // splice out when done to unlock as a valid target
+            this.animatedElements.splice(index, 1);
+          }
+          resolve();
+          delete this.animationPromise;
+        }, { once: true });
+      });
+    });
+  }
+  /**
+   * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
+   * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
+   * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
+   * of this dom update */
+  insertAtTarget(node, target) {
+    if (!node || !target)
+      return;
+    let offsets = [];
+    if (this.animationEnabled) {
+      offsets = this.sortableNodes.map((item) => ({
+        x: item.offsetLeft,
+        y: item.offsetTop,
+      }));
+    }
+    if (!node.isConnected || !target.isConnected)
+      return;
+    if (this.dropzoneNodes.indexOf(target) > -1) {
+      target.append(node);
+    }
+    else {
+      const nodeComparison = node.compareDocumentPosition(target);
+      let position;
+      if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {
+        position =
+          target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';
+      }
+      if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {
+        position =
+          target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';
+      }
+      if (position)
+        target.insertAdjacentElement(position, node);
+    }
+    if (this.animationEnabled) {
+      this.sortableNodes.forEach((sortableNode, i) => {
+        const { x, y } = offsets[i];
+        const dx = x - sortableNode.offsetLeft;
+        const dy = y - sortableNode.offsetTop;
+        if (dx !== 0 || dy !== 0) {
+          this.animateNode(sortableNode, dx, dy);
+        }
+      });
+    }
+  }
+  reset() {
+    if (this.draggedElementClone !== undefined &&
+      this.draggedElementClone.parentNode !== null) {
+      this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);
+    }
+    if (this.draggedElement &&
+      this.draggedElement.parentNode &&
+      this.draggedElementOrigin) {
+      this.draggedElement.classList.remove(this.placeholderClass);
+    }
+    if (this.dropzoneActiveClass && this.dropzoneNodes.length) {
+      this.dropzoneNodes.forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));
+    }
+    delete this.draggedElementClone;
+    delete this.draggedElement;
+    this.dropzoneNodes = [];
+    this.sortableNodes = [];
+    this.animatedElements = [];
+    this.dragRequestPending = false;
+    this.updateUserSelectStyle('');
+  }
+  /**
+   * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.
+   * Clone styles are added onto the style object directly, since the ::slotted()
+   * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep
+   * @param node html node to clone
+   * @returns the cloned html node
+   */
+  createClone(node) {
+    const clone = node.cloneNode(true);
+    if (node.id)
+      clone.id = 'clone__' + clone.id;
+    /**
+     * Bugfix for table row sorting.
+     * During dragging table rows shrink, so we manually set them width of original node.
+     */
+    Array.from(clone.children).forEach((nodeChild, index) => {
+      const clonedNodeChild = nodeChild;
+      const originalNodeChild = node.children.item(index);
+      if (originalNodeChild) {
+        clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;
+      }
+    });
+    const { offsetLeft: x, offsetTop: y, offsetWidth: w, offsetHeight: h, } = node;
+    Object.assign(clone.style, {
+      position: 'absolute',
+      left: `calc(${x}px - var(--grab-offset-x, 0px))`,
+      top: `calc(${y}px - var(--grab-offset-y, 0px))`,
+      height: this.dragResize ? `${h}px` : undefined,
+      width: this.dragResize ? `${w}px` : undefined,
+      willChange: 'transform,opacity',
+    });
+    clone.classList.add(this.draggedClass);
+    return node.parentNode.appendChild(clone);
+  }
+  /// Event handlers ///
+  removeEventHandlers(ele) {
+    ele = ele || this.sortableHost;
+    ele.removeEventListener('mousedown', this.handleTrack);
+    ele.removeEventListener('touchstart', this.handleTrack);
+    ele.removeEventListener('keydown', this.handleKeydown);
+  }
+  addEventHandlers(ele) {
+    ele = ele || this.sortableHost;
+    ele.addEventListener('mousedown', this.handleTrack);
+    ele.addEventListener('touchstart', this.handleTrack);
+    ele.addEventListener('keydown', this.handleKeydown);
+  }
+  /**
+   * Watch for any changes in grab-able handle elements.
+   */
+  attachMutationObserver() {
+    return;
+  }
+  handleKeydown(e) {
+    const targetElement = e.target;
+    let foundHandle;
+    let sortEle;
+    if (this.handleSelector) {
+      foundHandle = targetElement.closest(this.handleSelector);
+      sortEle = targetElement.closest(this.itemSelector);
+    }
+    else {
+      sortEle = this.keyboardHandleMap.get(targetElement);
+      foundHandle = targetElement;
+    }
+    // have we found a handle and matching sort element from the keydown element
+    if (!foundHandle || !sortEle)
+      return;
+    const activateSort = (isActive) => {
+      this.keyboardSortActive = isActive;
+      this.draggedElement = isActive ? sortEle : undefined;
+      sortEle.classList.toggle(this.draggedClass, isActive);
+      foundHandle.classList.toggle(this.handleDraggedClass, isActive);
+      if (isActive) {
+        this.addAriaMsg(this.grabbedHelperText(sortEle));
+        document.addEventListener('mousedown', () => activateSort(false), {
+          once: true,
+        });
+      }
+      else {
+        this.addAriaMsg(this.droppedHelperText(sortEle));
+      }
+    };
+    // start editing this element's order?
+    if ([' ', 'Space', 'Enter'].includes(e.key)) {
+      e.preventDefault();
+      if (!this.keyboardSortActive) {
+        // grabbed the element
+        activateSort(true);
+        this.sortableNodes =
+          Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||
+            [];
+        const nanoGrabbedEv = this.nanoGrabbed.emit({
+          element: sortEle,
+          index: this.sortableNodes.indexOf(sortEle),
+        });
+        if (nanoGrabbedEv.defaultPrevented) {
+          activateSort(false);
+          return;
+        }
+      }
+      else {
+        // dropped the element
+        activateSort(false);
+        this.nanoDropped.emit({ element: sortEle });
+      }
+      return;
+    }
+    if (!this.keyboardSortActive)
+      return;
+    // Tabbing away from this handle - deactivate
+    if (['Escape', 'Tab'].includes(e.key))
+      activateSort(false);
+    let moveKeys = ['Home', 'End'];
+    if (!this.orientation || this.orientation === 'horizontal')
+      moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];
+    if (!this.orientation || this.orientation === 'vertical')
+      moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];
+    if (!moveKeys.includes(e.key))
+      return;
+    // move the element with the keyboard
+    e.preventDefault();
+    /** Collect all elements that have drag positions.
+     * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */
+    this.sortableNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];
+    this.dropzoneNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||
+        [];
+    const currIdx = this.sortableNodes.indexOf(this.draggedElement);
+    let curDzIdx = -1;
+    if (this.dropzoneNodes.length) {
+      const curDropzone = this.draggedElement.closest(this.dropzoneSelector);
+      curDzIdx = this.dropzoneNodes.indexOf(curDropzone);
+      curDzIdx = curDzIdx > -1 ? curDzIdx : -1;
+    }
+    /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */
+    const prevEle = currIdx - 1 < 0 && curDzIdx > -1
+      ? this.dropzoneNodes[curDzIdx - 1]
+      : this.sortableNodes[currIdx - 1];
+    const nextEle = currIdx + 1 === this.sortableNodes.length && curDzIdx > -1
+      ? this.dropzoneNodes[curDzIdx + 1]
+      : this.sortableNodes[currIdx + 1];
+    if (e.key === 'Home') {
+      this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);
+    }
+    if (e.key === 'End') {
+      this.insertAtTarget(this.draggedElement, this.sortableNodes[this.sortableNodes.length - 1]);
+    }
+    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+      this.insertAtTarget(this.draggedElement, nextEle);
+    }
+    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+      this.insertAtTarget(this.draggedElement, prevEle);
+    }
+    this.finishOrder();
+    this.draggedElement = sortEle;
+    const focus = () => {
+      requestAnimationFrame(() => {
+        typeof foundHandle['setFocus'] === 'function'
+          ? foundHandle.setFocus()
+          : foundHandle.focus();
+      });
+    };
+    // replace focus to handle so we don't 'drop' the element
+    if (this.animationPromise)
+      this.animationPromise.then(() => focus());
+    else
+      focus();
+  }
+  /**
+   * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following
+   * the first actual move event following a touchstart/mousedown */
+  handleTrack(e) {
+    if (this.dragRequestPending || (e.button && e.button !== 1))
+      return;
+    clearTimeout(this.mouseDownTimer);
+    this.mouseDownTimer = window === null || window === void 0 ? void 0 : window.setTimeout(() => {
+      if (!this.trackStart(e))
+        return;
+      this.addAriaMsg(this.grabbedHelperText(this.draggedElement));
+      drag(this.sortableHost, {
+        initialEvent: e,
+        relative: true,
+        onMove: (x, y) => {
+          this.trackMove(x, y);
+        },
+        onStop: () => {
+          this.nanoDropped.emit({ element: this.draggedElement });
+          const didStop = () => {
+            this.addAriaMsg(this.droppedHelperText(this.draggedElement));
+            requestAnimationFrame(() => this.finishOrder());
+          };
+          if (this.animationPromise) {
+            this.animationPromise.then(() => didStop());
+          }
+          else
+            didStop();
+        },
+      });
+    }, 100);
+    document.addEventListener('mouseup', () => clearTimeout(this.mouseDownTimer), { once: true });
+  }
+  /**
+   * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.
+   * OR If a handleSelector is defined, a node matching this selector must be clicked instead
+   * @returns boolean - whether tracking for this event should continue or not
+   */
+  trackStart(e) {
+    const targetElement = e.target;
+    let targetHandle;
+    // If we have a handle set, return now if not being pressed
+    if (this.handleSelector) {
+      targetHandle = targetElement.closest(this.handleSelector);
+      if (!targetHandle)
+        return;
+      targetHandle.classList.add(this.handleDraggedClass);
+    }
+    // Check that we've found the target element via itemSelector
+    const node = targetElement.closest(this.itemSelector);
+    if (!node)
+      return false;
+    this.sortableNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];
+    const nanoGrabbedEv = this.nanoGrabbed.emit({
+      element: node,
+      index: this.sortableNodes.indexOf(node),
+    });
+    if (nanoGrabbedEv.defaultPrevented)
+      return false;
+    // Element found... start everything
+    e.preventDefault();
+    this.updateUserSelectStyle('none');
+    this.dragRequestPending = true;
+    this.draggedElement = node;
+    this.dropzoneNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||
+        [];
+    this.draggedElementClone = this.createClone(node);
+    this.draggedElementOrigin = node.nextSibling;
+    this.animatedElements = [];
+    this.draggedElement.classList.add(this.placeholderClass);
+    return true;
+  }
+  /** Ends re-ordering */
+  finishOrder() {
+    if (!this.draggedElement)
+      return;
+    const updated = Array.from(this.sortableHost.querySelectorAll(this.itemSelector)).filter((ele) => ele !== this.draggedElementClone);
+    const originalIndex = this.sortableNodes.indexOf(this.draggedElement);
+    const targetIndex = updated.indexOf(this.draggedElement);
+    if (this.handleSelector) {
+      const targetHandle = this.draggedElement.querySelector(this.handleSelector);
+      targetHandle.classList.remove(this.handleDraggedClass);
+    }
+    if (originalIndex !== targetIndex) {
+      const orderChangeEv = this.nanoOrderChange.emit({
+        element: this.draggedElement,
+        originalIndex,
+        targetIndex,
+      });
+      if (orderChangeEv.defaultPrevented) {
+        /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */
+        this.animationPromise = new Promise((resolve) => {
+          setTimeout(() => {
+            this.insertAtTarget(this.draggedElement, updated[originalIndex]);
+            this.reset();
+            this.dragRequestPending = false;
+            resolve();
+          }, 200);
+        });
+        return;
+      }
+      this.addAriaMsg(this.reorderHelperText(this.draggedElement, updated, targetIndex + 1));
+    }
+    this.reset();
+    this.dragRequestPending = false;
+  }
+  /// Component lifecycle ///
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.nanoOrderChange = createEvent(this, "nanoOrderChange", 7);
+    this.nanoGrabbed = createEvent(this, "nanoGrabbed", 7);
+    this.nanoDropped = createEvent(this, "nanoDropped", 7);
+    this.dragRequestPending = false;
+    this.sortableNodes = [];
+    this.dropzoneNodes = [];
+    this.animatedElements = [];
+    this.keyboardHandleMap = new Map();
+    this.sortableId = `nano-sortable-${sortableIds++}`;
+    /**
+     * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
+     * the insert point for updated sorting */
+    this.trackMove = (x, y) => {
+      if (!this.draggedElementClone) {
+        return;
+      }
+      if (this.orientation) {
+        x = x * orientationMap[this.orientation].x;
+        y = y * orientationMap[this.orientation].y;
+      }
+      writeTask(() => {
+        Object.assign(this.draggedElementClone.style, {
+          transform: `translate3d(${x}px, ${y}px, 0)`,
+        });
+      });
+      let target = this.hitTest(this.draggedElementClone, this.sortableNodes)[0];
+      let activeDropzone;
+      if (this.dropzoneSelector && this.dropzoneActiveClass) {
+        readTask(() => {
+          activeDropzone = this.draggedElement.closest(this.dropzoneSelector);
+          writeTask(() => {
+            this.dropzoneNodes
+              .filter((dze) => dze !== activeDropzone)
+              .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));
+            activeDropzone.classList.add(this.dropzoneActiveClass);
+          });
+        });
+      }
+      // didn't find a target - let's test to see if we can use a drop-zone instead
+      if (!target && this.dropzoneNodes.length) {
+        target = this.hitTest(this.draggedElementClone, this.dropzoneNodes)[0];
+        if (this.draggedElement.closest(this.dropzoneSelector) === target)
+          return;
+      }
+      if (
+      // if clone intersects with a valid target,
+      target &&
+        // other than its own origin,
+        target !== this.draggedElement &&
+        // and the target isn't currently animating, which causes false hit tests,
+        !this.isAnimating(target)) {
+        this.insertAtTarget(this.draggedElement, target);
+      }
+    };
+    this.itemSelector = 'li';
+    this.handleSelector = undefined;
+    this.dropzoneSelector = undefined;
+    this.helperText = 'Press "Space" or "Enter" to enable element reordering and use the arrow keys to reorder items.' +
+      'Press "Escape" to cancel reordering. Alternatively, use your mouse to drag / reorder.';
+    this.itemDescriptor = (el) => `"${el.textContent.trim()}"`;
+    this.grabbedHelperText = (el) => `${this.itemDescriptor(el)} grabbed`;
+    this.droppedHelperText = (el) => `${this.itemDescriptor(el)} dropped`;
+    this.reorderHelperText = (el, elements, position) => `The list has been reordered, ${this.itemDescriptor(el)} is now item ${position} of ${elements.length}`;
+    this.createKeyboardHandle = (_number, _element) => {
+      const handleTpl = /* html */ `
+      <nano-icon-button
+        slot="end"
+        icon-name="light/arrows"
+        class="nano-sortable__keyboard-handle visually-hidden"
+      ></nano-icon-button>`;
+      const div = globalThis.document.createElement('div');
+      div.innerHTML = handleTpl;
+      const handle = div.children[0];
+      _element.append(handle);
+      return handle;
+    };
+    this.sortableHostElement = undefined;
+    this.animationEnabled = true;
+    this.draggedClass = 'nano-sortable__dragged';
+    this.handleDraggedClass = 'nano-sortable__handle-dragged';
+    this.placeholderClass = 'nano-sortable__placeholder';
+    this.dropzoneActiveClass = '';
+    this.animationTiming = { duration: 200, easing: 'ease-out' };
+    this.orientation = undefined;
+    this.dragResize = false;
+    this.keyboardSortActive = false;
+    this.ariaTextList = [];
+    this.handleTrack = this.handleTrack.bind(this);
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);
+    this.refreshKeyboardHandles = debounce$2(this.refreshKeyboardHandles, 500);
+  }
+  connectedCallback() {
+    this.addEventHandlers();
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeEventHandlers();
+    (_a = this.host.querySelector(`#${this.sortableId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = undefined;
+    }
+  }
+  render() {
+    return (hAsync(Host, null, hAsync("div", { class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (hAsync("div", null, str)))), hAsync("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "itemSelector": ["handleItemSelectorChange"],
+    "handleSelector": ["handleHandleSelectorChange"],
+    "createKeyboardHandle": ["handleCreateKeyboardHandleChange"],
+    "sortableHostElement": ["handleSortableHostElement"]
+  }; }
+  static get style() { return sortableCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "nano-sortable",
+    "$members$": {
+      "itemSelector": [1, "item-selector"],
+      "handleSelector": [1, "handle-selector"],
+      "dropzoneSelector": [1, "dropzone-selector"],
+      "helperText": [1, "helper-text"],
+      "itemDescriptor": [16],
+      "grabbedHelperText": [16],
+      "droppedHelperText": [16],
+      "reorderHelperText": [16],
+      "createKeyboardHandle": [16],
+      "sortableHostElement": [16],
+      "animationEnabled": [4, "animation-enabled"],
+      "draggedClass": [1, "dragged-class"],
+      "handleDraggedClass": [1, "handle-dragged-class"],
+      "placeholderClass": [1, "placeholder-class"],
+      "dropzoneActiveClass": [1, "dropzone-active-class"],
+      "animationTiming": [8, "animation-timing"],
+      "orientation": [1],
+      "dragResize": [4, "drag-resize"],
+      "keyboardSortActive": [32],
+      "ariaTextList": [32],
+      "refreshKeyboardHandles": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const spinnerCss = "/*!@:host*/.sc-nano-spinner-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-spinner,*.sc-nano-spinner::before,*.sc-nano-spinner::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-spinner{display:none !important}/*!@:host*/.sc-nano-spinner-h{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84 140 175);--indicator-color:var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );--track-color:var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));--overlay-color:var(--nano-layer-overlay-light, rgb(255 255 255 / 70%))}/*!@.spinner*/.spinner.sc-nano-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}/*!@:host([overlay]:not([overlay=false])) .spinner*/[overlay].sc-nano-spinner-h:not([overlay=false]) .spinner.sc-nano-spinner{position:absolute;inset:0}/*!@:host([overlay]:not([overlay=false])) .spinner .spinner__loader,\n:host([overlay]:not([overlay=false])) .spinner .spinner__text*/[overlay].sc-nano-spinner-h:not([overlay=false]) .spinner.sc-nano-spinner .spinner__loader.sc-nano-spinner,[overlay].sc-nano-spinner-h:not([overlay=false]) .spinner.sc-nano-spinner .spinner__text.sc-nano-spinner{z-index:1}/*!@.spinner__overlay*/.spinner__overlay.sc-nano-spinner{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}/*!@.spinner__loader*/.spinner__loader.sc-nano-spinner{font-size:var(--spinner-scale, 1em)}/*!@.spinner__spin*/.spinner__spin.sc-nano-spinner{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite spin}/*!@.spinner__dna*/.spinner__dna.sc-nano-spinner{font-size:0.2286em;display:flex}/*!@.spinner__dnatrack*/.spinner__dnatrack.sc-nano-spinner{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}/*!@.spinner__dnatrack::before*/.spinner__dnatrack.sc-nano-spinner::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);animation:flex 1.5s linear infinite;transform-origin:center center}/*!@.spinner__dnatrack--2::before*/.spinner__dnatrack--2.sc-nano-spinner::before{animation:flex 1.5s -1.3s linear infinite}/*!@.spinner__dnatrack--3::before*/.spinner__dnatrack--3.sc-nano-spinner::before{animation:flex 1.5s -1.1s linear infinite}/*!@.spinner__dnatrack--4::before*/.spinner__dnatrack--4.sc-nano-spinner::before{animation:flex 1.5s -0.9s linear infinite}/*!@.spinner__dnatrack--5::before*/.spinner__dnatrack--5.sc-nano-spinner::before{animation:flex 1.5s -0.75s linear infinite}/*!@.spinner__dnadot*/.spinner__dnadot.sc-nano-spinner{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50%;background:var(--indicator-color);animation:rotate 1.5s linear infinite;transform-origin:center center;inset-inline-start:50%;transform:translateX(-50%) translateZ(0) translateY(0)}/*!@.spinner__dnadot--2*/.spinner__dnadot--2.sc-nano-spinner{animation:rotate 1.5s -0.75s linear infinite}/*!@.spinner__dnadot--3*/.spinner__dnadot--3.sc-nano-spinner{animation:rotate 1.5s -1.3s linear infinite}/*!@.spinner__dnadot--4*/.spinner__dnadot--4.sc-nano-spinner{animation:rotate 1.5s -0.55s linear infinite}/*!@.spinner__dnadot--5*/.spinner__dnadot--5.sc-nano-spinner{animation:rotate 1.5s -1.1s linear infinite}/*!@.spinner__dnadot--6*/.spinner__dnadot--6.sc-nano-spinner{animation:rotate 1.5s -0.35s linear infinite}/*!@.spinner__dnadot--7*/.spinner__dnadot--7.sc-nano-spinner{animation:rotate 1.5s -0.9s linear infinite}/*!@.spinner__dnadot--8*/.spinner__dnadot--8.sc-nano-spinner{animation:rotate 1.5s -0.15s linear infinite}/*!@.spinner__dnadot--9*/.spinner__dnadot--9.sc-nano-spinner{animation:rotate 1.5s -0.75s linear infinite}/*!@.spinner__dnadot--10*/.spinner__dnadot--10.sc-nano-spinner{animation:rotate 1.5s 0s linear infinite}/*!@.spinner__text*/.spinner__text.sc-nano-spinner{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(-50%) translateY(1.875em) scale(2)}50%{transform:translateX(-50%) translateY(3.75em) scale(1)}75%{transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes flex{0%,100%{transform:translateX(-50%) scaleY(5)}25%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(5)}75%{transform:translateX(-50%) scaleY(1)}}";
 
 /**
@@ -27401,24 +28165,6 @@ class Spinner {
   }; }
 }
 
-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*/.sc-nano-split-pane-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-split-pane,*.sc-nano-split-pane::before,*.sc-nano-split-pane::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-split-pane{display:none !important}/*!@:host*/.sc-nano-split-pane-h{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}/*!@.start,\n.end*/.start.sc-nano-split-pane,.end.sc-nano-split-pane{overflow:hidden}/*!@.divider*/.divider.sc-nano-split-pane{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}/*!@.divider:focus*/.divider.sc-nano-split-pane:focus{outline:none}/*!@:host(:not([disabled])) .divider:focus-visible*/.sc-nano-split-pane-h:not([disabled]) .divider.sc-nano-split-pane:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}/*!@:host([disabled]) .divider*/[disabled].sc-nano-split-pane-h .divider.sc-nano-split-pane{cursor:not-allowed}/*!@:host(:not([vertical]):not([disabled])) .divider*/.sc-nano-split-pane-h:not([vertical]):not([disabled]) .divider.sc-nano-split-pane{cursor:col-resize}/*!@:host(:not([vertical])) .divider::after*/.sc-nano-split-pane-h:not([vertical]) .divider.sc-nano-split-pane::after{display:flex;content:\"\";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}/*!@:host([vertical])*/[vertical].sc-nano-split-pane-h{flex-direction:column}/*!@:host([vertical]:not([disabled])) .divider*/[vertical].sc-nano-split-pane-h:not([disabled]) .divider.sc-nano-split-pane{cursor:row-resize}/*!@:host([vertical]) .divider::after*/[vertical].sc-nano-split-pane-h .divider.sc-nano-split-pane::after{content:\"\";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}";
 
 /**
@@ -27458,33 +28204,35 @@ class SplitPane {
       }
       // 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);
-        requestAnimationFrame(() => (this.shouldAnimate = true));
+      drag(this.host, {
+        onMove: (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);
+          requestAnimationFrame(() => (this.shouldAnimate = true));
+        },
       });
     };
     this.handleKeyDown = (event) => {
@@ -28344,11 +29092,17 @@ class Sticker {
   }; }
 }
 
-const tabCss = "/*!@:host*/.sc-nano-tab-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab,*.sc-nano-tab::before,*.sc-nano-tab::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab{display:none !important}/*!@:host*/.sc-nano-tab-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}/*!@:host([direction=vertical])*/[direction=vertical].sc-nano-tab-h{--padding:1rem}/*!@:host([direction=vertical]) .nanotab*/[direction=vertical].sc-nano-tab-h .nanotab.sc-nano-tab{font-size:var(--v-font-size)}/*!@:host([direction=vertical]) .nanotab.nanotab--active*/[direction=vertical].sc-nano-tab-h .nanotab.nanotab--active.sc-nano-tab{font-weight:600;color:var(--active-text-color)}/*!@:host([direction=horizontal]) .nanotab*/[direction=horizontal].sc-nano-tab-h .nanotab.sc-nano-tab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}/*!@:host([direction=horizontal]) .nanotab.nanotab--active*/[direction=horizontal].sc-nano-tab-h .nanotab.nanotab--active.sc-nano-tab{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}/*!@.nanotab*/.nanotab.sc-nano-tab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;align-items:center}/*!@.nanotab ::slotted(*)*/.nanotab .sc-nano-tab-s>*{display:flex;align-items:center}/*!@:host(:last-of-type) .nanotab*/.sc-nano-tab-h:last-of-type .nanotab.sc-nano-tab{-webkit-margin-end:0;margin-inline-end:0}/*!@.nanotab:hover:not(.tab--disabled)*/.nanotab.sc-nano-tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}/*!@.nanotab:focus*/.nanotab.sc-nano-tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}/*!@.nanotab:focus:not(.nanotab--disabled)*/.nanotab.sc-nano-tab:focus:not(.nanotab--disabled){box-shadow:var(--focus-shadow) inset}/*!@.nanotab--disabled*/.nanotab--disabled.sc-nano-tab{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}/*!@.nanotab__close-button*/.nanotab__close-button.sc-nano-tab{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);-webkit-appearance:none !important;appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) 0 var(--nano-spacing-xsmall, 4px) var(--nano-spacing-xsmall, 4px) !important}";
+const tabCss = "/*!@:host*/.sc-nano-tab-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab,*.sc-nano-tab::before,*.sc-nano-tab::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab{display:none !important}/*!@:host*/.sc-nano-tab-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding-v:0.75rem;--padding-h:1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;--border-radius:inherit;display:inline-block;cursor:pointer;border-radius:var(--border-radius)}/*!@:host([direction=vertical])*/[direction=vertical].sc-nano-tab-h{--padding-v:1rem;--padding-h:1rem}/*!@:host([direction=vertical]) .nanotab*/[direction=vertical].sc-nano-tab-h .nanotab.sc-nano-tab{font-size:var(--v-font-size)}/*!@:host([direction=vertical]) .nanotab.nanotab--active*/[direction=vertical].sc-nano-tab-h .nanotab.nanotab--active.sc-nano-tab{font-weight:600;color:var(--active-text-color)}/*!@:host(.nano-sortable__dragged)*/.nano-sortable__dragged.sc-nano-tab-h{box-shadow:none}/*!@:host(.nano-sortable__dragged) .nanotab*/.nano-sortable__dragged.sc-nano-tab-h .nanotab.sc-nano-tab{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}/*!@:host([direction=horizontal]) .nanotab*/[direction=horizontal].sc-nano-tab-h .nanotab.sc-nano-tab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}/*!@:host([direction=horizontal]) .nanotab.nanotab--active*/[direction=horizontal].sc-nano-tab-h .nanotab.nanotab--active.sc-nano-tab{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}/*!@.nanotab*/.nanotab.sc-nano-tab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding-block:var(--padding-v);padding-inline:var(--padding-h);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;align-items:center;position:relative}/*!@.nanotab ::slotted(*)*/.nanotab .sc-nano-tab-s>*{display:flex;align-items:center}/*!@.nanotab ::slotted(.nano-sortable__keyboard-handle)*/.nanotab .sc-nano-tab-s>.nano-sortable__keyboard-handle{position:absolute;inset-inline-end:-1em;background:var(--inactive-bg);z-index:1}/*!@:host(:last-of-type) .nanotab*/.sc-nano-tab-h:last-of-type .nanotab.sc-nano-tab{-webkit-margin-end:0;margin-inline-end:0}/*!@.nanotab--disabled*/.nanotab--disabled.sc-nano-tab{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}/*!@.nanotab--closable*/.nanotab--closable.sc-nano-tab{-webkit-padding-end:0;padding-inline-end:0}/*!@.nanotab__tab*/.nanotab__tab.sc-nano-tab{display:flex;border-radius:inherit}/*!@.nanotab__tab:hover:not(.tab--disabled)*/.nanotab__tab.sc-nano-tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}/*!@.nanotab__tab:focus*/.nanotab__tab.sc-nano-tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}/*!@.nanotab__tab::before*/.nanotab__tab.sc-nano-tab::before{content:\"\";position:absolute;inset:0;border-radius:inherit}/*!@.nanotab__tab:focus-visible:not(.nanotab--disabled)::before*/.nanotab__tab.sc-nano-tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow) inset}/*!@.nanotab--active .nanotab__tab:focus-visible:not(.nanotab--disabled)::before*/.nanotab--active.sc-nano-tab .nanotab__tab.sc-nano-tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow)}/*!@.nanotab__close-button*/.nanotab__close-button.sc-nano-tab{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);-webkit-margin-end:calc(var(--padding-h) / 2);margin-inline-end:calc(var(--padding-h) / 2);-webkit-appearance:none !important;appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) !important}";
 
 let id$2 = 0;
 /**
+ * @slot start - start of the tab, content. Outside of the focusable element
+ * @slot end - end of the tab, content. Outside of the focusable element
  * @slot - The tab's label.
+ *
+ * @part base - the wrapper around the whole control
+ * @part tab - the main tab control that controls the active state
+ * @part close-btn - the close button of the tab (if `closable=true`)
  */
 class Tab {
   constructor(hostRef) {
@@ -28376,12 +29130,12 @@ class Tab {
     this.tab.blur();
   }
   render() {
-    return (hAsync(Host, { id: this.host.id || this.tabId }, hAsync("div", { part: "base", ref: (el) => (this.tab = el), class: {
+    return (hAsync(Host, { id: this.host.id || this.tabId }, hAsync("div", { part: "base", class: {
         nanotab: true,
         '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' }, hAsync("slot", null), this.closable && (hAsync("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, tabIndex: -1 })))));
+      } }, hAsync("slot", { name: "start" }), hAsync("div", { part: "tab", ref: (el) => (this.tab = el), role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, hAsync("slot", null)), this.closable && !this.disabled && (hAsync("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), hAsync("slot", { name: "end" }))));
   }
   get host() { return getElement(this); }
   static get style() { return tabCss; }
@@ -28402,7 +29156,7 @@ class Tab {
   }; }
 }
 
-const tabGroupCss = "/*!@:host*/.sc-nano-tab-group-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab-group,*.sc-nano-tab-group::before,*.sc-nano-tab-group::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab-group{display:none !important}/*!@:host*/.sc-nano-tab-group-h{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){/*!@:host*/.sc-nano-tab-group-h{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}/*!@:host ::slotted(nano-tab)*/.sc-nano-tab-group-h .sc-nano-tab-group-s>nano-tab{--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}/*!@:host([placement=start]),\n:host([placement=end])*/[placement=start].sc-nano-tab-group-h,[placement=end].sc-nano-tab-group-h{--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}/*!@:host(.nano-color)*/.nano-color.sc-nano-tab-group-h{--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}/*!@:host(.nano-color) ::slotted(nano-tab)*/.sc-nano-tab-group-h.nano-color .sc-nano-tab-group-s>nano-tab{--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}/*!@.nano-tab-group*/.nano-tab-group.sc-nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}/*!@.nano-tab-group__tabs*/.nano-tab-group__tabs.sc-nano-tab-group{display:flex;position:relative;width:100%}/*!@.nano-tab-group__active-tab-indicator*/.nano-tab-group__active-tab-indicator.sc-nano-tab-group{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}/*!@.nano-tab-group__body*/.nano-tab-group__body.sc-nano-tab-group{background:var(--content-bg)}/*!@.nano-tab-group:not(.focus-visible) ::slotted(nano-tab)*/.nano-tab-group:not(.focus-visible) .sc-nano-tab-group-s>nano-tab{--focus-shadow:none}/*!@.nano-tab-group .nano-tab-group__nav-container*/.nano-tab-group.sc-nano-tab-group .nano-tab-group__nav-container.sc-nano-tab-group{position:relative;display:flex;background:var(--tabs-container-bg)}/*!@.nano-tab-group button*/.nano-tab-group.sc-nano-tab-group button.sc-nano-tab-group{-webkit-appearance:none;appearance:none;background-color:transparent}/*!@.nano-tab-group__scroll-button*/.nano-tab-group__scroll-button.sc-nano-tab-group{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}/*!@.nano-tab-group__scroll-button:focus*/.nano-tab-group__scroll-button.sc-nano-tab-group:focus{outline:none}/*!@.nano-tab-group__scroll-button.is-shown*/.nano-tab-group__scroll-button.is-shown.sc-nano-tab-group{opacity:1}/*!@.nano-tab-group__scroll-button.focus-visible:focus*/.nano-tab-group__scroll-button.focus-visible.sc-nano-tab-group:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}/*!@.nano-tab-group__scroll-button--left*/.nano-tab-group__scroll-button--left.sc-nano-tab-group{inset-inline-start:0}/*!@.nano-tab-group__scroll-button--right*/.nano-tab-group__scroll-button--right.sc-nano-tab-group{inset-inline-end:0}/*!@.nano-tab-group__scroll-button nano-icon*/.nano-tab-group__scroll-button.sc-nano-tab-group nano-icon.sc-nano-tab-group{font-size:16px}/*!@.nano-tab-group--top*/.nano-tab-group--top.sc-nano-tab-group{flex-direction:column}/*!@.nano-tab-group--top .nano-tab-group__nav-container::after*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav-container.sc-nano-tab-group::after{content:\"\";width:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}/*!@.nano-tab-group--top .nano-tab-group__nav*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow-x:auto;overflow-y:hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}/*!@.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group::-webkit-scrollbar{inline-size:0;block-size:0}/*!@.nano-tab-group--top .nano-tab-group__nav::after*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group::after{content:\" \";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-right.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}/*!@.nano-tab-group--top .nano-tab-group__tabs*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__tabs.sc-nano-tab-group{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}/*!@.nano-tab-group--top .nano-tab-group__active-tab-indicator*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__active-tab-indicator.sc-nano-tab-group{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}/*!@.nano-tab-group--top .nano-tab-group__body*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__body.sc-nano-tab-group{order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}/*!@.nano-tab-group--start*/.nano-tab-group--start.sc-nano-tab-group{flex-direction:row}/*!@.nano-tab-group--start .nano-tab-group__tabs*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__tabs.sc-nano-tab-group{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}/*!@.nano-tab-group--start .nano-tab-group__active-tab-indicator*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__active-tab-indicator.sc-nano-tab-group{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}/*!@.nano-tab-group--start .nano-tab-group__body*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__body.sc-nano-tab-group{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}";
+const tabGroupCss = "/*!@:host*/.sc-nano-tab-group-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-tab-group,*.sc-nano-tab-group::before,*.sc-nano-tab-group::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-tab-group{display:none !important}/*!@:host*/.sc-nano-tab-group-h{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){/*!@:host*/.sc-nano-tab-group-h{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}/*!@:host ::slotted(nano-tab)*/.sc-nano-tab-group-h .sc-nano-tab-group-s>nano-tab{--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}/*!@:host([placement=start])*/[placement=start].sc-nano-tab-group-h{--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}/*!@:host(.nano-color)*/.nano-color.sc-nano-tab-group-h{--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}/*!@:host(.nano-color) ::slotted(nano-tab)*/.sc-nano-tab-group-h.nano-color .sc-nano-tab-group-s>nano-tab{--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}/*!@.nano-tab-group*/.nano-tab-group.sc-nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}/*!@.nano-tab-group__tabs*/.nano-tab-group__tabs.sc-nano-tab-group{display:flex;position:relative;width:100%}/*!@.nano-tab-group__active-tab-indicator*/.nano-tab-group__active-tab-indicator.sc-nano-tab-group{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}/*!@.nano-tab-group__body*/.nano-tab-group__body.sc-nano-tab-group{background:var(--content-bg)}/*!@.nano-tab-group .nano-tab-group__nav-container*/.nano-tab-group.sc-nano-tab-group .nano-tab-group__nav-container.sc-nano-tab-group{position:relative;display:flex;background:var(--tabs-container-bg)}/*!@.nano-tab-group button*/.nano-tab-group.sc-nano-tab-group button.sc-nano-tab-group{-webkit-appearance:none;appearance:none;background-color:transparent}/*!@.nano-tab-group__scroll-button*/.nano-tab-group__scroll-button.sc-nano-tab-group{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}/*!@.nano-tab-group__scroll-button:focus*/.nano-tab-group__scroll-button.sc-nano-tab-group:focus{outline:none}/*!@.nano-tab-group__scroll-button.is-shown*/.nano-tab-group__scroll-button.is-shown.sc-nano-tab-group{opacity:1}/*!@.nano-tab-group__scroll-button:focus-visible*/.nano-tab-group__scroll-button.sc-nano-tab-group:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}/*!@.nano-tab-group__scroll-button--left*/.nano-tab-group__scroll-button--left.sc-nano-tab-group{inset-inline-start:0}/*!@.nano-tab-group__scroll-button--right*/.nano-tab-group__scroll-button--right.sc-nano-tab-group{inset-inline-end:0}/*!@.nano-tab-group__scroll-button nano-icon*/.nano-tab-group__scroll-button.sc-nano-tab-group nano-icon.sc-nano-tab-group{font-size:16px}/*!@.nano-tab-group--top*/.nano-tab-group--top.sc-nano-tab-group{flex-direction:column}/*!@.nano-tab-group--top .nano-tab-group__nav-container::after*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav-container.sc-nano-tab-group::after{content:\"\";width:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}/*!@.nano-tab-group--top .nano-tab-group__nav*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow-x:auto;overflow-y:hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}/*!@.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group::-webkit-scrollbar{inline-size:0;block-size:0}/*!@.nano-tab-group--top .nano-tab-group__nav::after*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group::after{content:\" \";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-right.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}/*!@.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav*/.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right.sc-nano-tab-group .nano-tab-group__nav.sc-nano-tab-group{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}/*!@.nano-tab-group--top .nano-tab-group__tabs*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__tabs.sc-nano-tab-group{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}/*!@.nano-tab-group--top .nano-tab-group__active-tab-indicator*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__active-tab-indicator.sc-nano-tab-group{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}/*!@.nano-tab-group--top .nano-tab-group__body*/.nano-tab-group--top.sc-nano-tab-group .nano-tab-group__body.sc-nano-tab-group{order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}/*!@.nano-tab-group--start*/.nano-tab-group--start.sc-nano-tab-group{flex-direction:row}/*!@.nano-tab-group--start .nano-tab-group__tabs*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__tabs.sc-nano-tab-group{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}/*!@.nano-tab-group--start .nano-tab-group__active-tab-indicator*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__active-tab-indicator.sc-nano-tab-group{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}/*!@.nano-tab-group--start .nano-tab-group__body*/.nano-tab-group--start.sc-nano-tab-group .nano-tab-group__body.sc-nano-tab-group{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}";
 
 /**
  * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
@@ -28449,6 +29203,9 @@ class TabGroup {
         this.setActiveTab(tab);
     };
     this.handleKeyDown = (event) => {
+      const activeEl = document.activeElement;
+      if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab')
+        return;
       // Activate a tab
       if (['Enter', ' '].includes(event.key)) {
         const target = event.target;
@@ -28456,45 +29213,49 @@ class TabGroup {
         if (tab) {
           this.setActiveTab(tab);
           event.preventDefault();
+          event.stopPropagation();
         }
       }
       // Move focus left or right
-      if ([
+      if (![
         'ArrowLeft',
         'ArrowRight',
         'ArrowUp',
         'ArrowDown',
         'Home',
         'End',
-      ].includes(event.key)) {
-        const activeEl = document.activeElement;
-        if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {
-          const tabs = this.getAllActiveTabs;
-          let index = tabs.indexOf(activeEl);
-          if (event.key === 'Home') {
-            index = 0;
-          }
-          else if (event.key === 'End') {
-            index = tabs.length - 1;
-          }
-          else if ((this.isRtl && event.key === 'ArrowRight') ||
-            (!this.isRtl && event.key === 'ArrowLeft')) {
-            index = Math.max(0, index - 1);
-          }
-          else if ((this.isRtl && event.key === 'ArrowLeft') ||
-            (!this.isRtl && event.key === 'ArrowRight')) {
-            index = Math.min(tabs.length - 1, index + 1);
-          }
-          tabs[index].setFocus();
-          if (['top'].includes(this.placement)) {
-            scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');
-          }
-          // need to stop bubbling otherwise it will focus on parent tabs if nested
-          event.stopPropagation();
-          // stop the browser moving about
-          event.preventDefault();
+      ].includes(event.key))
+        return;
+      const tabs = this.getAllActiveTabs;
+      let index = tabs.indexOf(activeEl);
+      if (event.key === 'Home')
+        index = 0;
+      if (event.key === 'End')
+        index = tabs.length - 1;
+      if (this.placement === 'top') {
+        if ((this.isRtl && event.key === 'ArrowRight') ||
+          (!this.isRtl && event.key === 'ArrowLeft')) {
+          index = Math.max(0, index - 1);
         }
+        if ((this.isRtl && event.key === 'ArrowLeft') ||
+          (!this.isRtl && event.key === 'ArrowRight')) {
+          index = Math.min(tabs.length - 1, index + 1);
+        }
+      }
+      if (this.placement === 'start') {
+        if (event.key === 'ArrowUp')
+          index = Math.max(0, index - 1);
+        if (event.key === 'ArrowDown')
+          index = Math.min(tabs.length - 1, index + 1);
       }
+      tabs[index].setFocus();
+      if (this.placement === 'top') {
+        scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');
+      }
+      // need to stop bubbling otherwise it will focus on parent tabs if nested
+      event.stopPropagation();
+      // stop the browser moving about
+      event.preventDefault();
     };
     this.handleTabScroll = () => {
       if (!this.hasScrollControls) {
@@ -28785,11 +29546,6 @@ class TabGroup {
       }
     });
     observer.observe(this.host);
-    focusVisible.observe(this.tabGroup);
-    if (this.leftBtn) {
-      focusVisible.observe(this.leftBtn);
-      focusVisible.observe(this.rightBtn);
-    }
     requestAnimationFrame(() => this.updateScrollControls());
     if (!window['ResizeObserver'])
       return;
@@ -28812,27 +29568,22 @@ class TabGroup {
     }
   }
   disconnectedCallback() {
-    focusVisible.unobserve(this.tabGroup);
-    if (this.leftBtn) {
-      focusVisible.unobserve(this.leftBtn);
-      focusVisible.unobserve(this.rightBtn);
-    }
     if (this.resizeObserver)
       this.resizeObserver.unobserve(this.nav);
   }
   render() {
     this.isRtl = this.host.ownerDocument.dir === 'rtl';
-    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)), dir: this.isRtl ? 'rtl' : null }, hAsync("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+    return (hAsync(Host, { class: Object.assign({}, createColorClasses(this.color)), dir: this.isRtl ? 'rtl' : null }, hAsync("div", { part: "base", class: {
         'nano-tab-group': true,
         'nano-tab-group--top': this.placement === 'top',
         'nano-tab-group--start': this.placement === 'start',
         'nano-tab-group--has-scroll-controls': this.hasScrollControls,
         'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
         'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
-      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (hAsync("button", { class: {
+      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, hAsync("div", { class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (hAsync("button", { disabled: !this.hasScrollControls, class: {
         'nano-tab-group__scroll-button': true,
         'nano-tab-group__scroll-button--left': true,
-      }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, hAsync("nano-icon", { name: "light/chevron-left" }))), hAsync("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, hAsync("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" }, hAsync("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), hAsync("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (hAsync("button", { class: {
+      }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, hAsync("nano-icon", { name: "light/chevron-left" }))), hAsync("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, hAsync("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" }, hAsync("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), hAsync("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (hAsync("button", { disabled: !this.hasScrollControls, class: {
         'nano-tab-group__scroll-button': true,
         'nano-tab-group__scroll-button--right': true,
       }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, hAsync("nano-icon", { name: "light/chevron-right" })))), hAsync("slot", { name: "tab-content-header" }), hAsync("div", { part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync("slot", { onSlotchange: this.handleContentSlotChange })))));
@@ -28851,7 +29602,7 @@ class TabGroup {
     "$flags$": 9,
     "$tagName$": "nano-tab-group",
     "$members$": {
-      "placement": [1],
+      "placement": [513],
       "noScrollControls": [4, "no-scroll-controls"],
       "color": [1],
       "storeId": [1, "store-id"],
@@ -28865,7 +29616,7 @@ class TabGroup {
     },
     "$listeners$": [[0, "nanoTabClose", "handleTabClose"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["placement", "placement"]]
   }; }
 }
 
@@ -29707,12 +30458,12 @@ function sort(workerStore, rows, prop, order) {
     return rows;
   const col = workerStore.columns.find((c) => c.prop === prop);
   // custom sort
-  if (!!col.sortCompareFn && typeof col.sortCompareFn === 'function') {
+  if (!!(col === null || col === void 0 ? void 0 : col.sortCompareFn) && typeof col.sortCompareFn === 'function') {
     const sorted = rows.slice().sort(col.sortCompareFn(prop, order));
     return sorted;
   }
   // text sort
-  if (col.type === 'text' && typeof rows[0][prop] === 'string') {
+  if ((col === null || col === void 0 ? void 0 : col.type) === 'text' && typeof rows[0][prop] === 'string') {
     const sorted = rows.slice().sort((a, b) => {
       if (!a[prop])
         return 1;
@@ -29756,7 +30507,7 @@ function applyFiltersAndSort(workerStore, rows) {
 }
 function colsFromStore(safeColumns) {
   return safeColumns.map((c) => {
-    if (!!c.sortCompareFn) {
+    if (!!(c === null || c === void 0 ? void 0 : c.sortCompareFn)) {
       c.sortCompareFn = new Function('return ' + c.sortCompareFn)();
     }
     return c;
@@ -29773,7 +30524,7 @@ async function destroyWorkerStore(workerId) {
 function colsToWorker(columns) {
   const safeColumns = JSON.parse(JSON.stringify(columns));
   columns.forEach((c) => {
-    if (!!c.sortCompareFn) {
+    if (!!(c === null || c === void 0 ? void 0 : c.sortCompareFn)) {
       const safeCol = safeColumns.find((sc) => sc.prop === c.prop);
       safeCol.sortCompareFn = c.sortCompareFn.toString();
     }
@@ -30167,88 +30918,8 @@ function isInViewport(el, percentVisible = 100) {
     Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
       percentVisible);
 }
-/**
- * Immutable array re-order
- * @param from - the index to move from
- * @param to - the index to move to
- * @param arr - the array to re-order
- * @returns - a new, re-orderd array
- */
-function arrMove(from, to, arr) {
-  const newArr = [...arr];
-  const item = newArr.splice(from, 1)[0];
-  newArr.splice(to, 0, item);
-  return newArr;
-}
-
-// TABLE HEADERS
-// (thead > tr > th, tfoot > tr > th)
-let draggingCol;
-let draggingColEle;
-let dragEnterEle;
-let draggingParent;
-const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, onColumnDrag, onColumnDrop, defaults, }) => {
-  const store = fetchStores();
-  // Drag to re-order columns handling
-  function handleDragStart(e, column) {
-    draggingCol = column;
-    draggingColEle = dragEnterEle = e.target;
-    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);
-    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);
-    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);
-    onColumnDrag(column.prop, draggingColEle);
-  }
-  function handleDragEnd() {
-    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);
-    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);
-    draggingParent
-      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
-      .forEach((el) => {
-      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
-    });
-    draggingColEle = null;
-    draggingCol = null;
-    draggingParent = null;
-    dragEnterEle = null;
-  }
-  function handleDragEnter(e) {
-    if (dragEnterEle === e.target)
-      return;
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    e.dataTransfer.dropEffect = 'move';
-    draggingParent
-      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
-      .forEach((el) => {
-      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
-    });
-    dragEnterEle = e.target;
-    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {
-      e.dataTransfer.dropEffect = 'none';
-      return;
-    }
-    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);
-  }
-  function handleDrop(e) {
-    e.stopPropagation();
-    const { colName } = this.dataset;
-    if (colName === draggingCol.prop)
-      return;
-    const cols = store.config.state.columns;
-    let toIndex = cols.findIndex((col) => col.prop === colName);
-    const fromIndex = cols.findIndex((col) => col === draggingCol);
-    if (toIndex < fromIndex &&
-      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`))
-      toIndex++;
-    if (toIndex > fromIndex &&
-      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`))
-      toIndex--;
-    if (toIndex === fromIndex)
-      return;
-    onColumnDrop(draggingCol.prop, store.config.state.columns[toIndex].prop, draggingColEle);
-  }
+
+const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, defaults, }) => {
   // Sort handling
   function handleColumnSortClick(e) {
     let order;
@@ -30268,10 +30939,6 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
     return ((!!defaults.sortable && column.sortable !== false) ||
       (!defaults.sortable && column.sortable === true));
   }
-  function isDraggable() {
-    return ((!!defaults.draggable && column.draggable !== false) ||
-      (!defaults.draggable && column.draggable === true));
-  }
   let extraProps = {};
   if (column.columnProperties) {
     extraProps = column.columnProperties(column) || extraProps;
@@ -30294,37 +30961,23 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
       : 'none';
     props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
-  if (isDraggable()) {
-    props = Object.assign(Object.assign({}, props), { draggable: true, onDragStart: (e) => handleDragStart(e, column), onDragOver: (e) => e.preventDefault(), onDragEnd: () => handleDragEnd() });
-  }
   return (hAsync("th", Object.assign({}, props, { ref: (th) => {
       if (['end', 'start'].includes(column.pinned))
         addHObserver(th, column.pinned, onColumnPinned);
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
-    }, key: column.prop }),
-    isDraggable() && [
-      hAsync("div", { class: {
-          [`${CSSNAMESPACE}__drag-mask`]: true,
-          [`${CSSNAMESPACE}__drag-mask--start`]: true,
-        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
-      hAsync("div", { class: {
-          [`${CSSNAMESPACE}__drag-mask`]: true,
-          [`${CSSNAMESPACE}__drag-mask--end`]: true,
-        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
-    ],
-    isSortable() ? (hAsync("button", { class: {
-        [`${CSSNAMESPACE}__order-btn`]: true,
-        [`${CSSNAMESPACE}__cell-content`]: true,
-      }, onClick: handleColumnSortClick },
-      colheadFootRender(column),
-      column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/filter" })),
-      !!column.order &&
-        (column.order === 'desc' ? (hAsync("nano-icon", { name: "solid/long-arrow-down" })) : (hAsync("nano-icon", { name: "solid/long-arrow-up" }))),
-      hAsync("div", { class: `${CSSNAMESPACE}__status-icons` },
-        hAsync("nano-icon", { name: "light/chevron-down" })))) : (hAsync("div", { class: `${CSSNAMESPACE}__cell-content` },
-      colheadFootRender(column),
-      column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/bars-filter" }))))));
+    }, key: column.prop }), isSortable() ? (hAsync("button", { class: {
+      [`${CSSNAMESPACE}__order-btn`]: true,
+      [`${CSSNAMESPACE}__cell-content`]: true,
+    }, onClick: handleColumnSortClick },
+    colheadFootRender(column),
+    column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/filter" })),
+    !!column.order &&
+      (column.order === 'desc' ? (hAsync("nano-icon", { name: "solid/long-arrow-down" })) : (hAsync("nano-icon", { name: "solid/long-arrow-up" }))),
+    hAsync("div", { class: `${CSSNAMESPACE}__status-icons` },
+      hAsync("nano-icon", { name: "light/chevron-down" })))) : (hAsync("div", { class: `${CSSNAMESPACE}__cell-content` },
+    colheadFootRender(column),
+    column.filter !== undefined && column.filter !== null && (hAsync("nano-icon", { name: "light/bars-filter" }))))));
 };
 
 // TABLE CELL
@@ -30509,7 +31162,7 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   return hAsync("tr", Object.assign({}, props), children);
 };
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;-webkit-border-start:2px dashed var(--border-tint-color);border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;-webkit-border-end:2px dashed var(--border-tint-color);border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/90%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;transform:translateZ(0)}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{-webkit-border-before:none;border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{-webkit-border-before:var(--border-tint-style) !important;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{-webkit-border-after:none !important;border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform:scale(1);height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-before:var(--border-style);border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding);padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding);padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--td-padding-start) !important;padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/90%);font-size:var(--thead-font-size);-webkit-border-before:none !important;border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;-webkit-border-before:none;border-block-start:none;background:rgb(var(--foot-bg-rgb)/90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;transform:translateZ(0)}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{-webkit-border-before:none;border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{-webkit-border-before:var(--border-tint-style) !important;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{-webkit-border-after:none !important;border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
 
 let id = 0;
 /**
@@ -30520,7 +31173,6 @@ let id = 0;
  *- Built-in column sort
  *- Easily swap in API / async based search / filter & sort
  *- Pin headers, footers, rows, columns
- *- Drag-&-Drop columns to re-order
  *- Add custom rendering at every level
  *- Add custom properties at every level
  *
@@ -30534,8 +31186,6 @@ class Table {
     this.nanoTblBlockRendered = createEvent(this, "nanoTblBlockRendered", 7);
     this.nanoTblBeforeSort = createEvent(this, "nanoTblBeforeSort", 7);
     this.nanoTblAfterSort = createEvent(this, "nanoTblAfterSort", 7);
-    this.nanoTblColDrag = createEvent(this, "nanoTblColDrag", 7);
-    this.nanoTblColDrop = createEvent(this, "nanoTblColDrop", 7);
     this.nanoTblBeforeFilter = createEvent(this, "nanoTblBeforeFilter", 7);
     this.nanoTblAfterFilter = createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = createEvent(this, "nanoTblBeforeSearch", 7);
@@ -30550,32 +31200,6 @@ class Table {
     this.blockHeights = [];
     this.unitHeight = 0;
     this._isReady = false;
-    /**
-     * Fired when a column is dragged
-     * @param column
-     */
-    this.colDrag = (column) => {
-      this.nanoTblColDrag.emit({ column });
-    };
-    /**
-     * Fired when a column is dropped after being dragged
-     * @param fromCol
-     * @param toCol
-     */
-    this.colDrop = (fromCol, toCol) => {
-      const cols = this.store.config.state.columns;
-      const toIndex = cols.findIndex((col) => col.prop === toCol);
-      const fromIndex = cols.findIndex((col) => col.prop === fromCol);
-      const dropEvent = this.nanoTblColDrop.emit({
-        fromCol,
-        toCol,
-        fromIndex,
-        toIndex,
-      });
-      if (dropEvent.defaultPrevented)
-        return;
-      this.columns = arrMove(fromIndex, toIndex, cols);
-    };
     /**
      * Start a sort - can be cancelled by `preventDefault`
      * @param order - column order
@@ -30684,7 +31308,6 @@ class Table {
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
     this.defaultSort = true;
-    this.defaultColDraggable = false;
     this.virtualTotalItems = 0;
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
@@ -31113,6 +31736,8 @@ class Table {
       this.activeWatcherIo = undefined;
     }
     const io = (this.activeWatcherIo = new IntersectionObserver(async ([e]) => {
+      if (!this.store)
+        return;
       if (e.isIntersecting)
         this.store.general.state.isActive = true;
       else
@@ -31163,9 +31788,8 @@ class Table {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
       }, id: 'table-caption-' + this.renderId }, hAsync("slot", { name: "caption" }, this.caption)), hAsync("thead", null, hAsync(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      hAsync(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, onColumnDrag: this.colDrag, onColumnDrop: this.colDrop, defaults: {
+      hAsync(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, defaults: {
           sortable: this.defaultSort,
-          draggable: this.defaultColDraggable,
         } }),
     ]))), this._loading && !this.blocks.length && (hAsync("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (hAsync("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => hAsync("nano-skeleton", null) })))))))), hAsync("tr", { hidden: !!this._loading || !!this.blocks.length }, hAsync("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, hAsync("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, hAsync("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (hAsync("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
@@ -31180,7 +31804,6 @@ class Table {
       } })))))), this.showFooter && (hAsync("tfoot", null, hAsync(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       hAsync(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
-          draggable: this.defaultColDraggable,
         } }),
     ]))))), !!this.blocks.length && (hAsync("nano-spinner", { type: "circle", class: {
         [`${CSSNAMESPACE}__spinner`]: true,
@@ -31216,7 +31839,6 @@ class Table {
       "customFilterFn": [16],
       "customSortFn": [16],
       "defaultSort": [4, "default-sort"],
-      "defaultColDraggable": [4, "default-col-draggable"],
       "virtualTotalItems": [2, "virtual-total-items"],
       "internalLoading": [32],
       "blocks": [32],
@@ -31474,6 +32096,7 @@ registerComponents([
   Skeleton,
   Slide$2,
   Slides,
+  Sortable,
   Spinner,
   SplitPane,
   Sticker,