@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -97,19 +97,35 @@
   box-sizing: border-box;
 }
 
-:host ::slotted(*:not(:last-child):not([slot])) {
+:host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
   margin-bottom: var(--stzh-space-medium);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*:not(:last-child):not([slot])) {
+  :host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
     margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*:not(:last-child):not([slot])) {
+  :host[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
+:host[layout=subpages] ::slotted(*:not([slot])) {
+  width: 100%;
+  margin: calc(var(--stzh-grid-gutter) / 2);
+}
+@media screen and (min-width: 600px) {
+  :host[layout=subpages] ::slotted(*:not([slot])) {
+    width: calc(50% - var(--stzh-grid-gutter-small));
+    margin: calc(var(--stzh-grid-gutter-small) / 2);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host[layout=subpages] ::slotted(*:not([slot])) {
+    width: calc(33.333% - var(--stzh-grid-gutter-medium));
+    margin: calc(var(--stzh-grid-gutter-medium) / 2);
+  }
+}
 :host ::slotted([slot=description]) stzh-icon {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
@@ -117,23 +133,20 @@
   --color: inherit;
 }
 
+.stzh-card-list {
+  /* Has content inside header */
+  /* Layout variant */
+}
+.stzh-card-list__cards {
+  display: flex;
+  flex-direction: column;
+}
 .stzh-card-list__header {
-  margin-bottom: var(--stzh-space-medium);
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-start;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-card-list__header {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-card-list__header {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 800px) {
   .stzh-card-list__header {
     flex-direction: row;
@@ -163,4 +176,32 @@
 .stzh-card-list__switch {
   --color: var(--stzh-base-lead-color);
   align-self: end;
+}
+.stzh-card-list--has-header .stzh-card-list__header {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card-list--has-header .stzh-card-list__header {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card-list--has-header .stzh-card-list__header {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card-list--layout-subpages .stzh-card-list__cards {
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: calc(var(--stzh-grid-gutter) / -2);
+}
+@media screen and (min-width: 600px) {
+  .stzh-card-list--layout-subpages .stzh-card-list__cards {
+    margin: calc(var(--stzh-grid-gutter-small) / -2);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card-list--layout-subpages .stzh-card-list__cards {
+    margin: calc(var(--stzh-grid-gutter-medium) / -2);
+  }
 }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { cloneElement } from "../../utils/utils";
+import { cloneElement, hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for `stzh-card` elements
@@ -41,6 +41,8 @@ export class StzhCardList {
       return clonedElement;
     };
     this.localization = undefined;
+    this.layout = "fullwidth";
+    this.description = undefined;
     this.showToggleLink = false;
     this.sortableEnabled = false;
     this.sortableDataIdAttribute = "data-id";
@@ -58,10 +60,13 @@ export class StzhCardList {
     this.updateCollapsedState();
   }
   render() {
+    const descriptionSlotUsed = hasSlot(this.element, "description") || !!this.description;
     const classes = {
-      "stzh-card-list": true
+      "stzh-card-list": true,
+      "stzh-card-list--has-header": this.showToggleLink || descriptionSlotUsed,
+      [`stzh-card-list--layout-${this.layout}`]: !!this.layout
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, this.description ? this.description : h("slot", { name: "description" })), this.showToggleLink &&
       h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: !this.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
   }
   static get is() { return "stzh-card-list"; }
@@ -98,6 +103,41 @@ export class StzhCardList {
           "text": "Translation strings"
         }
       },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"fullwidth\" | \"subpages\"",
+          "resolved": "\"fullwidth\" | \"subpages\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"fullwidth\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
       "showToggleLink": {
         "type": "boolean",
         "mutable": false,

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

@@ -782,18 +782,4 @@ stzh-chart *,
 stzh-chart *::before,
 stzh-chart *::after {
   box-sizing: border-box;
-}
-
-.stzh-chart__caption {
-  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
-  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
-}
-@media screen and (min-width: 1024px) {
-  .stzh-chart__caption {
-    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
-    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
-  }
-}
-.stzh-chart__caption:not(:empty) {
-  margin-top: var(--stzh-space-small);
 }

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

@@ -8,7 +8,6 @@ import * as topojson from "topojson-client";
 export class StzhChart {
   constructor() {
     this.initialized = false;
-    this.caption = "";
     this.chartId = undefined;
     this.create = function () { };
   }
@@ -28,7 +27,7 @@ export class StzhChart {
     const classes = {
       "stzh-chart": true
     };
-    return (h(Host, null, h("figure", { class: classes }, h("div", { id: this.chartId, ref: (el) => (this.chartElement = el), class: "stzh-chart__element" }), h("figcaption", { class: "stzh-chart__caption" }, this.caption ? this.caption : h("slot", { name: "caption" })))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { id: this.chartId, ref: (el) => (this.chartElement = el), class: "stzh-chart__element" }))));
   }
   static get is() { return "stzh-chart"; }
   static get originalStyleUrls() {
@@ -43,24 +42,6 @@ export class StzhChart {
   }
   static get properties() {
     return {
-      "caption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caption"
-        },
-        "attribute": "caption",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
       "chartId": {
         "type": "string",
         "mutable": false,

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

@@ -25,13 +25,14 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-chart {...args}></stzh-chart>
+  <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.">
+    <stzh-chart {...args}></stzh-chart>
+  </stzh-figure>
 );
 
 export const Default = Template.bind({});
 Default.args = {
   'chart-id': 'PieChartFourCat',
-  caption: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.',
   create: function(container, libs) {
     var PieChartFourCatParams = {
       id: '#PieChartFourCat',
@@ -84,7 +85,7 @@ Default.args = {
       var PIE_DIAMETER = 260;
       var LEGEND_TOP_PADDING = 40;
       var LEGEND_LEFT_PADDING = 25;
-      var LEGEND_HEIGHT = 76;
+      var LEGEND_HEIGHT = 215;
       var LEGEND_WIDTH = 102;
       var queryProps = sszvis.responsiveProps()
         .prop('layout', {

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

@@ -165,6 +165,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -261,12 +262,15 @@
 .stzh-checkbox--is-disabled .stzh-checkbox__field-wrapper {
   cursor: not-allowed;
 }
-.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__label, .stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark .stzh-checkbox__check {
+.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__label {
   color: var(--stzh-color-grey61);
 }
+.stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark .stzh-checkbox__check {
+  color: var(--stzh-color-grey70);
+}
 .stzh-checkbox--is-disabled .stzh-checkbox__input ~ .stzh-checkbox__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-checkbox--is-disabled .stzh-checkbox__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

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

@@ -165,6 +165,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

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

@@ -118,6 +118,17 @@
   display: inline-flex;
   border-radius: var(--border-radius);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host {
+    --hover-color: Highlight;
+    --hover-border: 0.0625rem solid Highlight;
+    --hover-background-color: Canvas;
+    --hover-remove-color: Highlight;
+    --hover-remove-background-color: Canvas;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
+}
 :host[size=small] {
   --height: 1.5rem;
   --border-radius: 0.75rem;
@@ -152,35 +163,59 @@
   --hover-icon-color: var(--stzh-color-error);
   --hover-counter-color: var(--stzh-color-error);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host[type=important] {
+    --hover-color: Highlight;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
+}
 :host[active]:not([active=false]) {
   --color: var(--stzh-color-white);
   --border: 0.0625rem solid transparent;
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-white48);
   --icon-color: var(--stzh-color-white);
+  --counter-color: var(--stzh-color-white48);
   --hover-color: var(--stzh-color-white);
   --hover-border: 0.0625rem solid transparent;
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-remove-color: var(--stzh-color-white);
   --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-counter-color: var(--stzh-color-white48);
   --hover-icon-color: var(--stzh-color-white);
+  --hover-counter-color: var(--stzh-color-white48);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host[active]:not([active=false]) {
+    --color: SelectedItem;
+    --border: 0.0625rem solid SelectedItem;
+    --remove-color: SelectedItem;
+    --background-color: Canvas;
+    --icon-color: SelectedItem;
+    --counter-color: SelectedItem;
+    --hover-color: Highlight;
+    --hover-border: 0.0625rem solid Highlight;
+    --hover-background-color: Canvas;
+    --hover-remove-color: Highlight;
+    --hover-remove-background-color: Canvas;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
 }
 :host[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey25);
   --border: 0.0625rem solid var(--stzh-base-border-color);
   --remove-color: var(--stzh-color-grey13);
   --background-color: var(--stzh-color-white);
-  --counter-color: var(--stzh-color-grey25);
   --icon-color: var(--stzh-color-grey25);
+  --counter-color: var(--stzh-color-grey25);
   --hover-color: var(--stzh-color-grey25);
   --hover-border: 0.0625rem solid var(--stzh-base-border-color);
   --hover-background-color: var(--stzh-color-white);
   --hover-remove-color: var(--stzh-color-grey13);
   --hover-remove-background-color: transparent;
-  --hover-counter-color: var(--stzh-color-grey25);
   --hover-icon-color: var(--stzh-color-grey25);
+  --hover-counter-color: var(--stzh-color-grey25);
 }
 
 :host ::slotted(stzh-icon),
@@ -195,9 +230,21 @@
   /* Removeable */
   /* Disabled */
 }
+.stzh-chip__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-chip__button {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
+  font-family: inherit;
   height: var(--height);
   display: flex;
   flex-direction: row;
@@ -235,6 +282,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: 0;

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

@@ -53,6 +53,7 @@ export class StzhChip {
     this.removeLabel = "";
     this.active = false;
     this.disabled = false;
+    this.a11yTabindex = undefined;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
   }
@@ -64,8 +65,8 @@ export class StzhChip {
     return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
-      h("div", { class: "stzh-chip__counter" }, this.counter)));
+        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+      h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {
     const classes = {
@@ -80,9 +81,9 @@ export class StzhChip {
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
       h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
-      h("a", { class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
+      h("a", { ref: (el) => (this.chip = el), class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
-        h("button", { class: "stzh-chip__button", disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
+        h("button", { ref: (el) => (this.chip = el), class: "stzh-chip__button", disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   static get is() { return "stzh-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -314,6 +315,23 @@ export class StzhChip {
         "reflect": true,
         "defaultValue": "false"
       },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
+      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,
@@ -343,7 +361,7 @@ export class StzhChip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Id for element which describes the button"
+          "text": "Id for element which describes the link/button"
         },
         "attribute": "a11y-describedby",
         "reflect": false,

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

@@ -152,6 +152,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -174,6 +175,7 @@
   align-items: center;
   flex-wrap: wrap;
   margin: calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);
+  border-radius: var(--stzh-button-border-radius);
 }
 @media screen and (max-width: 1023px) {
   .stzh-chip-select__chips {

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

@@ -9,20 +9,44 @@ export class StzhChipSelect {
   constructor() {
     this._data = [];
     this._dataDropdown = [];
-    this.chipClick = (data) => {
+    this.handleChipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
-    this.onDropdownChange = (event) => {
+    this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
+    this.handleKeydown = (event) => {
+      let newIndex = null;
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        const activeOptionIndex = this.getActiveOptionIndex();
+        if (activeOptionIndex > 0) {
+          newIndex = activeOptionIndex - 1;
+        }
+      }
+      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const activeOptionIndex = this.getActiveOptionIndex();
+        if (activeOptionIndex < this._data.length - 1) {
+          newIndex = activeOptionIndex + 1;
+        }
+      }
+      if (newIndex !== null) {
+        this.value = this._data[newIndex].value;
+        this.stzhChange.emit({
+          component: "stzh-chip-select",
+          value: this.value
+        });
+      }
+    };
     this.localization = undefined;
     this.data = [];
     this.name = undefined;
@@ -72,8 +96,11 @@ export class StzhChipSelect {
     }
     this.invalid = this._error.length > 0;
   }
+  getActiveOptionIndex() {
+    return this._data.findIndex(data => this.value === data.value);
+  }
   async componentWillLoad() {
-    this.inputId = `stzh-chip-select-${chipSelectCounter++}`;
+    this.id = `stzh-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
     if (!this.localization) {
@@ -93,7 +120,7 @@ export class StzhChipSelect {
       "stzh-chip-select--is-disabled": this.disabled,
       "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox" }, this._data.map((data) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : null, a11yDescribedby: `${this.inputId}-description ${this.a11yDescribedby}`, onClick: () => this.chipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.getActiveOptionIndex()}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value, id: `${this.id}-option-${i}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
   }
   static get is() { return "stzh-chip-select"; }
   static get encapsulation() { return "scoped"; }
@@ -146,7 +173,7 @@ export class StzhChipSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Data"
+          "text": "The list of chips"
         },
         "attribute": "data",
         "reflect": false,
@@ -304,7 +331,7 @@ export class StzhChipSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether the element is disabled or not"
+          "text": "Whether all chips are disabled or not"
         },
         "attribute": "disabled",
         "reflect": true,

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

@@ -101,6 +101,11 @@
   --lines: 1;
   width: 100%;
   color: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 :host([lines="1"]) {