@oiz/stzh-components 2.0.0 → 2.1.0-alpha

package/dist/components/stzh-badge2.js

@@ -6,9 +6,7 @@ const StzhBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** Text content of the badge */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

package/dist/components/stzh-button2.js

@@ -3,7 +3,7 @@ import { h as hasSlot } from './utils.js';
 import { d as defineCustomElement$2 } from './stzh-badge2.js';
 import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
-const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:inline-block;border-radius:var(--stzh-button-border-radius)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:var(--stzh-space-xxsmall) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);height:var(--height);border-radius:var(--stzh-button-border-radius)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{white-space:nowrap}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey5)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey5)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
+const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:inline-block;border-radius:var(--stzh-button-border-radius)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:var(--stzh-space-xxsmall) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{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;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);height:var(--height);border-radius:var(--stzh-button-border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{white-space:nowrap}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey5)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey5)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
 
 const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,50 +12,6 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /** Display a badge aligned to button or icons */
-    this.badge = "";
-    /** Badge type */
-    this.badgeType = "default";
-    /** Badge position */
-    this.badgePosition = "button";
-    /** Whether badge should be displayed empty */
-    this.badgeEmpty = false;
-    /** Whether the button is full width */
-    this.fullwidth = false;
-    /** Size variant */
-    this.size = "default";
-    /** Text alignment */
-    this.textAlign = "default";
-    /** Variant style */
-    this.variant = "default";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Checked status (if type is radio) */
-    this.checked = false;
-    /** The name of the input element (if type is radio) */
-    this.name = "";
-    /** The value of the input element (if type is radio) */
-    this.value = "";
-    /** `href` if the button should be used as link  */
-    this.href = "";
-    /** Target if the button is used as link (if `href` used)  */
-    this.target = "";
-    /** Type of the button */
-    this.type = "button";
-    /** Whether the button is disabled */
-    this.disabled = false;
-    /** Whether the button is active */
-    this.active = false;
-    /** Label */
-    this.label = "";
-    /** Effect/Animation used */
-    this.effect = "default";
-    /** Whether only an icon is used inside the button */
-    this.iconOnly = false;
-    /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -95,6 +51,29 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         event.preventDefault();
       }
     };
+    this.badge = "";
+    this.badgeType = "default";
+    this.badgePosition = "button";
+    this.badgeEmpty = false;
+    this.fullwidth = false;
+    this.size = "default";
+    this.textAlign = "default";
+    this.variant = "default";
+    this.icon = "";
+    this.iconPosition = "left";
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.target = "";
+    this.type = "button";
+    this.disabled = false;
+    this.active = false;
+    this.label = "";
+    this.effect = "default";
+    this.iconOnly = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus button */
   async setFocus() {
@@ -119,10 +98,10 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
       "stzh-button": true,
-      "stzh-button--fullwidth": this.fullwidth,
       "stzh-button--has-icon": iconUsed,
       "stzh-button--has-icon-only": this.iconOnly,
       "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-fullwidth": this.fullwidth,
       "stzh-button--is-disabled": this.disabled,
       "stzh-button--is-active": this.active,
       [`stzh-button--effect-${this.effect}`]: !!this.effect,

package/dist/components/stzh-calendar2.js

@@ -236,30 +236,6 @@ const StzhCalendar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
-    this.value = "";
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.min = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.max = "";
-    /**
-     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
-     * Default is Monday.
-     */
-    this.firstDayOfWeek = DaysOfWeek.Monday;
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.isDateDisabled = () => false;
-    this.activeFocus = false;
-    this.focusedDay = new Date();
     // private focusedDayNode: HTMLButtonElement
     this.initialTouchX = null;
     this.initialTouchY = null;
@@ -371,6 +347,14 @@ const StzhCalendar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         setTimeout(() => element.focus(), 0);
       }
     };
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.firstDayOfWeek = DaysOfWeek.Monday;
+    this.localization = undefined;
+    this.isDateDisabled = () => false;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
   }
   createDateFormatters() {
     if (this.localization) {

package/dist/components/stzh-card-list.js

@@ -13,13 +13,6 @@ const StzhCardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.stzhCollapseAll = createEvent(this, "stzhCollapseAll", 7);
-    /** Whether collapse/expand toggle link */
-    this.showToggleLink = false;
-    /** Whether sorting should be enabled */
-    this.sortableEnabled = false;
-    /** HTML attribute that is used by the `toArray()` of sortable method */
-    this.sortableDataIdAttribute = "data-id";
-    this.allCollapsed = false;
     this.collapseClick = () => {
       const cards = Array.from(this.element.querySelectorAll("stzh-card"));
       cards.forEach(card => {
@@ -53,6 +46,11 @@ const StzhCardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       }
       return clonedElement;
     };
+    this.localization = undefined;
+    this.showToggleLink = false;
+    this.sortableEnabled = false;
+    this.sortableDataIdAttribute = "data-id";
+    this.allCollapsed = false;
   }
   collapseListener() {
     this.updateCollapsedState();

package/dist/components/stzh-card.js

@@ -21,56 +21,7 @@ const StzhCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhSubtitleClick = createEvent(this, "stzhSubtitleClick", 7);
     this.stzhStarClick = createEvent(this, "stzhStarClick", 7);
     this.stzhHeaderActionClick = createEvent(this, "stzhHeaderActionClick", 7);
-    /** Whether card is collapsed or not */
-    this.collapsed = false;
-    /** Whether card was starred */
-    this.starred = false;
-    /**
-     * Whether card star is displayed (with tooltip and menu-item in mobile popover).
-     * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).
-     */
-    this.starrable = false;
-    /** Whether card is selectable */
-    this.selectable = false;
-    /** Whether card is checked (if card is selectable) */
-    this.checked = false;
-    /** The name of the input element (if card is selectable) */
-    this.name = "";
-    /** The value of the input element (if card is selectable) */
-    this.value = "";
-    /** Whether the element is disabled or not (if card is selectable) */
-    this.disabled = false;
-    /** Heading */
-    this.heading = "";
-    /** Subtitle */
-    this.subtitle = "";
     this._subtitles = [];
-    /** Card header actions */
-    this.headerActions = [];
-    /**
-     * Card footer actions.
-     * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.
-     * You can listen to clicks with the `stzhActionClick` event.
-     */
-    this.footerActions = [];
-    /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
-    this.subtitleInteractive = false;
-    /**
-     * Whether sorting should be disabled.
-     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
-     */
-    this.sortableDisabled = false;
-    /** Whether card is collapsible */
-    this.collapsible = false;
-    /** Whether to hide header separation border */
-    this.hideHeaderBorder = false;
-    /** Whether to hide footer separation border */
-    this.hideFooterBorder = false;
-    /**
-     * Whether movement menu items should be shown.
-     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
-     */
-    this.hideMovementActions = false;
     this.nodeChange = (entries) => {
       let changeInSlot = false;
       entries.forEach((entry) => {
@@ -171,6 +122,25 @@ const StzhCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
     };
+    this.localization = undefined;
+    this.collapsed = false;
+    this.starred = false;
+    this.starrable = false;
+    this.selectable = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.disabled = false;
+    this.heading = "";
+    this.subtitle = "";
+    this.headerActions = [];
+    this.footerActions = [];
+    this.subtitleInteractive = false;
+    this.sortableDisabled = false;
+    this.collapsible = false;
+    this.hideHeaderBorder = false;
+    this.hideFooterBorder = false;
+    this.hideMovementActions = false;
   }
   handleResize() {
     if (this.debounceResize) {

package/dist/components/stzh-cell.js

@@ -7,19 +7,12 @@ const StzhCell$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /** Default span of each cell */
     this.span = 12;
-    /** Default span of each cell above small breakpoint */
     this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
     this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
     this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
     this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
     this.justifySelf = "auto";
-    /** Control how cells items are positioned along a container's cross axis */
     this.alignSelf = "auto";
   }
   render() {

package/dist/components/stzh-checkbox.js

@@ -20,24 +20,6 @@ const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Whether the checkbox is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -71,6 +53,19 @@ const StzhCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.showMarker = false;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

package/dist/components/stzh-checkboxgroup.js

@@ -13,23 +13,8 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   constructor() {
     super();
     this.__registerHost();
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Select a checkbox by value */
-    this.value = "";
     this._value = [];
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked checkbox elements (readonly) */
-    this.checkedCheckbox = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
       this.updateCheckboxesProperty("a11y-describedby", `${this.checkboxgroupId}-description`);
@@ -39,6 +24,20 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.watchInvalid(this.invalid);
       this.watchShowMarker(this.showMarker);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedCheckbox = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateCheckboxesProperty("name", newValue);
@@ -83,6 +82,14 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     if (event.detail.checked) {
       this._value.push(event.detail.value);
@@ -94,7 +101,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   }
   updateCheckboxesProperty(prop, value) {
     this.checkboxes.forEach((checkbox) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         checkbox[camelCase(prop)] = value;
       }
     });
@@ -106,6 +113,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   async componentWillLoad() {
     this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'checkboxgroup');
     }
@@ -157,7 +165,8 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "invalid": ["watchInvalid"],
     "showMarker": ["watchShowMarker"],
     "value": ["watchValue"],
-    "error": ["errorWatcher"]
+    "error": ["errorWatcher"],
+    "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
   }; }
   static get style() { return stzhCheckboxgroupCss; }
 }, [6, "stzh-checkboxgroup", {
@@ -174,7 +183,7 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "descriptionLong": [1, "description-long"],
     "error": [1],
     "checkedCheckbox": [16],
-    "preventUpdateProperties": [16]
+    "preventUpdateProperties": [1, "prevent-update-properties"]
   }, [[0, "stzhChange", "onChange"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-chip-select.js

@@ -14,22 +14,8 @@ const StzhChipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     super();
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /** Data */
-    this.data = [];
     this._data = [];
     this._dataDropdown = [];
-    /** Label */
-    this.label = "";
-    /** Value */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.chipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
@@ -44,6 +30,18 @@ const StzhChipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         value: this.value
       });
     };
+    this.localization = undefined;
+    this.data = [];
+    this.name = undefined;
+    this.label = "";
+    this.value = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.disabled = false;
+    this.a11yDescribedby = "";
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/components/stzh-chip2.js

@@ -11,30 +11,6 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhRemove = createEvent(this, "stzhRemove", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Label */
-    this.label = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Whether remove button should be shown */
-    this.removable = false;
-    /** Variant */
-    this.variant = "tag";
-    /** Size */
-    this.size = "default";
-    /** Type */
-    this.type = "default";
-    /** Counter */
-    this.counter = "";
-    /** Label of remove button for screenreaders */
-    this.removeLabel = "";
-    /** Active */
-    this.active = false;
-    /** Disabled */
-    this.disabled = false;
-    /** Invert (only available for tag variant) */
-    this.invert = false;
-    /** Id for element which describes the button */
-    this.a11yDescribedby = "";
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -71,6 +47,19 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         originalEvent: event
       });
     };
+    this.label = "";
+    this.icon = "";
+    this.removable = false;
+    this.variant = "tag";
+    this.size = "default";
+    this.type = "default";
+    this.counter = "";
+    this.removeLabel = "";
+    this.active = false;
+    this.disabled = false;
+    this.invert = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus menu item */
   async setFocus() {

package/dist/components/stzh-clamp.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhClamp extends Components.StzhClamp, HTMLElement {}
+export const StzhClamp: {
+  prototype: StzhClamp;
+  new (): StzhClamp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-clamp.js

@@ -0,0 +1,6 @@
+import { S as StzhClamp$1, d as defineCustomElement$1 } from './stzh-clamp2.js';
+
+const StzhClamp = StzhClamp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhClamp, defineCustomElement };

package/dist/components/stzh-clamp2.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stzhClampCss = ".sc-stzh-clamp-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-clamp-h{display:none}.sc-stzh-clamp-h *.sc-stzh-clamp,.sc-stzh-clamp-h *.sc-stzh-clamp::before,.sc-stzh-clamp-h *.sc-stzh-clamp::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-clamp-h{--lines:1;width:100%;color:inherit}[lines=\"1\"].sc-stzh-clamp-h{--lines:1}[lines=\"2\"].sc-stzh-clamp-h{--lines:2}[lines=\"3\"].sc-stzh-clamp-h{--lines:3}[lines=\"4\"].sc-stzh-clamp-h{--lines:4}[lines=\"5\"].sc-stzh-clamp-h{--lines:5}@media screen and (min-width: 600px){[lines-small=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 600px){[lines-small=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 600px){[lines-small=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 600px){[lines-small=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 600px){[lines-small=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 800px){[lines-smallheader=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 800px){[lines-smallheader=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 800px){[lines-smallheader=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 800px){[lines-smallheader=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 800px){[lines-smallheader=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1024px){[lines-medium=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1024px){[lines-medium=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1024px){[lines-medium=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1024px){[lines-medium=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1024px){[lines-medium=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1260px){[lines-large=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1260px){[lines-large=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1260px){[lines-large=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1260px){[lines-large=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1260px){[lines-large=\"5\"].sc-stzh-clamp-h{--lines:5}}@media screen and (min-width: 1440px){[lines-ultra=\"1\"].sc-stzh-clamp-h{--lines:1}}@media screen and (min-width: 1440px){[lines-ultra=\"2\"].sc-stzh-clamp-h{--lines:2}}@media screen and (min-width: 1440px){[lines-ultra=\"3\"].sc-stzh-clamp-h{--lines:3}}@media screen and (min-width: 1440px){[lines-ultra=\"4\"].sc-stzh-clamp-h{--lines:4}}@media screen and (min-width: 1440px){[lines-ultra=\"5\"].sc-stzh-clamp-h{--lines:5}}.stzh-clamp.sc-stzh-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);line-clamp:var(--lines);overflow:hidden}";
+
+const StzhClamp = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.lines = 1;
+    this.linesSmall = 0;
+    this.linesMedium = 0;
+    this.linesLarge = 0;
+    this.linesUltra = 0;
+  }
+  render() {
+    const classes = {
+      "stzh-clamp": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get style() { return stzhClampCss; }
+}, [6, "stzh-clamp", {
+    "lines": [514],
+    "linesSmall": [514, "lines-small"],
+    "linesMedium": [514, "lines-medium"],
+    "linesLarge": [514, "lines-large"],
+    "linesUltra": [514, "lines-ultra"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-clamp"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhClamp);
+      }
+      break;
+  } });
+}
+
+export { StzhClamp as S, defineCustomElement as d };