@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/{p-b9a50363.js → p-c5a240bd.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$3 } from './p-17efbc57.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-0ac64574.js';
+import { d as defineCustomElement$3 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$2 } from './p-7c4e756c.js';
+import { d as defineCustomElement$1 } from './p-111f7e01.js';
 
 const stzhClampCss = ":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],:host[stzh-hidden]{display:none}: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-clamp{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;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::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-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 900px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    )}}@media screen and (min-width: 1600px){stzh-clamp{--current-lines:var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    )}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}@media screen and (min-width: 900px){.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";
 const StzhClampStyle0 = stzhClampCss;
@@ -94,13 +94,13 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends H {
             "stzh-clamp": true,
             "stzh-clamp--is-not-expanded": !this.expanded,
         };
-        return (h(Host, { key: 'ce2564683bb369204b34d6172388b15af81ed849', style: {
+        return (h(Host, { key: '30e87a53eed4c18ac3b98973d14fa5814bc4727c', style: {
                 "--lines": this.lines ? this.lines.toString() : null,
                 "--lines-small": this.linesSmall ? this.linesSmall.toString() : null,
                 "--lines-medium": this.linesMedium ? this.linesMedium.toString() : null,
                 "--lines-large": this.linesLarge ? this.linesLarge.toString() : null,
                 "--lines-ultra": this.linesUltra ? this.linesUltra.toString() : null,
-            } }, h("div", { key: '56f31cdbcd4b3fa77c03b2935772a22037d65690', class: classes }, h("div", { key: '7176aa165e8ab282b88881382e0482ec9c7b186c', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: '45a9d189f108270afe090fe1f5ec81ee965efa85' })), h("div", { key: 'd6e1bbac98926f8571d8abe521e72b1072e89a9b', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'f5ee1f3dbf26525b06e68bc05cb41968dbc51c41', class: "stzh-clamp__trigger", a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
+            } }, h("div", { key: '3338d81ec65be721ae83ee51acafd05c46f5650c', class: classes }, h("div", { key: 'c84ae325487f0118f60df2b700e42c17189ae85b', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: 'f6f7ac8362f8bdcc2ece90c7647200e02f162fca' })), h("div", { key: 'bf1b33ee613175cae4eaffdbfbd7525c29c48915', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: '0b65923f6e740e56a2fea343a91d3a701a61130c', class: "stzh-clamp__trigger", a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
     }
     get element() { return this; }
     static get style() { return StzhClampStyle0; }
@@ -147,4 +147,4 @@ function defineCustomElement() {
 
 export { StzhClamp as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b9a50363.js.map
+//# sourceMappingURL=p-c5a240bd.js.map

package/dist/components/{p-b9a50363.js.map → p-c5a240bd.js.map}

@@ -1 +1 @@
-{"file":"p-b9a50363.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-c5a240bd.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-f6b75419.js → p-d48fd359.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { c as camelCase, h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$3 } from './p-7c4e756c.js';
+import { d as defineCustomElement$2 } from './p-963d59bf.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
 
 const stzhRadiogroupCss = ".sc-stzh-radiogroup-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-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::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-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{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-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{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);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{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-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}";
 const StzhRadiogroupStyle0 = stzhRadiogroupCss;
@@ -181,11 +181,11 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class StzhRadiogroup ext
             "stzh-radiogroup--hide-legend": this.hideLegend,
             [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,
         };
-        return (h(Host, { key: '8e99dacb2df403dff3b951adbbb682db6aa6426b', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: 'b75b7af62c12da9a88ce74dff622f31f67e53e1f', class: classes }, this.legend && (h("legend", { key: '8ddab774206660de15f74ac22c76a3970f77f19d', class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { key: 'd8d37a3b867318c096a7af40212d1a94afb5032f', class: "stzh-radiogroup__marker" }, h("span", { key: '563a6dc72f321c1bab5de50f1820a3b8b76274ae', class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: 'ccfcdc486fdd9cb8a6aff8a79c75bb95b322dc2f', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: '09cb7063c5bfa998df383a1838b6e0355dfb456b', class: classes }, this.legend && (h("legend", { key: '3504e81a24fd44b2d55deabb327c53e93e46825a', class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { key: '50a95a5b9a6026fdbbfbb126dd9ed462c9623557', class: "stzh-radiogroup__marker" }, h("span", { key: 'aa448db2f22303696236c36e8633d4cec1938575', class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'e6572170cdbb8e5d625fb5054d4a971cc0cf4d3b', class: "stzh-radiogroup__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '27684df021ec72f7bd6c65b63cc665aa32432851', class: "stzh-radiogroup__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), h("div", { key: '4cde77b6e7a220b9c83e41468904f5c644b7c1ee', class: "stzh-radiogroup__fields" }, h("slot", { key: 'f861e8ba051d15a78e8bac1098b2fc5c7e60482a' })), (this.errorUsed || this.description) && (h(StzhInputDescription, { key: 'e269f6d99f4fc24e43163436df61d57828504943', classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText))))), h("div", { key: 'b2787c7d5da95a99cd4d2ceabee711676543232a', class: "stzh-radiogroup__fields" }, h("slot", { key: '5fe6ef8b81698831e4d28133d22c1656208ac9fb' })), (this.errorUsed || this.description) && (h(StzhInputDescription, { key: '902d3a52b6486764c160d22a7f93406ba8bfd91c', classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -254,4 +254,4 @@ function defineCustomElement() {
 
 export { StzhRadiogroup as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-f6b75419.js.map
+//# sourceMappingURL=p-d48fd359.js.map

package/dist/components/{p-f6b75419.js.map → p-d48fd359.js.map}

@@ -1 +1 @@
-{"file":"p-f6b75419.js","mappings":"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","names":[],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-d48fd359.js","mappings":"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","names":[],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-5e70f03f.js → p-d6702563.js}

@@ -3,14 +3,14 @@ import { h as hasSlot } from './p-289f5de2.js';
 import { m as media } from './p-f4adb3cd.js';
 import { t as tabbable, c as createFocusTrap } from './p-f48422c4.js';
 import { c as createBaseFocusTrapOptions } from './p-a62948ad.js';
-import { d as defineCustomElement$8 } from './p-b5f00d83.js';
-import { d as defineCustomElement$7 } from './p-17efbc57.js';
-import { d as defineCustomElement$6 } from './p-e42121d1.js';
-import { d as defineCustomElement$5 } from './p-5a8587ab.js';
-import { d as defineCustomElement$4 } from './p-0ac64574.js';
-import { d as defineCustomElement$3 } from './p-33ac52bc.js';
-import { d as defineCustomElement$2 } from './p-25ff5360.js';
-import { d as defineCustomElement$1 } from './p-6268e18b.js';
+import { d as defineCustomElement$8 } from './p-1cfd0791.js';
+import { d as defineCustomElement$7 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$6 } from './p-4a78990f.js';
+import { d as defineCustomElement$5 } from './p-7c4e756c.js';
+import { d as defineCustomElement$4 } from './p-111f7e01.js';
+import { d as defineCustomElement$3 } from './p-e5cf7853.js';
+import { d as defineCustomElement$2 } from './p-26edabbb.js';
+import { d as defineCustomElement$1 } from './p-963d59bf.js';
 
 const stzhHeaderCss = ".sc-stzh-header-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-header-h,[stzh-hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::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-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}.sc-stzh-header-h{--logo-width:var(--stzh-header-logo-width, auto);--logo-height:100%;--logobar-background-color:var(--stzh-header-logobar-background-color);--metabar-background-color:var(\n    --stzh-header-metabar-background-color,\n    var(--stzh-color-coolgrey10)\n  );--menu-background-color:var(\n    --stzh-header-menu-background-color,\n    var(--stzh-color-secondary30)\n  );--menu-list-item-background-hover:var(\n    --stzh-header-menu-list-item-background-hover,\n    var(--stzh-color-secondary40)\n  );--menu-list-item-background-level2:var(\n    --stzh-header-menu-list-item-background-level2,\n    var(--stzh-color-secondary20)\n  );--menu-list-item-background-level2-hover:var(\n    --stzh-header-menu-list-item-background-level2-hover,\n    var(--stzh-color-secondary10)\n  );--menu-item-color:var(--stzh-header-menu-item-color, var(--stzh-color-primary70));--metanav-item-color:var(--stzh-header-metanav-item-color, var(--stzh-color-grey90))}@media print{.sc-stzh-header-h{display:none}}[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:1.9375rem}@media screen and (min-width: 900px){[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:2.1875rem}}@media screen and (min-width: 1600px){[logo-type=aoz].sc-stzh-header-h,[logo-type=pkzh].sc-stzh-header-h,[logo-type=uvz].sc-stzh-header-h{--logo-height:3.3125rem}}[logo-type=vbz].sc-stzh-header-h{--logo-height:1.8125rem}@media screen and (min-width: 900px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.3125rem}}@media screen and (min-width: 1600px){[logo-type=vbz].sc-stzh-header-h{--logo-height:3.75rem}}.sc-stzh-header-h[logo-type=vbz].sc-stzh-header-s>[slot=logo],.sc-stzh-header-h[logo-type=vbz] .sc-stzh-header-s>[slot=logo]{align-self:center}.sc-stzh-header-h.sc-stzh-header-s>[slot=logo],.sc-stzh-header-h .sc-stzh-header-s>[slot=logo]{width:var(--logo-width);height:var(--logo-height)}.stzh-header.sc-stzh-header{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);color:var(--stzh-color-grey90)}.stzh-header__inner.sc-stzh-header,.stzh-header__main.sc-stzh-header{max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-header__inner.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__main.sc-stzh-header{display:flex;flex-direction:column;background-color:var(--stzh-color-white)}@media screen and (max-width: 599px){.stzh-header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header)}}.stzh-header__metabar.sc-stzh-header{background-color:var(--metabar-background-color)}.stzh-header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;display:flex;align-items:center;height:4rem}@media screen and (min-width: 600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-header__metabar-inner.sc-stzh-header{height:4rem}}.stzh-header__burger.sc-stzh-header,.stzh-header__search.sc-stzh-header,.stzh-header__metanav-item.sc-stzh-header{color:var(--metanav-item-color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__burger.sc-stzh-header:hover,.stzh-header__search.sc-stzh-header:hover,.stzh-header__metanav-item.sc-stzh-header:hover{color:var(--stzh-color-black)}.stzh-header__burger.sc-stzh-header{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-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;appearance:none;background-color:transparent;border:none;padding:0;margin-right:var(--stzh-space-medium);gap:var(--stzh-space-medium);color:var(--menu-item-color)}@media screen and (min-width: 600px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__burger.sc-stzh-header{margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__burger-icon.is-open.sc-stzh-header{display:none}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__burger.is-open.sc-stzh-header .stzh-header__burger-icon.is-close.sc-stzh-header{display:none}@media screen and (max-width: 599px){.stzh-header__burger-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-search.sc-stzh-header{overflow:hidden;margin-right:var(--stzh-space-medium);transition-property:width;transition-duration:var(--stzh-base-transition-animation-speed);width:2.5rem;max-width:21.5625rem}.stzh-header__metabar-search.sc-stzh-header:focus-within{width:100%}@media screen and (min-width: 600px){.stzh-header__metabar-search.sc-stzh-header{width:6rem;margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-search.sc-stzh-header{width:10rem;margin-left:0;margin-right:var(--stzh-space-xxxxlarge)}}.stzh-header__search.sc-stzh-header{position:relative;display:block;width:100%}.stzh-header__search-input.sc-stzh-header{width:100%;max-width:100%;background-color:transparent;color:transparent;font-family:inherit;font-size:inherit;border:none;padding:var(--stzh-space-xsmall);padding-left:0;padding-right:0;height:var(--stzh-form-input-small-height);transition-property:padding-left, padding-right, background-color, color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__search-input.sc-stzh-header{color:var(--stzh-color-secondary60);padding-left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}}.stzh-header__search-input.sc-stzh-header:focus{color:var(--stzh-color-secondary60);background-color:var(--stzh-color-white);padding-left:calc(\n        var(--stzh-space-medium) + var(--stzh-icon-size) + var(--stzh-space-medium)\n      );padding-right:var(--stzh-space-xlarge)}.stzh-header__search-input.sc-stzh-header:-webkit-autofill{background-clip:text}.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-decoration,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-cancel-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-button,.stzh-header__search-input[type=search].sc-stzh-header::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-icon.sc-stzh-header,.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{transform:translate(var(--stzh-space-medium), -50%)}.stzh-header__search-input.sc-stzh-header:focus~.stzh-header__search-text.sc-stzh-header{color:var(--stzh-color-grey70)}.stzh-header__search-text.sc-stzh-header,.stzh-header__search-icon.sc-stzh-header{position:absolute;top:50%;transform:translate(0, -50%);transition:transform var(--stzh-base-transition-animation-speed)}.stzh-header__search-icon.sc-stzh-header{left:0px}@media screen and (max-width: 599px){.stzh-header__search-icon.sc-stzh-header{transform:translate(0.5rem, -50%)}}.stzh-header__search-text.sc-stzh-header{pointer-events:none;left:calc(var(--stzh-icon-size) + var(--stzh-space-medium))}@media screen and (max-width: 599px){.stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metabar-nav.sc-stzh-header{display:flex;align-items:center;margin-left:auto;gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__metabar-nav.sc-stzh-header{gap:var(--stzh-space-xxlarge)}}.stzh-header__metanav-popover.sc-stzh-header{--width:auto;--min-width:15.875rem;--background-color:var(--stzh-color-coolgrey10)}.stzh-header__metanav-popover.is-langnav.sc-stzh-header{--min-width:8.75rem}.stzh-header__metanav-item.sc-stzh-header{display:none;gap:var(--stzh-space-small);align-items:center;justify-content:center;appearance:none;background-color:transparent;padding:0;border:none;text-decoration:none;font-size:100%;font-family:inherit;white-space:nowrap;min-width:2.5rem}@media screen and (min-width: 900px){.stzh-header__metanav-item.sc-stzh-header{display:flex}}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header{color:var(--stzh-color-primary70)}.stzh-header__metanav-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-item.is-stay.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-mobile.sc-stzh-header{display:none}}.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__metanav-item.is-popover-desktop.sc-stzh-header{display:flex}}.stzh-header__metanav-menu-item.is-heavy.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-header__metanav-menu-item--extra.sc-stzh-header{margin-top:var(--stzh-space-medium)}.stzh-header__metanav-item-text.sc-stzh-header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-header__metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}@media screen and (max-width: 899px){.stzh-header__metanav-item-text.has-no-short-label.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 899px){.stzh-header__metanav-item-text-label-long.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:flex}@media screen and (min-width: 900px){.stzh-header__metanav-item-text-label-short.sc-stzh-header{display:none}}.stzh-header__metanav-icon-wrapper.sc-stzh-header{position:relative;display:flex;align-items:center;justify-content:center}.stzh-header__metanav-icon-badge.sc-stzh-header{position:absolute;top:-0.25rem;right:-0.25rem}.stzh-header__metanav-icon.is-open.sc-stzh-header{display:none}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-open.sc-stzh-header{display:inline-flex}.stzh-header__metanav-item[aria-expanded=true].sc-stzh-header .stzh-header__metanav-icon.is-close.sc-stzh-header{display:none}.stzh-header__logobar.sc-stzh-header{display:flex}@media screen and (min-width: 1600px){.stzh-header__logobar.sc-stzh-header{margin-left:auto;margin-right:auto;width:84.25rem}}.stzh-header__logobar-logo.sc-stzh-header{box-sizing:content-box;display:flex;overflow:hidden;flex-shrink:0}.stzh-header__logobar-decoration.sc-stzh-header{background-color:var(--logobar-background-color);flex-grow:1}@media screen and (min-width: 1600px){.stzh-header__logobar-decoration.sc-stzh-header{width:calc(100% - 34.5625rem + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-top:0.875rem;padding-bottom:0.6875rem;padding-left:1.25rem;display:inline-flex;width:18rem;height:4.125rem;transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__logo-link.sc-stzh-header{width:18.75rem;padding-left:2rem}}@media screen and (min-width: 900px){.stzh-header__logo-link.sc-stzh-header{width:24.9375rem;height:5.5rem;padding-top:1.125rem;padding-bottom:1.125rem;padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__logo-link.sc-stzh-header{width:38.5625rem;height:8.4375rem;padding-top:1.75rem;padding-bottom:1.5rem;padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__logo-link.sc-stzh-header{width:34.5625rem;padding-left:0}}.stzh-header__flyout.sc-stzh-header,.stzh-header__flyout-search.sc-stzh-header{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);z-index:calc(var(--stzh-z-index-header) - 1);position:fixed;visibility:hidden;top:0;left:0;right:0;bottom:0;width:100dvw;height:100dvh;overflow:auto;transition:visibility var(--stzh-base-transition-animation-speed)}@media (min-height: 580px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}@media screen and (min-width: 900px){.stzh-header__flyout.sc-stzh-header{overflow:hidden}}.stzh-header__flyout-backdrop.sc-stzh-header{position:absolute;width:100%;height:100%;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-header__menu.sc-stzh-header{position:absolute;width:100%;height:auto;background-color:var(--menu-background-color);display:grid;grid-template-rows:auto auto;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(-100%);opacity:0}@media (min-height: 580px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{height:100%;grid-template-rows:minmax(0, 1fr) auto}}@media screen and (min-width: 900px){.stzh-header__menu.sc-stzh-header{width:20.9375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:23.375rem}}@media screen and (min-width: 1260px){.stzh-header__menu.sc-stzh-header{width:27.4375rem}}@media screen and (min-width: 1600px){.stzh-header__menu.sc-stzh-header{width:calc((27.4375rem - 4rem) + (100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.stzh-header__menu-nav.sc-stzh-header{position:relative;overflow-x:hidden;overflow-y:auto}@media screen and (min-width: 900px){.stzh-header__menu-nav.sc-stzh-header{position:static}}.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-large);background-color:var(--stzh-color-secondary20)}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-metanav.sc-stzh-header{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-header__menu-metanav.sc-stzh-header{display:none}}.stzh-header__menu-metanav-nav.sc-stzh-header{max-width:23.4375rem}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.sc-stzh-header{display:block;list-style:none;padding:0;margin:0}.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-xxxlarge));padding-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{padding-top:calc(var(--stzh-header-main-height) + var(--stzh-space-huge))}}.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{overflow:auto;background-color:var(--menu-list-item-background-level2);visibility:hidden;opacity:0;transform:translateX(100%);position:absolute;z-index:200;top:0;left:0;width:100%;height:100%;transition-property:opacity, visibility, transform;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{z-index:initial;width:19.6875rem;transform:none;left:100%;transition-property:opacity, visibility}}@media screen and (min-width: 1260px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:20.875rem}}@media screen and (min-width: 1600px){.stzh-header__menu-list.is-level-2.sc-stzh-header,.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{width:21.5625rem}}.stzh-header__menu-list.is-level-2.sc-stzh-header{height:max-content}@media (min-height: 580px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}@media screen and (min-width: 900px){.stzh-header__menu-list.is-level-2.sc-stzh-header{height:100%}}.stzh-header__menu-metanav-list.is-level-2.sc-stzh-header{background-color:var(--stzh-color-secondary30);transform:none;transition-property:opacity, visibility}@media screen and (min-width: 900px){.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-list).sc-stzh-header>.stzh-header__menu-list-item.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header,.stzh-header__menu-list.sc-stzh-header:where(:has(>.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header>.stzh-header__menu-list-item.sc-stzh-header>.stzh-header__menu-list).sc-stzh-header{transition-delay:var(--stzh-base-transition-animation-speed)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-list.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-list.sc-stzh-header{z-index:200;transition-delay:0ms;visibility:visible;opacity:1}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.sc-stzh-header{background-color:var(--menu-list-item-background-hover)}}@media screen and (min-width: 900px){.stzh-header__menu-list-item.sc-stzh-header:hover>.stzh-header__menu-item.is-level-2.sc-stzh-header,.stzh-header__menu-list-item.is-open.sc-stzh-header>.stzh-header__menu-item.is-level-2.sc-stzh-header{background-color:var(--menu-list-item-background-level2-hover)}}@media screen and (max-width: 899px){.stzh-header__menu-nav.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open) .stzh-header__menu-nav.sc-stzh-header,.stzh-header__menu-list.sc-stzh-header:has(.stzh-header__menu-list-item.is-open),.stzh-header__menu-metanav-list.sc-stzh-header:has(.stzh-header__menu-metanav-list-item.is-open){transition-property:visibility;transition-duration:0ms;transition-delay:var(--stzh-base-transition-animation-speed);visibility:hidden}}@media screen and (max-width: 899px){.stzh-header__menu-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-list),.stzh-header__menu-metanav-list-item.is-open.sc-stzh-header>.sc-stzh-header:where(.stzh-header__menu-metanav-list){transform:translateX(0);opacity:1;visibility:visible}}.stzh-header__menu-list-item.sc-stzh-header,.stzh-header__menu-metanav-list-item.sc-stzh-header{display:grid}.stzh-header__menu-list-item.is-backlink.sc-stzh-header{display:block}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.sc-stzh-header{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-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;display:flex;align-items:center;gap:var(--stzh-space-xsmall);appearance:none;border:none;text-decoration:none;background-color:transparent;color:var(--menu-item-color);padding-left:var(--stzh-space-xxxlarge);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small);padding-right:var(--stzh-space-large);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);min-height:3.5rem}@media screen and (min-width: 900px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:2.5rem}}@media screen and (min-width: 1260px){.stzh-header__menu-item.sc-stzh-header,.stzh-header__menu-metanav-item.is-title.sc-stzh-header{padding-left:4rem}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-1.sc-stzh-header{padding-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}@media screen and (min-width: 900px){.stzh-header__menu-item.has-items.sc-stzh-header{cursor:default}}.stzh-header__menu-item.is-level-2.sc-stzh-header{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);min-height:3rem}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-header__menu-item.is-level-2.sc-stzh-header{padding-left:var(--stzh-space-xxlarge)}}.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xsmall);min-height:none;padding-left:1.25rem;padding-right:1.25rem;gap:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-header__menu-item.is-level-2.is-backlink.sc-stzh-header{display:none}}.stzh-header__menu-item.is-level-2.is-main.sc-stzh-header{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-bottom:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header{min-height:2.75rem;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item.is-level-2.sc-stzh-header{min-height:3.5rem;gap:var(--stzh-space-medium);padding-right:var(--stzh-space-xxlarge)}.stzh-header__menu-metanav-item.is-title.sc-stzh-header{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);justify-content:space-between;padding-top:0;padding-bottom:0;padding-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge);cursor:default}.stzh-header__menu-metanav-item.is-language.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);justify-content:space-between}.stzh-header__menu-metanav-item.is-action.sc-stzh-header{display:grid;padding-right:var(--stzh-space-xxxlarge);margin-top:var(--stzh-space-xlarge)}.stzh-header__menu-metanav-item.is-action--extra.sc-stzh-header{margin-top:var(--stzh-space-xxsmall)}.stzh-header__menu-metanav-item.is-hidden.sc-stzh-header{display:none}.stzh-header__menu-metanav-item.is-level-1.sc-stzh-header .stzh-header__menu-metanav-item-icon.sc-stzh-header{--size:var(--stzh-icon-size-small)}.stzh-header__menu-metanav-item-text.sc-stzh-header{display:flex;gap:var(--stzh-space-xsmall)}.stzh-header__menu-metanav-item-text.is-vhidden.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header__menu-metanav-item-counter.sc-stzh-header{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-header__app-nav.sc-stzh-header{display:none}@media screen and (min-width: 900px){.stzh-header__app-nav.sc-stzh-header{display:block}}.stzh-header__app-nav-bottom.sc-stzh-header{position:fixed;bottom:0;left:0;width:calc(100vw - var(--stzh-scrollbar-width));z-index:calc(var(--stzh-z-index-header) - 1)}@media screen and (min-width: 900px){.stzh-header__app-nav-bottom.sc-stzh-header{display:none}}.stzh-header--is-search-filled.sc-stzh-header .stzh-header__search-text.sc-stzh-header{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-header--hide-logo.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:0}@media screen and (min-width: 600px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-fixed.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(-100%);position:fixed;top:0;left:0;right:0;margin-top:calc(var(--stzh-header-logobar-height) / -1)}}@media screen and (min-width: 600px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.stzh-header--is-fixed-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__logobar.sc-stzh-header{transition-property:opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-sticky-transition.sc-stzh-header .stzh-header__main.sc-stzh-header{transition-property:transform, margin-top;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__inner.sc-stzh-header{transform:translateY(0)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header .stzh-header__main.sc-stzh-header{transform:translateY(0)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 899px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar-mobile) .stzh-header__metabar.sc-stzh-header{visibility:hidden}}@media screen and (min-width: 600px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__inner.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}@media screen and (max-width: 599px){.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__main.sc-stzh-header{margin-top:calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1)}}.stzh-header--is-sticky.sc-stzh-header:where(.stzh-header--has-empty-metabar) .stzh-header__metabar.sc-stzh-header{visibility:hidden}.stzh-header--is-sticky.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:hidden;opacity:0}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__main.sc-stzh-header{margin-top:0px}.stzh-header--sticky-always-full.sc-stzh-header .stzh-header__logobar.sc-stzh-header{visibility:visible;opacity:1}.stzh-header__flyout-search-main.sc-stzh-header{position:absolute;width:100%;transition-property:opacity, transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateY(-6.25rem);opacity:0;margin-top:var(--stzh-header-main-height);overflow:auto}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-backdrop.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:none;z-index:999;position:absolute;top:0;right:0;bottom:0;width:var(--stzh-scrollbar-width);background-color:var(--stzh-color-grey10);border-left:calc(0.5px * var(--stzh-scrollbar-active)) solid var(--stzh-color-grey30)}@media (min-height: 580px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}@media screen and (min-width: 900px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-scrollbar.sc-stzh-header{display:block}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__menu.sc-stzh-header{opacity:1;transform:translateX(0)}.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__flyout-search-main.sc-stzh-header{opacity:1;transform:translateX(0)}@media screen and (min-width: 600px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__inner.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__inner.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}@media screen and (max-width: 599px){.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__main.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__main.sc-stzh-header{z-index:var(--stzh-z-index-header);transform:translateY(0);position:fixed;top:0;left:0;right:var(--stzh-scrollbar-width);margin-top:0}}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header{opacity:1}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logobar.sc-stzh-header,.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__metabar.sc-stzh-header{visibility:visible}.stzh-header--is-flyout-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header,.stzh-header--is-flyout-search-open.sc-stzh-header .stzh-header__logo-link.sc-stzh-header{opacity:1;transition:none}.stzh-header__search-button--is-hidden.sc-stzh-header{display:none}";
 const StzhHeaderStyle0 = stzhHeaderCss;
@@ -800,4 +800,4 @@ function defineCustomElement() {
 
 export { StzhHeader as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-5e70f03f.js.map
+//# sourceMappingURL=p-d6702563.js.map