@oiz/stzh-components 4.9.0-beta2 → 4.9.0-beta3

package/dist/components/{p-CP2-kI_R.js.map → p-RLF8-AhP.js.map}

@@ -1 +1 @@
-{"file":"p-CP2-kI_R.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 || this.descriptionLong) && (\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-RLF8-AhP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 || this.descriptionLong) && (\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-iO0Ga3pa.js → p-StWtWw5n.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { s as setPropsIfNull } from './p-CN5apKPb.js';
 
 const stzhActionsCss = () => `: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{}: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}:host ::slotted([slot=primary]),:host ::slotted([slot=secondary]),:host ::slotted([slot=tertiary]){flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}@media screen and (min-width: 600px){:host[space-between=true] ::slotted([slot=tertiary]){flex-grow:inherit}}.stzh-actions__actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions{flex-direction:row}}.stzh-actions__primary-actions,.stzh-actions__secondary-actions,.stzh-actions__tertiary-actions{display:flex}.stzh-actions__wrapper{display:contents}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__wrapper{display:flex;flex-wrap:wrap}}.stzh-actions--process .stzh-actions__actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__primary-actions,.stzh-actions--process .stzh-actions__secondary-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process .stzh-actions__tertiary-actions{margin-right:auto}}.stzh-actions--search .stzh-actions__actions{justify-content:flex-end}.stzh-actions{}.stzh-actions--space-between .stzh-actions__actions{justify-content:space-between}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:column}}@media screen and (min-width: 900px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:row}}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__wrapper{display:flex;justify-content:flex-end}}`;
@@ -71,6 +71,6 @@ function defineCustomElement() {
 }
 
 export { StzhActions as S, defineCustomElement as d };
-//# sourceMappingURL=p-iO0Ga3pa.js.map
+//# sourceMappingURL=p-StWtWw5n.js.map
 
-//# sourceMappingURL=p-iO0Ga3pa.js.map
+//# sourceMappingURL=p-StWtWw5n.js.map

package/dist/components/{p-iO0Ga3pa.js.map → p-StWtWw5n.js.map}

@@ -1 +1 @@
-{"file":"p-iO0Ga3pa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\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 classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-StWtWw5n.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\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 classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DyTuVM4Q.js → p-VVrfLzf4.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { h as hasSlot } from './p-CN5apKPb.js';
 
 const stzhFigureCss = () => `.sc-stzh-figure-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-figure-h,[stzh-hidden].sc-stzh-figure-h{display:none}.sc-stzh-figure-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::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-figure-h .has-focus.sc-stzh-figure{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure{outline-style:none !important}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure::-moz-focus-inner{border:0 !important}.sc-stzh-figure-h{--caption-opacity:1}.sc-stzh-figure-h.sc-stzh-figure-s>*,.sc-stzh-figure-h .sc-stzh-figure-s>*{max-width:100%}.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]).sc-stzh-figure-s>:not(map),.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]) .sc-stzh-figure-s>:not(map){width:100%}.stzh-figure.sc-stzh-figure{display:flex;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:flex}@media print{.stzh-figure__element.sc-stzh-figure{page-break-inside:avoid;break-inside:avoid}}.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-figure__caption-wrapper.sc-stzh-figure{display:flex;flex-direction:column;opacity:var(--caption-opacity);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-figure__heading-wrapper.sc-stzh-figure{display:flow-root}.stzh-figure__counter.sc-stzh-figure{float:left;color:var(--stzh-color-secondary60)}.stzh-figure__counter.sc-stzh-figure:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-figure__counter.sc-stzh-figure,.stzh-figure__heading.sc-stzh-figure{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);display:block}.stzh-figure__copyright.sc-stzh-figure{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-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-figure__copyright.sc-stzh-figure:not(:empty){margin-top:var(--stzh-space-xxsmall)}.stzh-figure--has-caption.sc-stzh-figure .stzh-figure__caption-wrapper.sc-stzh-figure{margin-top:var(--stzh-space-small)}`;
@@ -62,6 +62,6 @@ function defineCustomElement() {
 }
 
 export { StzhFigure as S, defineCustomElement as d };
-//# sourceMappingURL=p-DyTuVM4Q.js.map
+//# sourceMappingURL=p-VVrfLzf4.js.map
 
-//# sourceMappingURL=p-DyTuVM4Q.js.map
+//# sourceMappingURL=p-VVrfLzf4.js.map

package/dist/components/{p-DyTuVM4Q.js.map → p-VVrfLzf4.js.map}

@@ -1 +1 @@
-{"file":"p-DyTuVM4Q.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,+wGAA+wG,CAAC;;MCgBhyG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;;AAGtB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AA6CnD;IAzCC,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QACxD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;QAC5D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;QACxD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;AAExD,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,eAAe;gBACf,CAAC,CAAC,IAAI,CAAC,SAAS;gBAChB,iBAAiB;gBACjB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,eAAe;gBACf,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,eAAe;SAClB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CAAO,EACpG,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CAAO,CAChG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CAAO,EACzG,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAChC,EAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CAC7D,CACF,CACK,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  --caption-opacity: 1;\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve(\"caption\");\n    display: flex;\n    flex-direction: column;\n    opacity: var(--caption-opacity);\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__heading-wrapper {\n    display: flow-root;\n  }\n\n  &__counter {\n    float: left;\n    color: $colorSecondary60;\n\n    &:not(:empty) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font(\"heavy\");\n    display: block;\n  }\n\n  &__copyright {\n    @include font;\n    @include fontSize(\"femto\");\n    color: $colorGrey80;\n\n    &:not(:empty) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space(\"small\");\n  }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true,\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, \"caption\");\n    const copyrightSlotUsed = hasSlot(this.element, \"copyright\");\n    const counterSlotUsed = hasSlot(this.element, \"counter\");\n    const headingSlotUsed = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption ||\n        captionSlotUsed ||\n        !!this.copyright ||\n        copyrightSlotUsed ||\n        !!this.counter ||\n        counterSlotUsed ||\n        !!this.heading ||\n        headingSlotUsed,\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__heading-wrapper\">\n              <div class=\"stzh-figure__counter\">{this.counter ? this.counter : <slot name=\"counter\"></slot>}</div>\n              <div class=\"stzh-figure__heading\">{this.heading ? this.heading : <slot name=\"heading\"></slot>}</div>\n            </div>\n            <div class=\"stzh-figure__caption\">\n              <div class=\"stzh-figure__caption-text\">{this.caption ? this.caption : <slot name=\"caption\"></slot>}</div>\n              <div class=\"stzh-figure__copyright\">\n                {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-VVrfLzf4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  --caption-opacity: 1;\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve(\"caption\");\n    display: flex;\n    flex-direction: column;\n    opacity: var(--caption-opacity);\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__heading-wrapper {\n    display: flow-root;\n  }\n\n  &__counter {\n    float: left;\n    color: $colorSecondary60;\n\n    &:not(:empty) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font(\"heavy\");\n    display: block;\n  }\n\n  &__copyright {\n    @include font;\n    @include fontSize(\"femto\");\n    color: $colorGrey80;\n\n    &:not(:empty) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space(\"small\");\n  }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true,\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, \"caption\");\n    const copyrightSlotUsed = hasSlot(this.element, \"copyright\");\n    const counterSlotUsed = hasSlot(this.element, \"counter\");\n    const headingSlotUsed = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption ||\n        captionSlotUsed ||\n        !!this.copyright ||\n        copyrightSlotUsed ||\n        !!this.counter ||\n        counterSlotUsed ||\n        !!this.heading ||\n        headingSlotUsed,\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__heading-wrapper\">\n              <div class=\"stzh-figure__counter\">{this.counter ? this.counter : <slot name=\"counter\"></slot>}</div>\n              <div class=\"stzh-figure__heading\">{this.heading ? this.heading : <slot name=\"heading\"></slot>}</div>\n            </div>\n            <div class=\"stzh-figure__caption\">\n              <div class=\"stzh-figure__caption-text\">{this.caption ? this.caption : <slot name=\"caption\"></slot>}</div>\n              <div class=\"stzh-figure__copyright\">\n                {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C1ciJM24.js → p-d1xd9jdc.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-ptAFQZzh.js';
+import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
 
 const stzhBreadcrumbCss = () => `.sc-stzh-breadcrumb-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-breadcrumb-h,[stzh-hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::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-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-breadcrumb-color, var(--stzh-color-primary70))}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{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(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{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-breadcrumb__item-link.sc-stzh-breadcrumb{appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{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-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .is-expand.sc-stzh-breadcrumb{position:absolute}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}`;
 
@@ -201,6 +201,6 @@ function defineCustomElement() {
 }
 
 export { StzhBreadcrumb as S, defineCustomElement as d };
-//# sourceMappingURL=p-C1ciJM24.js.map
+//# sourceMappingURL=p-d1xd9jdc.js.map
 
-//# sourceMappingURL=p-C1ciJM24.js.map
+//# sourceMappingURL=p-d1xd9jdc.js.map

package/dist/components/{p-C1ciJM24.js.map → p-d1xd9jdc.js.map}

@@ -1 +1 @@
-{"file":"p-C1ciJM24.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-d1xd9jdc.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,giHAAgiH,CAAC;;ACMlkH,MAAM,iBAAiB,GAAG,CAAC;AAC3B,MAAM,gBAAgB,GAAG,CAAC,CAAC;MAUd,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAU2B,QAAA,IAAO,CAAA,OAAA,GAAyB,SAAS;;AAG1D,QAAA,IAAK,CAAA,KAAA,GAAkC,EAAE;;AAIT,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BxD,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAkBhC,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;YAC7B,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACvC;;AAGF,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW;AAElD,YAAA,MAAM,gCAAgC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,KAAI;AACvF,gBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,oBAAA,OAAO,QAAQ;;qBACV;AACL,oBAAA,OAAO,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;;aAE5B,EAAE,CAAC,CAAC;AAEL,YAAA,IAAI,gCAAgC,IAAI,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACrG,MAAM,SAAS,GAAG,EAAE;gBAEpB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAC5D,gBAAA,IAAI,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB;gBAC7D,IAAI,qCAAqC,GAAG,gCAAgC;AAE5E,gBAAA,GAAG;oBACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC;oBAClD,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1B,oBAAA,qCAAqC,GAAG,qCAAqC,GAAG,OAAO,CAAC,CAAC,CAAC;AAC1F,oBAAA,kBAAkB,GAAG,kBAAkB,GAAG,gBAAgB;AAC5D,iBAAC,QACC,qCAAqC,GAAG,eAAe,IAAI,cAAc;AACzE,oBAAA,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM;AAG5C,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAE1B,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,KAAI;AACvC,oBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;yBAC7B;AACL,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;AAEhE,iBAAC,CAAC;;iBACG;AACL,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAE3B,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,KAAI;AACvC,oBAAA,IAAI,KAAK,KAAK,iBAAiB,EAAE;AAC/B,wBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;yBAC1B;AACL,wBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;AAEtC,iBAAC,CAAC;;AAEN,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB;;;AAIF,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;AACrG,YAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AAEnB,YAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;gBACnB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE;gBAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AACpC,aAAC,CAAC;YAEF,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAEO,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACnC,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAGlD,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,eAAe,CAAC;AACnE,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,mBAAmB,CAAC;;YAGvD,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC;AACpE,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AAEpB,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAkB;AAC9G,YAAA,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;AACtB,SAAC;AAkGF;AAtOC,IAAA,YAAY,CAAC,QAAuC,EAAA;QAClD,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;AACX,aAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AACvC,YAAA,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;YAClC,OAAO,CAAC,EAAE;AACV,gBAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;aAEb;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;;IAK1B,eAAe,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;IAgBhB,WAAW,CAAC,IAAwB,EAAE,aAAyB,EAAA;AACrE,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACtB,YAAA,SAAS,EAAE,iBAAiB;YAC5B,IAAI;YACJ,aAAa;AACd,SAAA,CAAC;;AAiGJ,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7B,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;;;IAIvG,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;QAE5C,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;AACxE,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACnB,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC;AACxC,SAAC,CAAC;;IAGJ,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC;QACpE,IAAI,CAAC,mBAAmB,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC;;IAGtE,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,iBAAiB,EAAE,IAAI;YACvB,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,mCAAmC,EAAE,IAAI,CAAC,cAAc;YACxD,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;YACpD,OAAO,EAAE,IAAI;SACd;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,EAChD,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,YAAY,EAAA,YAAA,EACL,IAAI,CAAC,YAAY,CAAC,KAAK,EAAA,EAEnC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,uBAAuB,IAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3B,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,IAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,SAAS,EAAE,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC3C,UAAU,EAAE,KAAK,KAAK,CAAC;aACxB,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,cAAA,EACgB,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,EAC9D,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EACvC,KAAK,EAAE;AACL,gBAAA,4BAA4B,EAAE,IAAI;AAClC,gBAAA,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;AACvB,aAAA,EAAA,EAEA,KAAK,KAAK,CAAC,IACV,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAa,CAAA,KAEtE,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,aAAa,GAAa,CAC3F,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAS,CAAA,CACtE,CACD,EACJ,KAAK,KAAK,CAAC,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EACzC,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACxE,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,aAAa,EAAa,CAAA,EAC1F,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAE,EAAA,IAAI,CAAC,YAAY,CAAC,WAAW,CAAQ,EAC/D,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAQ,CACxF,CACA,CACN,CACN,CACQ,CACZ,CAAC,CACC,CACD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BtU8igAM.js → p-ka1rmhv9.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { h as hasSlot } from './p-CN5apKPb.js';
-import { d as defineCustomElement$2 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
+import { d as defineCustomElement$2 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
 
 const stzhButtonCss = () => `.sc-stzh-button-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-button-h,[stzh-hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h{--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(
     --stzh-button-hover-background-color,
@@ -291,6 +291,6 @@ function defineCustomElement() {
 }
 
 export { StzhButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-BtU8igAM.js.map
+//# sourceMappingURL=p-ka1rmhv9.js.map
 
-//# sourceMappingURL=p-BtU8igAM.js.map
+//# sourceMappingURL=p-ka1rmhv9.js.map

package/dist/components/{p-BtU8igAM.js.map → p-ka1rmhv9.js.map}

@@ -1 +1 @@
-{"file":"p-BtU8igAM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space(\"xsmall\")} - var(--border-width));\n  --padding-bottom: calc(#{space(\"xsmall\")} - var(--border-width));\n  --padding-left: #{space(\"xlarge\")};\n  --padding-right: #{space(\"xlarge\")};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize(\"medium\")};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize(\"large\")};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --padding-top: calc(#{space(\"xxsmall\")} - var(--border-width));\n  --padding-bottom: calc(#{space(\"xxsmall\")} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space(\"xsmall\")};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space(\"xxsmall\")});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(\n    --stzh-button-hover-background-color,\n    #{$colorSecondary60}\n  );\n  --hover-border-color: transparent;\n\n  display: inline-flex;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n    flex: 0 0 100%;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(\n      --stzh-button-secondary-background-color,\n      #{$colorSecondary30}\n    );\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(\n      --stzh-button-secondary-hover-background-color,\n      #{$colorSecondary40}\n    );\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(\n      --stzh-button-tertiary-background-color,\n      transparent\n    );\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(\n      --stzh-button-tertiary-hover-background-color,\n      #{$colorSecondary20}\n    );\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-button-active-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --background-color: var(\n      --stzh-button-secondary-hover-background-color,\n      #{$colorSecondary40}\n    );\n  }\n\n  &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: var(\n      --stzh-button-tertiary-hover-background-color,\n      #{$colorSecondary20}\n    );\n  }\n\n  &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: transparent;\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-button-disabled-background-color,\n      #{$colorGrey70}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-button-secondary-disabled-background-color,\n      #{$colorGrey20}\n    );\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-button-input-disabled-background-color,\n      #{$colorGrey20}\n    );\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-button-tertiary-disabled-background-color,\n      transparent\n    );\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n  0%,\n  20%,\n  50%,\n  80%,\n  100% {\n    transform: translateX(0);\n  }\n\n  40% {\n    transform: translateX(-8px);\n  }\n\n  60% {\n    transform: translateX(-4px);\n  }\n}\n\n.stzh-button {\n  @include font(\"heavy\");\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  min-height: 100%;\n  margin: 0;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: \"\";\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &--not-hyphenated &__text {\n    hyphens: none;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space(\"xsmall\");\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"small\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__icon-wrapper:not(:empty)\n    + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__text:not(:empty)\n    + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n    animation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n  StzhBadgeType,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonClickEvent,\n  StzhButtonFocusEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true,\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Disable hyphenation for text inside button */\n  @Prop() noHyphenation: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to disable the button on click or not */\n  @Prop() disableOnClick: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    } else {\n      if (this.disableOnClick) {\n        this.disabled = true;\n      }\n      this.stzhClick.emit({\n        component: \"stzh-button\",\n        originalEvent: event,\n        href: this.href,\n      });\n    }\n  };\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\n        {!this.icon && this.showToggleIcon && (\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        )}\n        {!this.icon && !this.showToggleIcon && <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed && (\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\" ref={el => (this.text = el as HTMLDivElement)}>\n        {this.rel && this.rel.includes(\"external\") && (\n          <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-button__inner\">\n          {this.type === \"radio\" && (\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          )}\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) && (\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      \"stzh-button--not-hyphenated\": this.noHyphenation,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : this.type === \"radio\" ? (\n          <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              class=\"stzh-button__input\"\n              name={this.name}\n              value={this.value}\n              defaultChecked={this.defaultChecked}\n              checked={this.checked}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n              onInput={this.onInput}\n            />\n            {this.renderInner(iconUsed)}\n          </label>\n        ) : (\n          <button\n            ref={el => (this.button = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ka1rmhv9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx"],"sourcesContent":["/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space(\"xsmall\")} - var(--border-width));\n  --padding-bottom: calc(#{space(\"xsmall\")} - var(--border-width));\n  --padding-left: #{space(\"xlarge\")};\n  --padding-right: #{space(\"xlarge\")};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize(\"medium\")};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize(\"large\")};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --padding-top: calc(#{space(\"xxsmall\")} - var(--border-width));\n  --padding-bottom: calc(#{space(\"xxsmall\")} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space(\"xsmall\")};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space(\"xxsmall\")});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(\n    --stzh-button-hover-background-color,\n    #{$colorSecondary60}\n  );\n  --hover-border-color: transparent;\n\n  display: inline-flex;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n    flex: 0 0 100%;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(\n      --stzh-button-secondary-background-color,\n      #{$colorSecondary30}\n    );\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(\n      --stzh-button-secondary-hover-background-color,\n      #{$colorSecondary40}\n    );\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(\n      --stzh-button-tertiary-background-color,\n      transparent\n    );\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(\n      --stzh-button-tertiary-hover-background-color,\n      #{$colorSecondary20}\n    );\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-button-active-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --background-color: var(\n      --stzh-button-secondary-hover-background-color,\n      #{$colorSecondary40}\n    );\n  }\n\n  &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: var(\n      --stzh-button-tertiary-hover-background-color,\n      #{$colorSecondary20}\n    );\n  }\n\n  &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: transparent;\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-button-disabled-background-color,\n      #{$colorGrey70}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-button-secondary-disabled-background-color,\n      #{$colorGrey20}\n    );\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-button-input-disabled-background-color,\n      #{$colorGrey20}\n    );\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-button-tertiary-disabled-background-color,\n      transparent\n    );\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n  0%,\n  20%,\n  50%,\n  80%,\n  100% {\n    transform: translateX(0);\n  }\n\n  40% {\n    transform: translateX(-8px);\n  }\n\n  60% {\n    transform: translateX(-4px);\n  }\n}\n\n.stzh-button {\n  @include font(\"heavy\");\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  min-height: 100%;\n  margin: 0;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: \"\";\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &--not-hyphenated &__text {\n    hyphens: none;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space(\"xsmall\");\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"small\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__icon-wrapper:not(:empty)\n    + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__text:not(:empty)\n    + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n    animation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport {\n  StzhBadgeType,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonClickEvent,\n  StzhButtonFocusEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhLocaleComponent,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true,\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Disable hyphenation for text inside button */\n  @Prop() noHyphenation: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to disable the button on click or not */\n  @Prop() disableOnClick: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    } else {\n      if (this.disableOnClick) {\n        this.disabled = true;\n      }\n      this.stzhClick.emit({\n        component: \"stzh-button\",\n        originalEvent: event,\n        href: this.href,\n      });\n    }\n  };\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon && <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>}\n        {!this.icon && this.showToggleIcon && (\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        )}\n        {!this.icon && !this.showToggleIcon && <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed && (\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\" ref={el => (this.text = el as HTMLDivElement)}>\n        {this.rel && this.rel.includes(\"external\") && (\n          <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-button__inner\">\n          {this.type === \"radio\" && (\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          )}\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) && (\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      \"stzh-button--not-hyphenated\": this.noHyphenation,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : this.type === \"radio\" ? (\n          <label ref={el => (this.button = el as HTMLLabelElement)} class={classes} onClick={this.onClick}>\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              class=\"stzh-button__input\"\n              name={this.name}\n              value={this.value}\n              defaultChecked={this.defaultChecked}\n              checked={this.checked}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n              onInput={this.onInput}\n            />\n            {this.renderInner(iconUsed)}\n          </label>\n        ) : (\n          <button\n            ref={el => (this.button = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-UI7DWEQU.js → p-osf80Swh.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { S as StzhSocialmediastreamItemActionVariant } from './p-uD4ilJut.js';
-import { d as defineCustomElement$3 } from './p-BU4OH8Cm.js';
-import { d as defineCustomElement$2 } from './p-IMP7pC7p.js';
-import { d as defineCustomElement$1 } from './p-BN-54ren.js';
+import { d as defineCustomElement$3 } from './p-B8VeEjIy.js';
+import { d as defineCustomElement$2 } from './p-B6zrbO8N.js';
+import { d as defineCustomElement$1 } from './p-BxhXhWgp.js';
 
 const stzhSocialmediastreamItemCss = () => `: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{}: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-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-body{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);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}`;
 
@@ -126,6 +126,6 @@ function defineCustomElement() {
 }
 
 export { StzhSocialmediastreamItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-UI7DWEQU.js.map
+//# sourceMappingURL=p-osf80Swh.js.map
 
-//# sourceMappingURL=p-UI7DWEQU.js.map
+//# sourceMappingURL=p-osf80Swh.js.map