@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

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

@@ -1,24 +1,21 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { S as StzhInputDescription } from './stzh-input-description.js';
+import { f as fetchTranslations } from './translation-utils.js';
 import { d as defineCustomElement$5 } from './stzh-chip2.js';
 import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 
-const stzhChipSelectCss = ".sc-stzh-chip-select-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-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}";
+const stzhChipSelectCss = ".sc-stzh-chip-select-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-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{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-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
 
+let chipSelectCounter = 0;
 const StzhChipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /** Data */
-    this.data = [];
     this._data = [];
     this._dataDropdown = [];
-    /** Label */
-    this.label = "";
-    /** Value */
-    this.value = "";
     this.chipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
@@ -33,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") {
@@ -48,24 +57,70 @@ const StzhChipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       };
     });
   }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
   async componentWillLoad() {
+    this.inputId = `stzh-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "chip-select");
+    }
   }
   render() {
+    const descriptionUsed = !!this.description;
+    const descriptionLongUsed = !!this.descriptionLong;
+    const errorUsed = !!this.error;
     const classes = {
-      "stzh-chip-select": true
+      "stzh-chip-select": true,
+      "stzh-chip-select--has-description": descriptionUsed,
+      "stzh-chip-select--has-description-long": descriptionLongUsed,
+      "stzh-chip-select--has-error": errorUsed,
+      "stzh-chip-select--is-invalid": this.invalid,
+      "stzh-chip-select--is-disabled": this.disabled,
+      "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-chip-select__chips", role: "list" }, this._data.map((data) => (h("stzh-chip", { role: "listitem", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, active: this.value === data.value, onClick: () => this.chipClick(data) })))), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox" }, this._data.map((data) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : null, a11yDescribedby: `${this.inputId}-description ${this.a11yDescribedby}`, onClick: () => this.chipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
   }
   get element() { return this; }
   static get watchers() { return {
-    "data": ["dataWatcher"]
+    "data": ["dataWatcher"],
+    "error": ["errorWatcher"]
   }; }
   static get style() { return stzhChipSelectCss; }
-}, [2, "stzh-chip-select", {
+}, [6, "stzh-chip-select", {
+    "localization": [16],
     "data": [1],
+    "name": [513],
     "label": [1],
-    "value": [1]
+    "value": [1],
+    "description": [1],
+    "descriptionLong": [1, "description-long"],
+    "error": [1],
+    "invalid": [516],
+    "required": [516],
+    "disabled": [516],
+    "a11yDescribedby": [1, "a11y-describedby"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-chip2.js

@@ -11,28 +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;
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -69,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() {
@@ -86,7 +77,7 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
-      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
+      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
@@ -106,6 +97,8 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "active": [516],
     "disabled": [516],
     "invert": [516],
+    "a11yLabel": [1, "a11y-label"],
+    "a11yDescribedby": [1, "a11y-describedby"],
     "setFocus": [64]
   }]);
 function defineCustomElement() {

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 };

package/dist/components/stzh-cspace.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhCspaceCss = ".sc-stzh-cspace-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-cspace-h{display:none}.sc-stzh-cspace-h *.sc-stzh-cspace,.sc-stzh-cspace-h *.sc-stzh-cspace::before,.sc-stzh-cspace-h *.sc-stzh-cspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-input,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datepicker,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-dropdown,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-upload,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkbox,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkboxgroup,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radiogroup{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xbig)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1]{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xbig)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions[variant=process]{margin-top:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset[legend]{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-top]{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s>:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-bottom]{margin-bottom:0}.sc-stzh-cspace-h :has(:nth-child(1)[hidden]).sc-stzh-cspace-s>:nth-child(2){margin-top:0}.sc-stzh-cspace-h :has(:nth-last-child(1)[hidden]).sc-stzh-cspace-s>:nth-last-child(2){margin-bottom:0}";
+const stzhCspaceCss = ".sc-stzh-cspace-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-cspace-h{display:none}.sc-stzh-cspace-h *.sc-stzh-cspace,.sc-stzh-cspace-h *.sc-stzh-cspace::before,.sc-stzh-cspace-h *.sc-stzh-cspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-input,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datepicker,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-dropdown,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-upload,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkbox,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkboxgroup,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radiogroup{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions[variant=process]{margin-top:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset[legend]{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-top]{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s>:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-bottom]{margin-bottom:0}.sc-stzh-cspace-h :has(:nth-child(1)[hidden]).sc-stzh-cspace-s>:nth-child(2){margin-top:0}.sc-stzh-cspace-h :has(:nth-last-child(1)[hidden]).sc-stzh-cspace-s>:nth-last-child(2){margin-bottom:0}";
 
 const StzhCspace$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/stzh-datalist.js

@@ -10,25 +10,6 @@ const StzhDatalist$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.stzhItemActionClick = createEvent(this, "stzhItemActionClick", 7);
-    /** Direction */
-    this.direction = "vertical";
-    /** Direction above small breakpoint */
-    this.directionSmall = "horizontal";
-    /** Direction above medium breakpoint  */
-    this.directionMedium = "inherit";
-    /** Direction above large breakpoint  */
-    this.directionLarge = "inherit";
-    /** Direction above ultra breakpoint  */
-    this.directionUltra = "inherit";
-    /** Hide border lines between items */
-    this.hideBorder = false;
-    /**
-     * Items in datalist
-     * Array of objects that must at least include `value` attribute.
-     * Can optionally contain `label`, `meta`, `icon`, `href` attribute:
-     * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2"}]`
-     */
-    this.items = [];
     this._items = [];
     this.actionClick = (originalEvent, item) => {
       this.stzhItemActionClick.emit({
@@ -37,6 +18,13 @@ const StzhDatalist$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         item
       });
     };
+    this.direction = "vertical";
+    this.directionSmall = "horizontal";
+    this.directionMedium = "inherit";
+    this.directionLarge = "inherit";
+    this.directionUltra = "inherit";
+    this.hideBorder = false;
+    this.items = [];
   }
   itemsWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/components/stzh-datamessagelist-item.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './stzh-menu-item2.js';
 import { d as defineCustomElement$3 } from './stzh-popover2.js';
 import { d as defineCustomElement$2 } from './stzh-status2.js';
 
-const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-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-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);display:-ms-flexbox;display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 600px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{-ms-flex-positive:1;flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:inherit;text-decoration:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-primary4)}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{-webkit-line-clamp:1;line-clamp:1}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{-ms-flex-wrap:nowrap;flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);-ms-flex-pack:center;justify-content:center}}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-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-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium);display:-ms-flexbox;display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{-ms-flex-positive:1;flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:inherit;text-decoration:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-primary4)}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{-webkit-line-clamp:1;line-clamp:1}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{-ms-flex-wrap:nowrap;flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);-ms-flex-pack:center;justify-content:center}}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
 
 const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -17,16 +17,6 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.__registerHost();
     this.stzhClick = createEvent(this, "stzhClick", 7);
     this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
-    /** Heading */
-    this.heading = "";
-    /** Whether item should be displayed in unread state */
-    this.unread = false;
-    /** URL the item should link to */
-    this.href = "";
-    /** Description */
-    this.description = "";
-    /** External href */
-    this.externalHref = "";
     this.actionClick = (action, originalEvent) => {
       this.stzhActionClick.emit({
         component: "stzh-datamessagelist-item",
@@ -40,6 +30,16 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends
         originalEvent
       });
     };
+    this.localization = undefined;
+    this.heading = "";
+    this.unread = false;
+    this.href = "";
+    this.description = "";
+    this.externalHref = "";
+    this.loadingStatus = undefined;
+    this.meta = undefined;
+    this.actions = undefined;
+    this.tags = undefined;
   }
   loadingStatusWatcher(newValue) {
     if (typeof newValue === "string") {