@nanoporetech-digital/components 8.0.0-alpha.7 → 8.0.0-alpha.9

package/dist/esm/nano-date-picker_2.entry.js

@@ -1,12 +1,12 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-CX_Hk6ss.js';
-import { h, t as transformTag } from './renderer-ZmozgREV.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-q0XK-YfO.js';
+import { h, t as transformTag } from './renderer-BjGZGWn8.js';
 import { i as isEqual, g as getViewOfMonth, b as inRange, D as DaysOfWeek, p as parseISODate, d as addDays, s as startOfWeek, e as endOfWeek, f as setMonth, h as startOfMonth, j as endOfMonth, k as dateClamp, l as setYear, a as printISODate } from './date-utils-BZYdjI1P.js';
-import { c as closestElement } from './dom-COiksOVZ.js';
+import { c as closestElement } from './dom-C8mB0MAq.js';
 import { a as debounceEvent } from './throttle-C93FMm2Z.js';
-import { F as FormControlWrap, a as FormControl } from './form-control-dh9YtDPa.js';
+import { F as FormControlWrap, a as FormControl } from './form-control-COOIq-Al.js';
 
 const localization = {
     buttonLabel: 'Choose date',
@@ -366,11 +366,11 @@ const NanoDatePicker = class {
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '1793ae3627c1af938416338594a3607f7a686706', class: "nano-date-picker" }, h("div", { key: '2f50b7959a5787581f0e824f7c5e433ca3985784', class: "duet-date" }, h("div", { key: '805511e4311e996c3729a30da4b66a29288fc137', class: {
+        return (h(Host, { key: '325b63a7956c84802d783fa95086b66df5fbfdc2', class: "nano-date-picker" }, h("div", { key: 'be1ef3571202d7074ddda34a299774b1e9a8a96c', class: "duet-date" }, h("div", { key: '52583e20b54f39ef154e51e200f09719654555c9', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '333ed28590d71bddb694c6ba8a6bd4056012c209', class: "duet-date__dialog-content" }, h("div", { key: '62235540545d46423a368a25518079fee3d29b0f', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '5154197320634e2fc9d59cecc6ab83f5e6922c58', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '04d15f2d9b914c5334d5765b7279f2bcbeb0acf0' }, h("h2", { key: '56e76ca762e7fda6db0531435d0e48c511d7cc31', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'ef4ff1b95cc348a308e119246cd9a617438ec44c', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '7f10da9f614ddb58f89fa6d5964817295feeed45', class: "duet-date__select" }, h("select", { key: '58d4f452c9ffdf441bb42a8e044f2d17382662e9', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'd7fb131ba8f73e1a8f03711971115ba9f26798e5', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ed65bb461b54b9862fd58b5d21de5cdf52da1a8a' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '1b8ecb5652cc2a0daba3ff9d2cc14dca8f8055a9', name: "light/chevron-down" }))), h("label", { key: '2eb441ddd3ada49165f41bec138dcddd3cf8fc28', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '12deefa0da5a17e8a81ee733eb5d76a7384409fe', class: "duet-date__select" }, h("select", { key: 'b3a3a05d0fab4c69eb72f1ca4aa603fa0856fe37', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '960b6cee86d795dd88d015aff93318dc9876e628', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e14f14c75613c197001240b965358fe3aa6a1cb3' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'a74f16678cd2f444a881a19e55774988444f0515', name: "light/chevron-down" })))), h("div", { key: 'c20d467896edad680eef48d40a22de5657da0e75', class: "duet-date__nav" }, h("button", { key: 'f3d8bf7f048d04796b450f6123b6e90b45b37655', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'd115ff718668dfa3dd9e05733baeb21bc179a5a5', name: "light/chevron-left" }), h("span", { key: 'd5ba77a2eb0a81a469973d7873e10beb6683c02f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9d745902f2d971b2f5d0ad467274c0a180a5d173', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '5a5fabb015800b28cc276a8f69701e347bf8a1d5', name: "light/chevron-right" }), h("span", { key: '418d78e367dcc1cf0f85002a8f975920d57521f2', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '89e4f57750c36ab9b616b961c0524a554d95ec77' }, h(DatePickerMonth, { key: 'e6c173dedbe03b267a1536403822415a968dea65', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '9ff8a1baa94f6502a4691cbd69c45808ee94eaa1', class: "duet-date__dialog-content" }, h("div", { key: 'ea56053783abfe899d19dffee3d0709decf34586', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '53fde77f3ae470c6d5271ff901557876f9f082db', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '0dd5d2f41fa1acc596b4d0b83644744607427295' }, h("h2", { key: 'fbc33424f5048889a766afec0dec6408b8d107e4', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'b2f293e2eecaad9c2070fb0b0612332b7c60bb13', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e3641b3731fd4387c5623590d16e7f566f6f7273', class: "duet-date__select" }, h("select", { key: 'a7d655e5ed0e5f30a4acb1fc6e5fc0b6f4190211', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'd48f0c2a4ba4f25a5fbe2c524119d53c852225fe', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c5a052d1d5d627efc147fa3c6d815aa58a88a658' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '75a671f7f3b5e99db8292448a1213057522cb54a', name: "light/chevron-down" }))), h("label", { key: 'd75e61f7a398d8a59eea903ed7579e0e2488a588', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7f53843dbfd10dad14ab29ba36fa132c411b7181', class: "duet-date__select" }, h("select", { key: '95c128dd44bc337d21f93acb263db9ab31a7a85d', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '3bed714eb0f65a52f50686c7bc1b66c53be8ffc9', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '925804c72b36ad5092babc990660505d3841dca9' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'b8a54c98c40d20ce85562d0a3de40aa4dde2ff11', name: "light/chevron-down" })))), h("div", { key: 'd9525a0266c3abf1c0248fc8defa85f49a1a93d4', class: "duet-date__nav" }, h("button", { key: '9c7390ebc74ae31f8687c764dbe918f50316d93c', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '0cc15df22222c3c7c944b12cd6518f200c15891c', name: "light/chevron-left" }), h("span", { key: 'e9a376ce2f4aa7e180de15388ee3cb657e1968ac', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6b49ef9d261384853bf5982ed212e33f110d86a7', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '48fd8c193aa842fcc610edccc205124d7b955230', name: "light/chevron-right" }), h("span", { key: '639bf8f2367d1d4b077cf1dfb2e8144b49dc234d', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '88459567f3cd03189554d95d691ac51058905396' }, h(DatePickerMonth, { key: '79561fa4051c802e33a74cafc11c212c399d20e9', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]
@@ -378,7 +378,7 @@ const NanoDatePicker = class {
 };
 NanoDatePicker.style = datePickerCss;
 
-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  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n  clip-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  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-input .form-ctrl__more.sc-nano-input, .has-error.sc-nano-input .form-ctrl__more.sc-nano-input {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--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] .form-ctrl__helper.sc-nano-input, [disabled]).is-invalid.sc-nano-input-h .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):not(.is-valid) .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}";
+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  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n  clip-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  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-input .form-ctrl__more.sc-nano-input, .has-error.sc-nano-input .form-ctrl__more.sc-nano-input {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--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] .form-ctrl__helper.sc-nano-input, [disabled]).is-invalid.sc-nano-input-h .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;
 const Input = class {
@@ -507,7 +507,9 @@ const Input = class {
      * String to place within a label element. Alternatively you may use a label slot.
      */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -944,18 +946,18 @@ const Input = class {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: '1601bf765681a833b22c05294a1c8d9b5c6be5ee', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '87ffe8828b64535a10140feecfc75ff5fba354f2', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': this.hasValue(),
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-input': true,
-            } }, h("div", { key: '3db99291d328de9684137597706b79e4f24b65e2', style: { width: '100%' } }, h(FormControlWrap, { key: 'df525275b5c35b9ae3fdc793766a9af759740076', ...wrapOptions, class: {
+            } }, h("div", { key: '88cf2db24e47049dd5ef7d45b41614b821a6dd5f', style: { width: '100%' } }, h(FormControlWrap, { key: 'c50c5abfb6c8e3b64c151cca611ba83d6949dfff', ...wrapOptions, class: {
                 'has-helper': this.hasHelperSlot,
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
-            } }, h(FormControl, { key: '8f25ff2340431b2ea29d5063877ad376ec229758', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
+            } }, h(FormControl, { key: 'fc9d46333893136293bbdac44372ba3863a9d864', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el), showInlineError: this.showInlineError, endSlot: this.showPicker &&
                 this.type === 'date' &&
                 !this.readonly &&
                 !this.disabled && [
@@ -970,10 +972,10 @@ const Input = class {
                         this.value = e.detail.value;
                         this.pickerDropdown?.hide();
                     }, min: this.min, max: this.max, "is-modal": true, selectedDate: this.value || this.initialPickerDate || undefined }))),
-            ] }, this.type !== 'textarea' && (h("input", { key: '97734d0168a049af1b22e4517db5e58d25a75b13', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: 'b1780aa8cf51d8b7440825d461d89e8746fcd96d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+            ] }, this.type !== 'textarea' && (h("input", { key: '5aa8c0b68e55c5afb3f9e9676ee75bd53a242af2', id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onClick: (e) => e.preventDefault(), onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (h("textarea", { key: '571c808ea1f623b996e17d287eab361444da2fa3', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
                 'input__native-ctrl': true,
                 input__resizable: this.resize === 'true',
-            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: 'fa333ee624b824af60a8a79d09720e231e8d455c' }))));
+            }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), h("slot", { key: '10a61c2bbda41eac07546a6ad6a83b2b767489e8' }))));
     }
     static get watchers() { return {
         "datalist": ["setDataListOpts"],

package/dist/esm/nano-details.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, a as Host } from './index-CX_Hk6ss.js';
-import { h } from './renderer-ZmozgREV.js';
-import { H as HasSlotController } from './slot-CjAtXEOo.js';
+import { r as registerInstance, c as createEvent, a as Host } from './index-q0XK-YfO.js';
+import { h } from './renderer-BjGZGWn8.js';
+import { H as HasSlotController } from './slot-CUINJXSo.js';
 
 const detailsCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";
 

package/dist/esm/nano-dialog.entry.js

@@ -1,14 +1,14 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-CX_Hk6ss.js';
-import { h } from './renderer-ZmozgREV.js';
-import { M as Modal } from './modal-CH7Vma1I.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-D4n69pGx.js';
-import { H as HasSlotController } from './slot-CjAtXEOo.js';
-import { C as ComponentStore } from './component-store-DMqr8_D3.js';
-import { g as getTabbableElements } from './tabbable-CZtanbA9.js';
-import './dom-COiksOVZ.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-q0XK-YfO.js';
+import { h } from './renderer-BjGZGWn8.js';
+import { M as Modal } from './modal-DmA7xt58.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-N_WMYKm7.js';
+import { H as HasSlotController } from './slot-CUINJXSo.js';
+import { C as ComponentStore } from './component-store-6lIsMtwd.js';
+import { g as getTabbableElements } from './tabbable-DqhO0wy7.js';
+import './dom-C8mB0MAq.js';
 import './throttle-C93FMm2Z.js';
 
 const dialogCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-neutral-75);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";

package/dist/esm/nano-dropdown_2.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-CX_Hk6ss.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-q0XK-YfO.js';
 import { f as focusInContainer, g as getActiveElement } from './active-element-C1pBwzyj.js';
 import { P as Popover } from './popover-D1cBIHdr.js';
-import { a as getNearestTabbableElement, g as getTabbableElements } from './tabbable-CZtanbA9.js';
-import { t as transformTag, h } from './renderer-ZmozgREV.js';
-import { g as getDirectChildren } from './dom-COiksOVZ.js';
-import { g as getTextContent } from './slot-CjAtXEOo.js';
+import { a as getNearestTabbableElement, g as getTabbableElements } from './tabbable-DqhO0wy7.js';
+import { t as transformTag, h } from './renderer-BjGZGWn8.js';
+import { g as getDirectChildren } from './dom-C8mB0MAq.js';
+import { g as getTextContent } from './slot-CUINJXSo.js';
 
 const dropdownCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:var(--nano-spacing-sm) 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l1);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 

package/dist/esm/nano-feature-box.entry.js

@@ -0,0 +1,17 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { r as registerInstance } from './index-q0XK-YfO.js';
+
+const featureBoxCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
+
+const NanoFeatureBox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The position of the image of the feature-box (`start` being left on a l2r page) */
+    imgPosition = 'start';
+};
+NanoFeatureBox.style = featureBoxCss;
+
+export { NanoFeatureBox as nano_feature_box };

package/dist/esm/nano-field-validator.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, B as Build, a as Host } from './index-CX_Hk6ss.js';
-import { c as createStore } from './index-VZJF9v1K.js';
-import { t as transformTag, h } from './renderer-ZmozgREV.js';
+import { r as registerInstance, c as createEvent, g as getElement, B as Build, a as Host } from './index-q0XK-YfO.js';
+import { c as createStore } from './index-wpeqhSWn.js';
+import { t as transformTag, h } from './renderer-BjGZGWn8.js';
 
 const FieldValidator = class {
     constructor(hostRef) {

package/dist/esm/nano-file-upload.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-CX_Hk6ss.js';
-import { h } from './renderer-ZmozgREV.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-q0XK-YfO.js';
+import { h } from './renderer-BjGZGWn8.js';
 
 const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";
 
@@ -67,7 +67,9 @@ const FileUpload = class {
     _label = '';
     /** String to place within a label element. */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -229,7 +231,7 @@ const FileUpload = class {
     checkFileType(type) {
         if (!this.accept)
             return true;
-        return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
+        return (!!type && this.accept.match(type) && this.accept.match(type).length > 0);
     }
     validate = () => {
         this.errorMessage = '';
@@ -386,7 +388,8 @@ const FileUpload = class {
                     this.onDragStop(e);
                 }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
                 ? this.fileList[0].file.name
-                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
+                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled &&
+                this.showInlineError &&
                 (this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (this.canChangeFileList) {
                         this.publicInputEl = input;
@@ -414,7 +417,7 @@ const FileUpload = class {
         ];
     };
     render() {
-        return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
+        return (h(Host, { key: 'c6fc291c7ac3c990d5304a2589c7dd1a0193333e', class: "nano-file-upload" }, h("div", { key: '12fd1e6551fe6ff6e1eb6a84000a21e526c61c36', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,

package/dist/esm/nano-footer.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, g as getElement, h, k as getAssetPath } from './index-CX_Hk6ss.js';
+import { r as registerInstance, g as getElement, h, k as getAssetPath } from './index-q0XK-YfO.js';
 import { a as addGlobalStylesheetToShadow } from './style-xLaX004n.js';
 
-const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::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  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::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  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 912px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
+const footerCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::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  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::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  }:host {\n  --col-gap: var(--nano-spacing-l1-default);\n  --icon-gap-md: var(--nano-spacing-md);\n  --icon-gap-sm: var(--nano-spacing-sm);\n  --vertical-padding: var(--nano-spacing-l1-default);\n  --horizontal-padding: 0;\n  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n  display: block;\n}\n:host .footer {\n  container-type: inline-size;\n  container-name: footer-container;\n  display: flex;\n  flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-md);\n    --col-gap: var(--nano-spacing-l);\n    --vertical-padding: var(--nano-spacing-md);\n  }\n  :host .top-start,\n  :host .top-center,\n  :host .top-end {\n    --header-margin: 0 0 var(--nano-spacing-md) 0;\n  }\n}\n@container footer-container (max-width: 1023px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l);\n  }\n}\n@container footer-container (max-width: 1346px) {\n  :host .top,\n  :host .middle,\n  :host .bottom {\n    --horizontal-padding: var(--nano-spacing-l1-default);\n  }\n}\n:host .upper {\n  border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n  background-color: var(--nano-color-basic-black);\n  color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n  display: grid;\n  gap: var(--col-gap);\n  margin: 0 auto;\n  max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n  grid-template-columns: repeat(3, 1fr);\n  padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n  grid-template-columns: repeat(2, 1fr);\n  padding-inline: var(--horizontal-padding);\n  padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n  color: inherit;\n}\n:host .middle-center a:hover {\n  color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n  flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n  align-items: center;\n}\n:host .middle-start {\n  display: flex;\n  justify-content: flex-start;\n}\n:host .middle-center {\n  display: flex;\n  justify-content: center;\n  gap: var(--icon-gap-md);\n  flex-wrap: nowrap;\n}\n:host .middle-end {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 20rem));\n  gap: var(--icon-gap-sm);\n  justify-content: end;\n}\n:host [slot=middle-end] {\n  inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n  font-weight: var(--nano-font-weight-normal) !important;\n  font-size: var(--nano-font-size-xs) !important;\n  line-height: var(--nano-line-height-normal) !important;\n  letter-spacing: var(--nano-letter-spacing-loose) !important;\n  margin-block: 0 !important;\n}\n:host .bottom-end {\n  display: flex;\n  justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n  --input-font-size: var(--nano-font-size-2xs) !important;\n  max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n  :host .top {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(2, auto);\n  }\n  :host .top-end {\n    grid-row: 2;\n    grid-column: 1/-1;\n  }\n}\n@container footer-container (max-width: 912px) {\n  :host .middle,\n  :host .bottom {\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr;\n  }\n  :host .top {\n    display: flex;\n    flex-direction: column;\n  }\n  :host .middle-center {\n    flex-wrap: wrap;\n  }\n  :host .middle-end {\n    grid-template-columns: minmax(0, 6.6rem);\n  }\n  :host .bottom {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n  }\n  :host .middle-start,\n  :host .middle-center,\n  :host .middle-end {\n    justify-content: center;\n  }\n}";
 
 const NanoFooter = class {
     constructor(hostRef) {

package/dist/esm/nano-global-nav.entry.js

@@ -1,14 +1,14 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { g as getElement, r as registerInstance, c as createEvent, a as Host, k as getAssetPath } from './index-CX_Hk6ss.js';
-import { h } from './renderer-ZmozgREV.js';
+import { g as getElement, r as registerInstance, c as createEvent, a as Host, k as getAssetPath } from './index-q0XK-YfO.js';
+import { h } from './renderer-BjGZGWn8.js';
 import { a as algoliasearch } from './algoliasearch-lite.esm.browser-C1SNUAIj.js';
 import { d as debounce } from './throttle-C93FMm2Z.js';
 import { a as addGlobalStylesheetToShadow } from './style-xLaX004n.js';
 import { s as searchInsight } from './search-insights-8OL2oeQN.js';
 
-const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;background-color:var(--main-menu-bar-bg-color);min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
+const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
 
 const MIN_SEARCH_LENGTH = 3;
 const GlobalNav = class {
@@ -125,6 +125,14 @@ const GlobalNav = class {
         this._mainMenuBar = el;
         this.addMainmenuRo();
     }
+    /**
+     * Manually triggers the main menu bar resize behaviour.
+     * This can be useful if you append new children to the global-nav
+     */
+    async triggerResize() {
+        this.shouldResize = true;
+        this.breakpoint = 0;
+    }
     shouldResize = true;
     breakpoint = 0;
     breakpointChanged() {
@@ -470,20 +478,20 @@ const GlobalNav = class {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '66132ed8841605602bff8c2c750a657ec4d6d83a', class: {
+        return (h(Host, { key: '00499c2d65244ee4bba6b85c830c7f586ac3dbb9', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: 'c8dfcf4b405c72a14f576fb7b14ce41e8ff49b83', class: {
+            } }, h("div", { key: '56a6a9c2521b37bd2273ca8919bf74b572b5ca22', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '741e6dc6df0253450f65e792f45fe2a337bb007d', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: 'b8d197424ed2d4dff32234457b7836507d9777ba', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '36ef3c9a323078bfbf4f28682afd4b33475c6d1d', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'bc4b0680aa33d9084668eaa40ca867cdd039375b', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '03a2d6fed3ac78527aefb80a881f270b6fad48a2', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b1fb1192dd02f22944f40a772ffa8a88ba39e8c', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '569277672e49d95702583537c90db8de51d89a35', name: "overflow" }))), h("div", { key: '367e4bfffe6a8359bf49e6a4ea7a69dfdd20e6af', class: "gn__menu-bar-wrapper" }, h("div", { key: 'aca6cb95a4b03c46509cfd6d0a55e722976200e9', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '8c56fcfde4d896b30a277a00f79de3dfb75d93ef', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'fb8ca915d6460ee871a0a357b8a25d2e720620ac', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '96962d7ccd0d55f5c054dae0e8480398e7ea1415', name: "logo" }, h("a", { key: 'dcfa5d446ef38afb07285172dd5c0269da604d44', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: '8a5c53acab83acf5055bbb893400bdee271f55e2', name: "overflow" }))), h("div", { key: '83b09941ac6af91ed7eee1537597bb73d0be8f78', class: "gn__menu-bar-wrapper" }, h("div", { key: '65c85c1b34a5c3e687797ac88bc480356a348a99', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '7ebee46ce5c2e5b5c5226ebefb082c64cc54aa61', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'c8d58d9ed7c74d7044a42544a638520efa199a84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '1239a8949b63a740eca77ddf9d2a894571c1099c', name: "logo" }, h("a", { key: 'dd3c247f271d0c62aca93033d9ae5f9f1580be61', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'c4e2a7166c5766eede74e6f9e5763e157c47ac74', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'e6bb457db190019f21c1c712bb8c9bab5abec91b', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: 'd46c596a07189f129a1644118560590e70101a2b', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '00df8fe73a5c1e5b0e3263ee584549c1b450675f', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'b03a0c3f58a7a50939ec09258dda85a49157cf48', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '367ed61df9546497f9cef04d833e86f59389f48a', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: 'd8013a6f1cd8953bc63ba6f518367a4b278197bd', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'f8704085d6b7013c96ea922d783e4117fdd1a085', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '9b056f95508275dd70aa7626396795ab348beb02', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '8ae5f8986cfa43e035570c0af6e01b63d2a41ec3', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '6026bb1da1649da1bfa8fdd0aca64637768e264d', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '7a662aeeae84bea4e73a907c185933ef40239061', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'e047a10dcabdde6ea485f08a03f3b92d12109846', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '94f69085cc0aad1a16cd37c34edb08bec7ddfa07', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
                 this.handleSearchTermChangeEvent(e.detail.value);
-            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'fe62a269a2f3ca318ad1e071404f693c9540317b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '87d39b1dc2be07a66b546ba53eea56351bb103ec', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'fade49b478eddeb181f332b8db31b0f88c98305f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'e7c946dc5ec1ee76d115fd2575b1288f95d71c43' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+            }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'cbf4fe8934165e90ea788e51994471120886343b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '066d8efa608ce3de3f55c0d4acc9db4c236e8e79', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '2cf9e1520de0e89ced9eee012990034b4602cfe5', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '76da20f849a0d244a3127c937a08ee0e06381922' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
             this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
                     searchInsight.sendClick({
                         index: this.activeIndex.index,
@@ -493,10 +501,10 @@ const GlobalNav = class {
                         positions: [i + 1],
                     });
                 } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-            h("nano-option", { key: '74852e060130852064b4987f1de0c8f0fa2a395e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-        ]))))), h("div", { key: 'e66b10d8ce1de533d772bfd66bf7c73511f338ff', class: "gn__cart" }, h("nano-icon-button", { key: '47b8fc7ad91f5ea1048a670407ad602d29eb347f', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '75c8ffb6264bd4a390ad77d15c408105d6f77393', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
+            h("nano-option", { key: '59565a179d237c35d5528e4527b92372d2088b18', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+        ]))))), h("div", { key: '33cc9bf94208059a733ef7c3abf2fda237f7193c', class: "gn__cart" }, h("nano-icon-button", { key: '62158360ce5c519c5d49246897cd3768831bea60', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '668b68f55175618acfdbf787373fdc05ca6c6586', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("div", { key: '798ee16df74983e3d5689639f3320198bd1fe14d', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: 'a51edbf9c6bc9b0e34e207e21b4341704032e82f', part: "site-search-results" }, h("slot", { key: '4ae65a7bc4d8897d95e43692b87830cf9f9d8a8f' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '46f38c9e68b64668a7dc28cf98ae772bae059fb5', part: "site-search-results" }, h("div", { key: '5be5030d0eaaa992f334e818be155683b7f282e6', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'b144415e3e26914d026c403052d65237c693db2a' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/esm/nano-grid-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { r as registerInstance, h } from './index-CX_Hk6ss.js';
+import { r as registerInstance, h } from './index-q0XK-YfO.js';
 
 const GridItem = class {
     constructor(hostRef) {