@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$9 } from './stzh-badge2.js';
-import { d as defineCustomElement$8 } from './stzh-button2.js';
-import { d as defineCustomElement$7 } from './stzh-chip2.js';
+import { d as defineCustomElement$a } from './stzh-badge2.js';
+import { d as defineCustomElement$9 } from './stzh-button2.js';
+import { d as defineCustomElement$8 } from './stzh-chip2.js';
+import { d as defineCustomElement$7 } from './stzh-clamp2.js';
 import { d as defineCustomElement$6 } from './stzh-icon2.js';
 import { d as defineCustomElement$5 } from './stzh-menu2.js';
 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-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 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)}@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)}}.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 +18,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 +31,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") {
@@ -88,7 +89,7 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends
       "stzh-datamessagelist-item--is-unread": this.unread
     };
     return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
-      h("div", { class: "stzh-datamessagelist-item__description" }, this.description), this._meta && this._meta.length > 0 &&
+      h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, this.externalHref &&
@@ -119,7 +120,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-datamessagelist-item", "stzh-badge", "stzh-button", "stzh-chip", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-status"];
+  const components = ["stzh-datamessagelist-item", "stzh-badge", "stzh-button", "stzh-chip", "stzh-clamp", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-status"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-datamessagelist-item":
       if (!customElements.get(tagName)) {
@@ -128,15 +129,20 @@ function defineCustomElement$1() {
       break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "stzh-clamp":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/stzh-datatable.js

@@ -49,26 +49,6 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /** Label */
-    this.label = "";
-    /** Sort by given column key */
-    this.sortBy = "";
-    /** Sort direction */
-    this.sortDirection = "asc";
-    /** Tokenize type */
-    this.tokenize = "forward";
-    /** ID field */
-    this.idField = "id";
-    /** Rows */
-    this.rows = [];
-    /** Columns */
-    this.columns = [];
-    this.query = "";
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -111,6 +91,20 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.onInputChange = () => {
       this.query = this.input.value;
     };
+    this.localization = undefined;
+    this.label = "";
+    this.sortBy = "";
+    this.sortDirection = "asc";
+    this.tokenize = "forward";
+    this.idField = "id";
+    this.rows = [];
+    this.columns = [];
+    this.query = "";
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   /** Toggle sort by a given column key like when clicking on a column header */
   async toggleSort(columnKey) {

package/dist/components/stzh-datepicker2.js

@@ -15,41 +15,6 @@ const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
-    /**
-     * 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.calendarMin = "";
-    /**
-     * 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.calendarMax = "";
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.calendarIsDateDisabled = () => false;
-    /** Name of the hidden date picker input. */
-    this.name = "";
-    /** Value of hidden date picker input (current selected date in ISO format). */
-    this.value = "";
-    /** Label for input field and popover */
-    this.label = "";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Size variant */
-    this.size = "default";
-    /** Show calendar inline */
-    this.inline = false;
     this.onInputChange = () => {
       const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
       if (this.input.value === "" || parsedDate) {
@@ -80,6 +45,25 @@ const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         this.popover.hide();
       }
     };
+    this.calendarMin = "";
+    this.calendarMax = "";
+    this.calendarIsDateDisabled = () => false;
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.inline = false;
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.buttonLabel = undefined;
   }
   createDateFormatters() {
     if (this.localization) {

package/dist/components/stzh-dialog.js

@@ -19,24 +19,6 @@ const StzhDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.stzhOpen = createEvent(this, "stzhOpen", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Close dialog when pressing ESC */
-    this.closeOnEscapeKey = false;
-    /** Close dialog when clicking outside of it */
-    this.closeOnBackdropClick = false;
-    /** Open status */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Size */
-    this.size = "default";
-    /** Whether to hide close button */
-    this.hideClose = false;
-    /** Heading text */
-    this.heading = "";
-    /** Accessibility role */
-    this.a11yRole = "alertdialog";
-    /** Accessible label for dialog (use if no heading is used) */
-    this.a11yLabel = "";
     this.handleDialogClick = (event) => {
       const target = event.target;
       if (target.dataset.stzhDialogClose) {
@@ -61,6 +43,16 @@ const StzhDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       }
     };
+    this.localization = undefined;
+    this.closeOnEscapeKey = false;
+    this.closeOnBackdropClick = false;
+    this.open = false;
+    this.stay = true;
+    this.size = "default";
+    this.hideClose = false;
+    this.heading = "";
+    this.a11yRole = "alertdialog";
+    this.a11yLabel = "";
   }
   handleOutsideClick(event) {
     if (!this.open || !this.closeOnBackdropClick) {

package/dist/components/stzh-dropdown2.js

@@ -4661,69 +4661,43 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhInit = createEvent(this, "stzhInit", 7);
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
+    this.options = undefined;
+    this.optgroups = undefined;
+    this.items = undefined;
     this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
     this.multiple = false;
-    /** Show inline (auto width) */
     this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
     this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
     this.searchConjunction = "and";
-    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
     this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
     this.openOnFocus = true;
-    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
     this.closeAfterSelect = null;
-    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
     this.load = null;
-    /** Minimum of characters required to execute the `load` function */
     this.minCharacters = 3;
-    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
     this.loadThrottle = 300;
-    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
     this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
     this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
     this.valueField = "value";
-    /** The name of the property to group items by. */
     this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
     this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
     this.optgroupValueField = "value";
-    /** Name of hidden select element */
+    this.lockOptgroupOrder = undefined;
     this.name = "";
-    /** Variant */
     this.variant = "default";
-    /** Size variant */
     this.size = "default";
-    /** Whether the dropdown is disabled */
     this.disabled = false;
-    /** Popover placement */
     this.popoverPlacement = "bottom";
-    /** Label */
     this.label = "";
-    /** Icon (use instead of icon slot) */
     this.icon = "";
-    /** Prevent option search */
     this.noSearch = false;
-    /** Prevent backspace delete */
     this.noBackspaceDelete = false;
-    /** Invalid status */
     this.invalid = false;
-    /** Required status */
     this.required = false;
-    /** Show text in label depending if field is optional/required */
     this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.localization = undefined;
     this.a11yDescribedby = "";
   }
   optionsWatcher(newValue) {
@@ -4824,7 +4798,7 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$
     this.searchFieldWatcher(this.searchField);
     this.errorWatcher(this.error);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'dropdown');
+      this.localization = await fetchTranslations(this.element, "dropdown");
     }
   }
   async componentWillUpdate() {
@@ -5056,6 +5030,12 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$
       tomSelectOptions.items = this._items;
     }
     this.tomSelect = new tomSelect_base(this.select, tomSelectOptions);
+    if (!this.openOnFocus) {
+      // we still want to enable opening the dropdown by click
+      this.tomSelect.control.addEventListener("click", () => {
+        this.tomSelect.open();
+      });
+    }
   }
   disconnectedCallback() {
     if (this.tomSelect) {

package/dist/components/stzh-fieldset.js

@@ -7,13 +7,9 @@ const StzhFieldset$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /** Legend describing the field group inside the fieldset */
     this.legend = "";
-    /** Hide legend to show only for screenreaders */
     this.hideLegend = false;
-    /** Heading level inside legend */
     this.legendLevel = "";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.legendCurve = "auto";
   }
   render() {

package/dist/components/stzh-figure.js

@@ -7,9 +7,7 @@ const StzhFigure$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Caption */
     this.caption = "";
-    /** Copyright */
     this.copyright = "";
   }
   render() {

package/dist/components/stzh-flyingfocus.js

@@ -12,12 +12,6 @@ const StzhFlyingfocus$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
-    this.style = {};
-    this.position = {};
-    this.enabled = false;
-    this.visible = false;
-    this.helper = false;
-    this.moving = false;
     this.container = document.body;
     this.previousTargetRect = null;
     this.repositionElement = () => {
@@ -43,6 +37,12 @@ const StzhFlyingfocus$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
       this.repositionElement();
     };
+    this.style = {};
+    this.position = {};
+    this.enabled = false;
+    this.visible = false;
+    this.helper = false;
+    this.moving = false;
   }
   handleKeydown(e) {
     // Show animation only upon Tab or Arrow keys press.

package/dist/components/stzh-footer.js

@@ -11,10 +11,6 @@ const StzhFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Footer variant */
-    this.variant = "default";
-    /** Main URL for shortlinks */
-    this.mainUrl = "https://stadt-zuerich.ch";
     this.init = () => {
       const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
       const links = this.element.querySelectorAll('stzh-link[slot="link"]');
@@ -27,6 +23,10 @@ const StzhFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         link.setAttribute("role", "listitem");
       });
     };
+    this.copyright = undefined;
+    this.variant = "default";
+    this.mainUrl = "https://www.stadt-zuerich.ch";
+    this.localization = undefined;
   }
   async componentWillLoad() {
     if (typeof this.copyright === "undefined") {

package/dist/components/stzh-ghettobox2.js

@@ -13,22 +13,6 @@ const StzhGhettobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.stzhOpen = createEvent(this, "stzhOpen", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Overwrite hidden h1 title */
-    this.hiddenTitle = "";
-    /** Main title */
-    this.mainTitle = "";
-    /** Description */
-    this.description = "";
-    /**
-     * Name of cookie to compare its value with set `publishDate`
-     * to determine if ghettobox was already closed before by the user.
-     * If empty (""), no check is done and ghettobox
-     * will always be shown again after a refresh.
-     * Cookie name will be prefixed with `stzh-components-ghettobox-close-time`.
-     */
-    this.closeTimeKey = "global-alert";
-    /** Open state */
-    this.open = true;
     this.onCloseButtonClick = () => {
       this.hide();
     };
@@ -44,6 +28,13 @@ const StzhGhettobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       }
     };
+    this.hiddenTitle = "";
+    this.mainTitle = "";
+    this.description = "";
+    this.publishDate = undefined;
+    this.closeTimeKey = "global-alert";
+    this.localization = undefined;
+    this.open = true;
   }
   publishDateWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/components/stzh-header.js

@@ -8,17 +8,11 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Portal link (for logo) */
-    this.href = "https://stadt-zuerich.ch";
-    /**
-     * Prevent creating a appnav placeholder element
-     * with the size of appnav inside header parent element.
-     * This prevents the fixed appnav to overlap
-     * content at the end on mikro breakpoint,
-     * but could lead to problems with certain layouts.
-     */
+    this.href = "https://www.stadt-zuerich.ch";
     this.preventAppnavPlaceholder = false;
     this.hideLogo = false;
+    this.paddingTop = undefined;
+    this.metabarTransform = undefined;
     this.sticky = false;
     this.stickyClosing = false;
     this.stickyMetabar = false;

package/dist/components/stzh-heading2.js

@@ -6,11 +6,8 @@ const StzhHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** Heading level */
     this.level = "1";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
     this.curve = "auto";
-    /** With border bottom separator */
     this.withBorder = false;
   }
   render() {

package/dist/components/stzh-hspace.js

@@ -6,23 +6,14 @@ const StzhHspace$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Type of curve */
     this.curve = "none";
-    /** Type of size */
     this.size = "inherit";
-    /** Type of size above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Type of size above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Type of size above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Type of size above ultra breakpoint  */
     this.sizeUltra = "inherit";
-    /** Alignment */
     this.justify = "start";
-    /** Apply spacing to slotted elements */
     this.around = false;
-    /** Add border */
     this.border = "none";
   }
   render() {