@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

package/dist/collection/components/stzh-cspace/stzh-cspace.css

@@ -341,35 +341,10 @@
     margin-bottom: var(--stzh-space-large);
   }
 }
+:host ::slotted(*) .section,
+:host ::slotted(.section),
 :host ::slotted(stzh-figure),
-:host ::slotted(stzh-chart) {
-  margin-top: var(--stzh-space-xxlarge);
-  margin-bottom: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-figure),
-:host ::slotted(stzh-chart) {
-    margin-top: var(--stzh-space-xxxlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-figure),
-:host ::slotted(stzh-chart) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-figure),
-:host ::slotted(stzh-chart) {
-    margin-bottom: var(--stzh-space-xxxlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-figure),
-:host ::slotted(stzh-chart) {
-    margin-bottom: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-chart),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
@@ -379,7 +354,11 @@
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-datalist),
+  :host ::slotted(*) .section,
+:host ::slotted(.section),
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart),
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
@@ -388,7 +367,11 @@
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-datalist),
+  :host ::slotted(*) .section,
+:host ::slotted(.section),
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart),
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
@@ -397,7 +380,11 @@
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-datalist),
+  :host ::slotted(*) .section,
+:host ::slotted(.section),
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart),
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
@@ -406,7 +393,11 @@
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-datalist),
+  :host ::slotted(*) .section,
+:host ::slotted(.section),
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart),
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
@@ -414,58 +405,153 @@
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
+:host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+  margin-top: var(--stzh-space-xxxlarge);
+  margin-bottom: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-top: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-top: var(--stzh-space-xbig);
+  }
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-bottom: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) .contextparsys,
+:host ::slotted(*) .section.has-invert {
+    margin-bottom: var(--stzh-space-xbig);
+  }
+}
+:host ::slotted(*) .section.has-invert stzh-invert stzh-container {
+  padding-top: var(--stzh-space-xxlarge);
+  padding-bottom: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
+    padding-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
+    padding-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+:host ::slotted(*) .section.has-sticky {
+  display: contents;
+}
+:host ::slotted(*) .section.has-pagetitle,
+:host ::slotted(stzh-pagetitle),
+:host ::slotted(*) .section.has-table,
 :host ::slotted(stzh-table),
+:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
   margin-top: var(--stzh-space-medium);
   margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-table),
+  :host ::slotted(*) .section.has-pagetitle,
+:host ::slotted(stzh-pagetitle),
+:host ::slotted(*) .section.has-table,
+:host ::slotted(stzh-table),
+:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
     margin-top: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-table),
+  :host ::slotted(*) .section.has-pagetitle,
+:host ::slotted(stzh-pagetitle),
+:host ::slotted(*) .section.has-table,
+:host ::slotted(stzh-table),
+:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
     margin-top: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-table),
+  :host ::slotted(*) .section.has-pagetitle,
+:host ::slotted(stzh-pagetitle),
+:host ::slotted(*) .section.has-table,
+:host ::slotted(stzh-table),
+:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-table),
+  :host ::slotted(*) .section.has-pagetitle,
+:host ::slotted(stzh-pagetitle),
+:host ::slotted(*) .section.has-table,
+:host ::slotted(stzh-table),
+:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
+:host ::slotted(*) .section.has-anchornav,
 :host ::slotted(stzh-anchornav) {
   margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-anchornav) {
+  :host ::slotted(*) .section.has-anchornav,
+:host ::slotted(stzh-anchornav) {
     margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-anchornav) {
+  :host ::slotted(*) .section.has-anchornav,
+:host ::slotted(stzh-anchornav) {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
+:host ::slotted(*) .section.has-actions,
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xxlarge);
 }
+:host ::slotted(*) .section.has-actions[variant=process],
 :host ::slotted(stzh-actions)[variant=process] {
   margin-top: var(--stzh-space-large);
 }
+:host ::slotted(*) .section.has-fieldset,
 :host ::slotted(stzh-fieldset) {
   margin-top: var(--stzh-space-large);
   margin-bottom: var(--stzh-space-large);
 }
+:host ::slotted(*) .section.has-fieldset[legend],
 :host ::slotted(stzh-fieldset)[legend] {
   margin-top: var(--stzh-space-xxlarge);
 }
@@ -473,18 +559,25 @@
 :host ::slotted(stzh-heading[curve=h4] + stzh-datalist) {
   margin-top: 0;
 }
+:host ::slotted(*) .section:first-child,
+:host ::slotted(*) .section[no-cspace-top],
+:host ::slotted(*) .contextparsys:first-child,
+:host ::slotted(*) .contextparsys[no-cspace-top],
 :host ::slotted(:first-child),
-:host ::slotted(:first-child[legend]),
 :host ::slotted([no-cspace-top]) {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
+:host ::slotted(*) .section:last-child,
+:host ::slotted(*) .section[no-cspace-bottom],
+:host ::slotted(*) .contextparsys:last-child,
+:host ::slotted(*) .contextparsys[no-cspace-bottom],
 :host ::slotted(:last-child),
 :host ::slotted([no-cspace-bottom]) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 :host :has(:nth-child(1)[hidden])::slotted(:nth-child(2)) {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 :host :has(:nth-last-child(1)[hidden])::slotted(:nth-last-child(2)) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }

package/dist/collection/components/stzh-datalist/stzh-datalist.css

@@ -97,6 +97,18 @@
   box-sizing: border-box;
 }
 
+:host {
+  --item-label-min-width: 7.5rem;
+}
+@media screen and (min-width: 800px) {
+  :host {
+    --item-label-min-width: 9rem;
+  }
+}
+:host[disable-min-width]:not([disable-min-width=false]) {
+  --item-label-min-width: none;
+}
+
 :host ::slotted(stzh-details),
 .stzh-datalist stzh-details {
   --content-grid-column: 1 / 5;

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

@@ -28,6 +28,7 @@ export class StzhDatalist {
     this.directionLarge = "inherit";
     this.directionUltra = "inherit";
     this.hideBorder = false;
+    this.disableMinWidth = false;
     this.items = [];
     this.currentDirection = undefined;
   }
@@ -196,6 +197,24 @@ export class StzhDatalist {
         "reflect": true,
         "defaultValue": "false"
       },
+      "disableMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable min-width of datalist item"
+        },
+        "attribute": "disable-min-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "items": {
         "type": "string",
         "mutable": false,

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

@@ -55,7 +55,8 @@ Default.args = {
       "label": "Really Long Label",
       "value": "Value 2",
       "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "question-help",
+      "nonInteractive": true
     },
     {
       "label": "Label",

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css

@@ -99,9 +99,10 @@
 
 :host {
   --font-family: var(--stzh-font-family-regular);
-  --font-weight: var( --stzh-font-weight-regular);
+  --font-weight: var(--stzh-font-weight-regular);
   --color: inherit;
   --action-display: block;
+  --label-min-width: var(--item-label-min-width, none);
   display: contents;
 }
 :host[href]:not([href=""]), :host[a11y-expanded], :host[a11y-controls] {
@@ -127,6 +128,21 @@
 .stzh-datalist-item__wrapper {
   flex-grow: 1;
 }
+.stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
+  color: inherit;
+  display: block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font-family: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+}
+.stzh-datalist-item__value.is-button, .stzh-datalist-item__value.is-link, .stzh-datalist-item__label.is-button, .stzh-datalist-item__label.is-link, .stzh-datalist-item__meta.is-button, .stzh-datalist-item__meta.is-link, .stzh-datalist-item__action-list.is-button, .stzh-datalist-item__action-list.is-link {
+  cursor: pointer;
+}
 .stzh-datalist-item__value {
   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));
@@ -141,16 +157,6 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
-.stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
-  display: block;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: none;
-}
 .stzh-datalist-item__value, .stzh-datalist-item__icon {
   color: var(--color);
 }
@@ -170,6 +176,9 @@
   font-style: normal;
   color: var(--stzh-base-lead-color);
 }
+.stzh-datalist-item__label:not(:empty) {
+  min-width: var(--label-min-width);
+}
 .stzh-datalist-item__action-list {
   display: var(--action-display);
   text-align: center;
@@ -177,7 +186,14 @@
 .stzh-datalist-item__action-list:not(:empty) {
   padding-left: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item__action[variant=tertiary] {
+.stzh-datalist-item__action.is-non-interactive {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--stzh-form-input-tiny-height);
+  height: var(--stzh-form-input-tiny-height);
+}
+.stzh-datalist-item__action.is-button[variant=tertiary] {
   --color: inherit;
 }
 .stzh-datalist-item__value, .stzh-datalist-item__icon {

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js

@@ -22,17 +22,29 @@ export class StzhDatalistItem {
     this.target = undefined;
     this.download = undefined;
     this.icon = undefined;
-    this.label = undefined;
-    this.value = undefined;
-    this.meta = undefined;
+    this.label = "";
+    this.value = "";
+    this.meta = "";
     this.hideBorder = false;
     this.a11yExpanded = undefined;
     this.a11yControls = undefined;
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__label", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: "stzh-datalist-item__value", href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__meta", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__label": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: {
+        "stzh-datalist-item__value": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__meta": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
   }
   async connectedCallback() {
     this.datalist = this.element.closest("stzh-datalist");
@@ -66,13 +78,20 @@ export class StzhDatalistItem {
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
       this.renderInner(isButton)
       :
-        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__action-list", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
+        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__action-list": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
       (this.download ?
-        h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" })
+        h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" }))
         :
-          h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
-      h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
-      h("stzh-button", { class: "stzh-datalist-item__action", variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+          h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
+      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
+      h("stzh-button", { class: {
+          "stzh-datalist-item__action": true,
+          "is-button": true
+        }, variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
   }
   static get is() { return "stzh-datalist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -206,7 +225,8 @@ export class StzhDatalistItem {
           "text": "Label"
         },
         "attribute": "label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",
@@ -223,7 +243,8 @@ export class StzhDatalistItem {
           "text": "Value"
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "meta": {
         "type": "string",
@@ -240,7 +261,8 @@ export class StzhDatalistItem {
           "text": "Meta"
         },
         "attribute": "meta",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "hideBorder": {
         "type": "boolean",

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -126,6 +126,17 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
+.stzh-datamessagelist-item__vhidden {
+  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-datamessagelist-item__content {
   display: flex;
   flex-direction: column;

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

@@ -74,7 +74,8 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item": true,
       "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 &&
+    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.unread &&
+      h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       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 &&
@@ -101,7 +102,7 @@ export class StzhDatamessagelistItem {
         "mutable": false,
         "complexType": {
           "original": "StzhDatamessagelistItemLocalizedText",
-          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; }",
+          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; unread: string; }",
           "references": {
             "StzhDatamessagelistItemLocalizedText": {
               "location": "import",

package/dist/collection/components/stzh-datatable/stzh-datatable.css

@@ -117,6 +117,9 @@ stzh-datatable *::before,
 stzh-datatable *::after {
   box-sizing: border-box;
 }
+stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
+  --min-width: none;
+}
 
 .stzh-datatable {
   /* Has sorted */

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Document } from 'flexsearch';
+import { Document } from 'flexsearch/dist/flexsearch.bundle.js';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  *
@@ -54,6 +54,7 @@ export class StzhDatatable {
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.disableMinWidth = false;
     this.rows = [];
     this.columns = [];
     this.query = "";
@@ -314,6 +315,24 @@ export class StzhDatatable {
         "reflect": false,
         "defaultValue": "\"id\""
       },
+      "disableMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable min-width of table"
+        },
+        "attribute": "disable-min-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "rows": {
         "type": "string",
         "mutable": false,

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

@@ -30,6 +30,9 @@ export class StzhDetails {
     this.open = false;
   }
   async openWatcher(newValue) {
+    if (!this.triggerElement) {
+      return;
+    }
     if (this.triggerElement.firstElementChild) {
       const isStzh = isStzhElement(this.triggerElement.firstElementChild);
       this.triggerElement.firstElementChild

package/dist/collection/components/stzh-dialog/stzh-dialog.css

@@ -234,6 +234,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: var(--stzh-space-xsmall);

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

@@ -123,7 +123,7 @@ export class StzhDialog {
     activeDialog = null;
   }
   async componentWillLoad() {
-    this.headingId = `stzh-dialog-label-${dialogCounter}`;
+    this.id = `stzh-dialog-${dialogCounter}`;
     dialogCounter++;
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "dialog");
@@ -166,8 +166,8 @@ export class StzhDialog {
         "stzh-dialog--has-heading": !!this.heading,
         "stzh-dialog--has-close-hidden": this.hideClose,
         [`stzh-dialog--size-${this.size}`]: !!this.size,
-      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? this.headingId : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
-      h("stzh-heading", { id: this.headingId, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
+      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? `${this.id}-heading` : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
+      h("stzh-heading", { id: `${this.id}-heading`, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
       h("button", { class: "stzh-dialog__close-button", onClick: this.handleCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-dialog__close-icon", name: "close" })))))));
   }
   static get is() { return "stzh-dialog"; }

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css

@@ -231,6 +231,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -441,6 +442,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   text-decoration: none;
   outline: none;
   border: none;
@@ -587,6 +589,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: 0.0625rem solid transparent;
   background-color: var(--stzh-color-grey5);
   transition: all var(--stzh-base-transition-animation-speed);