@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/components/{p-044c234a.js → p-b03368b3.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$3 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 
 const stzhCheckboxCss = ".sc-stzh-checkbox-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-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(\n    --stzh-checkbox-label-hover-color,\n    var(--stzh-color-primary70)\n  );--label-hover-checked-color:var(\n    --stzh-checkbox-label-hover-checked-color,\n    var(--stzh-color-primary90)\n  );--check-color:var(--stzh-checkbox-check-color, var(--stzh-color-primary));--invalid-color:var(--stzh-checkbox-invalid-color, var(--stzh-color-error60));--disabled-color:var(--stzh-checkbox-disabled-color, var(--stzh-color-grey50));display:inline-block}[disabled].sc-stzh-checkbox-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkbox.sc-stzh-checkbox{display:grid}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error60)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{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-checkbox__description-long.sc-stzh-checkbox{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkbox__description-long.sc-stzh-checkbox{margin-top:0}}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);position:relative}.stzh-checkbox__check.sc-stzh-checkbox{display:block;position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%) translateZ(0);will-change:opacity;opacity:0;transition:opacity 0.15s ease;pointer-events:none;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath d='M10 15.172l9.192-9.193 1.415 1.414L10 18 3.636 11.636l1.414-1.414z'/%3E %3C/svg%3E\");mask-repeat:no-repeat;mask-position:center;mask-size:contain;background-color:var(--check-color)}.stzh-checkbox__label.sc-stzh-checkbox{--stzh-base-color:initial;display:inline-block;color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--label-hover-checked-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--label-hover-checked-color)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-color)}.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--label-hover-checked-color)}.stzh-checkbox--is-checked.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey60)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{color:var(--disabled-color);border-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey20)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--invalid-color)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{background-color:var(--disabled-color)}";
 const StzhCheckboxStyle0 = stzhCheckboxCss;
@@ -127,11 +127,11 @@ const StzhCheckbox = /*@__PURE__*/ proxyCustomElement(class StzhCheckbox extends
             "stzh-checkbox--is-disabled": this.disabled,
             "stzh-checkbox--is-checked": this.checked,
         };
-        return (h(Host, { key: '69135f85a8c98b7357977d1bcc894d40f6748d2e', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c5eb48485626c99a362d702696ebc56c5f4b9f18', class: classes }, h("label", { key: '0702b60ae97eead51faa453d05834ba238fd2646', class: "stzh-checkbox__field-wrapper" }, h("input", { key: 'dc99be9c50f7d87fe3277d7d6cbe3ed0e69671af', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '6aa9a868e0dc70442e24cd1039f6faefb0f878b1', class: "stzh-checkbox__mark" }, h("div", { key: 'a95db0e4b2149688299e561c9d6e7d63f1bf2a25', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: 'f3fa499c7482fa3cdc75dc8a2c5b34c418af2a78', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '49f150a1ed9f4a855b77e40327bdb3157aba88bd', class: "stzh-checkbox__marker" }, h("span", { key: '4dd6e8a1c4993fdc22b18a6bd424d68f942cb9c0', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '3992b31d8d2fec0ce87d9cc841f4508fb552721a', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c0ec35701febbe9c0b3f63091182fe4cb5e96508', class: classes }, h("label", { key: 'bc0479b4b11d991cdb2410c9b1d5c0933616da3e', class: "stzh-checkbox__field-wrapper" }, h("input", { key: 'f865a9b7105dbd8692e13a3dac08e3bcec898283', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '9dc5910aa037ef8b87e3cef2f6993a9970752aff', class: "stzh-checkbox__mark" }, h("div", { key: '1854a06f912692c81392d007badc64a3fcac66f0', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: '288debe5fb521c988ac9649dccc3a5821b03d035', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: 'ab751958c4c11a5a6aa016f8d365c9eac37a8762', class: "stzh-checkbox__marker" }, h("span", { key: 'fdf70b5bf345261de12732471ef1ad08fcabab3b', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'c3668f8710f8ab20d4dfdbc7903a18812cb9c853', class: "stzh-checkbox__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'b1928b271af93d0042d74b7a904aaf0837b2908a', class: "stzh-checkbox__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '76c2c9f4451bd5b8833d3f873270a4c270a30e5d', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'abd7dd52c0e2d2c66adc060b13d66079278fa517', classPrefix: "stzh-checkbox", id: `${this.inputId}-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 {
@@ -188,4 +188,4 @@ function defineCustomElement() {
 
 export { StzhCheckbox as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-044c234a.js.map
+//# sourceMappingURL=p-b03368b3.js.map

package/dist/components/{p-044c234a.js.map → p-b03368b3.js.map}

@@ -1 +1 @@
-{"file":"p-044c234a.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,gwQAAgwQ,CAAC;AACzxQ,2BAAe,eAAe;;ACQ9B,IAAI,eAAe,GAAG,CAAC,CAAC;MAcX,YAAY;;;;;;;QA2Ff,mBAAc,GAAY,KAAK,CAAC;QAEhC,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;SACpC,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YAElC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACnB,SAAS,EAAE,eAAe;gBAC1B,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;aACpB;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,eAAe;gBAC1B,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;YACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;gBACvC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,eAAe;gBAC1B,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;wBA3I2C,KAAK;oBAGV,EAAE;qBAGD,EAAE;uBAGC,KAAK;wBAGJ,KAAK;uBAGS,KAAK;;qBAMxC,EAAE;;;;4BAeuB,KAAK;;+BAOa,EAAE;;IAYrE,aAAa,CAAC,KAAY;QACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACxD,qBAAqB,CAAC;gBACpB,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB,CAAC,CAAC;SACJ;KACF;IAGD,YAAY,CAAC,QAA2B;QACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACpC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;iBAC1B;qBAAM;oBACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;iBAClB;aACF;SACF;aAAM,IAAI,QAAQ,EAAE;YACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;KACF;IA6DD,MAAM,iBAAiB;QACrB,IAAI,CAAC,OAAO,GAAG,iBAAiB,eAAe,EAAE,EAAE,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAC,cAAc,GAAG,OAAO,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;QAEpG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACnG;KACF;IAED,MAAM;;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;QAE5E,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;YACrB,gCAAgC,EAAE,eAAe;YACjD,qCAAqC,EAAE,mBAAmB;YAC1D,0BAA0B,EAAE,SAAS;YACrC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;YAC3C,2BAA2B,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,QAAQ;YAC3C,2BAA2B,EAAE,IAAI,CAAC,OAAO;SAC1C,CAAC;QAEF,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IAC3G,4DAAK,KAAK,EAAE,OAAO,IACjB,8DAAO,KAAK,EAAC,8BAA8B,IACzC,8DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAO,CACvD,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,CAAC,IAAI,CAAC,YAAY,KACjB,6DAAM,KAAK,EAAC,uBAAuB,IACjC,6DAAM,KAAK,EAAC,8BAA8B,iBAAa,MAAM,IAC1D,IAAI,CAAC,QAAQ;cACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;cAC9C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C,EACP,6DAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,CAAC,QAAQ;cACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;cAC5C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACG,CACA,EACP,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,MACrD,EAAC,oBAAoB,qDACnB,WAAW,EAAC,eAAe,EAC3B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACH,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\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-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: 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   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-b03368b3.js","mappings":"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","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\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-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: 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   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-63ba178a.js → p-b2eca173.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-f4adb3cd.js';
-import { d as defineCustomElement$3 } from './p-17efbc57.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-0ac64574.js';
+import { d as defineCustomElement$3 } from './p-42e86bbd.js';
+import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-10d1bf15.js';
 
 const stzhBathstatusItemCss = ".sc-stzh-bathstatus-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-bathstatus-item-h,[stzh-hidden].sc-stzh-bathstatus-item-h{display:none}.sc-stzh-bathstatus-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-bathstatus-item-h *.sc-stzh-bathstatus-item,.sc-stzh-bathstatus-item-h *.sc-stzh-bathstatus-item::before,.sc-stzh-bathstatus-item-h *.sc-stzh-bathstatus-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-bathstatus-item-h .has-focus.sc-stzh-bathstatus-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-bathstatus-item-h .stzh-fylingfocus-focused.sc-stzh-bathstatus-item{outline-style:none !important}.sc-stzh-bathstatus-item-h .stzh-fylingfocus-focused.sc-stzh-bathstatus-item::-moz-focus-inner{border:0 !important}.stzh-bathstatus-item.sc-stzh-bathstatus-item{background-color:var(--stzh-color-grey10);padding-top:var(--stzh-space-xlarge);padding-right:var(--stzh-space-large);padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-large)}.stzh-bathstatus-item__description.sc-stzh-bathstatus-item,.stzh-bathstatus-item-value.sc-stzh-bathstatus-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-bathstatus-item__title.sc-stzh-bathstatus-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-bathstatus-item__title.sc-stzh-bathstatus-item{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-bathstatus-item-container.sc-stzh-bathstatus-item{display:grid;grid-template-columns:max-content 1fr;gap:var(--stzh-space-small) var(--stzh-space-xlarge);align-items:center}.stzh-bathstatus-item-key.sc-stzh-bathstatus-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-bathstatus-item--teaser.sc-stzh-bathstatus-item .stzh-bathstatus-item__title.sc-stzh-bathstatus-item{display:none}.stzh-bathstatus-item--teaser.sc-stzh-bathstatus-item .stzh-bathstatus-item__description.sc-stzh-bathstatus-item{margin-bottom:var(--stzh-space-medium)}.stzh-bathstatus-item--list.sc-stzh-bathstatus-item{padding-top:var(--stzh-space-small);padding-right:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small);padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-bathstatus-item--list.sc-stzh-bathstatus-item{padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-large);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-large)}}.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item__description.sc-stzh-bathstatus-item,.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item-key.sc-stzh-bathstatus-item,.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item-uv-index-prediction.sc-stzh-bathstatus-item{display:none}.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item-container.sc-stzh-bathstatus-item{grid-template-columns:repeat(4, minmax(0, 1fr))}.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item-value.sc-stzh-bathstatus-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}@media screen and (min-width: 900px){.stzh-bathstatus-item--list.sc-stzh-bathstatus-item .stzh-bathstatus-item-value.sc-stzh-bathstatus-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}";
 const StzhBathstatusItemStyle0 = stzhBathstatusItemCss;
@@ -114,4 +114,4 @@ function defineCustomElement() {
 
 export { StzhBathstatusItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-63ba178a.js.map
+//# sourceMappingURL=p-b2eca173.js.map

package/dist/components/{p-63ba178a.js.map → p-b2eca173.js.map}

@@ -1 +1 @@
-{"file":"p-63ba178a.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.scss?tag=stzh-bathstatus-item&encapsulation=scoped","src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-bathstatus-item {\n  background-color: var(--stzh-color-grey10);\n  padding-top: var(--stzh-space-xlarge);\n  padding-right: var(--stzh-space-large);\n  padding-bottom: var(--stzh-space-xlarge);\n  padding-left: var(--stzh-space-large);\n\n  &__description,\n  &-value {\n    @include fontSize(\"milli\");\n  }\n\n  &__title {\n    @include fontSize(\"milli\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n  }\n\n  &-container {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: var(--stzh-space-small) var(--stzh-space-xlarge);\n    align-items: center;\n  }\n\n  &-key {\n    @include fontSize(\"nano\");\n    color: var(--stzh-color-grey70);\n  }\n\n  /** Variant teaser */\n\n  &--teaser &__title {\n    display: none;\n  }\n\n  &--teaser &__description {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  /** Variant list */\n\n  &--list {\n    padding-top: var(--stzh-space-small);\n    padding-right: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-small);\n    padding-left: var(--stzh-space-xsmall);\n\n    @include mq($from: medium) {\n      padding-top: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-large);\n      padding-bottom: var(--stzh-space-medium);\n      padding-left: var(--stzh-space-large);\n    }\n  }\n\n  &--list &__description,\n  &--list &-key,\n  &--list &-uv-index-prediction {\n    display: none;\n  }\n\n  &--list &-container {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  &--list &-value {\n    @include fontSize(\"micro\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhBathstatusItemData, StzhLocaleAdapter } from \"../../../index\";\nimport { StzhBathstatusItemLocalizedText } from \"./stzh-bathstatus-item.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-bathstatus-item\",\n  styleUrl: \"stzh-bathstatus-item.scss\",\n  scoped: true,\n})\nexport class StzhBathstatusItem {\n  /** Translation strings */\n  @Prop() localization: StzhBathstatusItemLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"teaser\" | \"list\" = \"teaser\";\n\n  /** Bathstatus item */\n  @Prop() item: StzhBathstatusItemData | string = \"\";\n  private _item: StzhBathstatusItemData | undefined;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhBathstatusItemElement;\n\n  @State() isMedium: boolean;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhBathstatusItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isMedium = media(\"medium\").matches;\n  };\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"bathstatus-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-bathstatus-item\": true,\n      [`stzh-bathstatus-item--${this.variant}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {!!this._item.description && <div class=\"stzh-bathstatus-item__description\">{this._item.description}</div>}\n          <div class=\"stzh-bathstatus-item-container\">\n            <stzh-link\n              class=\"stzh-bathstatus-item__title\"\n              size=\"default\"\n              textAlign={\"left\"}\n              href={this._item.url}\n              label={this._item.title}\n            ></stzh-link>\n            {!!this._item.temp && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.temperature}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.temp}</div>\n              </Fragment>\n            )}\n            {!!this._item.statusMessage && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.status}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.statusMessage}</div>\n              </Fragment>\n            )}\n            {!!this._item.lastUpdate && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.lastUpdate}</div>\n                <div class=\"stzh-bathstatus-item-value\">\n                  {this.isMedium ? (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"datetimeLong\")}\n                    </Fragment>\n                  ) : (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"dateInput\")}{\" \"}\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"time\")}\n                    </Fragment>\n                  )}\n                </div>\n              </Fragment>\n            )}\n            {!!this._item.uvIndexPrediction && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.uvIndexPrediction}</div>\n                <div class=\"stzh-bathstatus-item-value stzh-bathstatus-item-uv-index-prediction\">\n                  <img\n                    src={`${window.stzhComponents.pathMedia}/uvindex/uvindex_${this._item.uvIndexPrediction}.gif`}\n                    alt={\"UV Index\" + this._item.uvIndexPrediction}\n                  />\n                </div>\n              </Fragment>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-b2eca173.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,qsIAAqsI,CAAC;AACpuI,iCAAe,qBAAqB;;MCYvB,kBAAkB;;;;QAqCrB,uBAAkB,GAAG;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;SACzC,CAAC;QAEM,SAAI,GAAG;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC7B,CAAC;;uBAtCmC,QAAQ;oBAGG,EAAE;;;;IAelD,WAAW,CAAC,QAAyC;QACnD,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACnC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;aACxB;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;KACF;IAUO,aAAa,CAAC,OAAe;QACnC,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE;YAC/B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,UAAU,CAAC;KACnB;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;SAC1G;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,wBAAwB,CACrE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC3B,CAAC;SACH;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACpD;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,sBAAsB,EAAE,IAAI;YAC5B,CAAC,yBAAyB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IAChB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,mCAAmC,IAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAO,EAC1G,4DAAK,KAAK,EAAC,gCAAgC,IACzC,kEACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GACZ,EACZ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAChB,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAO,EAC3E,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO,CACtD,CACZ,EACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,KACzB,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAO,EACtE,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAO,CAC/D,CACZ,EACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,KACtB,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAO,EAC1E,4DAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,QAAQ,IACZ,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC,CAC1E,KAEX,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,EACpF,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,CAClE,CACZ,CACG,CACG,CACZ,EACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAC7B,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAO,EACjF,4DAAK,KAAK,EAAC,qEAAqE,IAC9E,4DACE,GAAG,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC,SAAS,oBAAoB,IAAI,CAAC,KAAK,CAAC,iBAAiB,MAAM,EAC7F,GAAG,EAAE,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,GAC9C,CACE,CACG,CACZ,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.scss?tag=stzh-bathstatus-item&encapsulation=scoped","src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-bathstatus-item {\n  background-color: var(--stzh-color-grey10);\n  padding-top: var(--stzh-space-xlarge);\n  padding-right: var(--stzh-space-large);\n  padding-bottom: var(--stzh-space-xlarge);\n  padding-left: var(--stzh-space-large);\n\n  &__description,\n  &-value {\n    @include fontSize(\"milli\");\n  }\n\n  &__title {\n    @include fontSize(\"milli\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n  }\n\n  &-container {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: var(--stzh-space-small) var(--stzh-space-xlarge);\n    align-items: center;\n  }\n\n  &-key {\n    @include fontSize(\"nano\");\n    color: var(--stzh-color-grey70);\n  }\n\n  /** Variant teaser */\n\n  &--teaser &__title {\n    display: none;\n  }\n\n  &--teaser &__description {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  /** Variant list */\n\n  &--list {\n    padding-top: var(--stzh-space-small);\n    padding-right: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-small);\n    padding-left: var(--stzh-space-xsmall);\n\n    @include mq($from: medium) {\n      padding-top: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-large);\n      padding-bottom: var(--stzh-space-medium);\n      padding-left: var(--stzh-space-large);\n    }\n  }\n\n  &--list &__description,\n  &--list &-key,\n  &--list &-uv-index-prediction {\n    display: none;\n  }\n\n  &--list &-container {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  &--list &-value {\n    @include fontSize(\"micro\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhBathstatusItemData, StzhLocaleAdapter } from \"../../../index\";\nimport { StzhBathstatusItemLocalizedText } from \"./stzh-bathstatus-item.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-bathstatus-item\",\n  styleUrl: \"stzh-bathstatus-item.scss\",\n  scoped: true,\n})\nexport class StzhBathstatusItem {\n  /** Translation strings */\n  @Prop() localization: StzhBathstatusItemLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"teaser\" | \"list\" = \"teaser\";\n\n  /** Bathstatus item */\n  @Prop() item: StzhBathstatusItemData | string = \"\";\n  private _item: StzhBathstatusItemData | undefined;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhBathstatusItemElement;\n\n  @State() isMedium: boolean;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhBathstatusItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isMedium = media(\"medium\").matches;\n  };\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"bathstatus-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-bathstatus-item\": true,\n      [`stzh-bathstatus-item--${this.variant}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {!!this._item.description && <div class=\"stzh-bathstatus-item__description\">{this._item.description}</div>}\n          <div class=\"stzh-bathstatus-item-container\">\n            <stzh-link\n              class=\"stzh-bathstatus-item__title\"\n              size=\"default\"\n              textAlign={\"left\"}\n              href={this._item.url}\n              label={this._item.title}\n            ></stzh-link>\n            {!!this._item.temp && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.temperature}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.temp}</div>\n              </Fragment>\n            )}\n            {!!this._item.statusMessage && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.status}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.statusMessage}</div>\n              </Fragment>\n            )}\n            {!!this._item.lastUpdate && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.lastUpdate}</div>\n                <div class=\"stzh-bathstatus-item-value\">\n                  {this.isMedium ? (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"datetimeLong\")}\n                    </Fragment>\n                  ) : (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"dateInput\")}{\" \"}\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"time\")}\n                    </Fragment>\n                  )}\n                </div>\n              </Fragment>\n            )}\n            {!!this._item.uvIndexPrediction && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.uvIndexPrediction}</div>\n                <div class=\"stzh-bathstatus-item-value stzh-bathstatus-item-uv-index-prediction\">\n                  <img\n                    src={`${window.stzhComponents.pathMedia}/uvindex/uvindex_${this._item.uvIndexPrediction}.gif`}\n                    alt={\"UV Index\" + this._item.uvIndexPrediction}\n                  />\n                </div>\n              </Fragment>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-25ff5360.js → p-b35195c8.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-17efbc57.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$2 } from './p-42e86bbd.js';
+import { d as defineCustomElement$1 } from './p-a2659715.js';
 
 const stzhMenuItemCss = ".sc-stzh-menu-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-menu-item-h,[stzh-hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-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-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-black);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--hover-color:var(--stzh-popover-item-hover-color, var(--stzh-color-black));--hover-background-color:var(--stzh-popover-item-hover-bg, var(--stzh-color-grey20))}[size=large].sc-stzh-menu-item-h{--icon-size:var(--stzh-icon-size);--height:var(--stzh-menu-large-item-height);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge)}[variant=secondary].sc-stzh-menu-item-h{--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-secondary30)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-grey20)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:flex;gap:var(--stzh-space-small);align-items:center;justify-content:stretch;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{--stzh-icon-size:var(--icon-size);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__text-wrapper.sc-stzh-menu-item{display:flex;gap:var(--stzh-space-xsmall)}.stzh-menu-item__counter.sc-stzh-menu-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--size-large.sc-stzh-menu-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);gap:var(--stzh-space-medium)}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";
 const StzhMenuItemStyle0 = stzhMenuItemCss;
@@ -87,7 +87,7 @@ const StzhMenuItem = /*@__PURE__*/ proxyCustomElement(class StzhMenuItem extends
             [`stzh-menu-item--size-${this.size}`]: !!this.size,
             [`stzh-menu-item--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'a7e424eb94f2897feb0862294c622e7741ca7b97', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: 'e515fdca2d1a78fc434dc09d425e845fca34ec16', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return StzhMenuItemStyle0; }
@@ -133,4 +133,4 @@ function defineCustomElement() {
 
 export { StzhMenuItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-25ff5360.js.map
+//# sourceMappingURL=p-b35195c8.js.map

package/dist/components/{p-25ff5360.js.map → p-b35195c8.js.map}

@@ -1 +1 @@
-{"file":"p-25ff5360.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ipIAAipI,CAAC;AAC1qI,2BAAe,eAAe;;MCqBjB,YAAY;;;;;;;QA6Df,mBAAc,GAAY,KAAK,CAAC;QAEhC,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;aACvB;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;gBACzC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,WAAM,GAAG,CAAC,KAAiB;YACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;gBACvC,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,YAAO,GAAG,CAAC,KAAiB;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;uBAzGkD,SAAS;oBAGf,SAAS;;qBAM/B,EAAE;yBAG0B,SAAS;0BAGd,KAAK;wBAGP,KAAK;sBAGP,KAAK;oBAGzB,EAAE;qBAGD,EAAE;oBAGH,EAAE;sBAGA,EAAE;;;;IA0E3B,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,QAAiB;QACnC,QACE,EAAC,QAAQ,QACN,QAAQ,KACP,WAAK,KAAK,EAAC,8BAA8B,IACtC,IAAI,CAAC,IAAI,IACR,iBAAW,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,KAErE,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,EACA,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAC7B,kBAAY,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAe,CACjG,CACG,CACP,EACD,WAAK,KAAK,EAAC,8BAA8B,IACvC,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,EAAE,KAAK,EAAC,sBAAsB,IAC7E,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,EACL,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,KAC7C,WAAK,KAAK,EAAC,yBAAyB,SAAG,IAAI,CAAC,OAAO,MAAQ,CAC5D,CACG,CACG,EACX;KACH;IAED,MAAM;QACJ,MAAM,QAAQ,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACvE,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,QAAQ;YACpC,2BAA2B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YACzC,6BAA6B,EAAE,IAAI,CAAC,QAAQ;YAC5C,2BAA2B,EAAE,IAAI,CAAC,MAAM;YACxC,CAAC,wBAAwB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;YAClD,CAAC,mBAAmB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SACpD,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,IAAI,IACR,SACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAuB,CAAC,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,OAAO,gBACF,IAAI,CAAC,SAAS,IAAI,IAAI,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACzB,KAEJ,cACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,IAAI,IAAI,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-b35195c8.js","mappings":"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","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-3e28d77d.js → p-b5caf3f4.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 stzhBreadcrumbCss = ".sc-stzh-breadcrumb-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-breadcrumb-h,[stzh-hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::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-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-breadcrumb-color, var(--stzh-color-primary70))}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{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-breadcrumb__item-link.sc-stzh-breadcrumb{appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{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-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .is-expand.sc-stzh-breadcrumb{position:absolute}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}";
 const StzhBreadcrumbStyle0 = stzhBreadcrumbCss;
@@ -153,7 +153,7 @@ const StzhBreadcrumb = /*@__PURE__*/ proxyCustomElement(class StzhBreadcrumb ext
             [`stzh-breadcrumb--${this.variant}`]: !!this.variant,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: '17a7c8d6979322a23d837cc2f203d59f13f3f14a' }, h("div", { key: '145887ca99351bbd0728cb96da831bca94e2e7a2', class: classes }, h("nav", { key: '97b977aeb9ec018ac7555d9dfed4e27e0208280d', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: '34aa0a57738b17354798c611a227da692792cd52', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
+        return (h(Host, { key: 'ed1c7468acd17e85c9b2a4b9a751e7d3ac819405' }, h("div", { key: '4076813c39b6af2cf5d7f68f6483707bc5a36a06', class: classes }, h("nav", { key: '9280811b687f8162e9c17c856299fd34747ad05b', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: '505ad815ab804d4579832e8ed77236fdcbf705e4', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
                 "stzh-breadcrumb__item": true,
                 "is-last": index + 1 === this._items.length,
                 "is-first": index === 0,
@@ -199,4 +199,4 @@ function defineCustomElement() {
 
 export { StzhBreadcrumb as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-3e28d77d.js.map
+//# sourceMappingURL=p-b5caf3f4.js.map

package/dist/components/{p-3e28d77d.js.map → p-b5caf3f4.js.map}

@@ -1 +1 @@
-{"file":"p-3e28d77d.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-b5caf3f4.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e42121d1.js → p-b84d0233.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-17efbc57.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$2 } from './p-42e86bbd.js';
+import { d as defineCustomElement$1 } from './p-a2659715.js';
 
 const stzhButtonCss = ".sc-stzh-button-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-button-h,[stzh-hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(\n    --stzh-button-hover-background-color,\n    var(--stzh-color-secondary60)\n  );--hover-border-color:transparent;display:inline-flex;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid;flex:0 0 100%}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(\n    --stzh-button-secondary-background-color,\n    var(--stzh-color-secondary30)\n  );--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(\n    --stzh-button-secondary-hover-background-color,\n    var(--stzh-color-secondary40)\n  )}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(\n    --stzh-button-tertiary-background-color,\n    transparent\n  );--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(\n    --stzh-button-tertiary-hover-background-color,\n    var(--stzh-color-secondary20)\n  )}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(\n    --stzh-button-active-background-color,\n    var(--stzh-color-secondary60)\n  )}[active][variant=secondary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--background-color:var(\n    --stzh-button-secondary-hover-background-color,\n    var(--stzh-color-secondary40)\n  )}[active][variant=tertiary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:var(\n    --stzh-button-tertiary-hover-background-color,\n    var(--stzh-color-secondary20)\n  )}[active][variant=tertiary-plain].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:transparent}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(\n    --stzh-button-disabled-background-color,\n    var(--stzh-color-grey70)\n  );--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(\n    --stzh-button-secondary-disabled-background-color,\n    var(--stzh-color-grey20)\n  )}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(\n    --stzh-button-input-disabled-background-color,\n    var(--stzh-color-grey20)\n  )}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(\n    --stzh-button-tertiary-disabled-background-color,\n    transparent\n  )}.sc-stzh-button-h:where([size=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-height:100%;margin:0;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{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-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button--not-hyphenated.sc-stzh-button .stzh-button__text.sc-stzh-button{hyphens:none}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}";
 const StzhButtonStyle0 = stzhButtonCss;
@@ -167,7 +167,7 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class StzhButton extends H {
             [`stzh-button--type-${this.type}`]: !!this.type,
             [`stzh-button--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '79df9e7e527e6ad6a131169214c87494269d866a', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: 'a18cb416b26eec4275810c9cd5b16bdef0d3bcdf', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return StzhButtonStyle0; }
@@ -244,4 +244,4 @@ function defineCustomElement() {
 
 export { StzhButton as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-e42121d1.js.map
+//# sourceMappingURL=p-b84d0233.js.map