@oiz/stzh-components 4.10.0 → 4.11.0-beta1

package/dist/components/{p-DUQ-gRxd.js → p-B_nd_jfH.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
-import { d as defineCustomElement$3 } from './p-DpeJpDc8.js';
-import { d as defineCustomElement$2 } from './p-CiEcvFWc.js';
-import { d as defineCustomElement$1 } from './p-SbO4yTDL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
+import { d as defineCustomElement$3 } from './p-B4O0PovX.js';
+import { d as defineCustomElement$2 } from './p-0aLZPbnw.js';
+import { d as defineCustomElement$1 } from './p-B0YyK73m.js';
 
 const stzhMessageCss = () => `.sc-stzh-message-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-message-h,[stzh-hidden].sc-stzh-message-h{display:none}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info50);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success50);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning70);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error50);--background-color:var(--stzh-color-error20)}[type=page-message].sc-stzh-message-h{--label-color:var(--stzh-color-info70);--icon-color:var(--stzh-color-info50);--background-color:var(--stzh-color-info20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message__content.sc-stzh-message{display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}@media screen and (min-width: 1260px){.stzh-message__text-wrapper.sc-stzh-message{align-items:center}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message{color:var(--label-color)}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-deci-font-size) !important}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-xsmall)}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message{color:var(--description-color);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-small)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:flex-start;flex-direction:row}@media screen and (max-width: 1259px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__content.sc-stzh-message{align-items:center}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{display:flex;flex-direction:column}@media screen and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{flex-direction:row;gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message{gap:var(--stzh-space-xlarge)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-small)}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message--type-page-message.sc-stzh-message .stzh-message__label.sc-stzh-message{margin:0}@media screen and (min-width: 600px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__close.sc-stzh-message{top:0.625rem;right:0.625rem}}@media screen and (min-width: 900px){.stzh-message--type-page-message.sc-stzh-message .stzh-message__text-wrapper.sc-stzh-message .stzh-message__link.sc-stzh-message{margin-top:0}}`;
 
@@ -98,6 +98,6 @@ function defineCustomElement() {
 }
 
 export { StzhMessage as S, defineCustomElement as d };
-//# sourceMappingURL=p-DUQ-gRxd.js.map
+//# sourceMappingURL=p-B_nd_jfH.js.map
 
-//# sourceMappingURL=p-DUQ-gRxd.js.map
+//# sourceMappingURL=p-B_nd_jfH.js.map

package/dist/components/{p-DUQ-gRxd.js.map → p-B_nd_jfH.js.map}

@@ -1 +1 @@
-{"file":"p-DUQ-gRxd.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo50};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess50};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning70};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError50};\n    --background-color: #{$colorError20};\n  }\n\n  &[type=\"page-message\"] {\n    --label-color: #{$colorInfo70};\n    --icon-color: #{$colorInfo50};\n    --background-color: #{$colorInfo20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    @include spaceCurve(\"padding-right\", \"medium\");\n    @include spaceCurve(\"gap\", \"small\");\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space(\"large\");\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize(\"large\")};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &__label {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    color: var(--label-color);\n\n    @include mq($from: large) {\n      font-size: var(--stzh-font-deci-font-size) !important;\n    }\n\n    &:not(:empty) {\n      margin-bottom: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    color: var(--description-color);\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-bottom: 0;\n  }\n\n  /* Type page-message */\n\n  &--type-page-message &__content {\n    @include containerPadding;\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    align-items: flex-start;\n    flex-direction: row;\n\n    @include mq($to: large) {\n      padding-right: space(\"xxxlarge\");\n    }\n\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &--type-page-message &__text-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: large) {\n      flex-direction: row;\n      @include spaceCurve(\"gap\", \"small\");\n    }\n  }\n\n  &--type-page-message &__icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  &--type-page-message &__label {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    margin: 0;\n  }\n\n  &--type-page-message &__close {\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n\n  &--type-page-message &__text-wrapper &__link {\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\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, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"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-message__text-wrapper\">\n              <div class=\"stzh-message__label\">{this.label ? this.label : <slot name=\"label\"></slot>}</div>\n              <div class=\"stzh-message__description\">{this.description ? this.description : <slot></slot>}</div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B_nd_jfH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo50};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess50};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning70};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError50};\n    --background-color: #{$colorError20};\n  }\n\n  &[type=\"page-message\"] {\n    --label-color: #{$colorInfo70};\n    --icon-color: #{$colorInfo50};\n    --background-color: #{$colorInfo20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    @include spaceCurve(\"padding-right\", \"medium\");\n    @include spaceCurve(\"gap\", \"small\");\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space(\"medium\");\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space(\"large\");\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize(\"large\")};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &__label {\n    @include font(\"title\");\n    @include fontCurve(\"h4\", \"heading\");\n    color: var(--label-color);\n\n    @include mq($from: large) {\n      font-size: var(--stzh-font-deci-font-size) !important;\n    }\n\n    &:not(:empty) {\n      margin-bottom: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    color: var(--description-color);\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-bottom: 0;\n  }\n\n  /* Type page-message */\n\n  &--type-page-message &__content {\n    @include containerPadding;\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"small\");\n    align-items: flex-start;\n    flex-direction: row;\n\n    @include mq($to: large) {\n      padding-right: space(\"xxxlarge\");\n    }\n\n    @include mq($from: large) {\n      align-items: center;\n    }\n  }\n\n  &--type-page-message &__text-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: large) {\n      flex-direction: row;\n      @include spaceCurve(\"gap\", \"small\");\n    }\n  }\n\n  &--type-page-message &__icon {\n    --size: #{iconSize(\"small\")};\n  }\n\n  &--type-page-message &__label {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    margin: 0;\n  }\n\n  &--type-page-message &__close {\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n\n  &--type-page-message &__text-wrapper &__link {\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\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, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"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-message__text-wrapper\">\n              <div class=\"stzh-message__label\">{this.label ? this.label : <slot name=\"label\"></slot>}</div>\n              <div class=\"stzh-message__description\">{this.description ? this.description : <slot></slot>}</div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CunX3wR8.js → p-BbwUKBZe.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
-import { d as defineCustomElement$3 } from './p-DpeJpDc8.js';
-import { d as defineCustomElement$2 } from './p-SbO4yTDL.js';
-import { d as defineCustomElement$1 } from './p-CWKzk5Dy.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
+import { d as defineCustomElement$3 } from './p-B4O0PovX.js';
+import { d as defineCustomElement$2 } from './p-B0YyK73m.js';
+import { d as defineCustomElement$1 } from './p-4V3geC0t.js';
 
 const stzhClampCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{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}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::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)}stzh-clamp{}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{--current-lines:var(--lines, 0)}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 900px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(
       --lines-large,
@@ -163,6 +163,6 @@ function defineCustomElement() {
 }
 
 export { StzhClamp as S, defineCustomElement as d };
-//# sourceMappingURL=p-CunX3wR8.js.map
+//# sourceMappingURL=p-BbwUKBZe.js.map
 
-//# sourceMappingURL=p-CunX3wR8.js.map
+//# sourceMappingURL=p-BbwUKBZe.js.map

package/dist/components/{p-CunX3wR8.js.map → p-BbwUKBZe.js.map}

@@ -1 +1 @@
-{"file":"p-CunX3wR8.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kxBAAkxB,CAAC;;MCItwB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AAJtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;;AAEjB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;;AAEvB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAGtB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAGC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAwBxD,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B;;AAGF,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO;AAClC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY;AAEtF,YAAA,IAAI,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE;AAClC,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,oBAAA,SAAS,EAAE,YAAY;oBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,iBAAA,CAAC;;AAEN,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAGlD,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC;AACjE,SAAC;AAEO,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,IAAI,CAAC,MAAM,EAAE;AACf,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,YAAW;AACrC,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;AACJ,SAAC;AAoFF;AArIC,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS;QAC5D,IAAI,CAAC,aAAa,EAAE;;IAiDd,iBAAiB,GAAA;AACvB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;;AAGtE,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC;;;IAIlG,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC9C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;IAGJ,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE;;QAG7B,IAAI,CAAC,MAAM,EAAE;;IAGf,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;IAG3C,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;;;IAItC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,6BAA6B,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9C;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpD,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,gBAAgB,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,IAAI;AACvE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACrE,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAoB,CAAC,EACzD,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAC7B,MAAM,EACb,CAAA,EAEN,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAClC,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,YAAY,EAAC,IAAI,EACL,aAAA,EAAA,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE9B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/D,CACb,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BbwUKBZe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-cNTFnDJ9.js → p-BfWAE2yh.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
 import { s as setPropsIfNull } from './p-CN5apKPb.js';
 
 const stzhActionsCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host ::slotted([slot=primary]),:host ::slotted([slot=secondary]),:host ::slotted([slot=tertiary]){flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}@media screen and (min-width: 600px){:host[space-between=true] ::slotted([slot=tertiary]){flex-grow:inherit}}.stzh-actions__actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions{flex-direction:row}}.stzh-actions__primary-actions,.stzh-actions__secondary-actions,.stzh-actions__tertiary-actions{display:flex}.stzh-actions__wrapper{display:contents}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__wrapper{display:flex;flex-wrap:wrap}}.stzh-actions--process .stzh-actions__actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__primary-actions,.stzh-actions--process .stzh-actions__secondary-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process .stzh-actions__tertiary-actions{margin-right:auto}}.stzh-actions--search .stzh-actions__actions{justify-content:flex-end}.stzh-actions{}.stzh-actions--space-between .stzh-actions__actions{justify-content:space-between}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:column}}@media screen and (min-width: 900px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:row}}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__wrapper{display:flex;justify-content:flex-end}}`;
@@ -71,6 +71,6 @@ function defineCustomElement() {
 }
 
 export { StzhActions as S, defineCustomElement as d };
-//# sourceMappingURL=p-cNTFnDJ9.js.map
+//# sourceMappingURL=p-BfWAE2yh.js.map
 
-//# sourceMappingURL=p-cNTFnDJ9.js.map
+//# sourceMappingURL=p-BfWAE2yh.js.map

package/dist/components/{p-cNTFnDJ9.js.map → p-BfWAE2yh.js.map}

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

package/dist/components/{p-CtNit8M7.js → p-BtBwyT5W.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-CPibi_C6.js';
-import { d as defineCustomElement$1 } from './p-SbO4yTDL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
+import { d as defineCustomElement$1 } from './p-B0YyK73m.js';
 
 const stzhStepperItemCss = () => `.sc-stzh-stepper-item-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-stepper-item-h,[stzh-hidden].sc-stzh-stepper-item-h{display:none}.sc-stzh-stepper-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-stepper-item-h *.sc-stzh-stepper-item,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::before,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::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-stepper-item-h .has-focus.sc-stzh-stepper-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item{outline-style:none !important}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-stepper-item-h{display:none}.stzh-stepper-item.sc-stzh-stepper-item{text-align:center}.stzh-stepper-item__button.sc-stzh-stepper-item,.stzh-stepper-item__unclickable.sc-stzh-stepper-item{appearance:none;font-family:inherit;background-color:transparent;border:none}.stzh-stepper-item__button.sc-stzh-stepper-item{cursor:pointer}.stzh-stepper-item__unclickable.sc-stzh-stepper-item{cursor:default;pointer-events:none}.stzh-stepper-item__unclickable.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-grey20);color:var(--stzh-color-primary70);border:0.0625rem solid var(--stzh-color-grey20)}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-primary70);border-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight;border-color:Highlight}}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary40)}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item__number-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-stepper-item__number-block.sc-stzh-stepper-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-secondary20);border:0.0625rem solid var(--stzh-color-secondary20);text-align:center;box-sizing:border-box;color:var(--stzh-color-primary70);transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-stepper-item__number-block.sc-stzh-stepper-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:none;content:"";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:1.25rem;right:2.5625rem}}.stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item__dotted.sc-stzh-stepper-item::after{content:"";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-stepper-item__label-block.sc-stzh-stepper-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-grey80);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-stepper-item__label-block.sc-stzh-stepper-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}.stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{z-index:1}.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}.stzh-stepper-item__user-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-stepper-item__dotted.sc-stzh-stepper-item{z-index:1;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-grey20);border:0.0625rem solid var(--stzh-color-grey20);cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus{border-color:var(--stzh-color-grey20);cursor:default}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus{border-color:Highlight}}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus::after{background-color:var(--stzh-color-grey20)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus::after{background-color:Canvas}}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item{cursor:default}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:focus{border-color:var(--stzh-base-border-color);cursor:default}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:focus::after{background-color:inherit}@media screen and (min-width: 600px){.stzh-stepper-item__dotted.sc-stzh-stepper-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before,.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block}.stzh-stepper-item--first.sc-stzh-stepper-item{position:relative}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{left:50%;transform:translateX(-50%)}.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.96875rem))}}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-secondary60);border:solid 0.0625rem var(--stzh-color-secondary60)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:Canvas;border-color:CanvasText}}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary70)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:var(--stzh-color-white)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Canvas}}.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{border-color:var(--stzh-color-primary70)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{border-color:Highlight}}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);background-color:var(--stzh-color-secondary60);border:0.0625rem solid var(--stzh-color-secondary60)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-primary)}}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border-color:var(--stzh-color-secondary70)}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary70)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight;border-color:Highlight}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:SelectedItem}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-primary);border:solid 0.0625rem var(--stzh-color-primary);color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block;background-color:var(--stzh-color-primary);z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:CanvasText}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border:0.0625rem solid var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{margin-bottom:0}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{padding-left:0;padding-right:0}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.8125rem;right:1.875rem}}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:none}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:Canvas}}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:not-allowed}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-grey60);color:white;border:0.0625rem solid var(--stzh-color-grey60)}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border:0.0625rem solid var(--stzh-color-grey60) !important}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:GrayText;border-color:GrayText}}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-grey80)}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-grey80)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:GrayText}}`;
 
@@ -108,6 +108,6 @@ function defineCustomElement() {
 }
 
 export { StzhStepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-CtNit8M7.js.map
+//# sourceMappingURL=p-BtBwyT5W.js.map
 
-//# sourceMappingURL=p-CtNit8M7.js.map
+//# sourceMappingURL=p-BtBwyT5W.js.map

package/dist/components/{p-CtNit8M7.js.map → p-BtBwyT5W.js.map}

@@ -1 +1 @@
-{"file":"p-CtNit8M7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n  display: none;\n}\n\n.stzh-stepper-item {\n  text-align: center;\n\n  &__button,\n  &__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__unclickable &__number-block {\n    background-color: $colorGrey20;\n    color: $colorPrimary70;\n    border: 1px solid $colorGrey20;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimary70;\n    border-color: $colorSecondary40;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorSecondary40;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    background-color: $colorSecondary20;\n    border: 1px solid $colorSecondary20;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorPrimary70;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $stepperItemSmallUp;\n      height: $stepperItemSmallUp;\n      margin-bottom: space(\"large\");\n    }\n\n    // set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: \"\";\n      position: absolute;\n      top: 16px;\n      right: $stepperItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $stepperItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey80;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize(\"small\")};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid $colorGrey20;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorGrey20;\n      cursor: default;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorGrey20;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    &__disabled {\n      cursor: default;\n\n      &:hover,\n      &:focus {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n      }\n\n      &:hover::after,\n      &:focus::after {\n        background-color: inherit;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block;\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n    @include mq($from: small) {\n      right: calc(\n        (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n      );\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorSecondary60;\n    border: solid 1px $colorSecondary60;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    &::after {\n      background-color: $colorSecondary70;\n    }\n  }\n\n  &--passed &__icon,\n  &--passed &__user-icon {\n    color: $colorWhite;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that are **not** incomplete */\n  &--passed:not(&--passed-incomplete) &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    border-color: $colorPrimary70;\n\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that **are** incomplete */\n  &--passed-incomplete &__number-block {\n    color: $colorWhite;\n    background-color: $colorSecondary60;\n    border: 1px solid $colorSecondary60;\n\n    @include highContrast() {\n      color: $colorPrimary;\n    }\n  }\n\n  &--passed-incomplete &__button:hover &__number-block,\n  &--passed-incomplete &__button:focus &__number-block {\n    color: $colorWhite;\n    border-color: $colorSecondary70;\n    &::after {\n      background-color: $colorSecondary70;\n    }\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n    display: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__number-block {\n    background-color: $colorGrey60;\n    color: white;\n    border: 1px solid $colorGrey60;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorGrey60 !important;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__label-block {\n    color: $colorGrey80;\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey80;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-stepper-item\",\n  styleUrl: \"stzh-stepper-item.scss\",\n  scoped: true,\n})\nexport class StzhStepperItem {\n  /** The label of the item. */\n  @Prop({ reflect: true }) label: string;\n\n  /** When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether it's the first item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) first: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) last: boolean = false;\n\n  /** True when the item index is lower than the current index (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  /** For passed items, this prevents displaying a checked icon when true (shows step number instead). */\n  @Prop({ reflect: true }) incomplete: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) current: boolean = false;\n\n  /** Whether it's a hidden item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  /** Whether it's a dotted item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  /** The number of the step (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Displays a custom icon instead of the step number. */\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /** When true, it displays a default cursor on hover and no click event is emitted. */\n  @Prop() clickDisabled: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhStepperItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-stepper-item\": true,\n      \"stzh-stepper-item--first\": this.first,\n      \"stzh-stepper-item--last\": this.last,\n      \"stzh-stepper-item--current\": this.current,\n      \"stzh-stepper-item--hide\": this.hide,\n      \"stzh-stepper-item--dotted\": this.dotted,\n      \"stzh-stepper-item--has-icon\": !!this.icon,\n      \"stzh-stepper-item--is-disabled\": this.disabled,\n      \"stzh-stepper-item--passed\": this.passed,\n      \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n    };\n\n    const dotted = (\n      <span>\n        {!this.clickDisabled ? (\n          <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </button>\n        ) : (\n          <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled\">\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </div>\n        )}\n      </span>\n    );\n\n    const content = (\n      <span>\n        <span class=\"stzh-stepper-item__number-block\">\n          {this.icon ? (\n            <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n          ) : (\n            <span>\n              <span class=\"stzh-stepper-item__number\">{this.step}</span>\n              {this.passed && !this.incomplete && (\n                <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n              )}\n            </span>\n          )}\n        </span>\n        <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n          {this.label ? this.label : <slot></slot>}\n        </span>\n      </span>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          {this.clickDisabled ? (\n            <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n              {content}\n            </div>\n          ) : (\n            <button\n              ref={el => (this.button = el as HTMLButtonElement)}\n              class=\"stzh-stepper-item__button\"\n              aria-pressed={this.current ? \"true\" : \"false\"}\n              disabled={(this.dotted && this.first) || this.disabled}\n              onClick={this.onClick}\n            >\n              <span class=\"stzh-stepper-item__number-block\">\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <Fragment>\n                    <span class=\"stzh-stepper-item__number\">{this.step}</span>\n                    {this.passed && !this.incomplete && (\n                      <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n                    )}\n                  </Fragment>\n                )}\n              </span>\n              <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n                {this.label ? this.label : <slot></slot>}\n              </span>\n            </button>\n          )}\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BtBwyT5W.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n  display: none;\n}\n\n.stzh-stepper-item {\n  text-align: center;\n\n  &__button,\n  &__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__unclickable &__number-block {\n    background-color: $colorGrey20;\n    color: $colorPrimary70;\n    border: 1px solid $colorGrey20;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimary70;\n    border-color: $colorSecondary40;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorSecondary40;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    background-color: $colorSecondary20;\n    border: 1px solid $colorSecondary20;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorPrimary70;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $stepperItemSmallUp;\n      height: $stepperItemSmallUp;\n      margin-bottom: space(\"large\");\n    }\n\n    // set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: \"\";\n      position: absolute;\n      top: 16px;\n      right: $stepperItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $stepperItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey80;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize(\"small\")};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid $colorGrey20;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorGrey20;\n      cursor: default;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorGrey20;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    &__disabled {\n      cursor: default;\n\n      &:hover,\n      &:focus {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n      }\n\n      &:hover::after,\n      &:focus::after {\n        background-color: inherit;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block;\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n    @include mq($from: small) {\n      right: calc(\n        (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n      );\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorSecondary60;\n    border: solid 1px $colorSecondary60;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    &::after {\n      background-color: $colorSecondary70;\n    }\n  }\n\n  &--passed &__icon,\n  &--passed &__user-icon {\n    color: $colorWhite;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that are **not** incomplete */\n  &--passed:not(&--passed-incomplete) &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    border-color: $colorPrimary70;\n\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that **are** incomplete */\n  &--passed-incomplete &__number-block {\n    color: $colorWhite;\n    background-color: $colorSecondary60;\n    border: 1px solid $colorSecondary60;\n\n    @include highContrast() {\n      color: $colorPrimary;\n    }\n  }\n\n  &--passed-incomplete &__button:hover &__number-block,\n  &--passed-incomplete &__button:focus &__number-block {\n    color: $colorWhite;\n    border-color: $colorSecondary70;\n    &::after {\n      background-color: $colorSecondary70;\n    }\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n    display: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__number-block {\n    background-color: $colorGrey60;\n    color: white;\n    border: 1px solid $colorGrey60;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorGrey60 !important;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__label-block {\n    color: $colorGrey80;\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey80;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-stepper-item\",\n  styleUrl: \"stzh-stepper-item.scss\",\n  scoped: true,\n})\nexport class StzhStepperItem {\n  /** The label of the item. */\n  @Prop({ reflect: true }) label: string;\n\n  /** When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether it's the first item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) first: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) last: boolean = false;\n\n  /** True when the item index is lower than the current index (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  /** For passed items, this prevents displaying a checked icon when true (shows step number instead). */\n  @Prop({ reflect: true }) incomplete: boolean = false;\n\n  /** Whether it's the last item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) current: boolean = false;\n\n  /** Whether it's a hidden item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  /** Whether it's a dotted item (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  /** The number of the step (used internally by stzh-stepper). */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Displays a custom icon instead of the step number. */\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /** When true, it displays a default cursor on hover and no click event is emitted. */\n  @Prop() clickDisabled: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhStepperItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-stepper-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-stepper-item\": true,\n      \"stzh-stepper-item--first\": this.first,\n      \"stzh-stepper-item--last\": this.last,\n      \"stzh-stepper-item--current\": this.current,\n      \"stzh-stepper-item--hide\": this.hide,\n      \"stzh-stepper-item--dotted\": this.dotted,\n      \"stzh-stepper-item--has-icon\": !!this.icon,\n      \"stzh-stepper-item--is-disabled\": this.disabled,\n      \"stzh-stepper-item--passed\": this.passed,\n      \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n    };\n\n    const dotted = (\n      <span>\n        {!this.clickDisabled ? (\n          <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </button>\n        ) : (\n          <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled\">\n            <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n          </div>\n        )}\n      </span>\n    );\n\n    const content = (\n      <span>\n        <span class=\"stzh-stepper-item__number-block\">\n          {this.icon ? (\n            <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n          ) : (\n            <span>\n              <span class=\"stzh-stepper-item__number\">{this.step}</span>\n              {this.passed && !this.incomplete && (\n                <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n              )}\n            </span>\n          )}\n        </span>\n        <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n          {this.label ? this.label : <slot></slot>}\n        </span>\n      </span>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          {this.clickDisabled ? (\n            <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n              {content}\n            </div>\n          ) : (\n            <button\n              ref={el => (this.button = el as HTMLButtonElement)}\n              class=\"stzh-stepper-item__button\"\n              aria-pressed={this.current ? \"true\" : \"false\"}\n              disabled={(this.dotted && this.first) || this.disabled}\n              onClick={this.onClick}\n            >\n              <span class=\"stzh-stepper-item__number-block\">\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <Fragment>\n                    <span class=\"stzh-stepper-item__number\">{this.step}</span>\n                    {this.passed && !this.incomplete && (\n                      <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n                    )}\n                  </Fragment>\n                )}\n              </span>\n              <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n                {this.label ? this.label : <slot></slot>}\n              </span>\n            </button>\n          )}\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D5fsVLBd.js → p-BuKU1pSv.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
-import { d as defineCustomElement$3 } from './p-DpeJpDc8.js';
-import { d as defineCustomElement$2 } from './p-SbO4yTDL.js';
-import { d as defineCustomElement$1 } from './p-CWKzk5Dy.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
+import { d as defineCustomElement$3 } from './p-B4O0PovX.js';
+import { d as defineCustomElement$2 } from './p-B0YyK73m.js';
+import { d as defineCustomElement$1 } from './p-4V3geC0t.js';
 
 const stzhAppNavCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}@media screen and (max-width: 899px){.stzh-app-nav{height:var(--stzh-app-nav-height)}}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{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-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}`;
 
@@ -72,6 +72,6 @@ function defineCustomElement() {
 }
 
 export { StzhAppNav as S, defineCustomElement as d };
-//# sourceMappingURL=p-D5fsVLBd.js.map
+//# sourceMappingURL=p-BuKU1pSv.js.map
 
-//# sourceMappingURL=p-D5fsVLBd.js.map
+//# sourceMappingURL=p-BuKU1pSv.js.map

package/dist/components/{p-D5fsVLBd.js.map → p-BuKU1pSv.js.map}

@@ -1 +1 @@
-{"file":"p-D5fsVLBd.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAwCF;AApDC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,OAAO,EAAA,YAAA,EACF,IAAI,CAAC,YAAY,CAAC,KAAK,EACnC,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EACzB,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav\n          role=\"navigation\"\n          class={classes}\n          aria-label={this.localization.title}\n          id={this.appNavId || null}\n          tabindex=\"-1\"\n        >\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BuKU1pSv.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAwCF;AApDC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,OAAO,EAAA,YAAA,EACF,IAAI,CAAC,YAAY,CAAC,KAAK,EACnC,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EACzB,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav\n          role=\"navigation\"\n          class={classes}\n          aria-label={this.localization.title}\n          id={this.appNavId || null}\n          tabindex=\"-1\"\n        >\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-blZtYtHM.js → p-BuVbFMau.js}

@@ -1,10 +1,10 @@
-import { h } from './p-CPibi_C6.js';
+import { h } from './p-CF5HtLyZ.js';
 
 const StzhInputDescription = ({ id, classPrefix, error, description, descriptionLong, descriptionLongTitle, descriptionLongUsed, moreInfoButtonLabel, }) => {
     return (h("div", { class: `${classPrefix}__description-wrapper`, id: id }, h("div", { class: `${classPrefix}__error` }, error.length > 0 ? (h("ul", { class: `${classPrefix}__error-list` }, error.map(error => (h("li", { class: `${classPrefix}__error-listitem` }, error))))) : (h("slot", { name: "error" }))), h("div", { class: `${classPrefix}__description` }, descriptionLongUsed && (h("div", { class: `${classPrefix}__description-long` }, h("stzh-popover", { class: `${classPrefix}__description-long-popover`, variant: "tooltip" }, h("button", { class: `${classPrefix}__description-long-button`, "aria-label": moreInfoButtonLabel, type: "button", "s-object-id": moreInfoButtonLabel }, h("stzh-icon", { class: `${classPrefix}__description-long-icon`, name: "info-help" })), h("div", { slot: "label" }, descriptionLongTitle || description ? (descriptionLongTitle || description) : (h("slot", { name: "description-long-title" }))), h("stzh-text", { curve: "none", slot: "content" }, descriptionLong ? descriptionLong : h("slot", { name: "description-long" }))))), h("div", { class: `${classPrefix}__description-text` }, description ? description : h("slot", { name: "description" })))));
 };
 
 export { StzhInputDescription as S };
-//# sourceMappingURL=p-blZtYtHM.js.map
+//# sourceMappingURL=p-BuVbFMau.js.map
 
-//# sourceMappingURL=p-blZtYtHM.js.map
+//# sourceMappingURL=p-BuVbFMau.js.map

package/dist/components/{p-blZtYtHM.js.map → p-BuVbFMau.js.map}

@@ -1 +1 @@
-{"file":"p-blZtYtHM.js","mappings":";;MAaa,oBAAoB,GAAmD,CAAC,EACnF,EAAE,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,GACpB,KAAI;AACH,IAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,qBAAA,CAAuB,EAAE,EAAE,EAAE,EAAE,EAAA,EACvD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,OAAA,CAAS,IAChC,KAAK,CAAC,MAAM,GAAG,CAAC,IACf,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,CAAc,YAAA,CAAA,EACpC,EAAA,KAAK,CAAC,GAAG,CAAC,KAAK,KACd,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAG,EAAA,WAAW,kBAAkB,EAAG,EAAA,KAAK,CAAM,CAC1D,CAAC,CACC,KAEL,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CAC3B,CACG,EACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,aAAA,CAAe,EAAA,EACtC,mBAAmB,KAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,CAAoB,kBAAA,CAAA,EAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,0BAAA,CAA4B,EAAE,OAAO,EAAC,SAAS,EAAA,EAChF,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAG,EAAA,WAAW,CAA2B,yBAAA,CAAA,EAAA,YAAA,EACpC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,mBAAmB,EAAA,EAEhC,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,GAAG,WAAW,CAAA,uBAAA,CAAyB,EAAE,IAAI,EAAC,WAAW,EAAA,CAAa,CACjF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACd,EAAA,oBAAoB,IAAI,WAAW,IAClC,oBAAoB,IAAI,WAAW,KAEnC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,wBAAwB,EAAQ,CAAA,CAC5C,CACG,EACN,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAA,EACnC,eAAe,GAAG,eAAe,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,kBAAkB,EAAQ,CAAA,CAChE,CACC,CACX,CACP,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,kBAAA,CAAoB,EAC3C,EAAA,WAAW,GAAG,WAAW,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,GAAQ,CACzD,CACF,CACF;AAEV;;;;","names":[],"sources":["src/components/stzh-input/stzh-input-description.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\n\nexport type StzhInputDescriptionProps = {\n  id: string;\n  classPrefix: string;\n  error?: string[];\n  description?: string;\n  descriptionLong?: string;\n  descriptionLongTitle?: string;\n  descriptionLongUsed?: boolean;\n  moreInfoButtonLabel?: string;\n};\n\nexport const StzhInputDescription: FunctionalComponent<StzhInputDescriptionProps> = ({\n  id,\n  classPrefix,\n  error,\n  description,\n  descriptionLong,\n  descriptionLongTitle,\n  descriptionLongUsed,\n  moreInfoButtonLabel,\n}) => {\n  return (\n    <div class={`${classPrefix}__description-wrapper`} id={id}>\n      <div class={`${classPrefix}__error`}>\n        {error.length > 0 ? (\n          <ul class={`${classPrefix}__error-list`}>\n            {error.map(error => (\n              <li class={`${classPrefix}__error-listitem`}>{error}</li>\n            ))}\n          </ul>\n        ) : (\n          <slot name=\"error\"></slot>\n        )}\n      </div>\n      <div class={`${classPrefix}__description`}>\n        {descriptionLongUsed && (\n          <div class={`${classPrefix}__description-long`}>\n            <stzh-popover class={`${classPrefix}__description-long-popover`} variant=\"tooltip\">\n              <button\n                class={`${classPrefix}__description-long-button`}\n                aria-label={moreInfoButtonLabel}\n                type=\"button\"\n                s-object-id={moreInfoButtonLabel}\n              >\n                <stzh-icon class={`${classPrefix}__description-long-icon`} name=\"info-help\"></stzh-icon>\n              </button>\n              <div slot=\"label\">\n                {descriptionLongTitle || description ? (\n                  descriptionLongTitle || description\n                ) : (\n                  <slot name=\"description-long-title\"></slot>\n                )}\n              </div>\n              <stzh-text curve=\"none\" slot=\"content\">\n                {descriptionLong ? descriptionLong : <slot name=\"description-long\"></slot>}\n              </stzh-text>\n            </stzh-popover>\n          </div>\n        )}\n\n        <div class={`${classPrefix}__description-text`}>\n          {description ? description : <slot name=\"description\"></slot>}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"version":3}
+{"file":"p-BuVbFMau.js","mappings":";;MAaa,oBAAoB,GAAmD,CAAC,EACnF,EAAE,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,GACpB,KAAI;AACH,IAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,qBAAA,CAAuB,EAAE,EAAE,EAAE,EAAE,EAAA,EACvD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,OAAA,CAAS,IAChC,KAAK,CAAC,MAAM,GAAG,CAAC,IACf,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,CAAc,YAAA,CAAA,EACpC,EAAA,KAAK,CAAC,GAAG,CAAC,KAAK,KACd,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAG,EAAA,WAAW,kBAAkB,EAAG,EAAA,KAAK,CAAM,CAC1D,CAAC,CACC,KAEL,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CAC3B,CACG,EACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,aAAA,CAAe,EAAA,EACtC,mBAAmB,KAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,CAAoB,kBAAA,CAAA,EAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,0BAAA,CAA4B,EAAE,OAAO,EAAC,SAAS,EAAA,EAChF,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,CAAG,EAAA,WAAW,CAA2B,yBAAA,CAAA,EAAA,YAAA,EACpC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,mBAAmB,EAAA,EAEhC,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,GAAG,WAAW,CAAA,uBAAA,CAAyB,EAAE,IAAI,EAAC,WAAW,EAAA,CAAa,CACjF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACd,EAAA,oBAAoB,IAAI,WAAW,IAClC,oBAAoB,IAAI,WAAW,KAEnC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,wBAAwB,EAAQ,CAAA,CAC5C,CACG,EACN,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAA,EACnC,eAAe,GAAG,eAAe,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,kBAAkB,EAAQ,CAAA,CAChE,CACC,CACX,CACP,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,kBAAA,CAAoB,EAC3C,EAAA,WAAW,GAAG,WAAW,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,GAAQ,CACzD,CACF,CACF;AAEV;;;;","names":[],"sources":["src/components/stzh-input/stzh-input-description.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\n\nexport type StzhInputDescriptionProps = {\n  id: string;\n  classPrefix: string;\n  error?: string[];\n  description?: string;\n  descriptionLong?: string;\n  descriptionLongTitle?: string;\n  descriptionLongUsed?: boolean;\n  moreInfoButtonLabel?: string;\n};\n\nexport const StzhInputDescription: FunctionalComponent<StzhInputDescriptionProps> = ({\n  id,\n  classPrefix,\n  error,\n  description,\n  descriptionLong,\n  descriptionLongTitle,\n  descriptionLongUsed,\n  moreInfoButtonLabel,\n}) => {\n  return (\n    <div class={`${classPrefix}__description-wrapper`} id={id}>\n      <div class={`${classPrefix}__error`}>\n        {error.length > 0 ? (\n          <ul class={`${classPrefix}__error-list`}>\n            {error.map(error => (\n              <li class={`${classPrefix}__error-listitem`}>{error}</li>\n            ))}\n          </ul>\n        ) : (\n          <slot name=\"error\"></slot>\n        )}\n      </div>\n      <div class={`${classPrefix}__description`}>\n        {descriptionLongUsed && (\n          <div class={`${classPrefix}__description-long`}>\n            <stzh-popover class={`${classPrefix}__description-long-popover`} variant=\"tooltip\">\n              <button\n                class={`${classPrefix}__description-long-button`}\n                aria-label={moreInfoButtonLabel}\n                type=\"button\"\n                s-object-id={moreInfoButtonLabel}\n              >\n                <stzh-icon class={`${classPrefix}__description-long-icon`} name=\"info-help\"></stzh-icon>\n              </button>\n              <div slot=\"label\">\n                {descriptionLongTitle || description ? (\n                  descriptionLongTitle || description\n                ) : (\n                  <slot name=\"description-long-title\"></slot>\n                )}\n              </div>\n              <stzh-text curve=\"none\" slot=\"content\">\n                {descriptionLong ? descriptionLong : <slot name=\"description-long\"></slot>}\n              </stzh-text>\n            </stzh-popover>\n          </div>\n        )}\n\n        <div class={`${classPrefix}__description-text`}>\n          {description ? description : <slot name=\"description\"></slot>}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"version":3}

package/dist/components/{p-5BslSTpf.js → p-BukxCYGO.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CF5HtLyZ.js';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './p-DzjuI2eY.js';
 import { c as createFocusTrap } from './p-CBUfcdIy.js';
 import { i as isStzhElement } from './p-CN5apKPb.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
 import { w as waitForEvent } from './p--SdF31O7.js';
 import { s as stopAnimations, a as animateTo } from './p-BOO84wnP.js';
-import { d as defineCustomElement$1 } from './p-SbO4yTDL.js';
+import { d as defineCustomElement$1 } from './p-B0YyK73m.js';
 
 const stzhPopoverCss = () => `.sc-stzh-popover-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-popover-h,[stzh-hidden].sc-stzh-popover-h{display:none}.sc-stzh-popover-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-popover-h *.sc-stzh-popover,.sc-stzh-popover-h *.sc-stzh-popover::before,.sc-stzh-popover-h *.sc-stzh-popover::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-popover-h .has-focus.sc-stzh-popover{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover{outline-style:none !important}.sc-stzh-popover-h .stzh-fylingfocus-focused.sc-stzh-popover::-moz-focus-inner{border:0 !important}.sc-stzh-popover-h{display:contents;--color:var(--stzh-color-black);--width:var(--stzh-popover-width);--min-width:var(--stzh-popover-min-width);--max-width:var(--stzh-popover-max-width);--height:auto;--min-height:initial;--max-height:initial;--padding:var(--stzh-popover-padding);--content-padding:var(--stzh-popover-content-padding);--border-radius:var(--stzh-popover-border-radius);--background-color:var(
     --stzh-popover-background,
@@ -522,6 +522,6 @@ function defineCustomElement() {
 }
 
 export { StzhPopover as S, defineCustomElement as d };
-//# sourceMappingURL=p-5BslSTpf.js.map
+//# sourceMappingURL=p-BukxCYGO.js.map
 
-//# sourceMappingURL=p-5BslSTpf.js.map
+//# sourceMappingURL=p-BukxCYGO.js.map