@nanoporetech-digital/components 4.9.4 → 5.0.0

package/hydrate/index.js

@@ -5287,7 +5287,7 @@ const createTime = (e, t = "") => {
  };
  return (n.$attrs$ = null), (n.$key$ = null), 
  (n.$name$ = null), n;
-}, Host = {}, isHost = e => e && e.$tag$ === Host, vdomFnUtils = {
+}, Host = {}, isHost$1 = e => e && e.$tag$ === Host, vdomFnUtils = {
  forEach: (e, t) => e.map(convertToPublic).forEach(t),
  map: (e, t) => e.map(convertToPublic).map(t).map(convertToPrivate)
 }, convertToPublic = e => ({
@@ -5691,7 +5691,7 @@ const createElm = (e, t, n, o) => {
 }, isNodeLocatedInSlot = (e, t) => 1 === e.nodeType ? null === e.getAttribute("slot") && "" === t || e.getAttribute("slot") === t : e["s-sn"] === t || "" === t, callNodeRefs = e => {
  (e.$attrs$ && e.$attrs$.ref && e.$attrs$.ref(null), e.$children$ && e.$children$.map(callNodeRefs));
 }, renderVdom = (e, t) => {
- const n = e.$hostElement$, o = e.$cmpMeta$, s = e.$vnode$ || newVNode(null, null), r = isHost(t) ? t : h(null, null, t);
+ const n = e.$hostElement$, o = e.$cmpMeta$, s = e.$vnode$ || newVNode(null, null), r = isHost$1(t) ? t : h(null, null, t);
  if (hostTagName = n.tagName, BUILD.isDev  ) ;
  if (o.$attrsToReflect$ && (r.$attrs$ = r.$attrs$ || {}, o.$attrsToReflect$.map((([e, t]) => r.$attrs$[t] = n[e]))), 
  r.$tag$ = null, r.$flags$ |= 4, e.$vnode$ = r, r.$elm$ = s.$elm$ = n.shadowRoot || n, 
@@ -19057,26 +19057,214 @@ class GlobalSearchResults {
   }; }
 }
 
-const gridCss = "/*!@:host*/.sc-nano-grid-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-grid,*.sc-nano-grid::before,*.sc-nano-grid::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-grid{display:none !important}/*!@:host*/.sc-nano-grid-h{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"'grid size: sm'\";display:block;opacity:0;transition:0.2s ease opacity;max-width:100%}/*!@:host .grid*/.sc-nano-grid-h .grid.sc-nano-grid{display:grid;grid-gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}/*!@:host(.ready)*/.ready.sc-nano-grid-h{opacity:1}/*!@:host(.has-grid) .grid*/.has-grid.sc-nano-grid-h .grid.sc-nano-grid{display:grid}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-1)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-1{grid-column-start:1 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-1)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-1{grid-row-start:1 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-1)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-1{grid-column-end:span 1 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-1)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-1{grid-row-end:span 1 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-2)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-2{grid-column-start:2 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-2)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-2{grid-row-start:2 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-2)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-2{grid-column-end:span 2 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-2)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-2{grid-row-end:span 2 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-3)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-3{grid-column-start:3 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-3)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-3{grid-row-start:3 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-3)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-3{grid-column-end:span 3 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-3)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-3{grid-row-end:span 3 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-4)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-4{grid-column-start:4 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-4)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-4{grid-row-start:4 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-4)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-4{grid-column-end:span 4 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-4)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-4{grid-row-end:span 4 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-5)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-5{grid-column-start:5 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-5)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-5{grid-row-start:5 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-5)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-5{grid-column-end:span 5 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-5)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-5{grid-row-end:span 5 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-6)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-6{grid-column-start:6 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-6)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-6{grid-row-start:6 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-6)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-6{grid-column-end:span 6 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-6)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-6{grid-row-end:span 6 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-7)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-7{grid-column-start:7 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-7)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-7{grid-row-start:7 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-7)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-7{grid-column-end:span 7 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-7)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-7{grid-row-end:span 7 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-8)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-8{grid-column-start:8 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-8)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-8{grid-row-start:8 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-8)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-8{grid-column-end:span 8 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-8)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-8{grid-row-end:span 8 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-9)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-9{grid-column-start:9 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-9)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-9{grid-row-start:9 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-9)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-9{grid-column-end:span 9 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-9)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-9{grid-row-end:span 9 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-start-10)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-start-10{grid-column-start:10 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-start-10)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-start-10{grid-row-start:10 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-col-span-10)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-col-span-10{grid-column-end:span 10 !important}/*!@:host(.has-grid) .grid ::slotted(.nano-grid-row-span-10)*/.sc-nano-grid-h.has-grid .grid .sc-nano-grid-s>.nano-grid-row-span-10{grid-row-end:span 10 !important}/*!@:host([content-panel]:not([content-panel=false])) .grid*/[content-panel].sc-nano-grid-h:not([content-panel=false]) .grid.sc-nano-grid{grid-template-rows:auto 1fr}/*!@:host([full-height]:not([full-height=false]))*/[full-height].sc-nano-grid-h:not([full-height=false]){block-size:100%}/*!@:host([full-height]:not([full-height=false])) .grid*/[full-height].sc-nano-grid-h:not([full-height=false]) .grid.sc-nano-grid{grid-template-rows:1fr}/*!@:host([show-helper]:not([show-helper=false])) .grid*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid.sc-nano-grid{position:relative}/*!@:host([show-helper]:not([show-helper=false])) .grid::after*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid.sc-nano-grid::after{content:\"\";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right, rgba(126, 195, 241, 0.25), rgba(126, 195, 241, 0.25) var(--col-width), transparent var(--col-width), transparent var(--repeat-width));background-size:calc(100% + var(--grid-col-gap)) 100%;z-index:100}/*!@:host([show-helper]:not([show-helper=false])) .grid::before*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid.sc-nano-grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}/*!@:host(.nano-grid-1)*/.nano-grid-1.sc-nano-grid-h{--current-grid-size:\"grid size: 1\";--col-width:calc(100% - var(--grid-col-gap));--repeat-width:calc(100% / 1)}/*!@:host(.nano-grid-1) .grid*/.nano-grid-1.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(1, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-2)*/.nano-grid-2.sc-nano-grid-h{--current-grid-size:\"grid size: 2\";--col-width:calc(50% - var(--grid-col-gap));--repeat-width:calc(100% / 2)}/*!@:host(.nano-grid-2) .grid*/.nano-grid-2.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(2, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-3)*/.nano-grid-3.sc-nano-grid-h{--current-grid-size:\"grid size: 3\";--col-width:calc(33.3333333333% - var(--grid-col-gap));--repeat-width:calc(100% / 3)}/*!@:host(.nano-grid-3) .grid*/.nano-grid-3.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(3, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-4)*/.nano-grid-4.sc-nano-grid-h{--current-grid-size:\"grid size: 4\";--col-width:calc(25% - var(--grid-col-gap));--repeat-width:calc(100% / 4)}/*!@:host(.nano-grid-4) .grid*/.nano-grid-4.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(4, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-5)*/.nano-grid-5.sc-nano-grid-h{--current-grid-size:\"grid size: 5\";--col-width:calc(20% - var(--grid-col-gap));--repeat-width:calc(100% / 5)}/*!@:host(.nano-grid-5) .grid*/.nano-grid-5.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(5, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-6)*/.nano-grid-6.sc-nano-grid-h{--current-grid-size:\"grid size: 6\";--col-width:calc(16.6666666667% - var(--grid-col-gap));--repeat-width:calc(100% / 6)}/*!@:host(.nano-grid-6) .grid*/.nano-grid-6.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(6, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-7)*/.nano-grid-7.sc-nano-grid-h{--current-grid-size:\"grid size: 7\";--col-width:calc(14.2857142857% - var(--grid-col-gap));--repeat-width:calc(100% / 7)}/*!@:host(.nano-grid-7) .grid*/.nano-grid-7.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(7, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-8)*/.nano-grid-8.sc-nano-grid-h{--current-grid-size:\"grid size: 8\";--col-width:calc(12.5% - var(--grid-col-gap));--repeat-width:calc(100% / 8)}/*!@:host(.nano-grid-8) .grid*/.nano-grid-8.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(8, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-9)*/.nano-grid-9.sc-nano-grid-h{--current-grid-size:\"grid size: 9\";--col-width:calc(11.1111111111% - var(--grid-col-gap));--repeat-width:calc(100% / 9)}/*!@:host(.nano-grid-9) .grid*/.nano-grid-9.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(9, minmax(var(--col-width), 1fr))}/*!@:host(.nano-grid-10)*/.nano-grid-10.sc-nano-grid-h{--current-grid-size:\"grid size: 10\";--col-width:calc(10% - var(--grid-col-gap));--repeat-width:calc(100% / 10)}/*!@:host(.nano-grid-10) .grid*/.nano-grid-10.sc-nano-grid-h .grid.sc-nano-grid{grid-template-columns:repeat(10, minmax(var(--col-width), 1fr))}";
+// import type { VNode, HTMLStencilElement } from "@stencil/core";
+const supportsConstructibleStylesheets = (() => {
+  try {
+    return !!new CSSStyleSheet();
+  }
+  catch (e) {
+    return false;
+  }
+})();
+const cacheKeys = new WeakMap();
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+function ConstructibleStyle(opts = {}) {
+  return (target, propertyKey) => {
+    if (!opts.cacheKeyProperty) {
+      opts.cacheKeyProperty = propertyKey;
+    }
+    const { componentWillLoad, render, componentWillRender } = target;
+    if (!componentWillLoad)
+      console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
+    if (supportsConstructibleStylesheets) {
+      const addStylesheet = (instance) => {
+        if (!instance[opts.cacheKeyProperty] ||
+          (cacheKeys.get(instance) &&
+            cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
+          return;
+        cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
+        const host = getElement(instance);
+        const cssText = typeof instance[propertyKey] === 'function'
+          ? instance[propertyKey]()
+          : instance[propertyKey];
+        const root = (host.shadowRoot || document);
+        root.adoptedStyleSheets = [
+          ...(root.adoptedStyleSheets || []),
+          getOrCreateStylesheet(instance, target, cssText, opts),
+        ];
+      };
+      target.componentWillLoad = function () {
+        const willLoadResult = componentWillLoad && componentWillLoad.call(this);
+        addStylesheet(this);
+        return willLoadResult;
+      };
+      target.componentWillRender = function () {
+        const willRenderResult = componentWillRender && componentWillRender.call(this);
+        addStylesheet(this);
+        return willRenderResult;
+      };
+    }
+    else {
+      target.render = function () {
+        const cssText = typeof this[propertyKey] === 'function'
+          ? this[propertyKey]()
+          : this[propertyKey];
+        let renderedNode = render.call(this);
+        if (isHost(renderedNode)) {
+          appendStyleToHost(renderedNode, target.constructor.name, cssText);
+        }
+        else {
+          renderedNode = hAsync(Host, null, renderedNode);
+          if (!('attachShadow' in HTMLElement.prototype)) {
+            appendStyleToHost(renderedNode, target.constructor.name, cssText);
+          }
+          else {
+            if (!target.__constructableStyle) {
+              const style = document.createElement('style');
+              style.setAttribute('type', 'text/css');
+              style.setAttribute('constructible-style', target.constructor.name);
+              style.innerHTML = cssText;
+              target.__constructableStyle = style;
+              document.head.appendChild(style);
+            }
+          }
+        }
+        return renderedNode;
+      };
+    }
+  };
+}
+function appendStyleToHost(node, targetName, cssText) {
+  (getHostChildren(node) || []).push(hAsync("style", { type: "text/css", "constructible-style": targetName }, cssText));
+}
+function getOrCreateStylesheet(instance, target, cssText, opts) {
+  if (!target.__constructableStyle) {
+    target.__constructableStyle = {};
+  }
+  const key = instance[opts.cacheKeyProperty];
+  if (!target.__constructableStyle[key]) {
+    target.__constructableStyle[key] = new CSSStyleSheet();
+    target.__constructableStyle[key].replace(cssText);
+  }
+  return target.__constructableStyle[key];
+}
+function isHost(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (node[prop] === Host) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function getHostChildren(node) {
+  for (const prop in node) {
+    if (node.hasOwnProperty(prop)) {
+      if (Array.isArray(node[prop])) {
+        return node[prop];
+      }
+    }
+  }
+}
 
-const STATEOPTS$1 = ['col-span', 'col-start', 'row-span', 'row-start'];
+const gridCss = "/*!@:host*/.sc-nano-grid-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-grid,*.sc-nano-grid::before,*.sc-nano-grid::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-grid{display:none !important}/*!@:host*/.sc-nano-grid-h{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}/*!@:host .grid*/.sc-nano-grid-h .grid.sc-nano-grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}/*!@:host([show-helper]:not([show-helper=false]))*/[show-helper].sc-nano-grid-h:not([show-helper=false]){position:relative}/*!@:host([show-helper]:not([show-helper=false])) .grid--helper*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid--helper.sc-nano-grid{position:absolute;inset:0;pointer-events:none}/*!@:host([show-helper]:not([show-helper=false])) .grid--helper::before*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid--helper.sc-nano-grid::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}/*!@:host([show-helper]:not([show-helper=false])) .grid__helper-item*/[show-helper].sc-nano-grid-h:not([show-helper=false]) .grid__helper-item.sc-nano-grid{display:none;background:rgba(126, 195, 241, 0.25)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+};
 /**
- * A context-aware CSS grid implementation.
- * Uses it's own width to choose column number - not screen width.
+ * A lightweight, context-aware CSS grid implementation.
+ *
+ * - Define multiple grids templates at different breakpoints
+ * - Uses `@container` queries to select the correct grid depending on the current dimensions
+ * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
+ * - SSR optimised
+
+ * @part grid - the main grid element.
+ * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
+ * @part helper - a replica grid showed when `show-helper` is true
+ *
+ * @slot - default slot. Use this to place grid items. Use `grid-states="..."` attribute to opt-out of auto / sequential placement.
  */
 class Grid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.nanoBpChange = createEvent(this, "nanoBpChange", 7);
-    this.generalClasses = [''];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.ready = false;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
+    this.grids = [];
+    this.styles = () => {
+      const css = /* css */ `
+      ${this.grids
+        .map((bp) => /* css */ `
+          @container (min-width: ${typeof bp.breakpoint === 'number'
+        ? bp.breakpoint + 1 + 'px'
+        : bp.breakpoint}) {
+            .grid {
+              --current-grid-size: "grid size: ${bp.name}";
+              ${bp.template
+        ? `grid-template: ${bp.template};`
+        : `grid-template-columns: repeat(${bp.cols}, 1fr);`}
+            }
+            ${[...Array(bp.cols)]
+        .map((_, i) => {
+        const gItm = i + 1;
+        return /* css */ `
+                  .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
+                    grid-column-start: ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
+                    grid-row-start: ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
+                    grid-column-end: span ${gItm} !important;
+                  }
+                  .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
+                  ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
+                    grid-row-end: span ${gItm} !important;
+                  }
+              `;
+      })
+        .join('')}
+            ${this.showHelper &&
+        /* css */ `
+              .grid--helper :nth-child(-n+${bp.cols}) {
+                display: block !important;
+              }
+            `}
+          }
+        `)
+        .join('')}
+    `;
+      return css;
+    };
+    this.cacheKey = undefined;
     this.sSize = 300;
     this.mSize = 550;
     this.lSize = 800;
@@ -19086,300 +19274,146 @@ class Grid {
     this.lCols = undefined;
     this.xlCols = undefined;
     this.xxlCols = undefined;
+    this.sTpl = undefined;
+    this.mTpl = undefined;
+    this.lTpl = undefined;
+    this.xlTpl = undefined;
+    this.xxlTpl = undefined;
     this.showHelper = false;
-    this.contentPanel = false;
-    this.fullHeight = false;
-    this.stateChange = debounce$2(this.stateChange.bind(this), 100);
-  }
-  propChanged() {
-    this.applySizeClasses();
-  }
-  applySizeClasses() {
-    const size = this.currentWidth;
-    this.isSmall = false;
-    this.isMedium = false;
-    this.isLarge = false;
-    this.isXL = false;
-    this.isXXL = false;
-    this.generalClasses = [];
-    this.gridClass = null;
-    this.isSizes = [null];
-    this.isSmall = true;
-    this.generalClasses.push('is-small');
+  }
+  constructSizeArray() {
+    this.grids = [];
     if (this.sCols)
-      this.gridClass = `nano-grid-${this.sCols}`;
-    this.isSizes.push({ size: 's', active: true });
-    if (size > this.sSize) {
-      this.isMedium = true;
-      this.generalClasses.push('is-medium');
-      if (this.mCols)
-        this.gridClass = `nano-grid-${this.mCols}`;
-      this.isSizes.push({ size: 'm', active: true });
-    }
-    if (size > this.mSize) {
-      this.isLarge = true;
-      this.generalClasses.push('is-large');
-      if (this.lCols)
-        this.gridClass = `nano-grid-${this.lCols}`;
-      this.isSizes.push({ size: 'l', active: true });
-    }
-    if (size > this.lSize) {
-      this.isXL = true;
-      this.generalClasses.push('is-xl');
-      if (this.xlCols)
-        this.gridClass = `nano-grid-${this.xlCols}`;
-      this.isSizes.push({ size: 'xl', active: true });
-    }
-    if (size > this.xlSize) {
-      this.isXXL = true;
-      this.generalClasses.push('is-xxl');
-      if (this.xxlCols)
-        this.gridClass = `nano-grid-${this.xxlCols}`;
-      this.isSizes.push({ size: 'xxl', active: true });
-    }
-    this.el.style.setProperty('--current-grid-size', `'grid size: ${this.isSizes.slice().pop().size}'`);
-    this.applyChildrenClasses();
-    setTimeout(() => (this.ready = true), 0);
-  }
-  stateChange() {
-    this.nanoBpChange.emit(this.generalClasses);
-  }
-  applyChildrenClasses() {
-    const gridItems = this.el.querySelectorAll('nano-grid-item');
-    if (gridItems.length) {
-      gridItems.forEach((gridItem) => {
-        gridItem.changeBP(this.isSizes);
+      this.grids.push({
+        cols: this.sCols,
+        breakpoint: 0,
+        name: 's',
+        template: this.sTpl,
       });
-      return;
-    }
-    // this logic has been put into grid-item. Keep here for legacy for now
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    const ctx = this.el;
-    // item states come in 4 possible flavours at every breakpoint. E.g.
-    // xl-col-span-2
-    // xl-col-start-2
-    // xl-row-span-2
-    // xl-row-start-2
-    // loop through all grid items with states.
-    [].map.call(ctx.children, (gItem) => {
-      if (!gItem.hasAttribute('grid-states'))
-        return;
-      // gridItems.forEach(gItem => {
-      // clear all previous grid state classnames
-      classes = gItem.className
-        .split(' ')
-        .filter((c) => !c.startsWith('nano-grid-'));
-      gItem.className = classes.join(' ').trim();
-      // get all potential states this element can have
-      const itemStates = gItem.getAttribute('grid-states').split(' ');
-      // loop through all potential state options: col & row span & start
-      STATEOPTS$1.forEach((stateOpt) => {
-        // reset found flag
-        found = false;
-        // loop through all the current valid breakpoints / sizes backwards because
-        // we only care about the item's state at the largest current breakpoint.
-        this.isSizes
-          .slice()
-          .reverse()
-          .forEach(function (size) {
-          if (found || !size)
-            return;
-          found = itemStates.find((state) => state.indexOf(`${size.size}-${stateOpt}`) === 0);
-          // found a state at this current size. apply class.
-          if (found) {
-            // clear previous grid state classname
-            classes = gItem.className
-              .split(' ')
-              .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-            gItem.className = classes.join(' ').trim();
-            stateArr = found.split('-');
-            // remove the size of the state
-            stateArr.shift();
-            itemState = stateArr.join('-');
-            // add new class
-            gItem.classList.add(`nano-grid-${itemState}`);
-          }
-        });
+    if (this.mCols)
+      this.grids.push({
+        cols: this.mCols,
+        breakpoint: this.sSize,
+        name: 'm',
+        template: this.mTpl,
       });
-    });
+    if (this.lSize)
+      this.grids.push({
+        cols: this.lCols,
+        breakpoint: this.mSize,
+        name: 'l',
+        template: this.lTpl,
+      });
+    if (this.xlCols)
+      this.grids.push({
+        cols: this.xlCols,
+        breakpoint: this.lSize,
+        name: 'xl',
+        template: this.xlTpl,
+      });
+    if (this.xxlCols)
+      this.grids.push({
+        cols: this.xxlCols,
+        breakpoint: this.xlSize,
+        name: 'xxl',
+        template: this.xxlTpl,
+      });
+    this.cacheKey =
+      this.grids
+        .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)
+        .join('') +
+        '-helper-' +
+        this.showHelper;
   }
   componentWillLoad() {
-    const ctx = this.el;
-    [].map.call(ctx.children, (ele) => ele.classList.add('nano-griditem'));
-  }
-  componentDidLoad() {
-    if (!window['ResizeObserver'])
-      return;
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (!entry.contentRect.width)
-          return;
-        this.currentWidth = entry.contentRect.width;
-        this.applySizeClasses();
-      }
-    });
-    this.ro.observe(this.el);
-  }
-  disconnectedCallback() {
-    if (this.ro)
-      this.ro.disconnect();
+    this.constructSizeArray();
   }
   render() {
-    return (hAsync(Host, { class: {
-        [this.generalClasses.join(' ')]: true,
-        'has-grid': !!this.gridClass,
-        ready: this.ready,
-        [this.gridClass]: true,
-      } }, hAsync("div", { class: {
-        grid: true,
-      } }, hAsync("slot", null))));
+    return (hAsync(Host, null, hAsync("div", { part: "grid", class: "grid" }, hAsync("slot", null)), this.showHelper && (hAsync("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (hAsync("div", { class: "grid__helper-item" })))))));
   }
-  get el() { return getElement(this); }
   static get watchers() { return {
-    "sSize": ["propChanged"],
-    "mSize": ["propChanged"],
-    "lSize": ["propChanged"],
-    "xlSize": ["propChanged"],
-    "sCols": ["propChanged"],
-    "mCols": ["propChanged"],
-    "lCols": ["propChanged"],
-    "xlCols": ["propChanged"],
-    "xxlCols": ["propChanged"],
-    "isSmall": ["stateChange"],
-    "isMedium": ["stateChange"],
-    "isLarge": ["stateChange"],
-    "isXL": ["stateChange"],
-    "isXXL": ["stateChange"]
+    "sTpl": ["constructSizeArray"],
+    "mTpl": ["constructSizeArray"],
+    "lTpl": ["constructSizeArray"],
+    "xlTpl": ["constructSizeArray"],
+    "xxlTpl": ["constructSizeArray"],
+    "sSize": ["constructSizeArray"],
+    "mSize": ["constructSizeArray"],
+    "lSize": ["constructSizeArray"],
+    "xlSize": ["constructSizeArray"],
+    "sCols": ["constructSizeArray"],
+    "mCols": ["constructSizeArray"],
+    "lCols": ["constructSizeArray"],
+    "xlCols": ["constructSizeArray"],
+    "xxlCols": ["constructSizeArray"],
+    "showHelper": ["constructSizeArray"]
   }; }
   static get style() { return gridCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "nano-grid",
     "$members$": {
-      "sSize": [2, "s-size"],
-      "mSize": [2, "m-size"],
-      "lSize": [2, "l-size"],
-      "xlSize": [2, "xl-size"],
+      "sSize": [8, "s-size"],
+      "mSize": [8, "m-size"],
+      "lSize": [8, "l-size"],
+      "xlSize": [8, "xl-size"],
       "sCols": [2, "s-cols"],
       "mCols": [2, "m-cols"],
       "lCols": [2, "l-cols"],
       "xlCols": [2, "xl-cols"],
       "xxlCols": [2, "xxl-cols"],
+      "sTpl": [1, "s-tpl"],
+      "mTpl": [1, "m-tpl"],
+      "lTpl": [1, "l-tpl"],
+      "xlTpl": [1, "xl-tpl"],
+      "xxlTpl": [1, "xxl-tpl"],
       "showHelper": [516, "show-helper"],
-      "contentPanel": [516, "content-panel"],
-      "fullHeight": [516, "full-height"],
-      "ready": [32],
-      "isSmall": [32],
-      "isMedium": [32],
-      "isLarge": [32],
-      "isXL": [32],
-      "isXXL": [32]
+      "cacheKey": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["showHelper", "show-helper"], ["contentPanel", "content-panel"], ["fullHeight", "full-height"]]
+    "$attrsToReflect$": [["showHelper", "show-helper"]]
   }; }
 }
+__decorate([
+  ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
+  __metadata("design:type", Object)
+], Grid.prototype, "styles", void 0);
 
-const gridItemCss = "/*!@:host*/.sc-nano-grid-item-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-grid-item,*.sc-nano-grid-item::before,*.sc-nano-grid-item::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-grid-item{display:none !important}/*!@:host*/.sc-nano-grid-item-h{display:inline-block}";
-
-const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
+// import type { GridSizes } from '../../interface';
+// const STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];
 /**
+ * @deprecated - you can now use `grid-states="..."`
+ * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
+ *
  * Grid items to be used with [grid](/story/nano-components-grid) elements
  */
 class GridItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.currGridSizes = [null];
-    this.gridStates = '';
-  }
-  updateGridClasses() {
-    this.applyChildrenClasses();
   }
   /**
-   * Called by parent grid to trigger new classes
-   * @internal
+   * How to position this item within it's parent grid at different break points. Examples:
+   * xl-col-span-2
+   * l-col-start-2
+   * xxl-row-span-2
+   * m-row-start-2
    */
-  async changeBP(newGridSizes) {
-    if (this.currGridSizes === newGridSizes)
-      return;
-    this.currGridSizes = newGridSizes;
-    if (!this.gridStates.length)
-      return;
-    this.applyChildrenClasses();
-  }
-  applyChildrenClasses() {
-    let stateArr = [''];
-    let itemState = '';
-    let found;
-    let classes;
-    // item states come in 4 possible flavours at every breakpoint. E.g.
-    // xl-col-span-2
-    // xl-col-start-2
-    // xl-row-span-2
-    // xl-row-start-2
-    // clear all previous grid state classnames
-    classes = this.el.className
-      .split(' ')
-      .filter((c) => !c.startsWith('nano-grid-'));
-    this.el.className = classes.join(' ').trim();
-    // get all potential states this element can have
-    const itemStates = this.gridStates.split(' ');
-    // loop through all potential state options: col & row span & start
-    STATEOPTS.forEach((stateOpt) => {
-      // reset found flag
-      found = false;
-      // loop through all the current valid breakpoints / sizes backwards because
-      // we only care about the item's state at the largest current breakpoint.
-      this.currGridSizes
-        .slice()
-        .reverse()
-        .forEach((size) => {
-        if (found || !size)
-          return;
-        found = itemStates.find((state) => state.indexOf(`${size.size}-${stateOpt}`) === 0);
-        // found a state at this current size. apply class.
-        if (found) {
-          // clear previous grid state classname
-          classes = this.el.className
-            .split(' ')
-            .filter((c) => !c.includes('nano-grid-${stateOpt}'));
-          this.el.className = classes.join(' ').trim();
-          stateArr = found.split('-');
-          // remove the size of the state
-          stateArr.shift();
-          itemState = stateArr.join('-');
-          // add new class
-          this.el.classList.add(`nano-grid-${itemState}`);
-        }
-      });
-    });
-  }
   render() {
     return hAsync("slot", null);
   }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "gridStates": ["updateGridClasses"]
-  }; }
-  static get style() { return gridItemCss; }
+  static get style() { return "/*!@:host*/.sc-nano-grid-item-h { display: inline-block; }"; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "nano-grid-item",
-    "$members$": {
-      "gridStates": [1, "grid-states"],
-      "changeBP": [64]
-    },
+    "$members$": undefined,
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []
   }; }
 }
 
-const heroCss = "/*!@:host*/.sc-nano-hero-h {\n  box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n  box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n  display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n  \n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n/*!@:host(.is-xl)*/.is-xl.sc-nano-hero-h {\n  --quote-size: 3rem;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n  --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n  position: relative;\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n  --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n  overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  display: block;\n}\n/*!@.is-xl .hero__breadcrumbs*/.is-xl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n/*!@.is-xxl .hero__breadcrumbs*/.is-xxl.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n  background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n/*!@.hero__content.is-xl*/.hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n/*!@.hero__content.is-xxl*/.hero__content.is-xxl.sc-nano-hero {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n  margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  font-size: 2rem;\n}\n/*!@.is-xl .hero__primary*/.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n/*!@.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.is-xl .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n  .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n/*!@.is-xxl .hero__primary*/.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(h1[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n/*!@.is-xl .hero__primary-content ::slotted(.button[slot=primary-content])*/.is-xl .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n  .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n  display: flex;\n  align-items: center;\n}\n/*!@.is-xl .hero__secondary*/.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n/*!@.is-xxl .hero__secondary*/.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n/*!@.is-xl .hero__icon-box*/.is-xl.sc-nano-hero .hero__icon-box.sc-nano-hero {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n/*!@.is-xl .hero__quote-content*/.is-xl.sc-nano-hero .hero__quote-content.sc-nano-hero {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n/*!@.hero--sub .hero__content.is-xl*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n/*!@.hero--sub .hero__content.is-xl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > .button[slot=primary-content] {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n/*!@.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content])*/.hero--sub .hero__content.is-xl .sc-nano-hero-s > h1[slot=primary-content] {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__primary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n/*!@.hero--sub .hero__content.is-xxl .hero__secondary*/.hero--sub.sc-nano-hero .hero__content.is-xxl.sc-nano-hero .hero__secondary.sc-nano-hero {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";
+const heroCss = "/*!@:host*/.sc-nano-hero-h {\n  box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n  box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n  display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n  \n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n  display: block;\n  container-type: inline-size;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n  --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero {\n    --quote-size: 3rem;\n  }\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n  --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n  overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n  display: block;\n  --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n  display: block;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n  background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n  margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n  font-size: 2rem;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n  .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n  .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n  display: flex;\n  align-items: center;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n@container (min-width: 800px) {\n  .hero__icon-box {\n    max-inline-size: 410px;\n    flex: 0 1 410px;\n  }\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n@container (min-width: 800px) {\n  .hero--sub .hero__content {\n    -webkit-margin-before: 40px;\n            margin-block-start: 40px;\n  }\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 50px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 40px 50px;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > .button[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > .button[slot=primary-content] {\n    -webkit-margin-before: 8px !important;\n            margin-block-start: 8px !important;\n  }\n  .hero--sub .hero__content.sc-nano-hero-s > h1[slot=primary-content], \n  .hero--sub .hero__content .sc-nano-hero-s > h1[slot=primary-content] {\n    -webkit-margin-after: 18px !important;\n            margin-block-end: 18px !important;\n  }\n}\n@container (min-width: 900px) {\n  .hero--sub .hero__content .hero__primary {\n    margin-block: 0 40px;\n    margin-inline: 83px 0;\n  }\n  .hero--sub .hero__content .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 40px 83px;\n  }\n}";
 
 /**
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
@@ -19398,19 +19432,15 @@ const heroCss = "/*!@:host*/.sc-nano-hero-h {\n  box-sizing: border-box;\n}\n\n/
 class Hero {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.handleGridChange = (e) => {
-      this.gridSizes = e.detail;
-    };
     this.HeroContent = () => {
       return [
         !this.hasIconBox && this.hasCtas ? (hAsync("div", { class: "hero__ctas" }, hAsync("slot", { name: "secondary-ctas" }))) : (''),
         hAsync("div", { class: "hero__scrim" }, hAsync("slot", { name: "scrim" })),
-        hAsync("nano-grid", { onNanoBpChange: this.handleGridChange, class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, hAsync("nano-grid-item", { gridStates: "xl-col-span-2" }, hAsync("div", { class: "hero__breadcrumbs" }, hAsync("slot", { name: "breadcrumb" }))), hAsync("nano-grid-item", { gridStates: this.hasSecondaryContent
+        hAsync("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, hAsync("div", { "grid-states": "xl-col-span-2" }, hAsync("div", { class: "hero__breadcrumbs" }, hAsync("slot", { name: "breadcrumb" }))), hAsync("div", { "grid-states": this.hasSecondaryContent
             ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
-            : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, hAsync("div", { class: "hero__primary" }, hAsync("div", { class: "hero__primary-content" }, hAsync("slot", { name: "back-btn" }), hAsync("div", null, hAsync("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (hAsync("nano-grid-item", { gridStates: "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, hAsync("div", { class: "hero__secondary" }, hAsync("slot", { name: "secondary-content" }), this.hasIconBox && (hAsync("div", { class: "hero__icon-box" }, hAsync("slot", { name: "icon-box" }), hAsync("slot", { name: "icon-box-item" }))), this.hasQuote && (hAsync("div", { class: "hero__quote-content" }, hAsync("span", { class: "hero__quote" }, hAsync("slot", { name: "quote" })), hAsync("div", { class: "hero__quote-author" }, hAsync("slot", { name: "quote-author" })))))))),
+            : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, hAsync("div", { class: "hero__primary" }, hAsync("div", { class: "hero__primary-content" }, hAsync("slot", { name: "back-btn" }), hAsync("div", null, hAsync("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (hAsync("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, hAsync("div", { class: "hero__secondary" }, hAsync("slot", { name: "secondary-content" }), this.hasIconBox && (hAsync("div", { class: "hero__icon-box" }, hAsync("slot", { name: "icon-box" }), hAsync("slot", { name: "icon-box-item" }))), this.hasQuote && (hAsync("div", { class: "hero__quote-content" }, hAsync("span", { class: "hero__quote" }, hAsync("slot", { name: "quote" })), hAsync("div", { class: "hero__quote-author" }, hAsync("slot", { name: "quote-author" })))))))),
       ];
     };
-    this.gridSizes = [];
     this.hasIconBox = undefined;
     this.hasScrim = undefined;
     this.hasSecondaryContent = undefined;
@@ -19482,9 +19512,7 @@ class Hero {
   render() {
     const rtl = this.host.dir === 'rtl' ||
       this.host.ownerDocument.dir === 'rtl';
-    return (hAsync(Host, { class: {
-        [this.gridSizes.join(' ')]: true,
-      } }, hAsync("div", { class: {
+    return (hAsync(Host, null, hAsync("div", { class: {
         hero: true,
         'hero--light': this.theme === 'light',
         'hero--secondary': this.hasSecondaryContent,
@@ -19515,7 +19543,6 @@ class Hero {
       "largeScreenBP": [2, "large-screen-b-p"],
       "theme": [1],
       "level": [1],
-      "gridSizes": [32],
       "hasIconBox": [32],
       "hasScrim": [32],
       "hasSecondaryContent": [32],
@@ -19650,7 +19677,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__label*/.icon-button__label.sc-nano-icon-button{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}/*!@.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.
  *
@@ -19660,6 +19687,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';
@@ -19669,12 +19710,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);
   }
@@ -19687,10 +19750,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" })));
+      }, 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("span", { class: "icon-button__label" }, this.label), hAsync("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" }))));
   }
   render() {
     if (this.showTooltip) {
@@ -19698,9 +19761,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"],
@@ -19712,7 +19776,9 @@ class IconButton {
       "showTooltip": [4, "show-tooltip"],
       "disabled": [516],
       "href": [1],
+      "rel": [1],
       "target": [1],
+      "form": [1],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -19912,8 +19978,7 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
 };
 const FormControlWrap = (props, children) => {
   const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
-  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';
-  return (hAsync(MainTag, { states: "350w has-enough-width", class: {
+  return (hAsync("div", { class: {
       'has-label': label !== null && !floatLabel,
       'has-float-label': label !== null && floatLabel,
       'has-helper-end': hasHelperEndSlot,
@@ -19958,7 +20023,7 @@ const FormControl = (props, children) => {
       endSlot)));
 };
 
-const inputCss = ".sc-nano-input-h{box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{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}.form-ctrl__float-label.sc-nano-input{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{inset-block-start:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{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(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239 65 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgb(var(--color-invalid) / 100%);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186 220 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;inline-size:100%;padding:0 !important;color:currentcolor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    )}.input__native-ctrl.sc-nano-input{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;padding-block:0;padding-inline:var(--padding-start) var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;inline-size:100%;max-inline-size:100%;max-block-size:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-block:var(--padding-top) 0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{-webkit-padding-before:1.75em;padding-block-start:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;user-select:none}";
+const inputCss = ".sc-nano-input-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n  display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n  container-type: inline-size;\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n  display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n  padding-block: 0;\n  -webkit-padding-end: 0;\n          padding-inline-end: 0;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  -webkit-padding-after: var(--padding-bottom);\n          padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  margin-block: unset;\n  -webkit-margin-end: 5px;\n          margin-inline-end: 5px;\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n  margin-block: unset;\n  -webkit-margin-end: 0;\n          margin-inline-end: 0;\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  -webkit-padding-end: var(--padding-end);\n          padding-inline-end: var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n.nano-color.sc-nano-input-h {\n  color: var(--nano-color-base);\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n}\n\n.input__native-ctrl.sc-nano-input {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-height: 2.1em;\n  -webkit-padding-before: 1.4em;\n          padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-height: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n  background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n  box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n  display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) 0.25em;\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n  -webkit-padding-before: 1.75em;\n          padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n  -webkit-user-select: none;\n          user-select: none;\n}";
 
 let inputIds = 0;
 /**
@@ -20957,18 +21022,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])
@@ -21573,7 +21638,7 @@ function cyrb53(str, seed = 0) {
   return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 }
 
-const rangeCss = ".sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;-webkit-margin-start:-1.08em;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}";
+const rangeCss = ".sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;-webkit-margin-start:-1.08em;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}";
 
 /**
  * The Range slider lets users select from a range of values by moving
@@ -22380,7 +22445,7 @@ class ResizeObserve {
   }; }
 }
 
-const selectCss = ".sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{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}.form-ctrl__float-label.sc-nano-select{padding-block:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{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(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239 65 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgb(var(--color-invalid) / 100%);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186 220 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{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;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{-webkit-padding-before:1.8em;padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{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;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;padding-block-start:1em}.select__multi-input.sc-nano-select{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;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgb(var(--multi-input-value-bg)/80%);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
+const selectCss = ".sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  container-type: inline-size;\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  -webkit-padding-end: 0;\n          padding-inline-end: 0;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  -webkit-padding-after: var(--padding-bottom);\n          padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  -webkit-margin-end: 5px;\n          margin-inline-end: 5px;\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  -webkit-margin-end: 0;\n          margin-inline-end: 0;\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  -webkit-padding-start: 0 !important;\n          padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  -webkit-padding-start: var(--padding-start);\n          padding-inline-start: var(--padding-start);\n  -webkit-padding-end: var(--padding-end);\n          padding-inline-end: var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, \"currentcolor\");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-height: 2.1em;\n  -webkit-padding-before: 1.4em;\n          padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  -webkit-padding-before: 1.8em;\n          padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  -webkit-padding-before: 1em;\n          padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-width: 50px;\n  width: 100%;\n  max-height: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  max-width: 100%;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow: hidden;\n  line-height: 1;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  -webkit-padding-start: 0.5em;\n          padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
 
 let selectIds = 0;
 /**
@@ -27365,6 +27430,733 @@ 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"
+        label="Re-order this item"
+      ></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)}}";
 
 /**
@@ -27400,24 +28192,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)}";
 
 /**
@@ -27457,33 +28231,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) => {
@@ -28343,11 +29119,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) {
@@ -28375,12 +29157,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; }
@@ -28401,7 +29183,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.
@@ -28448,6 +29230,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;
@@ -28455,45 +29240,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) {
@@ -28784,11 +29573,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;
@@ -28811,27 +29595,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 })))));
@@ -28850,7 +29629,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"],
@@ -28864,7 +29643,7 @@ class TabGroup {
     },
     "$listeners$": [[0, "nanoTabClose", "handleTabClose"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["placement", "placement"]]
   }; }
 }
 
@@ -29706,12 +30485,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;
@@ -29755,7 +30534,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;
@@ -29772,7 +30551,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();
     }
@@ -30166,88 +30945,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;
@@ -30267,10 +30966,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;
@@ -30293,37 +30988,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
@@ -30364,7 +31045,7 @@ const baseCellClasses = (colIndex, toString = false) => {
     return classListToStr(classes);
   return classes;
 };
-const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
   const Content = () => nestedContent
     ? nestedContent()
     : cellRender(rowIndex, colIndex) || (hAsync("span", { class: "placeholder" }, "\u00A0"));
@@ -30395,15 +31076,15 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
         hAsync(Content, null))))) : (hAsync(ContentWrap, null))));
 };
 
+const TableCell = ({ header, wrap }, children) => {
+  const cell = (hAsync("div", { class: {
+      [`${CSSNAMESPACE}__cell-content`]: true,
+      [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+    } }, children));
+  return header ? hAsync("th", { scope: "row" }, cell) : hAsync("td", null, cell);
+};
 const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
   let extraProps = {};
-  const TableCell = ({ header, wrap }, children) => {
-    const cell = (hAsync("div", { class: {
-        [`${CSSNAMESPACE}__cell-content`]: true,
-        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-      } }, children));
-    return header ? hAsync("th", { scope: "row" }, cell) : hAsync("td", null, cell);
-  };
   if (!rowModel) {
     const model = rowDataModel(rowIndex);
     rowModel = model.rowModel;
@@ -30508,7 +31189,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 tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.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;
 /**
@@ -30519,7 +31200,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
  *
@@ -30533,8 +31213,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);
@@ -30549,32 +31227,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
@@ -30626,12 +31278,18 @@ class Table {
           this._loading = false;
       }
     };
+    /**
+     * On scroll, loop through all blocks' heights and cumulatively, add them together.
+     * When we find that the scroll position is less than this cumulative block height -
+     * stop loop - it's on the current active block.
+     */
     this.scrollHandler = () => {
+      // don't listen if this table isn't in the viewport
       if (!this.store.general.state.isActive)
         return;
-      this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
-      requestAnimationFrame(() => {
-        let cumulativeHeight = 0;
+      readTask(() => {
+        this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+        let cumulativeHeight = this.host.offsetTop;
         let blockIndex = 0;
         const blockLen = this.blocks.length;
         while (blockIndex < blockLen &&
@@ -30683,7 +31341,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];
@@ -30806,9 +31463,8 @@ class Table {
         ? document
         : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
     }
-    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler, { passive: true });
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
     this._scrollParent = ele;
-    this.setupActiveWatcher();
   }
   // used to fire `nanoTblBlockRendered` on block render change
   get primaryBlockIndex() {
@@ -31086,9 +31742,9 @@ class Table {
         const height = el.getBoundingClientRect().height;
         // cache height to our block heights array
         // for subsequent renders
-        const fBhI = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
-        if (fBhI > 0) {
-          this.blockHeights[fBhI] = { height, blockIndex };
+        const fBhIdx = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
+        if (fBhIdx > -1) {
+          this.blockHeights[fBhIdx] = { height, blockIndex };
         }
         else
           this.blockHeights.push({ height, blockIndex });
@@ -31105,7 +31761,7 @@ class Table {
   /** Adds an IO. Makes sure our scroll listener is only active when
    * the table is in viewport */
   setupActiveWatcher() {
-    if (!this.host || !this.scrollParent)
+    if (!this.host || !this.scrollParent || !this.store)
       return;
     if (this.activeWatcherIo) {
       this.activeWatcherIo.disconnect();
@@ -31116,21 +31772,25 @@ class Table {
         this.store.general.state.isActive = true;
       else
         this.store.general.state.isActive = false;
-    }, { root: this.scrollParent }));
+    }, { root: this.scrollParent, threshold: 0 }));
     io.observe(this.host);
   }
   // Component lifecycle
   async componentWillLoad() {
-    this.scrollParent = findScrollParent(this.host);
+    // setup stores
     this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
-    this.store.general.onChange('isActive', this.scrollHandler);
     await this.handleRowsChange();
-    this.processSlots();
+    this.store.general.onChange('isActive', this.scrollHandler);
     this.store.data.onChange('rows', () => this.setBlocks());
+    // setup dom and attach listeners
+    this.processSlots();
     this.setBlocks();
+    this.scrollParent = findScrollParent(this.host);
+    this.setupActiveWatcher();
   }
   connectedCallback() {
     this.scrollParent = findScrollParent(this.host);
+    this.setupActiveWatcher();
   }
   componentDidLoad() {
     this.setInitialBlockDimension();
@@ -31155,31 +31815,29 @@ class Table {
   }
   render() {
     this.blockElements = [];
-    return (hAsync(Host, null, hAsync("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), hAsync("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), hAsync("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, hAsync("nano-progress-bar", { indeterminate: true, class: {
+    return (hAsync(Host, null, hAsync("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), hAsync("nano-resize-observe", { states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), hAsync("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, hAsync("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
         [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-      } }), hAsync("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, hAsync("caption", { class: {
+      } }), hAsync("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, hAsync("caption", { class: {
         [`${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._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$1, { 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);
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
       } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-      return (hAsync(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+      return (hAsync(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell$1, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (hAsync("tr", null, hAsync("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex) + 'px',
       } })))))), 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,
@@ -31215,7 +31873,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],
@@ -31473,6 +32130,7 @@ registerComponents([
   Skeleton,
   Slide$2,
   Slides,
+  Sortable,
   Spinner,
   SplitPane,
   Sticker,