@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

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

@@ -0,0 +1,208 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { i as isStzhElement } from './utils-54aead01.js';
+import { w as waitForEvent } from './event-utils-d5f6817b.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-795e7c40.js';
+import './string-utils-e252977e.js';
+
+const stzhDetailsCss = ".sc-stzh-details-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-details-h{display:none}.sc-stzh-details-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-details-h .has-focus.sc-stzh-details{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details{outline-style:none !important}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details::-moz-focus-inner{border:0 !important}.sc-stzh-details-h{display:contents;--content-width:var(--stzh-details-content-width, 100%);--content-padding-left:0px;--content-padding-right:var(--stzh-details-content-padding-right, 0px);--content-background:transparent;--content-grid-column:var(--stzh-details-content-grid-column, inherit);--content-border-bottom:none;--content-padding-top:var(--stzh-details-content-padding-top, var(--stzh-space-medium));--content-padding-bottom:0}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{width:var(--content-width);overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}@media print{.stzh-details__content.sc-stzh-details{height:auto !important;overflow:visible !important;display:block !important}}.stzh-details__content-inner.sc-stzh-details{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-left:var(--content-padding-left);padding-right:var(--content-padding-right)}";
+
+const ANIMATION_SHOW = {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 300, easing: "linear" }
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 300, easing: "linear" }
+};
+let detailsCounter = 0;
+const StzhDetails = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = createEvent(this, "stzhOpened", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.stzhClosed = createEvent(this, "stzhClosed", 7);
+    this.toggledByMethod = false;
+    this.onClickTrigger = () => {
+      this.toggle();
+    };
+    this.open = false;
+  }
+  async openWatcher(newValue) {
+    if (!this.triggerElement) {
+      return;
+    }
+    if (this.triggerElement.firstElementChild) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+      this.triggerElement.firstElementChild
+        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", newValue ? "true" : "false");
+    }
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {
+        height: this.bodyElement.scrollHeight
+      }), ANIMATION_SHOW.options);
+      this.bodyElement.style.height = "auto";
+      this.bodyElement.style.overflow = "visible";
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.style.overflow = "hidden";
+      await animateTo(this.bodyElement, shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {
+        height: this.bodyElement.scrollHeight
+      }), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = "0px";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show accordion item content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide accordion item content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  componentWillLoad() {
+    this.detailsId = `stzh-details-${detailsCounter++}`;
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.bodyElement.style.height = this.open ? "auto" : "0px";
+    this.bodyElement.style.overflow = this.open ? "visible" : "hidden";
+    if (this.triggerElement.firstElementChild) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.detailsId}-content`);
+      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  connectedCallback() {
+    var _a;
+    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (!trigger) {
+      const defaultSlot = Array.from(this.element.children)
+        .find(child => !child.hasAttribute("slot"));
+      trigger = defaultSlot;
+    }
+    if (trigger) {
+      trigger.addEventListener("click", this.onClickTrigger);
+    }
+  }
+  disconnectedCallback() {
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-details": true,
+      "stzh-details--is-open": this.open
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-details__trigger" }, h("slot", null)), h("div", { id: `${this.detailsId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-details__content", "aria-labelledby": `${this.detailsId}-header` }, h("div", { class: "stzh-details__content-inner" }, h("slot", { name: "content" }))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"]
+  }; }
+};
+StzhDetails.style = stzhDetailsCss;
+
+const stzhMessageCss = ".sc-stzh-message-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";
+
+const StzhMessage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.onCloseButtonClick = () => {
+      this.hide();
+    };
+    this.label = "";
+    this.description = "";
+    this.type = "info";
+    this.hideClose = false;
+    this.localization = undefined;
+    this.open = true;
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-message"
+    });
+  }
+  async hide() {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-message"
+    });
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "message");
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-message": true,
+      "stzh-message--has-close-hidden": this.hideClose,
+      [`stzh-message--type-${this.type}`]: !!this.type,
+    };
+    return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("div", { class: "stzh-message__content" }, h("div", { class: "stzh-message__icon-wrapper" }, h("stzh-icon", { class: "stzh-message__icon", name: this.type === 'info' && "info-help-filled"
+        || this.type === 'success' && "checkmark-circle-filled"
+        || this.type === 'warning' && "important-warning-filled"
+        || this.type === 'error' && "warning-filled" })), h("div", { class: "stzh-message__text-wrapper" }, h("div", { class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-message__link" }, h("slot", { name: "link" })))), !this.hideClose &&
+      h("stzh-button", { class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))));
+  }
+  get element() { return getElement(this); }
+};
+StzhMessage.style = stzhMessageCss;
+
+export { StzhDetails as stzh_details, StzhMessage as stzh_message };
+
+//# sourceMappingURL=stzh-details_2.entry.js.map

package/dist/esm/stzh-details_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"stzh-details.stzh-message.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx","src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(--stzh-details-content-padding-top, #{space('medium')});\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", newValue ? \"true\" : \"false\");\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.detailsId}-content`);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !(child as HTMLElement).hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-details__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -4902,7 +4902,7 @@ function plugin () {
   });
 }
 
-const stzhDropdownCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-dropdown{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--height:var(--stzh-form-input-height);--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--icon-size:var(--stzh-icon-size-medium);--icon-color:var(--stzh-color-grey80);--icon-angle-size:var(--stzh-icon-size-medium);--icon-angle-color:var(--stzh-color-grey80);--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-label-color:var(--stzh-color-primary);--hover-icon-color:var(--stzh-color-primary70);--hover-icon-angle-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-label-color:var(--stzh-color-primary);--focus-icon-color:var(--stzh-color-primary70);--focus-icon-angle-color:var(--stzh-color-primary70);--active-icon-angle-transform:rotate(180deg) translateY(50%);--popover-width:100%;--popover-min-width:initial;--popover-max-width:initial;--popover-height:auto;--popover-min-height:initial;--popover-max-height:calc(4.5 * var(--stzh-menu-item-height));--popover-background-color:var(--stzh-popover-background-color);--popover-box-shadow:var(--stzh-box-shadow-popover);--popover-border-radius:var(--stzh-popover-border-radius);--popover-distance:var(--stzh-space-xsmall);--popover-skidding:0px;position:relative;width:100%;border-radius:var(--border-radius);}stzh-dropdown[hidden]{display:none}stzh-dropdown::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-dropdown::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-dropdown *,stzh-dropdown *::before,stzh-dropdown *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-dropdown .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-dropdown .stzh-fylingfocus-focused{outline-style:none !important}stzh-dropdown .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-dropdown[variant=plain]{--background-color:transparent;--hover-background-color:transparent;--hover-label-color:var(--stzh-color-primary90);--focus-background-color:transparent;--focus-label-color:var(--stzh-color-primary90)}stzh-dropdown[inline]:not([inline=false]){--popover-width:auto;width:auto}stzh-dropdown[size=small]{--height:var(--stzh-form-input-small-height);--icon-angle-size:var(--stzh-icon-size-small)}stzh-dropdown[is-filled]:not([is-filled=false]){--icon-color:var(--stzh-color-primary70);--icon-angle-color:var(--stzh-color-primary70);--hover-icon-color:var(--stzh-color-primary70);--hover-icon-angle-color:var(--stzh-color-primary70);--focus-icon-angle-color:var(--stzh-color-black);--focus-icon-color:var(--stzh-color-black)}stzh-dropdown[is-invalid]{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--icon-color:var(--stzh-color-error60);--icon-angle-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-label-color:var(--stzh-color-error60);--hover-icon-color:var(--stzh-color-error60);--hover-icon-angle-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-label-color:var(--stzh-color-error60);--focus-icon-color:var(--stzh-color-error60);--focus-icon-angle-color:var(--stzh-color-error60)}stzh-dropdown[disabled]:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--icon-color:var(--stzh-color-grey70);--icon-angle-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-label-color:var(--stzh-color-grey70);--hover-icon-color:var(--stzh-color-grey70);--hover-icon-angle-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-label-color:var(--stzh-color-grey70);--focus-icon-color:var(--stzh-color-grey70);--focus-icon-angle-color:var(--stzh-color-grey70)}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}stzh-dropdown:is(:has(.stzh-dropdown__label:hover)),stzh-dropdown:is(:has(.ts-control:hover)){--color:var(--hover-color);--border-color:var(--hover-border-color);--background-color:var(--hover-background-color);--label-color:var(--hover-label-color);--icon-color:var(--hover-icon-color);--icon-angle-color:var(--hover-icon-angle-color)}stzh-dropdown:is(:has(.ts-control:focus-within)){--color:var(--focus-color);--border-color:var(--focus-border-color);--background-color:var(--focus-background-color);--label-color:var(--focus-label-color);--icon-color:var(--focus-icon-color);--icon-angle-color:var(--focus-icon-angle-color)}.stzh-dropdown{}.stzh-dropdown__marker-symbol{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.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:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-dropdown__error,.stzh-dropdown__description{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-dropdown__error{color:var(--stzh-color-error60)}.stzh-dropdown__error-list{list-style:none;margin:0;padding:0}.stzh-dropdown__description{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__description-long{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-dropdown__description-long{margin-top:0}}.stzh-dropdown__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-dropdown__description-long-button{display:flex;justify-content: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}.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-xxxsmall)}.stzh-dropdown__wrapper{position:relative}.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{width:100%;overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch}.stzh-dropdown .ts-control{overflow:hidden;position:relative;display:flex;align-items:center;flex-wrap:wrap;min-height:var(--height);border-radius:var(--border-radius);background-color:var(--background-color);transition-property:border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown .ts-control>*{vertical-align:baseline;display:inline-block}.stzh-dropdown .ts-control,.stzh-dropdown .ts-control>input,.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-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);width:100%;border:0.125rem solid var(--border-color)}.stzh-dropdown .ts-control>input{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;user-select:auto;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: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__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item,.stzh-dropdown__icon-wrapper,.stzh-dropdown__icon-angle-wrapper{transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item{color:var(--color)}.stzh-dropdown__icon-wrapper{position:absolute;color:var(--icon-color)}.stzh-dropdown__icon-angle-wrapper{color:var(--icon-angle-color)}.stzh-dropdown__sizer{height:var(--height);display:flex;align-items:center;margin-top:calc(var(--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:flex;position:absolute;top: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:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--label-color);display:block;width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-dropdown__label:empty{display:none}.stzh-dropdown__marker{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-dropdown__option,.stzh-dropdown__create,.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-right:var(--stzh-space-large)}.stzh-dropdown__option,.stzh-dropdown__create{display:flex;align-items:center;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;color:var(--stzh-color-black);min-height:var(--stzh-menu-item-height);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-grey20)}.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__option.selected{color:var(--stzh-color-primary70)}.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[aria-disabled=true]{cursor:not-allowed;color:var(--stzh-color-grey70);background-color:var(--stzh-color-grey10)}.stzh-dropdown__create{display:block}.stzh-dropdown__option-title{flex-grow:1}.stzh-dropdown__option[data-selectable] .highlight{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-dropdown__option-check{display:none}.stzh-dropdown__no-results{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.stzh-dropdown__optgroup-header{cursor:default}.stzh-dropdown__loader{display:flex;align-items:center;justify-content:center;height:var(--stzh-menu-item-height)}.stzh-dropdown__dropdown{position:absolute;top:auto;left:auto;margin-top:var(--popover-distance);margin-left:var(--popover-skidding);transform:none;z-index:var(--stzh-z-index-popover);width:var(--popover-width);min-width:var(--popover-min-width);max-width:var(--popover-max-width);height:var(--popover-height);min-height:var(--popover-min-height);max-height:var(--popover-max-height);background-color:var(--popover-background-color);box-shadow:var(--popover-box-shadow);border-radius:var(--popover-border-radius)}.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{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{transform:var(--active-icon-angle-transform)}.stzh-dropdown--is-multiple .stzh-dropdown__option-check{display:inline-flex;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-xsmall)}.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:flex;flex-direction:row;align-items:center;border-radius:0.75rem;padding:0 var(--stzh-space-small);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:0.0625rem solid transparent;color:var(--stzh-color-primary70);background-color:var(--stzh-color-primary10);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-primary90);background-color:var(--stzh-color-primary20)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item.active{color:var(--stzh-color-white);background-color:var(--stzh-color-primary70)}.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item{display:inline-flex;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;transform:translateY(-50%);-webkit-text-decoration-line:none;text-decoration-line:none;width:1.5rem;height:1.5rem;border-radius:1.5rem;display:flex;justify-content:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--stzh-color-primary70);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-primary90);background-color:var(--stzh-color-primary30)}.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:calc(var(--popover-distance) - 1.21875rem)}.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%;transform:translateX(-50%)}.stzh-dropdown--popover-fullwidth-horizontal .stzh-dropdown__dropdown{left:0;right:0;transform:none}.stzh-dropdown--has-label-hidden .stzh-dropdown__label{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--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 .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-dropdown--is-multiple .stzh-dropdown__select.multi.has-items .ts-control{padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.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--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;z-index:1;position:absolute;margin:0;top:calc(var(--height) / 2);transform:translateY(-50%);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.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__label{left:calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall) + 0.0625rem)}.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--plain.stzh-dropdown--has-focus:not(.stzh-dropdown--has-no-search) .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label{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--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control,.stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control>input{cursor:pointer}.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-grey70);background-color:var(--stzh-color-white)}.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-grey70);background-color:transparent}";
+const stzhDropdownCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-dropdown{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-height);--border-radius:var(--stzh-form-input-border-radius);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--popover-distance:var(--stzh-space-xsmall);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);--multiple-padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem);--color:var(--stzh-color-secondary60);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-primary);--placeholder-color:var(--stzh-color-grey70);--icon-color:var(--stzh-color-primary70);--icon-angle-color:var(--stzh-color-primary70);--label-font-size:var(--stzh-font-micro-font-size);--label-line-height:var(--stzh-font-micro-font-size);--label-letter-spacing:normal;--hover-color:var(--stzh-color-secondary60);--hover-border-color:var(--stzh-color-secondary50);--hover-background-color:var(--stzh-color-white);--hover-label-color:var(--stzh-color-primary);--hover-icon-color:var(--stzh-color-primary70);--hover-icon-angle-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-label-color:var(--stzh-color-primary);--focus-icon-color:var(--stzh-color-primary70);--focus-icon-angle-color:var(--stzh-color-primary70);--active-icon-angle-transform:rotate(180deg) translateY(50%);--popover-width:100%;--popover-min-width:initial;--popover-max-width:initial;--popover-height:auto;--popover-min-height:initial;--popover-max-height:calc(4.5 * var(--stzh-menu-item-height));--popover-background-color:var(--stzh-popover-background-color);--popover-box-shadow:var(--stzh-box-shadow-popover);--popover-border-radius:var(--stzh-popover-border-radius);--popover-skidding:0px;position:relative;width:100%;border-radius:var(--border-radius);}stzh-dropdown[hidden]{display:none}stzh-dropdown::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-dropdown::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-dropdown *,stzh-dropdown *::before,stzh-dropdown *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-dropdown .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-dropdown .stzh-fylingfocus-focused{outline-style:none !important}stzh-dropdown .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-dropdown:where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([variant=\"filter\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--border-radius:1rem;--height:2rem;--outer-height:2.5rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-xsmall);--icon-size:var(--stzh-icon-size-xsmall);--icon-angle-size:var(--stzh-icon-size-xsmall);--remove-gap:var(--stzh-space-small);--popover-distance:calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2)}@media screen and (min-width: 900px){stzh-dropdown:where([variant=\"filter\"]){--outer-height:auto;--popover-distance:var(--stzh-space-xsmall)}}stzh-dropdown:where([inline]:not([inline=\"false\"])){--popover-width:auto;width:auto}stzh-dropdown:where([is-filled]:not([is-filled=\"false\"])){--icon-color:var(--stzh-color-primary70);--icon-angle-color:var(--stzh-color-primary70);--hover-icon-color:var(--stzh-color-primary70);--hover-icon-angle-color:var(--stzh-color-primary70);--focus-icon-angle-color:var(--stzh-color-black);--focus-icon-color:var(--stzh-color-black)}stzh-dropdown:where([variant=\"plain\"]){--background-color:transparent;--hover-background-color:transparent;--hover-label-color:var(--stzh-color-primary90);--hover-icon-color:var(--stzh-color-primary90);--hover-icon-angle-color:var(--stzh-color-primary90);--focus-background-color:transparent;--focus-label-color:var(--stzh-color-primary90);--focus-icon-color:var(--stzh-color-primary90);--focus-icon-angle-color:var(--stzh-color-primary90)}stzh-dropdown:where([variant=\"plain\"][is-filled]:not([is-filled=\"false\"])){--icon-color:var(--stzh-color-secondary60);--icon-angle-color:var(--stzh-color-secondary60);--hover-icon-color:var(--stzh-color-secondary60);--hover-icon-angle-color:var(--stzh-color-secondary60)}stzh-dropdown:where([variant=\"filter\"]){--color:var(--stzh-chip-color, var(--stzh-color-primary70));--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--label-color:var(--color);--icon-color:var(--color);--icon-angle-color:var(--color);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(--stzh-chip-hover-background-color, var(--stzh-color-secondary40));--hover-label-color:var(--hover-color);--hover-icon-color:var(--hover-color);--hover-icon-angle-color:var(--hover-color);--focus-color:var(--hover-color);--focus-background-color:var(--hover-background-color);--focus-label-color:var(--hover-label-color);--focus-icon-color:var(--hover-icon-color);--focus-icon-angle-color:var(--hover-icon-angle-color)}stzh-dropdown:where([variant=\"filter\"][is-filled]:not([is-filled=\"false\"])){--color:var(--stzh-chip-active-color, var(--stzh-color-white));--background-color:var(--stzh-chip-active-background-color, var(--stzh-color-primary70));--hover-color:var(--stzh-chip-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-chip-active-hover-background-color, var(--stzh-color-primary90))}stzh-dropdown[is-invalid]{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--icon-color:var(--stzh-color-error60);--icon-angle-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-label-color:var(--stzh-color-error60);--hover-icon-color:var(--stzh-color-error60);--hover-icon-angle-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-label-color:var(--stzh-color-error60);--focus-icon-color:var(--stzh-color-error60);--focus-icon-angle-color:var(--stzh-color-error60)}stzh-dropdown[disabled]:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--icon-color:var(--stzh-color-grey70);--icon-angle-color:var(--stzh-color-grey70);--hover-color:var(--color);--hover-border-color:var(--border-color);--hover-background-color:var(--background-color);--hover-label-color:var(--label-color);--hover-icon-color:var(--icon-color);--hover-icon-angle-color:var(--icon-angle-color);--focus-color:var(--color);--focus-border-color:var(--border-color);--focus-background-color:var(--background-color);--focus-label-color:var(--label-color);--focus-icon-color:var(--icon-color);--focus-icon-angle-color:var(--icon-angle-color)}stzh-dropdown[disabled]:not([disabled=false])[variant=plain]{--background-color:transparent}stzh-dropdown[disabled]:not([disabled=false])[variant=filter]{--color:var(--stzh-chip-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-chip-disabled-background-color, var(--stzh-color-grey20));--label-color:var(--color);--placeholder-color:var(--color);--icon-color:var(--color);--icon-angle-color:var(--color);--description-color:var(--stzh-color-grey70)}stzh-dropdown:is(:has(.stzh-dropdown__label:hover)),stzh-dropdown:is(:has(.ts-control:hover)){--color:var(--hover-color);--border-color:var(--hover-border-color);--background-color:var(--hover-background-color);--label-color:var(--hover-label-color);--icon-color:var(--hover-icon-color);--icon-angle-color:var(--hover-icon-angle-color)}stzh-dropdown:is(:has(.ts-control:focus-within)){--color:var(--focus-color);--border-color:var(--focus-border-color);--background-color:var(--focus-background-color);--label-color:var(--focus-label-color);--icon-color:var(--focus-icon-color);--icon-angle-color:var(--focus-icon-angle-color)}stzh-dropdown:where([size=\"large\"]):where([variant=\"filter\"]){--height:2.5rem;--border-radius:1.25rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-small);--remove-gap:var(--stzh-space-medium)}stzh-dropdown:where([size=\"small\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-small-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size=\"small\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size=\"small\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xsmall)}stzh-dropdown:where([size=\"tiny\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-tiny-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size=\"tiny\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size=\"tiny\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px}@media screen and (min-width: 600px){stzh-dropdown:where([size-small=\"default\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-height);--border-radius:var(--stzh-form-input-border-radius);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--popover-distance:var(--stzh-space-xsmall);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);--multiple-padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}stzh-dropdown:where([size-small=\"default\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-small=\"default\"]):where([variant=\"filter\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--border-radius:1rem;--height:2rem;--outer-height:2.5rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-xsmall);--icon-size:var(--stzh-icon-size-xsmall);--icon-angle-size:var(--stzh-icon-size-xsmall);--remove-gap:var(--stzh-space-small);--popover-distance:calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2)}}@media screen and (min-width: 600px) and (min-width: 900px){stzh-dropdown:where([size-small=\"default\"]):where([variant=\"filter\"]){--outer-height:auto;--popover-distance:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){stzh-dropdown:where([size-small=\"large\"]):where([variant=\"filter\"]){--height:2.5rem;--border-radius:1.25rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-small);--remove-gap:var(--stzh-space-medium)}}@media screen and (min-width: 600px){stzh-dropdown:where([size-small=\"small\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-small-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-small=\"small\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-small=\"small\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){stzh-dropdown:where([size-small=\"tiny\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-tiny-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-small=\"tiny\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-small=\"tiny\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px}}@media screen and (min-width: 900px){stzh-dropdown:where([size-medium=\"default\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-height);--border-radius:var(--stzh-form-input-border-radius);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--popover-distance:var(--stzh-space-xsmall);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);--multiple-padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}stzh-dropdown:where([size-medium=\"default\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-medium=\"default\"]):where([variant=\"filter\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--border-radius:1rem;--height:2rem;--outer-height:2.5rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-xsmall);--icon-size:var(--stzh-icon-size-xsmall);--icon-angle-size:var(--stzh-icon-size-xsmall);--remove-gap:var(--stzh-space-small);--popover-distance:calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2)}}@media screen and (min-width: 900px) and (min-width: 900px){stzh-dropdown:where([size-medium=\"default\"]):where([variant=\"filter\"]){--outer-height:auto;--popover-distance:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){stzh-dropdown:where([size-medium=\"large\"]):where([variant=\"filter\"]){--height:2.5rem;--border-radius:1.25rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-small);--remove-gap:var(--stzh-space-medium)}}@media screen and (min-width: 900px){stzh-dropdown:where([size-medium=\"small\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-small-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-medium=\"small\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-medium=\"small\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){stzh-dropdown:where([size-medium=\"tiny\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-tiny-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-medium=\"tiny\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-medium=\"tiny\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px}}@media screen and (min-width: 1260px){stzh-dropdown:where([size-large=\"default\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-height);--border-radius:var(--stzh-form-input-border-radius);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--popover-distance:var(--stzh-space-xsmall);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);--multiple-padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}stzh-dropdown:where([size-large=\"default\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-large=\"default\"]):where([variant=\"filter\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--border-radius:1rem;--height:2rem;--outer-height:2.5rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-xsmall);--icon-size:var(--stzh-icon-size-xsmall);--icon-angle-size:var(--stzh-icon-size-xsmall);--remove-gap:var(--stzh-space-small);--popover-distance:calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2)}}@media screen and (min-width: 1260px) and (min-width: 900px){stzh-dropdown:where([size-large=\"default\"]):where([variant=\"filter\"]){--outer-height:auto;--popover-distance:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){stzh-dropdown:where([size-large=\"large\"]):where([variant=\"filter\"]){--height:2.5rem;--border-radius:1.25rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-small);--remove-gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){stzh-dropdown:where([size-large=\"small\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-small-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-large=\"small\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-large=\"small\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){stzh-dropdown:where([size-large=\"tiny\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-tiny-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-large=\"tiny\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-large=\"tiny\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px}}@media screen and (min-width: 1600px){stzh-dropdown:where([size-ultra=\"default\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-height);--border-radius:var(--stzh-form-input-border-radius);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--popover-distance:var(--stzh-space-xsmall);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:calc(var(--stzh-space-xsmall) - 0.0625rem);--multiple-padding-bottom:calc(var(--stzh-space-xsmall) - 0.0625rem)}stzh-dropdown:where([size-ultra=\"default\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-ultra=\"default\"]):where([variant=\"filter\"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--border-radius:1rem;--height:2rem;--outer-height:2.5rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-xsmall);--icon-size:var(--stzh-icon-size-xsmall);--icon-angle-size:var(--stzh-icon-size-xsmall);--remove-gap:var(--stzh-space-small);--popover-distance:calc(var(--stzh-space-xsmall) - (var(--outer-height) - var(--height)) / 2)}}@media screen and (min-width: 1600px) and (min-width: 900px){stzh-dropdown:where([size-ultra=\"default\"]):where([variant=\"filter\"]){--outer-height:auto;--popover-distance:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){stzh-dropdown:where([size-ultra=\"large\"]):where([variant=\"filter\"]){--height:2.5rem;--border-radius:1.25rem;--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-small);--remove-gap:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){stzh-dropdown:where([size-ultra=\"small\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-small-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-ultra=\"small\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-ultra=\"small\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){stzh-dropdown:where([size-ultra=\"tiny\"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--height:var(--stzh-form-input-tiny-height);--icon-size:var(--stzh-icon-size-medium);--icon-angle-size:var(--stzh-icon-size-medium);--padding-top:var(--stzh-space-xxsmall);--padding-bottom:var(--stzh-space-xxsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--icon-gap:var(--stzh-space-xsmall);--icon-angle-gap:var(--stzh-space-xsmall);--remove-gap:var(--stzh-space-xxsmall);--multiple-padding-top:var(--stzh-space-xxsmall);--multiple-padding-bottom:var(--stzh-space-xxsmall)}stzh-dropdown:where([size-ultra=\"tiny\"]):where([variant=\"plain\"]){--padding-left:0px;--padding-right:0px}stzh-dropdown:where([size-ultra=\"tiny\"]):where([variant=\"filter\"]){--padding-top:0px;--padding-bottom:0px}}.stzh-dropdown{}.stzh-dropdown__marker-symbol{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.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:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-dropdown__error,.stzh-dropdown__description{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-dropdown__error{color:var(--stzh-color-error60)}.stzh-dropdown__error-list{list-style:none;margin:0;padding:0}.stzh-dropdown__description{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__description-long{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-dropdown__description-long{margin-top:0}}.stzh-dropdown__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-dropdown__description-long-button{display:flex;justify-content: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}.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-xxxsmall)}.stzh-dropdown__wrapper{position:relative}.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{width:100%;overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch}.stzh-dropdown .ts-wrapper{display:flex;align-items:center;min-height:var(--outer-height)}.stzh-dropdown .ts-control{overflow:hidden;position:relative;display:flex;align-items:center;flex-wrap:wrap;min-height:var(--height);border-radius:var(--border-radius);background-color:var(--background-color);transition-property:border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-dropdown .ts-control>*{vertical-align:baseline;display:inline-block}.stzh-dropdown .ts-control,.stzh-dropdown .ts-control>input,.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-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);width:100%;border:0.125rem solid var(--border-color)}.stzh-dropdown .ts-control>input{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;user-select:auto;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: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__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item,.stzh-dropdown__icon-wrapper,.stzh-dropdown__icon-angle-wrapper{transition:color var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select .ts-control>input,.stzh-dropdown__select.single .stzh-dropdown__item{color:var(--color)}.stzh-dropdown__sizer{height:var(--height);display:flex;align-items:center;margin-top:calc(var(--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-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:calc(var(--icon-angle-size) + var(--icon-angle-gap) + var(--padding-right))}.stzh-dropdown__icon-wrapper,.stzh-dropdown__icon-angle-wrapper{display:flex;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.stzh-dropdown__icon-wrapper{left:var(--padding-left);color:var(--icon-color)}.stzh-dropdown__icon-angle-wrapper{right:var(--padding-right);color:var(--icon-angle-color)}.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:var(--stzh-font-style-heavy);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--label-font-size);line-height:var(--label-line-height);letter-spacing:var(--label-letter-spacing);color:var(--label-color);display:block;width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-dropdown__label:empty{display:none}.stzh-dropdown__marker{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-dropdown__option,.stzh-dropdown__create,.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-right:var(--stzh-space-large)}.stzh-dropdown__option,.stzh-dropdown__create{display:flex;align-items:center;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;color:var(--stzh-color-black);min-height:var(--stzh-menu-item-height);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-grey20)}.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__option.selected{color:var(--stzh-color-primary70)}.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[aria-disabled=true]{cursor:not-allowed;color:var(--stzh-color-grey70);background-color:var(--stzh-color-grey10)}.stzh-dropdown__create{display:block}.stzh-dropdown__option-title{flex-grow:1}.stzh-dropdown__option[data-selectable] .highlight{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-dropdown__option-check{display:none}.stzh-dropdown__no-results{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.stzh-dropdown__optgroup-header{cursor:default}.stzh-dropdown__loader{display:flex;align-items:center;justify-content:center;height:var(--stzh-menu-item-height)}.stzh-dropdown__dropdown{position:absolute;top:auto;left:auto;white-space:nowrap;margin-top:var(--popover-distance);margin-left:var(--popover-skidding);transform:none;z-index:var(--stzh-z-index-popover);width:var(--popover-width);min-width:var(--popover-min-width);max-width:var(--popover-max-width);height:var(--popover-height);min-height:var(--popover-min-height);max-height:var(--popover-max-height);background-color:var(--popover-background-color);box-shadow:var(--popover-box-shadow);border-radius:var(--popover-border-radius)}.stzh-dropdown__remove-icon{--size:var(--stzh-icon-size-xxsmall)}.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{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{transform:var(--active-icon-angle-transform)}.stzh-dropdown--is-multiple .stzh-dropdown__option-check{display:inline-flex;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-xsmall)}.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:var(--multiple-padding-top);padding-bottom:var(--multiple-padding-bottom)}.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:flex;flex-direction:row;align-items:center;border-radius:0.75rem;padding:0 var(--stzh-space-small);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:0.0625rem solid transparent;color:var(--stzh-color-primary70);background-color:var(--stzh-color-primary10);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-primary90);background-color:var(--stzh-color-primary20)}.stzh-dropdown--is-multiple .stzh-dropdown__select.multi .stzh-dropdown__item.active{color:var(--stzh-color-white);background-color:var(--stzh-color-primary70)}.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item,.stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item{display:inline-flex;align-items:center;gap:var(--remove-gap);padding-right:0px}.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{position:relative;right:-0.0625rem;-webkit-text-decoration-line:none;text-decoration-line:none;width:1.5rem;height:1.5rem;border-radius:1.5rem;display:flex;justify-content:center;align-items:center;color:var(--stzh-color-primary70);transition:all var(--stzh-base-transition-animation-speed)}.stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-primary90);background-color:var(--stzh-color-primary30)}.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:calc(var(--popover-distance) - 1.21875rem)}.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%;transform:translateX(-50%)}.stzh-dropdown--popover-fullwidth-horizontal .stzh-dropdown__dropdown{left:0;right:0;transform:none}.stzh-dropdown--has-label-hidden .stzh-dropdown__label{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--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(--padding-left) + var(--icon-size) + var(--icon-gap))}.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}.stzh-dropdown--plain .stzh-dropdown__label{left:0;max-width:100%;padding:0;z-index:1;position:absolute;margin:0;top:50%;transform:translateY(-50%);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-dropdown--plain .stzh-dropdown__label::before{content:none}.stzh-dropdown--plain .stzh-dropdown__dropdown{margin-top:0}.stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--icon-size) + var(--icon-gap))}.stzh-dropdown--plain.stzh-dropdown--has-focus:not(.stzh-dropdown--has-no-search) .stzh-dropdown__label,.stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label{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--has-no-search .ts-control>input{position:absolute;width:0px;height:0px}.stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control,.stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control>input{cursor:pointer}.stzh-dropdown--filter .stzh-dropdown__select.single .ts-control,.stzh-dropdown--filter .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--filter .stzh-dropdown__sizer{border:none}.stzh-dropdown--filter .stzh-dropdown__label{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);left:var(--padding-left);max-width:100%;padding:0;z-index:1;position:absolute;margin:0;top:50%;transform:translateY(-50%);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-dropdown--filter .stzh-dropdown__label::before{content:none}.stzh-dropdown--filter.stzh-dropdown--has-icon .stzh-dropdown__label{left:calc(var(--padding-left) + var(--icon-size) + var(--icon-gap))}.stzh-dropdown--filter.stzh-dropdown--has-focus:not(.stzh-dropdown--has-no-search) .stzh-dropdown__label,.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__label{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--filter .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove{color:var(--stzh-color-primary70);background-color:var(--stzh-color-secondary30);width:var(--height);height:var(--height);border-top-left-radius:0px;border-bottom-left-radius:0px}.stzh-dropdown--filter .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove:hover{color:var(--stzh-color-black);background-color:var(--stzh-color-secondary40)}.stzh-dropdown--filter .stzh-dropdown__remove-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__icon-angle-wrapper{display:none}.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__select.single .ts-control,.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__select.multi .ts-control,.stzh-dropdown--filter.stzh-dropdown--is-filled .stzh-dropdown__sizer{padding-right: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-grey70);background-color:var(--stzh-color-white)}.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-grey70);background-color:transparent}";
 
 const TomSelectInputReadonly = function (_plugin_options) {
   const self = this;
@@ -4972,6 +4972,10 @@ const StzhDropdown = class {
     this.isOpen = false;
     this.variant = "default";
     this.size = "default";
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.disabled = false;
     this.popoverPlacement = "bottom";
     this.popoverFullwidth = "";
@@ -5089,7 +5093,8 @@ const StzhDropdown = class {
     return this.tomSelect.close();
   }
   updateFilled() {
-    if (this._items.length > 0) {
+    var _a;
+    if (((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.rootElement.classList.add(CLASS_FILLED);
       this.element.setAttribute("is-filled", "true");
     }
@@ -5111,7 +5116,7 @@ const StzhDropdown = class {
     }
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
-    return ["isOpen"].includes(prop) === false;
+    return ["isOpen", "value"].includes(prop) === false;
   }
   async componentWillUpdate() {
     if (this.tomSelect) {
@@ -5135,6 +5140,8 @@ const StzhDropdown = class {
     }
     if (this.multiple) {
       plugins["checkbox_options"] = {};
+    }
+    if (this.multiple || this.variant === "filter") {
       plugins["remove_button"] = {
         title: this.localization.removeButtonTitle,
         label: '<stzh-icon name="close-big" class="stzh-dropdown__remove-icon"></stzh-icon>'
@@ -5369,6 +5376,7 @@ const StzhDropdown = class {
     if (this._items) {
       tomSelectOptions.items = this._items;
     }
+    this.updateFilled();
     this.tomSelect = new TomSelect(this.select, tomSelectOptions);
     if (!this.openOnFocus) {
       // we still want to enable opening the dropdown by click
@@ -5416,7 +5424,8 @@ const StzhDropdown = class {
         ? 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("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.hideOptional && 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 ?
+        : this.localization.$globals.optionalFieldText))), 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.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", null)), this.inline && this.label &&
+      h("div", { class: "stzh-dropdown__sizer" }, this.label), 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 ?