@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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,140 @@
+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-buttongroup>
+            <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-buttongroup>
+        </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>
+        <stzh-buttongroup>
+          <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-buttongroup>
+      </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-cell/stzh-cell.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -96,6 +96,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 /**
@@ -829,4 +831,6 @@ stzh-chart *,
 stzh-chart *::before,
 stzh-chart *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }

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

@@ -95,11 +95,12 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   display: inline-block;
-  border-radius: var(--stzh-form-input-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: inherit;
@@ -204,6 +205,10 @@
   z-index: -1;
   opacity: 0;
   pointer-events: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--stzh-form-input-border-radius);
 }
 .stzh-checkbox__mark {
   border: 0.0625rem solid var(--stzh-color-grey61);

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
@@ -12,6 +12,7 @@ let checkboxCounter = 0;
  */
 export class StzhCheckbox {
   constructor() {
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -21,7 +22,14 @@ export class StzhCheckbox {
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent('focus', {
         view: window,
         bubbles: false,
@@ -105,12 +113,12 @@ export class StzhCheckbox {
       "stzh-checkbox--is-invalid": this.invalid,
       "stzh-checkbox--is-disabled": this.disabled
     };
-    return (h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
       h("span", { class: "stzh-checkbox__marker" }, h("span", { class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-checkbox__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   static get is() { return "stzh-checkbox"; }
   static get encapsulation() { return "scoped"; }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host([direction=vertical]) ::slotted(stzh-checkbox:not(:last-child)) {

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

@@ -95,13 +95,15 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --height: 2rem;
   --padding: 0 var(--stzh-space-medium);
-  --border: 0.0625rem solid var(--stzh-color-grey13);
+  --border-color: var(--stzh-color-grey13);
   --border-radius: 1rem;
   --remove-color: var(--stzh-base-lead-color);
   --remove-border-radius: 1.5rem;
@@ -110,14 +112,13 @@
   --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);
   --hover-icon-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-counter-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   display: inline-flex;
-  border-radius: var(--border-radius);
 }
 @media (forced-colors: active), (-ms-high-contrast: active) {
   :host {
@@ -140,18 +141,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,13 +178,13 @@
 }
 :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-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));
@@ -193,13 +194,13 @@
 @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 +210,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,10 +267,14 @@
   -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;
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-chip__button.is-button, .stzh-chip__button.is-link {
   cursor: pointer;
@@ -312,7 +317,8 @@
   align-items: center;
   margin-left: var(--stzh-space-xxsmall);
   color: var(--remove-color);
-  transition: all var(--stzh-base-transition-animation-speed);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
   cursor: pointer;
 }
 .stzh-chip__remove:hover {
@@ -325,12 +331,12 @@
 .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 {
+.stzh-chip__button:hover .stzh-chip__counter, .stzh-chip__remove:hover + .stzh-chip__button .stzh-chip__counter {
   color: var(--hover-counter-color);
 }
-.stzh-chip__button:hover .stzh-chip__icon-wrapper {
+.stzh-chip__button:hover .stzh-chip__icon-wrapper, .stzh-chip__remove:hover + .stzh-chip__button .stzh-chip__icon-wrapper {
   color: var(--hover-icon-color);
 }
 .stzh-chip--size-small .stzh-chip__button {

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

@@ -5,7 +5,15 @@ import { Host, h, Fragment } from "@stencil/core";
  */
 export class StzhChip {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -66,7 +74,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() {
@@ -82,7 +91,7 @@ export class StzhChip {
     };
     const Chip = this.nonInteractive ? "div" :
       this.href ? "a" : "button";
-    return (h(Host, null, h("div", { class: classes }, this.removable &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, 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(Chip, { ref: (el) => (this.chip = el), class: {
           "stzh-chip__button": true,

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-chip-select__marker-symbol {
@@ -186,7 +188,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));

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

@@ -9,8 +9,9 @@ export class StzhChipSelect {
   constructor() {
     this._data = [];
     this._dataDropdown = [];
-    this.handleChipClick = (data) => {
+    this.handleChipClick = (data, index) => {
       this.value = data.value;
+      this.activeFocusOptionIndex = index;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -18,6 +19,9 @@ export class StzhChipSelect {
     };
     this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
+      this.activeFocusOptionIndex = this._data.findIndex(data => {
+        return data.value === this.value;
+      });
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -25,23 +29,21 @@ export class StzhChipSelect {
     };
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
+      const activeOptionIndex = this.activeFocusOptionIndex;
       if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex > 0) {
           newActiveIndex = activeOptionIndex - 1;
         }
       }
       else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         if (activeOptionIndex < this._data.length - 1) {
           newActiveIndex = activeOptionIndex + 1;
         }
       }
       else if (event.key === " " || event.key === "Enter") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         this.value = this._data[activeOptionIndex].value;
         this.stzhChange.emit({
           component: "stzh-chip-select",
@@ -123,10 +125,10 @@ 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", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: {
+    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.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
         "stzh-chip-select__chip": true,
-        "is-focused": this.activeFocusOptionIndex === i
-      }, 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" : "false", 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 }))));
+        "is-focused": this.activeFocusOptionIndex === index
+      }, 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" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), 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"; }