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

package/dist/cjs/nano-avatar_5.cjs.entry.js

@@ -3,20 +3,20 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
-var modal = require('./modal-DTqHsNdW.js');
-var scroll = require('./scroll-CtgMHKrt.js');
-var slot = require('./slot-CoMwYflw.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
+var modal = require('./modal-Ca7dG1up.js');
+var scroll = require('./scroll-33Y1FRj4.js');
+var slot = require('./slot-CppKo1Tn.js');
 var events = require('./events-pBdXJwIU.js');
-var componentStore = require('./component-store-Cpxjkhrv.js');
+var componentStore = require('./component-store-Bjf_XOwd.js');
 var activeElement = require('./active-element-DB7WRcF-.js');
 var drag = require('./drag-B5XXLJW9.js');
-var tabbable = require('./tabbable-D33Xh_1b.js');
+var tabbable = require('./tabbable-CQ4-mXv0.js');
 var searchInsights = require('./search-insights-BtxuX7Wv.js');
-var dom = require('./dom-B0-coRX2.js');
+var dom = require('./dom-DM4lO0bS.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var formControl = require('./form-control-OWJOOoxA.js');
+var formControl = require('./form-control-BGk1kbyE.js');
 
 const avatarCss = ":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}}";
 
@@ -41,7 +41,7 @@ const NanoBadge = class {
     pulse;
 };
 
-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 = class {
     constructor(hostRef) {
@@ -1013,7 +1013,7 @@ const GlobalSearchResults = class {
 };
 GlobalSearchResults.style = globalSearchResultsCss;
 
-const selectCss = ".sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-select {\n  display: contents !important;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-select-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-select .form-ctrl__more.sc-nano-select, .has-error.sc-nano-select .form-ctrl__more.sc-nano-select {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--more-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false] .form-ctrl__helper.sc-nano-select, [disabled]).is-invalid.sc-nano-select-h .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-style: italic;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-select:focus-visible, .form-ctrl__input.sc-nano-select:focus-within, .has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-select-h .form-ctrl__input-wrap.sc-nano-select {\n  align-items: start;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-select:empty, .form-ctrl__slot-end.sc-nano-select:empty, .form-ctrl__slot-start.sc-nano-select:empty, .form-ctrl__slot-value-end.sc-nano-select:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-select {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-select {\n  padding-inline-end: 0;\n}\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  padding-inline: unset;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > * {\n  margin-inline: var(--padding-start) 0;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-inline: 0 var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.form-ctrl__validation-icon.sc-nano-select {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n.sc-nano-select-h:not(.is-invalid):not(.is-valid) .form-ctrl__validation-icon.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-select, .form-ctrl__success-icon.sc-nano-select {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-select-h .form-ctrl__success-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-select {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__error-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  display: block;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__down-arrow.sc-nano-select {\n  color: var(--nano-color-primary-1200);\n  transition: rotate var(--nano-transition-x-fast) linear;\n}\n.is-open.sc-nano-select .select__down-arrow.sc-nano-select {\n  rotate: 180deg;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:not(:has(~ nano-tag)) {\n  flex: 1;\n}\n\nnano-tag.sc-nano-select {\n  --color-non-interactive: var(--nano-color-primary-1000);\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) 0;\n  line-height: 1.4;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
+const selectCss = ".sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .sc-nano-select-h, *.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }slot-fb.sc-nano-select {\n  display: contents !important;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n  position: relative;\n}\n[disabled].sc-nano-select-h:not([disabled=false])::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  cursor: not-allowed;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1em;\n  transform: translateY(-50%);\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: none;\n  font-size: 0.75em;\n  opacity: 0.7;\n  inset-block-start: var(--padding-top);\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow-x: clip;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.85em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: var(--nano-font-size-2xs);\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: 0;\n  opacity: 0;\n  display: none;\n  transition: all var(--nano-transition-fast) ease;\n  transition-behavior: allow-discrete;\n}\n.has-helper.sc-nano-select .form-ctrl__more.sc-nano-select, .has-error.sc-nano-select .form-ctrl__more.sc-nano-select {\n  display: block;\n  opacity: 1;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--more-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false] .form-ctrl__helper.sc-nano-select, [disabled]).is-invalid.sc-nano-select-h .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-style: italic;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style) var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;\n}\n.form-ctrl__input.sc-nano-select:focus-visible, .form-ctrl__input.sc-nano-select:focus-within, .has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  outline: var(--nano-focus-ring-color) solid 3px;\n  outline-offset: -2px;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  border-color: var(--color-invalid);\n  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  flex: 1;\n  max-inline-size: 100%;\n  align-items: center;\n}\n[type=textarea].sc-nano-select-h .form-ctrl__input-wrap.sc-nano-select {\n  align-items: start;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: center;\n  inline-size: auto;\n  padding-inline-end: var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.form-ctrl__clear-btn.sc-nano-select:empty, .form-ctrl__slot-end.sc-nano-select:empty, .form-ctrl__slot-start.sc-nano-select:empty, .form-ctrl__slot-value-end.sc-nano-select:empty {\n  display: none;\n}\n\n.form-ctrl__slot-end.sc-nano-select {\n  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);\n}\n\n.form-ctrl__slot-start.sc-nano-select {\n  padding-inline-end: 0;\n}\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  padding-inline: unset;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > :not(slot-fb), .form-ctrl__slot-value-end .sc-nano-select-s > :not(slot-fb) {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > * {\n  margin-inline: var(--padding-start) 0;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  appearance: none;\n  align-items: center;\n  overflow: hidden;\n  padding-block: var(--padding-top) var(--padding-bottom);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-inline: 0 var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.form-ctrl__validation-icon.sc-nano-select {\n  padding-block: var(--padding-top) var(--padding-bottom);\n  padding-inline-end: var(--padding-end);\n  display: grid;\n  grid-template-areas: \"overlay\";\n}\n.sc-nano-select-h:not(.is-invalid .form-ctrl__validation-icon.sc-nano-select, .is-valid).sc-nano-select-h .form-ctrl__validation-icon.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__error-icon.sc-nano-select, .form-ctrl__success-icon.sc-nano-select {\n  color: var(--color-valid);\n  opacity: 0;\n  transition: 0.3s ease-out opacity;\n  grid-area: overlay;\n}\n\n.is-valid.sc-nano-select-h .form-ctrl__success-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__error-icon.sc-nano-select {\n  color: var(--color-invalid);\n}\n.is-invalid.sc-nano-select-h .form-ctrl__error-icon.sc-nano-select {\n  opacity: 1;\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-color-neutral-1000);\n  --padding-top: var(--nano-spacing-sm);\n  --padding-end: var(--nano-spacing-sm);\n  --padding-bottom: var(--nano-spacing-sm);\n  --padding-start: var(--nano-spacing-sm);\n  --color-invalid: var(--nano-color-danger-1100);\n  --color-valid: var(--nano-color-success-1000);\n  --input-font-size: var(--nano-font-size-sm);\n  --input-text-color: var(--nano-color-base-1000);\n  --input-border-width: 1px;\n  --input-border-color: var(--nano-color-neutral-300);\n  --input-border-radius: 0px;\n  --input-invalid-border-hint-width: 2px;\n  --input-border-style: solid var(--input-border-color);\n  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);\n  --input-bg-color: var(--nano-color-base-0);\n  --invalid-msg-color: var(--color-invalid);\n  --help-msg-color: var(--nano-color-base-1000);\n  --more-font-size: var(--nano-font-size-2xs);\n  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);\n  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-color-base-1000);\n  --label-font-size: var(--nano-font-size-xs);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  display: block;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n  color: var(--input-text-color);\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: initial;\n  font-weight: initial;\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__down-arrow.sc-nano-select {\n  color: var(--nano-color-primary-1200);\n  transition: rotate var(--nano-transition-x-fast) linear;\n}\n.is-open.sc-nano-select .select__down-arrow.sc-nano-select {\n  rotate: 180deg;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:not(:has(~ nano-tag)) {\n  flex: 1;\n}\n\nnano-tag.sc-nano-select {\n  --color-non-interactive: var(--nano-color-primary-1000);\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) 0;\n  line-height: 1.4;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n  pointer-events: auto;\n}";
 
 let selectIds = 0;
 const Select = class {
@@ -1115,7 +1115,9 @@ const Select = class {
      * String to place within a label element. Alternatively you may use a label slot.
      */
     get label() {
-        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+        return this.required && !this._label.endsWith('*')
+            ? this._label + ' *'
+            : this._label;
     }
     set label(value) {
         this._label = value;
@@ -1697,30 +1699,30 @@ const Select = class {
             disabled,
             clearControl: this.clearable,
         }))(this);
-        return (renderer.h(index.Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (renderer.h(index.Host, { key: '260ec75bf9f2624c4303f9107cb151b97065174a', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
                 'is-invalid': this._invalid === true,
                 'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, renderer.h(formControl.FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
+            } }, renderer.h(formControl.FormControlWrap, { key: 'd87280b7bc9405de2db9cc12db0538cf76e95504', ...wrapOptions, class: {
                 'has-error': !!this.errorMessage &&
                     this.showInlineError &&
                     this._invalid === true,
                 'has-helper': this.hasHelperSlot,
                 'is-open': this.hasOpened,
                 masked: this.mask,
-            } }, renderer.h(formControl.FormControl, { key: '7571a30e6a3f0b231d9e0b7a6e2f662fe3bd8183', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: renderer.h("slot", { name: "down-arrow" }, renderer.h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (renderer.h("div", { key: 'e92b079944fb81314da40799ba8f11f5644d5fa7', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (renderer.h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
-            renderer.h("input", { key: '3fc66f07b7c9220e2c9d3eb02b1b268f52921a46', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), !this.readonly && !this.disabled && (renderer.h("nano-datalist", { key: '1737bc4d8e6267659ebbd981cd043e0a3f0e20e3', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
+            } }, renderer.h(formControl.FormControl, { key: 'ffcd44c88c563f296c5508e95c7a41d74617f484', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: renderer.h("slot", { name: "down-arrow" }, renderer.h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (renderer.h("div", { key: 'dfc075f72efc14b669f90d3a13472c806dc68ddd', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (renderer.h("div", { key: '5826e2e1e7c3588349ed4279c95a5ef0b15b21d2', class: "select__mask" }, this.getLabel(this.value))),
+            renderer.h("input", { key: 'eb120065926e6acc331a136fd981ad33bec34941', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (renderer.h("nano-datalist", { key: '235fe1c1381a7a275b8485ed327e32c65ca1afdc', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
             }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
             // @ts-expect-error - this bubbles from the nano-dropdown
             onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
             this.multiple &&
-            !!this.inputSearchVal && (renderer.h("nano-option", { key: '23a03a568fc87bd041b4c4e702afba215e637423', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, renderer.h("span", { key: 'edd9ba1b076740baeaa34f62aa27f598bda7114d', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), renderer.h("slot", { key: '80e401156f240faf7fa04fef7915aa982305abd3' }))), renderer.h("select", { key: 'ba8bc3b4d7149e249c26f82da6816afa1b25fabf', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            !!this.inputSearchVal && (renderer.h("nano-option", { key: '284691608ccaeb8dd109db1e67a7f5b71c161b26', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, renderer.h("span", { key: '01613a6b92b766ec5fc3cbd8f599d3ff2c5a40f6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), renderer.h("slot", { key: 'f4a80a0be3b228c8323c439f100e0ead6bb259a8' }))), renderer.h("select", { key: 'b963c46543facd4ee4780ea9575cd0d1bd943b2b', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (renderer.h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&

package/dist/cjs/nano-breadcrumb.cjs.entry.js

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
+var index = require('./index-trCnMfo7.js');
 var style = require('./style-Bf3iH5GX.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 = class {
     constructor(hostRef) {
@@ -16,26 +16,59 @@ const NanoBreadcrumb = class {
     /** Array of breadcrumb items to render */
     breadcrumbs = [];
     isOpen = false;
-    componentWillLoad() {
-        // add global styles to shadow DOM
-        style.addGlobalStylesheetToShadow(this.el?.shadowRoot);
+    isOverflowing = false;
+    mainRef;
+    componentDidLoad() {
+        {
+            this.checkOverflow();
+            style.addGlobalStylesheetToShadow(this.el?.shadowRoot);
+        }
+    }
+    componentDidUpdate() {
+        {
+            this.checkOverflow();
+        }
+    }
+    connectedCallback() {
+        {
+            window.addEventListener('resize', this.checkOverflow);
+        }
+    }
+    disconnectedCallback() {
+        {
+            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 (index.h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, index.h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
         }
         const parentBreadcrumb = this.breadcrumbs?.length
             ? this.breadcrumbs.at(-1)
             : null;
-        return (index.h("div", { class: "breadcrumbs" }, index.h("nav", { "aria-label": "Breadcrumb" }, index.h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), index.h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, index.h("button", { class: "trigger-button", slot: "trigger" }, index.h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (index.h("span", { class: "trigger-button_label" }, "..")), index.h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), index.h("nano-icon", { class: {
+        return (index.h("div", { class: "breadcrumbs" }, index.h("nav", { "aria-label": "Breadcrumb" }, index.h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (index.h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, index.h("button", { class: "trigger-button", slot: "trigger" }, index.h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (index.h("span", { class: "trigger-button_label" }, "..")), index.h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), index.h("nano-icon", { class: {
                 'trigger-icon': true,
                 'trigger-icon--open': this.isOpen,
-            }, name: "light/chevron-down" })), index.h("nav", null, index.h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index$1) => (index.h("nano-nav-item", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));
+            }, name: "light/chevron-down" })), index.h("nav", null, index.h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index$1) => (index.h("nano-nav-item", { key: index$1, href: breadcrumb.href, class: {
+                return: breadcrumb.return,
+                link: !!breadcrumb.href,
+            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
     }
 };
-const BreadcrumbList = ({ breadcrumbs, className, }) => (index.h("ol", { class: `breadcrumbs ${className}` }, breadcrumbs?.map((breadcrumb, index$1) => (index.h("li", null, index.h("a", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (index.h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
+const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (index.h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index$1) => (index.h("li", null, index.h("a", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (index.h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
 NanoBreadcrumb.style = breadcrumbCss;
 
 exports.nano_breadcrumb = NanoBreadcrumb;

package/dist/cjs/nano-card-carousel.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 
 const cardCarouselCss = ":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  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: calc(50% + var(--gap) / 2 - var(--peek));\n  padding-inline-end: var(--gap);\n}\n.base nano-slides[ready]::part(slide-container) {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n  transform: none;\n  block-size: 100%;\n  inline-size: var(--bleed);\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n.base nano-slides {\n  overflow: visible;\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n  }\n  .base ::slotted(nano-slide), .base::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n    inline-size: calc(100% + var(--gap) - var(--peek));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
 

package/dist/cjs/nano-card.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
+var index = require('./index-trCnMfo7.js');
 
 const cardCss = ":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}}";
 

package/dist/cjs/nano-checkbox-group.cjs.entry.js

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
+var index = require('./index-trCnMfo7.js');
 var theme = require('./theme-2potFCtG.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 
 const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--nano-spacing-md)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:var(--nano-spacing-sm)}";
 
@@ -55,7 +55,8 @@ const CheckboxGroup = class {
      * 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;
@@ -100,18 +101,14 @@ const CheckboxGroup = class {
      * @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 = class {
     // stencil hooks
     componentWillLoad() {
         this.handleValueChange = this.handleValueChange.bind(this);
-        this.handleValueChange = throttle.debounce(this.handleValueChange, 1);
+        // this.handleValueChange = debounce(this.handleValueChange, 1);
         this.showInlineValidation = throttle.debounce(this.showInlineValidation, 10);
         this.handleDisabledChange();
         this.handleSlotChange();
@@ -344,14 +341,14 @@ const CheckboxGroup = class {
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (renderer.h(index.Host, { key: 'b6d81d374260c8cb97dfc1557238c20945b44632', class: this.checkboxTypes }, renderer.h("fieldset", { key: 'fa058ccca23a91b369c659ff442585de43a4333d', disabled: this.disabled, class: {
+        return (renderer.h(index.Host, { key: '15fc5c86bc5db9189119af9c59b5b406fe5b6e22', class: this.checkboxTypes }, renderer.h("fieldset", { key: 'b3d7acc9c452fefca51966fa2a88d755f338b206', disabled: this.disabled, class: {
                 cbgroup: true,
                 'has-error': this.showErrorMsg && !!this.errorMessage,
                 'has-helper': this.hasHelperSlot,
-            } }, renderer.h("legend", { key: '429737fad96eef6af343c5e978a4642a599ea4a6', id: legendId, class: {
+            } }, renderer.h("legend", { key: 'd4aef86c845f730e2a11696a4347da6c1e7771d8', id: legendId, class: {
                 cbgroup__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, renderer.h("slot", { key: 'd592da5791f7e830c57aec7c62c01b32326b5a34', name: "legend" }, this.legend)), renderer.h("div", { key: '0bb0a2206a13bb9f773857b4ac897bfffb75a741', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, renderer.h("slot", { key: '23f668b5fa4a1d23f39ea49998ae75767df15624' })), (this.showInlineError || this.hasHelperSlot) && (renderer.h("div", { key: '1e15d0bb57352fb8cd7a3a746dd5adb8bb979819', class: "cbgroup__more", id: moreId }, this.showInlineError ? (renderer.h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), renderer.h("div", { key: 'e23596644945fafd2802bf1ac8958a314a076bc8', class: "cbgroup__help" }, renderer.h("slot", { key: 'd6df38d9ceaa915364a20dc29d8a1457b071c6ef', name: "helper" })))))));
+            } }, renderer.h("slot", { key: 'a31964559fc797ee445b9e38633b7cc2c3d30286', name: "legend" }, this.legend)), renderer.h("div", { key: 'bcfad3c07ebcefc2e5cc0bb7ac5c23712ae76284', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, renderer.h("slot", { key: '7222f411ed5c38a520aff17452fe4da6e84c80d3' })), (this.showInlineError || this.hasHelperSlot) && (renderer.h("div", { key: '6a31f268047242b78861057902d06ecaf4e7e0c1', class: "cbgroup__more", id: moreId }, this.showInlineError ? (renderer.h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), renderer.h("div", { key: '2b9f59ce901eddbe7b40cf13bdf0276b4522dc6e', class: "cbgroup__help" }, renderer.h("slot", { key: '92df785a50cfe52cafe741747e65b56d2a451211', name: "helper" })))))));
     }
     static get watchers() { return {
         "value": ["handleValuePropChange"],

package/dist/cjs/nano-checkbox.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 
 const checkboxCss = ".sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h{--border-color:var(--nano-color-primary-1000);--label-color:var(--nano-color-base-1000);--spacing:var(--nano-spacing-sm);--active-background:var(--nano-color-primary-1000);--active-foreground:var(--nano-color-basic-white);--error-color:var(--nano-color-danger-1100);--disabled-label-color:var(--nano-color-neutral-1000);--disabled-background:var(--nano-color-neutral-300);--disabled-foreground:var(--nano-color-neutral-700);--disabled-border-color:var(--nano-color-neutral-1000);display:inline-block;max-inline-size:100%}.nanocb.sc-nano-checkbox{cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative;font-size:1rem}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus-visible~.nanocb__input.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:var(--active-background)}.nanocb.nanocb--disabled.sc-nano-checkbox{cursor:not-allowed}.sc-nano-checkbox-h:not([hide-label]) .nanocb.sc-nano-checkbox{gap:var(--spacing)}.sc-nano-checkbox-h:not([type=tag]) .nanocb__label--hidden.sc-nano-checkbox,.sc-nano-checkbox-h:not([type=segment]) .nanocb__label--hidden.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";grid-column:1;grid-row:1;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}.nanocb--indeterminate.sc-nano-checkbox .nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb--indeterminate.sc-nano-checkbox .nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__radio.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{scale:1;rotate:0deg;block-size:1px;inline-size:0.625em;border-width:0 0 0.125em;margin-block-start:0}.nanocb__radio.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border-radius:50%}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-radius:50%;background:var(--active-foreground);border:none;margin:0 !important}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;opacity:1;block-size:0.5em;inline-size:0.5em}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:transparent}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{inline-size:2.1875em;block-size:1.125em;border:1px solid var(--border-color)}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";position:relative;display:block;border-radius:inherit;block-size:0.75em;inline-size:0.75em;background-color:var(--active-background);transform-origin:left;inset-inline-start:0.125em;inset-block-start:50%;transform:translateY(-50%);transition:0.1s ease scale, 0.1s ease background-color, 0.15s ease left}.nanocb__switch.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{inset-inline-start:1.1875em;transform-origin:right;background-color:var(--active-foreground)}.nanocb__switch.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__switch.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-background);background:var(--disabled-background)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{background:var(--disabled-foreground)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}[type=segment].sc-nano-checkbox-h{display:inline-block}.nanocb__segment.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:none}.nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color);padding:0.4375em 0.9375em;border:1px solid var(--active-background)}.sc-nano-checkbox-h:first-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-end:1px solid var(--nano-color-neutral-300)}.sc-nano-checkbox-h:not(:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.sc-nano-checkbox-h:first-of-type) .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--nano-color-neutral-300)}.sc-nano-checkbox-h:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--active-background) !important}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border:1px solid var(--active-background)}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__label.sc-nano-checkbox{color:var(--active-foreground);background-color:var(--active-background);box-shadow:2px 2px 3px 0 rgba(0, 0, 0, 0.2) inset}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:focus-visible:focus~.nanocb__label.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:1px;z-index:1}.nanocb__segment.nanocb--invalid.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__segment.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{background-color:var(--disabled-background);color:var(--disabled-label-color)}[type=tag].sc-nano-checkbox-h{display:inline-block}.nanocb__tag.sc-nano-checkbox{display:inline-flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--active-background);color:var(--nano-color-primary-1100);font-size:var(--nano-font-size-2xs);font-weight:bold;transition:background-color var(--nano-transition-x-fast) ease-out}.nanocb__tag.sc-nano-checkbox:hover{background-color:var(--nano-color-primary-100)}.nanocb__tag.sc-nano-checkbox:has(input:checked){background-color:var(--nano-color-primary-300)}.nanocb__tag.sc-nano-checkbox:has(input:focus-visible:focus){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.nanocb__tag.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{order:0;-webkit-user-select:none;user-select:none}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{order:1;display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color);outline:none !important}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";grid-column:1;grid-row:1;block-size:0;inline-size:0;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0}.nanocb--indeterminate.sc-nano-checkbox .nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__tag.nanocb--invalid.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__tag.nanocb--disabled.sc-nano-checkbox{background:var(--disabled-background);border:1px solid var(--disabled-border-color)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__tag.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}";
 

package/dist/cjs/nano-collapsible-comparison.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BlC8UV0T.js');
-var renderer = require('./renderer-BjTjwe8d.js');
+var index = require('./index-trCnMfo7.js');
+var renderer = require('./renderer-W7BRtd3i.js');
 var style = require('./style-Bf3iH5GX.js');
 
 const collapsibleComparisonCss = ":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  /**\n  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).\n  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).\n  * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n  */\n}\n:host .collapsible-comparison {\n  background-color: var(--color-bg);\n  color: var(--nano-color-neutral-1400);\n  padding: var(--outer-spacing) 0;\n  container-type: inline-size;\n}\n:host .header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n  display: none;\n}\n@container (max-width: 400px) {\n  :host nano-cta {\n    display: none;\n  }\n  :host nano-icon-button {\n    --color: var(--nano-color-primary-1100);\n    display: block;\n    margin-inline-start: auto;\n    font-size: var(--nano-font-size-xl);\n    transition: 0.3s ease transform;\n  }\n  :host nano-icon-button.open {\n    transform: rotate(180deg);\n  }\n}";