@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/{p-8436ccb7.js.map → p-570cd361.js.map}

@@ -1 +1 @@
-{"file":"p-8436ccb7.js","mappings":"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","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space(\"xsmall\")};\n  --padding-right: #{space(\"xsmall\")};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize(\"xsmall\")};\n  --icon-color: var(--color);\n  --icon-gap: #{space(\"xsmall\")};\n  --counter-color: var(--color);\n  --counter-gap: #{space(\"xsmall\")};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(\n    --stzh-chip-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space(\"xsmall\")};\n    --padding-right: #{space(\"xsmall\")};\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-chip-active-hover-background-color,\n      #{$colorPrimary90}\n    );\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-chip-disabled-background-color,\n      #{$colorGrey20}\n    );\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\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    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space(\"xxsmall\");\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize(\"xxsmall\")};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space(\"xxsmall\")});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip 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 chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\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: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.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-chip\",\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-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__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            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__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            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-570cd361.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,23aAA23a,CAAC;AACh5a,uBAAe,WAAW;;MCoBb,QAAQ;;;;;;;;QA8FX,mBAAc,GAAY,KAAK,CAAC;QA4ChC,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;aACnB;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,WAAW;gBACtB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;YACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;gBACvC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,WAAW;gBACtB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,WAAW;gBACtB,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAiB;YACxC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,WAAW;gBACtB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;qBA3LsB,EAAE;;oBAMH,EAAE;sBAGA,EAAE;8BAGwB,KAAK;yBAGV,KAAK;wBAGN,KAAK;uBAGE,KAAK;oBAGX,SAAS;;;;;oBAeT,SAAS;uBAG7B,EAAE;2BAGE,EAAE;sBAGW,KAAK;wBAGH,KAAK;;;+BASiB,EAAE;;;;IAkCrE,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAA,IAAI,CAAC,IAAI,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACjF,CAAC,CAAC;KACJ;IAEO,WAAW;QACjB,QACE,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IACnG,iBACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EACF,IAAI,CAAC,IAAI;iBACR,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,WAAW,CAAC;iBACpC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,mBAAmB,CAAC;iBAC/C,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,SAAS,CAAC;iBACnC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,kBAAkB,CAAC,GAEtC,KAEb,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,CACG,EAEN,kBAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,IACtF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,YAAM,KAAK,EAAC,oBAAoB,eAAS,IAAI,CAAC,OAAO,MAAS,CAC/D,CACU,EAEZ,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,WAAK,KAAK,EAAC,oBAAoB,iBAAa,MAAM,IAC/C,IAAI,CAAC,OAAO,CACT,CACP,CACG,EACN;KACH;IAuDD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,sBAAsB,EAAE,IAAI,CAAC,MAAM;YACnC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;YACvC,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;YACvC,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;YACxC,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC7C,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC7C,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C,CAAC;QAEF,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAEtE,QACE,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,4DAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAC,QAAQ,iBACA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,IAEvD,kEAAW,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,WAAW,GAAa,CAChE,CACV,EAEA,IAAI,CAAC,IAAI,IACR,EAAC,IAAI,IACH,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;gBAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC/C,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACd,KAEP,EAAC,IAAI,IACH,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI;gBAC/C,SAAS,EAAE,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,SAAS,IAAI,IAAI,sBAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space(\"xsmall\")};\n  --padding-right: #{space(\"xsmall\")};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize(\"xsmall\")};\n  --icon-color: var(--color);\n  --icon-gap: #{space(\"xsmall\")};\n  --counter-color: var(--color);\n  --counter-gap: #{space(\"xsmall\")};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(\n    --stzh-chip-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space(\"xsmall\")};\n    --padding-right: #{space(\"xsmall\")};\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-chip-active-hover-background-color,\n      #{$colorPrimary90}\n    );\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-chip-disabled-background-color,\n      #{$colorGrey20}\n    );\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\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    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space(\"xxsmall\");\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize(\"xxsmall\")};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space(\"xxsmall\")});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip 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 chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\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: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.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-chip\",\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-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__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            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__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            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-52037fe2.js → p-5b94ed4e.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { d as abbreviateText, e as getMeta } from './p-289f5de2.js';
-import { d as defineCustomElement$5 } from './p-17efbc57.js';
-import { d as defineCustomElement$4 } from './p-e42121d1.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-9a31aa56.js';
-import { d as defineCustomElement$1 } from './p-1449a24c.js';
+import { d as defineCustomElement$5 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$4 } from './p-4a78990f.js';
+import { d as defineCustomElement$3 } from './p-7c4e756c.js';
+import { d as defineCustomElement$2 } from './p-63c4d8c4.js';
+import { d as defineCustomElement$1 } from './p-613937f1.js';
 
 const stzhShareCss = ".sc-stzh-share-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-share-h,[stzh-hidden].sc-stzh-share-h{display:none}.sc-stzh-share-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::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-share-h .has-focus.sc-stzh-share{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share{outline-style:none !important}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share::-moz-focus-inner{border:0 !important}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-xxsmall)}";
 const StzhShareStyle0 = stzhShareCss;
@@ -88,7 +88,7 @@ const StzhShare = /*@__PURE__*/ proxyCustomElement(class StzhShare extends H {
                 icon: "xing",
             },
         };
-        return (h(Host, { key: '53eb919fed1d3d5df5938aa69ebb1f3fb2d6ba64' }, h("div", { key: '2f971bd90993f82ba34601c73de6fdfc3c19c324', class: classes }, h("ul", { key: 'cca310ea1c64fd7a107d647c9f1ddae30ea28ef8', class: "stzh-share__list" }, this._services.map(service => (h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
+        return (h(Host, { key: '5ff252cebdf9e2aeef34cf3e8d77f7c93aa0e121' }, h("div", { key: '20a3cc2e0448cc29cda485f65c4b556cd2752b7e', class: classes }, h("ul", { key: '09e583e33c457c32006198ae5c942006f76d083f', class: "stzh-share__list" }, this._services.map(service => (h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -145,4 +145,4 @@ function defineCustomElement() {
 
 export { StzhShare as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-52037fe2.js.map
+//# sourceMappingURL=p-5b94ed4e.js.map

package/dist/components/{p-52037fe2.js.map → p-5b94ed4e.js.map}

@@ -1 +1 @@
-{"file":"p-52037fe2.js","mappings":"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","names":[],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space(\"xxsmall\");\n    }\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch } from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\";\nimport { getMeta } from \"../../utils/utils\";\nimport { abbreviateText } from \"../../utils/string-utils\";\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true,\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  };\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true,\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url),\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      mail: {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\",\n      },\n      facebook: {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\",\n      },\n      twitter: {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\",\n      },\n      linkedin: {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\",\n      },\n      xing: {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\",\n      },\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map(service => (\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip content={serviceData[service].text} size=\"small\">\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-5b94ed4e.js","mappings":"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","names":[],"sources":["src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-share {\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n  }\n\n  &__item {\n    &:not(:last-child) {\n      margin-right: space(\"xxsmall\");\n    }\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch } from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\";\nimport { getMeta } from \"../../utils/utils\";\nimport { abbreviateText } from \"../../utils/string-utils\";\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n  tag: \"stzh-share\",\n  styleUrl: \"stzh-share.scss\",\n  scoped: true,\n})\nexport class StzhShare {\n  /** Translation strings */\n  @Prop() localization: StzhShareLocalizedText;\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() url: string = window.location.href;\n\n  /** Overwrite mail subject translation */\n  @Prop() mailSubject: string;\n\n  /** Overwrite mail body translation */\n  @Prop() mailBody: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() services: ShareService[] | string = [\"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"];\n\n  private _services: ShareService[] = [];\n\n  @Watch(\"services\")\n  servicesWatcher(newValue: ShareService[] | string) {\n    if (typeof newValue === \"string\") {\n      this._services = JSON.parse(newValue);\n    } else {\n      this._services = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShareElement;\n\n  private openPopup = (url, event) => {\n    event.preventDefault();\n    window.open(url, \"_blank\", \"width=600,height=460\");\n  };\n\n  async componentWillLoad() {\n    this.servicesWatcher(this.services);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-share\": true,\n    };\n\n    const shareUrl = encodeURIComponent(this.url);\n    const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n    const mailBody = encodeURIComponent(\n      (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url),\n    );\n\n    const title = encodeURIComponent(document.title);\n    const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n    const description = encodeURIComponent(getMeta(\"description\"));\n\n    const serviceData = {\n      mail: {\n        popup: false,\n        blank: false,\n        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n        text: this.localization.shareMail,\n        icon: \"mail\",\n      },\n      facebook: {\n        popup: true,\n        blank: true,\n        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n        text: this.localization.shareFacebook,\n        icon: \"facebook\",\n      },\n      twitter: {\n        popup: true,\n        blank: true,\n        url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n        text: this.localization.shareTwitter,\n        icon: \"twitter\",\n      },\n      linkedin: {\n        popup: true,\n        blank: true,\n        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n        text: this.localization.shareLinkedin,\n        icon: \"linkedin\",\n      },\n      xing: {\n        popup: true,\n        blank: true,\n        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n        text: this.localization.shareXing,\n        icon: \"xing\",\n      },\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <ul class=\"stzh-share__list\">\n            {this._services.map(service => (\n              <li class=\"stzh-share__item\">\n                <stzh-tooltip content={serviceData[service].text} size=\"small\">\n                  <stzh-button\n                    class={`stzh-share__button is-${service}`}\n                    size=\"small\"\n                    variant=\"tertiary\"\n                    iconOnly={true}\n                    href={serviceData[service].url}\n                    rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n                    target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n                    onClick={serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null}\n                    analyticsId={serviceData[service].text}\n                    icon={serviceData[service].icon}\n                  ></stzh-button>\n                </stzh-tooltip>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-1449a24c.js → p-613937f1.js}

@@ -4,8 +4,8 @@ import { c as createFocusTrap } from './p-f48422c4.js';
 import { i as isStzhElement } from './p-289f5de2.js';
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo } from './p-2c0bec3e.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$2 } from './p-7c4e756c.js';
+import { d as defineCustomElement$1 } from './p-63c4d8c4.js';
 
 const stzhTooltipCss = ".sc-stzh-tooltip-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-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::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-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;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)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 const StzhTooltipStyle0 = stzhTooltipCss;
@@ -338,7 +338,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (h(Host, { key: 'f54ce964dd7fbf7c8cf639629ae9c6f3debe41b5' }, h("div", { key: 'e1bd6c9a8d5388378d9a1978c7350478c56f1da2', class: classes }, h("div", { key: '6b1a695d7f160377e89a4d64e3012022f1ef814b', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '5c8ae192703254c6e0dd082eb2e021ec5c388bde' })), this.hasTrigger("click") && (h("div", { key: '5444340aa4e9e41ed1598e4fd94214f2aa962167', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'a210bef95fcb3b59cd5d763e8c4897a871538a4a', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: 'd6e69920cd80a3e5ae230a2a2320844b7d3640e5', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '04acd151927077f8c88c4e3f864a0af189fe777a', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: 'fb4d913114554c29f70a0c24d1cb916ae861bac0', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '7e08a05a8610bd9713a136e2a349b2361379b052', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '03bdeb548fed00dd6415fa756fc7486f2c068b50', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '2808ef4f365f76b0555618699a4ff7d0650e6f3d', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
+        return (h(Host, { key: '67948b0604c4871d4899392840b2fdf271ea2121' }, h("div", { key: '67f57022d1b018ad810f0b5358aaa812f4647bb8', class: classes }, h("div", { key: 'ad0215e2fbdcb7b43496cd087069e3eade407033', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: 'fe4761d1bbbf89e4b485b12d23372115d1b8ff61' })), this.hasTrigger("click") && (h("div", { key: '6620e0a3e9d70c83a0feb79267e4c7260b7e43fb', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: '6e51c0a23b8c1d9fc6a7896e624cba9622c30db7', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: '6eab6ee7e6868b89af87fd8682ec5156a1d38c13', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '588bea989466372661403e88d968e8cf0f1ea250', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: 'f38f700ab6d4de381d3ebe95a8d5848be8dc92a3', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: 'b44e77e22003362c138e336402f27f043b7276ea', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: 'e3074bb2ee0e793b9ac62fde8906cfcd4e7aaffa', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '3821fd2e06d38551cd7e212aaa9cb93acfeef189', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -394,4 +394,4 @@ function defineCustomElement() {
 
 export { StzhTooltip as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-1449a24c.js.map
+//# sourceMappingURL=p-613937f1.js.map

package/dist/components/{p-1449a24c.js.map → p-613937f1.js.map}

@@ -1 +1 @@
-{"file":"p-1449a24c.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n * @prop --stzh-tooltip-color: **Global**: Color of tooltip text\n * @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip\n * @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip\n */\n\n:host {\n  display: contents;\n\n  --color: var(--stzh-tooltip-color, #{$colorWhite});\n  --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n  --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip 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 tooltip 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 tooltip 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  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      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        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\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\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\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).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      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`,\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  private initializedTooltip = false;\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedTooltip) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.initializedTooltip = true;\n    }\n\n    if (this.initializedTooltip) {\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.contentElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.contentElement.hidden = !this.open;\n    if (this.open && this.trap) {\n      this.trap.activate();\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      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-613937f1.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n * @prop --stzh-tooltip-color: **Global**: Color of tooltip text\n * @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip\n * @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip\n */\n\n:host {\n  display: contents;\n\n  --color: var(--stzh-tooltip-color, #{$colorWhite});\n  --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n  --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip 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 tooltip 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 tooltip 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  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      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        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\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\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\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).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      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`,\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  private initializedTooltip = false;\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedTooltip) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.initializedTooltip = true;\n    }\n\n    if (this.initializedTooltip) {\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.contentElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.contentElement.hidden = !this.open;\n    if (this.open && this.trap) {\n      this.trap.activate();\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      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9a31aa56.js → p-63c4d8c4.js}

@@ -18,7 +18,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (h(Host, { key: '1ec9314cc970b7a79bbedae80e303b125dc19157' }, h("div", { key: '825ebf793d96136e562ceb2b1766f9db718bccab', class: {
+        return (h(Host, { key: '358852e9ff3f3371de26c3bc0b7e58f4ffb30b93' }, h("div", { key: '4033c19385a0a578a8eb0f0a3e07279c7055eedb', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -28,7 +28,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
                 [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
                 [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
                 [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-            } }, h("div", { key: '279ba05023ca81c3c37332dd4aa91183632b0b8d', class: "stzh-text__text" }, h("div", { key: '8991039f634dd5722439bfda60b57dda1975fec0', class: "stzh-text__icon" }, h("slot", { key: '59534b453bae64bf2ba2e563b86c1f9198f48c64', name: "icon" })), h("div", { key: 'c8aa41f6be05d1586fc2569107011ab95fbb9e1f', class: "stzh-text__text-inner" }, h("slot", { key: '649a5bede6d99063f718cedb86cc2584dcf08adb' }))))));
+            } }, h("div", { key: '073aa7e7cefb5f6eb2bbc9388f030ef2085326bc', class: "stzh-text__text" }, h("div", { key: '90aa0f792ad6aa1bfcaa03d969751ae055cef227', class: "stzh-text__icon" }, h("slot", { key: '1c9da57696dbc4e79a20bb2719ed4c03e5d4fc53', name: "icon" })), h("div", { key: '204d41fd981d654839a63426f386f7574b08bff3', class: "stzh-text__text-inner" }, h("slot", { key: 'bec62bfb9db142a57114829bb9b17d30ef8ebbd6' }))))));
     }
     static get style() { return StzhTextStyle0; }
 }, [6, "stzh-text", {
@@ -58,4 +58,4 @@ function defineCustomElement() {
 
 export { StzhText as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9a31aa56.js.map
+//# sourceMappingURL=p-63c4d8c4.js.map

package/dist/components/{p-9a31aa56.js.map → p-63c4d8c4.js.map}

@@ -1 +1 @@
-{"file":"p-9a31aa56.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u0uCAAu0uC,CAAC;AAC51uC,uBAAe,WAAW;;MCYb,QAAQ;;;;oBAEQ,SAAS;qBAGU,SAAS;oBAGd,KAAK;qBAG6C,SAAS;oBAG7D,SAAS;yBAEJ,SAAS;0BAER,SAAS;yBAEV,SAAS;yBAET,SAAS;;IAErD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,0BAA0B,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAC9D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\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      @media (hover: none) {\n        color: inherit;\n      }\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\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } 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"],"version":3}
+{"file":"p-63c4d8c4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u0uCAAu0uC,CAAC;AAC51uC,uBAAe,WAAW;;MCYb,QAAQ;;;;oBAEQ,SAAS;qBAGU,SAAS;oBAGd,KAAK;qBAG6C,SAAS;oBAG7D,SAAS;yBAEJ,SAAS;0BAER,SAAS;yBAEV,SAAS;yBAET,SAAS;;IAErD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,0BAA0B,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAC9D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\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      @media (hover: none) {\n        color: inherit;\n      }\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\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } 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"],"version":3}

package/dist/components/{p-26ddf3b3.js → p-6897315f.js}

@@ -15,7 +15,7 @@ const StzhList = /*@__PURE__*/ proxyCustomElement(class StzhList extends H {
             "stzh-list": true,
             [`stzh-list--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'cab51fa289bbc227c7194a4f13ce48f0c545ad81' }, h("div", { key: 'e264dea5d6d6adbe0601149d65a840b9e7b8a2f6', class: classes, role: "list" }, h("slot", { key: 'f16515c05d38db80712e8babf923c2726520d3e8' }))));
+        return (h(Host, { key: 'e511ad6ef81dae239c9a505c5d9cae342cabc121' }, h("div", { key: '6a0f2a69d0d893e33ac41f140ec41dd1c4a18180', class: classes, role: "list" }, h("slot", { key: '2a512da2134290f64a5c0a897c50d82a11fec458' }))));
     }
     get element() { return this; }
     static get style() { return StzhListStyle0; }
@@ -38,4 +38,4 @@ function defineCustomElement() {
 
 export { StzhList as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-26ddf3b3.js.map
+//# sourceMappingURL=p-6897315f.js.map

package/dist/components/{p-26ddf3b3.js.map → p-6897315f.js.map}

@@ -1 +1 @@
-{"file":"p-26ddf3b3.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uuEAAuuE,CAAC;AAC5vE,uBAAe,WAAW;;MCSb,QAAQ;;;;;uBAEuD,WAAW;;IAIrF,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,IAC9B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-list/stzh-list.scss?tag=stzh-list&encapsulation=shadow","src/components/stzh-list/stzh-list.tsx"],"sourcesContent":[":host {\n  --font-size: var(--stzh-list-font-size, var(--stzh-font-milli-font-size));\n  --line-height: var(\n    --stzh-list-line-height,\n    var(--stzh-font-milli-text-line-height)\n  );\n  --letter-spacing: var(--stzh-list-letter-spacing, normal);\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-list-font-size, var(--stzh-font-centi-font-size));\n    --line-height: var(\n      --stzh-list-line-height,\n      var(--stzh-font-centi-text-line-height)\n    );\n  }\n\n  counter-reset: li-counter;\n\n  ::slotted(stzh-list-item) {\n    --icon-checklist-visibility: hidden;\n\n    counter-increment: li-counter;\n    position: relative;\n  }\n}\n\n:host([variant=\"unordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space(\"xsmall\")} + #{space(\"small\")});\n\n  &::before {\n    content: \"–\"; // old one: \\2014\n  }\n}\n\n:host([variant=\"ordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space(\"large\")} + #{space(\"small\")});\n\n  &::before {\n    content: counter(li-counter) \". \";\n  }\n}\n\n:host([variant=\"checklist\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: visible;\n\n  padding-left: calc(#{iconSize(\"medium\")} + #{space(\"small\")});\n}\n\n.stzh-list {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-list-item`\n */\n@Component({\n  tag: \"stzh-list\",\n  styleUrl: \"stzh-list.scss\",\n  shadow: true,\n})\nexport class StzhList {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"unordered\" | \"ordered\" | \"checklist\" = \"unordered\";\n\n  @Element() element: HTMLStzhListElement;\n\n  render() {\n    const classes = {\n      \"stzh-list\": true,\n      [`stzh-list--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-6897315f.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uuEAAuuE,CAAC;AAC5vE,uBAAe,WAAW;;MCSb,QAAQ;;;;;uBAEuD,WAAW;;IAIrF,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,IAC9B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-list/stzh-list.scss?tag=stzh-list&encapsulation=shadow","src/components/stzh-list/stzh-list.tsx"],"sourcesContent":[":host {\n  --font-size: var(--stzh-list-font-size, var(--stzh-font-milli-font-size));\n  --line-height: var(\n    --stzh-list-line-height,\n    var(--stzh-font-milli-text-line-height)\n  );\n  --letter-spacing: var(--stzh-list-letter-spacing, normal);\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-list-font-size, var(--stzh-font-centi-font-size));\n    --line-height: var(\n      --stzh-list-line-height,\n      var(--stzh-font-centi-text-line-height)\n    );\n  }\n\n  counter-reset: li-counter;\n\n  ::slotted(stzh-list-item) {\n    --icon-checklist-visibility: hidden;\n\n    counter-increment: li-counter;\n    position: relative;\n  }\n}\n\n:host([variant=\"unordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space(\"xsmall\")} + #{space(\"small\")});\n\n  &::before {\n    content: \"–\"; // old one: \\2014\n  }\n}\n\n:host([variant=\"ordered\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: hidden;\n\n  padding-left: calc(#{space(\"large\")} + #{space(\"small\")});\n\n  &::before {\n    content: counter(li-counter) \". \";\n  }\n}\n\n:host([variant=\"checklist\"]) ::slotted(stzh-list-item) {\n  --icon-checklist-visibility: visible;\n\n  padding-left: calc(#{iconSize(\"medium\")} + #{space(\"small\")});\n}\n\n.stzh-list {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-list-item`\n */\n@Component({\n  tag: \"stzh-list\",\n  styleUrl: \"stzh-list.scss\",\n  shadow: true,\n})\nexport class StzhList {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"unordered\" | \"ordered\" | \"checklist\" = \"unordered\";\n\n  @Element() element: HTMLStzhListElement;\n\n  render() {\n    const classes = {\n      \"stzh-list\": true,\n      [`stzh-list--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes} role=\"list\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}