@oiz/stzh-components 4.12.1-beta1 → 4.12.1

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var utils = require('./utils-BtvTjHH2.js');
-var stzhInputDescription = require('./stzh-input-description-Dbubu75V.js');
+var stzhInputDescription = require('./stzh-input-description-IeBc75qD.js');
 require('./string-utils-BhUgGAtN.js');
 
 const stzhToggleCss = () => `.sc-stzh-toggle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-toggle-h,[stzh-hidden].sc-stzh-toggle-h{display:none}.sc-stzh-toggle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-toggle-h .has-focus.sc-stzh-toggle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle{outline-style:none !important}.sc-stzh-toggle-h .stzh-fylingfocus-focused.sc-stzh-toggle::-moz-focus-inner{border:0 !important}.sc-stzh-toggle-h{--check-size:1.5rem;--track-width:2.75rem;display:inline-block}[disabled].sc-stzh-toggle-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-toggle__marker-text.sc-stzh-toggle{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-toggle__description-wrapper.sc-stzh-toggle{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error60)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-toggle__description-long.sc-stzh-toggle{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-toggle__description-long.sc-stzh-toggle{margin-top:0}}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-button.sc-stzh-toggle{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;user-select:none;cursor:pointer}.stzh-toggle__input.sc-stzh-toggle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black10op);width:var(--track-width);height:1rem;flex-shrink:0;border-radius:0.75rem;display:inline-flex;justify-content:center;align-items:center;transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}@media (forced-colors: active){.stzh-toggle__mark.sc-stzh-toggle{outline:0.125rem solid ButtonBorder;outline-offset:-0.125rem}}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:var(--check-size);height:var(--check-size);border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;transform:translateY(-50%);transition-property:border-color, background-color, transform;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-toggle__check.sc-stzh-toggle{transition-property:transform;border-color:ButtonBorder}}@media (prefers-reduced-motion: reduce){.stzh-toggle__check.sc-stzh-toggle{transition:none}}.stzh-toggle__label.sc-stzh-toggle{--stzh-base-color:initial;display:inline-flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__label-text.sc-stzh-toggle{min-width:0}.stzh-toggle__label.sc-stzh-toggle>.stzh-toggle__description-wrapper.sc-stzh-toggle{flex:0 0 auto;display:inline-flex;align-items:flex-start;margin:0}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-text.sc-stzh-toggle{display:none}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle,.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-long.sc-stzh-toggle{display:inline-flex;align-items:flex-start;margin:0}.stzh-toggle__label.sc-stzh-toggle .stzh-toggle__description-long-button.sc-stzh-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.stzh-toggle__label.sc-stzh-toggle stzh-popover.sc-stzh-toggle .stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-small);display:block;line-height:0;color:var(--stzh-color-primary70)}.stzh-toggle__marker.sc-stzh-toggle{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-old-primary48)}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:SelectedItem}}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary);background-color:var(--stzh-color-primary);transform:translateY(-50%) translateX(calc(var(--track-width) - var(--check-size)))}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:ButtonBorder;background-color:SelectedItem}}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:Highlight;background-color:Highlight}}@media (forced-colors: active){.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle{outline-color:Highlight}}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:Highlight;background-color:Highlight}}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error60)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error60)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black10op)}}@media (forced-colors: none){.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error60)}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey70)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:GrayText}}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle{outline-color:GrayText}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-old-grey13)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:GrayText}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-grey10)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:SelectedItem}}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-old-grey25);background-color:var(--stzh-color-old-grey25)}@media (forced-colors: active){.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:GrayText;background-color:SelectedItem}}`;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var arrow = require('./arrow-D31rkWqT.js');
 var focusTrap_esm = require('./focus-trap.esm-rE3kTCtI.js');
 var utils = require('./utils-BtvTjHH2.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var utils = require('./utils-BtvTjHH2.js');
 require('./string-utils-BhUgGAtN.js');
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var utils$2 = require('./utils-BtvTjHH2.js');
-var stzhInputDescription = require('./stzh-input-description-Dbubu75V.js');
+var stzhInputDescription = require('./stzh-input-description-IeBc75qD.js');
 var _commonjsHelpers = require('./_commonjsHelpers-B83fTs8d.js');
 require('./string-utils-BhUgGAtN.js');
 

package/dist/cjs/stzh-vbz-carousel.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 const stzhVbzCarouselCss = () => `.sc-stzh-vbz-carousel-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-vbz-carousel-h,[stzh-hidden].sc-stzh-vbz-carousel-h{display:none}.sc-stzh-vbz-carousel-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::before,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::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-vbz-carousel-h .has-focus.sc-stzh-vbz-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel{outline-style:none !important}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-carousel-h.sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:16/9;--max-height:42.5rem;--overflow:hidden}@media screen and (min-width: 600px){.sc-stzh-vbz-carousel-h.sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}@media screen and (min-width: 900px){.sc-stzh-vbz-carousel-h.sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}@media screen and (min-width: 1260px){.sc-stzh-vbz-carousel-h.sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:21/9}}`;
 

package/dist/cjs/stzh-vbz-connection-finder.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 const stzhVbzConnectionFinderCss = () => `.sc-stzh-vbz-connection-finder-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-vbz-connection-finder-h,[stzh-hidden].sc-stzh-vbz-connection-finder-h{display:none}.sc-stzh-vbz-connection-finder-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder,.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder::before,.sc-stzh-vbz-connection-finder-h *.sc-stzh-vbz-connection-finder::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-vbz-connection-finder-h .has-focus.sc-stzh-vbz-connection-finder{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-connection-finder-h .stzh-fylingfocus-focused.sc-stzh-vbz-connection-finder{outline-style:none !important}.sc-stzh-vbz-connection-finder-h .stzh-fylingfocus-focused.sc-stzh-vbz-connection-finder::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-connection-finder-h{width:100%}.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-top:var(--stzh-space-xxxlarge)}}.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-connection-finder.sc-stzh-vbz-connection-finder{padding-bottom:var(--stzh-space-xxxlarge)}}`;
 

package/dist/cjs/stzh-vbz-intro.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var utils = require('./utils-BtvTjHH2.js');
 require('./string-utils-BhUgGAtN.js');
 

package/dist/cjs/stzh-vbz-linechip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 // This file is autogenerated. It's used to publish ESM to npm.
 function _typeof(obj) {

package/dist/cjs/stzh-vbz-majorticker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var axios = require('./axios-CBMUcZe0.js');
 var stringUtils = require('./string-utils-BhUgGAtN.js');
 var index$1 = require('./index.cjs.js');

package/dist/cjs/stzh-vbz-ticker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 var axios = require('./axios-CBMUcZe0.js');
 var index$1 = require('./index.cjs.js');
 require('./_commonjsHelpers-B83fTs8d.js');

package/dist/cjs/stzh-visuallyhidden.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 const stzhVisuallyhiddenCss = () => `.sc-stzh-visuallyhidden-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-visuallyhidden-h,[stzh-hidden].sc-stzh-visuallyhidden-h{display:none}.sc-stzh-visuallyhidden-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden,.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden::before,.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden::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-visuallyhidden-h .has-focus.sc-stzh-visuallyhidden{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-visuallyhidden-h .stzh-fylingfocus-focused.sc-stzh-visuallyhidden{outline-style:none !important}.sc-stzh-visuallyhidden-h .stzh-fylingfocus-focused.sc-stzh-visuallyhidden::-moz-focus-inner{border:0 !important}.sc-stzh-visuallyhidden-h{display:contents}.sc-stzh-visuallyhidden-h.sc-stzh-visuallyhidden-s>*:not(:focus):not(:active),.sc-stzh-visuallyhidden-h .sc-stzh-visuallyhidden-s>*:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-visuallyhidden.sc-stzh-visuallyhidden{display:contents}`;
 

package/dist/cjs/stzh-vspace.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 const stzhVspaceCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--v-space:var(--stzh-space-default);--v-around-top:0;--v-around-bottom:0;--v-around:0;display:flex;color:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit}:host ::slotted(*){max-width:100%;padding-top:calc(var(--v-space) * var(--v-around-top));padding-bottom:calc(var(--v-space) * var(--v-around-bottom));margin:0}:host ::slotted(*:not(:last-child)){margin-bottom:calc(var(--v-space) * (1 - var(--v-around)))}:host ::slotted(stzh-show){--show-display:block}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){align-self:stretch;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--v-around-top:1;--v-around-bottom:1;--v-around:1}:host(:empty){height:var(--v-space)}:host([around-top]:not([around-top=false])){--v-around-top:1;--v-around:1}:host([around-bottom]:not([around-bottom=false])){--v-around-bottom:1;--v-around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--v-space:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){:host([curve=tiny]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--v-space:var(--stzh-space-small)}}:host([curve=small]){--v-space:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){:host([curve=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([curve=small]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--v-space:var(--stzh-space-xlarge)}}:host([curve=intermediary]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([curve=intermediary]){--v-space:var(--stzh-space-large)}}:host([curve=regular]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=regular]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=regular]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=regular]){--v-space:var(--stzh-space-xxlarge)}}:host([curve=medium]){--v-space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=medium]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=medium]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){:host([curve=large]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([curve=big]){--v-space:var(--stzh-space-xbig)}}:host([curve=huge]){--v-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=huge]){--v-space:var(--stzh-space-huge)}}:host([curve=section-inner]){--v-space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=section-inner]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=background-section-inner]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=background-section-outer]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xxlarge)}}:host([size=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--v-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--v-space:var(--stzh-space-xsmall)}:host([size=small]){--v-space:var(--stzh-space-small)}:host([size=medium]){--v-space:var(--stzh-space-medium)}:host([size=large]){--v-space:var(--stzh-space-large)}:host([size=xlarge]){--v-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--v-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--v-space:var(--stzh-space-big)}:host([size=xbig]){--v-space:var(--stzh-space-xbig)}:host([size=huge]){--v-space:var(--stzh-space-huge)}:host([size=xhuge]){--v-space:var(--stzh-space-xhuge)}:host([size=none]){--v-space:var(--stzh-space-none)}:host([size=default]){--v-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 900px){:host([size-medium=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){:host([size-medium=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([size-medium=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host([size-medium=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([size-medium=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([size-medium=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 900px){:host([size-medium=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 900px){:host([size-medium=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 900px){:host([size-medium=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 900px){:host([size-medium=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1600px){:host([size-ultra=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){:host([size-ultra=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1600px){:host([size-ultra=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1600px){:host([size-ultra=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1600px){:host([size-ultra=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1600px){:host([size-ultra=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1600px){:host([size-ultra=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1600px){:host([size-ultra=default]){--v-space:var(--stzh-space-default)}}.stzh-vspace{flex-grow:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0;margin:0}.stzh-vspace--border-top{border-top:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--border-bottom{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace{}.stzh-vspace--justify-center{justify-content:center}.stzh-vspace--justify-end{justify-content:flex-end}.stzh-vspace--justify-between{justify-content:space-between}.stzh-vspace--justify-around{justify-content:space-around}.stzh-vspace--justify-evenly{justify-content:space-evenly}.stzh-vspace{}.stzh-vspace--items-end{align-items:flex-end}.stzh-vspace--items-center{align-items:center}.stzh-vspace--items-baseline{align-items:baseline}.stzh-vspace--items-stretch{align-items:stretch}`;
 

package/dist/cjs/stzh-youtube.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-N0ol04NL.js');
+var index = require('./index-Cj3dPOnE.js');
 
 const stzhYoutubeCss = () => `.sc-stzh-youtube-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-youtube-h,[stzh-hidden].sc-stzh-youtube-h{display:none}.sc-stzh-youtube-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-youtube-h *.sc-stzh-youtube,.sc-stzh-youtube-h *.sc-stzh-youtube::before,.sc-stzh-youtube-h *.sc-stzh-youtube::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-youtube-h .has-focus.sc-stzh-youtube{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-youtube-h .stzh-fylingfocus-focused.sc-stzh-youtube{outline-style:none !important}.sc-stzh-youtube-h .stzh-fylingfocus-focused.sc-stzh-youtube::-moz-focus-inner{border:0 !important}@media print{.sc-stzh-youtube-h{display:none}}`;
 

package/dist/collection/components/stzh-message/stzh-message.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * @slot - Slot for description content (use instead of description property)
+ * @slot - Slot for trusted rich description content (only used when the description property is empty)
  * @slot label - Slot for label (use as alternative for property)
  * @slot link - Slot for optional stzh-link element
  */
@@ -8,7 +8,7 @@ export class StzhMessage {
     constructor() {
         /** Label (slot can also be used as alternative) */
         this.label = "";
-        /** Description (use instead of default slot) */
+        /** Plain text description. If set, this takes precedence over the default slot. */
         this.description = "";
         /** Type */
         /** Do not use page-message property. It will be deprecated with the next major release. */
@@ -44,10 +44,10 @@ export class StzhMessage {
             "stzh-message--has-close-hidden": this.hideClose,
             [`stzh-message--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '1c4172135e480d0d2afda795f2449f9c5be956e1', hidden: !this.open }, h("div", { key: 'bc888e9fa8731078610b20e8eccb11eecb899f58', class: classes }, h("div", { key: '210d18d8b5338f62f76293818c7c918fc34a62e2', class: "stzh-message__content" }, h("div", { key: '3c47306853ec2647255a55e683ab77dbb9e02055', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: '4ce1b5863bd6b3b6110b66c9467b6dfd4175e6b8', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
+        return (h(Host, { key: 'f9c8973ef46672059f0dbd9834fe675311720fa7', hidden: !this.open }, h("div", { key: '3f3c43051e4c182b9c690aa8498fecd83858ddc8', class: classes }, h("div", { key: '95c7536c4970b772f3a871afd3f1ef99e11d3a39', class: "stzh-message__content" }, h("div", { key: '767219fa034a217680e6c4108eb211467e6c77b7', class: "stzh-message__icon-wrapper" }, h("stzh-icon", { key: 'a8f6d151aaa264ae3d7a3ac66c81b5396f420c51', 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: 'f008ed9d5f447dc72af294c1f06af8321e39d688', class: "stzh-message__text-wrapper" }, h("div", { key: '34f479496bea45f3357344278b2103cb1d6f0397', class: "stzh-message__label" }, this.label ? h("strong", null, this.label) : h("slot", { name: "label" })), h("div", { key: '05999744bea491a6d3d5b6a778008a3f9b7ae053', class: "stzh-message__description" }, this.description ? (h("stzh-text", { color: "inherit" }, h("p", null, this.description))) : (h("slot", null))), h("div", { key: '37d25836720280eb233660dc1a19b1d23505d3ad', class: "stzh-message__link" }, h("slot", { key: 'f4f2749c1ebb83dcd8d9ea82c900368c3f502016', name: "link" })))), !this.hideClose && (h("stzh-button", { key: 'b7b753e75f4f990d67ee5befc851524bd94e6142', 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: '6939aaddc4549aa9221e8a7ddf887f3f176d14c1', class: "stzh-message__text-wrapper" }, h("div", { key: '6a48a095671aff712fd30284b58b0b11c7b705b9', class: "stzh-message__label" }, this.label ? h("strong", null, this.label) : h("slot", { name: "label" })), h("div", { key: 'a185d89f443a0ad4fc25d28629f28ad3be0d6975', class: "stzh-message__description" }, this.description ? (h("stzh-text", { color: "inherit" }, h("p", null, this.description))) : (h("slot", null))), h("div", { key: '208d811f4ca0f47e488d537b9844ea3eda72fbc7', class: "stzh-message__link" }, h("slot", { key: 'c7c951f18df76bcb3c99f0e63e206c46f35acad9', name: "link" })))), !this.hideClose && (h("stzh-button", { key: '7cec92efb1eb1c97990d0e8290be2166e67068d1', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     static get is() { return "stzh-message"; }
     static get encapsulation() { return "scoped"; }
@@ -95,7 +95,7 @@ export class StzhMessage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Description (use instead of default slot)"
+                    "text": "Plain text description. If set, this takes precedence over the default slot."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/stzh-message/stzh-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-message.js","sourceRoot":"","sources":["../../../../src/components/stzh-message/stzh-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? <strong>{this.label}</strong> : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? (\n                  <stzh-text color=\"inherit\">\n                    <p>{this.description}</p>\n                  </stzh-text>\n                ) : (\n                  <slot></slot>\n                )}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-message.js","sourceRoot":"","sources":["../../../../src/components/stzh-message/stzh-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhMessageCloseEvent, StzhMessageOpenEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\";\n\n/**\n * @slot - Slot for trusted rich description content (only used when the description property is empty)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true,\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Plain text description. If set, this takes precedence over the default slot. */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  /** Do not use page-message property. It will be deprecated with the next major release. */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" | \"page-message\" = \"info\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\",\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  ((this.type === \"info\" || this.type === \"page-message\") && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? <strong>{this.label}</strong> : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? (\n                  <stzh-text color=\"inherit\">\n                    <p>{this.description}</p>\n                  </stzh-text>\n                ) : (\n                  <slot></slot>\n                )}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-message/stzh-message.stories.js

@@ -1,14 +1,19 @@
 import { createComponentStory } from '../../utils/story-utils';
 import readme from './readme.md?raw';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { getComponentByTestId } from '../../../.storybook/utils/component-test-utils';
 
 import { getFigmaLink } from '../../../figma';
 
 const COMPONENT_NAME = 'stzh-message';
 const story = createComponentStory(COMPONENT_NAME);
 
+const MESSAGE_TEST_ID = 'MESSAGE_TEST_ID';
+
 const TEMPLATE = `
-<stzh-message>
-  <stzh-link slot="link">optional link</stzh-link>
+<stzh-message data-testid="${MESSAGE_TEST_ID}">
+  <p>This default slot content is not displayed when the description property is set.</p>
+  <stzh-link slot="link" icon="external-link">optional link</stzh-link>
 </stzh-message>
 `;
 
@@ -38,5 +43,125 @@ export const Default = {
   args: {
     label: 'Message title',
     description: 'Optional description for this message.'
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Assert attributes', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      expect(stzhMessageEl).toHaveAttribute('label', 'Message title');
+      expect(stzhMessageEl).toHaveAttribute('description', 'Optional description for this message.');
+      expect(stzhMessageEl).toHaveAttribute('type', 'info');
+      expect(stzhMessageEl).not.toHaveAttribute('hide-close');
+    });
+
+    await step('Close button is displayed', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const closeButtonEl = stzhMessageEl.querySelector('.stzh-message__close');
+      expect(closeButtonEl).not.toBeNull();
+    });
+
+    await step('Description property wins over default slot', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const descriptionEl = stzhMessageEl.querySelector('.stzh-message__description');
+      expect(descriptionEl).toHaveTextContent('Optional description for this message.');
+      expect(descriptionEl).not.toHaveTextContent('This default slot content is not displayed');
+    });
+
+    await step('Link slot is displayed below the description', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const descriptionEl = stzhMessageEl.querySelector('.stzh-message__description');
+      const linkWrapperEl = stzhMessageEl.querySelector('.stzh-message__link');
+      const linkEl = linkWrapperEl.querySelector('stzh-link');
+
+      expect(linkEl).not.toBeNull();
+      expect(linkEl).toHaveTextContent('optional link');
+      expect(descriptionEl.compareDocumentPosition(linkWrapperEl) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+
+    await step('stzhClose and stzhOpen events are fired with component detail', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const closeButtonEl = stzhMessageEl.querySelector('.stzh-message__close');
+      let eventCloseDetail;
+      let eventOpenDetail;
+
+      stzhMessageEl.addEventListener('stzhClose', (ev) => {
+        eventCloseDetail = ev.detail;
+      });
+      stzhMessageEl.addEventListener('stzhOpen', (ev) => {
+        eventOpenDetail = ev.detail;
+      });
+
+      await userEvent.click(closeButtonEl);
+      expect(eventCloseDetail).toHaveProperty('component', 'stzh-message');
+
+      await waitFor(() => {
+        expect(stzhMessageEl).toHaveAttribute('hidden');
+      });
+
+      await stzhMessageEl.show();
+      expect(eventOpenDetail).toHaveProperty('component', 'stzh-message');
+
+      await waitFor(() => {
+        expect(stzhMessageEl).not.toHaveAttribute('hidden');
+      });
+    });
+  }
+};
+
+const HTML_CONTENT_TEMPLATE = `
+<stzh-message data-testid="${MESSAGE_TEST_ID}">
+  <p>Please correct these form fields:</p>
+  <stzh-list>
+    <stzh-list-item>Email</stzh-list-item>
+    <stzh-list-item>Phone number</stzh-list-item>
+  </stzh-list>
+  <stzh-link slot="link">optional link</stzh-link>
+</stzh-message>
+`;
+
+export const WithHtml = {
+  render: (args) => story(args, HTML_CONTENT_TEMPLATE),
+  args: {
+    label: 'Validation failed',
+    type: 'error',
+    'hide-close': true
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Assert attributes', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      expect(stzhMessageEl).toHaveAttribute('hide-close', 'true');
+      expect(stzhMessageEl).toHaveAttribute('type', 'error');
+    });
+
+    await step('Close button is not displayed', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const closeButtonEl = stzhMessageEl.querySelector('.stzh-message__close');
+      expect(closeButtonEl).toBeNull();
+    });
+
+    await step('Default slot accepts HTML content and custom elements', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const descriptionEl = stzhMessageEl.querySelector('.stzh-message__description');
+      const paragraphEl = descriptionEl.querySelector('p');
+      const listEl = descriptionEl.querySelector('stzh-list');
+      const listItemEls = descriptionEl.querySelectorAll('stzh-list-item');
+
+      expect(paragraphEl).not.toBeNull();
+      expect(paragraphEl).toHaveTextContent('Please correct these form fields:');
+      expect(listEl).not.toBeNull();
+      expect(listItemEls).toHaveLength(2);
+      expect(listItemEls[0]).toHaveTextContent('Email');
+      expect(listItemEls[1]).toHaveTextContent('Phone number');
+    });
+
+    await step('Link slot is displayed below the default slot content', async () => {
+      const stzhMessageEl = await getComponentByTestId(canvasElement, MESSAGE_TEST_ID);
+      const descriptionEl = stzhMessageEl.querySelector('.stzh-message__description');
+      const linkWrapperEl = stzhMessageEl.querySelector('.stzh-message__link');
+      const linkEl = linkWrapperEl.querySelector('stzh-link');
+
+      expect(linkEl).not.toBeNull();
+      expect(linkEl).toHaveTextContent('optional link');
+      expect(descriptionEl.compareDocumentPosition(linkWrapperEl) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
   }
 };

package/dist/components/index.js

@@ -1,5 +1,5 @@
-import { g as globalScripts } from './p-DajXzNIS.js';
-export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './p-DajXzNIS.js';
+import { g as globalScripts } from './p-5QD-jnDI.js';
+export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './p-5QD-jnDI.js';
 export { S as StzhSocialmediastreamItemActionVariant, V as VBZ, t as tc } from './p-uD4ilJut.js';
 
 globalScripts();

package/dist/components/{p-DajXzNIS.js → p-5QD-jnDI.js}

@@ -1,5 +1,5 @@
 const name = "@oiz/stzh-components";
-const version = "4.12.1-beta1";
+const version = "4.12.1";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;
@@ -2374,6 +2374,6 @@ function transformTag(tag) {
 }
 
 export { Fragment as F, H, getAssetPath as a, setNonce as b, setPlatformOptions as c, createEvent as d, Host as e, forceUpdate as f, globalScripts as g, h, readTask as i, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t, writeTask as w };
-//# sourceMappingURL=p-DajXzNIS.js.map
+//# sourceMappingURL=p-5QD-jnDI.js.map
 
-//# sourceMappingURL=p-DajXzNIS.js.map
+//# sourceMappingURL=p-5QD-jnDI.js.map