@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/components/{p-17efbc57.js → p-42e86bbd.js}

@@ -15,7 +15,7 @@ const StzhBadge = /*@__PURE__*/ proxyCustomElement(class StzhBadge extends H {
             "stzh-badge": true,
             [`stzh-badge--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '1b42d7cb4a93678a94f1bc798732bc5f6db2babc', filled: !!this.label }, h("div", { key: '4a243d650f37dc2c2f152fac9d6f2b3f762c1fb6', class: classes }, this.label || h("slot", { key: '40a5477fd92b3113f48238f12ebe48f04331f83a' }))));
+        return (h(Host, { key: 'ab244b1fcd1862bbd1b913aa567a93482ed1fd58', filled: !!this.label }, h("div", { key: '54a8d091b9371f422a8c560eee21347362c3417f', class: classes }, this.label || h("slot", { key: '4ad245f23016d0645c4ea109cc0bddf40fb690ca' }))));
     }
     static get style() { return StzhBadgeStyle0; }
 }, [6, "stzh-badge", {
@@ -38,4 +38,4 @@ function defineCustomElement() {
 
 export { StzhBadge as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-17efbc57.js.map
+//# sourceMappingURL=p-42e86bbd.js.map

package/dist/components/{p-17efbc57.js.map → p-42e86bbd.js.map}

@@ -1 +1 @@
-{"file":"p-17efbc57.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0lEAA0lE,CAAC;AAChnE,wBAAe,YAAY;;MCWd,SAAS;;;;qBAEI,EAAE;oBAGqB,SAAS;;IAExD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;YAClB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IACxB,4DAAK,KAAK,EAAE,OAAO,IAAG,IAAI,CAAC,KAAK,IAAI,8DAAa,CAAO,CACnD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true,\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>{this.label || <slot></slot>}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-42e86bbd.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0lEAA0lE,CAAC;AAChnE,wBAAe,YAAY;;MCWd,SAAS;;;;qBAEI,EAAE;oBAGqB,SAAS;;IAExD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;YAClB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IACxB,4DAAK,KAAK,EAAE,OAAO,IAAG,IAAI,CAAC,KAAK,IAAI,8DAAa,CAAO,CACnD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true,\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>{this.label || <slot></slot>}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-820ce57f.js → p-476fe818.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$7 } from './p-17efbc57.js';
-import { d as defineCustomElement$6 } from './p-8436ccb7.js';
-import { d as defineCustomElement$5 } from './p-b9a50363.js';
-import { d as defineCustomElement$4 } from './p-5a8587ab.js';
-import { d as defineCustomElement$3 } from './p-0ac64574.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$7 } from './p-42e86bbd.js';
+import { d as defineCustomElement$6 } from './p-74ae8080.js';
+import { d as defineCustomElement$5 } from './p-a773eb1b.js';
+import { d as defineCustomElement$4 } from './p-a2659715.js';
+import { d as defineCustomElement$3 } from './p-10d1bf15.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 
 const stzhChipselectCss = ".sc-stzh-chipselect-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-chipselect-h,[stzh-hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::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-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}[active].sc-stzh-chipselect-h:not([active=false]){--background-color:var(\n    --stzh-chip-active-background-color,\n    var(--stzh-color-primary70)\n  )}[active].is-focused.sc-stzh-chipselect-h{--background-color:var(\n    --stzh-chip-active-background-color,\n    var(--stzh-color-primary70)\n  )}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{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-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);gap:var(--stzh-space-medium)}.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:Canvas}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect:not([active]){--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect:not([active]){--background-color:Highlight}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{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-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
 const StzhChipselectStyle0 = stzhChipselectCss;
@@ -218,11 +218,11 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
             "stzh-chipselect--is-required": this.required,
             "stzh-chipselect--has-label-hidden": this.labelHidden,
         };
-        return (h(Host, { key: '726f31149449b63ccc239b4f3d9b85047a071801', "is-invalid": this.invalid || errorUsed }, h("div", { key: '17c9b0f60859ceec61d8bffceb57394718c404a7', class: classes }, this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value })), h("label", { key: '5f717b198396ba191f640ebb4a547d0f3911f087', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: 'cbad63d61e9d78a8323fafba3f96eeac644adbb3', class: "stzh-chipselect__marker" }, h("span", { key: 'd9cc199d2935452e305f7848b3b017373b0dbcad', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '1ad56117838e8839c693f1f3e92b67dd5b5a65b0', "is-invalid": this.invalid || errorUsed }, h("div", { key: '9b9d3250f082b9a48c8f2b52b9e90e0b749da22c', class: classes }, this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value })), h("label", { key: '8bbddbdc73ec2676a03d36f3cfb10d0ea5cb509d', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: 'f42bd7e4742206e71cee672fd6eeb3609bf60589', class: "stzh-chipselect__marker" }, h("span", { key: '6288d4644ff6b5ddc05f6ba2269beaab2bdd3fb9', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0c6c571b323c16349872d7b22d512d807e52a2cc', class: "stzh-chipselect__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '4f1cb0a792d34744387cfe548fe88e4d48f33c12', class: "stzh-chipselect__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: 'e563b931ef38d5e7c0d684f2c600f25fbdadfc03' }, h("div", { key: '93ef094b49fa2c1016bceb68e02b862d902e4413', id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+            : this.localization.$globals.optionalFieldText)))), this._data.length > 0 && (h(Fragment, { key: '24d5e0f2c7ae0b16cf7d4daaf44a8bc55b0e7534' }, h("div", { key: '27c8720557014be5a3f9b0c947c1b7c7506d932e', id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
                 "stzh-chipselect__chip": true,
                 "is-focused": this.activeFocusOptionIndex === index,
             }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value) ||
@@ -235,7 +235,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
                     this.multiple &&
                     (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
                 ? "true"
-                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { key: 'a1405dc46d7681b491c35adfb052bd9712988678', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))))));
+                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { key: '918af684569f748346bd7c57252172b787879659', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -319,4 +319,4 @@ function defineCustomElement() {
 
 export { StzhChipselect as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-820ce57f.js.map
+//# sourceMappingURL=p-476fe818.js.map

package/dist/components/{p-820ce57f.js.map → p-476fe818.js.map}

@@ -1 +1 @@
-{"file":"p-820ce57f.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n.stzh-chipselect {\n  @include input-description;\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space(\"xsmall\");\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @include highContrast() {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  // &__dropdown {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value; //HERE\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple ? (\n            <Fragment>\n              {this._value.map(value => (\n                <input type=\"hidden\" name={this.name} value={value} />\n              ))}\n            </Fragment>\n          ) : (\n            <input type=\"hidden\" name={this.name} value={this.value} />\n          )}\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n\n          {this._data.length > 0 && (\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index,\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\"\n                        : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-476fe818.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n.stzh-chipselect {\n  @include input-description;\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space(\"xsmall\");\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @include highContrast() {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  // &__dropdown {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value; //HERE\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple ? (\n            <Fragment>\n              {this._value.map(value => (\n                <input type=\"hidden\" name={this.name} value={value} />\n              ))}\n            </Fragment>\n          ) : (\n            <input type=\"hidden\" name={this.name} value={this.value} />\n          )}\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n\n          {this._data.length > 0 && (\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index,\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value) ||\n                      (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                      (!data.value &&\n                        this.multiple &&\n                        (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\"\n                        : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-33ac52bc.js → p-4c4a22d3.js}

@@ -9,7 +9,7 @@ const StzhMenu = /*@__PURE__*/ proxyCustomElement(class StzhMenu extends H {
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '0d031ce5a945732bb65570b4b9b96cfde17a9c35', role: "menu" }, h("div", { key: 'e883158579a69808d31482378e54d66425b4876f', class: "stzh-menu" }, h("slot", { key: '97fd22afb8cee839109a0b80f1f53c622b72f863' }))));
+        return (h(Host, { key: 'e65fc52c84693965e8a4f5a8320f60a7356e1661', role: "menu" }, h("div", { key: '9e7b01735c0f3b6a0b8b01f593912fb10fe3a15f', class: "stzh-menu" }, h("slot", { key: '9603fe2760a47019a8d5d43826d8eaa30390e81b' }))));
     }
     static get style() { return StzhMenuStyle0; }
 }, [6, "stzh-menu"]);
@@ -29,4 +29,4 @@ function defineCustomElement() {
 
 export { StzhMenu as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-33ac52bc.js.map
+//# sourceMappingURL=p-4c4a22d3.js.map

package/dist/components/{p-33ac52bc.js.map → p-4c4a22d3.js.map}

@@ -1 +1 @@
-{"file":"p-33ac52bc.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uxCAAuxC,CAAC;AAC5yC,uBAAe,WAAW;;MCSb,QAAQ;;;;;IACnB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space(\"xsmall\");\n    margin-bottom: space(\"xsmall\");\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Host, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true,\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-4c4a22d3.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uxCAAuxC,CAAC;AAC5yC,uBAAe,WAAW;;MCSb,QAAQ;;;;;IACnB,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,WAAW,IACpB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space(\"xsmall\");\n    margin-bottom: space(\"xsmall\");\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Host, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true,\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-8107e1a2.js → p-4f39842d.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$1 } from './p-a2659715.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;border-radius:var(--stzh-form-input-border-radius)}.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__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-primary-hover);border-color:var(--stzh-color-primary-hover)}@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-old-primary8)}.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-primary-hover)}@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);position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:1.3125rem;text-align:center;box-sizing:border-box;color:var(--stzh-color-old-grey55);transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@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)}}@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;border-radius:1.3125rem;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-old-grey55);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-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:50%;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-primary-hover)}@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-old-primary8)}@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-white);border:solid 0.0625rem var(--stzh-color-primary)}@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__user-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary)}.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-primary-hover)}@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-primary)}@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-primary)}@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-primary-hover);border-color:var(--stzh-color-primary)}@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)}@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__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-old-grey55);border-color:var(--stzh-base-border-color)}@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__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-old-grey55)}@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}}";
 const StzhStepperItemStyle0 = stzhStepperItemCss;
@@ -57,9 +57,9 @@ const StzhStepperItem = /*@__PURE__*/ proxyCustomElement(class StzhStepperItem e
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete,
         };
-        const dotted = (h("span", { key: 'cec5d39bb2c68067cd9b20faf4bf8806e1cdd1a3' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (h("span", { key: 'd3c3909987d3d81a634e5e17fcd5308801fe4f88' }, h("span", { key: 'e1647826e5d4f7eed598b8f1f600d29189cb27fc', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'a078ac0bcb5d6df53648fa5b019f6ed6e9e3a15c', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
-        return (h(Host, { key: 'e104e36e467bbdfb59b97e9083896a8d940f61aa', role: "listitem" }, h("div", { key: 'b0366d9c0fb622a3708c070656d41e10288132a8', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
+        const dotted = (h("span", { key: '6ad9c0296692d49c06812713c204fa0321ccc650' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (h("span", { key: 'bb26d1beb7162193cd3ee9c6ca9722f81ef872f4' }, h("span", { key: '6b4cb4eaa5997213afeab9810ccc06df6584e78e', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: '0eeb3ec064bfe9b6ee598f28697f2006e2781c3e', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '79af04c48f23357209b1e1e7544642260b1f3e38', role: "listitem" }, h("div", { key: '78f62c8fffa3081b4d461f24280fa57f9ee9e879', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
     }
     get element() { return this; }
     static get style() { return StzhStepperItemStyle0; }
@@ -99,4 +99,4 @@ function defineCustomElement() {
 
 export { StzhStepperItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-8107e1a2.js.map
+//# sourceMappingURL=p-4f39842d.js.map

package/dist/components/{p-8107e1a2.js.map → p-4f39842d.js.map}

@@ -1 +1 @@
-{"file":"p-8107e1a2.js","mappings":"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","names":[],"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    border-radius: $formInputBorderRadius;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorOldPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\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: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $stepperItemSmallUp * 0.5;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorOldGrey55;\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      border-radius: $stepperItemSmallUp * 0.5;\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: $colorOldGrey55;\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: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorOldPrimary8;\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: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\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: $colorPrimary;\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: $colorPrimary;\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: $colorPrimaryHover;\n    border-color: $colorPrimary;\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\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 &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorOldGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorOldGrey55;\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-4f39842d.js","mappings":"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","names":[],"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    border-radius: $formInputBorderRadius;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorOldPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\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: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $stepperItemSmallUp * 0.5;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorOldGrey55;\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      border-radius: $stepperItemSmallUp * 0.5;\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: $colorOldGrey55;\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: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorOldPrimary8;\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: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\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: $colorPrimary;\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: $colorPrimary;\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: $colorPrimaryHover;\n    border-color: $colorPrimary;\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\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 &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorOldGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorOldGrey55;\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-75352a6a.js → p-556af4a4.js}

@@ -45,7 +45,7 @@ const StzhActions = /*@__PURE__*/ proxyCustomElement(class StzhActions extends H
             "stzh-actions--space-between": this.spaceBetween,
             [`stzh-actions--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '90ca293975b146dde80f0d7767ec5802dab4f4a1', "space-between": this.spaceBetween }, h("div", { key: '8ca35fba8b6fccf079a59fc81dacaf28c2b4ccc7', class: classes }, h("div", { key: '08d4b8e5b2a683415a7e805296035144fbe529ab', class: "stzh-actions__actions", role: "group" }, h("div", { key: '7b17f0075a7c63412d57f47c8aac6e55f8661b74', class: "stzh-actions__tertiary-actions" }, h("slot", { key: '12f80addb23694e7d88562fa56339a5b104d2ad0', name: "tertiary" })), h("div", { key: 'f1b13f1132199dcec7c911bb217068583a3d736e', class: "stzh-actions__wrapper" }, h("div", { key: 'c1b1243cfad88238df6a2984953179f2217b28d3', class: "stzh-actions__secondary-actions" }, h("slot", { key: 'be62602ec7736c7eb67a1b1f441507934a70b02b', name: "secondary" })), h("div", { key: '95361bd236da42b25f9f0005a0faa95d9df3f50e', class: "stzh-actions__primary-actions" }, h("slot", { key: '0d966a259fcb00a99d168e600508f1c62fed0aae', name: "primary" })))))));
+        return (h(Host, { key: '6f2fa3a12747f51f18e613908f76d6ed72cce777', "space-between": this.spaceBetween }, h("div", { key: '289677944be98dfe8abd41f03b09c6fa12318e8d', class: classes }, h("div", { key: 'c348ca9ea3fbf7846eb3ebe23cdf36e93a12088a', class: "stzh-actions__actions", role: "group" }, h("div", { key: 'fe87f7a0629b8df8a26a313e21946df2246d6153', class: "stzh-actions__tertiary-actions" }, h("slot", { key: '178170babd992f3450e452a2b3dd1622ce0a2b47', name: "tertiary" })), h("div", { key: '45bd80ba3cbd48e86604f02f3e80e02354ffac5f', class: "stzh-actions__wrapper" }, h("div", { key: 'dd00ba8284996ded53c568b2ead2c1cde9b554c2', class: "stzh-actions__secondary-actions" }, h("slot", { key: '834b135efe725ed2ed155bdb174a926edf4b9487', name: "secondary" })), h("div", { key: '923fc8334c1e5c0d9c0f67bd1c162826b20c6262', class: "stzh-actions__primary-actions" }, h("slot", { key: '75ec7c89fe2df103e9e44a18c5b2ce673fea9ca0', name: "primary" })))))));
     }
     get element() { return this; }
     static get style() { return StzhActionsStyle0; }
@@ -69,4 +69,4 @@ function defineCustomElement() {
 
 export { StzhActions as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-75352a6a.js.map
+//# sourceMappingURL=p-556af4a4.js.map

package/dist/components/{p-75352a6a.js.map → p-556af4a4.js.map}

@@ -1 +1 @@
-{"file":"p-75352a6a.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,m7EAAm7E,CAAC;AAC38E,0BAAe,cAAc;;MCahB,WAAW;;;;;QAWd,SAAI,GAAG;YACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;YAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;YAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBAC7B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,WAAW;iBACI,CAAC,CAAC;aAC7B,CAAC,CAAC;YAEH,eAAe,CAAC,OAAO,CAAC,MAAM;gBAC5B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,UAAU;iBACK,CAAC,CAAC;aAC7B,CAAC,CAAC;SACJ,CAAC;uBA7B2E,MAAM;4BAGlC,KAAK;;IA4BtD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;YAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAClD,CAAC;QAEF,QACE,EAAC,IAAI,sEAAgB,IAAI,CAAC,YAAY,IACpC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-556af4a4.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,m7EAAm7E,CAAC;AAC38E,0BAAe,cAAc;;MCahB,WAAW;;;;;QAWd,SAAI,GAAG;YACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;YAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;YAEF,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBAC7B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,WAAW;iBACI,CAAC,CAAC;aAC7B,CAAC,CAAC;YAEH,eAAe,CAAC,OAAO,CAAC,MAAM;gBAC5B,cAAc,CAAC,MAAM,EAAE;oBACrB,OAAO,EAAE,UAAU;iBACK,CAAC,CAAC;aAC7B,CAAC,CAAC;SACJ,CAAC;uBA7B2E,MAAM;4BAGlC,KAAK;;IA4BtD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,6BAA6B,EAAE,IAAI,CAAC,YAAY;YAChD,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAClD,CAAC;QAEF,QACE,EAAC,IAAI,sEAAgB,IAAI,CAAC,YAAY,IACpC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,4DAAK,KAAK,EAAC,gCAAgC,IACzC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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-ce0311f9.js → p-5aa4ca6b.js}

@@ -17,7 +17,7 @@ const StzhLoader = /*@__PURE__*/ proxyCustomElement(class StzhLoader extends H {
             "stzh-loader--hide-label": this.hideLabel,
             [`stzh-loader--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'f928859546fc204dffd6a175cc401ba273697a94' }, h("div", { key: 'c52f0e26667791cc815df1cd1902a743fd08a808', class: classes }, h("div", { key: '0f41109fc78aba388a9937fd37110dc5e552c909', class: "stzh-loader__wrapper" }, h("div", { key: '5b6801fc65c234c806ec388653cd478bc67cf54b', class: "stzh-loader__uil" }, h("div", { key: '9c81f56b552c24497fa42070e9d1ed9ae9e9068f', class: "stzh-loader__ib" }, h("div", { key: 'abe087c982475e2db41696aad2ad3a4fa2333e91', class: "stzh-loader__circle" }, h("div", { key: '029e0669c3449e83bd357d8c853b598cd1c276eb' })), h("div", { key: 'c7dcea928580d1feb9f6cbeac36a023f43078e30', class: "stzh-loader__circle" }, h("div", { key: '12689365fec09cd690c4b1f2b0e037faabe3da6a' })), h("div", { key: 'a541381378c9b6563d7c2def5f79a5015e6f84a6', class: "stzh-loader__circle" }, h("div", { key: '3d33858a510240f5020309dfd49ee5bec1706bff' })), h("div", { key: '7be2a01f27fa9588ad07ed544d9f982fae524018', class: "stzh-loader__circle" }, h("div", { key: 'd164fd797d4dc3f455d542b476c06b6540169947' }))))), h("div", { key: '195321648428d3c9712c6b2eb9b524c9a75f1823', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: 'e4be8b305cacbb7c94d99e0a633578f861ae46a1' }, h("div", { key: 'ea941dfff47d06269869d2cb0471cde31cf4ea4e', class: classes }, h("div", { key: '91501bfb80534118082f07465cf8fcd08cb33462', class: "stzh-loader__wrapper" }, h("div", { key: '750eb95702b1ee4006ccc9941ebdaaf135ed5c53', class: "stzh-loader__uil" }, h("div", { key: 'd9957970e031a06556420db09ea829979dd53a26', class: "stzh-loader__ib" }, h("div", { key: '6bc6d7f7f9012f291c481170d1eaf8516e774754', class: "stzh-loader__circle" }, h("div", { key: 'da200f7f69e0f6b1ba674e4efd0128bf7b4aba0c' })), h("div", { key: 'e9eaf6c00ded17736cae7988ab2e76f22bd04522', class: "stzh-loader__circle" }, h("div", { key: '5249638089aa283d5d0fde2a8fdcadd27467d36e' })), h("div", { key: '3346b50d81a34ac6f9e911d78eb756eae7ccb46f', class: "stzh-loader__circle" }, h("div", { key: 'cb141ee1980633ff9dbd19687ee4cc4466522091' })), h("div", { key: 'b8e05008bd1cee35bf3e43c6fa5a43e52f6996c1', class: "stzh-loader__circle" }, h("div", { key: 'fac4f0d612d75c09aae7c9608cdc1a4a4a4e26e4' }))))), h("div", { key: '737ae0a862da0e46f31cdec2a3b63c67013e0efc', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
     }
     get element() { return this; }
     static get style() { return StzhLoaderStyle0; }
@@ -42,4 +42,4 @@ function defineCustomElement() {
 
 export { StzhLoader as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-ce0311f9.js.map
+//# sourceMappingURL=p-5aa4ca6b.js.map

package/dist/components/{p-ce0311f9.js.map → p-5aa4ca6b.js.map}

@@ -1 +1 @@
-{"file":"p-ce0311f9.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m2GAAm2G,CAAC;AAC13G,yBAAe,aAAa;;MCSf,UAAU;;;;oBAEe,SAAS;qBAGrB,EAAE;yBAGG,KAAK;;IAIlC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,CACF,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,oBAAoB,eAAW,QAAQ,IAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-5aa4ca6b.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m2GAAm2G,CAAC;AAC13G,yBAAe,aAAa;;MCSf,UAAU;;;;oBAEe,SAAS;qBAGrB,EAAE;yBAGG,KAAK;;IAIlC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,CACF,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,oBAAoB,eAAW,QAAQ,IAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}