@oiz/stzh-components 4.5.0 → 4.6.0-beta1

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

@@ -20,11 +20,11 @@ const StzhHspace = class {
         this.border = "none";
     }
     render() {
-        return (h(Host, { key: '2b4b3bf29684a893e4f03da446f5ce59b5cc08e1' }, h("div", { key: '7dfb0a82a3b3eaf1c05c62d834cf11dc8016b955', class: {
+        return (h(Host, { key: 'f11a2c28142f46d3d899da814c8e265d0537f885' }, h("div", { key: '2f5760fecfd510d6b6c5b2598b7b6959ecb84790', class: {
                 "stzh-hspace": true,
                 [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
                 [`stzh-hspace--items-${this.items}`]: !!this.items,
-            } }, h("slot", { key: '6feaf587c783eb0c0ec955c10cc31a3a7570b213' }))));
+            } }, h("slot", { key: 'a89a6f24fc2af83d021b1a82179e12da20198ffa' }))));
     }
 };
 StzhHspace.style = StzhHspaceStyle0;

package/dist/esm/stzh-http-error.entry.js

@@ -61,7 +61,7 @@ const StzhHttpError = class {
         const classes = {
             "stzh-http-error": true,
         };
-        return (h(Host, { key: '7ac3167eb9a941fb312fc5776cbeafc03d2f2af3' }, h("div", { key: '031f558f68a52e5e82bf440ca7c9db57b2c3ac60', class: classes }, h("div", { key: '2391cc773a556e520782aa382e1bf539569849de', class: "stzh-http-error__errorcode" }, this._errorcode), h("div", { key: '9aca8f7b0698dab3224a057cda63fcb3c129ff5c', class: "stzh-http-error__heading" }, h("stzh-heading", { key: 'f27158cd06a19c588b7ca6c3776dcae35de7c609' }, this.heading)), h("div", { key: 'cfa81f65e2c6580643dee4944cbdc8e599371832', class: "stzh-http-error__description" }, h("stzh-text", { key: 'd9372fc31cbbf20c17e2d9bd641374efa3f1eb55' }, this.description)), h("div", { key: '7f9a7b426035d51a0a5f61feb407a9e4dc82bea5', class: "stzh-http-error__actions", role: "group" }, h("stzh-buttongroup", { key: '97233b183fbcfb405656ef95e59ba5498497f309' }, window.history.length > 1 && (h("stzh-button", { key: 'e6f70b984127f7b691811f90f2e01843090ee2df', variant: "secondary", onStzhClick: this.goBack }, this.localization.labelBack)), h("stzh-button", { key: 'ececa7d624d8d73aff19c7a9141d85aaa41b5059', variant: "default", href: this.hrefStart }, this.localization.labelStart))))));
+        return (h(Host, { key: '70fe846a5195ca8e4717519c7280767e2b3b5846' }, h("div", { key: '43049bb1a9fa43aa2b438cefc76dd5a2398ebcd9', class: classes }, h("div", { key: '3fa1deada31ce9cf27a4a58e8fab9a00b82dac54', class: "stzh-http-error__errorcode" }, this._errorcode), h("div", { key: 'c2e7906283b660efb5d9f572931c1051bcc14fab', class: "stzh-http-error__heading" }, h("stzh-heading", { key: '7e6cd85907a08d57c343fdf6e73019b456b974d2' }, this.heading)), h("div", { key: 'ad7ba0c55d5f0aaeebc9ea780856e29c6e6776b6', class: "stzh-http-error__description" }, h("stzh-text", { key: '68fed169bb0b9d2e5b5ab77c17f345822a82dd8b' }, this.description)), h("div", { key: '35103a2553f9c81efcc723f227ce3d138b8ba39c', class: "stzh-http-error__actions", role: "group" }, h("stzh-buttongroup", { key: '4d3b64958afc2e5d6889c96de113b841fa803296' }, window.history.length > 1 && (h("stzh-button", { key: '7b3dc7a2a0c6b859d728a59607976b9e0d1e14bb', variant: "secondary", onStzhClick: this.goBack }, this.localization.labelBack)), h("stzh-button", { key: '94823fb1c7ecaaafa5c169799bac5facc49347ef', variant: "default", href: this.hrefStart }, this.localization.labelStart))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -3007,18 +3007,18 @@ const StzhIframe = class {
         const classes = {
             "stzh-iframe": true,
         };
-        return (h(Host, { key: '9ed7e44c9ab8faaed83d08214093ef245c169fe7' }, h("div", { key: '88ce18b35e92bd12ebc614927caa47dadf6bf653', class: classes }, this.view === "iframe" && (h("iframe", { key: '5bf65a4436735bec12cc6ba79b14543b8141de26', id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: el => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText)), h("button", { key: 'd1f7df9e1441d3ffe4668f88115db799ff6ee5ba', ref: el => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
+        return (h(Host, { key: '1ea8336c2a72e09afdc7b66f63bf1c905669d059' }, h("div", { key: '249dd3a4fdc84eb88a5bda01078f4d65587551f8', class: classes }, this.view === "iframe" && (h("iframe", { key: 'b9459c43ac7009f6bc59b264a01dbc8430c4a960', id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: el => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText)), h("button", { key: 'bc1374da545a08c71f52001c9c26af7a4f7a4900', ref: el => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
             // disabled={this.view === "cookiewall"}
             class: {
                 "stzh-iframe__preview": true,
                 "is-visible": this.view === "preview" || this.view === "cookiewall",
-            } }, h("div", { key: '569c6bccc9b57f20989f2603e45ef76f8096dc66', class: "stzh-iframe__preview-image-wrapper" }, h("slot", { key: '96984a0700ef04fe57d23ef567ef32c3151b76f0', name: "preview-image" })), h("div", { key: 'cc86f5eaf4d14c8fd03284d27a3ff6a0df865149', class: "stzh-iframe__preview-logo-wrapper" }, h("slot", { key: '00502da738af0adc7a407a092c9bf3f93d91bfa8', name: "preview-logo" })), this.previewIcon && (h("div", { key: '5603d0e5a3b32c5415489e4499094ad9bf305886', class: {
+            } }, h("div", { key: '1eb9109999d87383d0374c103bafac1c10f2fd28', class: "stzh-iframe__preview-image-wrapper" }, h("slot", { key: 'a0a70e3d8b08436bdc36f1061fa05a7f54732cf8', name: "preview-image" })), h("div", { key: '1ee5cd11064a4ebbaf553a02493c457cbfddb0a8', class: "stzh-iframe__preview-logo-wrapper" }, h("slot", { key: 'ff72a882cbbc8d5fffb2f75375784fb06db5c50a', name: "preview-logo" })), this.previewIcon && (h("div", { key: '4df2b537c7811ecfdd31cbc53bfc53b28ec5a52b', class: {
                 "stzh-iframe__preview-run": true,
                 "is-visible": this.view === "preview",
-            } }, h("stzh-icon", { key: 'a679760e0be916b22e379480ff0f3db6f6aafef4', class: "stzh-iframe__preview-run-icon", name: this.previewIcon })))), this.cookie && (h("div", { key: '4d1a75ca7d40612291fce45815e6097a208bc2c6', class: {
+            } }, h("stzh-icon", { key: '35fcef994af70ef6cf89711e1312e7c71653119c', class: "stzh-iframe__preview-run-icon", name: this.previewIcon })))), this.cookie && (h("div", { key: '355128b058a6fc168a2c979da896cc2ed6125429', class: {
                 "stzh-iframe__cookiewall": true,
                 "is-visible": this.view === "cookiewall",
-            } }, h("div", { key: 'e93298d5c5c86fcbbb6db9cffc782fa453c92904', class: "stzh-iframe__cookiewall-content" }, h("div", { key: 'df77a9e9b7ea5bd920675c12bbebbbcd3919dc73', class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { key: '6a00014bcbe7058d7fe4c01089b77dcf8b062bfb', ref: el => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview && (h("button", { key: 'e1d9afd7d8eeae57f8348fe33ec9f3657370899d', class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { key: '7f7ef9518d27d23441514e7bbdc2bdc88015ef81', class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))))));
+            } }, h("div", { key: '2b33c1621fb4c18522d8d2d872b87869135eb697', class: "stzh-iframe__cookiewall-content" }, h("div", { key: '58454edecbf4b37b707684b01ce3ad0c2ccf2510', class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { key: '7fcb0d3803c8ec19f54b0eceb139f4359fa645f2', ref: el => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview && (h("button", { key: 'e4caa90cebdea8aea3a0feefcd7951cf67e59114', class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { key: '9bc4820fe47f58007570622e4c29ca88381e938a', class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -32,9 +32,9 @@ const StzhImageComparison = class {
         const classes = {
             "stzh-imagecomparison": true,
         };
-        return (h(Host, { key: '5ec8b3486d05bcd51dff6597ed4bddb36a017ed1', "aria-roledescription": this.localization.label, style: {
+        return (h(Host, { key: '8fb01c2b3205504ec3618ebe2827c910e26673f6', "aria-roledescription": this.localization.label, style: {
                 "--exposure": `${this.value.toString()}%`,
-            } }, h("div", { key: 'b399166cc4cd6561cbb8d4ac9a6f0f079fcea0c2', class: classes }, h("div", { key: '952d7d757bdb79321c75de42eaa7c3024412ea7e', class: "stzh-imagecomparison__element" }, h("slot", { key: '8777dd660b8560e85fe6af28483b1d96851f8649', name: "image-before" }), h("slot", { key: '3888e1e7735c0bc7e17976246dc4ca2e5a5e1d43', name: "image-after" }), h("label", { key: '6b8a7e171b03fd209802a5aabbf172b883c29767', class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { key: '28aef0c39454210025e9c0b01cf6748f7ab547d4', class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { key: 'fa306a72f5cfa93c2e9669ae9c287d3cb3bc7f97', class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { key: '0e1704f92d90e62fef416f158eb49e66ac20ccb8', class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { key: '003e717f1e7be16ae23decc09d81f4647effb1a1', class: "stzh-imagecomparison__slider-line" }), h("input", { key: 'f77dadd07395dc77b115186894356e607abf3a80', type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: el => (this.inputElement = el), onInput: this.handleInput })), h("div", { key: '61e45cfe31af58c08481f10f0e8817e38dc78a69', class: "stzh-imagecomparison__hint-wrapper" }, h("span", { key: '301cd69584463420774b18acc7b5d1d71a3d1fde', class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { key: 'c56ffbc3c1ec832f22026741ca5761eba19fb35a', class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
+            } }, h("div", { key: '087dbca7ba2c928be58ab16103acf356d5733fd6', class: classes }, h("div", { key: '11d3bd46be8d3c004e178cc008f8d9d65a3b6fa8', class: "stzh-imagecomparison__element" }, h("slot", { key: '81ec7b34f39e7136e252494ce3028fba2dc268b2', name: "image-before" }), h("slot", { key: '8ee4dae7e23bae9f393052deae2111dd946bb9b5', name: "image-after" }), h("label", { key: '90e07ac71607075db9805d9fab3a2f54f8c66856', class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { key: 'ae11ac3cfad066a765918cf2a6df153cb98f80b2', class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { key: 'bdf91cddd0328eeac357b177eeadf9186224f25d', class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { key: 'db1d2ef2ba4f9c10872aa4e43a8064e0d6960652', class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { key: '2aa22770a38203e1501aef70569cf4a9081c371d', class: "stzh-imagecomparison__slider-line" }), h("input", { key: 'd27fa842febee03709311b90123afcf1208d8a30', type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: el => (this.inputElement = el), onInput: this.handleInput })), h("div", { key: '495532d4297937afd2fd13b3abe739e036b5645d', class: "stzh-imagecomparison__hint-wrapper" }, h("span", { key: 'accd3d11ea0101b1f90ee9bdde6248814cb121b0', class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { key: '5c671703aa0f3741280a068ead4c59a6eb0351a1', class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -216,15 +216,15 @@ const StzhInput = class {
             [`stzh-input--size-${this.size}`]: !!this.size,
             [`stzh-input--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '17df6e3219c089d1791e3533fb099577c892c8c3', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '55d0301064497397505a75f91ec62b0629e03c18', class: classes }, h("label", { key: '3728b2367e14541d4eb9e782af64eeb2d0218047', class: {
+        return (h(Host, { key: '8dd13077004e31ce0b1dd35526325a4f95eb22f4', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '2fe0d07c1049846dfb4f953ad6efb9848e71d253', class: classes }, h("label", { key: '14c4ddc41bce5ab4f53bac0a62a411dbbe4d3f8a', class: {
                 "stzh-input__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '306d38c386af56938121ad68567a2f73d04dff7b', class: "stzh-input__marker" }, h("span", { key: 'bea49dc3d8ab84702852fa199cf3e9ca1f25be65', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '27076ed3f2aaaa7425eb59c139895fdf53f97885', class: "stzh-input__marker" }, h("span", { key: '606e98f4cc0628bc74cf94f7ece7145b9481968d', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '57de6fba296cf9919913b31ddb2be9b111001649', class: "stzh-input__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '1867bde65ba39d6ac0a18f7745796dfc82a5a712', class: "stzh-input__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'a3e047e750630011f3a9ff59689df5f0d25c589f', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
-            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: 'da996df70a5143981754de29594b80f4dcc79ca3', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'd775753c67430cfede5a38faeecca73787ff9f0d', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
+            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: '52c6b561647abbc7bc470aa8084234fc07adb850', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -11,7 +11,7 @@ const StzhInvert = class {
         const classes = {
             "stzh-invert": true,
         };
-        return (h(Host, { key: '4d696348d01af449b42ca1cc0f544fd563e278ba' }, h("div", { key: 'c647f905a8fb82b85c714d40d1eacee0fa978e22', class: classes }, h("slot", { key: 'a8500497b15e8baca5adb2aaa004f1dc0bf9c80f' }))));
+        return (h(Host, { key: '1a6fea0a70eee1cb454c6df90fece14d8eb46b5c' }, h("div", { key: '0a424af14b7eb376d4feb4bc135611c36cefb119', class: classes }, h("slot", { key: 'f4134e880dd7bb7e2f9df1fbc7f228dc4dc82864' }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -128,7 +128,7 @@ const StzhLink = class {
             [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,
             [`stzh-link--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '6242e0e0c5018dce8128cf8b3b889c70882d2716', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '993f76b3eca5840278228ebee5ed438f89f9c060', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed)))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,4 +1,6 @@
-import { r as registerInstance, h, a as Host } from './index-d8813b10.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-d8813b10.js';
+import { h as hasSlot } from './utils-ba72c5a8.js';
+import './string-utils-a9af5463.js';
 
 const stzhLinklistCss = ".sc-stzh-linklist-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-linklist-h,[stzh-hidden].sc-stzh-linklist-h{display:none}.sc-stzh-linklist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-linklist-h *.sc-stzh-linklist,.sc-stzh-linklist-h *.sc-stzh-linklist::before,.sc-stzh-linklist-h *.sc-stzh-linklist::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-linklist-h .has-focus.sc-stzh-linklist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-linklist-h .stzh-fylingfocus-focused.sc-stzh-linklist{outline-style:none !important}.sc-stzh-linklist-h .stzh-fylingfocus-focused.sc-stzh-linklist::-moz-focus-inner{border:0 !important}[padding-bottom=false].sc-stzh-linklist-h .stzh-linklist.sc-stzh-linklist{padding-bottom:0}.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-large);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-linklist.sc-stzh-linklist{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xxsmall);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 600px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-linklist__heading.sc-stzh-linklist{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-linklist__heading.sc-stzh-linklist{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-linklist__heading.sc-stzh-linklist{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--stzh-space-small);overflow:visible}@media screen and (min-width: 600px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-linklist__wrapper.sc-stzh-linklist{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-linklist__wrapper.sc-stzh-linklist{row-gap:var(--stzh-space-xsmall)}}";
 const StzhLinklistStyle0 = stzhLinklistCss;
@@ -15,8 +17,10 @@ const StzhLinklist = class {
         const classes = {
             "stzh-linklist": true,
         };
-        return (h(Host, { key: 'f19b2d717ab47294b13615ebbbd5c287860d5bad', "padding-bottom": this.paddingBottom }, h("div", { key: 'fcb8a67146c4a981534b62aba8bb40582172ce1e', class: classes }, h("div", { key: '9bf487f10a02a80c419d4f83c882f00010385965', class: "stzh-linklist__wrapper" }, this.heading && (h("div", { key: '8dc142caf251cdeddedbc223ddf0994bcc517efd', class: "stzh-linklist__heading" }, h("stzh-heading", { key: 'bbae931c073d7834e00a7b636846a5aeb8f79ac9', level: this.headingLevel }, this.heading))), h("div", { key: 'cc72af1e813ab35d91c52299024f38a389c6ef54', class: "stzh-linklist__list" }, h("stzh-datalist", { key: '3e27fb4f2ed5169cf8cf08a1c09a95080a5d2bb8', verticalGap: "small", items: this.items }))))));
+        const datalistSlotUsed = hasSlot(this.element, "datalist");
+        return (h(Host, { key: '97c323098a64a30f2f4d92a0cd1fdbe15e5c6b57', "padding-bottom": this.paddingBottom }, h("div", { key: 'e8492c3c3a6ad597cc1164e65c3790443bced0af', class: classes }, h("div", { key: 'dd474f5bdfb8af82693dd3b7d5a1fd3a263facbe', class: "stzh-linklist__wrapper" }, this.heading && (h("div", { key: '1cac6ca508a73002f688e57b945c3741ad6988ca', class: "stzh-linklist__heading" }, h("stzh-heading", { key: '475fe8c175795755c910a6a4d5c7d9ea67a82873', level: this.headingLevel }, this.heading))), h("div", { key: '93b2268366ba7ae91e9779db12239bd6d6c27177', class: "stzh-linklist__list" }, datalistSlotUsed ? (h("slot", { name: "datalist" })) : (h("stzh-datalist", { verticalGap: "small", items: this.items })))))));
     }
+    get element() { return getElement(this); }
 };
 StzhLinklist.style = StzhLinklistStyle0;
 

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

@@ -1 +1 @@
-{"file":"stzh-linklist.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,m8HAAm8H,CAAC;AAC59H,2BAAe,eAAe;;MCOjB,YAAY;;;;4BAIwC,GAAG;6BAGjC,IAAI;qBAEa,EAAE;;IAEpD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,QACE,EAAC,IAAI,uEAAiB,IAAI,CAAC,aAAa,IACtC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,wBAAwB,IAClC,qEAAc,KAAK,EAAE,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,OAAO,CAAgB,CACjE,CACP,EACD,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,sEAAe,WAAW,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAkB,CAClE,CACF,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/CMS/stzh-linklist/stzh-linklist.scss?tag=stzh-linklist&encapsulation=scoped","src/components/CMS/stzh-linklist/stzh-linklist.tsx"],"sourcesContent":[":host {\n  &[padding-bottom=\"false\"] {\n    .stzh-linklist {\n      padding-bottom: 0;\n    }\n  }\n}\n\n.stzh-linklist {\n  @include spaceCurve(\"padding-bottom\", \"medium\");\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__heading {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    @include fontSize(\"centi\");\n    @include mq($from: small) {\n      @include fontSize(\"deci\");\n    }\n    @include mq($from: medium) {\n      @include fontSize(\"deca\");\n    }\n    @include mq($from: ultra) {\n      @include fontSize(\"hecto\");\n    }\n  }\n\n  &__wrapper {\n    @include gridGutter;\n    display: grid;\n    row-gap: space(\"small\");\n    @include mq($from: medium) {\n      row-gap: space(\"xsmall\");\n    }\n    overflow: visible;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { StzhDatalistItemEntry } from \"../../..\";\n\n@Component({\n  tag: \"stzh-linklist\",\n  styleUrl: \"stzh-linklist.scss\",\n  scoped: true,\n})\nexport class StzhLinklist {\n  /**Heading for the linklist*/\n  @Prop() heading: string;\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n  /**Whether the component had a padding-bottom or not\n   */\n  @Prop() paddingBottom: boolean = true;\n  /** The items that should be displayed in the link list */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n\n  render() {\n    const classes = {\n      \"stzh-linklist\": true,\n    };\n\n    return (\n      <Host padding-bottom={this.paddingBottom}>\n        <div class={classes}>\n          <div class=\"stzh-linklist__wrapper\">\n            {this.heading && (\n              <div class={\"stzh-linklist__heading\"}>\n                <stzh-heading level={this.headingLevel}>{this.heading}</stzh-heading>\n              </div>\n            )}\n            <div class=\"stzh-linklist__list\">\n              <stzh-datalist verticalGap=\"small\" items={this.items}></stzh-datalist>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-linklist.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,m8HAAm8H,CAAC;AAC59H,2BAAe,eAAe;;MCWjB,YAAY;;;;4BAIwC,GAAG;6BAGjC,IAAI;qBAEa,EAAE;;IAIpD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;QAE3D,QACE,EAAC,IAAI,uEAAiB,IAAI,CAAC,aAAa,IACtC,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,wBAAwB,IAClC,qEAAc,KAAK,EAAE,IAAI,CAAC,YAAY,IAAG,IAAI,CAAC,OAAO,CAAgB,CACjE,CACP,EACD,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,gBAAgB,IACf,YAAM,IAAI,EAAC,UAAU,GAAG,KAExB,qBAAe,WAAW,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAkB,CACvE,CACG,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/CMS/stzh-linklist/stzh-linklist.scss?tag=stzh-linklist&encapsulation=scoped","src/components/CMS/stzh-linklist/stzh-linklist.tsx"],"sourcesContent":[":host {\n  &[padding-bottom=\"false\"] {\n    .stzh-linklist {\n      padding-bottom: 0;\n    }\n  }\n}\n\n.stzh-linklist {\n  @include spaceCurve(\"padding-bottom\", \"medium\");\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__heading {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n    @include fontSize(\"centi\");\n    @include mq($from: small) {\n      @include fontSize(\"deci\");\n    }\n    @include mq($from: medium) {\n      @include fontSize(\"deca\");\n    }\n    @include mq($from: ultra) {\n      @include fontSize(\"hecto\");\n    }\n  }\n\n  &__wrapper {\n    @include gridGutter;\n    display: grid;\n    row-gap: space(\"small\");\n    @include mq($from: medium) {\n      row-gap: space(\"xsmall\");\n    }\n    overflow: visible;\n  }\n}\n","import { Component, h, Host, Element, Prop } from \"@stencil/core\";\nimport { StzhDatalistItemEntry } from \"../../../index\";\nimport { hasSlot } from \"../../../utils/utils\";\n\n/**\n * @slot datalist - Slot for any content\n */\n@Component({\n  tag: \"stzh-linklist\",\n  styleUrl: \"stzh-linklist.scss\",\n  scoped: true,\n})\nexport class StzhLinklist {\n  /**Heading for the linklist*/\n  @Prop() heading: string;\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n  /**Whether the component had a padding-bottom or not\n   */\n  @Prop() paddingBottom: boolean = true;\n  /** The items that should be displayed in the link list */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  render() {\n    const classes = {\n      \"stzh-linklist\": true,\n    };\n\n    const datalistSlotUsed = hasSlot(this.element, \"datalist\");\n\n    return (\n      <Host padding-bottom={this.paddingBottom}>\n        <div class={classes}>\n          <div class=\"stzh-linklist__wrapper\">\n            {this.heading && (\n              <div class={\"stzh-linklist__heading\"}>\n                <stzh-heading level={this.headingLevel}>{this.heading}</stzh-heading>\n              </div>\n            )}\n            <div class=\"stzh-linklist__list\">\n              {datalistSlotUsed ? (\n                <slot name=\"datalist\" />\n              ) : (\n                <stzh-datalist verticalGap=\"small\" items={this.items}></stzh-datalist>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -13,7 +13,7 @@ const StzhList = class {
             "stzh-list": true,
             [`stzh-list--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'cab51fa289bbc227c7194a4f13ce48f0c545ad81' }, h("div", { key: 'e264dea5d6d6adbe0601149d65a840b9e7b8a2f6', class: classes, role: "list" }, h("slot", { key: 'f16515c05d38db80712e8babf923c2726520d3e8' }))));
+        return (h(Host, { key: 'e511ad6ef81dae239c9a505c5d9cae342cabc121' }, h("div", { key: '6a0f2a69d0d893e33ac41f140ec41dd1c4a18180', class: classes, role: "list" }, h("slot", { key: '2a512da2134290f64a5c0a897c50d82a11fec458' }))));
     }
     get element() { return getElement(this); }
 };
@@ -32,7 +32,7 @@ const StzhListItem = class {
         const classes = {
             "stzh-list-item": true,
         };
-        return (h(Host, { key: '0408ba1c3f18268f6779e82bb452c5a3e66bb442' }, h("div", { key: '5a34946519e6575f05485fd81adc554f46d58905', class: classes, role: "listitem" }, h("div", { key: '5d9e5a62edcad27328c257a3c5021177be45be37', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '324c4d9f3f524db31448989e44aa5be2ae3fc93c', class: "stzh-list-item__text" }, h("slot", { key: 'b772e71122b56147bb8be09c6c102e6390f94128' })))));
+        return (h(Host, { key: '7274775b769e0488ed26db096227606566f93206' }, h("div", { key: 'd27ca2b2ae89ea1e7bdbf71a6cb0a6dbc70fdc12', class: classes, role: "listitem" }, h("div", { key: '4d6cd83d53d0ed5ce2742b04e52572b193eda69f', class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { key: '19d277a13d49e00185eaa448b520da6a574d9c5f', class: "stzh-list-item__text" }, h("slot", { key: 'a9f44e32fac76b6b613e4ec473a6165ff0bc1b7d' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -18,7 +18,7 @@ const StzhLoader = class {
             "stzh-loader--hide-label": this.hideLabel,
             [`stzh-loader--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'f928859546fc204dffd6a175cc401ba273697a94' }, h("div", { key: 'c52f0e26667791cc815df1cd1902a743fd08a808', class: classes }, h("div", { key: '0f41109fc78aba388a9937fd37110dc5e552c909', class: "stzh-loader__wrapper" }, h("div", { key: '5b6801fc65c234c806ec388653cd478bc67cf54b', class: "stzh-loader__uil" }, h("div", { key: '9c81f56b552c24497fa42070e9d1ed9ae9e9068f', class: "stzh-loader__ib" }, h("div", { key: 'abe087c982475e2db41696aad2ad3a4fa2333e91', class: "stzh-loader__circle" }, h("div", { key: '029e0669c3449e83bd357d8c853b598cd1c276eb' })), h("div", { key: 'c7dcea928580d1feb9f6cbeac36a023f43078e30', class: "stzh-loader__circle" }, h("div", { key: '12689365fec09cd690c4b1f2b0e037faabe3da6a' })), h("div", { key: 'a541381378c9b6563d7c2def5f79a5015e6f84a6', class: "stzh-loader__circle" }, h("div", { key: '3d33858a510240f5020309dfd49ee5bec1706bff' })), h("div", { key: '7be2a01f27fa9588ad07ed544d9f982fae524018', class: "stzh-loader__circle" }, h("div", { key: 'd164fd797d4dc3f455d542b476c06b6540169947' }))))), h("div", { key: '195321648428d3c9712c6b2eb9b524c9a75f1823', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: '04ea1a87f71fe4a8503f8bf9ca368653744dc61d' }, h("div", { key: '7cdce1ab2258bc9c62a098cc3be51c0cb5b5dc5f', class: classes }, h("div", { key: 'd81308f8188ab0d034f5cef5339a0c4b8c3db75a', class: "stzh-loader__wrapper" }, h("div", { key: '02bca1dc720d074f44c933208bc6d4c018a96886', class: "stzh-loader__uil" }, h("div", { key: '5ec372001f23ea607364d47375d62b4ba3819ca2', class: "stzh-loader__ib" }, h("div", { key: '7ccf1e975dbb1ed8ae25939f0e23174abb4e908d', class: "stzh-loader__circle" }, h("div", { key: '936ed6e5f8910b20f75f75c539f6355c63ab01dc' })), h("div", { key: 'cf050adbcb6e02ca65cf2b8c3456ac424befab62', class: "stzh-loader__circle" }, h("div", { key: '3f1d494ea26dd9bd28a062342f598c9e53df8fa9' })), h("div", { key: '1483f672a399dc28e87da6353f56d3105f9f46ea', class: "stzh-loader__circle" }, h("div", { key: '8645d56dede758369af31706ca0dbc7046b7cc1d' })), h("div", { key: '9ea35595360dd1022e1d6dfb8b3874a3df3d48b8', class: "stzh-loader__circle" }, h("div", { key: 'd702063d6a54bd3de1e369d4698c7ecb092a76ab' }))))), h("div", { key: '229d7fb08cb99144a11da40174af41530fd89c0c', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
     }
     get element() { return getElement(this); }
 };
@@ -50,10 +50,10 @@ const StzhOverlay = class {
         });
     }
     getSiblings() {
-        if (!this.parentElement) {
+        if (!this.containerElement) {
             return [];
         }
-        return Array.from(this.parentElement.children).filter(child => child !== this.element);
+        return Array.from(this.containerElement.children).filter(child => child !== this.element);
     }
     disableSiblings() {
         this.getSiblings().forEach(sibling => {
@@ -83,7 +83,7 @@ const StzhOverlay = class {
         if (!this.stay && this.element.parentElement !== document.body) {
             document.body.appendChild(this.element);
         }
-        this.parentElement = this.element.parentElement;
+        this.containerElement = this.element.parentElement;
     }
     componentDidRender() {
         this.open ? this.dialogShown() : this.dialogHidden();
@@ -105,7 +105,7 @@ const StzhOverlay = class {
             "stzh-overlay": true,
             "stzh-overlay--is-open": this.open,
         };
-        return (h(Host, { key: 'c148ee174114e804d4d3c9072ee33dc48f0a8979' }, h("div", { key: '5cdad3816a30c501023929a7d5b012ca2b7ac29b', class: classes }, h("div", { key: '91a4c1706f8ab761efbeacb1bf677e0f6fe955fd', class: "stzh-overlay__backdrop" }), h("div", { key: 'b9de6d532deeb66bcde5c8320609e6dde3d5f793', class: "stzh-overlay__content" }, h("div", { key: 'a07584a8f910017ba3f8b1e8de9250726bf2f41e', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'cc2c369527c89cfbd1632f277af198b0ec4e2642' }))))));
+        return (h(Host, { key: '81b6944f8c78b47d458051683ed4d5072ea92326' }, h("div", { key: '9ee41160e627e2677839b91fd506df4d389f3657', class: classes }, h("div", { key: '2625e0fd1ee5531db2ef8282e0a16c6fbb1153db', class: "stzh-overlay__backdrop" }), h("div", { key: 'f32bc152846404355aa7af53359806c17fb1e7f4', class: "stzh-overlay__content" }, h("div", { key: '192446b508a56de235af7da51290b081415fe837', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'a3c5dc7aca4b2f2848f655f031e2a766a9b5131f' }))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"stzh-loader.stzh-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx","src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-loader.stzh-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx","src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -14,7 +14,7 @@ const StzhLoadingbar = class {
         const classes = {
             "stzh-loadingbar": true,
         };
-        return (h(Host, { key: '618c7387e09df768a28d68091e7f98839f6ebc42' }, h("div", { key: '751320265f35099e110ac3dccc86c6ff00419c16', class: classes }, h("div", { key: '18b44163ea2c8d8a76aee80ed3f7b1ca6b196099', class: "stzh-loadingbar__text" }, this.label && h("div", { key: '1ae9c5fda3e838309ab595b39e602058e2914496', class: "stzh-loadingbar__label" }, this.label), !this.hidePercent && h("div", { key: 'ce8339abb37ce97317536f9b01ce44186f77d427', class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { key: 'ca315ba421844e27f635691f6444c64c8813ed78', class: "stzh-loadingbar__bar" }, h("div", { key: '7f6fd7e37dfa226f4a0d9493e673255b70d93a85', class: "stzh-loadingbar__bar-inner", style: {
+        return (h(Host, { key: 'bb40226ccf1869772d029417c50f9714434db7c5' }, h("div", { key: 'f506340713b568d21bf99ea5527b6ff265a69f60', class: classes }, h("div", { key: 'e82f55850f4d9518b18cdf5fa3a350fa563d6aa7', class: "stzh-loadingbar__text" }, this.label && h("div", { key: 'dc7185dcaae53cdebf593bc86f72e344312b873d', class: "stzh-loadingbar__label" }, this.label), !this.hidePercent && h("div", { key: 'b1be6845d685aa32d71c8f7e71fbd1cc95a8d928', class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { key: '8b43300e5bc756764366443db4b49fbef1da5395', class: "stzh-loadingbar__bar" }, h("div", { key: '10eac0ce8114115d673a3df112d8929d5613497d', class: "stzh-loadingbar__bar-inner", style: {
                 width: `${this.percent}%`,
             } })))));
     }

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

@@ -10,7 +10,7 @@ const StzhMenu = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '0d031ce5a945732bb65570b4b9b96cfde17a9c35', role: "menu" }, h("div", { key: 'e883158579a69808d31482378e54d66425b4876f', class: "stzh-menu" }, h("slot", { key: '97fd22afb8cee839109a0b80f1f53c622b72f863' }))));
+        return (h(Host, { key: 'd04d40ebc41823a174af2efc78b1370c935c5938', role: "menu" }, h("div", { key: 'cf47f242c5c3dcf12e88861556396d979abbae7c', class: "stzh-menu" }, h("slot", { key: 'b2deb476f4c49900be374b103696f020ede74904' }))));
     }
 };
 StzhMenu.style = StzhMenuStyle0;
@@ -98,7 +98,7 @@ const StzhMenuItem = class {
             [`stzh-menu-item--size-${this.size}`]: !!this.size,
             [`stzh-menu-item--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'a7e424eb94f2897feb0862294c622e7741ca7b97', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '5890cc5dec0b12903ac165230472b93eae8393e4', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return getElement(this); }
 };

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

@@ -41,10 +41,10 @@ const StzhMessage = class {
             "stzh-message--has-close-hidden": this.hideClose,
             [`stzh-message--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '267c7e609677ca54b45142e5f056d28f711cdd9f', hidden: !this.open }, h("div", { key: '56a67b7c79fc1817e396b59e3b4181e0d65f3e24', class: classes }, h("div", { key: '35f09d647f2f25896d32488ec68df4923a6dcea4', class: "stzh-message__content" }, h("div", { key: '5bb473fb68a4485f83a09f5d67d6dba536cc48ae', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: '804e2b7eaa18ae9944830323f69bdf721ee3e8d8', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
+        return (h(Host, { key: 'c0bf908892332ec4fa6442307d7c4e471e845d1e', hidden: !this.open }, h("div", { key: 'a3e09f5723bf00a44e7897218a6180e059ca9c50', class: classes }, h("div", { key: '4f056a8a4e4d8a82c96ba7329d20932c6c75b56e', class: "stzh-message__content" }, h("div", { key: '1b51f1898e57346a34365555a4316f7830627df0', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: 'a7456799e5f7c09bb99c36d4d37405c97fc8c719', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), h("div", { key: 'fbaae9b83b1a6ea0ca6266ff0f5d319d62a50c2a', class: "stzh-message__text-wrapper" }, h("div", { key: 'e3eac8a185112ffc1e045946bbd7c00c6c132dca', class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '3b99a5d3e8ce1eb7fe4be442012c7308033cbacc', class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { key: '216e5dfbd5c74e12d71e3c91380aa3dd00cef027', class: "stzh-message__link" }, h("slot", { key: 'c5b5faa346a93b88474c4d91a62af304a5b80cd9', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '204ff573366df41346ec409165b55aad3b8f25bb', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
+                (this.type === "error" && "warning-filled") })), h("div", { key: '6545f7dc6e470c4bbb7725e8652244ac8f704720', class: "stzh-message__text-wrapper" }, h("div", { key: '006f489c47dad8065ae4e116f261ce8695041133', class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { key: '3d263bb95da6c01d8b6114f8d12a56fee10be42f', class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { key: '49104e4eeae5cc3e23c526d28f8605737ed0e233', class: "stzh-message__link" }, h("slot", { key: '13a40455da1e4818862e2f35a53eab6c295ebad9', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '2fa4dcce37b24494a7690fa5fb083131646fd362', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-microsite-teaserlist.entry.js

@@ -73,7 +73,7 @@ const StzhMicrositeTeaserlist = class {
         const classes = {
             "stzh-microsite-teaserlist": true,
         };
-        return (h(Host, { key: '037ac3c273bd4f15ece3e41a1e2b3f607470429d' }, h("div", { key: '75a12d422b3a13b94bc5f7f18675ea43a73e8c41', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: '1b9893a0d1f054d5f4e594772fc3cf3e04d16dfd', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: 'e1d62163c5d29bb66f28fa1d79f402a2e5863766', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: 'd118f38950ab4fb6a68b31b0988acf6d86177ae0', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: 'fafcc6bdf5c1047d5f48de45f6d05a42fbd198e8', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
+        return (h(Host, { key: '0f36a5370879333ccf565faa37b44406d061c27b' }, h("div", { key: 'e707b0d75ed7ad895040405243a4b34a394c0287', class: classes }, this._tagChips.length > 0 && (h("stzh-chipselect", { key: '2b62f7f91604aa72c428644b6dcb1c6f0451ff92', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), h("stzh-cardlist", { key: '0e44440b6d3f8e87f96cfb51168150f4c0936f05', layout: "teasers" }, this._filteredSlicedItems.map(item => (h("stzh-card", { href: item.link }, item.image && (h("stzh-ratio", { slot: "image" }, h("img", { src: item.image }))), item.title && h("div", { slot: "heading" }, item.title), item.description && h("div", { slot: "content" }, item.description))))), this._showMoreLink && (h("div", { key: '8f0c69df65086857710f1e473050902a0c1fa5bb', class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { key: 'edb1405a4312d0ef9716f09f70a1c9d5889b02a5', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -197,7 +197,7 @@ const StzhMonthyearpicker = class {
         const classes = {
             "stzh-monthyearpicker": true,
         };
-        return (h(Host, { key: '36c159a287ae1cf63e611e5e44a3a3073e3a5386', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c541529d09923b821f2923ec5598a637dea89a87', class: classes }, h("input", { key: '1b184e6567a05691c680292fc2e66ebb2bb2acfc', type: "hidden", name: this.name, value: this.value }), h("div", { key: '6efd5586afe0db082f3a605152c2bfc7d1385ba8', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: 'e5dd68a4aac50e95dacd7bff5098f8cdfb613b41', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: 'f55009ba7e82afc3712469f36fd62873d53c52cc', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '32ebf24f44cff511a430369abc35043cb02d80cb', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+        return (h(Host, { key: '04822e03428a9ba57f2484594ae537732a421430', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '399c3b047e37e7b79e4d36c80bac59b1daf3e13c', class: classes }, h("input", { key: '37999496eed9ade53d9db976f5e3677238617eb8', type: "hidden", name: this.name, value: this.value }), h("div", { key: '57eb470eda690449c0e4bba0e2c8c363f97c01be', class: "stzh-monthyearpicker__wrapper" }, h("stzh-dropdown", { key: 'df1db2053b6595d508d5ae7f345362d7a48e9892', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), h("div", { key: '81c4252357b69e12430114d2dc0ca535571c5fb1', class: "stzh-monthyearpicker__separator" }, "/"), h("stzh-dropdown", { key: '2b48ae397d295a6a6f59c78f820f3d134f235ac1', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-offline-indicator.entry.js

@@ -95,7 +95,7 @@ const StzhOfflineIndicator = class {
         const classes = {
             "stzh-offline-indicator": true,
         };
-        return (h(Host, { key: '1c551c99ced3a627999deddb807874496d6ba0a0', "is-offline": this.isOffline }, h("div", { key: '46adcd961c00db05812bb8f8cf9916fbc69afb38', class: classes })));
+        return (h(Host, { key: '422b6e413556e9f2edb9b452f205ca874275dfca', "is-offline": this.isOffline }, h("div", { key: 'f278d91bd3e5e2ec99e16a9f540288eb55786fa4', class: classes })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-page-skiplinks.entry.js

@@ -27,7 +27,7 @@ const StzhPageSkiplinks = class {
         }
     }
     render() {
-        return (h(Host, { key: '409810be74740c94b493b890d43999a2c4c9b1d6' }, h("div", { key: '90e6ff829f95acaee31fb61e32266737022f36cd', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: '58eec930796c55319ca33753f87a751eda4c368a' }))));
+        return (h(Host, { key: '5046589207deb30c45a78f428eb40b5c5ee32f8d' }, h("div", { key: '8324bdf84d7e0cf527f62755c28f4ab261083c7f', class: "stzh-page-skiplinks", role: "list" }, h("slot", { key: '872ab4ccfaf265204cee9972bb514183bd389488' }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -29,7 +29,7 @@ const StzhPagebottom = class {
             "stzh-pagebottom": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: '86b219e13a6c85c70e372c828e974bdc65e46008' }, h("div", { key: '20bba21d493d56f2eb5a7939bf3caabbb4dbf32f', class: classes }, h("div", { key: 'e81fc4ef130048b7622c84d079b078a12ef130b5', class: "stzh-pagebottom__wrapper" }, h("div", { key: '9187966337d643df6040607705cbd70555205a15', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: '937f70cb75fc59de9d7d057f4694efd2a0fdc8ce', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '31357b288e32c8948844ba7826641937904bac28' }, h("stzh-button", { key: 'b5077a2e0d80c9423e4a121076313ed9c1672c0b', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '9e2fef4459e773003ec4ac3493cf9b9905b4c3a4', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: 'eb8d45284496f544c25b900cc77ce1ac204ea719', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: '97d0740070666ef7b6843220e562cdf78ecccff0', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: '5266eb1985d2c8574ca59a9365f971ac877b9f6c', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: '6c5455890be560cac1382688757fe5f9d21dc073', name: "sticky-actions" }))))));
+        return (h(Host, { key: '39fc15c82ea7a0342ae22995c955fb1aa335cf2f' }, h("div", { key: '3a98fdfddf3a7c8ec913e8d043abb3317960a613', class: classes }, h("div", { key: '7d0b419eb9e3c52033f23036acf768676dcbf7d4', class: "stzh-pagebottom__wrapper" }, h("div", { key: '0e226f0e488f5d47777db162f07642343451e051', class: "stzh-pagebottom__left" }, this.withPrint && (h("div", { key: '59d325ef57c910eed0e4d445859a9bb1c5f00b50', class: "stzh-pagebottom__print" }, h("stzh-print", { key: '0b91e400063e68a8a5693801f425cca292daee59' }, h("stzh-button", { key: 'e7318c4b8436589b7a465da53b36a9ba3a9dbc6b', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (h("div", { key: '62743d682cc6bbb1c1a29abb3d8d045379ff5a7e', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && h("div", { key: '0d02e2741d7ff6733cd66cce07f89a0c21c50d2f', class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { key: '71fe83be58ab15c8cc2140290b2d734a1a6c8431', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), h("div", { key: 'ddd86749013107816d852a7bb9ef6ef06f80f5f4', class: "stzh-pagebottom__sticky-actions" }, h("slot", { key: 'cd63c9c294c612119748bb25668ef1867354e21b', name: "sticky-actions" }))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -17,7 +17,7 @@ const StzhPagecontent = class {
             "stzh-pagecontent--has-aside-left": hasAsideLeft || hasAnchornav,
             "stzh-pagecontent--has-no-aside-left": !hasAsideLeft && !hasAnchornav,
         };
-        return (h(Host, { key: '4d9f85a23cdf707919faf0ca310094e998d9eab3' }, h("div", { key: '229b94d83ac0b07aff14a0c4c8aaecc73bbfbeb1', class: classes }, h("aside", { key: '44b74f2b05773a3fc24366a1d2a4f032b90f111c', class: "stzh-pagecontent__aside-left" }, h("div", { key: 'eca1e7294926c27c021d03cad273a9b3c2962b0d', class: "stzh-pagecontent__anchornav" }, h("slot", { key: 'afa16547566f035323f9032282303585bb2a7fb4', name: "anchornav" })), h("slot", { key: '8b1ac4b7aa2cfe6baf02538bfef73f163c958030', name: "aside-left" })), h("div", { key: '14703cd1bf2a490371046412586ba863ade146c9', class: "stzh-pagecontent__content" }, h("slot", { key: '12ffb5f3807742bbbddd7e70ba94a44e9db91799' })))));
+        return (h(Host, { key: 'e96ce1bc99f2ab5f8f282aec53deaf2908e1f8ba' }, h("div", { key: 'c9a7ca33dbe6a590722a540b9d2bb409fae365ab', class: classes }, h("aside", { key: '1d4f570f023aca62eb5e234261c2184082b66386', class: "stzh-pagecontent__aside-left" }, h("div", { key: 'c7cdda306b9302cb783afa8e065c1f22d1048861', class: "stzh-pagecontent__anchornav" }, h("slot", { key: '9a8c8304c851198acd84f22563a8df02ead9602a', name: "anchornav" })), h("slot", { key: '339ba37df14dacf411362086b38d147e10128047', name: "aside-left" })), h("div", { key: 'a28547b90c50f3149b9725f2129cc791f817f390', class: "stzh-pagecontent__content" }, h("slot", { key: 'deb6bbd7edd0f4749c710ba80a2d4706b8bec795' })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-hero.entry.js

@@ -90,7 +90,7 @@ const StzhPagetitleHero = class {
             "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
             "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
         };
-        return (h(Host, { key: '4092fdf29e81da467a01ce14169ef0a236fa1e81' }, h("div", { key: 'a3a5fa6f25707cfc669ebc2068c7659b2ede3a75', class: classes }, h("div", { key: '44705be15cd02e32cd63089fec428ca89f274c4e', class: "stzh-pagetitle-hero__header" }, h("div", { key: '3368ece2fcb33a65b43ef1d69cac47bfabacd7a6', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: 'e9a10e3a4ea5f63929e4a5b1a36f5d1a70c00744', name: "back-link" })), h("div", { key: 'c469457f5348d0fbaa824bf440078320e8a32596', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: 'fc53ef3d0dcfde0d119e7027b4d9188b900c751c', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: '9ae6ec6a9935a3aa4ffd8053c18664067d6680cb', name: "image" })), h("div", { key: '0f0f8af4c8f2112e2e6c3b93e21271e827366052', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: '58645c0a1a06a5989dcbcceecff1257bf9f014ff', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '4c6eee91b82a84e6aebbf47bd7579a0ed38aac14', name: "tag" })), h("div", { key: '41d1ef58eab92d23dd56280f366372e1f314ad9d', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: '08158f41da5669da5cee4d65f66022220f7c7304', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: 'fcc6c8049f43836f7ed054225c0f32c50161c19c', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '281ce8413afb63bd550af21b02eeed4337c979f9', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '992301a3e044847bc796daa82ffe749c2e9055d0', name: "lead" }), h("div", { key: 'ffb40b5bf0fc473a8b1c3acdd9fe10c699fd5063', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+        return (h(Host, { key: '1657d8a33fc183979dae782a391de0615dfbc4ea' }, h("div", { key: '801b6d1369e98f67c208b0be3fa45c1a176e39d6', class: classes }, h("div", { key: '935eac6988b56b44cfec10230c8bf18bf8ab1e31', class: "stzh-pagetitle-hero__header" }, h("div", { key: '5848e215afaaf040201ed738b39aab2a6f07062c', class: "stzh-pagetitle-hero__back-link" }, h("slot", { key: '24b64fc4a9a4b29ea6b39f08ca702b7809f1e7d5', name: "back-link" })), h("div", { key: '0ddaa2d333f1caeea92c72c5cebd45d0a3b018a2', class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { key: '2b1400b3453a9a095b97ea3fe98a235d19cd5438', class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { key: 'e183ea5dc1b2a58ac728e2cf53a722178134b666', name: "image" })), h("div", { key: '4cc1a4ae81ed787411bc61dcac181be4d6964cd9', class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { key: 'b6a3bb60c5fdac396380bdcec66371bdd832d69b', class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { key: '7006bdba82027e8c87e5284599be85b2ea9eeee9', name: "tag" })), h("div", { key: 'ed97596a9d6efe5efcbae587205abeeaf1250741', class: "stzh-pagetitle-hero__title-parent" }, h("h1", { key: 'ae7f0e566032dc884cde9cfd0952f6604e390fe9', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && h("div", { key: '79de06597cdd88a0dc71551293a4a42efbe0a68e', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { key: '964ca1ab5ab1605759fbcc8a7a7267f70d570a16', class: "stzh-pagetitle-hero__lead" }, h("slot", { key: '669bb2abe3cd5afafe31047ae0642c7ea7f6b33c', name: "lead" }), h("div", { key: '67404442468b2d4a599409fa43271068e958b55f', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pagetitle-home.entry.js

@@ -73,7 +73,7 @@ const StzhPagetitleHome = class {
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (h(Host, { key: 'b638d153bcfb7b4fe87b87b29d7320583775bd46', "has-image": imageSlotUsed }, h("div", { key: '68999d5a6d6ec3470b2d7b90fa7240fb101f8972', class: classes }, h("div", { key: '01da18fe59c497bd145f9d6db14334fc518f9063', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '058edc2961c2f6f186711bdb0904d1998eb0e990', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '925bbfc859262fd6d2ff3ab2130d1e3d82f85b44', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: '6b26d4baaa957d85f8ff20d62380a18734fbbc6a', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '70101199a9e82da6a40dd921a7d961f82b1eb764', name: "image" }))), h("div", { key: 'b0110b6de4093b9f62993ccbf3fcea7adbaf23d9', class: "stzh-pagetitle-home__container" }, h("div", { key: '13050ea6e6d918ef44cf8a9aa7168d9b5619cace', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: 'c324c43fe755b7716d11b1734304656c464f2f50', class: "stzh-pagetitle-home__text" }, h("div", { key: '8368115a3c0629aec8ba5b427aac8fe1b11de5da', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'b03e94e3011103f27a3344e08d0889b2a8f3beba', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '693a60c6dab6698c2ff8c526e8635c2c7b69d371', name: "readspeaker" }))), h("div", { key: 'a4b9dcf0f9f62b21d5077cb070baeefe98a79613', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '42b95509e25a8496ebb19f6e20d48526dc981a41', name: "heading" })), h("div", { key: '9f115338a44493e71aab896f8610962e139cda0e', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: '298604d1fce9000561b0aeac82fa13e84700821f', name: "subheading" }))))))));
+        return (h(Host, { key: '411e43b873355f6833302d3f5c4634656d07674f', "has-image": imageSlotUsed }, h("div", { key: '9ad919e56bffd1e94aae92ef51f9c1fe3b6f9baf', class: classes }, h("div", { key: 'f190aa80becf5e7d4da05629e141341f5487d32b', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: 'e45711502cef5fa846f3d23f3e6f8294a961d8b2', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '4d85c6a810e68f9b4cee772c6dcc39f38d028d5f', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: '6ba98cd456027bd4d149d4b5b00ba5d2ba959c0f', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '4a007d005c3daa04819fb460b8add30a08be6e6c', name: "image" }))), h("div", { key: '48b3c611569615b7c426246ef6c5563fb81f346a', class: "stzh-pagetitle-home__container" }, h("div", { key: 'fee8d4b5883efd42f1b5f2d8da8d8d2345e1ecb0', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '94fdb6c4dc4896572899fd322d85c62fab62441f', class: "stzh-pagetitle-home__text" }, h("div", { key: '6a19a90f9a5265aa920a0bfd4dfa857456a0514c', class: "stzh-pagetitle-home__meta" }, h("div", { key: '117fe57cb0a394ea68123ddb8a2e8758739667e4', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'e851ae904e772763342e5511b3c5c9fd05655cf5', name: "readspeaker" }))), h("div", { key: '8144c982a635ce17edd77f285842ec958cca80d8', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '241266cbb89558ef831725c518ff9d28dcc2058d', name: "heading" })), h("div", { key: 'e0e9cc3e78d2ccc635283eae26867b9002c1a64e', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: '21a58fe263656bc417fe254de48474d47e774227', name: "subheading" }))))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -132,7 +132,7 @@ const StzhPagetitle = class {
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (h(Host, { key: 'dd1dae5e9d6238ffdac9b57bee9028c6ab293a9e' }, h("div", { key: '7692e22c130fb9d768d54c57e56aea0bf5f49e75', class: classes }, h("div", { key: '276b719825766581a9310b2da3f2a8da24fc3ca8', class: "stzh-pagetitle__container" }, h("div", { key: '4edbf3c08ace8896ad635561e564fdfcfe9b0636', class: "stzh-pagetitle__wrapper" }, h("div", { key: 'b0d87b0ff4c587809434424dbe4b5ea820486849', class: "stzh-pagetitle__text" }, h("div", { key: '644c747a9faf9dec771338668bf8b1400ca0f22b', class: "stzh-pagetitle__meta" }, h("div", { key: '308d1af6ca44ed4e529f7b3f2c842c3cc5b433a8', class: "stzh-pagetitle__tag" }, h("slot", { key: '45d323f77a910db3c3333d71a4fca19e9df09de2', name: "tag" })), h("div", { key: '8c5f81a671e670b450efc5c689cba18b4146be34', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '53ca3e154eba02986ebb6a6243b01cdf211ec8e0', name: "readspeaker" }))), this.dateline && h("div", { key: '4c75ea7565d6d7ace87e4d315c21eaf2afad2ee4', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: 'a26fc81a10690ac96d14dd298a195861001feeb4', class: "stzh-pagetitle__heading" }, h("slot", { key: '187a4b8f2c292263c9176fea2fe421d78f43aeeb', name: "heading" })), h("div", { key: '187da73cdbbc557ad0609f83fee27a982b400d90', class: "stzh-pagetitle__lead" }, h("slot", { key: '0209e7b1c9431237292c7d62db87c95f58f89855', name: "lead" }))), h("div", { key: '8e9b473d1b013b1cef1b0df537612568cf0849e8', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '3d360e87e41d8ad5f8cdd292ca4d6d971af1c3fb', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '77fe51987394ce4d61e4b809bf3c1ed3e0231dcf', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '74b4a5695c7fcd3f9dbdd11d2e6eae6f9cd395d6', name: "image" }))), h("div", { key: '70f64853370f205febf986d7b0f405aa5d635371', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '8e45414bd0ef9b94029098bd2998ea3c6fb0c64d', name: "disturber" })))))));
+        return (h(Host, { key: 'e6398f212eed8534ac80eb764a74ebe35d311620' }, h("div", { key: 'c11ed79faf6349fde988346d754d5a2b905309ae', class: classes }, h("div", { key: '5e98c7aba81ccc1b3490cacacfa55af86a900ff5', class: "stzh-pagetitle__container" }, h("div", { key: 'de34dd84cdb5ada82a19191f4437b66a563ea89c', class: "stzh-pagetitle__wrapper" }, h("div", { key: '6fbf0bb4f0abc036927a0b64504ee5ca74ef6be7', class: "stzh-pagetitle__text" }, h("div", { key: 'b550842ed8723ec0502a8a139afcd5809d02176a', class: "stzh-pagetitle__meta" }, h("div", { key: '81ca34cc8ca8372d05050061493cc76551801e0f', class: "stzh-pagetitle__tag" }, h("slot", { key: '096301436aa8ac1f1377ad85169d8c3e04543fe8', name: "tag" })), h("div", { key: '035ef0ac6f8d40859ea758d0d3831cb28877e5bf', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '5186a2037e376aabcfdd35b0b1d59458e3605126', name: "readspeaker" }))), this.dateline && h("div", { key: '23e7b45df5b0d607b247a93ea0dda8e0a28885ea', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '8c6d1f999728d64f92b649a46364b74ee50d6c95', class: "stzh-pagetitle__heading" }, h("slot", { key: '1ac3b98d90c4a11e9e32c6a6b5fe78a2b9c1a0c7', name: "heading" })), h("div", { key: 'fcd54af4d4cab40af4a3dfa7b3f8fb98d6000ecf', class: "stzh-pagetitle__lead" }, h("slot", { key: 'a430bf605d8a66d7fb962bb5a01380053c174451', name: "lead" }))), h("div", { key: '195842563342453fea20960eebcb0af217f5ddac', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '56f5eebb638ece8823e6c73b290f53c84f63015b', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '9bb742947b00b029f25d24d8930c4fb66fd355a8', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: 'f819b8ee87e9fd6a262ad868e5e94406d632ed15', name: "image" }))), h("div", { key: '8f4d70ee60c6da6689192c30be4dd26e11e3fde5', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '5d90b3643bc224571d075f7522d048a5e49bbfdc', name: "disturber" })))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -440,9 +440,9 @@ const StzhPanorama = class {
             text: imageTitle,
         }));
         const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-        return (h(Host, { key: '0239b3952066af59f6041b26236db080a23ccb0a' }, h("div", { key: '0b872046692908dfc813c6f1f800fda8af7d1bea', class: classes }, h("stzh-figure", { key: 'bb84231fee7fea352a8b7962c3d017b8d686e84d', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: 'fdaeae37626d47f8d0ce8cb1a76898ffd3210d7f' }, h("div", { key: '79c759aa7bd07042715f4f5e756654650a3a3a8e', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'f3dd8596b0c6711060d10e1f9d35e903406d7fbf', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '8cb5beee664516811443042edf284e063186fa89', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: 'ec84da9ea267914c07820b2a7d70135a4a760a67', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: '6d1e159ac1458020e7f3cea59cf2714247b0a0ae', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: '7b3453f65caa37af5e6a227209a2043f4c65caaf' }, h("stzh-button", { key: 'af6697075c085f158b92aebbe3839ca7d4ec99a6', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: '4157878c68cacafd246b6eaf01fe27628cf43f7f', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: '816285cf6b9009ac9a8d8b2f0e3b6f96172ee297', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: 'f4058fff62b8f610fdd46437e35cfbbbfc39ed87', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '92f7651f9dfc74c3dd878b8076a18eb11aff67b8', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: '478529431ea9d25f2c930766d0498556e18dc864', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: 'baa80c699ba238e8f3fbce666ac8e7aa3f555b90', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        return (h(Host, { key: 'e13a68f8203db678fd80e60cce44dc39a48933d9' }, h("div", { key: '08fbaddbb670022b80ec87b39d48237c49536c28', class: classes }, h("stzh-figure", { key: '5639e565f54bbb6157b9b850459dd5feb496f942', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, h("stzh-ratio", { key: '1be121e3e99af22ea13b49ea49c18caaff4a3959' }, h("div", { key: '9de470e5f725200a1bf7a7779f9c5a00124a66de', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, h("div", { key: 'ee7d8a3fe2ab75db9af737add03d23493b380d60', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (h("stzh-dropdown", { key: '089090098be70ffad7b374439a9c40c8983d077c', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (h("div", { key: '38edbe69e5beabce1b46457b837c6b396f6a69b3', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), h("div", { key: 'b5527f8113d1827a91de01b827a266afc78eb754', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (h(Fragment, { key: 'ed77a68da8790ed236a6d7bb1d2ce25c18d7411f' }, h("stzh-button", { key: '164c91211f4095aaae34eda2e39e019fe337184e', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), h("stzh-button", { key: 'ae9ddb86cd1354fee6a69b81799ce456d1ae5f86', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), h("stzh-button", { key: 'c4c50653bc80fc34aa4b442d22ba70962fb09cd4', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), h("stzh-button", { key: '9e75f3ff02a72589e74adf79f088af439d6ff6be', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), h("stzh-button", { key: '14b6bd8033a1fd2a1affbc5b9504b35c66406c34', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), h("stzh-button", { key: 'ea00141206e9d5edebd22af1154ebc9c025f3c94', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (h("stzh-button", { key: 'ca33d06c5e1386ba560b2e76f6aa1fc60ac3be71', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
                 ? this.localization.stopOrientation
-                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: '19f6f2154750c9efabcb9edc918b40282766babb', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), h("stzh-button", { key: 'a514f73a90d9e92edb65d50fb168a3f104504531', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
                 ? this.localization.disableFullscreenLabel
                 : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
     }