@oiz/stzh-components 2.6.0 → 2.7.0-alpha

package/dist/esm/stzh-dropdown.entry.js

@@ -2131,17 +2131,24 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     const query = "label[for='" + escapeQuery(self.inputId) + "']";
     const label = document.querySelector(query);
     const label_click = self.focus.bind(self);
+    const labelled_by = input.getAttribute('aria-labelledby');
     if (label) {
       addEvent$2(label, 'click', label_click);
       setAttr(label, {
         for: control_id
       });
-      const label_id = getId(label, self.inputId + '-ts-label');
+
+      // const label_id = getId(label,self.inputId+'-ts-label');
+      // setAttr(focus_node,{'aria-labelledby':label_id});
+      // setAttr(dropdown_content,{'aria-labelledby':label_id});
+    }
+
+    if (labelled_by) {
       setAttr(focus_node, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
       setAttr(dropdown_content, {
-        'aria-labelledby': label_id
+        'aria-labelledby': labelled_by
       });
     }
     wrapper.style.width = input.style.width;
@@ -2149,10 +2156,15 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
       addClasses([wrapper, dropdown], classes_plugins);
     }
-    if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag) {
-      setAttr(input, {
-        multiple: 'multiple'
+    if (settings.mode === 'multi') {
+      setAttr(dropdown_content, {
+        'aria-multiselectable': 'true'
       });
+      if (self.is_select_tag) {
+        setAttr(input, {
+          multiple: 'multiple'
+        });
+      }
     }
     if (settings.placeholder) {
       setAttr(control_input, {
@@ -2808,7 +2820,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
    *
    */
   getValue() {
-    if (this.is_select_tag && this.input.hasAttribute('multiple')) {
+    if (this.settings.mode === 'multi' && this.is_select_tag) {
       return this.items;
     }
     return this.items.join(this.settings.delimiter);
@@ -2941,9 +2953,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
     setAttr(this.focus_node, {
       'aria-activedescendant': option.getAttribute('id')
     });
-    setAttr(option, {
-      'aria-selected': 'true'
-    });
+    if (this.settings.mode === 'single' || this.settings.hideSelected) {
+      setAttr(option, {
+        'aria-selected': 'true'
+      });
+    }
     addClasses(option, 'active');
     if (scroll) this.scrollToOption(option);
   }
@@ -2986,9 +3000,11 @@ class TomSelect extends MicroPlugin(MicroEvent) {
   clearActiveOption() {
     if (this.activeOption) {
       removeClasses(this.activeOption, 'active');
-      setAttr(this.activeOption, {
-        'aria-selected': null
-      });
+      if (this.settings.mode === 'single' || this.settings.hideSelected) {
+        setAttr(this.activeOption, {
+          'aria-selected': null
+        });
+      }
     }
     this.activeOption = null;
     setAttr(this.focus_node, {
@@ -3203,10 +3219,16 @@ class TomSelect extends MicroPlugin(MicroEvent) {
       if (option === undefined) continue;
       let opt_hash = get_hash$1(opt_value);
       let option_el = self.getOption(opt_hash, true);
+      const option_selected = self.items.includes(opt_hash);
 
       // toggle 'selected' class
       if (!self.settings.hideSelected) {
-        option_el.classList.toggle('selected', self.items.includes(opt_hash));
+        option_el.classList.toggle('selected', option_selected);
+        if (this.settings.mode === 'multi') {
+          setAttr(option_el, {
+            'aria-selected': option_selected ? 'true' : 'false'
+          });
+        }
       }
       optgroup = option[self.settings.optgroupField] || '';
       optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
@@ -3224,10 +3246,17 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         // nodes can only have one parent, so if the option is in mutple groups, we need a clone
         if (j > 0) {
           option_el = option_el.cloneNode(true);
-          setAttr(option_el, {
-            id: option.$id + '-clone-' + j,
-            'aria-selected': null
-          });
+          if (this.settings.mode === 'multi' && !self.settings.hideSelected) {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': option_selected ? 'true' : 'false'
+            });
+          } else {
+            setAttr(option_el, {
+              id: option.$id + '-clone-' + j,
+              'aria-selected': null
+            });
+          }
           option_el.classList.add('ts-cloned');
           removeClasses(option_el, 'active');
 
@@ -4869,7 +4898,7 @@ function plugin () {
   });
 }
 
-const stzhDropdownCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-grey61);--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-white);--label-background:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--hover-color);--popover-width:100%;--popover-min-width:var(--stzh-popover-min-width);--popover-max-width:var(--stzh-popover-min-width);--popover-max-height:calc(6.5 * var(--stzh-menu-item-height));width:100%;border-radius:var(--stzh-form-input-border-radius);}stzh-dropdown[hidden]{display:none}stzh-dropdown *,stzh-dropdown *::before,stzh-dropdown *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown[variant=plain]{--background-color:transparent}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[invalid]:not([invalid=false]){--color:var(--stzh-color-error);--border-color:var(--stzh-color-error);--label-color:var(--stzh-color-error);--placeholder-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-border-color:var(--stzh-color-error)}stzh-dropdown[disabled]:not([disabled=false]){--color:var(--stzh-color-grey61);--border-color:transparent;--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-black8);--label-background:transparent;--hover-color:var(--stzh-color-grey61);--hover-border-color:transparent}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}.stzh-dropdown__icon-wrapper stzh-icon,.stzh-dropdown__icon{--size:var(--icon-size)}.stzh-dropdown{}.stzh-dropdown__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-dropdown__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-dropdown__error,.stzh-dropdown__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-dropdown__error{color:var(--stzh-color-error)}.stzh-dropdown__error-list{list-style:none;margin:0;padding:0}.stzh-dropdown__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-dropdown__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-dropdown__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-dropdown__description-long-popover[open]:not([open=false]) .stzh-dropdown__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-dropdown__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown stzh-icon.stzh-dropdown__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-dropdown--has-error .stzh-dropdown__error,.stzh-dropdown--has-description .stzh-dropdown__description{margin-top:var(--stzh-space-xxsmall)}.stzh-dropdown .ts-hidden-accessible{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown .ts-dropdown-content{max-height:var(--popover-max-height);overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;scroll-behavior:smooth}.stzh-dropdown .ts-control{overflow:hidden;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-radius:var(--stzh-form-input-border-radius);background-color:var(--background-color);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown .ts-control:hover,.stzh-dropdown .ts-control:focus-within{border-color:var(--hover-border-color)}.stzh-dropdown .ts-control>*{vertical-align:baseline;display:inline-block}.stzh-dropdown .ts-control,.stzh-dropdown__sizer{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;width:100%;min-height:var(--stzh-form-input-height);border:0.0625rem solid var(--border-color)}.stzh-dropdown .ts-control>input{font-size:inherit;line-height:inherit;-ms-flex:1 1 auto;flex:1 1 auto;display:inline-block;padding:0;min-height:0;max-height:none;max-width:100%;margin:0;text-indent:0;border:0 none;background:none;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}.stzh-dropdown .ts-control>input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-ms-clear{display:none}.stzh-dropdown .ts-control>input:focus{outline:none}.stzh-dropdown .ts-control>input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:placeholder-shown{text-overflow:ellipsis}.stzh-dropdown__vhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__field-wrapper,.stzh-dropdown__select{position:relative}.stzh-dropdown__icon-wrapper{position:absolute}.stzh-dropdown__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item,.stzh-dropdown__icon-wrapper,.stzh-dropdown__angle-icon{color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select.multi .stzh-dropdown__item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__select:hover .ts-control>input,.stzh-dropdown__select:focus-within .ts-control>input,.stzh-dropdown__select.single:hover .stzh-dropdown__item,.stzh-dropdown__select.single:focus-within .stzh-dropdown__item,.stzh-dropdown__select:hover~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:hover~.stzh-dropdown__angle-icon,.stzh-dropdown__select:focus-within~.stzh-dropdown__angle-icon,.stzh-dropdown__select:hover~.stzh-dropdown__label,.stzh-dropdown__select:focus-within~.stzh-dropdown__label{color:var(--hover-color)}.stzh-dropdown__sizer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:calc(var(--stzh-form-input-height) / -1);pointer-events:none;visibility:hidden}.stzh-dropdown__select.has-items~.stzh-dropdown__sizer{display:none}.stzh-dropdown__select.plugin-input_hide~.stzh-dropdown__sizer{visibility:visible}.stzh-dropdown__select.input-active .ts-control,.stzh-dropdown__select.input-active .ts-control>input{cursor:text}.stzh-dropdown__select.input-hidden .ts-control>input,.stzh-dropdown__select.plugin-input_hide .ts-control>input{opacity:0;position:absolute;left:-625rem}.stzh-dropdown__select.single .ts-control,.stzh-dropdown__select.multi .ts-control,.stzh-dropdown__sizer{padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown__icon-wrapper,.stzh-dropdown__angle-icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{display:-ms-flexbox;display:flex;left:var(--stzh-space-medium)}.stzh-dropdown stzh-icon.stzh-dropdown__angle-icon{--size:var(--stzh-icon-size-medium)}.stzh-dropdown__angle-icon{right:var(--stzh-space-medium);-webkit-transform-origin:50% 0%;transform-origin:50% 0%}.stzh-dropdown__label{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--label-color);display:block;width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-dropdown__label:empty{display:none}.stzh-dropdown__label::before{content:\"\";display:none;background:var(--label-background);position:absolute;width:100%;z-index:-1;left:0;top:50%;height:0.125rem;margin-top:-0.5px}.stzh-dropdown__option,.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;outline:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--stzh-color-grey70);height:var(--stzh-menu-item-height);line-height:var(--stzh-menu-item-height);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown__option:hover,.stzh-dropdown__option.active,.stzh-dropdown__create:hover,.stzh-dropdown__create.active{background-color:var(--stzh-color-grey5)}.stzh-dropdown__option.selected,.stzh-dropdown__create.selected{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected:hover,.stzh-dropdown__option.selected.active,.stzh-dropdown__create.selected:hover,.stzh-dropdown__create.selected.active{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown__option input,.stzh-dropdown__create input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:block}.stzh-dropdown__option-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-dropdown__option[data-selectable] .highlight{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-dropdown__select .stzh-dropdown__option-check{display:none;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected:hover .stzh-dropdown__option-check,.stzh-dropdown__option.selected.active .stzh-dropdown__option-check{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-dropdown__no-results{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.stzh-dropdown__no-results,.stzh-dropdown__not-loading{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large)}.stzh-dropdown__optgroup-header{cursor:default}.stzh-dropdown__loader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:2.375rem}.stzh-dropdown__dropdown{position:absolute;top:100%;left:0;width:var(--popover-width);margin-top:var(--stzh-space-xsmall);background-color:var(--stzh-color-white);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);z-index:var(--stzh-z-index-popover);border-radius:var(--stzh-popover-border-radius);overflow:hidden}@media screen and (min-width: 600px){.stzh-dropdown__dropdown{min-width:var(--popover-min-width);max-width:var(--popover-max-width)}}.stzh-dropdown__select.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.stzh-dropdown__select.plugin-input_autogrow.has-items.focus .ts-control>input{-ms-flex:none;flex:none;min-width:0.25rem}.stzh-dropdown__select.has-items .ts-control>input{margin:0 0.25rem}.stzh-dropdown__select.has-items .ts-control>input::-webkit-input-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input::-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-ms-input-placeholder{color:transparent}.stzh-dropdown__select.dropdown-active~.stzh-dropdown__angle-icon{-webkit-transform:rotate(180deg) translateY(-50%);transform:rotate(180deg) translateY(-50%)}.stzh-dropdown--is-multiple .stzh-dropdown__option-check{display:-ms-inline-flexbox;display:inline-flex;opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);margin-right:var(--stzh-space-xsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__option{padding-left:var(--stzh-space-small)}.stzh-dropdown--is-multiple .stzh-dropdown__option.selected .stzh-dropdown__option-check{opacity:1}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control{padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;height:1.5rem;line-height:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:0.75rem;padding:0 var(--stzh-space-medium);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:0.0625rem solid transparent;background-color:var(--stzh-color-grey5);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);margin:var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) 0;cursor:pointer}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item.active{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-right:calc(1.5rem + var(--stzh-space-xxsmall))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{position:absolute;top:50%;right:-0.0625rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-text-decoration-line:none;text-decoration-line:none;width:1.5rem;height:1.5rem;border-radius:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--stzh-base-lead-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__remove-icon{--size:var(--stzh-icon-size-xxsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item.active .stzh-dropdown__remove-icon{color:var(--stzh-color-white)}.stzh-dropdown--popover-placement-top .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown{margin-top:0;top:auto;bottom:100%;margin-bottom:var(--stzh-space-xsmall)}.stzh-dropdown--popover-placement-top.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-end.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-bottom:0}.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-end .stzh-dropdown__dropdown{left:auto;right:0}.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-center .stzh-dropdown__dropdown{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-dropdown--size-small .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-dropdown--size-small .ts-control{min-height:var(--stzh-form-input-small-height)}.stzh-dropdown--size-small .stzh-dropdown__sizer{min-height:initial;height:var(--stzh-form-input-small-height);margin-top:calc(var(--stzh-form-input-small-height) / -1)}.stzh-dropdown--size-small .stzh-dropdown__label{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{padding:var(--stzh-space-xxsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--size-small stzh-icon.stzh-dropdown__angle-icon{--size:var(--stzh-icon-size-small)}.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--plain .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain .stzh-dropdown__sizer{border:none;padding-left:0;padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--plain .stzh-dropdown__icon-wrapper{left:0}.stzh-dropdown--plain .stzh-dropdown__angle-icon{right:0}.stzh-dropdown--plain .stzh-dropdown__label{left:0;max-width:100%;padding:0}.stzh-dropdown--plain .stzh-dropdown__label::before{content:none}.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-top:0}.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__sizer{padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--has-focus .stzh-dropdown__label{top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - (var(--stzh-space-medium) - var(--stzh-space-xxsmall)) * 2);pointer-events:all}.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before{display:block}.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label{left:0;padding:0;max-width:100%}.stzh-dropdown--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{cursor:not-allowed}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-grey25);background-color:var(--stzh-color-white);border-color:var(--stzh-base-border-color)}.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-grey13);background-color:transparent}";
+const stzhDropdownCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-grey61);--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-white);--label-background:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-angle-size:var(--stzh-icon-size-medium);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--hover-color);--popover-width:100%;--popover-min-width:var(--stzh-popover-min-width);--popover-max-width:var(--stzh-popover-min-width);--popover-max-height:calc(6.5 * var(--stzh-menu-item-height));--active-icon-angle-transform:rotate(180deg) translateY(50%);width:100%;border-radius:var(--stzh-form-input-border-radius);}stzh-dropdown[hidden]{display:none}stzh-dropdown *,stzh-dropdown *::before,stzh-dropdown *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-dropdown[variant=plain]{--background-color:transparent}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[size=small]{--icon-angle-size:var(--stzh-icon-size-small)}stzh-dropdown[invalid]:not([invalid=false]){--color:var(--stzh-color-error);--border-color:var(--stzh-color-error);--label-color:var(--stzh-color-error);--placeholder-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-border-color:var(--stzh-color-error)}stzh-dropdown[disabled]:not([disabled=false]){--color:var(--stzh-color-grey61);--border-color:transparent;--label-color:var(--stzh-color-grey61);--placeholder-color:var(--stzh-color-grey61);--background-color:var(--stzh-color-black8);--label-background:transparent;--hover-color:var(--stzh-color-grey61);--hover-border-color:transparent}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}.stzh-dropdown{}.stzh-dropdown__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-dropdown__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-dropdown__error,.stzh-dropdown__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-dropdown__error{color:var(--stzh-color-error)}.stzh-dropdown__error-list{list-style:none;margin:0;padding:0}.stzh-dropdown__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-dropdown__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-dropdown__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-dropdown__description-long-popover[open]:not([open=false]) .stzh-dropdown__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-dropdown__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown stzh-icon.stzh-dropdown__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-dropdown--has-error .stzh-dropdown__error,.stzh-dropdown--has-description .stzh-dropdown__description{margin-top:var(--stzh-space-xxsmall)}.stzh-dropdown .ts-hidden-accessible{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown .ts-dropdown-content{max-height:var(--popover-max-height);overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;scroll-behavior:smooth}.stzh-dropdown .ts-control{overflow:hidden;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-radius:var(--stzh-form-input-border-radius);background-color:var(--background-color);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown .ts-control:hover,.stzh-dropdown .ts-control:focus-within{border-color:var(--hover-border-color)}.stzh-dropdown .ts-control>*{vertical-align:baseline;display:inline-block}.stzh-dropdown .ts-control,.stzh-dropdown__sizer{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;width:100%;min-height:var(--stzh-form-input-height);border:0.0625rem solid var(--border-color)}.stzh-dropdown .ts-control>input{font-size:inherit;line-height:inherit;-ms-flex:1 1 auto;flex:1 1 auto;display:inline-block;padding:0;min-height:0;max-height:none;max-width:100%;margin:0;text-indent:0;border:0 none;background:none;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}.stzh-dropdown .ts-control>input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-moz-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-dropdown .ts-control>input::-ms-clear{display:none}.stzh-dropdown .ts-control>input:focus{outline:none}.stzh-dropdown .ts-control>input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-dropdown .ts-control>input:placeholder-shown{text-overflow:ellipsis}.stzh-dropdown__vhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__field-wrapper,.stzh-dropdown__select{position:relative}.stzh-dropdown__icon-wrapper{position:absolute}.stzh-dropdown__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item,.stzh-dropdown__icon-wrapper,.stzh-dropdown__icon-angle-wrapper{color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select.multi .stzh-dropdown__item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__select:hover .ts-control>input,.stzh-dropdown__select:focus-within .ts-control>input,.stzh-dropdown__select.single:hover .stzh-dropdown__item,.stzh-dropdown__select.single:focus-within .stzh-dropdown__item,.stzh-dropdown__select:hover~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-wrapper,.stzh-dropdown__select:hover~.stzh-dropdown__icon-angle-wrapper,.stzh-dropdown__select:focus-within~.stzh-dropdown__icon-angle-wrapper,.stzh-dropdown__select:hover~.stzh-dropdown__label,.stzh-dropdown__select:focus-within~.stzh-dropdown__label{color:var(--hover-color)}.stzh-dropdown__sizer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:calc(var(--stzh-form-input-height) / -1);pointer-events:none;visibility:hidden}.stzh-dropdown__select.has-items~.stzh-dropdown__sizer{display:none}.stzh-dropdown__select.plugin-input_hide~.stzh-dropdown__sizer{visibility:visible}.stzh-dropdown__select.input-active .ts-control,.stzh-dropdown__select.input-active .ts-control>input{cursor:text}.stzh-dropdown__select.input-hidden .ts-control>input,.stzh-dropdown__select.plugin-input_hide .ts-control>input{opacity:0;position:absolute;left:-625rem}.stzh-dropdown__select.single .ts-control,.stzh-dropdown__select.multi .ts-control,.stzh-dropdown__sizer{padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown__icon-wrapper,.stzh-dropdown__icon-angle-wrapper{display:-ms-flexbox;display:flex;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{left:var(--stzh-space-medium)}.stzh-dropdown__icon-angle-wrapper{right:var(--stzh-space-medium)}.stzh-dropdown__icon-wrapper stzh-icon,.stzh-dropdown__icon{--size:var(--icon-size)}.stzh-dropdown__icon-angle-wrapper stzh-icon,.stzh-dropdown__icon-angle{--size:var(--icon-angle-size)}.stzh-dropdown__label{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--label-color);display:block;width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-dropdown__label:empty{display:none}.stzh-dropdown__label::before{content:\"\";display:none;background:var(--label-background);position:absolute;width:100%;z-index:-1;left:0;top:50%;height:0.125rem;margin-top:-0.5px}.stzh-dropdown__option,.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;outline:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--stzh-color-grey70);height:var(--stzh-menu-item-height);line-height:var(--stzh-menu-item-height);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown__option:hover,.stzh-dropdown__option.active,.stzh-dropdown__create:hover,.stzh-dropdown__create.active{background-color:var(--stzh-color-grey5)}.stzh-dropdown__option.selected,.stzh-dropdown__create.selected{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected:hover,.stzh-dropdown__option.selected.active,.stzh-dropdown__create.selected:hover,.stzh-dropdown__create.selected.active{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown__option input,.stzh-dropdown__create input{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-dropdown__create{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:block}.stzh-dropdown__option-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-dropdown__option[data-selectable] .highlight{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-dropdown__select .stzh-dropdown__option-check{display:none;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown__option.selected::before{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute;content:\"✓\"}.stzh-dropdown__option.selected:hover .stzh-dropdown__option-check,.stzh-dropdown__option.selected.active .stzh-dropdown__option-check{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-dropdown__no-results{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.stzh-dropdown__no-results,.stzh-dropdown__not-loading{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large)}.stzh-dropdown__optgroup-header{cursor:default}.stzh-dropdown__loader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:2.375rem}.stzh-dropdown__dropdown{position:absolute;top:100%;left:0;width:var(--popover-width);margin-top:var(--stzh-space-xsmall);background-color:var(--stzh-color-white);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);z-index:var(--stzh-z-index-popover);border-radius:var(--stzh-popover-border-radius);overflow:hidden}@media screen and (min-width: 600px){.stzh-dropdown__dropdown{min-width:var(--popover-min-width);max-width:var(--popover-max-width)}}.stzh-dropdown__select.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.stzh-dropdown__select.plugin-input_autogrow.has-items.focus .ts-control>input{-ms-flex:none;flex:none;min-width:0.25rem}.stzh-dropdown__select.has-items .ts-control>input{margin:0 0.25rem}.stzh-dropdown__select.has-items .ts-control>input::-webkit-input-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input::-moz-placeholder{color:transparent}.stzh-dropdown__select.has-items .ts-control>input:-ms-input-placeholder{color:transparent}.stzh-dropdown__select.dropdown-active~.stzh-dropdown__icon-angle-wrapper{-webkit-transform:var(--active-icon-angle-transform);transform:var(--active-icon-angle-transform)}.stzh-dropdown--is-multiple .stzh-dropdown__option-check{display:-ms-inline-flexbox;display:inline-flex;opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);margin-right:var(--stzh-space-xsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__option{padding-left:var(--stzh-space-small)}.stzh-dropdown--is-multiple .stzh-dropdown__option.selected .stzh-dropdown__option-check{opacity:1}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control{padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:relative;height:1.5rem;line-height:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:0.75rem;padding:0 var(--stzh-space-medium);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:0.0625rem solid transparent;background-color:var(--stzh-color-grey5);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);margin:var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) var(--stzh-space-xxsmall) 0;cursor:pointer}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item.active{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-right:calc(1.5rem + var(--stzh-space-xxsmall))}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{position:absolute;top:50%;right:-0.0625rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-text-decoration-line:none;text-decoration-line:none;width:1.5rem;height:1.5rem;border-radius:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--stzh-base-lead-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));background-color:var(--stzh-color-primary8)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__remove-icon{--size:var(--stzh-icon-size-xxsmall)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item.active .stzh-dropdown__remove-icon{color:var(--stzh-color-white)}.stzh-dropdown--popover-placement-top .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown{margin-top:0;top:auto;bottom:100%;margin-bottom:var(--stzh-space-xsmall)}.stzh-dropdown--popover-placement-top.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-end.stzh-dropdown--plain .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-top-center.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-bottom:0}.stzh-dropdown--popover-placement-top-end .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-end .stzh-dropdown__dropdown{left:auto;right:0}.stzh-dropdown--popover-placement-top-center .stzh-dropdown__dropdown,.stzh-dropdown--popover-placement-bottom-center .stzh-dropdown__dropdown{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-dropdown--size-small .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-dropdown--size-small .ts-control{min-height:var(--stzh-form-input-small-height)}.stzh-dropdown--size-small .stzh-dropdown__sizer{min-height:initial;height:var(--stzh-form-input-small-height);margin-top:calc(var(--stzh-form-input-small-height) / -1)}.stzh-dropdown--size-small .stzh-dropdown__label{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--size-small .stzh-dropdown__sizer{padding:var(--stzh-space-xxsmall) var(--stzh-space-medium);padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--plain .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain .stzh-dropdown__sizer{border:none;padding-left:0;padding-right:calc(var(--stzh-icon-size-medium) + var(--stzh-space-xsmall))}.stzh-dropdown--plain .stzh-dropdown__icon-wrapper{left:0}.stzh-dropdown--plain .stzh-dropdown__icon-angle-wrapper{right:0}.stzh-dropdown--plain .stzh-dropdown__label{left:0;max-width:100%;padding:0}.stzh-dropdown--plain .stzh-dropdown__label::before{content:none}.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-top:0}.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--size-small .stzh-dropdown__sizer{padding-right:calc(var(--stzh-icon-size-small) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__sizer{padding-left:calc(var(--icon-size) + var(--stzh-space-xsmall))}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem)}.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--has-focus .stzh-dropdown__label{top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - (var(--stzh-space-medium) - var(--stzh-space-xxsmall)) * 2);pointer-events:all}.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before,.stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before{display:block}.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label{left:0;padding:0;max-width:100%}.stzh-dropdown--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{cursor:not-allowed}.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item,.stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item:hover{color:var(--stzh-color-grey25);background-color:var(--stzh-color-white);border-color:var(--stzh-base-border-color)}.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove,.stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-grey13);background-color:transparent}";
 
 const TomSelectInputReadonly = function (_plugin_options) {
   const self = this;
@@ -4937,6 +4966,7 @@ const StzhDropdown = class {
     this.popoverPlacement = "bottom";
     this.label = "";
     this.icon = "";
+    this.iconAngle = "angle-down";
     this.noSearch = false;
     this.noBackspaceDelete = false;
     this.invalid = false;
@@ -5133,7 +5163,7 @@ const StzhDropdown = class {
       render: {
         option: (data, escape) => {
           return `
-            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
+            <div class="stzh-dropdown__option">
               <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
               <span class="stzh-dropdown__option-title">
                 ${escape(data[this.labelField])}
@@ -5157,13 +5187,13 @@ const StzhDropdown = class {
         },
         no_results: (data, escape) => {
           return `
-            <div class="stzh-dropdown__no-results">
+            <div class="stzh-dropdown__no-results" id="${this.dropdownId}-no-results">
               ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}
             </div>`;
         },
         not_loading: this.load === null ? null : (_data, escape) => {
           return `
-            <div class="stzh-dropdown__not-loading">
+            <div class="stzh-dropdown__not-loading" id="${this.dropdownId}-not-loading">
               ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
             </div>
           `;
@@ -5339,15 +5369,20 @@ const StzhDropdown = class {
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
     };
-    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${!this.showMarker && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", null)), h("div", { class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ?
+      h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })
+      :
+        h("slot", { name: "icon-angle" })), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId, "aria-labelledby": `${this.dropdownId}-label-inner ${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}` }, h("span", { id: `${this.dropdownId}-label-inner` }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
+        h("slot", { name: "icon" })), h("label", { id: `${this.dropdownId}-label`, class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
       h("span", { class: "stzh-dropdown__marker" }, h("span", { class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-dropdown__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)), h("span", { class: "stzh-dropdown__vhidden" }, ".")))), h(StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+        : this.localization.$globals.optionalFieldText))), !this.showMarker && this.required &&
+      h("div", { id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText), this.invalid &&
+      h("div", { id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)), h(StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {