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

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

@@ -196,10 +196,24 @@
   transition: box-shadow var(--stzh-base-transition-animation-speed);
   /* Has Link */
   /* Interactive Subtitle */
+  /* Is collapsible */
   /* Collapsed (Header) */
   /* Starred */
   /** Hidden header / footer border */
 }
+@media screen and (max-width: 1023px) {
+  .stzh-card .vshow-medium {
+    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;
+  }
+}
 @media screen and (max-width: 1023px) {
   .stzh-card .show-medium {
     display: none;
@@ -358,6 +372,10 @@
     padding: var(--stzh-space-xlarge);
   }
 }
+.stzh-card__footer-arrow {
+  --size: var(--stzh-icon-size-medium);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
 .stzh-card__card-actions {
   display: inline-flex;
   white-space: nowrap;
@@ -387,26 +405,12 @@
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
-.stzh-card--has-link .stzh-card__title-link::before {
-  transition: all var(--stzh-base-transition-animation-speed);
-}
-.stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link, .stzh-card--has-link .stzh-card__title-link:hover, .stzh-card--has-link .stzh-card__title-link:focus {
+.stzh-card--has-link:hover .stzh-card__footer-arrow {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:focus::before, .stzh-card--has-link .stzh-card__title-link:focus::before {
-  background-color: var(--stzh-color-primary4);
-}
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle {
   cursor: pointer;
+  font-family: inherit;
   padding: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -419,6 +423,20 @@
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+.stzh-card--is-collapsible .stzh-card__header {
+  cursor: pointer;
+}
+.stzh-card--is-collapsed .vhide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .vhide-when-collapsed {
+  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-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
   display: none;
 }

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

@@ -7,6 +7,7 @@ import { fetchTranslations } from "../../utils/translation-utils";
  * @slot image - Slot for optional image element
  * @slot content - Slot for content for any elements
  * @slot meta - Slot for meta elements (status or chip)
+ * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)
  */
 export class StzhCard {
   constructor() {
@@ -128,6 +129,7 @@ export class StzhCard {
     this.target = undefined;
     this.value = "";
     this.disabled = false;
+    this.withArrow = false;
     this.heading = "";
     this.subtitle = "";
     this.headerActions = [];
@@ -233,6 +235,7 @@ export class StzhCard {
       "stzh-card--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
       "stzh-card--has-hidden-header-border": this.hideHeaderBorder,
       "stzh-card--has-hidden-footer-border": this.hideFooterBorder,
+      "stzh-card--is-collapsible": this.collapsible,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
       "stzh-card--is-checked": this.checked
@@ -261,8 +264,8 @@ export class StzhCard {
         "hide-when-collapsed": !action.onlyCollapseText,
         "hide-text-when-collapsed": action.onlyCollapseText
       }, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
-        "show-medium": action.onlyCollapseText,
-        "hide-when-collapsed": action.onlyCollapseText
+        "vshow-medium": action.onlyCollapseText,
+        "vhide-when-collapsed": action.onlyCollapseText
       } }, action.label)))), this.starrable &&
       h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
       h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
@@ -272,9 +275,10 @@ export class StzhCard {
         h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), nonCollapsingTextHeaderActions.map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); } }, action.label))), sortableActionsEnabled &&
         h(Fragment, null, !isFirstItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
-          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
+          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
       h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
-      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))));
+      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
+      h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
   }
   static get is() { return "stzh-card"; }
   static get encapsulation() { return "scoped"; }
@@ -488,6 +492,24 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "withArrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card arrow is shown in footer area"
+        },
+        "attribute": "with-arrow",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "heading": {
         "type": "string",
         "mutable": false,

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

@@ -84,7 +84,7 @@ const footerActions = `[
   {
     "id": "action-3",
     "icon": "delete",
-    "label": "Dolor"
+    "label": "Lorem ipsum dolor sit amet"
   },
   {
     "id": "action-4",

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

@@ -147,6 +147,10 @@
   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)
@@ -154,7 +158,8 @@
  */
 .sszvis-axis text {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -166,7 +171,7 @@
 .sszvis-axis path,
 .sszvis-axis line {
   fill: none;
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
   shape-rendering: crispEdges;
 }
 
@@ -197,9 +202,9 @@
 }
 
 .sszvis-axis__label-contour {
-  fill: #FFFFFF;
+  fill: #ffffff;
   opacity: 0.8;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -214,7 +219,7 @@
  * @module sszvis/component/groupedBars
  */
 .sszvis-bar--missing {
-  stroke: #A4A4A4;
+  stroke: #a4a4a4;
 }
 
 /**
@@ -248,7 +253,8 @@
   alignment-baseline: central;
   /* Maybe at least one of these will work? */
   dominant-baseline: central;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -267,7 +273,7 @@
 }
 
 .sszvis-sankey-column-label-tick {
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
 }
 
 .sszvis-sankey-link-source-label {
@@ -374,14 +380,15 @@
 }
 
 .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: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   line-height: normal;
   padding: 0.5625rem 0.75rem;
@@ -394,7 +401,7 @@
 */
 .sszvis-control-buttonGroup__item.selected {
   background-color: #767676;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .sszvis-control-buttonGroup__item:first-child {
@@ -416,7 +423,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;
@@ -429,9 +436,10 @@
 
 .sszvis-control-select__element {
   background: transparent;
-  border: 0.0625rem solid #FFFFFF;
+  border: 0.0625rem solid #ffffff;
   color: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 1rem;
   /* Minimum of 16px to prevent iOS to zoom page */
   height: 2.125rem;
@@ -445,7 +453,8 @@
 }
 
 .sszvis-control-select__metrics {
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   height: auto;
   position: absolute;
@@ -465,7 +474,8 @@
 
 .sszvis-control-slider--label {
   fill: #545454;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   text-anchor: middle;
 }
@@ -485,12 +495,12 @@
  * @module sszvis/control/handleRuler
  */
 .sszvis-handleRuler__handle {
-  fill: #FFFFFF;
+  fill: #ffffff;
   stroke: #808184;
 }
 
 .sszvis-handleRuler__handle-mark {
-  stroke: #A6A8AB;
+  stroke: #a6a8ab;
 }
 
 /**
@@ -500,17 +510,18 @@
  */
 .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: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -521,7 +532,7 @@
 }
 
 .sszvis-ruler__label-outline {
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -531,8 +542,8 @@
  * @module sszvis/annotation/rangeFlag
  */
 .sszvis-rangeFlag__mark {
-  fill: #EFEFEF;
-  stroke: #7C7C7C;
+  fill: #efefef;
+  stroke: #7c7c7c;
   stroke-width: 1.5;
 }
 
@@ -553,10 +564,12 @@
   opacity: 0.25;
 }
 
-.sszvis-rangeRuler__label, .sszvis-rangeRuler__total {
+.sszvis-rangeRuler__label,
+.sszvis-rangeRuler__total {
   font-size: 0.625rem;
   fill: #545454;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-style: normal;
 }
 
@@ -607,7 +620,7 @@
 }
 
 .sszvis-tooltip__body {
-  color: #7C7C7C;
+  color: #7c7c7c;
   font-size: 0.6875rem;
   line-height: 1.4545;
   vertical-align: middle;
@@ -639,7 +652,7 @@
 }
 
 .sszvis-tooltip__body__table tr {
-  border-top: 0.0625rem solid #E5E6E7;
+  border-top: 0.0625rem solid #e5e6e7;
 }
 
 .sszvis-tooltip__body__table td {
@@ -687,8 +700,9 @@
 }
 
 .sszvis-referenceline__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
   /*
@@ -703,8 +717,9 @@
  * @module sszvis/annotation/circle
  */
 .sszvis-dataareacircle__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -715,8 +730,9 @@
  * @module sszvis/annotation/rectangle
  */
 .sszvis-dataarearectangle__caption {
-  fill: #7C7C7C;
-  font-family: Arial, sans-serif;
+  fill: #7c7c7c;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.6875rem;
   text-anchor: middle;
 }
@@ -731,7 +747,8 @@
  */
 .sszvis-legend__label {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.75rem;
   font-style: normal;
   font-weight: normal;
@@ -745,7 +762,8 @@
 
 .sszvis-legend__axislabel {
   fill: #767676;
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-size: 0.625rem;
   font-style: normal;
   font-weight: normal;
@@ -757,12 +775,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-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;

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

@@ -107,7 +107,7 @@
   --background-color: var(--stzh-color-white);
   --icon-size: var(--stzh-icon-size-small);
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-primary48);
+  --counter-color: var(--stzh-color-primary60op);
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border: var(--border);
   --hover-background-color: var(--stzh-color-primary8);
@@ -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,66 @@
   --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[non-interactive]:not([non-interactive=false]) {
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --hover-background-color: var(--background-color);
+  --hover-icon-color: var(--icon-color);
+  --hover-counter-color: var(--counter-color);
 }
 :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),
@@ -190,14 +232,25 @@
 
 .stzh-chip {
   position: relative;
-  white-space: nowrap;
   /* Size */
   /* 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;
@@ -213,10 +266,17 @@
   transition: all var(--stzh-base-transition-animation-speed);
   text-decoration: none;
 }
+.stzh-chip__button.is-button, .stzh-chip__button.is-link {
+  cursor: pointer;
+}
+.stzh-chip__label {
+  text-align: left;
+}
 .stzh-chip__icon-wrapper {
   display: flex;
   color: var(--icon-color);
   transition: color var(--stzh-base-transition-animation-speed);
+  flex-shrink: 0;
 }
 .stzh-chip__icon-wrapper:not(:empty) {
   margin-right: var(--stzh-space-xsmall);
@@ -235,6 +295,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: 0;
@@ -247,6 +308,7 @@
   margin-left: var(--stzh-space-xxsmall);
   color: var(--remove-color);
   transition: all var(--stzh-base-transition-animation-speed);
+  cursor: pointer;
 }
 .stzh-chip__remove:hover {
   color: var(--hover-remove-color);