@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/stzh-components/p-429d2a9b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhBreadcrumbCss","ITEM_EXPAND_INDEX","SHRINK_DIRECTION","StzhBreadcrumb","this","updateContainer","navElement","itemSizes","containerWidth","clientWidth","totalItemsWidthWithoutExpandItem","reduce","previous","item","index","length","expanded","hideItems","expandItemWidth","currentIndexToHide","totalItemsShownWidthWithoutExpandItem","current","push","hasHiddenItems","forEach","classList","remove","toggle","includes","add","updateItems","items","Array","from","querySelectorAll","width","getBoundingClientRect","handleContainerResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleItemResize","debounceResizeItems","handleExpandClick","itemLinks","focus","itemsWatcher","newValue","_items","JSON","parse","e","expandedWatcher","handleClick","originalEvent","stzhItemClick","emit","component","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidRender","resizeObserver","observe","resizeItemsObserver","connectedCallback","ResizeObserver","disconnectedCallback","disconnect","render","classes","variant","rs_skip","h","Host","class","ref","el","role","title","map","Fragment","href","onClick","name","label","expandLabel","expandHiddenLabel","stzhTagCss","StzhTag","focusedByInput","onRootFocus","tag","onFocus","event","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","stzhClick","nonInteractive","_a","setAttribute","analyticsId","text","innerText","renderInner","lines","disabled","size","type","Tag","tabindex","target","a11yTabindex","a11yLabel","a11yDescribedby"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --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  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize('micro');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Fragment, Event, EventEmitter,\n} 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 * @slot - Slot for e.g. image or video\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\n      .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\n                          class=\"stzh-breadcrumb__item-icon\"\n                          name=\"home\"\n                        ></stzh-icon>\n                      :\n                        <stzh-icon\n                          class=\"stzh-breadcrumb__item-icon is-separator\"\n                          name=\"angle-right\"\n                        ></stzh-icon>\n                      }\n                      <span class=\"stzh-breadcrumb__item-label\">\n                        {item.label}\n                      </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\n                          class=\"stzh-breadcrumb__item-icon is-separator\"\n                          name=\"angle-right\"\n                        ></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">\n                            {this.localization.expandLabel}\n                          </span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">\n                            {this.localization.expandHiddenLabel}\n                          </span>\n                        </span>\n                      </button>\n                    </li>\n                  }\n                </Fragment>\n              )}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary50});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space('small')};\n  --padding-right: #{space('small')};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary50});\n\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize('nano');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\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    color: var(--color);\n    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font('heavy');\n    @include fontSize('milli');\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhTagType,\n  StzhTagSize,\n  StzhTagClickEvent,\n  StzhTagFocusEvent,\n  StzhTagBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\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 link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-tag__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type\n    };\n\n    const Tag = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ?\n            <Tag\n              ref={(el) => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n            :\n            <Tag\n              ref={(el) => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-e5cfdb8a.entry.js → p-5b1bc446.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,a as i,g as h}from"./p-c7bfac7a.js";import{c as o,a as n,A as r,o as a,f as z,s as l,b as c}from"./p-a2da1df4.js";import{c as p}from"./p-ed63ed76.js";import{i as v}from"./p-7e304ea3.js";import{m as f}from"./p-10e2901a.js";import{w as d}from"./p-54bd842e.js";import{s as g,a as x}from"./p-7e2354d0.js";import"./p-9b063923.js";const m=".sc-stzh-popover-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-popover-h{display:none}.sc-stzh-popover-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::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-popover-h .has-focus.sc-stzh-popover{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover{outline-style:none !important}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover::-moz-focus-inner{border:0 !important}.sc-stzh-popover-h{display:contents;--color:var(--stzh-color-black);--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--height:auto;--min-height:initial;--max-height:initial;--padding:var(--stzh-popover-padding);--content-padding:var(--stzh-popover-content-padding);--border-radius:var(--stzh-popover-border-radius);--background-color:var(--stzh-popover-background-color);--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}[size=large].sc-stzh-popover-h{--content-padding:var(--stzh-popover-large-content-padding)}[variant=secondary].sc-stzh-popover-h{--background-color:var(--stzh-color-secondary20)}[variant=tooltip].sc-stzh-popover-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--content-padding:var(--stzh-space-small) var(--stzh-space-large);--border-radius:var(--stzh-tooltip-border-radius)}@media screen and (min-width: 600px){[variant=tooltip].sc-stzh-popover-h{--content-padding:var(--stzh-tooltip-padding);--color:var(--stzh-color-white);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op);--background-color:var(--stzh-color-coolgrey60)}}.stzh-popover.sc-stzh-popover{display:contents}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:flex;color:var(--background-color)}.stzh-popover--placement-bottom.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{top:0;transform:translateY(-0.5rem)}.stzh-popover--placement-top.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-popover--placement-left.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-popover--placement-right.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-popover__trigger.sc-stzh-popover{display:contents}.stzh-popover__content-wrapper.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content-wrapper.sc-stzh-popover{z-index:var(--stzh-z-index-dialog);display:flex;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}}.stzh-popover__backdrop.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__backdrop.sc-stzh-popover{z-index:1;position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}}.stzh-popover__content.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content.sc-stzh-popover{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}}.stzh-popover__dialog.sc-stzh-popover{margin-top:auto;width:100%;overflow:visible;border-top-left-radius:0.125rem;border-top-right-radius:0.125rem;background-color:var(--background-color);touch-action:none;outline:none;border-bottom:0.125rem solid var(--stzh-color-old-grey13);color:var(--color);--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@media screen and (min-width: 600px){.stzh-popover__dialog.sc-stzh-popover{z-index:var(--stzh-z-index-popover);position:absolute;display:flex;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);left:auto;right:auto;bottom:auto;border-radius:var(--border-radius);box-shadow:var(--stzh-box-shadow-popover);border:none}}.stzh-popover__content-inner.sc-stzh-popover,.stzh-popover__content-slot-wrapper.sc-stzh-popover{display:flex;flex-direction:column;width:100%}.stzh-popover__content-slot-wrapper.sc-stzh-popover{padding:var(--padding)}.stzh-popover__content-slot.sc-stzh-popover{overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;padding:var(--content-padding)}.stzh-popover__action-slot.sc-stzh-popover{display:flex;flex-direction:column}.stzh-popover__label-wrapper.sc-stzh-popover{display:flex;align-items:center;padding:var(--stzh-space-small) var(--stzh-space-large);padding-right:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-old-grey70)}@media screen and (min-width: 600px){.stzh-popover__label-wrapper.sc-stzh-popover{padding:0;border-bottom:0}}.stzh-popover__label.sc-stzh-popover{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin:0;margin-right:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-popover__label.sc-stzh-popover{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-popover__label.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-popover__close.sc-stzh-popover{visibility:var(--stzh-popover-close-visibility);cursor:pointer;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;margin-left:auto;border-radius:50%;color:var(--stzh-base-lead-color);padding:var(--stzh-space-xxsmall)}.stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-xsmall)}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:none}@media screen and (min-width: 600px){.stzh-popover__arrow.sc-stzh-popover{display:flex}}.stzh-popover__vhidden.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus{box-shadow:0 0 0 0.0625rem var(--stzh-color-primary)}@media screen and (min-width: 600px){.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{position:absolute;top:0;right:0;transform:translate(30%, -30%);background-color:var(--stzh-color-old-grey5)}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active),.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-inner.sc-stzh-popover{flex-direction:row-reverse;align-items:flex-start}}.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{visibility:visible}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-small)}}@media screen and (min-width: 600px){@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-slot.sc-stzh-popover{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-horizontal.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{left:0 !important;right:0 !important;width:100%}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-vertical.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{top:0 !important;bottom:0 !important;height:100%}}";const u=200;const w=300;const b=100;const y=200;function _(){const t=f("small").matches;return{keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:t?b:u,easing:"linear"}}}function k(){const t=f("small").matches;return{keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:t?y:w,easing:"linear"}}}function $(){const t=f("small").matches;return{keyframes:[{transform:t?"translateY(-8px)":"translateY(100%)"},{transform:"translateY(0px)"}],options:{duration:t?b:u,easing:"linear"}}}function j(){const t=f("small").matches;return{keyframes:[{transform:"translateY(0px)"},{transform:t?"translateY(-8px)":"translateY(100%)"}],options:{duration:t?y:w,easing:"linear"}}}const O={ESC:27};const C="stzh-popover-open";let Y=0;const D=class{constructor(s){t(this,s);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.initialTouchX=null;this.initialTouchY=null;this.handleKeydown=t=>{if(t.keyCode===O.ESC){this.hide()}};this.onClickTrigger=()=>{this.toggle()};this.computePosition=async()=>{if(f("small").matches){const t=[a({mainAxis:this.distance,crossAxis:this.skidding}),z({padding:5}),l({padding:5})];if(this.variant==="tooltip"){t.push(c({element:this.arrowElement,padding:5}))}const{x:e=0,y:s=0,strategy:i="absolute",placement:h,middlewareData:n}=await o(this.triggerFirstElement,this.dialogElement,{strategy:this.strategy,placement:this.placement,middleware:t});this.computedPlacement=h;Object.assign(this.dialogElement.style,{position:i,left:`${e}px`,top:`${s}px`});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:e!=null?`${n.arrow.x}px`:"",top:s!=null?`${n.arrow.y}px`:""})}}else{Object.assign(this.dialogElement.style,{position:null,left:null,top:null});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:null,top:null})}}};this.handleTouchStart=t=>{const e=t.changedTouches[0];this.initialTouchX=e.pageX;this.initialTouchY=e.pageY};this.handleTouchEnd=t=>{const e=t.changedTouches[0];const s=e.pageX-this.initialTouchX;const i=e.pageY-this.initialTouchY;const h=70;const o=Math.abs(i)>=h&&Math.abs(s)<=h;if(o){this.hide()}this.initialTouchY=null;this.initialTouchX=null};this.init=()=>{var t;let e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));e=t}if(e){this.triggerFirstElement=e;e.addEventListener("click",this.onClickTrigger)}};this.open=false;this.placement="bottom";this.fullwidth="";this.variant="default";this.size="default";this.skidding=0;this.distance=undefined;this.label="";this.strategy="absolute";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return d(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return d(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}handleOutsideClick(t){if(!this.open){return}const e=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;const s=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(e&&!s){this.hide()}}async openWatcher(t){if(!this.dialogElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-popover"})}const t=_();const e=$();await Promise.all([g(this.contentWrapperElement),g(this.contentElement),g(this.dialogElement)]);this.dialogElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentWrapperElement.hidden=false;await Promise.all([x(f("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),x(f("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-popover"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-popover"})}const t=k();const e=j();await Promise.all([g(this.contentWrapperElement),g(this.contentElement),g(this.dialogElement)]);await Promise.all([x(f("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),x(f("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);this.contentWrapperElement.hidden=true;this.dialogElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-popover"})}}this.toggledByMethod=false}distanceWatcher(t){if(typeof t==="number"){this.distance=t}else{this.distance=this.variant==="tooltip"?12:8}}async componentWillLoad(){this.id=`stzh-popover-${Y++}`;this.distanceWatcher(this.distance);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"popover")}}popoverShown(){document.body.classList.add(C);const t=v(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","true");if(this.trap){this.trap.activate()}}popoverHidden(){document.body.classList.remove(C);const t=v(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","false");if(this.trap){this.trap.deactivate()}}componentDidRender(){this.computePosition();this.open?this.popoverShown():this.popoverHidden();const t=v(this.triggerFirstElement);if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")||!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")||!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}componentDidUpdate(){this.trap.updateContainerElements(this.dialogElement)}componentDidLoad(){this.autoUpdateCleanup=n(this.triggerFirstElement,this.dialogElement,this.computePosition);this.contentWrapperElement.hidden=!this.open;this.trap=p(this.dialogElement,{fallbackFocus:this.dialogElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.popoverShown()}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-popover":true,[`stzh-popover--open`]:this.open,[`stzh-popover--placement-${this.computedPlacement}`]:!!this.computedPlacement,[`stzh-popover--fullwidth-${this.fullwidth}`]:!!this.fullwidth,[`stzh-popover--${this.size}`]:!!this.size,[`stzh-popover--${this.variant}`]:!!this.variant};return s(i,null,s("div",{class:t,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},s("div",{ref:t=>this.triggerElement=t,class:"stzh-popover__trigger"},s("slot",null)),s("div",{class:"stzh-popover__vhidden",id:`${this.id}-trigger-description`},this.localization.open),s("div",{ref:t=>this.contentWrapperElement=t,class:"stzh-popover__content-wrapper"},s("div",{class:"stzh-popover__backdrop"}),s("div",{ref:t=>this.contentElement=t,class:"stzh-popover__content"},s("div",{ref:t=>this.dialogElement=t,class:"stzh-popover__dialog",role:"dialog",tabindex:"-1","aria-modal":"true","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.handleKeydown},this.variant==="tooltip"&&s("div",{class:"stzh-popover__arrow",ref:t=>this.arrowElement=t,innerHTML:r}),s("div",{class:"stzh-popover__content-inner"},s("div",{class:"stzh-popover__label-wrapper"},s("h2",{id:`${this.id}-label`,class:"stzh-popover__label"},this.label?this.label:s("slot",{name:"label"})),s("button",{class:"stzh-popover__close",onClick:()=>this.hide(),type:"button"},s("stzh-icon",{name:"close",class:"stzh-popover__icon"}),s("span",{class:"stzh-popover__vhidden"},this.localization.close))),s("div",{class:"stzh-popover__content-slot-wrapper"},s("div",{class:"stzh-popover__content-slot"},s("slot",{name:"content"})),s("div",{class:"stzh-popover__action-slot"},s("slot",{name:"action"})))))))))}get element(){return h(this)}static get watchers(){return{open:["openWatcher"],distance:["distanceWatcher"]}}};D.style=m;const W='.sc-stzh-text-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-text-h{display:none}.sc-stzh-text-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(\n    --stzh-text-grid-template-areas,\n    "text text text text"\n  );--grid-template-columns:var(\n    --stzh-text-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text"\n    )}}@media screen and (min-width: 900px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text text text text text"\n    );--grid-template-columns:var(\n      --stzh-text-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}.sc-stzh-text-h .sc-stzh-text-s>*:first-child{margin-top:0 !important}.sc-stzh-text-h .sc-stzh-text-s>*:last-child{margin-bottom:0 !important}.sc-stzh-text-h .sc-stzh-text-s>a,.sc-stzh-text-h .sc-stzh-text-s a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.sc-stzh-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color)}.sc-stzh-text-h .sc-stzh-text-s>b,.sc-stzh-text-h .sc-stzh-text-s>strong,.sc-stzh-text-h .sc-stzh-text-s b,.sc-stzh-text-h .sc-stzh-text-s strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-text-h .sc-stzh-text-s>i,.sc-stzh-text-h .sc-stzh-text-s>em,.sc-stzh-text-h .sc-stzh-text-s i,.sc-stzh-text-h .sc-stzh-text-s em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}[lead].sc-stzh-text-h:not([lead=false]){--color:var(--stzh-base-lead-color)}[color=primary].sc-stzh-text-h{--color:var(--stzh-color-primary70)}[color=secondary].sc-stzh-text-h{--color:var(--stzh-color-secondary60)}[color=info].sc-stzh-text-h{--color:var(--stzh-text-info-color)}[color=inherit].sc-stzh-text-h{--color:inherit}.stzh-text.sc-stzh-text{--stzh-icon-size:var(--icon-size);--stzh-icon-vertical-align:var(--icon-vertical-align);--stzh-list-font-size:"";--stzh-list-line-height:"";--stzh-list-letter-spacing:"";font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:var(--display);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);color:var(--color)}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-text__text.sc-stzh-text{grid-area:text;display:flex}.stzh-text__icon.sc-stzh-text{flex-shrink:0}.stzh-text__icon.sc-stzh-text:not(:empty){margin-right:0.25em}.stzh-text__text-inner.sc-stzh-text{flex-grow:1}.stzh-text--is-lead.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-lead-line-height, var(--stzh-font-milli-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-default-lead-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-lead-line-height, var(--stzh-font-deci-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-large-lead-letter-spacing)}}.stzh-text--font-light.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light)}.stzh-text--font-regular.sc-stzh-text{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-text--font-medium.sc-stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-text--font-medium-italic.sc-stzh-text{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-text--font-heavy.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-text--font-title.sc-stzh-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title)}.stzh-text--curve-none.sc-stzh-text{font-size:inherit}.stzh-text--curve-caption.sc-stzh-text{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-text--curve-caption.sc-stzh-text{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-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-lead-default-text-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-lead-large-text-letter-spacing)}}.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-text-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-text--size-femto.sc-stzh-text{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)}.stzh-text--size-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-text--size-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-text--size-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-text--size-milli.sc-stzh-text{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)}.stzh-text--size-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}.stzh-text--size-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}.stzh-text--size-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}.stzh-text--size-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}.stzh-text--size-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}.stzh-text--size-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--size-small-femto.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-milli.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-femto.sc-stzh-text{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)}}@media screen and (min-width: 900px){.stzh-text--size-medium-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-milli.sc-stzh-text{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)}}@media screen and (min-width: 900px){.stzh-text--size-medium-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-femto.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-milli.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-femto.sc-stzh-text{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)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-milli.sc-stzh-text{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)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}';const A=class{constructor(e){t(this,e);this.font="default";this.curve="default";this.lead=false;this.color="default";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit"}render(){return s(i,null,s("div",{class:{"stzh-text":true,"stzh-text--is-lead":this.lead,[`stzh-text--font-${this.font}`]:!!this.font,[`stzh-text--curve-${this.curve}`]:!!this.curve,[`stzh-text--size-${this.size}`]:!!this.size,[`stzh-text--size-small-${this.sizeSmall}`]:!!this.sizeSmall,[`stzh-text--size-medium-${this.sizeMedium}`]:!!this.sizeMedium,[`stzh-text--size-large-${this.sizeLarge}`]:!!this.sizeLarge,[`stzh-text--size-ultra-${this.sizeUltra}`]:!!this.sizeUltra}},s("div",{class:"stzh-text__text"},s("div",{class:"stzh-text__icon"},s("slot",{name:"icon"})),s("div",{class:"stzh-text__text-inner"},s("slot",null)))))}};A.style=W;export{D as stzh_popover,A as stzh_text};
-//# sourceMappingURL=p-e5cfdb8a.entry.js.map
+import{r as t,c as e,h as s,a as i,g as h}from"./p-c7bfac7a.js";import{c as o,a as n,A as r,o as a,f as z,s as l,b as c}from"./p-a2da1df4.js";import{c as p}from"./p-ed63ed76.js";import{i as v}from"./p-7e304ea3.js";import{m as f}from"./p-10e2901a.js";import{w as d}from"./p-54bd842e.js";import{s as g,a as x}from"./p-7e2354d0.js";import"./p-9b063923.js";const m=".sc-stzh-popover-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-popover-h{display:none}.sc-stzh-popover-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::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-popover-h .has-focus.sc-stzh-popover{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover{outline-style:none !important}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover::-moz-focus-inner{border:0 !important}.sc-stzh-popover-h{display:contents;--color:var(--stzh-color-black);--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--height:auto;--min-height:initial;--max-height:initial;--padding:var(--stzh-popover-padding);--content-padding:var(--stzh-popover-content-padding);--border-radius:var(--stzh-popover-border-radius);--background-color:var(--stzh-popover-background-color);--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}[size=large].sc-stzh-popover-h{--content-padding:var(--stzh-popover-large-content-padding)}[variant=secondary].sc-stzh-popover-h{--background-color:var(--stzh-color-secondary20)}[variant=tooltip].sc-stzh-popover-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--content-padding:var(--stzh-space-small) var(--stzh-space-large);--border-radius:var(--stzh-tooltip-border-radius)}@media screen and (min-width: 600px){[variant=tooltip].sc-stzh-popover-h{--content-padding:var(--stzh-tooltip-padding);--color:var(--stzh-color-white);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op);--background-color:var(--stzh-color-coolgrey60)}}.stzh-popover.sc-stzh-popover{display:contents}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:flex;color:var(--background-color)}.stzh-popover--placement-bottom.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-bottom-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{top:0;transform:translateY(-0.5rem)}.stzh-popover--placement-top.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-top-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-popover--placement-left.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-left-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-popover--placement-right.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-start.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover,.stzh-popover--placement-right-end.sc-stzh-popover .stzh-popover__arrow.sc-stzh-popover{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-popover__trigger.sc-stzh-popover{display:contents}.stzh-popover__content-wrapper.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content-wrapper.sc-stzh-popover{z-index:var(--stzh-z-index-dialog);display:flex;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}}.stzh-popover__backdrop.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__backdrop.sc-stzh-popover{z-index:1;position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}}.stzh-popover__content.sc-stzh-popover{display:contents}@media screen and (max-width: 599px){.stzh-popover__content.sc-stzh-popover{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}}.stzh-popover__dialog.sc-stzh-popover{margin-top:auto;width:100%;overflow:visible;border-top-left-radius:0.125rem;border-top-right-radius:0.125rem;background-color:var(--background-color);touch-action:none;outline:none;border-bottom:0.125rem solid var(--stzh-color-old-grey13);color:var(--color);--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@media screen and (min-width: 600px){.stzh-popover__dialog.sc-stzh-popover{z-index:var(--stzh-z-index-popover);position:absolute;display:flex;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);left:auto;right:auto;bottom:auto;border-radius:var(--border-radius);box-shadow:var(--stzh-box-shadow-popover);border:none}}.stzh-popover__content-inner.sc-stzh-popover,.stzh-popover__content-slot-wrapper.sc-stzh-popover{display:flex;flex-direction:column;width:100%}.stzh-popover__content-slot-wrapper.sc-stzh-popover{padding:var(--padding)}.stzh-popover__content-slot.sc-stzh-popover{overflow-y:auto;overflow-x:hidden;overflow-scrolling:touch;padding:var(--content-padding)}.stzh-popover__action-slot.sc-stzh-popover{display:flex;flex-direction:column}.stzh-popover__label-wrapper.sc-stzh-popover{display:flex;align-items:center;padding:var(--stzh-space-small) var(--stzh-space-large);padding-right:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-old-grey70)}@media screen and (min-width: 600px){.stzh-popover__label-wrapper.sc-stzh-popover{padding:0;border-bottom:0}}.stzh-popover__label.sc-stzh-popover{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));margin:0;margin-right:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-popover__label.sc-stzh-popover{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-popover__label.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-popover__close.sc-stzh-popover{visibility:var(--stzh-popover-close-visibility);cursor:pointer;display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;margin-left:auto;border-radius:50%;color:var(--stzh-base-lead-color);padding:var(--stzh-space-xxsmall)}.stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-xsmall)}.stzh-popover__arrow.sc-stzh-popover{position:absolute;display:none}@media screen and (min-width: 600px){.stzh-popover__arrow.sc-stzh-popover{display:flex}}.stzh-popover__vhidden.sc-stzh-popover{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:focus{box-shadow:0 0 0 0.0625rem var(--stzh-color-primary)}@media screen and (min-width: 600px){.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover,.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{position:absolute;top:0;right:0;transform:translate(30%, -30%);background-color:var(--stzh-color-old-grey5)}.stzh-popover--default.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active),.stzh-popover--secondary.sc-stzh-popover .stzh-popover__close.sc-stzh-popover:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-inner.sc-stzh-popover{flex-direction:row-reverse;align-items:flex-start}}.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{visibility:visible}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__close.sc-stzh-popover{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__icon.sc-stzh-popover{--size:var(--stzh-icon-size-small)}}@media screen and (min-width: 600px){@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}}@media screen and (min-width: 600px){.stzh-popover--tooltip.sc-stzh-popover .stzh-popover__content-slot.sc-stzh-popover{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-horizontal.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{left:0 !important;right:0 !important;width:100%}}@media screen and (min-width: 600px){.stzh-popover--popover-fullwidth-vertical.sc-stzh-popover .stzh-popover__dialog.sc-stzh-popover{top:0 !important;bottom:0 !important;height:100%}}";const u=200;const w=300;const b=100;const y=200;function _(){const t=f("small").matches;return{keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:t?b:u,easing:"linear"}}}function k(){const t=f("small").matches;return{keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:t?y:w,easing:"linear"}}}function $(){const t=f("small").matches;return{keyframes:[{transform:t?"translateY(-8px)":"translateY(100%)"},{transform:"translateY(0px)"}],options:{duration:t?b:u,easing:"linear"}}}function j(){const t=f("small").matches;return{keyframes:[{transform:"translateY(0px)"},{transform:t?"translateY(-8px)":"translateY(100%)"}],options:{duration:t?y:w,easing:"linear"}}}const O={ESC:27};const C="stzh-popover-open";let Y=0;const D=class{constructor(s){t(this,s);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.initialTouchX=null;this.initialTouchY=null;this.handleKeydown=t=>{if(t.keyCode===O.ESC){this.hide()}};this.onClickTrigger=()=>{this.toggle()};this.computePosition=async()=>{if(f("small").matches){const t=[a({mainAxis:this.distance,crossAxis:this.skidding}),z({padding:5}),l({padding:5})];if(this.variant==="tooltip"){t.push(c({element:this.arrowElement,padding:5}))}const{x:e=0,y:s=0,strategy:i="absolute",placement:h,middlewareData:n}=await o(this.triggerFirstElement,this.dialogElement,{strategy:this.strategy,placement:this.placement,middleware:t});this.computedPlacement=h;Object.assign(this.dialogElement.style,{position:i,left:`${e}px`,top:`${s}px`});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:e!=null?`${n.arrow.x}px`:"",top:s!=null?`${n.arrow.y}px`:""})}}else{Object.assign(this.dialogElement.style,{position:null,left:null,top:null});if(this.variant==="tooltip"){Object.assign(this.arrowElement.style,{left:null,top:null})}}};this.handleTouchStart=t=>{const e=t.changedTouches[0];this.initialTouchX=e.pageX;this.initialTouchY=e.pageY};this.handleTouchEnd=t=>{const e=t.changedTouches[0];const s=e.pageX-this.initialTouchX;const i=e.pageY-this.initialTouchY;const h=70;const o=Math.abs(i)>=h&&Math.abs(s)<=h;if(o){this.hide()}this.initialTouchY=null;this.initialTouchX=null};this.init=()=>{var t;let e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));e=t}if(e){this.triggerFirstElement=e;e.addEventListener("click",this.onClickTrigger)}};this.open=false;this.placement="bottom";this.fullwidth="";this.variant="default";this.size="default";this.skidding=0;this.distance=undefined;this.label="";this.strategy="absolute";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return d(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return d(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}handleOutsideClick(t){if(!this.open){return}const e=t.target!==this.dialogElement&&this.dialogElement.contains(t.target)===false;const s=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(e&&!s){this.hide()}}async openWatcher(t){if(!this.dialogElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-popover"})}const t=_();const e=$();await Promise.all([g(this.contentWrapperElement),g(this.contentElement),g(this.dialogElement)]);this.dialogElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentWrapperElement.hidden=false;await Promise.all([x(f("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),x(f("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-popover"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-popover"})}const t=k();const e=j();await Promise.all([g(this.contentWrapperElement),g(this.contentElement),g(this.dialogElement)]);await Promise.all([x(f("small").matches?this.dialogElement:this.contentWrapperElement,t.keyframes,t.options),x(f("small").matches?this.dialogElement:this.contentElement,e.keyframes,e.options)]);this.contentWrapperElement.hidden=true;this.dialogElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-popover"})}}this.toggledByMethod=false}distanceWatcher(t){if(typeof t==="number"){this.distance=t}else{this.distance=this.variant==="tooltip"?12:8}}async componentWillLoad(){this.id=`stzh-popover-${Y++}`;this.distanceWatcher(this.distance);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"popover")}}popoverShown(){document.body.classList.add(C);const t=v(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","true");if(this.trap){this.trap.activate()}}popoverHidden(){document.body.classList.remove(C);const t=v(this.triggerFirstElement);this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded","false");if(this.trap){this.trap.deactivate()}}componentDidRender(){this.computePosition();this.open?this.popoverShown():this.popoverHidden();const t=v(this.triggerFirstElement);if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")||!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")||!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")||!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}componentDidUpdate(){this.trap.updateContainerElements(this.dialogElement)}componentDidLoad(){this.autoUpdateCleanup=n(this.triggerFirstElement,this.dialogElement,this.computePosition);this.contentWrapperElement.hidden=!this.open;this.trap=p(this.dialogElement,{fallbackFocus:this.dialogElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.popoverShown()}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-popover":true,[`stzh-popover--open`]:this.open,[`stzh-popover--placement-${this.computedPlacement}`]:!!this.computedPlacement,[`stzh-popover--fullwidth-${this.fullwidth}`]:!!this.fullwidth,[`stzh-popover--${this.size}`]:!!this.size,[`stzh-popover--${this.variant}`]:!!this.variant};return s(i,null,s("div",{class:t,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},s("div",{ref:t=>this.triggerElement=t,class:"stzh-popover__trigger"},s("slot",null)),s("div",{class:"stzh-popover__vhidden",id:`${this.id}-trigger-description`},this.localization.open),s("div",{ref:t=>this.contentWrapperElement=t,class:"stzh-popover__content-wrapper"},s("div",{class:"stzh-popover__backdrop"}),s("div",{ref:t=>this.contentElement=t,class:"stzh-popover__content"},s("div",{ref:t=>this.dialogElement=t,class:"stzh-popover__dialog",role:"dialog",tabindex:"-1","aria-modal":"true","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.handleKeydown},this.variant==="tooltip"&&s("div",{class:"stzh-popover__arrow",ref:t=>this.arrowElement=t,innerHTML:r}),s("div",{class:"stzh-popover__content-inner"},s("div",{class:"stzh-popover__label-wrapper"},s("h2",{id:`${this.id}-label`,class:"stzh-popover__label"},this.label?this.label:s("slot",{name:"label"})),s("button",{class:"stzh-popover__close",onClick:()=>this.hide(),type:"button"},s("stzh-icon",{name:"close",class:"stzh-popover__icon"}),s("span",{class:"stzh-popover__vhidden"},this.localization.close))),s("div",{class:"stzh-popover__content-slot-wrapper"},s("div",{class:"stzh-popover__content-slot"},s("slot",{name:"content"})),s("div",{class:"stzh-popover__action-slot"},s("slot",{name:"action"})))))))))}get element(){return h(this)}static get watchers(){return{open:["openWatcher"],distance:["distanceWatcher"]}}};D.style=m;const W='.sc-stzh-text-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-text-h{display:none}.sc-stzh-text-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(\n    --stzh-text-grid-template-areas,\n    "text text text text"\n  );--grid-template-columns:var(\n    --stzh-text-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text"\n    )}}@media screen and (min-width: 900px){.sc-stzh-text-h{--grid-template-areas:var(\n      --stzh-text-grid-template-areas,\n      "text text text text text text text text"\n    );--grid-template-columns:var(\n      --stzh-text-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}.sc-stzh-text-h .sc-stzh-text-s>*:first-child{margin-top:0 !important}.sc-stzh-text-h .sc-stzh-text-s>*:last-child{margin-bottom:0 !important}.sc-stzh-text-h .sc-stzh-text-s>a,.sc-stzh-text-h .sc-stzh-text-s a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.sc-stzh-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color)}.sc-stzh-text-h .sc-stzh-text-s>b,.sc-stzh-text-h .sc-stzh-text-s>strong,.sc-stzh-text-h .sc-stzh-text-s b,.sc-stzh-text-h .sc-stzh-text-s strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-text-h .sc-stzh-text-s>i,.sc-stzh-text-h .sc-stzh-text-s>em,.sc-stzh-text-h .sc-stzh-text-s i,.sc-stzh-text-h .sc-stzh-text-s em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}[lead].sc-stzh-text-h:not([lead=false]){--color:var(--stzh-base-lead-color)}[color=primary].sc-stzh-text-h{--color:var(--stzh-color-primary70)}[color=secondary].sc-stzh-text-h{--color:var(--stzh-color-secondary60)}[color=info].sc-stzh-text-h{--color:var(--stzh-text-info-color)}[color=inherit].sc-stzh-text-h{--color:initial}.stzh-text.sc-stzh-text{--stzh-icon-size:var(--icon-size);--stzh-icon-vertical-align:var(--icon-vertical-align);--stzh-list-font-size:"";--stzh-list-line-height:"";--stzh-list-letter-spacing:"";font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:var(--display);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);color:var(--color)}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-text__text.sc-stzh-text{grid-area:text;display:flex}.stzh-text__icon.sc-stzh-text{flex-shrink:0}.stzh-text__icon.sc-stzh-text:not(:empty){margin-right:0.25em}.stzh-text__text-inner.sc-stzh-text{flex-grow:1}.stzh-text--is-lead.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-lead-line-height, var(--stzh-font-milli-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-default-lead-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-lead-line-height, var(--stzh-font-deci-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-large-lead-letter-spacing)}}.stzh-text--font-light.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light)}.stzh-text--font-regular.sc-stzh-text{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-text--font-medium.sc-stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-text--font-medium-italic.sc-stzh-text{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-text--font-heavy.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-text--font-title.sc-stzh-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title)}.stzh-text--curve-none.sc-stzh-text{font-size:inherit}.stzh-text--curve-caption.sc-stzh-text{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-text--curve-caption.sc-stzh-text{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-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-lead-default-text-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-lead-large-text-letter-spacing)}}.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-text-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-text--size-femto.sc-stzh-text{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)}.stzh-text--size-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-text--size-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-text--size-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-text--size-milli.sc-stzh-text{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)}.stzh-text--size-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}.stzh-text--size-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}.stzh-text--size-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}.stzh-text--size-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}.stzh-text--size-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}.stzh-text--size-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--size-small-femto.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-milli.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-femto.sc-stzh-text{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)}}@media screen and (min-width: 900px){.stzh-text--size-medium-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-milli.sc-stzh-text{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)}}@media screen and (min-width: 900px){.stzh-text--size-medium-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-femto.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-milli.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-femto.sc-stzh-text{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)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-milli.sc-stzh-text{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)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}';const A=class{constructor(e){t(this,e);this.font="default";this.curve="default";this.lead=false;this.color="default";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit"}render(){return s(i,null,s("div",{class:{"stzh-text":true,"stzh-text--is-lead":this.lead,[`stzh-text--font-${this.font}`]:!!this.font,[`stzh-text--curve-${this.curve}`]:!!this.curve,[`stzh-text--size-${this.size}`]:!!this.size,[`stzh-text--size-small-${this.sizeSmall}`]:!!this.sizeSmall,[`stzh-text--size-medium-${this.sizeMedium}`]:!!this.sizeMedium,[`stzh-text--size-large-${this.sizeLarge}`]:!!this.sizeLarge,[`stzh-text--size-ultra-${this.sizeUltra}`]:!!this.sizeUltra}},s("div",{class:"stzh-text__text"},s("div",{class:"stzh-text__icon"},s("slot",{name:"icon"})),s("div",{class:"stzh-text__text-inner"},s("slot",null)))))}};A.style=W;export{D as stzh_popover,A as stzh_text};
+//# sourceMappingURL=p-5b1bc446.entry.js.map

package/dist/stzh-components/{p-e5cfdb8a.entry.js.map → p-5b1bc446.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","style","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","show","open","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","target","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","document","body","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import {\n  Host,\n  Element,\n  Component,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhPopoverOpenEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverClosedEvent\n} from \"../../index\";\n\nimport {\n  computePosition,\n  offset,\n  shift,\n  flip,\n  arrow,\n  autoUpdate,\n  Placement,\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { opacity: \"0\" },\n      { opacity: \"1\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { opacity: \"1\" },\n      { opacity: \"0\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" },\n      { transform: \"translateY(0px)\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { transform: \"translateY(0px)\" },\n      { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nconst keyCode = {\n  ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    const isClickTrigger = event.target === this.triggerElement\n      || this.triggerElement.contains(event.target as HTMLElement)\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide()\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement)\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        )\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement)\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n    ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null\n  private initialTouchY: number = null\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide()\n    }\n  }\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding\n        }),\n        flip({\n          padding: 5\n        }),\n        shift({\n          padding: 5\n        })\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5\n          })\n        );\n      }\n\n      const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n        = await computePosition(this.triggerFirstElement, this.dialogElement, {\n          strategy: this.strategy,\n          placement: this.placement,\n          middleware,\n        });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    this.initialTouchX = touch.pageX\n    this.initialTouchY = touch.pageY\n  }\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n    const threshold = 70\n\n    const isYSwipe = Math.abs(distY) >= threshold\n      && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      this.hide();\n    }\n\n    this.initialTouchY = null\n    this.initialTouchX = null\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement\n      .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement\n      .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n    this.open ? this.popoverShown() : this.popoverHidden();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n    }\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.dialogElement);\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.triggerFirstElement,\n      this.dialogElement,\n      this.computePosition\n    );\n\n    this.contentWrapperElement.hidden = !this.open;\n\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true\n    });\n\n    if (this.open) {\n      this.popoverShown();\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    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n        >\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-popover__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div\n            ref={(el) => (this.contentWrapperElement = el as HTMLDivElement)}\n            class=\"stzh-popover__content-wrapper\"\n          >\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div\n              ref={(el) => (this.contentElement = el as HTMLDivElement)}\n              class=\"stzh-popover__content\"\n            >\n              <div\n                ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" &&\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                }\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button\n                      class=\"stzh-popover__close\"\n                      onClick={() => this.hide()}\n                      type=\"button\"\n                    >\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: inherit;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhPopoverCss","ANIMATION_SHOW_DURATION","ANIMATION_HIDE_DURATION","ANIMATION_SHOW_DURATION_SMALL","ANIMATION_HIDE_DURATION_SMALL","animationContentWrapperShow","isSmall","media","matches","keyframes","opacity","options","duration","easing","animationContentWrapperHide","animationDialogShow","transform","animationDialogHide","keyCode","ESC","CLASS_BODY_OPEN","popoverCounter","StzhPopover","this","initialTouchX","initialTouchY","handleKeydown","event","hide","onClickTrigger","toggle","computePosition","async","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","variant","push","arrow","element","arrowElement","x","y","strategy","placement","middlewareData","triggerFirstElement","dialogElement","computedPlacement","Object","assign","style","position","left","top","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isYSwipe","Math","abs","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","show","open","toggledByMethod","waitForEvent","update","handleOutsideClick","isClickOutside","target","contains","isClickTrigger","openWatcher","newValue","stzhOpen","emit","component","animationShow","animationShowDialog","Promise","all","stopAnimations","contentWrapperElement","contentElement","willChange","hidden","animateTo","stzhOpened","stzhClose","animationHide","animationHideDialog","stzhClosed","distanceWatcher","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","popoverShown","document","body","classList","add","isStzh","isStzhElement","setAttribute","trap","activate","popoverHidden","remove","deactivate","componentDidRender","getAttribute","label","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","removeEventListener","render","classes","fullwidth","size","h","Host","class","onTouchStart","onTouchEnd","ref","el","role","tabindex","onKeyDown","innerHTML","Arrow","name","onClick","type","close","stzhTextCss","StzhText","lead","font","curve","sizeSmall","sizeMedium","sizeLarge","sizeUltra"],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import {\n  Host,\n  Element,\n  Component,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhPopoverOpenEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverClosedEvent\n} from \"../../index\";\n\nimport {\n  computePosition,\n  offset,\n  shift,\n  flip,\n  arrow,\n  autoUpdate,\n  Placement,\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { opacity: \"0\" },\n      { opacity: \"1\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { opacity: \"1\" },\n      { opacity: \"0\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" },\n      { transform: \"translateY(0px)\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [\n      { transform: \"translateY(0px)\" },\n      { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }\n    ],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\"\n    }\n  };\n}\n\nconst keyCode = {\n  ESC: 27\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    const isClickTrigger = event.target === this.triggerElement\n      || this.triggerElement.contains(event.target as HTMLElement)\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide()\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement)\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        )\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement)\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n    ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null\n  private initialTouchY: number = null\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide()\n    }\n  }\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding\n        }),\n        flip({\n          padding: 5\n        }),\n        shift({\n          padding: 5\n        })\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5\n          })\n        );\n      }\n\n      const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n        = await computePosition(this.triggerFirstElement, this.dialogElement, {\n          strategy: this.strategy,\n          placement: this.placement,\n          middleware,\n        });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    this.initialTouchX = touch.pageX\n    this.initialTouchY = touch.pageY\n  }\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n    const threshold = 70\n\n    const isYSwipe = Math.abs(distY) >= threshold\n      && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      this.hide();\n    }\n\n    this.initialTouchY = null\n    this.initialTouchX = null\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement\n      .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement\n      .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n    this.open ? this.popoverShown() : this.popoverHidden();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n    }\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n      || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.dialogElement);\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.triggerFirstElement,\n      this.dialogElement,\n      this.computePosition\n    );\n\n    this.contentWrapperElement.hidden = !this.open;\n\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true\n    });\n\n    if (this.open) {\n      this.popoverShown();\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    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n        >\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-popover__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div\n            ref={(el) => (this.contentWrapperElement = el as HTMLDivElement)}\n            class=\"stzh-popover__content-wrapper\"\n          >\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div\n              ref={(el) => (this.contentElement = el as HTMLDivElement)}\n              class=\"stzh-popover__content\"\n            >\n              <div\n                ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" &&\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                }\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button\n                      class=\"stzh-popover__close\"\n                      onClick={() => this.hide()}\n                      type=\"button\"\n                    >\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}