@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

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

@@ -97,6 +97,14 @@
   box-sizing: border-box;
 }
 
+:host {
+  clear: both;
+}
+:host::after {
+  content: "";
+  display: table;
+  clear: both;
+}
 :host ::slotted(*) stzh-header {
   margin-left: -1.25rem;
   margin-right: -1.25rem;
@@ -125,6 +133,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 +178,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

@@ -97,6 +97,14 @@
   box-sizing: border-box;
 }
 
+:host {
+  clear: both;
+}
+:host::after {
+  content: "";
+  display: table;
+  clear: both;
+}
 :host ::slotted(stzh-input),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(stzh-dropdown),
@@ -341,35 +349,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 +362,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 +375,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 +388,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 +401,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 +413,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 +567,19 @@
 :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;
-}
-:host :has(:nth-child(1)[hidden])::slotted(:nth-child(2)) {
-  margin-top: 0;
-}
-: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,9 +97,21 @@
   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-label-min-width]:not([disable-label-min-width=false]) {
+  --item-label-min-width: none;
+}
+
 :host ::slotted(stzh-details),
 .stzh-datalist stzh-details {
-  --content-grid-column: 1 / 5;
+  --content-grid-column: 1 / 6;
   --content-padding: var(--stzh-space-large) 0 var(--stzh-space-xlarge);
   --content-border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
@@ -131,6 +143,6 @@
   width: 100%;
   display: grid;
   border-collapse: collapse;
-  grid-template-columns: auto minmax(auto, 1fr) auto auto;
+  grid-template-columns: auto auto minmax(auto, 1fr) auto auto;
   align-items: stretch;
 }

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.disableLabelMinWidth = false;
     this.items = [];
     this.currentDirection = undefined;
   }
@@ -196,6 +197,24 @@ export class StzhDatalist {
         "reflect": true,
         "defaultValue": "false"
       },
+      "disableLabelMinWidth": {
+        "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 label for the `horizontal` variant.\n\nIf `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\nIf `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n\nYou can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`."
+        },
+        "attribute": "disable-label-min-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "items": {
         "type": "string",
         "mutable": false,
@@ -213,7 +232,7 @@ export class StzhDatalist {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
+          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
         },
         "attribute": "items",
         "reflect": false,

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

@@ -46,26 +46,39 @@ export const Default = Template.bind({});
 Default.args = {
   items: [
     {
+      "leadingIcon": "calendar",
       "label": "Label",
       "value": "Value 1",
-      "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "delete",
+      "statusLabel": "Status",
+      "statusType": "error"
     },
     {
+      "leadingIcon": "calendar",
       "label": "Really Long Label",
       "value": "Value 2",
-      "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "question-help",
+      "statusLabel": "Status",
+      "statusType": "success"
     },
     {
+      "leadingIcon": "calendar",
       "label": "Label",
-      "value": "Value 3",
-      "meta": "Metainfo"
+      "value": "Value 3 (Link)",
+      "meta": "Metainfo Long",
+      "href": "http://example.com",
     },
     {
+      "leadingIcon": "calendar",
       "label": "Label",
       "value": "Value 4",
       "meta": "Metainfo",
+    },
+    {
+      "leadingIcon": "calendar",
+      "label": "Label",
+      "value": "Value 5",
+      "meta": "Metainfo",
       "icon": "delete"
     }
   ]