@nanoporetech-digital/components 5.1.2 → 5.2.0

package/hydrate/index.js

@@ -11321,6 +11321,10 @@ class CheckboxGroup {
   disconnectedCallback() {
     if (this.mo)
       this.mo.disconnect();
+    this.nativeCbs.forEach((cb) => {
+      if (cb)
+        cb.removeEventListener('invalid', this.handleInvalid);
+    });
   }
   componentDidLoad() {
     this.handleComponentChange();
@@ -11665,10 +11669,7 @@ class DataList {
       if (nanoInput) {
         nanoInput.removeEventListener('nanoChange', this.inputChange);
       }
-      oldInput.removeEventListener('change', this.inputChange);
-      oldInput.removeEventListener('click', this.inputClick);
-      oldInput.removeEventListener('keydown', this.inputKeydown);
-      oldInput.removeEventListener('input', this.inputChange);
+      this.removeEventListeners(oldInput);
       this.inputLabel = null;
       writeTask(() => {
         oldInput.removeAttribute('role');
@@ -11799,6 +11800,16 @@ class DataList {
       this.changeInputValue(foundEle);
   }
   // Event handlers
+  removeEventListeners(oldInput) {
+    const nanoInput = oldInput.closest('nano-input');
+    if (nanoInput) {
+      nanoInput.removeEventListener('nanoChange', this.inputChange);
+    }
+    oldInput.removeEventListener('change', this.inputChange);
+    oldInput.removeEventListener('click', this.inputClick);
+    oldInput.removeEventListener('keydown', this.inputKeydown);
+    oldInput.removeEventListener('input', this.inputChange);
+  }
   processSlottedContent() {
     requestAnimationFrame(() => {
       var _a;
@@ -11866,6 +11877,8 @@ class DataList {
       this.mo.disconnect();
       this.mo = undefined;
     }
+    if (this.connectedInput)
+      this.removeEventListeners(this.connectedInput);
   }
   render() {
     return (hAsync(Host, { role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
@@ -20030,7 +20043,7 @@ const FormControl = (props, children) => {
       endSlot)));
 };
 
-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  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  container-type: inline-size;\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}";
+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  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\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;
 /**
@@ -20379,7 +20392,7 @@ class Input {
       disabled,
       clearControl: this.clearInput,
     }))(this);
-    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, hAsync("div", null, hAsync(FormControlWrap, Object.assign({}, wrapOptions), hAsync(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (hAsync("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (hAsync("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, hAsync("div", { style: { width: '100%' } }, hAsync(FormControlWrap, Object.assign({}, wrapOptions), hAsync(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (hAsync("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (hAsync("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
         'input__native-ctrl': true,
         input__resizable: this.resize === 'true',
       }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), hAsync("slot", null))));
@@ -21056,7 +21069,7 @@ class NavItem {
     if (!e.composedPath().some((el) => el === this.secondaryDiv))
       this.toggleSecondary();
   }
-  componentWillLoad() {
+  connectedCallback() {
     const secondaryEle = this.el.querySelector('[slot="secondary"]');
     this.hasSecondarySlot = !!secondaryEle;
     const link = getDirectChildren(this.el, 'a, button')[0];
@@ -21071,8 +21084,6 @@ class NavItem {
       this.btn.addEventListener('focus', this.handleFocus);
       this.btn.addEventListener('blur', this.handleHostBlur);
     }
-  }
-  connectedCallback() {
     this.isInGlobalNav = false;
     this.isInMenuDrawer = false;
     this.globalNavEle = this.el.closest('nano-global-nav');
@@ -21082,6 +21093,11 @@ class NavItem {
       this.el.parentElement === this.globalNavEle ||
         !!this.el.closest('.global-nav');
   }
+  disconnectedCallback() {
+    this.btn.removeEventListener('click', this.toggleSecondary);
+    this.btn.removeEventListener('focus', this.handleFocus);
+    this.btn.removeEventListener('blur', this.handleHostBlur);
+  }
   render() {
     return (hAsync(Host, { class: {
         'has-secondary': this.hasSecondarySlot,
@@ -22224,6 +22240,7 @@ class ResizeObserve {
     this.nanoResizeStateChange = createEvent(this, "nanoResizeStateChange", 7);
     this.nanoResizeObserverReady = createEvent(this, "nanoResizeObserverReady", 7);
     this.nanoResizeContentFitChange = createEvent(this, "nanoResizeContentFitChange", 7);
+    this.nanoResize = createEvent(this, "nanoResize", 7);
     this.isReady = false;
     this.assessChanges = () => {
       if (!this.currentWidth && !this.currentHeight)
@@ -22388,10 +22405,11 @@ class ResizeObserve {
   attachRO() {
     if (!window['ResizeObserver'])
       return;
-    this.ro = new ResizeObserver(() => {
+    this.ro = new ResizeObserver((ro) => {
       const { width, height } = this.host.getBoundingClientRect();
       this.currentWidth = Math.ceil(width);
       this.currentHeight = Math.ceil(height);
+      this.nanoResize.emit(ro);
     });
     this.ro.observe(this.host);
   }
@@ -22452,7 +22470,7 @@ class ResizeObserve {
   }; }
 }
 
-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  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  container-type: inline-size;\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}";
+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  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\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}\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;
 /**
@@ -27503,6 +27521,19 @@ function drag(container, options) {
   // move(initialEvent);
 }
 
+/**
+ * Add multiple event listeners with the same callback function
+ * @param el the element which emits events
+ * @param events the event names to listen to (string separated by a space)
+ * @param fn the function to call
+ * @param opts the event options to apply
+ */
+function addListeners(el, events, fn, opts) {
+  events
+    .split(' ')
+    .forEach((e) => el.addEventListener(e, fn, opts));
+}
+
 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.
@@ -27768,11 +27799,6 @@ class Sortable {
     return node.parentNode.appendChild(clone);
   }
   /// Event handlers ///
-  addListeners(el, events, fn, opts) {
-    events
-      .split(' ')
-      .forEach((e) => el.addEventListener(e, fn, opts));
-  }
   removeEventHandlers(ele) {
     ele = ele || this.sortableHost;
     ele.removeEventListener('mousedown', this.handleTrack);
@@ -27781,7 +27807,9 @@ class Sortable {
   }
   addEventHandlers(ele) {
     ele = ele || this.sortableHost;
-    this.addListeners(ele, 'mousedown touchstart', this.handleTrack);
+    addListeners(ele, 'mousedown touchstart', this.handleTrack, {
+      passive: true,
+    });
     ele.addEventListener('keydown', this.handleKeydown);
   }
   /**
@@ -27959,7 +27987,7 @@ class Sortable {
       });
     }, 150);
     // reset track timer & cancel DnD on mouseup / touchend / touchmove
-    this.addListeners(document, 'mouseup touchend touchmove', () => clearTimeout(this.mouseDownTimer), { once: true });
+    addListeners(document, 'mouseup touchend touchmove', () => clearTimeout(this.mouseDownTimer), { once: true });
   }
   /**
    * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.
@@ -28892,8 +28920,10 @@ class Sticker {
   }
   /** Find and set the stickToEle from the public, selector string */
   stickToChange() {
-    if (this.stickTo)
+    if (typeof this.stickTo === 'string')
       this.stickToEle = this.scrollParent.querySelector(this.stickTo);
+    else if (!!this.stickTo)
+      this.stickToEle = this.stickTo;
     else
       this.stickToEle = undefined;
   }
@@ -30472,6 +30502,7 @@ function filter(workerStore, rows, filters = []) {
     }
     else {
       rows = filter$1(rows, {
+        predicate: typeof filter.filter === 'string' ? 'AND' : 'OR',
         keywords: filter.filter,
         includePaths: [filter.prop],
         ignorePaths: ['__uuid', '__index'],
@@ -30825,92 +30856,6 @@ function colheadFootRender(col) {
   const tpl = col === null || col === void 0 ? void 0 : col.columnTemplate;
   return tpl ? (tpl(hAsync, col)) : (hAsync(Fragment, null, col.title));
 }
-const stickyHIOs = new WeakMap();
-const stickyVIOs = new WeakMap();
-/**
- * Adds element to Intersection Observer. Fires when element changes on the x axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-function addHObserver(el, pos, cb) {
-  if (stickyHIOs.get(el))
-    return;
-  const store = fetchStores();
-  const root = store.general.state.scrollParent;
-  const observer = new IntersectionObserver(([e]) => {
-    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
-    const positions = {};
-    if (pos === 'start') {
-      positions.start =
-        e.boundingClientRect.x - (rootBounds.x + root.scrollLeft) < 0 &&
-          !e.isIntersecting;
-    }
-    if (pos === 'end') {
-      // TODO - sort these out for RtL
-      positions.end =
-        e.boundingClientRect.right > e.boundingClientRect.width &&
-          !e.isIntersecting;
-    }
-    if (!!cb)
-      cb(positions);
-  }, {
-    threshold: [1],
-    rootMargin: '1px 0px 100px 0px',
-    root: root === document.scrollingElement ? null : root,
-  });
-  stickyHIOs.set(el, observer);
-  if (store.general.state.isReady) {
-    observer.observe(el);
-  }
-  else {
-    store.general.state.host.addEventListener('nanoTblReady', () => {
-      observer.observe(el);
-    }, { once: true });
-  }
-}
-/**
- * Adds element to Intersection Observer. Fires when element changes on the y axis
- * @param el - an element to observe
- * @param pos - the edge to watch (start or end)
- * @param cb - callback when an intersection state changes.
- */
-function addVObserver(el, pos, cb) {
-  if (stickyVIOs.get(el))
-    return;
-  const store = fetchStores();
-  const root = store.general.state.scrollParent;
-  const observer = new IntersectionObserver(([e]) => {
-    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
-    const positions = {};
-    if (pos === 'top') {
-      positions.top =
-        e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&
-          !e.isIntersecting;
-    }
-    if (pos === 'bottom') {
-      const boundingClientRect = e.target.getBoundingClientRect();
-      positions.bottom =
-        boundingClientRect.height + boundingClientRect.y >
-          rootBounds.height && !e.isIntersecting;
-    }
-    if (!!cb)
-      cb(positions);
-  }, {
-    threshold: [1],
-    rootMargin: '0px 100px 0px 100px',
-    root: root === document.scrollingElement ? null : root,
-  });
-  stickyVIOs.set(el, observer);
-  if (store.general.state.isReady) {
-    observer.observe(el);
-  }
-  else {
-    store.general.state.host.addEventListener('nanoTblReady', () => {
-      observer.observe(el);
-    }, { once: true });
-  }
-}
 function headerPinClasses(type, vPinned, toString = false) {
   const classes = {
     [`${CSSNAMESPACE}__${type}`]: true,
@@ -30980,7 +30925,7 @@ function isInViewport(el, percentVisible = 100) {
       percentVisible);
 }
 
-const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, defaults, }) => {
+const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
   // Sort handling
   function handleColumnSortClick(e) {
     let order;
@@ -31005,7 +30950,7 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
     extraProps = column.columnProperties(column) || extraProps;
   }
   const baseProps = {
-    class: Object.assign(Object.assign({}, headerPinClasses('th', headRenderer === null || headRenderer === void 0 ? void 0 : headRenderer.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
+    class: Object.assign(Object.assign({}, headerPinClasses('th', column.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null }),
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const content = colheadFootRender(column);
@@ -31022,12 +30967,7 @@ const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned,
       : 'none';
     props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
-  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 }), isSortable() ? (hAsync("button", { class: {
+  return (hAsync("th", Object.assign({}, props, { key: column.prop }), isSortable() ? (hAsync("button", { class: {
       [`${CSSNAMESPACE}__order-btn`]: true,
       [`${CSSNAMESPACE}__cell-content`]: true,
     }, onClick: handleColumnSortClick },
@@ -31055,6 +30995,7 @@ function cellRender(rowIndex, colIndex) {
   const columns = store.config.state.columns;
   const tpl = (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
   const model = colDataModel(rowIndex, colIndex);
+  const tableInstance = getRenderingRef();
   if (!!model.cellModel && columns[colIndex].type === 'date') {
     const d = new Date(model.cellModel);
     if (d instanceof Date && !isNaN(d)) {
@@ -31063,7 +31004,28 @@ function cellRender(rowIndex, colIndex) {
         : d;
     }
   }
-  return tpl ? (tpl(hAsync, model)) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
+  // Wrap the h pragma, then we can know if we're using Stencil's
+  // jsx renderer or a different one
+  let hCalled = false;
+  const hWrap = (...args) => {
+    hCalled = true;
+    return hAsync(...args);
+  };
+  let tplResult = tpl ? tpl(hWrap, model) : undefined;
+  if (tplResult &&
+    tableInstance.customRenderer &&
+    tplResult['$attrs$'] === undefined &&
+    !(tplResult instanceof Element) &&
+    typeof tplResult !== 'string' &&
+    !hCalled) {
+    // template result is jsx *not* from Stencil.
+    // Render it now and output it later.
+    const templateEle = document.createElement('template');
+    // @ts-expect-error
+    tableInstance.customRenderer(tplResult, templateEle.content);
+    tplResult = templateEle;
+  }
+  return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (hAsync(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -31079,11 +31041,12 @@ const baseCellClasses = (colIndex, toString = false) => {
     return classListToStr(classes);
   return classes;
 };
-const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
+const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
   const Content = () => nestedContent
     ? nestedContent()
     : cellRender(rowIndex, colIndex) || (hAsync("span", { class: "placeholder" }, "\u00A0"));
   let CellType = 'td';
+  const tableInstance = getRenderingRef();
   const store = fetchStores();
   const column = store.config.state.columns[colIndex];
   let props = mergeCellProperties(rowIndex, colIndex, {
@@ -31095,14 +31058,23 @@ const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
         ? Object.assign(Object.assign({}, props), { scope: 'rowgroup' }) : Object.assign(Object.assign({}, props), { scope: 'row' });
     CellType = 'th';
   }
-  const ContentWrap = (props) => (hAsync("div", Object.assign({}, props, { class: {
-      [`${CSSNAMESPACE}__cell-content`]: true,
-      [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
-    } }),
-    hAsync(Content, null)));
-  return (hAsync(CellType
-  // role="gridcell"
-  , Object.assign({}, props), column.autoTooltip && !column.wrap ? (hAsync("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+  const ContentWrap = (props) => {
+    const content = Content();
+    return (hAsync("div", Object.assign({ ref: (d) => {
+        if (d && content instanceof Element) {
+          d.replaceChildren();
+          d.append(content['content'] || content);
+        }
+      } }, props, { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+      }, innerHTML: typeof content === 'string' && content.includes('<')
+        ? content
+        : undefined }), (typeof content !== 'string' || !content.includes('<')) &&
+      !(content instanceof Element) &&
+      content));
+  };
+  return (hAsync(CellType, Object.assign({ role: tableInstance.type === 'grid' ? 'gridcell' : undefined }, props), column.autoTooltip && !column.wrap ? (hAsync("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
       e.detail.x) },
     hAsync("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
       hAsync(ContentWrap, null),
@@ -31110,14 +31082,18 @@ const TableCell$1 = ({ rowIndex, colIndex, nestedContent, }) => {
         hAsync(Content, null))))) : (hAsync(ContentWrap, null))));
 };
 
-const TableCell = ({ header, wrap }, children) => {
-  const cell = (hAsync("div", { class: {
+const tableCellContent = (props, children, ctx) => {
+  const cell = (hAsync("div", Object.assign({}, props.wrapperProps, { 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) => {
+      [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
+    } }), children));
+  return props.header ? (hAsync("th", Object.assign({ scope: ctx }, props.cellProps), cell)) : (hAsync("td", Object.assign({}, props.cellProps), cell));
+};
+const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
+  // helper, generates <td> or <th>
+  const TableCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'row');
+  };
   let extraProps = {};
   if (!rowModel) {
     const model = rowDataModel(rowIndex);
@@ -31127,13 +31103,28 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     extraProps =
       rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
-  let pinned;
+  let rowPinned;
   if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
+    rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
   }
-  const baseProps = { class: headerPinClasses('tr', pinned) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  /**
+   * Applies appropriate classes to td / th VNodes;
+   * which can be supplied by user defined templates
+   * @param children virtual / jsx node array
+   * @returns virtual / jsx node array
+   */
+  const applyCellClasses = (children) => {
+    return utils.map(children, (cNode, i) => {
+      if (['td', 'th'].includes(cNode.vtag.toString())) {
+        cNode.vattrs = mergeProperties({
+          class: baseCellClasses(i, true),
+        }, cNode.vattrs);
+      }
+      return cNode;
+    });
+  };
   if (tpl) {
     let toRender = tpl(hAsync, {
       renderedRow: (hAsync("tr", Object.assign({}, props, { key: rowModel.__uuid }), children)),
@@ -31145,24 +31136,9 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
         if (node.vtag === 'tr') {
           if (!node.vkey)
             node.vkey = `${rowModel.__uuid}_${i}`;
-          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, node.vattrs);
           if (!!node.vchildren) {
-            node.vchildren = utils.map(node.vchildren, (cNode, i) => {
-              if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                  class: headerPinClasses(cNode.vtag.toString(), pinned, true) + baseCellClasses(i, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
-                }, cNode.vattrs);
-              }
-              return cNode;
-            });
+            node.vchildren = applyCellClasses(node.vchildren);
           }
         }
         return node;
@@ -31170,28 +31146,25 @@ const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children,
     }
     return toRender;
   }
-  return (hAsync("tr", Object.assign({}, props, { key: rowModel.__uuid }), children));
+  return (hAsync("tr", Object.assign({}, props, { key: rowModel.__uuid }), applyCellClasses(children)));
 };
-const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
+const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
+children, utils) => {
   let extraProps = {};
   if (rowRenderer.rowProperties) {
     extraProps = rowRenderer.rowProperties() || {};
   }
-  const TableCell = ({ header, wrap }, children) => {
-    const cell = (hAsync("div", { class: {
-        [`${CSSNAMESPACE}__cell-content`]: true,
-        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-      } }, children));
-    return header !== false ? hAsync("th", { scope: "col" }, cell) : hAsync("td", null, cell);
+  const TableHeadFootCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'col');
   };
   const pinned = rowRenderer.pinned || null;
-  const baseProps = { class: headerPinClasses('tr', null) };
+  const baseProps = { class: headerPinClasses('tr', pinned) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
   if (tpl) {
     let toRender = tpl(hAsync, {
       renderedRow: hAsync("tr", Object.assign({}, props), children),
-    }, TableCell);
+    }, TableHeadFootCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node) => {
         if (node.vtag === 'tr') {
@@ -31201,14 +31174,6 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
               if (['td', 'th'].includes(cNode.vtag.toString())) {
                 cNode.vattrs = mergeProperties({
                   class: headerPinClasses(cNode.vtag.toString(), pinned, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
                 }, cNode.vattrs);
               }
               return cNode;
@@ -31223,8 +31188,399 @@ 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__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)}";
+function addStyleSheet(id, css) {
+  const styleSheet = document.getElementById(id) ||
+    document.createElement('style');
+  styleSheet.id = id;
+  styleSheet.innerHTML = css;
+  if (!styleSheet.isConnected)
+    document.head.append(styleSheet);
+}
+/**
+ * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
+ *
+ * *knowing* when an element is pinned is tricky.
+ * Managing the display of multiple, side-by-side pinned elements is trickier still.
+ *
+ * Pinning table columns are very different from pinning table rows:
+ * - Rows are actual elements we can select, measure and apply styles to.
+ * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
+ *
+ * With this in mind, how columns and rows are pinned is different:
+ * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
+ *
+ * The service is slightly opinionated on how it pins rows and columns (with some room for override):
+ * - Pinned columns are stuck consecutively, without overlapping.
+ * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
+ * Both columns are important for context
+ *
+ * - Pinned rows are set to overlap *when* they have the same ancestor,
+ * and stuck consecutively when they have a different ancestor.
+ * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
+ * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
+ *
+ * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
+ */
+class TablePinService {
+  constructor(table, scrollElement) {
+    // Private state
+    this.cachedColMeta = new WeakMap();
+    this._pinnedStart = [];
+    this._pinnedEnd = [];
+    this._cssColDimensionCacheKey = '';
+    this.cacheX = 0;
+    this.cacheY = 0;
+    this.tableEle = table;
+    this.tableId = this.tableEle.id;
+    this.scrollElement = scrollElement;
+    // Secret sauce - `getElementsByClassName` is a live collection.
+    // An HTMLCollection will keep itself up-to-date as elements come and go
+    // So we can keep assessing on scroll
+    this.startColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);
+    this.endColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);
+    this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);
+    this.bottomRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--bottom`);
+    this.onResize();
+  }
+  // Pinned cols & change detection
+  get pinnedStart() {
+    return this._pinnedStart;
+  }
+  set pinnedStart(cols) {
+    this._pinnedStart = cols;
+    this.handlePinnedStartChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'last' start column.
+   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
+   */
+  handlePinnedStartChange() {
+    writeTask(() => {
+      if (this.pinnedStart.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);
+        const lastActiveCol = this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length - 1]);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {
+            --pin-start-active: 1;
+          }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, ``);
+      }
+    });
+  }
+  get pinnedEnd() {
+    return this._pinnedEnd;
+  }
+  set pinnedEnd(cols) {
+    this._pinnedEnd = cols;
+    this.handlePinnedEndChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'first' end column.
+   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
+   */
+  handlePinnedEndChange() {
+    writeTask(() => {
+      if (this.pinnedEnd.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);
+        const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${firstActiveCol.idx + 1}) { --pin-end-active: 1; }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, ``);
+      }
+    });
+  }
+  get cssColDimensionCacheKey() {
+    return this._cssColDimensionCacheKey;
+  }
+  set cssColDimensionCacheKey(key) {
+    if (key === this._cssColDimensionCacheKey)
+      return;
+    this._cssColDimensionCacheKey = key;
+    this.createPinnedColDimensionStyles();
+  }
+  /**
+   * To only generate column dimension styles when necessary we
+   * maintain a cache key string via serialised column meta.
+   * Only when this key changes do we generate a new stylesheet
+   */
+  generateCssCacheKey() {
+    let key = '';
+    for (const col of this.startColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    for (const col of this.endColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    this.cssColDimensionCacheKey = key;
+  }
+  /**
+   * Generates pinned column width offset styles
+   * so pinned columns can appear stuck together,
+   * then attaches a stylesheet.
+   */
+  createPinnedColDimensionStyles() {
+    let widthS = 0;
+    let widthE = 0;
+    const startCols = Array.from(this.startColumns);
+    const endCols = Array.from(this.endColumns).reverse();
+    const css = /* css */ `
+      ${startCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthS += colMeta.width || 0;
+      return /* css */ `
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {
+              --pin-start: ${widthS - 1}px;
+            }
+          `;
+    })
+      .join('')}
+      ${endCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthE += colMeta.width;
+      return /* css */ `
+            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),
+            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {
+              --pin-end: ${widthE - 1}px;
+            }
+          `;
+    })
+      .join('')}
+    `;
+    addStyleSheet(`${this.tableId}-dimension-style`, css);
+  }
+  getParentOffsets() {
+    const { x, y } = this.scrollElement.getBoundingClientRect();
+    let offsetX = x;
+    let offsetY = y;
+    if (this.scrollElement === document.documentElement) {
+      offsetX = this.scrollElement.offsetLeft;
+      offsetY = this.scrollElement.offsetTop;
+    }
+    return { offsetX, offsetY };
+  }
+  /**
+   * Loops through all 'top' & 'bottom' rows (on scroll or resize)
+   * Manages their visual state by applying classes on stuck / unstuck
+   * And their pinned offset / distance
+   */
+  assessRows() {
+    if (!this.topRows.length && !this.bottomRows.length)
+      return;
+    // top rows
+    if (this.topRows.length) {
+      readTask(async () => {
+        let heightAggregate = 0;
+        let cacheParent;
+        const { offsetY } = this.getParentOffsets();
+        for (const topRow of this.topRows) {
+          const { y, height } = topRow.getBoundingClientRect();
+          const currParent = topRow.parentElement;
+          // we'll use the applied `--pin-top` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');
+          const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-top`) so we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (y - offsetY <= offset) {
+              topRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            else {
+              topRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-top', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+    // bottom rows
+    if (this.bottomRows.length) {
+      const bottomRows = Array.from(this.bottomRows).reverse();
+      readTask(async () => {
+        let cacheParent;
+        let heightAggregate = 0;
+        const { offsetY } = this.getParentOffsets();
+        for (const bottomRow of bottomRows) {
+          if (!bottomRow.isConnected)
+            continue;
+          const { y, height } = bottomRow.getBoundingClientRect();
+          const currParent = bottomRow.parentElement;
+          // we'll use the applied `--pin-bottom` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinBottom = getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');
+          const offset = pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-bottom`) to we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (this.tableDims.height + offsetY - (y + height) <= offset) {
+              bottomRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            else {
+              bottomRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-bottom', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+  }
+  /**
+   * Loops through all 'start' & 'end' columns (on scroll or resize)
+   * Caches meta about each column (e.g. size, position-index)
+   * and decides which columns are pinned
+   */
+  async assessCols() {
+    if (!this.startColumns.length && !this.endColumns.length)
+      return;
+    let boundBox;
+    let currPinned;
+    let parentEles;
+    const done = new Promise((resolve) => {
+      // start cols
+      if (this.startColumns.length) {
+        readTask(() => {
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = offsetX;
+          parentEles = Array.from(this.startColumns[0].parentElement.children);
+          for (const startCol of this.startColumns) {
+            boundBox = startCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(startCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(startCol),
+            });
+            currPinned = this.pinnedStart.find((c) => c === startCol);
+            if (boundBox.x < widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedStart = [
+                  ...this.pinnedStart,
+                  startCol,
+                ];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          if (!this.endColumns.length)
+            resolve();
+        });
+      }
+      // end cols
+      if (this.endColumns.length) {
+        readTask(() => {
+          const endCols = Array.from(this.endColumns).reverse();
+          parentEles = Array.from(this.endColumns[0].parentElement.children);
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = 0;
+          for (const endCol of endCols) {
+            boundBox = endCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(endCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(endCol),
+            });
+            currPinned = this.pinnedEnd.find((c) => c === endCol);
+            if (this.tableDims.width + offsetX - boundBox.right <=
+              widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedEnd = [endCol, ...this.pinnedEnd];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          resolve();
+        });
+      }
+    });
+    await done;
+    // potentially generate a new css stylesheet if anything changed
+    this.generateCssCacheKey();
+  }
+  onScroll(pos) {
+    if (this.cacheX !== pos.x) {
+      this.cacheX = pos.x;
+      this.assessCols();
+    }
+    if (this.cacheY !== pos.y) {
+      this.cacheY = pos.y;
+      this.assessRows();
+    }
+  }
+  onResize() {
+    const width = this.scrollElement.clientWidth;
+    const height = this.scrollElement.clientHeight;
+    this.tableDims = { width, height };
+    this.assessCols();
+    this.assessRows();
+  }
+}
 
+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.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--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)/100%);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)/100%);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}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.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--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,.nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{z-index:4 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__pin--start{z-index:6 !important}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,.nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{z-index:5 !important}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__th,.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__td{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__pin--start{z-index:6 !important}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.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-before:var(--border-style);border-block-start:var(--border-style);-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 measurePerf = false;
+function perMark(name, end = false) {
+  if (!performance || !measurePerf)
+    return;
+  if (end) {
+    performance === null || performance === void 0 ? void 0 : performance.mark('end' + name);
+    performance === null || performance === void 0 ? void 0 : performance.measure(name, 'start' + name, 'end' + name);
+    const entries = performance === null || performance === void 0 ? void 0 : performance.getEntriesByName(name);
+    console.log(entries[entries.length ? entries.length - 1 : 0]);
+  }
+  else {
+    performance === null || performance === void 0 ? void 0 : performance.mark('start' + name);
+  }
+}
 let id = 0;
 /**
  * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
@@ -31275,6 +31631,7 @@ class Table {
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
+      perMark('sort');
       this.currentSort = order + ':' + column;
       // doesn't make sense to leave user in place for a sort
       this.scrollToTop(element);
@@ -31318,11 +31675,24 @@ class Table {
      * stop loop - it's on the current active block.
      */
     this.scrollHandler = () => {
+      var _a;
+      perMark('scrollHandler');
       // don't listen if this table isn't in the viewport
-      if (!this.store.general.state.isActive)
+      if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.general.state.isActive) || !this.rows)
         return;
+      if (this.primaryBlockIndex === undefined)
+        this.primaryBlockIndex = 0;
       readTask(() => {
-        this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+        this.cacheScrollPosition =
+          typeof this.scrollParent.scrollTop !== 'undefined'
+            ? this.scrollParent.scrollTop
+            : window.scrollY;
+        if (this.tablePinnedService) {
+          this.tablePinnedService.onScroll({
+            x: this.scrollParent.scrollLeft || window.scrollX,
+            y: this.cacheScrollPosition,
+          });
+        }
         let cumulativeHeight = this.host.offsetTop;
         let blockIndex = 0;
         const blockLen = this.blocks.length;
@@ -31333,21 +31703,18 @@ class Table {
             const potentialBlocks = [
               blockIndex,
               blockIndex + 1,
-              Math.max(0, blockIndex - 1),
+              this.cacheScrollPosition,
+              cumulativeHeight,
+              // Math.max(0, blockIndex - 1),
             ];
             if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
               this.activeBlocks = potentialBlocks;
-              this.setBlockHeight();
             }
             this.primaryBlockIndex = blockIndex;
           }
           blockIndex++;
         }
-      });
-    };
-    this.handleColumnPinned = (positions) => {
-      Object.entries(positions).forEach(([key, applied]) => {
-        this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
+        perMark('scrollHandler', true);
       });
     };
     this.handleResizeChange = (e) => {
@@ -31358,12 +31725,12 @@ class Table {
         classes = [...e.target.className.split(' '), ...classes];
       this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
     };
-    this.jsxRenderer = undefined;
+    this.customRenderer = undefined;
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
     this.loading = undefined;
-    this.internalLoading = false;
+    this.internalLoading = true;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -31371,14 +31738,14 @@ class Table {
     this.rowRender = undefined;
     this.footRender = { pinned: 'bottom' };
     this.showFooter = false;
-    this.perBlock = 40;
+    this.perBlock = 50;
     this.searchTerm = undefined;
     this.customFilterFn = undefined;
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.virtualTotalItems = 0;
     this.blocks = [];
-    this.activeBlocks = [0, 1, 2];
+    this.activeBlocks = [0, 1];
     this.debounceSetLoading = debounce$2(this.debounceSetLoading.bind(this), 50);
   }
   get _loading() {
@@ -31407,6 +31774,8 @@ class Table {
       if (!this.isReady)
         requestAnimationFrame(() => this.setInitialBlockDimension());
       this._loading = false;
+      if (this.tablePinnedService)
+        this.tablePinnedService.assessRows();
     });
   }
   async handleColsChange() {
@@ -31424,6 +31793,10 @@ class Table {
   virtualTotalItemsChangeHandler() {
     this.setBlocks();
   }
+  /** @readonly - shows the currently applied filters */
+  get appliedFilters() {
+    return this.filters;
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -31466,8 +31839,6 @@ class Table {
   }
   /** Updates a row model at a given index
    * @param row - the row to update.
-   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
-   * - rows are augmented with certain properties to aid with efficient rendering
    * @param rowIndex - the row index to insert this row
    */
   async updateRow(row, rowIndex) {
@@ -31498,7 +31869,9 @@ class Table {
         ? document
         : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
     }
-    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler
+    // {passive: true}
+    );
     this._scrollParent = ele;
   }
   // used to fire `nanoTblBlockRendered` on block render change
@@ -31552,17 +31925,20 @@ class Table {
       return Object.assign(Object.assign({}, c), { order: null });
     });
     this.nanoTblAfterSort.emit({ column: column, order });
+    perMark('sort', true);
   }
   async searchStart() {
     this._loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
+    perMark('search');
     // doesn't make sense to leave user in place for a search
     this.scrollToTop();
     try {
       await storeSearch(this.host, this.searchTerm);
       this.nanoTblAfterSearch.emit({ term: this.searchTerm });
+      perMark('search', true);
     }
     catch (e) {
       console.warn('search failed', e);
@@ -31589,6 +31965,7 @@ class Table {
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
+    perMark('filter');
     this.currentFilters = JSON.stringify(this.filters);
     // doesn't make sense to leave user in place for a search
     this.scrollToTop();
@@ -31597,10 +31974,11 @@ class Table {
         const res = await this.customFilterFn(this.filters);
         // if the response is 'true', the custom filter did it's thing
         // handover to finish and stop loading state.
-        // if response is falsey, carry on to do a FE filter
+        // if response is falsy, carry on to do a FE filter
         if (res === true) {
           this.filterComplete();
           this._loading = false;
+          return;
         }
       }
       catch (e) {
@@ -31609,8 +31987,8 @@ class Table {
         console.warn('custom filter failed', e);
         this.currentFilters = '';
         this._loading = false;
+        return;
       }
-      return;
     }
     try {
       await storeFilter(this.host, this.filters);
@@ -31626,13 +32004,22 @@ class Table {
   filterComplete() {
     this.columns = this.columns.map((c) => {
       const cFilter = this.filters.find((f) => f.prop === c.prop);
-      if (cFilter)
+      // if we found a filter AND
+      // it isn't true / false and has a length OR
+      // it is true or false
+      if (cFilter &&
+        ((typeof cFilter.filter !== 'boolean' && cFilter.filter.length) ||
+          typeof cFilter.filter === 'boolean'))
         c.filter = cFilter.filter;
-      else if (c.filter !== null && c.filter !== undefined)
+      // if a filter value is not set OR
+      // it isn't true / false and has no length
+      else if ((c.filter !== null && c.filter !== undefined) ||
+        (!!c.filter && typeof c.filter !== 'boolean' && !c.filter.length))
         c.filter = undefined;
       return c;
     });
     this.nanoTblAfterFilter.emit({ filters: this.filters });
+    perMark('filter', true);
   }
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
@@ -31668,6 +32055,7 @@ class Table {
     var _a;
     if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
       return;
+    perMark('blockDims');
     const testForDimensions = async () => {
       await this.setMeasureElement();
       if (this.unitHeight)
@@ -31691,6 +32079,8 @@ class Table {
     });
     // we're all finished.
     dimensionsReady.then(() => {
+      perMark('blockDims', true);
+      perMark('init', true);
       requestAnimationFrame(() => (this.isReady = true));
     });
   }
@@ -31713,6 +32103,8 @@ class Table {
     if (!!col) {
       await this.sortStart(col.order, col.prop);
     }
+    if (this.tablePinnedService)
+      this.tablePinnedService.assessCols();
   }
   /** Split up all incoming rows into 'blocks' split amongst tbody elements.
    * These can then be hidden / shown to improve performance.
@@ -31723,6 +32115,7 @@ class Table {
       this.blocks = [];
       return;
     }
+    perMark('setBlocks');
     // this.ignoreIO = true;
     let i = 1;
     const l = this.virtualTotalItems > dRows.length
@@ -31745,6 +32138,7 @@ class Table {
       blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
     }
     this.blocks = blocks;
+    perMark('setBlocks', true);
   }
   /**
    * Returns a block render height.
@@ -31757,14 +32151,14 @@ class Table {
   getBlockHeight(blockIndex) {
     if (this.blockHeights.length) {
       const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
-      if (cachedBlockHeight)
+      if (cachedBlockHeight && cachedBlockHeight.height)
         return cachedBlockHeight.height;
     }
     const blockLength = this.blocks[blockIndex].rows.length;
     if (blockLength === this.perBlock && this.measureHeight) {
       return this.measureHeight;
     }
-    return this.unitHeight ? this.unitHeight * blockLength : undefined;
+    return this.unitHeight ? this.unitHeight * blockLength : 100;
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
@@ -31813,10 +32207,13 @@ class Table {
   }
   // Component lifecycle
   async componentWillLoad() {
+    perMark('init');
     // setup stores
     this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
     await this.handleRowsChange();
-    this.store.general.onChange('isActive', this.scrollHandler);
+    this.store.general.onChange('isActive', () => {
+      this.scrollHandler();
+    });
     this.store.data.onChange('rows', () => this.setBlocks());
     // setup dom and attach listeners
     this.processSlots();
@@ -31830,6 +32227,9 @@ class Table {
   }
   componentDidLoad() {
     this.setInitialBlockDimension();
+    if (!this.tablePinnedService) {
+      this.tablePinnedService = new TablePinService(this.tableEle, this.scrollParent);
+    }
   }
   componentShouldUpdate(_newVal, _oldVal, stateName) {
     // stop double rendering - we use the store for rendering internally
@@ -31839,9 +32239,11 @@ class Table {
       return false;
   }
   componentWillRender() {
+    perMark('render');
   }
   componentDidRender() {
-    this.setMeasureElement();
+    this.setMeasureElement().then(() => this.setBlockHeight());
+    perMark('render', true);
   }
   disconnectedCallback() {
     if (!this.activeWatcherIo)
@@ -31854,28 +32256,31 @@ 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", { 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: {
+    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, onNanoResize: () => {
+        if (this.tablePinnedService)
+          this.tablePinnedService.onResize();
+      } }), hAsync("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-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-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), id: 'nano-table-' + this.renderId }, 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, defaults: {
+      }, id: 'nano-table-caption-' + this.renderId }, hAsync("slot", { name: "caption" }, this.caption)), hAsync("thead", null, hAsync(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
+      hAsync(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
-    ]))), 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._loading && !this.blocks.length && (hAsync("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (hAsync("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => hAsync("nano-skeleton", null) })))))))), hAsync("tr", { hidden: !!this._loading || !!this.blocks.length }, hAsync("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, hAsync("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, hAsync("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (hAsync("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
       }, 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$1, { rowIndex: rowIndex, colIndex: colIndex })))));
-    })) : (hAsync("tr", null, hAsync("td", { colSpan: this.store.config.state.columns.length, style: {
+      return (hAsync(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (hAsync(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+    })) : (hAsync("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, 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: {
+      } })))))), this.showFooter && (hAsync("tfoot", null, hAsync(TableHeadFootRow, { rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
+      hAsync(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
         } }),
     ]))))), !!this.blocks.length && (hAsync("nano-spinner", { type: "circle", class: {
@@ -31895,7 +32300,7 @@ class Table {
     "$flags$": 4,
     "$tagName$": "nano-table",
     "$members$": {
-      "jsxRenderer": [16],
+      "customRenderer": [16],
       "type": [1],
       "caption": [1],
       "showCaption": [4, "show-caption"],
@@ -31914,6 +32319,7 @@ class Table {
       "customSortFn": [16],
       "defaultSort": [4, "default-sort"],
       "virtualTotalItems": [2, "virtual-total-items"],
+      "appliedFilters": [2064],
       "internalLoading": [32],
       "blocks": [32],
       "activeBlocks": [32],