@oiz/stzh-components 2.3.0-alpha → 2.3.0-alpha2

package/dist/collection/assets/icons/mono/calculator.svg

@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2688_137326)">
+<path d="M16.25 4.50006V6.00006M5 0.750061H20C20.4142 0.750061 20.75 1.08585 20.75 1.50006V22.5001C20.75 22.9143 20.4142 23.2501 20 23.2501H5C4.58579 23.2501 4.25 22.9143 4.25 22.5001V1.50006C4.25 1.08585 4.58579 0.750061 5 0.750061ZM9.125 20.0626C9.125 20.3732 8.87316 20.6251 8.5625 20.6251C8.25184 20.6251 8 20.3732 8 20.0626C8 19.7519 8.25184 19.5001 8.5625 19.5001C8.87316 19.5001 9.125 19.7519 9.125 20.0626ZM13.0625 20.0626C13.0625 20.3732 12.8107 20.6251 12.5 20.6251C12.1893 20.6251 11.9375 20.3732 11.9375 20.0626C11.9375 19.7519 12.1893 19.5001 12.5 19.5001C12.8107 19.5001 13.0625 19.7519 13.0625 20.0626ZM17 20.0626C17 20.3732 16.7482 20.6251 16.4375 20.6251C16.1268 20.6251 15.875 20.3732 15.875 20.0626C15.875 19.7519 16.1268 19.5001 16.4375 19.5001C16.7482 19.5001 17 19.7519 17 20.0626ZM9.125 15.9376C9.125 16.2482 8.87316 16.5001 8.5625 16.5001C8.25184 16.5001 8 16.2482 8 15.9376C8 15.6269 8.25184 15.3751 8.5625 15.3751C8.87316 15.3751 9.125 15.6269 9.125 15.9376ZM13.0625 15.9376C13.0625 16.2482 12.8107 16.5001 12.5 16.5001C12.1893 16.5001 11.9375 16.2482 11.9375 15.9376C11.9375 15.6269 12.1893 15.3751 12.5 15.3751C12.8107 15.3751 13.0625 15.6269 13.0625 15.9376ZM17 15.9376C17 16.2482 16.7482 16.5001 16.4375 16.5001C16.1268 16.5001 15.875 16.2482 15.875 15.9376C15.875 15.6269 16.1268 15.3751 16.4375 15.3751C16.7482 15.3751 17 15.6269 17 15.9376ZM9.125 11.8126C9.125 12.1232 8.87316 12.3751 8.5625 12.3751C8.25184 12.3751 8 12.1232 8 11.8126C8 11.5019 8.25184 11.2501 8.5625 11.2501C8.87316 11.2501 9.125 11.5019 9.125 11.8126ZM13.0625 11.8126C13.0625 12.1232 12.8107 12.3751 12.5 12.3751C12.1893 12.3751 11.9375 12.1232 11.9375 11.8126C11.9375 11.5019 12.1893 11.2501 12.5 11.2501C12.8107 11.2501 13.0625 11.5019 13.0625 11.8126ZM17 11.8126C17 12.1232 16.7482 12.3751 16.4375 12.3751C16.1268 12.3751 15.875 12.1232 15.875 11.8126C15.875 11.5019 16.1268 11.2501 16.4375 11.2501C16.7482 11.2501 17 11.5019 17 11.8126ZM6.5 3.00006H18.5V8.25006H6.5V3.00006Z" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2688_137326">
+<rect width="24" height="24" fill="white" transform="translate(0.5 6.10352e-05)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -108,16 +108,36 @@
   --badge-icon-text-margin: calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));
   --padding: calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);
   --white-space: normal;
+  --border-radius: var(--stzh-button-border-radius);
   --hover-color: var(--stzh-color-white);
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --floating-position: sticky;
+  --floating-float: right;
+  --floating-bottom: var(--stzh-space-medium);
+  --floating-right: var(--stzh-space-medium);
   display: inline-block;
-  border-radius: var(--stzh-button-border-radius);
+  border-radius: var(--border-radius);
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --floating-bottom: var(--stzh-space-xlarge);
+    --floating-right: var(--stzh-space-xlarge);
+  }
 }
 :host[fullwidth]:not([fullwidth=false]) {
   width: 100%;
   display: block;
 }
+:host[rounded]:not([rounded=false]) {
+  --border-radius: var(--height);
+}
+:host[floating]:not([floating=false]) {
+  position: var(--floating-position);
+  bottom: var(--floating-bottom);
+  right: var(--floating-right);
+  float: var(--floating-float);
+}
 :host[size=small] {
   --height: var(--stzh-form-input-small-height);
 }
@@ -222,10 +242,11 @@
   width: 100%;
   min-width: var(--height);
   min-height: var(--height);
-  border-radius: var(--stzh-button-border-radius);
+  border-radius: var(--border-radius);
   text-align: left;
   /* Hover / Focus / Checked / Disabled of Radio Type */
   /* Size variants */
+  /* Floating */
   /* Badge positioning variants */
   /* Variant if button only has icon */
   /* Effect */
@@ -337,6 +358,9 @@
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
 }
+.stzh-button--is-floating {
+  box-shadow: var(--stzh-box-shadow-overlay);
+}
 .stzh-button--badge-position-button .stzh-button__icon-wrapper {
   position: static;
 }

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

@@ -50,6 +50,8 @@ export class StzhButton {
     this.badgePosition = "button";
     this.badgeEmpty = false;
     this.fullwidth = false;
+    this.rounded = false;
+    this.floating = false;
     this.size = "default";
     this.textAlign = "default";
     this.variant = "default";
@@ -100,6 +102,8 @@ export class StzhButton {
       "stzh-button--has-icon": iconUsed,
       "stzh-button--has-icon-only": this.iconOnly,
       "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-floating": this.floating,
+      "stzh-button--is-rounded": this.rounded,
       "stzh-button--is-fullwidth": this.fullwidth,
       "stzh-button--is-disabled": this.disabled,
       "stzh-button--is-active": this.active,
@@ -225,6 +229,42 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "false"
       },
+      "rounded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the button is rounded"
+        },
+        "attribute": "rounded",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the button is floating"
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -64,6 +64,15 @@ CTA.args = {
   'icon-position': 'right'
 };
 
+export const Floating = Template.bind({});
+Floating.args = {
+  label: 'Button Text',
+  effect: 'cta',
+  icon: 'arrow-right',
+  rounded: true,
+  floating: true
+};
+
 export const LongText = Template.bind({});
 LongText.args = {
   label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit'

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

@@ -109,6 +109,9 @@
   position: relative;
   border-radius: var(--border-radius);
 }
+:host[collapsed]:not([collapsed=false]) {
+  --content-min-height: none;
+}
 :host[checked]:not([checked=false]) {
   outline: 0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }

package/dist/collection/components/stzh-card-list/stzh-card-list.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { cloneElement, hasSlot } from "../../utils/utils";
+import { cloneWrappedStzhElement, hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for `stzh-card` elements
@@ -25,7 +25,7 @@ export class StzhCardList {
       this.allCollapsed = !cards.some(card => !card.collapsed);
     };
     this.sortableGhostClone = (dragElement) => {
-      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
+      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);
       if (clonedStzhElement
         && originalStzhElement
         && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {

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

@@ -104,6 +104,11 @@
   flex-basis: var(--cell-width);
   flex-shrink: 0;
 }
+:host::after {
+  content: "";
+  display: table;
+  clear: both;
+}
 
 /* Justify self variants */
 :host([justify-self=start]) {

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

@@ -147,10 +147,6 @@
   cursor: -webkit-grabbing;
 }
 
-:root {
-  --stzh-font: var(--stzh-font-family-regular, "Helvetica Neue", Helvetica, Arial, sans-serif);
-}
-
 /**
  * Axis component based on the d3.axis interface
  * Changed color to match stzh website (original #B8B8B8)
@@ -158,8 +154,7 @@
  */
 .sszvis-axis text {
   fill: #767676;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -171,7 +166,7 @@
 .sszvis-axis path,
 .sszvis-axis line {
   fill: none;
-  stroke: #b8b8b8;
+  stroke: #B8B8B8;
   shape-rendering: crispEdges;
 }
 
@@ -202,9 +197,9 @@
 }
 
 .sszvis-axis__label-contour {
-  fill: #ffffff;
+  fill: #FFFFFF;
   opacity: 0.8;
-  stroke: #ffffff;
+  stroke: #FFFFFF;
   stroke-width: 3;
 }
 
@@ -219,7 +214,7 @@
  * @module sszvis/component/groupedBars
  */
 .sszvis-bar--missing {
-  stroke: #a4a4a4;
+  stroke: #A4A4A4;
 }
 
 /**
@@ -253,8 +248,7 @@
   alignment-baseline: central;
   /* Maybe at least one of these will work? */
   dominant-baseline: central;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -273,7 +267,7 @@
 }
 
 .sszvis-sankey-column-label-tick {
-  stroke: #b8b8b8;
+  stroke: #B8B8B8;
 }
 
 .sszvis-sankey-link-source-label {
@@ -380,15 +374,14 @@
 }
 
 .sszvis-control-buttonGroup__item {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   border: 0.0625rem solid #767676;
   border-left: none;
   box-sizing: border-box;
   color: #767676;
   cursor: pointer;
   display: table-cell;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.75rem;
   line-height: normal;
   padding: 0.5625rem 0.75rem;
@@ -401,7 +394,7 @@
 */
 .sszvis-control-buttonGroup__item.selected {
   background-color: #767676;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .sszvis-control-buttonGroup__item:first-child {
@@ -423,7 +416,7 @@
 .sszvis-control-select {
   border: 0.0625rem solid #767676;
   border-radius: 0.1875rem;
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABQElEQVR4nO3TzW2DUBDEcZdACSnBpe1lVhzdCSXZnaQE55JJSOJgMO9rH/OTOK70/iNxOomIiIiIiMi3cRzfar8hlc0tAM4A3gFMeZ5UDoDps+W86sDMBgBXd7+7+z3yCACmWcfVzIbFg9/xkUeYx68a4b/4iCM8in86wlJ8pBGW4ucj/Dhy98uzowgjrImffZevQzMb3P0WeYSN8bc/v0HkEXbHU8QRksVTpBGSx1OEEbLFU8sjZI+nFkcoFk8tjVA8nloYoVo81RyhejzVGKGZeCo5QnPxVGKEZuMp5wjNx1OOEcLEU8oRwsVTihHCxtOeEcLH0ysjdBNPW0foKp4yjBAnnhKOEC+eEowQN552jBA/nl4YoZ942jBCf/G0YoR+42lhhP7j6cEIx4mn2QjHiyczGw4bLyIiIiIiUtMHjJmBk7uXEiAAAAAASUVORK5CYII=");
   background-position: 96% 51%;
   background-repeat: no-repeat;
@@ -436,10 +429,9 @@
 
 .sszvis-control-select__element {
   background: transparent;
-  border: 0.0625rem solid #ffffff;
+  border: 0.0625rem solid #FFFFFF;
   color: #767676;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 1rem;
   /* Minimum of 16px to prevent iOS to zoom page */
   height: 2.125rem;
@@ -453,8 +445,7 @@
 }
 
 .sszvis-control-select__metrics {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.75rem;
   height: auto;
   position: absolute;
@@ -474,8 +465,7 @@
 
 .sszvis-control-slider--label {
   fill: #545454;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.625rem;
   text-anchor: middle;
 }
@@ -495,12 +485,12 @@
  * @module sszvis/control/handleRuler
  */
 .sszvis-handleRuler__handle {
-  fill: #ffffff;
+  fill: #FFFFFF;
   stroke: #808184;
 }
 
 .sszvis-handleRuler__handle-mark {
-  stroke: #a6a8ab;
+  stroke: #A6A8AB;
 }
 
 /**
@@ -510,18 +500,17 @@
  */
 .sszvis-ruler__rule {
   shape-rendering: crispEdges;
-  stroke: #cccccc;
+  stroke: #CCCCCC;
 }
 
 .sszvis-ruler__dot {
-  stroke: #ffffff;
+  stroke: #FFFFFF;
   stroke-width: 1.5;
 }
 
 .sszvis-ruler__label,
 .sszvis-ruler__label-outline {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -532,7 +521,7 @@
 }
 
 .sszvis-ruler__label-outline {
-  stroke: #ffffff;
+  stroke: #FFFFFF;
   stroke-width: 3;
 }
 
@@ -542,8 +531,8 @@
  * @module sszvis/annotation/rangeFlag
  */
 .sszvis-rangeFlag__mark {
-  fill: #efefef;
-  stroke: #7c7c7c;
+  fill: #EFEFEF;
+  stroke: #7C7C7C;
   stroke-width: 1.5;
 }
 
@@ -564,12 +553,10 @@
   opacity: 0.25;
 }
 
-.sszvis-rangeRuler__label,
-.sszvis-rangeRuler__total {
+.sszvis-rangeRuler__label, .sszvis-rangeRuler__total {
   font-size: 0.625rem;
   fill: #545454;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-style: normal;
 }
 
@@ -620,7 +607,7 @@
 }
 
 .sszvis-tooltip__body {
-  color: #7c7c7c;
+  color: #7C7C7C;
   font-size: 0.6875rem;
   line-height: 1.4545;
   vertical-align: middle;
@@ -652,7 +639,7 @@
 }
 
 .sszvis-tooltip__body__table tr {
-  border-top: 0.0625rem solid #e5e6e7;
+  border-top: 0.0625rem solid #E5E6E7;
 }
 
 .sszvis-tooltip__body__table td {
@@ -700,9 +687,8 @@
 }
 
 .sszvis-referenceline__caption {
-  fill: #7c7c7c;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  fill: #7C7C7C;
+  font-family: Arial, sans-serif;
   font-size: 0.6875rem;
   text-anchor: middle;
   /*
@@ -717,9 +703,8 @@
  * @module sszvis/annotation/circle
  */
 .sszvis-dataareacircle__caption {
-  fill: #7c7c7c;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  fill: #7C7C7C;
+  font-family: Arial, sans-serif;
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -730,9 +715,8 @@
  * @module sszvis/annotation/rectangle
  */
 .sszvis-dataarearectangle__caption {
-  fill: #7c7c7c;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  fill: #7C7C7C;
+  font-family: Arial, sans-serif;
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -747,8 +731,7 @@
  */
 .sszvis-legend__label {
   fill: #767676;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -762,8 +745,7 @@
 
 .sszvis-legend__axislabel {
   fill: #767676;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: var(--stzh-font);
+  font-family: Arial, sans-serif;
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -775,12 +757,12 @@
 
 .sszvis-legend__greyline {
   fill: none;
-  stroke: #b8b8b8;
+  stroke: #B8B8B8;
   stroke-width: 1.1;
 }
 
 .sszvis-legend__dashedline {
-  stroke: #cccccc;
+  stroke: #CCCCCC;
   stroke-dasharray: 2 3;
   stroke-width: 1;
 }

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

@@ -100,6 +100,7 @@
 :host {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --height: 2rem;
+  --padding: 0 var(--stzh-space-medium);
   --border: 0.0625rem solid var(--stzh-color-grey13);
   --border-radius: 1rem;
   --remove-color: var(--stzh-base-lead-color);
@@ -129,9 +130,13 @@
     --hover-counter-color: Highlight;
   }
 }
+:host[size=large] {
+  --height: 2.5rem;
+  --border-radius: 1.25rem;
+  --padding: 0 var(--stzh-space-xlarge);
+}
 :host[size=small] {
   --height: 1.5rem;
-  --border-radius: 0.75rem;
   --icon-size: var(--stzh-icon-size-xsmall);
 }
 :host[variant=input] {
@@ -256,7 +261,7 @@
   flex-direction: row;
   align-items: center;
   border-radius: var(--border-radius);
-  padding: 0 var(--stzh-space-medium);
+  padding: var(--padding);
   color: var(--color);
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -331,7 +336,6 @@
 .stzh-chip--size-small .stzh-chip__button {
   font-size: var(--stzh-font-nano-font-size);
   line-height: var(--stzh-font-nano-text-line-height);
-  padding: 0 var(--stzh-space-small);
 }
 .stzh-chip--size-small .stzh-chip__icon-wrapper:not(:empty) {
   margin-right: var(--stzh-space-xxsmall);

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

@@ -240,8 +240,8 @@ export class StzhChip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
+          "original": "\"default\" | \"small\" | \"large\"",
+          "resolved": "\"default\" | \"large\" | \"small\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -40,6 +40,7 @@ export class StzhChipSelect {
         }
       }
       else if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
         const activeOptionIndex = this.activeFocusOptionIndex;
         this.value = this._data[activeOptionIndex].value;
         this.stzhChange.emit({

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;

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),
@@ -574,10 +582,4 @@
 :host ::slotted(:last-child),
 :host ::slotted([no-cspace-bottom]) {
   margin-bottom: 0 !important;
-}
-:host :has(:nth-child(1)[hidden])::slotted(:nth-child(2)) {
-  margin-top: 0 !important;
-}
-:host :has(:nth-last-child(1)[hidden])::slotted(:nth-last-child(2)) {
-  margin-bottom: 0 !important;
 }

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

@@ -105,13 +105,13 @@
     --item-label-min-width: 9rem;
   }
 }
-:host[disable-min-width]:not([disable-min-width=false]) {
+: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);
 }
@@ -143,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,7 +28,7 @@ export class StzhDatalist {
     this.directionLarge = "inherit";
     this.directionUltra = "inherit";
     this.hideBorder = false;
-    this.disableMinWidth = false;
+    this.disableLabelMinWidth = false;
     this.items = [];
     this.currentDirection = undefined;
   }
@@ -197,7 +197,7 @@ export class StzhDatalist {
         "reflect": true,
         "defaultValue": "false"
       },
-      "disableMinWidth": {
+      "disableLabelMinWidth": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -209,9 +209,9 @@ export class StzhDatalist {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether to disable min-width of datalist item"
+          "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-min-width",
+        "attribute": "disable-label-min-width",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -232,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,