@oiz/stzh-components 4.12.1 → 4.13.0-beta1

package/dist/esm/stzh-textandimage.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot, s as setPropsIfNull } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { h as hasSlot, s as setPropsIfNull } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 
 const stzhTextandimageCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}:host{--grid-template-areas:var(
@@ -138,7 +138,7 @@ const StzhTextandimage = class {
             [`stzh-textandimage--size-${this.size}`]: !!this.size,
             [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,
         };
-        return (h(Host, { key: 'b6c8e17239d33faefe357d7be281f3ffc477baeb', single: isSingle, "image-position": this.imagePosition }, h("div", { key: '52052b64ed85ca578e9612e66cff097f42c61ec5', class: classes }, h("div", { key: '412926ba1ffb4017675c2d214f7ab17bf39224a8', class: "stzh-textandimage__left" }, h("slot", { key: 'fe7f2c8f949625b1df28daf3f003bb374995d4c2', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '7a3f2839207fea48286332715325b65d9a33c1aa', class: "stzh-textandimage__right" }, h("div", { key: 'f4b61cafc2ba70076583f9769ceb7462006f08ed', class: this.imageMoves ? "stzh-textandimage__wrapper" : "" }, h("slot", { key: 'ad489b8f89170a5c20216753b8283f4e7f189577', name: "right", onSlotchange: () => forceUpdate(this.element) }))))));
+        return (h(Host, { key: 'c225c1c09b514833062bdf9ab67060955939ad43', single: isSingle, "image-position": this.imagePosition }, h("div", { key: 'e97f87d61c1121ce585834fde9a461686b0cdd67', class: classes }, h("div", { key: '4221e95658f23b54d49f3f3dbea14812bf42d93f', class: "stzh-textandimage__left" }, h("slot", { key: 'a2ba8d68b8e2c9431723612341f0271cfda34752', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '7c13b4cb3d3bdf2bcbf5a2ee99bb6acc514c8fa6', class: "stzh-textandimage__right" }, h("div", { key: 'ad7ce05dec8e4ab31e2bc29440f38a6982f1e095', class: this.imageMoves ? "stzh-textandimage__wrapper" : "" }, h("slot", { key: 'ffd5041d4cd2706cf4e8cdde579cde8e1b5423a5', name: "right", onSlotchange: () => forceUpdate(this.element) }))))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-timeline-item.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-BOO84wnP.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 
 const stzhTimelineItemCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--content-padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}:host{--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--heading-margin-bottom:var(--stzh-space-medium);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--border-width:0.125rem;--button-font-size:var(
@@ -284,7 +284,7 @@ const StzhTimelineItem = class {
             "stzh-timeline-item--is-foldable": this._foldable,
             "stzh-timeline-item--is-completed": this.completed,
         };
-        return (h(Host, { key: 'a388d5b9a0c5ca3e1c12cd60765ba43bafd47285', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'e1972a06367cddd096efb6250dbee1a8e92a798a', class: classes }, h(Heading, { key: 'e0a6b4a26028253853defcdde705a6e802277ae3', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '0763a733982e567cad272ab38977802ae4994b55', ref: el => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: 'b6bfadb0ede19ce0b5a58b04104dc9fff5915415', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: 'efe2f47efe47ec11be7feb0c6b5a5dec481083a5', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: '79e1edb558a1b6a1c4bde5d8958e0712e099584e', class: "stzh-timeline-item__button-inner" }, h("span", { key: '36b64ea865e5bbfc4696d98cce1b313dcacd9608', class: "stzh-timeline-item__button-text" }, h("span", { key: '1799cab0e202d69f9c929487cdbe7872dbea6b8e', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: 'e99a6075e50b65995879517b661883289a567e27', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: '7b10dd471b5c50f4e7fef5bd92ec818e3f84f9fb', class: "stzh-timeline-item__button-icon" })))), h("div", { key: '0926d3141066dc93d38d28f83961c140a45030b1', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'a89966b92e35694772670684675ff7e16c4b6d39', class: "stzh-timeline-item__content-inner" }, h("slot", { key: '9c7957d52e91ccf7f4744decbb2090f7ec2b678d' }))))));
+        return (h(Host, { key: '677f78ed10088e5114c62f84ddc010e54b06a4e7', role: "listitem", "is-foldable": this._foldable, tabindex: this.disabled ? null : this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: 'fe999f984ccdf2b3ca2b3995906c31a34b926685', class: classes }, h(Heading, { key: 'efe939514af7fe42c278ce45eef458a0aaaea240', id: `${this.timelineItemId}-header`, class: "stzh-timeline-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '9b3593e0c0fcc402c6ae980fad8238ff67c040ae', ref: el => (this.buttonElement = el), class: "stzh-timeline-item__button", "aria-controls": `${this.timelineItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, "aria-disabled": !this._foldable ? "true" : "false", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '0139b83aa2ac6edd3f413c1867dba981d776cd44', class: "stzh-timeline-item__bullet" }, hasIcon || this.completed ? (h("span", { class: "stzh-timeline-item__bullet-icon-wrapper" }, this.icon || this.completed ? (h("stzh-icon", { class: "stzh-timeline-item__bullet-icon", name: this.icon ? this.icon : "checkmark" })) : (h("slot", { name: "icon" })))) : (h("span", { class: "stzh-timeline-item__bullet-text" }, this.step)), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '4ac748ce27a9c6db4872dac9c3f29bcb1e6e5ea0', class: "stzh-timeline-item__badge", label: this.badge, type: this.badgeType }))), h("div", { key: 'd8463fac09c64f8bbb161e9b3c4a14c6b013110b', class: "stzh-timeline-item__button-inner" }, h("span", { key: 'a6c81e61e98877bc69a9b3ef48ce7edf93525ce0', class: "stzh-timeline-item__button-text" }, h("span", { key: '9d0777ff0404049865fb23f7997d7de6fe476fba', class: "stzh-timeline-item__heading-text" }, this.heading), h("span", { key: '0c31fa3de25a2455372b148edada1bce1f5442f0', class: "stzh-timeline-item__description" }, this.description)), this._foldable && h("span", { key: 'fd62bbdafa3e6a7cff17e09cb2f9d0b50dfb0b52', class: "stzh-timeline-item__button-icon" })))), h("div", { key: '1224b30c677e9d57d11a7cc60fa30ce64184b940', id: `${this.timelineItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-timeline-item__content", "aria-labelledby": `${this.timelineItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: '119936319f4e83e51c360a62a92abc7b78e4e9d1', class: "stzh-timeline-item__content-inner" }, h("slot", { key: '680707bad6dd9e22cc9a3604bc83f1da371136c6' }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-timeline.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 
 const stzhTimelineCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--nested-margin-left:var(--stzh-timeline-nested-margin-left, 0px);--nested-margin-bottom:var(--stzh-timeline-nested-margin-bottom, 0px);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}:host ::slotted(*:not(:last-child)){position:relative}:host ::slotted(*:not(:last-child))::after{content:"";display:block;position:absolute;top:0;left:1.25rem;width:0.125rem;height:100%;background-color:var(--stzh-color-grey50)}@media (forced-colors: active){:host ::slotted(*:not(:last-child))::after{background-color:CanvasText}}.stzh-timeline{--stzh-timeline-nested-margin-left:calc(
     var(--stzh-timeline-bullet-size) / -1
@@ -110,7 +110,7 @@ const StzhTimeline = class {
         const classes = {
             "stzh-timeline": true,
         };
-        return (h(Host, { key: '0fe07001d14798e4ab04d8a05b39585407d289fc' }, h("div", { key: 'f9693884d8e10039acac34dc6ee65b6483c53f45', class: classes, role: "list" }, h("slot", { key: 'd6445805d0d20a72ae108083e69a14b0a724a40e', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '38ded3ad998018d89b78bf2adf63ee72f0f5566a' }, h("div", { key: 'fb5e9f85ea412351647341d084849ad59d553e08', class: classes, role: "list" }, h("slot", { key: '1dc0ba42bb7234ec3c3c2dc3301900ed6efad299', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-timepicker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 
 const stzhTimepickerCss = () => `.sc-stzh-timepicker-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-timepicker-h,[stzh-hidden].sc-stzh-timepicker-h{display:none}.sc-stzh-timepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-timepicker-h *.sc-stzh-timepicker,.sc-stzh-timepicker-h *.sc-stzh-timepicker::before,.sc-stzh-timepicker-h *.sc-stzh-timepicker::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-timepicker-h .has-focus.sc-stzh-timepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker{outline-style:none !important}.sc-stzh-timepicker-h .stzh-fylingfocus-focused.sc-stzh-timepicker::-moz-focus-inner{border:0 !important}.sc-stzh-timepicker-h{width:100%}.stzh-timepicker__dropdown.sc-stzh-timepicker{--icon-angle-size:var(--stzh-icon-size-small);--active-icon-angle-transform:rotate(0deg) translateY(-50%)}`;
 
@@ -90,7 +90,7 @@ const StzhTimepicker = class {
         const classes = {
             "stzh-timepicker": true,
         };
-        return (h(Host, { key: '3dd9f2b27858d51a98ce41051808c1d8be807a4c', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1b7b7868dc840c4aa5ac912f7f355119330a6424', class: classes }, h("stzh-dropdown", { key: 'a4330107e2686eef2740b7ef92cf7ba3302af180', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: el => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
+        return (h(Host, { key: 'f79445073be60af1b13bfe06bb4412642743b256', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '0252db2b477b6e7e7beb957e0475a712860df939', class: classes }, h("stzh-dropdown", { key: '8464d09c31563e33d6f0a0b65e2019c95c92e426', open: this.open, class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: el => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, hideOptional: this.hideOptional }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-toast_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-BOO84wnP.js';
 import { a as api } from './js.cookie-Cpg2gH_9.js';
@@ -176,10 +176,10 @@ const StzhToast = class {
             "stzh-toast--has-close-hidden": this.hideClose,
             [`stzh-toast--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '446b49e231a058653d3736c4a7a24365e7946505' }, h("div", { key: 'b8c82e172f2a3fb99abf66762f91e9febd56c901', ref: el => (this.rootElement = el), class: classes }, h("div", { key: '48357da05b863ddb5546b0c5424a34fde8fe8e1c', class: "stzh-toast__content" }, h("div", { key: '36bd30993042f504aafc5f9b23f5579192c1014d', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: '99d7cbcce440e9873efd79045cbd8e076e51b6ca', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
+        return (h(Host, { key: '4c1c4cdc64fe10891d3a7ded71e82ea8fb97ff3f' }, h("div", { key: '2ebebb2a6ccda97cef30090b87b0b9b9ea3dc728', ref: el => (this.rootElement = el), class: classes }, h("div", { key: 'ad66296b97fc4b8fe79823363108a5a4b2788fc4', class: "stzh-toast__content" }, h("div", { key: '355d0723f6294bc707e7007be0375cfcdfc28832', class: "stzh-toast__icon-wrapper" }, h("stzh-icon", { key: '827bcd937f4323c3937ede281c2259f452bc2a1e', class: "stzh-toast__icon", name: (this.type === "info" && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), h("div", { key: 'a0a387bda275dfdbdb810bfe9b4a1fa04d1af3a1', class: "stzh-toast__text-wrapper" }, h("div", { key: '4ca9c2d4b985d4252aefc8855397c39f15ee3213', class: "stzh-toast__label" }, this.label), h("div", { key: '39e0201d434143a083dfe9bb63073600ef331b9f', class: "stzh-toast__link" }, h("slot", { key: '7c50d8dd47044590ef5a232d2286a85d8a8da647', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (h("div", { key: '3506c634657d88e3b57b306c9ae19416e2ea49bb', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '7be034a61ffdb0c3c65a7a135537416edced7604', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
+                (this.type === "error" && "warning-filled") })), h("div", { key: 'c6d067a69990c35e8f62ab512350a7bf92adf771', class: "stzh-toast__text-wrapper" }, h("div", { key: '54ce50bd06b48edf6f5cb5d707c2b0709ab1af19', class: "stzh-toast__label" }, this.label), h("div", { key: '1f5b83d94cd519a0e3a211cdd2b5f59bab9782ee', class: "stzh-toast__link" }, h("slot", { key: '47709f8c4029e598692fc229058fabfab3f31f3c', name: "link", onSlotchange: this.handleLinkSlotchange })))), !this.hideClose && (h("div", { key: '4c925104f8f7c0b64cd435cb5cd649ad2cac8b87', class: "stzh-toast__close-wrapper" }, h("stzh-button", { key: '8603abac79c8874eef356847caebee04b2b4562a', class: "stzh-toast__close", onClick: this.onCloseButtonClick, label: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -333,7 +333,7 @@ const StzhToastbar = class {
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '7460a6148cb0e08e92a1bb594e0c81f438844b26' }, h("div", { key: '6ae7db9674257007e24f428cf51889f24cc2854d', class: classes }, h("slot", { key: '38ee0dc0da0aebe58ff6925d2aa3c2a93324f3b1', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '5034ae6c3038f1aea0dc54e7b8b5d2dfc03b4e02' }, h("div", { key: '3ed760bfe5f3861b8f77784816e8028d0dc93b5c', class: classes }, h("slot", { key: 'b088a5aac35d1af50d648d7cf9dea80785707de1', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-toggle.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-CkiDnZXP.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { a as hasDefaultSlotContent, h as hasSlot } from './utils-CnvjJ2wY.js';
+import { S as StzhInputDescription } from './stzh-input-description-BLx_RZxZ.js';
 import './string-utils-BubviQku.js';
 
 const stzhToggleCss = () => `.sc-stzh-toggle-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-toggle-h,[stzh-hidden].sc-stzh-toggle-h{display:none}.sc-stzh-toggle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::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-toggle-h .has-focus.sc-stzh-toggle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle{outline-style:none !important}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle::-moz-focus-inner{border:0 !important}.sc-stzh-toggle-h{--check-size:1.5rem;--track-width:2.75rem;display:inline-block}[disabled].sc-stzh-toggle-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-toggle__marker-text.sc-stzh-toggle{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-toggle__description-wrapper.sc-stzh-toggle{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error60)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{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-toggle__description-long.sc-stzh-toggle{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-toggle__description-long.sc-stzh-toggle{margin-top:0}}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-button.sc-stzh-toggle{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-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{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-toggle__input.sc-stzh-toggle{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-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black10op);width:var(--track-width);height:1rem;flex-shrink:0;border-radius:0.75rem;display:inline-flex;justify-content:center;align-items:center;transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}@media (forced-colors: active){.stzh-toggle__mark.sc-stzh-toggle{outline:0.125rem solid ButtonBorder;outline-offset:-0.125rem}}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:var(--check-size);height:var(--check-size);border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;transform:translateY(-50%);transition-property:border-color, background-color, transform;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-toggle__check.sc-stzh-toggle{transition-property:transform;border-color:ButtonBorder}}@media (prefers-reduced-motion: reduce){.stzh-toggle__check.sc-stzh-toggle{transition:none}}.stzh-toggle__label.sc-stzh-toggle{--stzh-base-color:initial;display:inline-flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__label-text.sc-stzh-toggle{min-width:0}.stzh-toggle__label.sc-stzh-toggle>.stzh-toggle__description-wrapper.sc-stzh-toggle{flex:0 0 auto;display:inline-flex;align-items:flex-start;margin:0}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-text.sc-stzh-toggle{display:none}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle,.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-long.sc-stzh-toggle{display:inline-flex;align-items:flex-start;margin:0}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-long-button.sc-stzh-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.stzh-toggle__label.sc-stzh-toggle stzh-popover.sc-stzh-toggle .stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-small);display:block;line-height:0;color:var(--stzh-color-primary70)}.stzh-toggle__marker.sc-stzh-toggle{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-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-old-primary48)}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:SelectedItem}}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary);background-color:var(--stzh-color-primary);transform:translateY(-50%) translateX(calc(var(--track-width) - var(--check-size)))}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:ButtonBorder;background-color:SelectedItem}}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:Highlight;background-color:Highlight}}@media (forced-colors: active){.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle{outline-color:Highlight}}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:Highlight;background-color:Highlight}}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error60)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error60)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black10op)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error60)}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey70)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:GrayText}}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle{outline-color:GrayText}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-old-grey13)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:GrayText}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-grey10)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:SelectedItem}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-old-grey25);background-color:var(--stzh-color-old-grey25)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:GrayText;background-color:SelectedItem}}`;
@@ -32,6 +32,18 @@ const StzhToggle = class {
         this.labelPosition = "right";
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
         this.a11yDescribedby = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.focusedByInput = false;
         this.handleReset = async () => {
             this.checked = this.defaultChecked;
@@ -76,6 +88,19 @@ const StzhToggle = class {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-toggle"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -105,6 +130,9 @@ const StzhToggle = class {
             this._error = [];
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     async componentWillLoad() {
         this.inputId = `stzh-toggle-${toggleCounter++}`;
         this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
@@ -118,7 +146,8 @@ const StzhToggle = class {
         const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
         const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
         const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        const labelUsed = !!this.label || hasSlot(this.element) || descriptionLongUsed;
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-toggle": true,
             "stzh-toggle--has-error": errorUsed,
@@ -129,11 +158,11 @@ const StzhToggle = class {
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,
         };
-        return (h(Host, { key: '71703076957012244d99e5bfe9eaae91dfd3136b', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '5c3cdb7ff6195fb6dbf844110f7f2fc15dd0e5b9', class: classes }, h("label", { key: 'e7207ccb9b8ef7f1ee798f8008a777c14f83a294', class: "stzh-toggle__field-wrapper" }, h("input", { key: '66fa0d14e799bf6fdc0ec19f691dfac483884132', class: "stzh-toggle__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: '6260219a827eb1706ad4359a065d17ce28d83881', class: "stzh-toggle__mark" }, h("div", { key: 'c31d157867858c2ae6c449a53143886992250fd6', class: "stzh-toggle__check" })), labelUsed && (h("div", { key: '4176627fde0fdb89e848d9300a1bd22fccf678b2', class: "stzh-toggle__label" }, h("span", { key: 'bb2056d98e40d6c9780d622c639455f7a980f0e1', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '1bae137c2d20f921064d2bc8f27307e53babd3cc', class: "stzh-toggle__marker" }, h("span", { key: '19a4adea55ed3943bda5115c457e88168b05925c', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: 'd09370bcc5b0fc74b920e7c961ec559c6664a5db', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1c2ade57562614976ca6d5255dc28fddd6fbaa29', class: classes }, labelWrapperUsed && (h("label", { key: '63c1b6246465460174cd43e41e776b22278b501b', class: "stzh-toggle__field-wrapper" }, h("input", { key: 'fbb0a7957f6c51feac4fa89a0860b468a70dfad4', class: "stzh-toggle__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: '8cf2e9c5a05d2e049141b7663d9cd6a0902959a7', class: "stzh-toggle__mark" }, h("div", { key: '8cc1f7ef724c203cd2ad84360c88a98ca105eb6c', class: "stzh-toggle__check" })), h("div", { key: '0f765e3078b407d190c17208a64ef81e1b580562', class: "stzh-toggle__label" }, h("span", { key: '76c967e71cc27b310834af1f017a59f9b551e9ed', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: 'f39f2b1986afb9d72053ee6a125129b7264a10fd', class: "stzh-toggle__marker" }, h("span", { key: '8aab2815bc08b3ad5f1c4db3f1c85f3ac9150981', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3c54f5386396ffc9e1e52b8730aae92dc3f228e9', class: "stzh-toggle__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '6266f4640bfc578cbcdf5561cfca0eda3b35916f', class: "stzh-toggle__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '7cfd564610bd66d61b66ab70bbcaed301252de35', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '02c34d582606de57abafad95ff723d014f4a8bd2', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: 'fe36e454c45a382a5cec894b28bccda1465a3cf8', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '96d61ed45195149288f4b44d3251d8a80029eb4c', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-toggle.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-toggle.entry.js","sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  --check-size: 24px;\n  --track-width: 44px;\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\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    position: relative;\n    background-color: $colorBlack10op;\n    width: var(--track-width);\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n\n    @media (forced-colors: active) {\n      outline: 2px solid ButtonBorder;\n      outline-offset: -2px;\n    }\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: var(--check-size);\n    height: var(--check-size);\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition-property: transform;\n      border-color: ButtonBorder;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-text {\n    min-width: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translateY(-50%)\n      translateX(calc(var(--track-width) - var(--check-size)));\n\n    @media (forced-colors: active) {\n      border-color: ButtonBorder;\n      background-color: SelectedItem;\n    }\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space(\"xsmall\");\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    @media (forced-colors: none) {\n      color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      border-color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    @media (forced-colors: none) {\n      background-color: $colorBlack10op;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    @media (forced-colors: none) {\n      background-color: $colorError60;\n    }\n  }\n\n  /* Disabled */\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    border-color: $colorOldGrey25;\n    background-color: $colorOldGrey25;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n      background-color: SelectedItem;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true,\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: 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  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** 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<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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    this.stzhChange.emit({\n      component: \"stzh-toggle\",\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-toggle\",\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-toggle\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\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 labelUsed = !!this.label || hasSlot(this.element) || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\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-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__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-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            {labelUsed && (\n              <div class=\"stzh-toggle__label\">\n                <span class=\"stzh-toggle__label-text\">\n                  {this.label ? this.label : <slot></slot>}\n\n                  {!this.hideOptional && (\n                    <span class=\"stzh-toggle__marker\">\n                      <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-toggle__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-toggle\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            )}\n          </label>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-toggle\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"stzh-toggle.entry.js","sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  --check-size: 24px;\n  --track-width: 44px;\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\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    position: relative;\n    background-color: $colorBlack10op;\n    width: var(--track-width);\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n\n    @media (forced-colors: active) {\n      outline: 2px solid ButtonBorder;\n      outline-offset: -2px;\n    }\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: var(--check-size);\n    height: var(--check-size);\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition-property: transform;\n      border-color: ButtonBorder;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-text {\n    min-width: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translateY(-50%)\n      translateX(calc(var(--track-width) - var(--check-size)));\n\n    @media (forced-colors: active) {\n      border-color: ButtonBorder;\n      background-color: SelectedItem;\n    }\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space(\"xsmall\");\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    @media (forced-colors: none) {\n      color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      border-color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    @media (forced-colors: none) {\n      background-color: $colorBlack10op;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    @media (forced-colors: none) {\n      background-color: $colorError60;\n    }\n  }\n\n  /* Disabled */\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    border-color: $colorOldGrey25;\n    background-color: $colorOldGrey25;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n      background-color: SelectedItem;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true,\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: 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  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** 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<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\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    this.stzhChange.emit({\n      component: \"stzh-toggle\",\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-toggle\",\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-toggle\",\n      originalEvent: event,\n    });\n  };\n\n  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-toggle\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\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 labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {labelWrapperUsed && (\n            <label class=\"stzh-toggle__field-wrapper\">\n              <input\n                class=\"stzh-toggle__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-toggle__mark\">\n                <div class=\"stzh-toggle__check\"></div>\n              </div>\n\n              <div class=\"stzh-toggle__label\">\n                <span class=\"stzh-toggle__label-text\">\n                  {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n                  {labelUsed && !this.hideOptional && (\n                    <span class=\"stzh-toggle__marker\">\n                      <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-toggle__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-toggle\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            </label>\n          )}\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-toggle\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/stzh-tooltip.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-DzjuI2eY.js';
 import { c as createFocusTrap } from './focus-trap.esm-CBUfcdIy.js';
-import { i as isStzhElement } from './utils-BnOofzDv.js';
+import { i as isStzhElement } from './utils-CnvjJ2wY.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo } from './animation-utils-BOO84wnP.js';
 import './string-utils-BubviQku.js';
@@ -348,7 +348,7 @@ const StzhTooltip = class {
             [`stzh-tooltip--open`]: this.open,
             [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
         };
-        return (h(Host, { key: '012724e0503ec288ed26ab0349f47a38ef0b3096' }, h("div", { key: 'ab00cbc1925024146dd787aaa458ab9bc61983f7', class: classes }, h("div", { key: 'b6ce70a7bcb38321c0f80eadce119575765e1ae0', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '86aa4451718894fb07b2dad52f6ec88fc65a79fa' })), this.hasTrigger("click") && (h("div", { key: '612541e156677d64cfaf6b93e759661e0d8b43bf', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: 'a9d13f17857a6df369de8e47db1d444f3f832f5e', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: '3d923d9a940924c993103736747aef80402a066d', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: '471200d61c43b6642b27f4b9a57f1d2dff4ff5c5', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '10dd80e0915a3251702d59079420a910c2a4e40d', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: '2cc3012f1c6e840b835b11e09ce0eaea05e8e951', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '33314393adb510ea664a3b71cdc91cea01a4a8fe', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: 'd4162f0c66217ee9ea960a6b456aabbd2a0736f4', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
+        return (h(Host, { key: '87b3ff5681cba66f247a4b9796ba48a60223c8c0' }, h("div", { key: 'b8fcb9989e3755f8353dc30041c7389677ad2225', class: classes }, h("div", { key: '0260e279e17a025c41f79ffc259d2fbe7de1ebe5', class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", { key: '00233d11fa1eed44272ec776346149de8f27c4c3' })), this.hasTrigger("click") && (h("div", { key: '429618291c4e8b8c66febbd2c3db71597ba31b66', class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { key: '56d2565d045be1a7e3ad07eb2b1952c219d091e2', class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { key: '75ac7b7bd0a0f0b6f3f2a2fd0bc0040cb60ec7ff', class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { key: 'b05fd5efaf3ecbf8e24e1979d98b2300ec2513fb', id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { key: '5f02d98c98214aebd9a31432ba6c0642e629dfe8', class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { key: 'd14def3d3ab12425b1f79e811ade0aac375a3e75', name: "close", class: "stzh-tooltip__icon" }), h("span", { key: '76dcdb1cc8619130bb27ebbdbf920f28ead54207', class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ key: '461c81d1322994587db85962ba41b280b796fa5d', curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-twocolumns.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 
 const stzhTwocolumnsCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}:host{--grid-template-areas:var(
@@ -53,7 +53,7 @@ const StzhTwocolumns = class {
             "stzh-twocolumns--has-left": leftSlotUsed,
             "stzh-twocolumns--has-right": rightSlotUsed,
         };
-        return (h(Host, { key: '0ca48c60ae81b0f55d1da4aebda016298cdae9ce' }, h("div", { key: 'ef86c4a543c9f47388ae01ca4c52425f358221a8', class: classes }, h("div", { key: '3f6da1ef3010941a73aee6641a5c803e8be71e22', class: "stzh-twocolumns__left" }, h("slot", { key: '600b238e7bbf16d1eebf2ef7a107a4dbf724bafb', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: 'b9ba91f41cc40cd66b257f1d4ced8c679f1976db', class: "stzh-twocolumns__right" }, h("slot", { key: '6234fda5f8caf144343f77da9a80bbef2987e56d', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
+        return (h(Host, { key: '14d43657c9511411dee757628d1f705fdee2c049' }, h("div", { key: 'b20c2864082e8bf26a94ceceb5eb8c69d467b840', class: classes }, h("div", { key: '13f863b4e309db7e411d09027bb1c31d0adbf5bb', class: "stzh-twocolumns__left" }, h("slot", { key: '1959a39f845dc0c66cbf84b0f93b1e993142b780', name: "left", onSlotchange: () => forceUpdate(this.element) })), h("div", { key: '743b23351efb995d040467716ac9c7e243845b75', class: "stzh-twocolumns__right" }, h("slot", { key: '9a7b7d49343990d0cebb6ff9d00012106adf69e6', name: "right", onSlotchange: () => forceUpdate(this.element) })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-upload.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot, b as getStzhEnvironment, i as isStzhElement } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-CkiDnZXP.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { a as hasDefaultSlotContent, h as hasSlot, c as getStzhEnvironment, i as isStzhElement } from './utils-CnvjJ2wY.js';
+import { S as StzhInputDescription } from './stzh-input-description-BLx_RZxZ.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-E-ZsRS8r.js';
 import './string-utils-BubviQku.js';
 
@@ -13674,6 +13674,18 @@ const StzhUpload = class {
         this.totalFilesState = [];
         this.duplicateFileName = "";
         this.duplicateFileSize = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.PHOTOGRAPHING_BASE_URL = "/appl/mobiscan/rs";
         this.PHOTOGRAPHING_ENDPOINTS = {
             PING: "/ping",
@@ -13727,6 +13739,19 @@ const StzhUpload = class {
         this.filePreviewId = function (file) {
             return `${this.uploadId}-${file._id}`;
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.uploadEl, ["stzh-upload"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.uploadEl)) {
@@ -14052,6 +14077,9 @@ const StzhUpload = class {
             });
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     componentDidRender() {
         var _a;
         if (this.dropzone) {
@@ -14626,7 +14654,8 @@ const StzhUpload = class {
         const errorUsed = hasSlot(this.uploadEl, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
         const descriptionUsed = !!this.description;
         const descriptionLongUsed = !!this.descriptionLong || hasSlot(this.uploadEl, "description-long");
-        const labelWrapperUsed = !this.labelHidden && (!!this.label || hasSlot(this.uploadEl) || descriptionLongUsed);
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-upload": true,
             "stzh-upload--is-invalid": this.invalid || errorUsed,
@@ -14664,14 +14693,14 @@ const StzhUpload = class {
         if (!filesizeText) {
             instructionText = instructionText.replace(/\s*\(\s*\)\s*/, "");
         }
-        return (h(Host, { key: '7d364b7acdaf4825bea973dec2e7cf417a227efa', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'c5067d0c91e550be32c63afb2059e02be1d31f87' }), h("div", { key: '91668faf8d374d0b70feda5d89149e242adf9ebf', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '5fb7738dd2e340daef10f360b09f67b18a891606', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '9f197c9258486c99d13dfcb270230dc3c0ef5bd0', class: "stzh-upload__label-wrapper" }, h("label", { key: 'ac3c5c16204458e59db25deb124a19999a312fcf', id: `${this.uploadId}-label`, class: {
+        return (h(Host, { key: '1afee2b3d1316a36eb75803724423c523b3f6fa7', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'a3f8871947a0fe1c4c5470d442034d2f09d27a6e' }), h("div", { key: 'c7e597a30084ed37b8eeab1eded31c31fea6c738', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '029b0357daa4abcf2a9ea0b3a0bb63f075550612', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '0d6f8e0731936839341ee4dc704f6801d811074b', class: "stzh-upload__label-wrapper" }, h("label", { key: 'fc7c2092fe42df6e06fc6cc99b9766ec37b54a2e', id: `${this.uploadId}-label`, class: {
                 "stzh-upload__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            } }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '5752b027c6bedf6a97ef12e01ace35eafc3bf0dd', class: "stzh-upload__marker" }, h("span", { key: 'dbd732ec6926259a2b224cd4bc932dfff285defb', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
+            } }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: '3535faf8633cf520e90a692a2e90722a2d53f477', class: "stzh-upload__marker" }, h("span", { key: '45c458e6348ec2dc7084da4bf8c440a05b00a1d4', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '771dafc94e40ed79a0b6aebb987f46b957594017', class: "stzh-upload__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0d107480108d6e741decf54d48ab66964c39cea4', class: "stzh-upload__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'c3c2c92d561e379ee932e31f8d694dabff3b107c', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '2349de6ccdf5063c56bdf10b6956be6c71005ed6', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '1585940afa26cc6e6b8eb4095d9f6c88b21f4fc1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '3154f287ae4ef01216592887125a0859007db7b6', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '40bd2a6696fb43a39ff8d903c872d11d13234a8f', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'fb4dbce22bb5968943006be8763f2142f13d32f6', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: '8968bb28dac68c912a7815dd2a0e32288c43d102', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '7cd3d33a4eca99ab3ea31b88f88ea335051e13f2', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'f329b2c71913d8d3e70abb42519ad23b9b9b9776', slot: "icon", name: "camera" })))))), h("div", { key: '6bcc50fda1ad447fa578219fe21cda8cd38bbf44', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '317048ef496e7af9fa27b1004af45ec5162b3836' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: 'd1eddcdcd1463cd39823c26d79113551d2ee0105', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: 'e49426d619b235dd7cfe6bf0ba0fd9130116c2e3', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'e0a8ac5bb3d416888ec333d4a64987822f3e106a', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '40820996bb10ca8a61fb074695cc62d320ca413a', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'e1bbcde1a08fa5347225e7fb4fe8514f19a71bb9', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '9040abf9399b996b16257d72a6e21650aa5b1a74', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '9f2548f62b220d1d76c25fe71a46fa3e4a3305d4', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: 'b4cf16446aafee0660db6af6385107f0e6cb0afd' }, h("p", { key: 'dd2ab5f5bd90cdbea8223afce8c9406c0e4e91fd' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'a29a6db5974f9ebac3e5bdf0976b576d0a6163c7' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'bf23c415b0a0ec5d2f96f679f2a99050bdea10e2', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '3eee217b42d031521090bdd4e63da8c1ce7840c9', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: 'cdb158f41f00082241d7f8e47258aa51639ee439' }, h("p", { key: '62b061b8fca307aca313cfac414fe557b4a7befe' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '20f0e6ea658e9447dea35ca43fc66c5c9fd92f4d', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'fb1f84cfa27423e86ba68efebc98bc20b5d6511d', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: '2fbd7a1a6cf559dfca51a05c4e24b87aeb87bc99' }, h("div", { key: '1ee42624e419bdfc7730d9fa84e5d6bfa6fb804a', class: "stzh-upload-photographing__info" }, h("div", { key: '1c58bf86b6b8b8c12168477d8555344623db49fd', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'edde5725c7977c8952a1ad9c7f7a04f5f2b517e6', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'f497cfe077cfc7aefb2323727a1dbadfeb671f1a' }, this.localization.photographingText1)), h("div", { key: '1e896f5e86c39abc127027a1bf650e944f2a45f5', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'c7bdc24a9b17b5462a3688d9ba1bb93a139c89d4', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '858f7f6070ea7a0bbac86f0d8735a7621774d05e', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '4c5a4766b4d50eaf1e52dcc018b14e82805eb6b5', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '24dbac13f472465f56fdbabaf1a17c533814c58b' }, this.localization.photographingText2)), h("div", { key: '2495016b06cee36fb9c7e063959562314f7b4653', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '00e5defbc0b9ae2846599e9e314b05b38e5c5f58', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'f2e2acbdc24993024797b9f930d3f73583f0f150', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '5631b7d40b17931dbe0e2ded57767907efc7beff', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: 'e636eb4da691ca668d4e814c3cd031201e6b21e3', class: "stzh-upload__heading-wrapper" }, h("div", { key: 'c2f611456c08a0a995fda1c0891ea5a6bf4af6eb', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'bf4820e4d2f20f41021a2d60625e8204f8ba79d5', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'e1501359b5712d41ef279d29e5dda6f5a4c2ae9d', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'a765dfb24ecf0db37e969e74ef4e492fbed390ae', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: 'cbbaa377c07f02a06d82ce309545b5bd861267e2', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'bfc85ecf57f9b475ae6db2a31fa5aac5f6957040', slot: "icon", name: "camera" })))))), h("div", { key: '35afff863dd72ffa1c97678a3901e0bfa581545a', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: 'a82f7de8b8e029aed5291fbb8f57a9174ed9c5c0' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: '2a59a2aced16877551424191aa2bff3365cfe15e', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: 'e6a9fa513f01fa07eb8997dafda8d8c1b38f569e', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: '4bc89ff5fd68912ae8698079032a7ca625729c08', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: 'e40902663828f56736707a15347ee3e897cd8984', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'b28047732c8ac8fe2a317ac7018808da35aa445b', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '210dab81a1b69168a22c178227444aa3657a9b41', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'e94f091622737aa8079ad46099067895afceb7a1', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: '8e049f3bdb31d75c4a50aa9696393351d4296e49' }, h("p", { key: '6d46520e2d6d329f29d9b83751b9b1253dbf7c31' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: '95ec7c341380320c247f1ac5a46413146b74d82b' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'f3728d7a353af03c4a679bf62a181bbb769929f3', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'cc754c3acfab23220e10152372843641961001cd', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: '62efb41bcd7bc237e3f47b1c1cebf765d63b2922' }, h("p", { key: '79ff2e7debaf1088c6e32c79c979d97c6462c52d' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '3832ceba493fbdb6a6dfe1b4aa7a634a45ab3985', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '1fdf4accf649afdfd7479e7816e1ed80d0c13996', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'b4d5f8aff34faa71e1c41b6a1f74bafa395f2e80' }, h("div", { key: '9199e5c5d0cbfb61ae73e6b7417d6b2bd3d033eb', class: "stzh-upload-photographing__info" }, h("div", { key: 'a8a99499c28a51edeaf5851c1f967a139a5fc483', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: '902b89f5dded00c9de7a17c57d4114cc0174a1b0', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'a0a66c8210b052d5309c10276e1fa00308e897dd' }, this.localization.photographingText1)), h("div", { key: '5be1ab0b8ea3fe0b4dc4bbeceba1b94c4a061b60', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '3a34faa2635af5be9fd0e2075f0034bc5f4674a5', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: 'dfeae24b511640318cb92f6010a6b5a94569b2e4', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: 'c54b8f7c07bbf1950fb63df4ccb14d8cebacce59', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: 'd4ce18d05e411ce7b086d7c9d64f781f27810bc2' }, this.localization.photographingText2)), h("div", { key: '46f38e62fe7c3e55f341cce561851902a763ce3d', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '903865a3b1e54fda5d9ea9ea52d74eb362178cc1', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     get uploadEl() { return getElement(this); }
     static get watchers() { return {