@oiz/stzh-components 4.10.0-beta2 → 4.10.1

package/dist/components/{p-BXZUgr03.js → p-CXNxQ8LV.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-yUwaJCDo.js';
 import { c as createBaseFocusTrapOptions } from './p-BzugsqyR.js';
 import { c as createFocusTrap } from './p-CBUfcdIy.js';
 
@@ -114,6 +114,6 @@ function defineCustomElement() {
 }
 
 export { StzhOverlay as S, defineCustomElement as d };
-//# sourceMappingURL=p-BXZUgr03.js.map
+//# sourceMappingURL=p-CXNxQ8LV.js.map
 
-//# sourceMappingURL=p-BXZUgr03.js.map
+//# sourceMappingURL=p-CXNxQ8LV.js.map

package/dist/components/{p-BXZUgr03.js.map → p-CXNxQ8LV.js.map}

@@ -1 +1 @@
-{"file":"p-BXZUgr03.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CXNxQ8LV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BEnCw0ZO.js → p-CZ980sT6.js}

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

package/dist/components/{p-BEnCw0ZO.js.map → p-CZ980sT6.js.map}

@@ -1 +1 @@
-{"file":"p-BEnCw0ZO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  --caption-opacity: 1;\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve(\"caption\");\n    display: flex;\n    flex-direction: column;\n    opacity: var(--caption-opacity);\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__heading-wrapper {\n    display: flow-root;\n  }\n\n  &__counter {\n    float: left;\n    color: $colorSecondary60;\n\n    &:not(:empty) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font(\"heavy\");\n    display: block;\n  }\n\n  &__copyright {\n    @include font;\n    @include fontSize(\"femto\");\n    color: $colorGrey80;\n\n    &:not(:empty) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space(\"small\");\n  }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true,\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, \"caption\");\n    const copyrightSlotUsed = hasSlot(this.element, \"copyright\");\n    const counterSlotUsed = hasSlot(this.element, \"counter\");\n    const headingSlotUsed = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption ||\n        captionSlotUsed ||\n        !!this.copyright ||\n        copyrightSlotUsed ||\n        !!this.counter ||\n        counterSlotUsed ||\n        !!this.heading ||\n        headingSlotUsed,\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__heading-wrapper\">\n              <div class=\"stzh-figure__counter\">{this.counter ? this.counter : <slot name=\"counter\"></slot>}</div>\n              <div class=\"stzh-figure__heading\">{this.heading ? this.heading : <slot name=\"heading\"></slot>}</div>\n            </div>\n            <div class=\"stzh-figure__caption\">\n              <div class=\"stzh-figure__caption-text\">{this.caption ? this.caption : <slot name=\"caption\"></slot>}</div>\n              <div class=\"stzh-figure__copyright\">\n                {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CZ980sT6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n  --caption-opacity: 1;\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n  width: 100%;\n}\n\n.stzh-figure {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n\n  &__element {\n    display: flex;\n\n    @media print {\n      page-break-inside: avoid;\n      break-inside: avoid;\n    }\n  }\n\n  &__caption-wrapper {\n    @include fontCurve(\"caption\");\n    display: flex;\n    flex-direction: column;\n    opacity: var(--caption-opacity);\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__heading-wrapper {\n    display: flow-root;\n  }\n\n  &__counter {\n    float: left;\n    color: $colorSecondary60;\n\n    &:not(:empty) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__counter,\n  &__heading {\n    @include font(\"heavy\");\n    display: block;\n  }\n\n  &__copyright {\n    @include font;\n    @include fontSize(\"femto\");\n    color: $colorGrey80;\n\n    &:not(:empty) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  /* Has caption content */\n\n  &--has-caption &__caption-wrapper {\n    margin-top: space(\"small\");\n  }\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n */\n@Component({\n  tag: \"stzh-figure\",\n  styleUrl: \"stzh-figure.scss\",\n  scoped: true,\n})\nexport class StzhFigure {\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Whether to stretch slotted content to fullwidth */\n  @Prop({ reflect: true }) fullwidth: boolean = true;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  render() {\n    const captionSlotUsed = hasSlot(this.element, \"caption\");\n    const copyrightSlotUsed = hasSlot(this.element, \"copyright\");\n    const counterSlotUsed = hasSlot(this.element, \"counter\");\n    const headingSlotUsed = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-figure\": true,\n      \"stzh-figure--has-caption\":\n        !!this.caption ||\n        captionSlotUsed ||\n        !!this.copyright ||\n        copyrightSlotUsed ||\n        !!this.counter ||\n        counterSlotUsed ||\n        !!this.heading ||\n        headingSlotUsed,\n    };\n\n    return (\n      <Host>\n        <figure class={classes}>\n          <div class=\"stzh-figure__element\">\n            <slot></slot>\n          </div>\n          <figcaption class=\"stzh-figure__caption-wrapper\">\n            <div class=\"stzh-figure__heading-wrapper\">\n              <div class=\"stzh-figure__counter\">{this.counter ? this.counter : <slot name=\"counter\"></slot>}</div>\n              <div class=\"stzh-figure__heading\">{this.heading ? this.heading : <slot name=\"heading\"></slot>}</div>\n            </div>\n            <div class=\"stzh-figure__caption\">\n              <div class=\"stzh-figure__caption-text\">{this.caption ? this.caption : <slot name=\"caption\"></slot>}</div>\n              <div class=\"stzh-figure__copyright\">\n                {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n              </div>\n            </div>\n          </figcaption>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Ba2Bva0s.js → p-Cb9rDBaS.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, t as transformTag, H, d as createEvent, h, e as Host } from './p-hyzEZfgL.js';
-import { d as defineCustomElement$1 } from './p-B4ov3VSW.js';
+import { p as proxyCustomElement, t as transformTag, H, d as createEvent, h, e as Host } from './p-yUwaJCDo.js';
+import { d as defineCustomElement$1 } from './p-uE_GMswl.js';
 
 const stzhAccordionCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left)}.stzh-accordion__heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-accordion{}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}`;
 
@@ -129,6 +129,6 @@ function defineCustomElement() {
 }
 
 export { StzhAccordion as S, defineCustomElement as d };
-//# sourceMappingURL=p-Ba2Bva0s.js.map
+//# sourceMappingURL=p-Cb9rDBaS.js.map
 
-//# sourceMappingURL=p-Ba2Bva0s.js.map
+//# sourceMappingURL=p-Cb9rDBaS.js.map

package/dist/components/{p-Ba2Bva0s.js.map → p-Cb9rDBaS.js.map}

@@ -1 +1 @@
-{"file":"p-Ba2Bva0s.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Cb9rDBaS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C0eoM6jL.js → p-Ccvj84Ds.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
-import { d as defineCustomElement$4 } from './p-s4RWk35S.js';
-import { d as defineCustomElement$3 } from './p-Ds3Xf7HO.js';
-import { d as defineCustomElement$2 } from './p-mWRI28It.js';
-import { d as defineCustomElement$1 } from './p-GLNS1q2a.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-yUwaJCDo.js';
+import { d as defineCustomElement$4 } from './p-BUeBsyt_.js';
+import { d as defineCustomElement$3 } from './p-BSsWZrNR.js';
+import { d as defineCustomElement$2 } from './p-Dg5tBjNp.js';
+import { d as defineCustomElement$1 } from './p-iLKNish_.js';
 
 const stzhChipCss = () => `.sc-stzh-chip-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-chip-h,[stzh-hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::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-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}.sc-stzh-chip-h{--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(
     --stzh-chip-hover-background-color,
@@ -200,6 +200,6 @@ function defineCustomElement() {
 }
 
 export { StzhChip as S, defineCustomElement as d };
-//# sourceMappingURL=p-C0eoM6jL.js.map
+//# sourceMappingURL=p-Ccvj84Ds.js.map
 
-//# sourceMappingURL=p-C0eoM6jL.js.map
+//# sourceMappingURL=p-Ccvj84Ds.js.map

package/dist/components/{p-C0eoM6jL.js.map → p-Ccvj84Ds.js.map}

@@ -1 +1 @@
-{"file":"p-C0eoM6jL.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,g4PAAg4P,CAAC;;MCSp3P,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAMlB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;;AAGF,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;;AAG1B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;;AAGhC,QAAA,IAAI,CAAA,IAAA,GAAiB,SAAS;;AAe9B,QAAA,IAAI,CAAA,IAAA,GAAiB,SAAS;;AAG/C,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGP,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAST,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAgC7D,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AA4C/B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,gBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;AAGnB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC7B,SAAC;AAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAE1B,YAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;AACzC,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,UAAU,EAAE,KAAK;AAClB,aAAA,CAAC;AAEF,YAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,MAAM,GAAG,CAAC,KAAiB,KAAI;AACrC,YAAA,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;AACvC,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,UAAU,EAAE,KAAK;AAClB,aAAA,CAAC;AAEF,YAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC;AACrC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;AAC5C,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AA4EF;IAzKC,kBAAkB,GAAA;QAChB,qBAAqB,CAAC,MAAK;;AACzB,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACjF,SAAC,CAAC;;IAGI,WAAW,GAAA;AACjB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAK,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,CACE,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EACF,IAAI,CAAC,IAAI;AACT,iBAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,WAAW,CAAC;AACrC,iBAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,mBAAmB,CAAC;AAChD,iBAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,SAAS,CAAC;AACpC,iBAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,kBAAkB,CAAC,EAEtC,CAAA,KAEb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CAC1B,CACG,EAEN,CAAY,CAAA,YAAA,EAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAAA,EACtF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,aAAS,IAAI,CAAC,OAAO,EAAS,GAAA,CAAA,CAC/D,CACU,EAEZ,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,KACzE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC/C,IAAI,CAAC,OAAO,CACT,CACP,CACG;;IAyDV,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,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;AACvC,YAAA,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;YACxC,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC7C,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAC7C,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAErE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,SAAS,KACb,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACX,YAAA,EAAA,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,EAAA,EAEvD,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,WAAW,EAAa,CAAA,CAChE,CACV,EAEA,IAAI,CAAC,IAAI,IACR,CAAC,CAAA,IAAI,EACH,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;AACL,gBAAA,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,EAAA,YAAA,EACf,IAAI,CAAC,SAAS,IAAI,IAAI,EAAA,kBAAA,EAChB,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EAElB,EAAA,IAAI,CAAC,WAAW,EAAE,CACd,KAEP,CAAC,CAAA,IAAI,IACH,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAChD,KAAK,EAAE;AACL,gBAAA,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,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,EACf,YAAA,EAAA,IAAI,CAAC,SAAS,IAAI,IAAI,EAChB,kBAAA,EAAA,IAAI,CAAC,eAAe,IAAI,IAAI,EAC9C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EAElB,EAAA,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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-Ccvj84Ds.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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-DLlZq7iU.js → p-CgxbnTIg.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-yUwaJCDo.js';
 
 const stzhTextCss = () => `.sc-stzh-text-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-text-h,[stzh-hidden].sc-stzh-text-h{display:none}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(
     --stzh-text-grid-template-areas,
@@ -82,6 +82,6 @@ function defineCustomElement() {
 }
 
 export { StzhText as S, defineCustomElement as d };
-//# sourceMappingURL=p-DLlZq7iU.js.map
+//# sourceMappingURL=p-CgxbnTIg.js.map
 
-//# sourceMappingURL=p-DLlZq7iU.js.map
+//# sourceMappingURL=p-CgxbnTIg.js.map

package/dist/components/{p-DLlZq7iU.js.map → p-CgxbnTIg.js.map}

@@ -1 +1 @@
-{"file":"p-DLlZq7iU.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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-CgxbnTIg.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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-DoEOS1rz.js → p-CsuFFy7I.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-yUwaJCDo.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-CN5apKPb.js';
 import { w as waitForEvent } from './p--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-BOO84wnP.js';
-import { d as defineCustomElement$3 } from './p-s4RWk35S.js';
-import { d as defineCustomElement$2 } from './p-LRN3e03F.js';
-import { d as defineCustomElement$1 } from './p-mWRI28It.js';
+import { d as defineCustomElement$3 } from './p-BUeBsyt_.js';
+import { d as defineCustomElement$2 } from './p-CNDhpOyA.js';
+import { d as defineCustomElement$1 } from './p-Dg5tBjNp.js';
 
 const stzhToastCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{pointer-events:all;--label-font-family:var(--stzh-toast-label-font-family);--label-font-weight:var(--stzh-toast-label-font-weight);--label-font-style:var(--stzh-toast-label-font-style);--label-color:var(--stzh-toast-label-color);--background-color:var(--stzh-toast-background-color);--close-color:var(--stzh-toast-close-color);--button-color:var(--stzh-toast-button-color);--icon-color:var(--stzh-toast-icon-color)}:host([type=success]){--icon-color:var(--stzh-toast-success-icon-color)}:host([type=warning]){--icon-color:var(--stzh-toast-warning-icon-color)}:host([type=error]){--icon-color:var(--stzh-toast-error-icon-color)}.stzh-toast{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius);transition:background-color var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-toast{border:0.0625rem solid Highlight}}.stzh-toast__content{flex-grow:1;display:flex;gap:var(--stzh-space-small);padding:var(--stzh-space-medium)}.stzh-toast__icon-wrapper{flex-shrink:0;display:flex}.stzh-toast__icon{color:var(--icon-color)}.stzh-toast__text-wrapper{flex-grow:1}.stzh-toast__label{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--label-color);font-family:var(--label-font-family);font-weight:var(--label-font-weight);font-style:var(--label-font-style);transition:color var(--stzh-base-transition-animation-speed);padding-right:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-toast__label{padding-right:var(--stzh-space-xxxlarge)}}.stzh-toast__close-wrapper{flex-shrink:0}.stzh-toast__link{--stzh-button-tertiary-color:var(--button-color);display:flex;justify-content:flex-end}.stzh-toast__close[variant=tertiary]{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-toast{}.stzh-toast--has-link .stzh-toast__label:not(:empty)+.stzh-toast__link{margin-top:var(--stzh-space-xsmall)}`;
 
@@ -233,6 +233,6 @@ function defineCustomElement() {
 }
 
 export { StzhToast as S, defineCustomElement as d };
-//# sourceMappingURL=p-DoEOS1rz.js.map
+//# sourceMappingURL=p-CsuFFy7I.js.map
 
-//# sourceMappingURL=p-DoEOS1rz.js.map
+//# sourceMappingURL=p-CsuFFy7I.js.map

package/dist/components/{p-DoEOS1rz.js.map → p-CsuFFy7I.js.map}

@@ -1 +1 @@
-{"file":"p-DoEOS1rz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space(\"small\");\n    padding: space(\"medium\");\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize(\"milli\");\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space(\"xxlarge\");\n\n    @include mq($from: small) {\n      padding-right: space(\"xxxlarge\");\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space(\"xsmall\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, Watch } from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\";\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\",\n  },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\",\n  },\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true,\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\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  @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  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll('stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button');\n\n    buttons.forEach(link => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  (this.type === \"info\" && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">{this.label}</div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CsuFFy7I.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space(\"small\");\n    padding: space(\"medium\");\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize(\"milli\");\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space(\"xxlarge\");\n\n    @include mq($from: small) {\n      padding-right: space(\"xxxlarge\");\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space(\"xsmall\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, Watch } from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\";\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\",\n  },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\",\n  },\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true,\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\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  @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  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll('stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button');\n\n    buttons.forEach(link => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  (this.type === \"info\" && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">{this.label}</div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CUujfXGZ.js → p-Ct0fZMBS.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-yUwaJCDo.js';
 
 const stzhContainerCss = () => `.sc-stzh-container-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-container-h,[stzh-hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::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-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle-home,.sc-stzh-container-h .sc-stzh-container-s stzh-container,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-service-highlights,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-search,.sc-stzh-container-h .sc-stzh-container-s stzh-vbz-carousel,.sc-stzh-container-h .sc-stzh-container-s stzh-message[type=page-message]{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}`;
 
@@ -40,6 +40,6 @@ function defineCustomElement() {
 }
 
 export { StzhContainer as S, defineCustomElement as d };
-//# sourceMappingURL=p-CUujfXGZ.js.map
+//# sourceMappingURL=p-Ct0fZMBS.js.map
 
-//# sourceMappingURL=p-CUujfXGZ.js.map
+//# sourceMappingURL=p-Ct0fZMBS.js.map

package/dist/components/{p-CUujfXGZ.js.map → p-Ct0fZMBS.js.map}

@@ -1 +1 @@
-{"file":"p-CUujfXGZ.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kwGAAkwG,CAAC;;MCUtxG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiBlC;IAfC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;YACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;SAE/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n        margin-right: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-pagetitle-home,\n    stzh-container,\n    stzh-homepage-service-highlights,\n    stzh-homepage-search,\n    stzh-vbz-carousel,\n    stzh-message[type=\"page-message\"] {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true,\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Ct0fZMBS.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kwGAAkwG,CAAC;;MCUtxG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiBlC;IAfC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;YACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;SAE/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n        margin-right: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-pagetitle-home,\n    stzh-container,\n    stzh-homepage-service-highlights,\n    stzh-homepage-search,\n    stzh-vbz-carousel,\n    stzh-message[type=\"page-message\"] {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true,\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}