npm - @nanoporetech-digital/components - Versions diffs - 8.7.2 → 8.8.0 - Mend

@nanoporetech-digital/components 8.7.2 → 8.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/hydrate/index.mjs CHANGED Viewed

@@ -9788,7 +9788,7 @@ const DateRegxps = {
     m: '(\\d{1,2})',
     y: '(\\d{4})',
 };
-let inputIds$1 = 0;
+let inputIds$2 = 0;
 /**
  * Enables date selection and input in a form.
  *
@@ -9814,7 +9814,7 @@ class DateInput {
     input;
     directInput = false;
     dateOrderIndeces = { d: 0, m: 1, y: 3 };
-    inputId = `nano-input-${inputIds$1++}`;
+    inputId = `nano-input-${inputIds$2++}`;
     locale = window.navigator.languages ||
         window.navigator.language ||
         undefined;
@@ -17039,7 +17039,7 @@ const FormControl = (props, children) => {
 const inputCss = ".sc-nano-input-h, *.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@media (prefers-reduced-motion: reduce) {\n    .sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::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-input-h, *.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@media (prefers-reduced-motion: reduce) {\n    .sc-nano-input-h, *.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::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-input {\n  display: contents !important;\n}\n\n[disabled].sc-nano-input-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-input-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\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}\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-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-input {\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-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\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-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\n.form-ctrl__label.sc-nano-input {\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-input .form-ctrl__label-wrap.sc-nano-input {\n  flex: 1;\n  overflow-x: clip;\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  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-input .form-ctrl__label-charcount.sc-nano-input {\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-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n  opacity: 0.5;\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  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.form-ctrl__more.sc-nano-input > *.sc-nano-input {\n  grid-column: 1;\n  grid-row: 1;\n}\n.has-helper.sc-nano-input .form-ctrl__more.sc-nano-input, .has-error.sc-nano-input .form-ctrl__more.sc-nano-input {\n  display: grid;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\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-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]).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-style: italic;\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) 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-input:focus-visible, .form-ctrl__input.sc-nano-input:focus-within, .has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\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-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\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-input {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-input-h .form-ctrl__input-wrap.sc-nano-input {\n  align-items: start;\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  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-input:empty, .form-ctrl__slot-end.sc-nano-input:empty, .form-ctrl__slot-start.sc-nano-input:empty, .form-ctrl__slot-value-end.sc-nano-input:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-input {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-input {\n  padding-inline-end: 0;\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-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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-input-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-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .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 > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-input-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > * {\n  margin-inline: var(--padding-start) 0;\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-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  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\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-inline: 0 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.form-ctrl__validation-icon.sc-nano-input {\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-input-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-input, .is-valid).sc-nano-input-h .form-ctrl__validation-icon.sc-nano-input {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-input, .form-ctrl__success-icon.sc-nano-input {\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-input-h .form-ctrl__success-icon.sc-nano-input {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-input {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-input-h .form-ctrl__error-icon.sc-nano-input {\n  opacity: 1;\n}\n\n.sc-nano-input-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  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n[type=date].sc-nano-input-h .input__date-trigger.sc-nano-input {\n  color: var(--nano-color-primary-1200);\n}\n[type=date].sc-nano-input-h .input__date-dropdown.sc-nano-input {\n  --overflow: visible;\n}\n[type=date].sc-nano-input-h .input__date-close.sc-nano-input {\n  position: absolute;\n  inset-inline-end: 0;\n  inset-block: 0;\n  opacity: 0;\n  z-index: 2;\n}\n[type=date].sc-nano-input-h .input__date-close.sc-nano-input:focus {\n  opacity: 1;\n}\n@supports selector(::-moz-placeholder) {\n  [type=date].sc-nano-input-h .form-ctrl__input-wrap.sc-nano-input {\n    justify-content: end;\n    min-block-size: 2.5em;\n  }\n  [type=date].sc-nano-input-h .input__native-ctrl.sc-nano-input {\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n  [type=date].sc-nano-input-h .input__date-dropdown.sc-nano-input {\n    background-color: var(--nano-color-base-0);\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  appearance: none;\n  -webkit-rtl-ordering: logical;\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  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n  \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\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: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: 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  appearance: none;\n}\n.input__native-ctrl.sc-nano-input::-webkit-calendar-picker-indicator {\n  display: none;\n}\n.input__native-ctrl.sc-nano-input::-webkit-datetime-edit {\n  display: block;\n  padding: 0;\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: calc(var(--padding-top) - 3px) 0.5em;\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  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;
+let inputIds$1 = 0;
 /**
  * Inputs collect text data from the user.
  *
@@ -17057,7 +17057,7 @@ let inputIds = 0;
  */
 class Input {
     nativeInput;
-    inputId = `nano-input-${inputIds++}`;
+    inputId = `nano-input-${inputIds$1++}`;
     didBlurAfterEdit = false;
     rtl = false;
     mo;
@@ -17723,6 +17723,741 @@ class Input {
     }; }
 }
+const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:var(--nano-spacing-md);--padding-end:0;--padding-bottom:var(--nano-spacing-xl);--padding-start:0;--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative}.input-otp-group.sc-nano-input-otp{margin:var(--margin-top) var(--margin-end) var(--margin-bottom) var(--margin-start);padding:var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;inset-inline-start:-24px}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{inline-size:24px;block-size:24px;display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
+/**
+ * A component for entering one-time passwords (OTP) with multiple input fields.
+ *
+ * @version 8.7.2
+ * @status new
+ *
+ * @slot - The default slot for the input description.
+ * @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
+ */
+class InputOTP {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nanoInput = createEvent(this, "nanoInput", 7);
+        this.nanoChange = createEvent(this, "nanoChange", 7);
+        this.nanoComplete = createEvent(this, "nanoComplete", 7);
+        this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoFocus = createEvent(this, "nanoFocus", 7);
+    }
+    inputRefs = [];
+    inputId = `nano-input-otp-${inputIds++}`;
+    /**
+     * Stores the initial value of the input when it receives focus.
+     * Used to determine if the value changed during the focus session
+     * to avoid emitting unnecessary change events on blur.
+     */
+    focusedValue;
+    /**
+     * Tracks whether the user is navigating through input boxes using keyboard navigation
+     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+     * focus behavior when an input box is focused.
+     */
+    isKeyboardNavigation = false;
+    get el() { return getElement(this); }
+    inputValues = [];
+    hasFocus = false;
+    previousInputValues = [];
+    invalid = false;
+    valid = false;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled = false;
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     *
+     * For numbers (type="number"): "numeric"
+     * For text (type="text"): "text"
+     */
+    inputmode;
+    /**
+     * The number of input boxes to display.
+     */
+    length = 6;
+    /**
+     * A regex pattern string for allowed characters. Defaults based on type.
+     *
+     * For numbers (`type="number"`): `"[\p{N}]"`
+     * For text (`type="text"`): `"[\p{L}\p{N}]"`
+     */
+    pattern;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly = false;
+    /**
+     * The type of input allowed in the input boxes.
+     */
+    type = 'number';
+    /**
+     * The value of the input group.
+     */
+    value = '';
+    /**
+     * If `true`, allows the input to be completely filled with invalid values.
+     * By default, if any input box contains an invalid value, the entire input group
+     * is marked as invalid.
+     * Default is `false`.
+     */
+    allowInvalid = false;
+    /**
+     * If `true`, shows a validity icon when all input boxes are filled.
+     * A check icon is shown if all values are valid, and an X icon is shown if any value is invalid.
+     * This does not affect the `invalid` or `valid` states of the input group.
+     * Default is `false`.
+     * */
+    showValidity = false;
+    /**
+     * The `nanoInput` event is fired each time the user modifies the input's value.
+     * Unlike the `nanoChange` event, the `nanoInput` event is fired for each alteration
+     * to the input's value. This typically happens for each keystroke as the user types.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    nanoInput;
+    /**
+     * The `nanoChange` event is fired when the user modifies the input's value.
+     * Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes
+     * are committed, not as the user types.
+     *
+     * The `nanoChange` event fires when the `<nano-input-otp>` component loses
+     * focus after its value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    nanoChange;
+    /**
+     * Emitted when all input boxes have been filled with valid values.
+     */
+    nanoComplete;
+    /**
+     * Emitted when the input group loses focus.
+     */
+    nanoBlur;
+    /**
+     * Emitted when the input group has focus.
+     */
+    nanoFocus;
+    /**
+     * Sets focus to an input box.
+     * @param index - The index of the input box to focus (0-based).
+     * If provided and the input box has a value, the input box at that index will be focused.
+     * Otherwise, the first empty input box or the last input if all are filled will be focused.
+     */
+    async setFocus(index) {
+        if (typeof index === 'number') {
+            const validIndex = Math.max(0, Math.min(index, this.length - 1));
+            this.inputRefs[validIndex]?.focus();
+        }
+        else {
+            const tabbableIndex = this.getTabbableIndex();
+            this.inputRefs[tabbableIndex]?.focus();
+        }
+    }
+    valueChanged() {
+        this.initializeValues();
+        this.updateTabIndexes();
+        this.computeValidity();
+    }
+    componentWillLoad() {
+        this.initializeValues();
+        this.computeValidity();
+    }
+    componentDidLoad() {
+        this.updateTabIndexes();
+    }
+    /**
+     * Get the regex pattern for allowed characters.
+     * If a pattern is provided, use it to create a regex pattern
+     * Otherwise, use the default regex pattern based on type
+     */
+    get validKeyPattern() {
+        return new RegExp(`^${this.getPattern()}$`, 'u');
+    }
+    get specialCharsPattern() {
+        return new RegExp(`^[\\p{S}\\p{P}]$`, 'u');
+    }
+    /**
+     * Gets the string pattern to pass to the input element
+     * and use in the regex for allowed characters.
+     * @returns {string} The regex pattern string for allowed characters.
+     */
+    getPattern() {
+        const { pattern, type } = this;
+        if (pattern) {
+            return pattern;
+        }
+        return type === 'number' ? '[\\p{N}]' : '[\\p{L}\\p{N}]';
+    }
+    /**
+     * Get the default value for inputmode.
+     * If inputmode is provided, use it.
+     * Otherwise, use the default inputmode based on type
+     * @returns {string} The inputmode to use for the input boxes.
+     */
+    getInputmode() {
+        const { inputmode } = this;
+        if (inputmode) {
+            return inputmode;
+        }
+        if (this.type == 'number') {
+            return 'numeric';
+        }
+        else {
+            return 'text';
+        }
+    }
+    /**
+     * Initializes the input values array based on the current value prop.
+     * This splits the value into individual characters and validates them against
+     * the allowed pattern. The values are then used as the values in the native
+     * input boxes and the value of the input group is updated.
+     */
+    initializeValues() {
+        // Clear all input values
+        this.inputValues = Array(this.length).fill('');
+        // If the value is null, undefined, or an empty string, return
+        if (this.value == null || String(this.value).length === 0) {
+            return;
+        }
+        // Split the value into individual characters and validate
+        // them against the allowed pattern if invalid characters are allowed, else just put them in
+        const chars = String(this.value).split('').slice(0, this.length);
+        chars.forEach((char, index) => {
+            if (this.allowInvalid && !this.specialCharsPattern.test(char)) {
+                this.inputValues[index] = char;
+            }
+            else if (this.validKeyPattern.test(char)) {
+                this.inputValues[index] = char;
+            }
+        });
+        // Update the value without emitting events
+        this.value = this.inputValues.join('');
+        this.previousInputValues = [...this.inputValues];
+    }
+    /**
+     * Returns `true` if the document or host element
+     * has a `dir` set to `rtl`. The host value will always
+     * take priority over the root document value.
+     * @returns {boolean} True if RTL direction is set, false otherwise.
+     */
+    isRTL = (hostEl) => {
+        if (hostEl) {
+            if (hostEl.dir !== '') {
+                return hostEl.dir.toLowerCase() === 'rtl';
+            }
+        }
+        return document?.dir.toLowerCase() === 'rtl';
+    };
+    /**
+     * Updates the value of the input group.
+     * This updates the value of the input group and emits an `nanoChange` event.
+     * If all of the input boxes are filled, it emits an `nanoComplete` event.
+     */
+    updateValue(event) {
+        const { inputValues, length } = this;
+        const newValue = this.getValidChars(inputValues.join('')).join('');
+        this.value = newValue;
+        this.computeValidity();
+        this.emitNanoInput(event);
+        if (newValue.length === length) {
+            this.nanoComplete.emit({ value: newValue, valid: this.valid });
+        }
+    }
+    /**
+     * Emits an `nanoChange` event.
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    emitNanoChange(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.computeValidity();
+        this.nanoChange.emit({
+            value: newValue?.toString(),
+            event,
+            valid: this.valid,
+        });
+    }
+    /**
+     * Emits an `nanoInput` event.
+     * This is used to emit the input value when the user types,
+     * backspaces, or pastes.
+     */
+    emitNanoInput(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.computeValidity();
+        this.nanoInput.emit({
+            value: newValue?.toString(),
+            event,
+            valid: this.valid,
+        });
+    }
+    /**
+     * Handles the focus behavior for the input OTP component.
+     *
+     * Focus behavior:
+     * 1. Keyboard navigation: Allow normal focus movement
+     * 2. Mouse click:
+     *    - If clicked box has value: Focus that box
+     *    - If clicked box is empty: Focus first empty box
+     *
+     * Emits the `nanoFocus` event when the input group gains focus.
+     * @returns {(event: FocusEvent) => void} Event handler for focus events.
+     */
+    onFocus = (index) => (event) => {
+        const { inputRefs } = this;
+        // Only emit nanoFocus and set the focusedValue when the
+        // component first gains focus
+        if (!this.hasFocus) {
+            this.nanoFocus.emit(event);
+            this.focusedValue = this.value;
+        }
+        this.hasFocus = true;
+        let finalIndex = index;
+        if (!this.isKeyboardNavigation) {
+            // If the clicked box has a value, focus it
+            // Otherwise focus the first empty box
+            const targetIndex = this.inputValues[index]
+                ? index
+                : this.getFirstEmptyIndex();
+            finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
+            // Focus the target box
+            this.inputRefs[finalIndex]?.focus();
+        }
+        // Update tabIndexes to match the focused box
+        inputRefs.forEach((input, i) => {
+            input.tabIndex = i === finalIndex ? 0 : -1;
+        });
+        // Reset the keyboard navigation flag
+        this.isKeyboardNavigation = false;
+    };
+    /**
+     * Handles the blur behavior for the input OTP component.
+     * Emits the `nanoBlur` event when the input group loses focus.
+     */
+    onBlur = (event) => {
+        const { inputRefs } = this;
+        const relatedTarget = event.relatedTarget;
+        // Do not emit blur if we're moving to another input box in the same component
+        const isInternalFocus = relatedTarget != null &&
+            inputRefs.includes(relatedTarget);
+        if (!isInternalFocus) {
+            this.hasFocus = false;
+            // Reset tabIndexes when focus leaves the component
+            this.updateTabIndexes();
+            // Always emit nanoBlur when focus leaves the component
+            this.nanoBlur.emit(event);
+            // Only emit nanoChange if the value has actually changed
+            if (this.focusedValue !== this.value) {
+                this.emitNanoChange(event);
+            }
+        }
+    };
+    /**
+     * Focuses the next input box.
+     */
+    focusNext(currentIndex) {
+        const { inputRefs, length } = this;
+        if (currentIndex < length - 1) {
+            inputRefs[currentIndex + 1]?.focus();
+        }
+    }
+    /**
+     * Focuses the previous input box.
+     */
+    focusPrevious(currentIndex) {
+        const { inputRefs } = this;
+        if (currentIndex > 0) {
+            inputRefs[currentIndex - 1]?.focus();
+        }
+    }
+    /**
+     * Searches through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
+     * @returns {number} The index of the first empty input, or -1 if all are filled.
+     */
+    getFirstEmptyIndex() {
+        const { inputValues, length } = this;
+        // Create an array of the same length as the input OTP
+        // and fill it with the input values
+        const values = Array.from({ length }, (_, i) => inputValues[i] || '');
+        return values.findIndex((value) => !value || value === '') ?? -1;
+    }
+    /**
+     * Returns the index of the input that should be tabbed to.
+     * If all inputs are filled, returns the last input's index.
+     * Otherwise, returns the index of the first empty input.
+     * @returns {number} The index to tab to.
+     */
+    getTabbableIndex() {
+        const { length } = this;
+        const firstEmptyIndex = this.getFirstEmptyIndex();
+        return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+    }
+    /**
+     * Updates the tabIndexes for the input boxes.
+     * This is used to ensure that the correct input is
+     * focused when the user navigates using the tab key.
+     */
+    updateTabIndexes() {
+        const { inputRefs, inputValues, length } = this;
+        // Find first empty index after any filled boxes
+        let firstEmptyIndex = -1;
+        for (let i = 0; i < length; i++) {
+            if (!inputValues[i] || inputValues[i] === '') {
+                firstEmptyIndex = i;
+                break;
+            }
+        }
+        // Update tabIndex and aria-hidden for all inputs
+        inputRefs.forEach((input, index) => {
+            const shouldBeTabbable = firstEmptyIndex === -1
+                ? index === length - 1
+                : firstEmptyIndex === index;
+            input.tabIndex = shouldBeTabbable ? 0 : -1;
+            // If the input is empty and not the first empty input,
+            // it should be hidden from screen readers.
+            const isEmpty = !inputValues[index] || inputValues[index] === '';
+            input.setAttribute('aria-hidden', isEmpty && !shouldBeTabbable ? 'true' : 'false');
+        });
+    }
+    /**
+     * Handles keyboard navigation for the OTP component.
+     *
+     * Navigation:
+     * - Backspace: Clears current input and moves to previous box if empty
+     * - Arrow Left/Right: Moves focus between input boxes
+     * - Tab: Allows normal tab navigation between components
+     * @returns {(event: KeyboardEvent) => void} Event handler for keydown events.
+     */
+    onKeyDown = (index) => (event) => {
+        const { length } = this;
+        const rtl = this.isRTL(this.el);
+        const input = event.target;
+        // Meta shortcuts are used to copy, paste, and select text
+        // We don't want to handle these keys here
+        const metaShortcuts = ['a', 'c', 'v', 'x', 'r', 'z', 'y'];
+        const isTextSelection = input.selectionStart !== input.selectionEnd;
+        // Return if the key is a meta shortcut or the input value
+        // text is selected and let the onPaste / onInput handler manage it
+        if (isTextSelection ||
+            ((event.metaKey || event.ctrlKey) &&
+                metaShortcuts.includes(event.key.toLowerCase()))) {
+            return;
+        }
+        if (event.key === 'Backspace') {
+            if (this.inputValues[index]) {
+                // Shift all values to the right of the current index left by one
+                for (let i = index; i < length - 1; i++) {
+                    this.inputValues[i] = this.inputValues[i + 1];
+                }
+                // Clear the last box
+                this.inputValues[length - 1] = '';
+                // Update all inputRefs to match inputValues
+                for (let i = 0; i < length; i++) {
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.updateValue(event);
+                event.preventDefault();
+            }
+            else if (!this.inputValues[index] && index > 0) {
+                // If current input is empty, move to previous input
+                this.focusPrevious(index);
+            }
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            this.isKeyboardNavigation = true;
+            event.preventDefault();
+            const isLeft = event.key === 'ArrowLeft';
+            const shouldMoveNext = (isLeft && rtl) || (!isLeft && !rtl);
+            // Only allow moving to the next input if the current has a value
+            if (shouldMoveNext) {
+                if (this.inputValues[index] && index < length - 1) {
+                    this.focusNext(index);
+                }
+            }
+            else {
+                this.focusPrevious(index);
+            }
+        }
+        else if (event.key === 'Tab') {
+            this.isKeyboardNavigation = true;
+            // Let all tab events proceed normally
+            return;
+        }
+    };
+    /**
+     * Processes all input scenarios for each input box.
+     *
+     * This function manages:
+     * 1. Autofill handling
+     * 2. Input validation
+     * 3. Full selection replacement or typing in an empty box
+     * 4. Inserting in the middle with available space (shifting)
+     * 5. Single character replacement
+     * @returns {(event: InputEvent) => void} Event handler for input events.
+     */
+    onInput = (index) => (event) => {
+        const { length, validKeyPattern, allowInvalid } = this;
+        const input = event.target;
+        const value = input.value;
+        const previousValue = this.previousInputValues[index] || '';
+        // 1. Autofill handling
+        // If the length of the value increases by more than 1 from the previous
+        // value, treat this as autofill. This is to prevent the case where the
+        // user is typing a single character into an input box containing a value
+        // as that will trigger this function with a value length of 2 characters.
+        const isAutofill = value.length - previousValue.length > 1;
+        if (isAutofill) {
+            // Distribute valid characters across input boxes
+            const validChars = this.getValidChars(value);
+            // If there are no valid characters coming from the
+            // autofill, all input refs have to be cleared after the
+            // browser has finished the autofill behavior
+            if (validChars.length === 0) {
+                requestAnimationFrame(() => {
+                    this.inputRefs.forEach((input) => {
+                        input.value = '';
+                    });
+                });
+            }
+            for (let i = 0; i < length; i++) {
+                this.inputValues[i] = validChars[i] || '';
+                this.inputRefs[i].value = validChars[i] || '';
+            }
+            this.updateValue(event);
+            // Focus the first empty input box or the last input box if all boxes
+            // are filled after a small delay to ensure the input boxes have been
+            // updated before moving the focus
+            setTimeout(() => {
+                const nextIndex = validChars.length < length ? validChars.length : length - 1;
+                this.inputRefs[nextIndex]?.focus();
+            }, 20);
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        // 2. Input validation
+        // If the character entered is invalid (does not match the pattern),
+        // restore the previous value and exit
+        if ((!allowInvalid &&
+            value.length > 0 &&
+            !validKeyPattern.test(value[value.length - 1])) ||
+            (allowInvalid && this.specialCharsPattern.test(value[value.length - 1]))) {
+            input.value = this.inputValues[index] || '';
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        // 3. Full selection replacement or typing in an empty box
+        // If the user selects all text in the input box and types, or if the
+        // input box is empty, replace only this input box. If the box is empty,
+        // move to the next box, otherwise stay focused on this box.
+        const isAllSelected = input.selectionStart === 0 && input.selectionEnd === value.length;
+        const isEmpty = !this.inputValues[index];
+        if (isAllSelected || isEmpty) {
+            this.inputValues[index] = value;
+            input.value = value;
+            this.updateValue(event);
+            this.focusNext(index);
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        // 4. Inserting in the middle with available space (shifting)
+        // If typing in a filled input box and there are empty boxes at the end,
+        // shift all values starting at the current box to the right, and insert
+        // the new character at the current box.
+        const hasAvailableBoxAtEnd = this.inputValues[this.inputValues.length - 1] === '';
+        if (this.inputValues[index] && hasAvailableBoxAtEnd && value.length === 2) {
+            // Get the inserted character (from event or by diffing value/previousValue)
+            let newChar = event.data;
+            if (!newChar) {
+                newChar =
+                    value.split('').find((c, i) => c !== previousValue[i]) ||
+                        value[value.length - 1];
+            }
+            // Validate the new character before shifting
+            if (!allowInvalid && !validKeyPattern.test(newChar)) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            // Shift values right from the end to the insertion point
+            for (let i = this.inputValues.length - 1; i > index; i--) {
+                this.inputValues[i] = this.inputValues[i - 1];
+                this.inputRefs[i].value = this.inputValues[i] || '';
+            }
+            this.inputValues[index] = newChar;
+            this.inputRefs[index].value = newChar;
+            this.updateValue(event);
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        // 5. Single character replacement
+        // Handles replacing a single character in a box containing a value based
+        // on the cursor position. We need the cursor position to determine which
+        // character was the last character typed. For example, if the user types "2"
+        // in an input box with the cursor at the beginning of the value of "6",
+        // the value will be "26", but we want to grab the "2" as the last character
+        // typed.
+        const cursorPos = input.selectionStart ?? value.length;
+        const newCharIndex = cursorPos - 1;
+        const newChar = value[newCharIndex] ?? value[0];
+        // Check if the new character is valid before updating the value
+        if (!allowInvalid && !validKeyPattern.test(newChar)) {
+            input.value = this.inputValues[index] || '';
+            this.previousInputValues = [...this.inputValues];
+            return;
+        }
+        this.inputValues[index] = newChar;
+        input.value = newChar;
+        this.updateValue(event);
+        this.previousInputValues = [...this.inputValues];
+    };
+    /**
+     * Handles pasting text into the input OTP component.
+     * This function prevents the default paste behavior and
+     * validates the pasted text against the allowed pattern.
+     * It then updates the value of the input group and focuses
+     * the next empty input after pasting.
+     */
+    onPaste = (event) => {
+        const { inputRefs, length } = this;
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text');
+        // If there is no pasted text, still emit the input change event
+        // because this is how the native input element behaves
+        // but return early because there is nothing to paste.
+        if (!pastedText) {
+            this.emitNanoInput(event);
+            return;
+        }
+        const validChars = this.getValidChars(pastedText);
+        // Always paste starting at the first box
+        validChars.forEach((char, index) => {
+            if (index < length) {
+                this.inputRefs[index].value = char;
+                this.inputValues[index] = char;
+            }
+        });
+        // Update the value so that all input boxes are updated
+        this.value = validChars.join('');
+        this.updateValue(event);
+        // Focus the next empty input after pasting
+        // If all boxes are filled, focus the last input
+        const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
+        inputRefs[nextEmptyIndex]?.focus();
+    };
+    /**
+     * Determines if a separator should be shown for a given index by:
+     * - Checking if the total length is even (no separator for odd lengths)
+     * - If even, showing a separator after the middle index
+     *
+     * @param index - The index to check for a separator.
+     * @returns {boolean} True if a separator should be shown after the given index, false otherwise.
+     */
+    showSeparator(index) {
+        const { length } = this;
+        if (length < 3 || length % 2 !== 0)
+            return false;
+        return index === length / 2 - 1;
+    }
+    /**
+     * Filters the input string to only include valid characters based on the
+     * `validKeyPattern` regex. If `allowInvalid` is true, it will also
+     * exclude special characters. The resulting array is sliced to the
+     * maximum length of the input OTP.
+     * @param str - The input string to filter.
+     * @returns {string[]} An array of valid characters.
+     */
+    getValidChars(str) {
+        const { allowInvalid, validKeyPattern, length } = this;
+        const allChars = str.split('');
+        return (allowInvalid
+            ? allChars.filter((char) => char.trim() !== '' && !this.specialCharsPattern.test(char))
+            : allChars.filter((char) => char.trim() !== '' && validKeyPattern.test(char))).slice(0, length);
+    }
+    /**
+     * Computes the validity of the input group based on the current input values.
+     * Sets the following `invalid` and `valid` states:
+     * - `invalid` is true if `allowInvalid` is true and any input value is invalid.
+     * - `valid` is true if all input boxes are filled with valid values.
+     */
+    computeValidity() {
+        const { inputValues } = this;
+        this.invalid =
+            this.allowInvalid &&
+                this.inputValues.some((val) => val !== '' && !this.validKeyPattern.test(val));
+        this.valid =
+            this.inputValues.length === this.length &&
+                this.inputValues.every((val) => val !== '' && this.validKeyPattern.test(val));
+        inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
+    }
+    render() {
+        const { disabled, el, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
+        const inputmode = this.getInputmode();
+        const tabbableIndex = this.getTabbableIndex();
+        const pattern = this.getPattern();
+        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
+        return (hAsync(Host, { key: 'f397a0775d2d961ccc9013206fae72a8d0ad90ae', class: {
+                'has-focus': hasFocus,
+                'input-otp-disabled': disabled,
+                'input-otp-readonly': readonly,
+                'nano-invalid': invalid,
+                'nano-valid': valid,
+            } }, hAsync("div", { key: 'add5fe905af87f4c9b87d29c66134ede52ff2b6b', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" })))), this.showValidity && (hAsync("div", { key: '71d38d8f343be559d187f1c5710a64733cf7ceaa', class: {
+                'input-otp-icon': true,
+                'input-otp-icon--valid': valid,
+                'input-otp-icon--invalid': invalid,
+            } }, hAsync("slot", { key: '14529ecc57a6268932bc1485f0a425bb6cb45c51', name: "validity-icon" }, hAsync("nano-icon", { key: '65669a6b4ca76011b721e76fb68b7f9bfeb87092', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), hAsync("div", { key: '3e677ab8517765759a0cc4a0aa6f0fec58767c90', class: {
+                'input-otp-description': true,
+                'input-otp-description-hidden': !hasDescription,
+                'input-otp-description-inset': this.showValidity,
+            } }, hAsync("slot", { key: 'e875d5c5d7ed8f804b9866618b7ed5e5211dd7b1' }))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return inputOtpCss; }
+    static get cmpMeta() { return {
+        "$flags$": 262,
+        "$tagName$": "nano-input-otp",
+        "$members$": {
+            "disabled": [516],
+            "inputmode": [1],
+            "length": [2],
+            "pattern": [1],
+            "readonly": [516],
+            "type": [1],
+            "value": [1032],
+            "allowInvalid": [516, "allow-invalid"],
+            "showValidity": [516, "show-validity"],
+            "inputValues": [32],
+            "hasFocus": [32],
+            "previousInputValues": [32],
+            "invalid": [32],
+            "valid": [32],
+            "setFocus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["disabled", "disabled"], ["readonly", "readonly"], ["allowInvalid", "allow-invalid"], ["showValidity", "show-validity"]]
+    }; }
+}
+let inputIds = 0;
 /**
  * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
  *
@@ -17861,7 +18596,7 @@ class IntersectionObserve {
         this.removeIO();
     }
     render() {
-        return (h(Host, { key: 'aadf019427b2d2c3020fd6e667d5932fd14aea45', class: "nano-intersection-observe" }, h("slot", { key: 'eae74417c304de7b8e377229b603d88468a5c7f5', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'c837369d760b533f7bbed5ade5994206923e6ffa', class: "nano-intersection-observe" }, h("slot", { key: 'c12806aaf721afbd10a14a3f6c23bd08217128b6', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],
@@ -18206,7 +18941,7 @@ class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
+        return (h(Host, { key: 'cace0ef58ad901ea08d057420906d95ffa2600dd', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '6133235c4eb2be34c93cb681cd612ae7d227e8eb', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -18215,12 +18950,12 @@ class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '56f5264594f6963dddbdbad7ecd6c25ae4c0732a', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'be07616305b1753d843f346420149055b59f8023', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '33c5125be511e2ed550ea4a4130ada309d6d4884', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'c7e3fa9f1272bcd57694aa7dd433f2da1ca4d4cb', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '5029cad9fb763501e8e670f3347e55e7eafbcb87', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '1438ac0d40a0ec2952cf9b66bc2f854d5b96c690', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '05dea3796c9d9e758c229f76fcb4dde2bd90fa65', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
@@ -18661,14 +19396,14 @@ class MenuDrawer {
     disconnectedCallback() {
     }
     render() {
-        return (h(Host, { key: '4ad542c84da0045168bcee1df744cb94c2a1196e', class: {
+        return (h(Host, { key: '48267091ca0646f3a1717e2dc3ab21ab3d4b9b28', class: {
                 open: this.open,
                 'secondary-open': this.secondaryOpen,
                 hide: this.hide,
                 loading: this.isLoading,
                 'has-global-nav': !!this.globalNav,
                 'nano-menu-drawer': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'b00cad9c3696b9c373e8d98fcd1f86c2c7b23aa2', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a7746088c4458802d386f1c3d092e0a386fe4bd6', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '993f550de47fc9410aa04bf98d9d076a6290637c', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: '3da3d0268df95d3080938e33f6e80d659dce1525', class: "head" }, h("button", { key: 'af104da5e67aaf06194317086daa6a5d4c008b6a', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: 'b6e85eb6690440da7ccd893ccd9feb082d7a4552', name: "light/arrow-right-to-line" }), h("span", { key: '443c2afa504892d6de2a75a126e09c484540c677', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: '275ab007d04f3bde8269f0b4927aec81d1e47ccd' }), this.slotCtrl.has('foot') && (h("div", { key: 'c0eb043b9447264d48ca65d6e51c986c05ba10eb', class: "foot" }, h("slot", { key: 'bee82590231f9cfffc15c22ba0fafb313298e232', name: "foot" }))))))));
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'f73a9c15c9760493b38ac5b199f2d374eb99ffd0', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'a2a254a08025a5d4f33ecd10fb25ee2bedddc657', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: '4c93989684795be81b332aa12638424493eda51f', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'fb7fdba72b7e211dd99020b9a78dde35c11f0c7e', class: "head" }, h("button", { key: '1829973a4d5bb9c4053bd5a5b8d7d24befc02599', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '614bca81c5086ed499a62d38540f6c107f5c779e', name: "light/arrow-right-to-line" }), h("span", { key: 'da6cbb5a0c0f0a908afac83b01322bc5bfede0b5', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'd3ddb04ad19784a71575ff50c2cbd4410b70dcb6' }), this.slotCtrl.has('foot') && (h("div", { key: '5282ecb332f91aaedf7996f1a86165656187f12a', class: "foot" }, h("slot", { key: 'c0c227384d0ec749a03c1fdfe5764923f08c2405', name: "foot" }))))))));
     }
     static get watchers() { return {
         "open": ["openChange"]
@@ -22994,7 +23729,7 @@ class NanoStepAccordion {
         }
     }
     render() {
-        return (h("nano-accordion", { key: 'd92d8997c0486e26c132793db92b12e04d46a384', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
+        return (h("nano-accordion", { key: '1edc585b390f5dd6c1fe6edaf103e096b8d02d06', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
                 step: true,
                 'step--active': index === this.activeStep,
                 'step--complete': step.complete,
@@ -23123,10 +23858,10 @@ class NanoStepBreadcrumb {
     };
     render() {
         const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
-        return (h(Host, { key: 'c4d0e767abe4ee65f8e70534844e7ff254455af0' }, h(Wrapper, { key: '6df94c5a9df7ae957b5ff243ecbe78e7c57233b3', class: "step-wrapper" }, h("ul", { key: 'ba1838191a0b888b630bfaba5125ae868f8aab38', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: '64ae2c870494d376f4bb6484e97a5217dc4be311', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '08d3dc468d594177b922ae91fb1ff02ed79d282c', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '88ef0602628d800a3517da3c06e2eea1dad5a7dd', slot: "trigger", class: "step-trigger" }, h("div", { key: '9d60be986e00fdd6814a910641cf94ef97fb2eed', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
+        return (h(Host, { key: 'e54c227339a1e973cad1889abb1828cef81061a1' }, h(Wrapper, { key: '9a9ef044e63d1cebb713c0e9184ed58ed7865a32', class: "step-wrapper" }, h("ul", { key: 'cf3ef2fa474ae023be0059434fc03f1bfeade40c', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: '18a9e9e00597e8ef15df7134a29dabb5f51fad93', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '0e174964823bc2c6e1cc0bcd4e1d320bc3e74e11', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '75863494b5e948c53b91f15e083270ac142abe61', slot: "trigger", class: "step-trigger" }, h("div", { key: '093819821dc278086f12d5f8cb008649b43b3230', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
                 '--value': '' + (this.activeStep + 1),
                 '--max': '' + this.steps.length,
-            } }, h("span", { key: '9e6eb88c9fc12f4228f55fe04cb2e1ce9a92e1f2', class: "step-progress-text" }, h("strong", { key: '5e999ae958a2c43f5d8998e9083e91b11ea9041d' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: 'ccb66003ef35b256ae8d0d34c8cad7535680d05b', class: "step-trigger-text" }, h("div", { key: '87f8a73802c33c289860b0eb530edae379fa5ebf', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '9b00c5ae99376028ec077e782f430b0346580119', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '5073cf36a3a15599df7fa3816a62e72af257ab99', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '18f15bb2439661286c019a6f20272db72a6ad1b1' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
+            } }, h("span", { key: 'da12da205c5e4942dc6b158ab4366a87b3d600c0', class: "step-progress-text" }, h("strong", { key: '15298a28fd78508485b54ed24df255087560e627' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: 'a67108bd294391381e5e9fa17e6132844eb510c4', class: "step-trigger-text" }, h("div", { key: '46906878f501008c8ceab76276d4f5b47469d9e3', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '898e4abb1800652352efe446e45c48d3673a656c', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: 'f972d82aaed693d49536862f45c268646dd8742b', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: '2b6555a0ef2743486e940d75cb3486110f88cad1' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
                 'step-item-mobile': true,
                 'step-item-mobile step-item--active': index === this.activeStep,
                 'step-item-mobile step-item--complete': step.complete,
@@ -23213,12 +23948,12 @@ class NanoTab {
         }
     };
     render() {
-        return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
+        return (h(Host, { key: 'ad80886d87f28ad3a2ae019f361662f21c6617b3', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '445b8acdf4a87b4541f8bc1b9354c91bad6d77a4', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
                 tab: true,
                 'tab--active': this.active,
                 'tab--disabled': this.disabled,
                 'tab--closable': this.closable,
-            } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
+            } }, h("slot", { key: 'a72a156f0792fb7943c46d7edc6da51d222f4285', name: "start" }), h("div", { key: 'e7c654c4efe7bafaa41fdbafaae96976f4089f67', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '65f9a3b5342dfca0a8e6ec9be289f3ad4bb5da4e' })), h("slot", { key: 'e044937dc98a2650b58f7a792e0e190de80e2d00', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'c7809dea53cb6ca1660f58f06f3a861f18950cba', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
     }
     static get style() { return tabCss; }
     static get cmpMeta() { return {
@@ -23264,10 +23999,10 @@ class NanoTabContent {
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '3118031c009c947f2a7882a8dd65556b686d1c9d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
+            } }, h("div", { key: 'cab097ece6d3473e5fc425dbde951fcaf399c5ba', part: "base", class: "nano-tab-content" }, h("slot", { key: 'b4ce04af8ea780022c5a9e63a16f1d087432a931' }))));
     }
     static get style() { return tabContentCss; }
     static get cmpMeta() { return {
@@ -23846,10 +24581,10 @@ class NanoTable {
         this.cleanUpObservers();
     }
     render() {
-        return (h(Host, { key: 'dfcda7c6604792e025f1ed4997395857ad786be3', class: {
+        return (h(Host, { key: '75c4089a6d670a16eea3fca8d079ac9a827c4cfa', class: {
                 'nano-table': true,
                 'nano-table--props-ready': this.propsReady,
-            } }, this.scrollable && (h("nano-masked-overflow", { key: '2ef0536af50f22134e4c0d295172817287c46196', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '1b9ba48be1ccf92ac46f9873ac08b43a51cfcabc', class: "nano-table__overflow" }))), h("slot", { key: 'ab86c4eab83b69cb4ba31b22ae18f9cb0c31033a' })));
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '90a1e07d2daa97047c3be1381717a8ae3b53b5e1', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'badc595c9931fb6198ab38b4e09cdf4201fcc064', class: "nano-table__overflow" }))), h("slot", { key: 'd3fd5902fccc42b3412e9cb1950b054b5a69a525' })));
     }
     static get watchers() { return {
         "compact": ["handleCompactChange"],
@@ -24921,8 +25656,8 @@ let Rating$1 = class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'cdfbe00c8ce785ad89f711c8488b514dba8f3fb6', class: "nano-more-less" }, h("slot", { key: '8c17f3540c587129feff6905e518e01f4866b90d', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'fd937a181108336345a5278b4e2e230feb13f891', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'bd7c0630e06de922c8ed48e5efc0db640594c776', name: "less" }, h("button", { key: '8c924f74b1b7939d17a9defd02ccb41ecd403257', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: '85aea064a37e2a66a31e8bab208eba423aa32a4e', class: "nano-more-less" }, h("slot", { key: 'c7288c755fa9cb24abb335158fe9ae1e116a012e', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: 'ff18caab62f14cdff9cc5953cda9d4980e6e4b6a', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '8a7a856af8fca1221c308c2a0982e09b9c9da74f', name: "less" }, h("button", { key: '33578129514a86169e642f32fb9a66d257412719', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }
@@ -25143,20 +25878,20 @@ class Rating {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h(Host, { key: 'bacb1319a8119e09eb7223396c0fd308d8f1bcf0', class: "nano-rating" }, h("label", { key: 'e96dd3dc5d27aad666c9273fb48a0dde49b05bcd', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'a50e1bb855e58080b964cde932b6e850be44cff5', name: "label" }, this.label)), h("input", { key: 'c95ba7bf46db99df309030b4e7c9a006909e47a7', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
+        return (h(Host, { key: 'b28d1a7ff7743338ff5ae18c386e49ee20f8df8e', class: "nano-rating" }, h("label", { key: '6fda8cf5da0b9ed38776ec3a9b93ec4fc02598b0', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: 'e92e2482a6aefd90bd27b5831ec75f0fb12fcd8b', name: "label" }, this.label)), h("input", { key: 'ef40cee201942dc8f0851f2ee4d785d3b1d27936', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
                 this.setFocus();
-            } }), h("div", { key: 'a04e24da1bf879b551f31b3692e990e912739643', class: "rating-wrap" }, h("div", { key: '2686f949da578a7bcdbd3043f131edccc24f0f30', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+            } }), h("div", { key: '46c610322bc3b802d822cd22bfdcf3ad32f7e4d2', class: "rating-wrap" }, h("div", { key: 'fd509ff1f80a8172c00f2b320e6f5dbfd1252676', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '890e0a8296994061f88cdfa42811ff61d1fbb2b2', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd03101004803060722fd234f3500a5f7ac6e0603', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'fad1f1de103c1451d848a215c9c7b18084f172ce', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '2e5b35988ef0b699c515fd86a5ab14b3a98f9215', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
@@ -25428,13 +26163,13 @@ class ResizeObserve {
         }
     }
     render() {
-        return (h(Host, { key: '3d1301e7d8a6c0f96188ea4dadddcc3f71a349cc', class: {
+        return (h(Host, { key: '5db8e84066e7fd3d903f19e2256844331580947a', class: {
                 'nano-resize-observe': true,
                 'content-fit-x': this.contentFitX,
                 'content-fit-y': this.contentFitY,
                 'content-nofit-x': this.contentFitX === false,
                 'content-nofit-y': this.contentFitY === false,
-            } }, h("slot", { key: '363d69b62debe81c7d3d1790d4dead42538f7118' }), !!this.notifyContentFit &&
+            } }, h("slot", { key: 'ee5842c110b25f82eacbb4ba618d33dad345e732' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
@@ -26165,30 +26900,30 @@ class Select {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '0648eef02c3e5fc9891e3aee3baa81eae2fc2b5e', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'fff4c3c510b9c343af91cd44cd31a437bbd15a78', 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 === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: '36dcb0e4ef701eaf17ddf03f8f64cf83dee35b07', ...wrapOptions, class: {
+            } }, h(FormControlWrap, { key: '57e3eca97027e9195328c5da6e10c46000ffe67e', ...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: '6adbd4bf79d59de4a8d8f20c6dc287b9f70c9e5c', ...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: 'eaf182a6e691f3490a2e26522be8daef9f3c0e58', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: 'd08b3d345fde15bd92a9d3237c9f0265b39a1cbb', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: '29eb562d57d5af570132b502652fbf0109563481', 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: 'c7135aca51ac7e0b3f23fc63b8e8fef3d5d0d4a8', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, h(FormControl, { key: 'be1a38b3b662d7cd40ce738ef9185d18dae22318', ...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: '89b7b5b75ef67513c228f230c11122333448408f', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'efd35e47435a363be382ceae43d4348479cd50b5', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: '236a63937ee3c981bbc2e4d77d72516f4d614326', 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: 'c0e2707266e76ed2714cbd91727c828e4e0e9861', 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);
             }, 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: 'c1bfe32d20443e5be164a400e5553e30488f26be', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'aad3f8699ac6e9538055437e30d040ba686b0c46', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: 'bbbc2b303f78dcdc9aaf19c78279099b389159c4' }))), h("select", { key: '87e9d612386dc3b0baf0a79b6de750d22043c967', 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: 'bfc7c0f31d962d89369ff173236bebbca134885d', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '2f2f299440d4aca0c718308ad819873cf5f71163', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '5c41abf1e6e6c7b897538beb6b4509ae5f845ce6' }))), h("select", { key: '3443483daf9d524e98cb3614f67a630b349b033f', 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 &&
@@ -26331,7 +27066,7 @@ let Slide$2 = class Slide {
         });
     }
     render() {
-        return (h(Host, { key: '3d5f03684b14b0944b06802a26955b035ae20a9f', class: "nano-slide" }, h("slot", { key: '5115d41ae13fb0980ae656c106b9105b5f14703b' })));
+        return (h(Host, { key: '599510bff6daf72dca9b1de41767aea575eae98a', class: "nano-slide" }, h("slot", { key: '911f54eb0ad7ee91d7ea358f2e581d55793416ee' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]
@@ -29310,15 +30045,15 @@ class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: '905eab94c6853e11f8103ade8a2711515a957a88', class: "nano-slides" }, h("div", { key: 'a6ca3bf953dc8ad8643b5f196bbbb4cad5696739', class: {
+        return (h(Host, { key: 'e259a3a5de2c5dc025ab6dc61c3a41e1f812f077', class: "nano-slides" }, h("div", { key: '74abbe2dd44755ae5e5c5c766e6833c74c152aa8', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: 'ebf38a42c8c0ee4a192e2c10c7e882f4953cf707', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '1a0a00d3ad6651a06fe46f1beff537f9cd483fc7', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'ac8e76e6ee701ef38a73a1f753cbf7ad30ef9c59' })), h("div", { key: 'e74cad0bd4ec8e2e15308b26550a697ff3dd4dcb', class: "ui-extras" }, h("slot", { key: '8b7b6cfb6ba0e531a8c7707f5f65cba334e8eba6', name: "ui" })))));
+            }, part: "slide-container" }, h("slot", { key: '7a0edeee40901099cc455337acad6e798041f4f1' })), h("div", { key: 'bef46a7658a4ff89d02a2feb6dbcdd64d8e965f2', class: "ui-extras" }, h("slot", { key: '2f0603645945a8e77de9252036363e770e8e424d', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -30096,7 +30831,7 @@ class Sortable {
         }
     }
     render() {
-        return (h(Host, { key: 'f9329f87a60f9b77ad917b9bbf0aa526f4779e82', class: "nano-sortable" }, h("div", { key: 'c30a6d47b7a932906b17f0cd0cec80e0c7ea38ef', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: 'a377bb437eb590b3f77d10f105b2fa09e0d21cbd' })));
+        return (h(Host, { key: 'db8dbc8b62755164c30650a9485205f8ea2c6107', class: "nano-sortable" }, h("div", { key: '0c4646d0cf095e9970787ae4a5101765f0f5fe4f', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '41e538783cb246a7ada58353374228a833b4fc4a' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -31095,12 +31830,12 @@ class Sticker {
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'd0e4e1b0cc7c63db0389ee67b999c30347f7e16b', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '6f9852e2cfeb2e203e5dde6f71e7a042a996dd86', class: {
+        return (h(Host, { key: '6626d945b580e7e23d940db522958250e89261ad', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '1e4b7f859218a5ed2256f7f860dcffa4b1b8f5be', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: '1e54d0ebe57b52c95a64acbb6d46f8c9d9778dd3', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'e8359edd6c73c5006ff1c90a91ecafad07e5c915' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '4f7cd61f38b78433296a9708ddbd702d97cf2435', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: 'a88a8500ee1ea99324f9b1b7390675486035496c' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -31389,10 +32124,10 @@ class Tooltip {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: '94758bb18228b14884cf2be79228e554de84013f', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '45589386e68d89c21abbb50513678152e8bce9d1', onSlotchange: this.handleSlotChange }), h("div", { key: '6a76c101c35d45458f0a680753a381cc95631b87', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'd3b2cc9c9018c9a0a5dc4cef256c8b9c568cd0b4', part: "base", ref: (el) => (this.tooltip = el), class: {
+        return (h(Host, { key: '30c71d884cf8fc1c2e97092dad0fb5d6695c77a8', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'b7e7893c178d99abeb0f1e5a35892fddc8ab302a', onSlotchange: this.handleSlotChange }), h("div", { key: '83aae47d9745dcce88f6119ffa63b3bea809dc17', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'f5cd2aa11ef281358d11057c866b298202398fc2', part: "base", ref: (el) => (this.tooltip = el), class: {
                 tooltip: true,
                 'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '1c51cdc6a7ec88107e3290b0b9750198e7176c20', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '00f090eee000e6bba713dc21a1d53c348eb94a76', class: "tooltip-arrow", "data-popper-arrow": true })))));
+            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '0dc5a5f28b439406f2d19dc4822b221bbb65a9e8', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: 'd196bcffcfd4b26cf085ec21cc7965a369dd55ab', class: "tooltip-arrow", "data-popper-arrow": true })))));
     }
     static get watchers() { return {
         "content": ["setLabel"],
@@ -31446,6 +32181,7 @@ registerComponents([
   IconButton,
   Img,
   Input,
+  InputOTP,
   IntersectionObserve,
   MaskedOverflow,
   Menu,