@oiz/stzh-components 2.4.0-beta → 2.5.0-alpha-carousel

package/dist/collection/components/stzh-carousel/stzh-carousel.localization.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,138 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Carousel',
+  component: 'stzh-carousel',
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: ['stzhSlideStart', 'stzhSlidePassed', 'stzhSlideEnd']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('carousel'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Card = (args) => (
+  <stzh-card {...args}>
+    <stzh-ratio slot="image">
+      <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+    </stzh-ratio>
+    <div slot="content">Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.</div>
+  </stzh-card>
+);
+
+const Template = (args) => (
+  <stzh-container>
+    <stzh-vspace curve="big"></stzh-vspace>
+    <stzh-carousel {...args}>
+      <stzh-ratio slot="actions">
+        <stzh-hspace justify="end" items="end" size="none">
+          <stzh-button
+            data-stzh-carousel-previous
+            variant="secondary"
+            size="small"
+            icon="angle-left"
+            label="Previous slide"
+            icon-only
+          ></stzh-button>
+          <stzh-button
+            data-stzh-carousel-next
+            variant="secondary"
+            size="small"
+            icon="angle-right"
+            label="Next slide"
+            icon-only
+          ></stzh-button>
+        </stzh-hspace>
+      </stzh-ratio>
+
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example3.png" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+      <stzh-figure caption="Lorem ipsum">
+        <stzh-ratio>
+          <img src="media/images/example4.png" loading="lazy" alt="Example image" />
+        </stzh-ratio>
+      </stzh-figure>
+    </stzh-carousel>
+    <stzh-vspace curve="big"></stzh-vspace>
+  </stzh-container>
+);
+
+const TemplateCards = (args) => (
+  <stzh-container>
+    <stzh-vspace curve="big"></stzh-vspace>
+    <stzh-carousel {...args}>
+      <stzh-hspace slot="actions" justify="end" items="center" size="medium">
+        <stzh-text curve="p2" data-stzh-carousel-navigation-text>7 Offers</stzh-text>
+        <div>
+          <stzh-button
+            data-stzh-carousel-previous
+            variant="secondary"
+            size="small"
+            icon="angle-left"
+            label="Previous slide"
+            icon-only
+          ></stzh-button>
+          <stzh-button
+            data-stzh-carousel-next
+            variant="secondary"
+            size="small"
+            icon="angle-right"
+            label="Next slide"
+            icon-only
+          ></stzh-button>
+        </div>
+      </stzh-hspace>
+
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+      {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}
+    </stzh-carousel>
+    <stzh-vspace curve="big"></stzh-vspace>
+  </stzh-container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'aria-label': 'Carousel name'
+};
+
+export const Cards = TemplateCards.bind({});
+Cards.args = {
+  'variant': 'cards',
+  'slides-small': '2',
+  'slides-medium': '3',
+  'slides-large': '4'
+};

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-checkboxgroup/stzh-checkboxgroup.js

@@ -138,7 +138,9 @@ export class StzhCheckboxgroup {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

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

@@ -101,7 +101,7 @@
   --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-color: var(--stzh-color-grey13);
   --border-radius: 1rem;
   --remove-color: var(--stzh-base-lead-color);
   --remove-border-radius: 1.5rem;
@@ -110,7 +110,7 @@
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --counter-color: var(--stzh-color-primary60op);
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-border: var(--border);
+  --hover-border-color: var(--border-color);
   --hover-background-color: var(--stzh-color-primary8);
   --hover-remove-color: var(--hover-color);
   --hover-remove-background-color: var(--hover-background-color);
@@ -140,18 +140,18 @@
   --icon-size: var(--stzh-icon-size-xsmall);
 }
 :host[variant=input] {
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-grey5);
-  --hover-border: 0.0625rem solid transparent;
+  --hover-border-color: transparent;
 }
 :host[variant=tag] {
   --color: var(--stzh-base-color);
   --icon-color: var(--stzh-base-color);
   --counter-color: var(--stzh-base-color);
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-black8);
   --hover-color: var(--stzh-base-color);
-  --hover-border: 0.0625rem solid transparent;
+  --hover-border-color: transparent;
   --hover-background-color: var(--stzh-color-black8);
   --hover-icon-color: var(--stzh-base-color);
   --hover-counter-color: var(--stzh-base-color);
@@ -177,29 +177,29 @@
 }
 :host[active]:not([active=false]) {
   --color: var(--stzh-color-white);
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --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-border-color: 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]) {
     --color: SelectedItem;
-    --border: 0.0625rem solid SelectedItem;
+    --border-color: SelectedItem;
     --remove-color: SelectedItem;
     --background-color: Canvas;
     --icon-color: SelectedItem;
     --counter-color: SelectedItem;
     --hover-color: Highlight;
-    --hover-border: 0.0625rem solid Highlight;
+    --hover-border-color: Highlight;
     --hover-background-color: Canvas;
     --hover-remove-color: Highlight;
     --hover-remove-background-color: Canvas;
@@ -209,20 +209,20 @@
 }
 :host[non-interactive]:not([non-interactive=false]) {
   --hover-color: var(--color);
-  --hover-border: var(--border);
+  --hover-border: var(--border-color);
   --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);
+  --border-color: var(--stzh-base-border-color);
   --remove-color: var(--stzh-color-grey13);
   --background-color: var(--stzh-color-white);
   --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-border-color: var(--stzh-base-border-color);
   --hover-background-color: var(--stzh-color-white);
   --hover-remove-color: var(--stzh-color-grey13);
   --hover-remove-background-color: transparent;
@@ -266,7 +266,9 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  border: var(--border);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--border-color);
   background-color: var(--background-color);
   transition: all var(--stzh-base-transition-animation-speed);
   text-decoration: none;
@@ -325,7 +327,7 @@
 .stzh-chip__button:hover, .stzh-chip__remove:hover + .stzh-chip__button {
   color: var(--hover-color);
   background-color: var(--hover-background-color);
-  border: var(--hover-border);
+  border-color: var(--hover-border-color);
 }
 .stzh-chip__button:hover .stzh-chip__counter {
   color: var(--hover-counter-color);

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

@@ -66,7 +66,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("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+        h("slot", { name: "icon" })), h("stzh-clamp", { lines: 1, class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), this.counter &&
+      h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
       h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {

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

@@ -186,7 +186,7 @@
   margin: calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2);
 }
 .stzh-chip-select__chip.is-focused, .stzh-chip-select__chip.is-focused[active]:not([active=false]) {
-  --border: 0.0625rem solid var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
 .stzh-chip-select__chip.is-focused[active]:not([active=false]) {
   --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));