@oiz/stzh-components 2.2.0 → 2.3.0-alpha

package/dist/collection/components/{stzh-contactaddress/stzh-contactaddress.js → stzh-contact/stzh-contact.js}

@@ -5,7 +5,7 @@ function formatTel(tel) {
 }
 /**
  */
-export class StzhContactaddress {
+export class StzhContact {
   constructor() {
     this._numbers = [];
     this._availability = [];
@@ -56,34 +56,34 @@ export class StzhContactaddress {
   render() {
     const hasImage = hasSlot(this.element, "image");
     const classes = {
-      "stzh-contactaddress": true,
-      "stzh-contactaddress--has-image": hasImage,
-      "stzh-contactaddress--has-border": this.withBorder
+      "stzh-contact": true,
+      "stzh-contact--has-image": hasImage,
+      "stzh-contact--has-border": this.withBorder
     };
-    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contactaddress__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contactaddress__wrapper" }, this.mainHeading &&
-      h("stzh-heading", { level: "3", class: "stzh-contactaddress__main-heading", itemprop: (this.type === "Organization" && !this.heading
-          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contactaddress__inner-wrapper" }, h("div", { class: "stzh-contactaddress__info" }, this.heading &&
-      h("stzh-heading", { level: "4", class: "stzh-contactaddress__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h("div", { class: "stzh-contactaddress__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
-      h("div", { class: "stzh-contactaddress__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
-        h("div", { class: "stzh-contactaddress__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contact__wrapper" }, this.mainHeading &&
+      h("stzh-heading", { level: "3", class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
+          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contact__inner-wrapper" }, h("div", { class: "stzh-contact__info" }, this.heading &&
+      h("stzh-heading", { level: "4", class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
+      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
+      h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
+        h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
-        h("span", { class: "stzh-contactaddress__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
-        h("span", { class: "stzh-contactaddress__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contactaddress__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contactaddress__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
-      h("div", { class: "stzh-contactaddress__pobox" }, h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation))), this.availability &&
-      h("div", { class: "stzh-contactaddress__availability" }, this.availabilityTitle &&
-        h("stzh-heading", { level: "4", class: "stzh-contactaddress__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
+        h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
+        h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
+      h("div", { class: "stzh-contact__pobox" }, h("div", { class: "stzh-contact__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation))), this.availability &&
+      h("div", { class: "stzh-contact__availability" }, this.availabilityTitle &&
+        h("stzh-heading", { level: "4", class: "stzh-contact__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
   }
-  static get is() { return "stzh-contactaddress"; }
+  static get is() { return "stzh-contact"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["stzh-contactaddress.scss"]
+      "$": ["stzh-contact.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["stzh-contactaddress.css"]
+      "$": ["stzh-contact.css"]
     };
   }
   static get properties() {
@@ -229,10 +229,10 @@ export class StzhContactaddress {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ContactaddressNumber[] | string",
-          "resolved": "ContactaddressNumber[] | string",
+          "original": "ContactNumber[] | string",
+          "resolved": "ContactNumber[] | string",
           "references": {
-            "ContactaddressNumber": {
+            "ContactNumber": {
               "location": "import",
               "path": "../../index"
             }
@@ -337,10 +337,10 @@ export class StzhContactaddress {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | StzhContactaddressAvailabilityItem[]",
-          "resolved": "StzhContactaddressAvailabilityItem[] | string",
+          "original": "string | StzhContactAvailabilityItem[]",
+          "resolved": "StzhContactAvailabilityItem[] | string",
           "references": {
-            "StzhContactaddressAvailabilityItem": {
+            "StzhContactAvailabilityItem": {
               "location": "import",
               "path": "../../index"
             }

package/dist/collection/components/{stzh-contactaddress/stzh-contactaddress.stories.js → stzh-contact/stzh-contact.stories.js}

@@ -4,8 +4,8 @@ import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
 export default {
-  title: 'Components/Contactaddress',
-  component: 'stzh-contactaddress',
+  title: 'Components/Contact',
+  component: 'stzh-contact',
   parameters: {
     docs: {
       description: {
@@ -14,7 +14,7 @@ export default {
     },
     design: {
       type: 'figma',
-      url: getFigmaLink('contactaddress'),
+      url: getFigmaLink('contact'),
       allowFullscreen: true
     }
   },
@@ -24,13 +24,13 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-contactaddress {...args}></stzh-contactaddress>
+  <stzh-contact {...args}></stzh-contact>
 );
 
-const TemplateWithImageAndAvailability = (args) => (
-  <stzh-contactaddress {...args}>
+const TemplateContactPersonWithImageAndAvailability = (args) => (
+  <stzh-contact {...args}>
     <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
-  </stzh-contactaddress>
+  </stzh-contact>
 );
 
 const numbers = `[
@@ -85,6 +85,7 @@ const availability = `[
 ]`;
 
 export const OrganizationWithPobox = Template.bind({});
+OrganizationWithPobox.storyName = 'Organization With P.O. Box';
 OrganizationWithPobox.args = {
   'with-border': true,
   type: 'Organization',
@@ -137,8 +138,8 @@ MinimalOrganization.args = {
   ]`
 }
 
-export const WithImageAndAvailability = TemplateWithImageAndAvailability.bind({});
-WithImageAndAvailability.args = {
+export const ContactPersonWithImageAndAvailability = TemplateContactPersonWithImageAndAvailability.bind({});
+ContactPersonWithImageAndAvailability.args = {
   type: 'Organization',
   'main-heading': 'City Zürich Organisation',
   street: 'Musterstrasse 1',

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

@@ -125,6 +125,15 @@
     margin-right: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / -2);
   }
 }
+:host ::slotted(*) stzh-container {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  width: 100vw;
+  max-width: 100vw;
+}
 :host ::slotted(*) stzh-section[variant=highlight] {
   --highlight-horizontal-padding: 1.25rem;
 }
@@ -161,7 +170,8 @@
   :host ::slotted(*) stzh-row stzh-section[variant=highlight] {
     left: initial;
     right: initial;
-    margin: initial;
+    margin-left: initial;
+    margin-right: initial;
     width: initial;
     max-width: initial;
   }

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

@@ -1,8 +1,11 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot - Slot for any content
  */
 export class StzhContainer {
+  constructor() {
+    this.inverted = false;
+  }
   render() {
     return (h(Host, null, h("div", { class: "stzh-container" }, h("slot", null))));
   }
@@ -18,4 +21,26 @@ export class StzhContainer {
       "$": ["stzh-container.css"]
     };
   }
+  static get properties() {
+    return {
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether color should be inverted"
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
 }

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

@@ -25,7 +25,7 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-container>
+  <stzh-container {...args}>
     <stzh-text>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</stzh-text>
   </stzh-container>
 );
@@ -33,3 +33,8 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
 };
+
+export const Inverted = Template.bind({});
+Inverted.args = {
+  inverted: true
+};

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,17 +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;
-  font-family: inherit;
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: none;
-}
 .stzh-datalist-item__value, .stzh-datalist-item__icon {
   color: var(--color);
 }
@@ -171,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;
@@ -178,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 {