@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/components/select.js

@@ -1,24 +1,36 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 import { g as getActiveElement } from './active-element.js';
 import { c as closestElement } from './dom.js';
-import { c as createColorClasses } from './theme.js';
-import { d as debounce, a as debounceEvent } from './throttle.js';
+import { a as debounceEvent } from './throttle.js';
 import { F as FormControlWrap, a as FormControl } from './form-control.js';
-import { d as defineCustomElement$5 } from './datalist.js';
-import { d as defineCustomElement$4 } from './dropdown.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './menu.js';
-import { d as defineCustomElement$1 } from './option.js';
+import { d as defineCustomElement$8 } from './datalist.js';
+import { d as defineCustomElement$7 } from './dropdown.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './menu.js';
+import { d as defineCustomElement$3 } from './option.js';
+import { d as defineCustomElement$2 } from './tag.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
 
-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.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: clip;\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  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  padding-inline: var(--padding-start) 0;\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  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-x: clip;\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  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\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}\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  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  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  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\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  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\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-start .sc-nano-select-s > *, .form-ctrl__slot-end.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-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  padding-inline: var(--padding-start) 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 > *, .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 > *, .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 > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .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-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  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: nano-color(danger, base, , true);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      nano-color(primary, base, , true)\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  inline-size: 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\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  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\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-block-size: 2.1em;\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-block-size: 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  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  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-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 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  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-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\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  block-size: 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  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\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  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  inline-size: 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 NanoSelectStyle0 = selectCss;
+const selectCss = ".sc-nano-select-h, *.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@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-select-h, *.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@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-select {\n  display: contents !important;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-select-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\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: clip;\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-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\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: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\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\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\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  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\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\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: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-select .form-ctrl__more.sc-nano-select, .has-error.sc-nano-select .form-ctrl__more.sc-nano-select {\n  display: block;\n  opacity: 1;\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(--more-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] .form-ctrl__helper.sc-nano-select, [disabled]).is-invalid.sc-nano-select-h .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-style: italic;\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) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-select:focus-visible, .form-ctrl__input.sc-nano-select:focus-within, .has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\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  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-select-h .form-ctrl__input-wrap.sc-nano-select {\n  align-items: start;\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  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: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-select:empty, .form-ctrl__slot-end.sc-nano-select:empty, .form-ctrl__slot-start.sc-nano-select:empty, .form-ctrl__slot-value-end.sc-nano-select:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-select {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-select {\n  padding-inline-end: 0;\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-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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  padding-inline: unset;\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 > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > * {\n  margin-inline: var(--padding-start) 0;\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-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  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\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-inline: 0 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.form-ctrl__validation-icon.sc-nano-select {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n.sc-nano-select-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-select, .is-valid).sc-nano-select-h .form-ctrl__validation-icon.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-select, .form-ctrl__success-icon.sc-nano-select {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-select-h .form-ctrl__success-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-select {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__error-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  display: block;\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  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\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-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: 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  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  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select .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-block-size: 2.5em;\n}\n\n.select__down-arrow.sc-nano-select {\n  color: var(--nano-color-primary-1200);\n  transition: rotate var(--nano-transition-x-fast) linear;\n}\n.is-open.sc-nano-select .select__down-arrow.sc-nano-select {\n  rotate: 180deg;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 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 .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\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-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\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  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:not(:has(~ nano-tag)) {\n  flex: 1;\n}\n\nnano-tag.sc-nano-select {\n  --color-non-interactive: var(--nano-color-primary-1000);\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) 0;\n  line-height: 1.4;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\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;
 const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.nanoChange = createEvent(this, "nanoChange", 7);
+        this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoFocus = createEvent(this, "nanoFocus", 7);
+        this.nanoDidLoad = createEvent(this, "nanoDidLoad", 7);
+        this.nanoDidUnload = createEvent(this, "nanoDidUnload", 7);
+        this.nanoSearchChange = createEvent(this, "nanoSearchChange", 7);
+        this.nanoValidate = createEvent(this, "nanoValidate", 7);
+    }
     nativeSelect;
     valueItems = [];
     dragVal;
@@ -59,22 +71,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this._datalist = ele;
         this.setDataListOpts();
     }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.nanoChange = createEvent(this, "nanoChange", 7);
-        this.nanoBlur = createEvent(this, "nanoBlur", 7);
-        this.nanoFocus = createEvent(this, "nanoFocus", 7);
-        this.nanoDidLoad = createEvent(this, "nanoDidLoad", 7);
-        this.nanoDidUnload = createEvent(this, "nanoDidUnload", 7);
-        this.nanoSearchChange = createEvent(this, "nanoSearchChange", 7);
-        this.nanoValidate = createEvent(this, "nanoValidate", 7);
-        this.showInlineValidation = debounce(this.showInlineValidation, 50);
-    }
     currInsertIndex = -1;
     showErrorMsg = false;
     errorMessage = '';
     hasFocus = false;
+    hasOpened = false;
     hasLabelSlot = false;
     hasHelperSlot = false;
     hasHelperEndSlot = false;
@@ -87,7 +88,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     get invalid() {
         return this._invalid;
     }
-    _invalid = false;
+    _invalid = null;
     /**
      * Current validation message - if any. @readonly
      */
@@ -96,11 +97,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return '';
         return this.nativeSelect.validationMessage;
     }
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     */
-    color;
     /**
      * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
      */
@@ -118,10 +114,16 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * Whether to show validation errors underneath input
      */
     showInlineError = true;
+    _label = '';
     /**
-     * String to place within a label element. Alternatively use the 'label' slot
+     * String to place within a label element. Alternatively you may use a label slot.
      */
-    label;
+    get label() {
+        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+    }
+    set label(value) {
+        this._label = value;
+    }
     /**
      * Visually hide the label - but make it accessible.
      */
@@ -170,6 +172,8 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     readonly = false;
     /**
      * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
      */
     required = false;
     /**
@@ -205,7 +209,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
         if (typeof val === 'string') {
             if (this.multiple)
-                this._value = val.split(',');
+                this._value = val.split(',').map((v) => v.trim());
             else
                 this._value = val;
         }
@@ -217,6 +221,22 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
     }
     _value;
+    /**
+     * Update the native select element when the value changes
+     */
+    valueChanged() {
+        this.customValidate();
+        if (this.onInit) {
+            if (this.multiple) {
+                this.currInsertIndex = this.value.length - 1;
+            }
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.shouldValidate();
+            this.nanoChange.emit({ value: this.value });
+        });
+    }
     /**
      * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
      * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
@@ -246,7 +266,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     /**
      * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
      */
-    clearSelect = false;
+    clearable = false;
     /**
      * Hide the native select element and cover with a value 'mask'.
      * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
@@ -269,21 +289,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return;
         this.showInlineValidation();
     }
-    /**
-     * Update the native select element when the value changes
-     */
-    valueChanged() {
-        this.customValidate();
-        if (this.onInit) {
-            if (this.multiple)
-                this.currInsertIndex = this.value.length - 1;
-            return;
-        }
-        requestAnimationFrame(() => {
-            this.shouldValidate();
-            this.nanoChange.emit({ value: this.value });
-        });
-    }
     /** nano-dropdown config options you can pass to the nested dropdown component */
     dropDownConfig = {};
     setDataListOpts() {
@@ -292,6 +297,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.datalist.input = this.inputCtrl;
         const currDWConfig = this.datalist.dropDownConfig || {};
         this.datalist.dropDownConfig = {
+            distance: 10,
             ...currDWConfig,
             ...this.dropDownConfig,
             tetherTo: this.selectWrap,
@@ -481,7 +487,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.setFocus();
     };
     slotChangeObserver() {
-        if (!window['MutationObserver'])
+        if (Build.isServer)
             return;
         const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
         mo.observe(this.el, { childList: true, subtree: true });
@@ -516,19 +522,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return;
         this.clearSelectValue();
     }
-    handleBlur(e) {
+    handleBlur() {
         if (!this.hasFocus)
             return;
-        const kev = e;
-        let target;
         requestAnimationFrame(() => {
-            if (kev.key) {
-                if (kev.key !== 'Tab')
-                    return;
-                target = getActiveElement();
-            }
-            else
-                target = e.target;
+            const target = getActiveElement();
             if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
                 this.onBlur();
             }
@@ -599,7 +597,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.nanoFocus.emit();
     };
     clearSelectValue = (ev) => {
-        if (this.clearSelect && !this.readonly && !this.disabled && ev) {
+        if (this.clearable && !this.readonly && !this.disabled && ev) {
             ev.preventDefault();
             ev.stopPropagation();
         }
@@ -627,7 +625,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     };
     onDragLeave = (ev) => {
         const ele = ev.target;
-        const spanVal = ele.dataset && ele.dataset.value ? ele.dataset.value : null;
+        const spanVal = ele.dataset?.value || null;
         if (!spanVal ||
             this.dragVal === spanVal ||
             !this.value.includes(this.dragVal)) {
@@ -636,7 +634,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
         const to = this.value.indexOf(spanVal);
         const from = this.value.indexOf(this.dragVal);
-        const tmpArr = this.value;
+        const tmpArr = [...this.value];
         const tmpVal = tmpArr[to];
         tmpArr[to] = tmpArr[from];
         tmpArr[from] = tmpVal;
@@ -702,33 +700,37 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             helperEndId,
             hasValue: !!this.value.length || !!this.inputSearchVal.length,
             controlId: this.selectId,
+            alwaysShowPlaceholder: false,
         };
         const controlOptions = (({ readonly, disabled }) => ({
             readonly,
             disabled,
-            clearControl: this.clearSelect,
+            clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '536c9704da65bc7e7415e679382384c076696d51', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
-                ...createColorClasses(this.color),
+        return (h(Host, { key: 'dd8d62d6064ca5bbca75c9b5b308ab2c8140c778', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
-                'is-invalid': this.invalid,
-                'has-label': this.label !== null && !this.floatLabel,
-                'has-float-label': this.label !== null && this.floatLabel,
-                rtl: this.rtl,
-                'has-multiple': this.multiple,
-                'has-clr-btn': this.clearSelect,
-                masked: this.mask,
+                'is-invalid': this._invalid === true,
+                'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: 'c7fd0db291f3362fcdfca52f443899260a284490', ...wrapOptions }, h(FormControl, { key: '9ea819ba91334497b7ef3e5fddf9308acc1aded9', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: 'f467f7b65f6edb3e98a5dcd99a4a4b275152b323', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: '9f993b544220f7be26b9ed9d33fe1516c7652da5', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'f3b4f85878ac17e3b9701a217a69e96bb68ea5e0', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '52a43b32040be9aad63e1f6975e0ab9e9202aacd', onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+            } }, h(FormControlWrap, { key: '811e296732a794fe171b99ab8831fb8a9f014c43', ...wrapOptions, class: {
+                'has-error': !!this.errorMessage &&
+                    this.showInlineError &&
+                    this._invalid === true,
+                'has-helper': this.hasHelperSlot,
+                'is-open': this.hasOpened,
+                masked: this.mask,
+            } }, h(FormControl, { key: '667499839b71ae46a1e8b8ee410e20334518a212', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '3d4d2f085444d08bad5ea6893779d62eec37e4c1', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'e7354f6e04484f1f56f0a8adc1a83a1fd9217230', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'c751e574ade62cf7ec18b61b54f79e7066652236', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '800b2ba2ba4b397bf23e1e1f872dacf82fbac2c6', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
-            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues &&
+            }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
+            // @ts-expect-error - this bubbles from the nano-dropdown
+            onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (h("nano-option", { key: '8c051e25608cb6790bde692084c965bc064db0fa', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '8f8b1abae976d352d71f3e74c9636ffc10800326', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '139819ef432722a337fe9c9bb2c3713f8e1d4130' }))), h("select", { key: '15f20b80edea9e26b60c3c6d494d928e4cc479cc', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (h("nano-option", { key: '93149856e07a8b0be5b2ba6d7145c1ed37b7c876', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '9214159801d2b7f2a8bc2251a964d60980766dd6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '742e550ebb274935ea61f0ae01d34e696058b146' }))), h("select", { key: 'e56355bad1e009cb1a46ef727e8e16894c38d325', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
@@ -746,16 +748,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 return;
             let valueTag;
             if (i === this._maxValuesVisible) {
-                valueTag = (h("span", { "data-value": val, class: "select__multi-value" }, h("span", null, "+", this.value.length - this._maxValuesVisible)));
+                valueTag = (h("nano-tag", { "data-value": val, key: val }, "+", this.value.length - this._maxValuesVisible));
             }
             else {
-                valueTag = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value select__multi-value--closable" }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
+                valueTag = (h("nano-tag", { key: val, ref: (span) => this.valueItems.push(span), onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), onNanoClose: () => this.removeValue(val), draggable: true, tabIndex: -1, "data-value": val, closable: true }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
                         ? this.valueTagTemplate(...this.getOptionWithValue(val))
-                        : undefined })) : (h("span", null, this.getLabel(val))), h("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-                        this.removeValue(val);
-                    }, onMouseUp: () => {
-                        this.removeValue(val);
-                    } }, h("nano-icon", { name: "light/xmark" }))));
+                        : undefined })) : (h("span", null, this.getLabel(val)))));
             }
             if (i === 0 && this.currInsertIndex < 0) {
                 toReturn.push(input, valueTag);
@@ -771,25 +769,24 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     static get watchers() { return {
         "maxValuesVisible": ["watchMaxValuesVisible"],
+        "value": ["valueChanged"],
         "debounce": ["debounceChanged"],
         "required": ["shouldValidate"],
         "disabled": ["shouldValidate"],
         "min": ["shouldValidate"],
         "max": ["shouldValidate"],
         "readonly": ["shouldValidate"],
-        "value": ["valueChanged"],
         "dropDownConfig": ["setDataListOpts"]
     }; }
-    static get style() { return NanoSelectStyle0; }
+    static get style() { return selectCss; }
 }, [6, "nano-select", {
-        "invalid": [2564],
+        "invalid": [2568],
         "validityMessage": [2049, "validity-message"],
-        "color": [1],
         "autofocus": [4],
         "disabled": [516],
         "validateOn": [1025, "validate-on"],
         "showInlineError": [516, "show-inline-error"],
-        "label": [1],
+        "label": [7169],
         "hideLabel": [4, "hide-label"],
         "floatLabel": [4, "float-label"],
         "multiple": [4],
@@ -805,15 +802,16 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "allowCustomValues": [4, "allow-custom-values"],
         "value": [6145],
         "options": [6160],
-        "clearSelect": [4, "clear-select"],
+        "clearable": [4],
         "mask": [4],
         "debounce": [2],
-        "dropDownConfig": [16],
-        "valueTagTemplate": [16],
+        "dropDownConfig": [16, "drop-down-config"],
+        "valueTagTemplate": [16, "value-tag-template"],
         "currInsertIndex": [32],
         "showErrorMsg": [32],
         "errorMessage": [32],
         "hasFocus": [32],
+        "hasOpened": [32],
         "hasLabelSlot": [32],
         "hasHelperSlot": [32],
         "hasHelperEndSlot": [32],
@@ -826,20 +824,20 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "showError": [64]
     }, [[16, "reset", "onReset"], [17, "mousedown", "handleBlur"], [0, "keydown", "handleBlur"]], {
         "maxValuesVisible": ["watchMaxValuesVisible"],
+        "value": ["valueChanged"],
         "debounce": ["debounceChanged"],
         "required": ["shouldValidate"],
         "disabled": ["shouldValidate"],
         "min": ["shouldValidate"],
         "max": ["shouldValidate"],
         "readonly": ["shouldValidate"],
-        "value": ["valueChanged"],
         "dropDownConfig": ["setDataListOpts"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nano-select", "nano-datalist", "nano-dropdown", "nano-icon", "nano-menu", "nano-option"];
+    const components = ["nano-select", "nano-datalist", "nano-dropdown", "nano-icon", "nano-icon-button", "nano-menu", "nano-option", "nano-tag", "nano-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "nano-select":
             if (!customElements.get(tagName)) {
@@ -848,25 +846,40 @@ function defineCustomElement() {
             break;
         case "nano-datalist":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$8();
             }
             break;
         case "nano-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$7();
             }
             break;
         case "nano-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$6();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
             }
             break;
         case "nano-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$4();
             }
             break;
         case "nano-option":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nano-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -875,5 +888,3 @@ function defineCustomElement() {
 }
 
 export { Select as S, defineCustomElement as d };
-
-//# sourceMappingURL=select.js.map

package/dist/components/skeleton.js

@@ -1,11 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 
-const skeletonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";
-const NanoSkeletonStyle0 = skeletonCss;
+const skeletonCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";
 
 const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLElement {
     constructor() {
@@ -16,12 +15,12 @@ const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLEle
     /** When `true`, the skeleton will animate. */
     animated = true;
     render() {
-        return (h(Host, { key: '97ea058a91c14ec6cb5707d5f7c36ce71836db88', class: "nano-skeleton" }, h("div", { key: '97aaf3eb540c1e8671c661e0f1e7cebb260f057b', class: {
+        return (h(Host, { key: 'fcfda9d2eb69c98089f410f30087a5cc773b4dd7', class: "nano-skeleton" }, h("div", { key: '6f489367c6e9a366d8fc4290244141a8a0b1c4d8', class: {
                 skeleton: true,
                 animate: this.animated,
-            } }, h("div", { key: '378a1c6168fa2462e81da0205f55c58260c52cac', class: "skeleton__indicator" }, "\u00A0"))));
+            } }, h("div", { key: 'd54f326dd7e8d181702d6ab16ca08c6c88c654e0', class: "skeleton__indicator" }, "\u00A0"))));
     }
-    static get style() { return NanoSkeletonStyle0; }
+    static get style() { return skeletonCss; }
 }, [1, "nano-skeleton", {
         "animated": [4]
     }]);
@@ -40,5 +39,3 @@ function defineCustomElement() {
 }
 
 export { Skeleton as S, defineCustomElement as d };
-
-//# sourceMappingURL=skeleton.js.map