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

package/dist/components/drawer.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './sticker.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const drawerCss = ":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{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-neutral-75);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
+const drawerCss = ":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{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-neutral-75);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
 
 const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
     constructor() {

package/dist/components/grid.js

@@ -129,7 +129,7 @@ function getHostChildren(node) {
     }
 }
 
-const gridCss = ":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{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--grid-align-items:start;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;align-items:var(--grid-align-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}";
+const gridCss = ":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{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:start;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;align-items:var(--grid-align-items);justify-items:var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -295,7 +295,7 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement$1 {
         this.constructSizeArray();
     }
     render() {
-        return (h$1(Host, { key: '410e2e3fce3867216adb0f9bf0501f8d40514bce', class: "nano-grid" }, h$1("div", { key: '424f6da1b39d37ef70912e87e5d61320b5ff8d11', part: "grid", class: "grid", "cache-key": this.cacheKey }, h$1("slot", { key: '051bdae40a3d63dfdb744a980c74a42c2ac9c05f' })), this.showHelper && (h$1("div", { key: 'b24395cdacf9d7ba3a15b1a9b064a2a97f3afac1', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h$1("div", { class: "grid__helper-item" })))))));
+        return (h$1(Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, h$1("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, h$1("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (h$1("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h$1("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],

package/dist/components/input.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
@@ -142,7 +142,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
      * 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;
@@ -581,18 +583,18 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             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 && [
@@ -607,10 +609,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                         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/components/masked-overflow.js

@@ -320,7 +320,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
         }
     }
     render() {
-        return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
+        return (h(Host, { key: 'ce255683796d356286e4c9cbd7f7ea34db77190b', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'd1ed2c18f2b317721e2cab42694a1f203d5d807a', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -329,12 +329,12 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e1acd4b76844e48ef2700500977fcc227323fa92', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '30e8801e0b1ba96675ab129e5371eb6e1edff420', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '494da67346cf9ec3217eb46aad8e0bbfca7e5842', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '98e0cc7a8b0ab82440b0110e8f4d018b02612901', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '9f1622b178b5cfcf0c44cacb9f5dd3465306b9f8', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'd11134d63b8a733b7d9e0e74283eb463be032c82', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '2630de597a4c38e555eb95dfc19033a517ccdee2', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/components/nano-animation.js

@@ -1212,7 +1212,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
+        return (h(Host, { key: '566f725817c91b577fc31a6eea9d5baecf3b481e', class: "nano-animation" }, h("slot", { key: '968e1c43d7e3a73d0662f8595ad08c3fa1a44044', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }

package/dist/components/nano-breadcrumb.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './menu.js';
 import { d as defineCustomElement$2 } from './nav-item.js';
 
-const breadcrumbCss = ":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  }/**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n:host {\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n  container-type: inline-size;\n  display: block;\n}\n\n.breadcrumbs {\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n\nol,\nnano-menu::part(base) {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n\nli:not(.return-only li)::after,\nnano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n\na.link {\n  color: var(--text-color);\n}\n\na:not(.link) {\n  color: var(--text-color-secondary);\n}\n\na:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n\na.link:hover {\n  color: var(--text-color-hover);\n}\n\na.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n\n.breadcrumbs__dropdown {\n  inline-size: 100%;\n  display: none;\n}\n.breadcrumbs__dropdown[open]::part(trigger) {\n  box-shadow: var(--nano-shadow-l1);\n}\n.breadcrumbs__dropdown[open]::part(panel) {\n  box-shadow: var(--nano-shadow-l1);\n}\n\n.trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n.trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n.trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n.trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n\n.trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n.trigger-icon--open {\n  transform: rotate(180deg);\n}\n\n@container (width < 768px) {\n  .main {\n    display: none !important;\n  }\n  .breadcrumbs__dropdown {\n    display: block !important;\n  }\n  nano-menu::part(base) {\n    flex-direction: column !important;\n  }\n  nano-nav-item::after {\n    display: none !important;\n  }\n  .trigger-button_label::after {\n    display: inline-block !important;\n  }\n  .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2) !important;\n  }\n}";
+const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-1000);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;height:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
 
 const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
     constructor() {
@@ -20,31 +20,64 @@ const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb e
     /** Array of breadcrumb items to render */
     breadcrumbs = [];
     isOpen = false;
-    componentWillLoad() {
-        // add global styles to shadow DOM
-        if (Build.isBrowser)
+    isOverflowing = false;
+    mainRef;
+    componentDidLoad() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
             addGlobalStylesheetToShadow(this.el?.shadowRoot);
+        }
+    }
+    componentDidUpdate() {
+        if (Build.isBrowser) {
+            this.checkOverflow();
+        }
+    }
+    connectedCallback() {
+        if (Build.isBrowser) {
+            window.addEventListener('resize', this.checkOverflow);
+        }
+    }
+    disconnectedCallback() {
+        if (Build.isBrowser) {
+            window.removeEventListener('resize', this.checkOverflow);
+        }
     }
+    checkOverflow = () => {
+        if (!this.mainRef)
+            return;
+        const containerWidth = this.el.clientWidth;
+        const contentWidth = this.mainRef.scrollWidth;
+        const shouldOverflow = contentWidth > containerWidth * 0.9;
+        if (this.isOverflowing !== shouldOverflow) {
+            this.isOverflowing = shouldOverflow;
+            if (this.isOverflowing)
+                this.isOpen = false; // Reset dropdown state when overflow occurs
+        }
+    };
     render() {
         const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
-        // if we have a return breadcrumb, we only want to show that
         if (returnBreadcrumb) {
             return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
         }
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
+        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
-            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));
+            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
+                return: breadcrumb.return,
+                link: !!breadcrumb.href,
+            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
     }
     static get style() { return breadcrumbCss; }
 }, [1, "nano-breadcrumb", {
         "breadcrumbs": [16],
-        "isOpen": [32]
+        "isOpen": [32],
+        "isOverflowing": [32]
     }]);
-const BreadcrumbList = ({ breadcrumbs, className, }) => (h("ol", { class: `breadcrumbs ${className}` }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
+const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/nano-checkbox-group.js

@@ -54,7 +54,8 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
      * A collective label for children controls
      */
     get legend() {
-        if (!this._legend.endsWith('*') && this.nativeCbs?.find((cb) => !!cb.required)) {
+        if (!this._legend.endsWith('*') &&
+            this.nativeCbs?.find((cb) => !!cb.required)) {
             return this._legend + ' *';
         }
         return this._legend;
@@ -99,18 +100,14 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
      * @returns `{ isValid: boolean, errorMessage: string }`
      */
     async reportValidity(validateFirst) {
-        return new Promise((resolve) => {
-            if (validateFirst) {
-                this.customValidate();
-                this.showInlineValidation();
-            }
-            setTimeout(() => {
-                resolve({
-                    isValid: !this.invalid,
-                    errorMessage: this.errorMessage,
-                });
-            }, 50);
-        });
+        if (validateFirst) {
+            this.customValidate();
+            this.showInlineValidation();
+        }
+        return {
+            isValid: !this.invalid,
+            errorMessage: this.errorMessage,
+        };
     }
     /**
      * Invalidate the field and show a custom error message.
@@ -321,7 +318,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
     // stencil hooks
     componentWillLoad() {
         this.handleValueChange = this.handleValueChange.bind(this);
-        this.handleValueChange = debounce(this.handleValueChange, 1);
+        // this.handleValueChange = debounce(this.handleValueChange, 1);
         this.showInlineValidation = debounce(this.showInlineValidation, 10);
         this.handleDisabledChange();
         this.handleSlotChange();
@@ -344,14 +341,14 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (h(Host, { key: 'b6d81d374260c8cb97dfc1557238c20945b44632', class: this.checkboxTypes }, h("fieldset", { key: 'fa058ccca23a91b369c659ff442585de43a4333d', disabled: this.disabled, class: {
+        return (h(Host, { key: '15fc5c86bc5db9189119af9c59b5b406fe5b6e22', class: this.checkboxTypes }, h("fieldset", { key: 'b3d7acc9c452fefca51966fa2a88d755f338b206', disabled: this.disabled, class: {
                 cbgroup: true,
                 'has-error': this.showErrorMsg && !!this.errorMessage,
                 'has-helper': this.hasHelperSlot,
-            } }, h("legend", { key: '429737fad96eef6af343c5e978a4642a599ea4a6', id: legendId, class: {
+            } }, h("legend", { key: 'd4aef86c845f730e2a11696a4347da6c1e7771d8', id: legendId, class: {
                 cbgroup__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, h("slot", { key: 'd592da5791f7e830c57aec7c62c01b32326b5a34', name: "legend" }, this.legend)), h("div", { key: '0bb0a2206a13bb9f773857b4ac897bfffb75a741', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '23f668b5fa4a1d23f39ea49998ae75767df15624' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: '1e15d0bb57352fb8cd7a3a746dd5adb8bb979819', class: "cbgroup__more", id: moreId }, this.showInlineError ? (h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), h("div", { key: 'e23596644945fafd2802bf1ac8958a314a076bc8', class: "cbgroup__help" }, h("slot", { key: 'd6df38d9ceaa915364a20dc29d8a1457b071c6ef', name: "helper" })))))));
+            } }, h("slot", { key: 'a31964559fc797ee445b9e38633b7cc2c3d30286', name: "legend" }, this.legend)), h("div", { key: 'bcfad3c07ebcefc2e5cc0bb7ac5c23712ae76284', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '7222f411ed5c38a520aff17452fe4da6e84c80d3' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: '6a31f268047242b78861057902d06ecaf4e7e0c1', class: "cbgroup__more", id: moreId }, this.showInlineError ? (h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), h("div", { key: '2b9f59ce901eddbe7b40cf13bdf0276b4522dc6e', class: "cbgroup__help" }, h("slot", { key: '92df785a50cfe52cafe741747e65b56d2a451211', name: "helper" })))))));
     }
     static get watchers() { return {
         "value": ["handleValuePropChange"],

package/dist/components/nano-data-table.js

@@ -1824,7 +1824,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
             h$1(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (h$1("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h$1("span", { class: "n-loader-skeleton" }, h$1("span", null, "Content loading")) })))))))), h$1("tr", { hidden: !!this._loading || !!this.blocks.length }, h$1("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h$1("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => (h$1("span", { class: "n-loader-skeleton" }, h$1("span", null, "Content loading"))) })))))))), h$1("tr", { hidden: !!this._loading || !!this.blocks.length }, h$1("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),

package/dist/components/nano-date-input.js

@@ -413,10 +413,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'd584003b7188229e35c59048e46b0c2be1068987', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '88ef9423db0ed1e11b5ccad2c75a0c9d0f9b9d29', class: "date-field" }, h("nano-input", { key: 'a4d5c368da0bb9b296563e09760d8c450360d2d3', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '8852fd0a14ed85773706f6313be4af121c33f212', name: "start", slot: "start" }), h("slot", { key: 'c34815b4acd3bd9e556d908dcebb4e39a9ab1f78', name: "label", slot: "label" }), h("slot", { key: '3ba077636a9908c1ff57ca6a82824586becd8497', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'c45a42017fc0023f1f9b6c8201b209979678fd52', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: 'ae888424999bff07e6693023e1ef38a2ae471c96', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'd82337659d8656f162e51789dcd32c102f733f77', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'f5c9d99cd1a6725068f7f1acd27cf6e3e3717754' }, h("div", { key: 'b9e02ade28a5213382b993e57143dff2d19ececd', class: "date-field__close-bar" }, h("button", { key: 'af6aebad9c406b500d17338a0f5fb178638d3a01', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: '6cecd49256234320e73d732e689dd552dbf22645', name: "light/xmark" }), h("span", { key: 'fc9f86d2f3dbf06d53217ccf6556b3b119240ceb', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'd0a388667a9372ecfebae22d0175fe68230c11ac', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '109ec3fe3dd22087fca3240b3ad2b712b7444a3e', slot: "helper" }, h("span", { key: 'a709814dfcb66923cb512737768b4385c6a2fa85', class: { vhidden: !!this.value.length } }, h("slot", { key: '16375d1e2af0839d94b93b02117817fe54ed5887', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'dce160d23dbf15337800f15f43380c75643f6373' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: 'c50fb0b2a5104229cf44f9564a902b813e45111f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange", "testDateValidity"],

package/dist/components/nano-feature-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NanoFeatureBox extends Components.NanoFeatureBox, HTMLElement {}
+export const NanoFeatureBox: {
+    prototype: NanoFeatureBox;
+    new (): NanoFeatureBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-feature-box.js

@@ -0,0 +1,36 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class NanoFeatureBox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /** The position of the image of the feature-box (`start` being left on a l2r page) */
+    imgPosition = 'start';
+    static get style() { return featureBoxCss; }
+}, [0, "nano-feature-box", {
+        "imgPosition": [513, "img-position"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-feature-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-feature-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoFeatureBox$1);
+            }
+            break;
+    } });
+}
+
+const NanoFeatureBox = NanoFeatureBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoFeatureBox, defineCustomElement };

package/dist/components/nano-file-upload.js

@@ -72,7 +72,9 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
     _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;
@@ -234,7 +236,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
     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 = '';
@@ -391,7 +393,8 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
                     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;
@@ -419,7 +422,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         ];
     };
     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/components/nano-footer.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, Build, h, getAssetPath } from '@stenci
 import { a as addGlobalStylesheetToShadow } from './style.js';
 import { d as defineCustomElement$2 } from './icon.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$1 = /*@__PURE__*/ proxyCustomElement(class NanoFooter extends HTMLElement {
     constructor() {