@oiz/stzh-components 2.4.0-beta → 2.4.0

package/dist/cjs/stzh-upload.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-83d427ee.js');
 const utils = require('./utils-a2ff9f84.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 const stzhInputDescription = require('./stzh-input-description-2edc5cac.js');
-const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
+const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
 
 var dropzone = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 (function webpackUniversalModuleDefinition(root, factory) {

package/dist/cjs/stzh-vbz-linechip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83d427ee.js');
-const _commonjsHelpers = require('./_commonjsHelpers-dcc4cf71.js');
+const _commonjsHelpers = require('./_commonjsHelpers-bcc1208a.js');
 
 var tinycolor = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.

package/dist/cjs/stzh-vbz-ticker.cjs.entry.js

@@ -82,6 +82,7 @@ const StzhVbzTicker = class {
       if (message.affectedProduct
         && message.category !== index$1.VBZ.DISTURBANCE_INFORMATION
         && message.baseType !== index$1.VBZ.BASE_TYPE_GLOBAL) {
+        const affectedLines = [];
         message.affectedProduct.forEach(product => {
           if (typeof lines[product.lineId] === "undefined") {
             lines[product.lineId] = {
@@ -95,17 +96,21 @@ const StzhVbzTicker = class {
           if (message.category === index$1.VBZ.DISTURBANCE_NORMAL) {
             lines[product.lineId].alert = true;
           }
-          lines[product.lineId].disturbances.push({
-            id: message.id,
-            head: message.head,
-            category: message.category,
-            baseType: message.baseType,
-            startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),
-            endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),
-            altStart: message.altStart,
-            altEnd: message.altEnd,
-            infoUrl: infoUrl
-          });
+          // only add disturbance message to line if it was not already added (avoiding same message twice)
+          if (!affectedLines.includes(product.lineId)) {
+            affectedLines.push(product.lineId);
+            lines[product.lineId].disturbances.push({
+              id: message.id,
+              head: message.head,
+              category: message.category,
+              baseType: message.baseType,
+              startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),
+              endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),
+              altStart: message.altStart,
+              altEnd: message.altEnd,
+              infoUrl: infoUrl
+            });
+          }
         });
       }
     });

package/dist/collection/assets/i18n/de.json

@@ -16,6 +16,8 @@
     }
   },
   "$globals": {
+    "externalLinkLabel": "Externer Link:",
+    "downloadLinkLabel": "Download von:",
     "requiredFieldMarker": "",
     "requiredFieldText": " (Pflichtfeld)",
     "optionalFieldMarker": " (optional)",

package/dist/collection/assets/i18n/en.json

@@ -16,6 +16,8 @@
     }
   },
   "$globals": {
+    "externalLinkLabel": "External link:",
+    "downloadLinkLabel": "Download of:",
     "requiredFieldMarker": "",
     "requiredFieldText": " (required)",
     "optionalFieldMarker": " (optional)",
@@ -117,7 +119,7 @@
   },
   "datamessagelist-item": {
     "actionsPopoverLabel": "Actions",
-    "unread": "Unread" 
+    "unread": "Unread"
   },
   "actionset": {
     "actions": "Actions",

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

@@ -258,6 +258,17 @@
   background-color: var(--hover-background-color);
   color: var(--hover-color);
 }
+.stzh-button__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-button__inner {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
 import { Host, Fragment, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for label/text content
  * @slot icon - Slot for icon element
@@ -45,6 +46,7 @@ export class StzhButton {
         event.preventDefault();
       }
     };
+    this.localization = undefined;
     this.badge = "";
     this.badgeType = "default";
     this.badgePosition = "button";
@@ -88,13 +90,18 @@ export class StzhButton {
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
-    return (h("div", { class: "stzh-button__text" }, this.label ? this.label : h("slot", null)));
+    return (h("div", { class: "stzh-button__text" }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
     return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
       h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), (this.badge || this.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "button");
+    }
+  }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
@@ -139,6 +146,26 @@ export class StzhButton {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "badge": {
         "type": "string",
         "mutable": false,

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

@@ -126,7 +126,7 @@
   --border: 0.0625rem solid transparent;
   overflow: hidden;
 }
-:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
+:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host, :host[is-sortable]:hover {
   --dnd-visibility: visible;
   --dnd-opacity: 1;
 }

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

@@ -226,6 +226,20 @@ export class StzhCard {
     var _a, _b, _c;
     const imageUsed = hasSlot(this.element, "image");
     const contentUsed = hasSlot(this.element, "content");
+    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
+    const sortableChildElement = this.findSortableChildElement();
+    const isFirstItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
+      && Array.from((_a = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _a === void 0 ? void 0 : _a.children)
+        .indexOf(sortableChildElement) === 0;
+    const isLastItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
+      && Array.from((_b = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _b === void 0 ? void 0 : _b.children)
+        .indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
+    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
+    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
+    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
+    // const headerActions = [
+    //   ...this._headerActions
+    // ];
     const classes = {
       "stzh-card": true,
       "stzh-card--has-link": !!this.href,
@@ -238,25 +252,10 @@ export class StzhCard {
       "stzh-card--is-collapsible": this.collapsible,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
-      "stzh-card--is-checked": this.checked
+      "stzh-card--is-checked": this.checked,
+      "stzh-card--is-sortable": sortableEnabled
     };
-    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
-    const sortableChildElement = this.findSortableChildElement();
-    const isFirstItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
-      && Array.from((_a = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _a === void 0 ? void 0 : _a.children)
-        .indexOf(sortableChildElement) === 0;
-    const isLastItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
-      && Array.from((_b = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _b === void 0 ? void 0 : _b.children)
-        .indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
-    const sortableActionsEnabled = !this.sortableDisabled
-      && !this.hideMovementActions
-      && this.sortable
-      && !this.sortable.disabled;
-    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
-    // const headerActions = [
-    //   ...this._headerActions
-    // ];
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
+    return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
       h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
         "stzh-card__card-action": true,
         "is-button": true,

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

@@ -147,14 +147,20 @@
   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)
  * @module sszvis/axis
  */
 .sszvis-axis text {
-  fill: #767676;
-  font-family: Arial, sans-serif;
+  color: #737373;
+  fill: #737373;
+  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 +172,7 @@
 .sszvis-axis path,
 .sszvis-axis line {
   fill: none;
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
   shape-rendering: crispEdges;
 }
 
@@ -197,9 +203,9 @@
 }
 
 .sszvis-axis__label-contour {
-  fill: #FFFFFF;
+  fill: #ffffff;
   opacity: 0.8;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -214,7 +220,7 @@
  * @module sszvis/component/groupedBars
  */
 .sszvis-bar--missing {
-  stroke: #A4A4A4;
+  stroke: #a4a4a4;
 }
 
 /**
@@ -248,7 +254,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 +274,7 @@
 }
 
 .sszvis-sankey-column-label-tick {
-  stroke: #B8B8B8;
+  stroke: #b8b8b8;
 }
 
 .sszvis-sankey-link-source-label {
@@ -374,38 +381,39 @@
 }
 
 .sszvis-control-buttonGroup__item {
-  background-color: #FFFFFF;
-  border: 0.0625rem solid #767676;
+  background-color: #ffffff;
+  border: 0.0625rem solid #0f05a0;
   border-left: none;
   box-sizing: border-box;
-  color: #767676;
+  color: #0f05a0;
   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;
   text-align: center;
   vertical-align: middle;
+  transition: all 0.3s;
+}
+
+.sszvis-control-buttonGroup__item:hover,
+.sszvis-control-buttonGroup__item.selected:hover {
+  background-color: #070250;
+  color: #fff;
 }
 
 /**
 * uses same background color as "Zurücksetzen" form button on stzh Website
 */
 .sszvis-control-buttonGroup__item.selected {
-  background-color: #767676;
-  color: #FFFFFF;
+  background-color: #0f05a0;
+  color: #ffffff;
 }
 
 .sszvis-control-buttonGroup__item:first-child {
-  border-left: 0.0625rem solid #767676;
-  border-top-left-radius: 0.1875rem;
-  border-bottom-left-radius: 0.1875rem;
-}
-
-.sszvis-control-buttonGroup__item:last-child {
-  border-top-right-radius: 0.1875rem;
-  border-bottom-right-radius: 0.1875rem;
+  border-left: 0.0625rem solid #0f05a0;
 }
 
 /**
@@ -414,10 +422,10 @@
  * @module sszvis/control/select
  */
 .sszvis-control-select {
-  border: 0.0625rem solid #767676;
-  border-radius: 0.1875rem;
-  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=");
+  border: 0.0625rem solid #0f05a0;
+  border-radius: 0.125rem;
+  background-color: #ffffff;
+  background-image: url("data:image/png;base64,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");
   background-position: 96% 51%;
   background-repeat: no-repeat;
   background-size: 0.75rem 0.75rem;
@@ -425,17 +433,31 @@
   cursor: pointer;
   height: 2.125rem;
   overflow: hidden;
+  color: #0f05a0;
+  transition: all 0.3s;
+}
+
+.sszvis-control-select:hover {
+  border-color: #070250;
+}
+
+.sszvis-control-select__element:hover {
+  color: #070250;
+  cursor: pointer;
 }
 
 .sszvis-control-select__element {
   background: transparent;
-  border: 0.0625rem solid #FFFFFF;
-  color: #767676;
-  font-family: Arial, sans-serif;
+  border: 0.0625rem solid #ffffff;
+  color: #0f05a0;
+  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;
   outline: 0;
+  transition: all 0.3s;
+  padding-left: 0.3125rem;
 }
 
 /* Hide focus ring on Firefox */
@@ -445,7 +467,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 +488,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 +509,12 @@
  * @module sszvis/control/handleRuler
  */
 .sszvis-handleRuler__handle {
-  fill: #FFFFFF;
+  fill: #ffffff;
   stroke: #808184;
 }
 
 .sszvis-handleRuler__handle-mark {
-  stroke: #A6A8AB;
+  stroke: #a6a8ab;
 }
 
 /**
@@ -500,17 +524,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 +546,7 @@
 }
 
 .sszvis-ruler__label-outline {
-  stroke: #FFFFFF;
+  stroke: #ffffff;
   stroke-width: 3;
 }
 
@@ -531,8 +556,8 @@
  * @module sszvis/annotation/rangeFlag
  */
 .sszvis-rangeFlag__mark {
-  fill: #EFEFEF;
-  stroke: #7C7C7C;
+  fill: #efefef;
+  stroke: #7c7c7c;
   stroke-width: 1.5;
 }
 
@@ -553,13 +578,30 @@
   opacity: 0.25;
 }
 
-.sszvis-rangeRuler__label, .sszvis-rangeRuler__total {
+.sszvis-rangeRuler__label,
+.sszvis-rangeRuler__total {
+  stroke: none;
   font-size: 0.625rem;
-  fill: #545454;
-  font-family: Arial, sans-serif;
+  fill: #737373;
+  color: #737373;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
   font-style: normal;
 }
 
+.sszvis-rangeRuler__label-contour,
+.sszvis-rangeRuler__total-contour {
+  font-size: 0.625rem;
+  fill: #737373;
+  color: #737373;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--stzh-font);
+  font-style: normal;
+  stroke: #ffffff;
+  stroke-width: 3;
+  stroke-opacity: 0.8;
+}
+
 /**
  * Tooltip annotation
  *
@@ -607,7 +649,7 @@
 }
 
 .sszvis-tooltip__body {
-  color: #7C7C7C;
+  color: #7c7c7c;
   font-size: 0.6875rem;
   line-height: 1.4545;
   vertical-align: middle;
@@ -639,7 +681,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 +729,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 +746,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 +759,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 +776,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 +791,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 +804,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-chart/stzh-chart.stories.js

@@ -30,6 +30,7 @@ const Template = (args) => (
   </stzh-figure>
 );
 
+// https://statistikstadtzuerich.github.io/sszvis/#/pie-charts
 export const Default = Template.bind({});
 Default.args = {
   'chart-id': 'PieChartFourCat',

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

@@ -181,14 +181,14 @@
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --icon-color: var(--stzh-color-white);
-  --counter-color: var(--stzh-color-white48);
+  --counter-color: var(--stzh-color-white56);
   --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-icon-color: var(--stzh-color-white);
-  --hover-counter-color: var(--stzh-color-white48);
+  --hover-counter-color: var(--stzh-color-white56);
 }
 @media (forced-colors: active), (-ms-high-contrast: active) {
   :host[active]:not([active=false]) {