@oiz/stzh-components 4.12.2 → 4.13.0-beta1

package/dist/components/{p-DrLVNdlm.js.map → p-CxqE2nhG.js.map}

@@ -1 +1 @@
-{"file":"p-DrLVNdlm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\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\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n//  @include mq($from: $breakpoint) {\n//    :host(:where([size-#{$breakpoint}=\"default\"])) {\n//      @include link--size-default;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"small\"])) {\n//      @include link--size-small;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n//      @include link--size-inherit;\n//    }\n//  }\n//}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  @media (forced-colors: active) {\n    transition: none;\n  }\n\n  &:hover {\n    color: var(--hover-color);\n\n    @media (hover: none) {\n      color: inherit;\n    }\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space(\"xxsmall\");\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &--has-icon &__icon-wrapper {\n    display: inline-flex;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space(\"xxsmall\")} * -1);\n    right: calc(#{space(\"large\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"small\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__icon-wrapper\n    + &__text:not(:empty) {\n    margin-left: space(\"small\");\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  &--no-href {\n    @media (forced-colors: active) {\n      --color: ButtonText;\n      --hover-color: Highlight;\n    }\n  }\n}\n","import { Component, Host, Fragment, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType, StzhLinkClickEvent } from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/**\n * @slot icon - Slot for icon element\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true,\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLinkLocalizedText;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: 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 button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.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-link\",\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-link\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-link\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-link\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ? <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon> : <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel?.includes(\"external\") && (\n          <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={el => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentDidLoad() {\n    this.addWordBreakToLinks();\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.href ? \"has\" : \"no\"}-href`]: true,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CxqE2nhG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\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\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n//  @include mq($from: $breakpoint) {\n//    :host(:where([size-#{$breakpoint}=\"default\"])) {\n//      @include link--size-default;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"small\"])) {\n//      @include link--size-small;\n//    }\n//\n//    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n//      @include link--size-inherit;\n//    }\n//  }\n//}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  @media (forced-colors: active) {\n    transition: none;\n  }\n\n  &:hover {\n    color: var(--hover-color);\n\n    @media (hover: none) {\n      color: inherit;\n    }\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: none;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space(\"xxsmall\");\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &--has-icon &__icon-wrapper {\n    display: inline-flex;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space(\"xxsmall\")} * -1);\n    right: calc(#{space(\"large\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"small\")} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge\n    &__icon-wrapper\n    + &__text:not(:empty) {\n    margin-left: space(\"small\");\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  &--no-href {\n    @media (forced-colors: active) {\n      --color: ButtonText;\n      --hover-color: Highlight;\n    }\n  }\n}\n","import { Component, Host, Fragment, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType, StzhLinkClickEvent } from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/**\n * @slot icon - Slot for icon element\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true,\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLinkLocalizedText;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: 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 button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.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-link\",\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-link\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-link\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(this.element?.getElementsByClassName(\"stzh-link\") || []);\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ? <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon> : <slot name=\"icon\"></slot>}\n        {(this.badge || this.badgeEmpty) && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel?.includes(\"external\") && (\n          <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n        )}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={el => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed && (\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        )}\n      </Fragment>\n    );\n  }\n\n  async componentDidLoad() {\n    this.addWordBreakToLinks();\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.href ? \"has\" : \"no\"}-href`]: true,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\" ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D2yGNkLU.js → p-CyByUFaI.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 import { i as isStzhElement } from './p-DBHUqFOB.js';
 import { w as waitForEvent } from './p--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-BOO84wnP.js';
@@ -146,7 +146,7 @@ const StzhDetails = /*@__PURE__*/ proxyCustomElement(class StzhDetails extends H
             "stzh-details": true,
             "stzh-details--is-open": this.open,
         };
-        return (h(Host, { key: 'f5c8e4a31f502abe856418b524f8b508cbd1c128' }, h("div", { key: '9b2a8b0180abd4c43b156030475835afc1a45ac5', class: classes }, h("div", { key: 'e2cf487c3926d3b1f22c565a65dac18f9d22779a', ref: el => (this.triggerElement = el), class: "stzh-details__trigger" }, h("slot", { key: 'f8a63e5359facee6d70c1df10b45cb5b75e8d9c2' })), h("div", { key: '48c369c60bc27d37000632e419b80adb7a9a49cb', id: `${this.detailsId}-content`, ref: el => (this.bodyElement = el), class: "stzh-details__content", "aria-labelledby": `${this.detailsId}-header` }, h("div", { key: '7ab5cbd808d2a8316fe62c858de5470881617908', class: "stzh-details__content-inner" }, h("slot", { key: '916c66c4e70c412e51466e489d07cdbffccde8a0', name: "content" }))))));
+        return (h(Host, { key: '4b48f64ac3366debabb0c07612953be8f4deea4b' }, h("div", { key: 'b8bc3d9ae17fcfbbeaf65ed2f0a1607c859947b0', class: classes }, h("div", { key: '882c46abadbc8c3b7c8801d1e2e3018a1f813c91', ref: el => (this.triggerElement = el), class: "stzh-details__trigger" }, h("slot", { key: '415c19b3fb31447a44eba359f74be4c6f0abda24' })), h("div", { key: '12ffec7022cac4011500081caee03335b21d3352', id: `${this.detailsId}-content`, ref: el => (this.bodyElement = el), class: "stzh-details__content", "aria-labelledby": `${this.detailsId}-header` }, h("div", { key: 'b4c218cda34992243e39207552208799a07554d7', class: "stzh-details__content-inner" }, h("slot", { key: '993a95a62d6301d5fef1ede4517c60cbdeb4726d', name: "content" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -176,6 +176,6 @@ function defineCustomElement() {
 }
 
 export { StzhDetails as S, defineCustomElement as d };
-//# sourceMappingURL=p-D2yGNkLU.js.map
+//# sourceMappingURL=p-CyByUFaI.js.map
 
-//# sourceMappingURL=p-D2yGNkLU.js.map
+//# sourceMappingURL=p-CyByUFaI.js.map

package/dist/components/{p-D2yGNkLU.js.map → p-CyByUFaI.js.map}

@@ -1 +1 @@
-{"file":"p-D2yGNkLU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(\n    --stzh-details-content-padding-top,\n    #{space(\"medium\")}\n  );\n  --content-padding-bottom: 0;\n}\n\n.stzh-details {\n  display: block;\n\n  &__trigger {\n    display: inline-flex;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true,\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        newValue ? \"true\" : \"false\",\n      );\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private onHostClick = (e: MouseEvent) => {\n    const target = e.target as HTMLElement | null;\n    if (!target) return;\n\n    if (!target.closest(\".stzh-details__trigger\")) return;\n\n    this.onClickTrigger();\n  };\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-controls\" : \"aria-controls\",\n        `${this.detailsId}-content`,\n      );\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        this.open ? \"true\" : \"false\",\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.element.addEventListener(\"click\", this.onHostClick);\n  }\n\n  disconnectedCallback() {\n    this.element.removeEventListener(\"click\", this.onHostClick);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-details__trigger\">\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CyByUFaI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(\n    --stzh-details-content-padding-top,\n    #{space(\"medium\")}\n  );\n  --content-padding-bottom: 0;\n}\n\n.stzh-details {\n  display: block;\n\n  &__trigger {\n    display: inline-flex;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true,\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        newValue ? \"true\" : \"false\",\n      );\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private onHostClick = (e: MouseEvent) => {\n    const target = e.target as HTMLElement | null;\n    if (!target) return;\n\n    if (!target.closest(\".stzh-details__trigger\")) return;\n\n    this.onClickTrigger();\n  };\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-controls\" : \"aria-controls\",\n        `${this.detailsId}-content`,\n      );\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        this.open ? \"true\" : \"false\",\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.element.addEventListener(\"click\", this.onHostClick);\n  }\n\n  disconnectedCallback() {\n    this.element.removeEventListener(\"click\", this.onHostClick);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-details__trigger\">\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BdtE_fpY.js → p-D-Yirlnl.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 
 const stzhButtongroupCss = () => `.sc-stzh-buttongroup-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-buttongroup-h,[stzh-hidden].sc-stzh-buttongroup-h{display:none}.sc-stzh-buttongroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::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-buttongroup-h .has-focus.sc-stzh-buttongroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-buttongroup-h .stzh-fylingfocus-focused.sc-stzh-buttongroup{outline-style:none !important}.sc-stzh-buttongroup-h .stzh-fylingfocus-focused.sc-stzh-buttongroup::-moz-focus-inner{border:0 !important}[fullwidth].sc-stzh-buttongroup-h .stzh-buttongroup.sc-stzh-buttongroup{width:100%;flex-wrap:wrap}.stzh-buttongroup.sc-stzh-buttongroup{position:relative;z-index:auto;display:flex;gap:var(--stzh-space-xsmall)}`;
 
@@ -99,7 +99,7 @@ const StzhButtongroup = /*@__PURE__*/ proxyCustomElement(class StzhButtongroup e
         const classes = {
             "stzh-buttongroup": true,
         };
-        return (h(Host, { key: '1a46aa3830b9776afc46f0f03f9efd428cc1fc5a' }, h("div", { key: 'b3f0643aa039b0ad0594a11219c3dce012af040a', class: classes }, h("slot", { key: '2dc6d4813b5c94664da7931090b72a7289c66619', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'cb5867144c0c59b10ed58c6a75f9506f05342ba9' }, h("div", { key: '75ba0faf490545b9003a5e4334deb5679e0e701a', class: classes }, h("slot", { key: 'e01d53461a0b9215196c45cdb4cb6f11d1710418', onSlotchange: this.onSlotChange }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -144,6 +144,6 @@ function defineCustomElement() {
 }
 
 export { StzhButtongroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-BdtE_fpY.js.map
+//# sourceMappingURL=p-D-Yirlnl.js.map
 
-//# sourceMappingURL=p-BdtE_fpY.js.map
+//# sourceMappingURL=p-D-Yirlnl.js.map

package/dist/components/{p-BdtE_fpY.js.map → p-D-Yirlnl.js.map}

@@ -1 +1 @@
-{"file":"p-BdtE_fpY.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,i4CAAi4C,CAAC;;MCYv5C,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAS2B,QAAA,IAAI,CAAA,IAAA,GAAmB,SAAS;AAmHjD,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,cAAc,EAAE;AACvB,SAAC;AAeF;;AAvHS,IAAA,UAAU,CAAC,QAAgB,EAAA;AACjC,QAAA,OAAO,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;;;IAIzD,gBAAgB,CAAC,GAAY,EAAE,QAAgB,EAAA;QACrD,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC1C,MAAM,OAAO,GAAI,GAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAA+B;QAErF,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS;QACzD,MAAM,OAAO,GAAG,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAC9D,OAAO,OAAO,IAAI,OAAO;;AAGnB,IAAA,qBAAqB,CAAC,GAAY,EAAE,QAAgB,EAAE,QAAyB,EAAA;QACrF,IAAI,QAAQ,KAAK,SAAS;YAAE;;AAE5B,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC;YAAE;;QAG1C,IAAI,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;AAC3C,YAAA,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;;;IAIhC,uBAAuB,CAAC,GAAY,EAAE,QAAkB,EAAA;QAC9D,IAAI,QAAQ,KAAK,IAAI;YAAE;QAEvB,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,WAAW,CAAC;AAC7C,QAAA,MAAM,OAAO,GAAI,GAAW,CAAC,SAAgC;;;QAI7D,MAAM,OAAO,GAAG,OAAO;AACvB,QAAA,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI;;QAGhC,IAAI,OAAO,IAAI,OAAO;YAAE;;AAGxB,QAAA,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;;IAG3B,qBAAqB,CAAC,GAAY,EAAE,QAAkB,EAAA;;QAE5D,IAAI,QAAQ,KAAK,IAAI;YAAE;QAEvB,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,SAAS,CAAC;AAC3C,QAAA,MAAM,OAAO,GAAI,GAAW,CAAC,OAA8B;;;QAI3D,MAAM,OAAO,GAAG,OAAO;AACvB,QAAA,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI;;QAGhC,IAAI,OAAO,IAAI,OAAO;YAAE;;AAGxB,QAAA,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;;AAEpB,QAAA,MAAM,cAAc,CAAC,WAAW,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,cAAc,EAAE;QACrB,qBAAqB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;;IAQpD,YAAY,GAAA;QACV,IAAI,CAAC,cAAc,EAAE;;IAIvB,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAIvB,eAAe,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;;IAGf,cAAc,GAAA;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC;AAC5D,QAAA,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;YACpB,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;YAClD,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC;YAC/D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAE7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC;YAC7C,IAAI,CAAC,uBAAuB,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;AACnD,SAAC,CAAC;;IAOJ,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,kBAAkB,EAAE,IAAI;SACzB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAS,CAAA,CAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space(\"xsmall\");\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\nimport { StzhButtonSize } from \"../../index\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */\n  @Prop({ reflect: true }) rounded?: boolean;\n\n  // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"fullwidth\");\n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute(\"fullwidth\", \"\");\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n    // Rounded only true if group has rounded property true\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"rounded\");\n    const propVal = (btn as any).rounded as boolean | undefined;\n\n    // Check if property rounded exists on button and if it is true or false\n    // If property is true button property rounded ovverided buttonsgroups property rounded\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // Button > Buttongroup\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default rounded attribute\n    btn.setAttribute(\"rounded\", \"\");\n  }\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch(\"size\")\n  @Watch(\"sizeSmall\")\n  @Watch(\"sizeMedium\")\n  @Watch(\"sizeLarge\")\n  @Watch(\"sizeUltra\")\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"fullwidth\")\n  onFullwidthChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"rounded\")\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach(btn => {\n      this.applyDefaultIfMissing(btn, \"size\", this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\", this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\", this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\", this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D-Yirlnl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space(\"xsmall\");\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\nimport { StzhButtonSize } from \"../../index\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */\n  @Prop({ reflect: true }) rounded?: boolean;\n\n  // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"fullwidth\");\n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute(\"fullwidth\", \"\");\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n    // Rounded only true if group has rounded property true\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"rounded\");\n    const propVal = (btn as any).rounded as boolean | undefined;\n\n    // Check if property rounded exists on button and if it is true or false\n    // If property is true button property rounded ovverided buttonsgroups property rounded\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // Button > Buttongroup\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default rounded attribute\n    btn.setAttribute(\"rounded\", \"\");\n  }\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch(\"size\")\n  @Watch(\"sizeSmall\")\n  @Watch(\"sizeMedium\")\n  @Watch(\"sizeLarge\")\n  @Watch(\"sizeUltra\")\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"fullwidth\")\n  onFullwidthChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"rounded\")\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach(btn => {\n      this.applyDefaultIfMissing(btn, \"size\", this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\", this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\", this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\", this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DLBRj3YX.js → p-D1f9K1WI.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
-import { d as defineCustomElement$1 } from './p-CRo_30JG.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { d as defineCustomElement$1 } from './p-mPSUVIkD.js';
 
 // This file is autogenerated. It's used to publish ESM to npm.
 function _typeof(obj) {
@@ -2116,6 +2116,6 @@ function defineCustomElement() {
 }
 
 export { StzhVbzLinechip as S, defineCustomElement as d };
-//# sourceMappingURL=p-DLBRj3YX.js.map
+//# sourceMappingURL=p-D1f9K1WI.js.map
 
-//# sourceMappingURL=p-DLBRj3YX.js.map
+//# sourceMappingURL=p-D1f9K1WI.js.map