@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

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

@@ -1,4 +1,4 @@
-import { Host, h, Fragment } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot - Slot for label
  * @slot icon - Slot for icon
@@ -40,7 +40,8 @@ export class StzhChip {
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-chip",
-        originalEvent: event
+        originalEvent: event,
+        href: this.href
       });
     };
     this.onRemoveClick = (event) => {
@@ -58,6 +59,10 @@ export class StzhChip {
     this.inverted = false;
     this.variant = "tag";
     this.size = "default";
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.type = "default";
     this.counter = "";
     this.removeLabel = "";
@@ -76,7 +81,7 @@ export class StzhChip {
     });
   }
   renderInner() {
-    return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon || (typeof this.icon === "undefined" && this.variant === "tag" && this.type !== "default") ?
+    return (h("div", { class: "stzh-chip__button-inner" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon || (typeof this.icon === "undefined" && this.variant === "tag" && this.type !== "default") ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon
           || this.type === "info" && "info-help"
           || this.type === "warning" && "important-warning"
@@ -302,6 +307,98 @@ export class StzhChip {
         "reflect": true,
         "defaultValue": "\"default\""
       },
+      "sizeSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhChipSize",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "StzhChipSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhChipSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (above small breakpoint)"
+        },
+        "attribute": "size-small",
+        "reflect": true
+      },
+      "sizeMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhChipSize",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "StzhChipSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhChipSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (above medium breakpoint)"
+        },
+        "attribute": "size-medium",
+        "reflect": true
+      },
+      "sizeLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhChipSize",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "StzhChipSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhChipSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (above large breakpoint)"
+        },
+        "attribute": "size-large",
+        "reflect": true
+      },
+      "sizeUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhChipSize",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "StzhChipSize": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhChipSize"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (above ultra breakpoint)"
+        },
+        "attribute": "size-ultra",
+        "reflect": true
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -499,7 +596,7 @@ export class StzhChip {
         },
         "complexType": {
           "original": "StzhChipClickEvent",
-          "resolved": "{ component: \"stzh-chip\"; originalEvent: MouseEvent; }",
+          "resolved": "{ component: \"stzh-chip\"; originalEvent: MouseEvent; href: string; }",
           "references": {
             "StzhChipClickEvent": {
               "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-chip.js","sourceRoot":"","sources":["../../../../src/components/stzh-chip/stzh-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipVariant,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ?\n            <stzh-icon class=\"stzh-chip__icon\" name={\n              this.icon\n              || this.type === \"info\" && \"info-help\"\n              || this.type === \"warning\" && \"important-warning\"\n              || this.type === \"error\" && \"warning\"\n              || this.type === \"success\" && \"checkmark-circle\"\n            }></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-chip.js","sourceRoot":"","sources":["../../../../src/components/stzh-chip/stzh-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhChipVariant,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ?\n            <stzh-icon class=\"stzh-chip__icon\" name={\n              this.icon\n              || this.type === \"info\" && \"info-help\"\n              || this.type === \"warning\" && \"important-warning\"\n              || this.type === \"error\" && \"warning\"\n              || this.type === \"success\" && \"checkmark-circle\"\n            }></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -160,6 +163,10 @@
   --description-color: var(--stzh-color-grey70);
 }
 
+.stzh-chipselect {
+  /* Hidden label */
+  /* Disabled */
+}
 .stzh-chipselect__marker-symbol {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -232,47 +239,70 @@
 .stzh-chipselect--has-error .stzh-chipselect__error, .stzh-chipselect--has-description .stzh-chipselect__description {
   margin-top: var(--stzh-space-xxxsmall);
 }
+.stzh-chipselect__label {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--stzh-heading-color);
+  display: block;
+  margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-chipselect__label:empty {
+  display: none;
+}
+.stzh-chipselect__marker {
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
+  margin-left: calc(-0.25em + var(--stzh-space-xsmall));
+}
 .stzh-chipselect__chips {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin: calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);
   border-radius: var(--stzh-button-border-radius);
+  -moz-column-gap: var(--stzh-space-medium);
+       column-gap: var(--stzh-space-medium);
 }
-@media screen and (max-width: 899px) {
+@media screen and (min-width: 900px) {
   .stzh-chipselect__chips {
-    display: none;
+    row-gap: var(--stzh-space-medium);
   }
 }
-.stzh-chipselect__chip {
-  margin: calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2);
-}
 .stzh-chipselect__chip.is-focused, .stzh-chipselect__chip.is-focused[active]:not([active=false]) {
-  --border-color: var(--stzh-color-primary-hover);
+  --background-color: var(--stzh-color-secondary40);
 }
 @media (forced-colors: active), (-ms-high-contrast: active) {
   .stzh-chipselect__chip.is-focused, .stzh-chipselect__chip.is-focused[active]:not([active=false]) {
-    --border-color: Highlight;
+    --background-color: Highlight;
   }
 }
 .stzh-chipselect__chip.is-focused[active]:not([active=false]) {
-  --background-color: var(--stzh-color-primary-hover);
+  --background-color: var(--stzh-color-primary90);
 }
 @media (forced-colors: active), (-ms-high-contrast: active) {
   .stzh-chipselect__chip.is-focused[active]:not([active=false]) {
     --background-color: Canvas;
   }
 }
-@media screen and (min-width: 900px) {
-  .stzh-chipselect__dropdown {
-    display: none;
-  }
-}
-@media screen and (max-width: 899px) {
-  .stzh-chipselect__description-wrapper {
-    display: none;
-  }
-}
 .stzh-chipselect--has-error .stzh-chipselect__error, .stzh-chipselect--has-description .stzh-chipselect__description {
   margin-top: var(--stzh-space-xsmall);
+}
+.stzh-chipselect--has-label-hidden .stzh-chipselect__label {
+  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-chipselect--is-disabled .stzh-chipselect__chips, .stzh-chipselect--is-disabled .stzh-chipselect__label {
+  cursor: not-allowed;
 }

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

@@ -11,7 +11,7 @@ let chipselectCounter = 0;
 export class StzhChipselect {
   constructor() {
     this._data = [];
-    this._dataDropdown = [];
+    this._value = [];
     this.handleReset = async () => {
       this.value = this.defaultValue;
       // this.stzhChange.emit({
@@ -20,25 +20,37 @@ export class StzhChipselect {
       // });
     };
     this.handleChipClick = async (data, index) => {
-      this.value = data.value;
+      if (this.multiple) {
+        if (data.value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
+          this.value = [];
+        }
+        else if (data.value !== "") {
+          this.value = this._value.includes(data.value)
+            ? this._value.filter(value => value !== data.value)
+            : [...this._value, data.value];
+        }
+      }
+      else {
+        this.value = [data.value];
+      }
       this.activeFocusOptionIndex = index;
       await this.waitForNextRender();
       this.stzhChange.emit({
         component: "stzh-chipselect",
-        value: this.value
-      });
-    };
-    this.handleDropdownChange = async (event) => {
-      this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
-      this.activeFocusOptionIndex = this._data.findIndex(data => {
-        return data.value === this.value;
-      });
-      await this.waitForNextRender();
-      this.stzhChange.emit({
-        component: "stzh-chipselect",
-        value: this.value
+        value: this.multiple ? this._value[0] : this._value
       });
     };
+    // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {
+    //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
+    //   this.activeFocusOptionIndex = this._data.findIndex(data => {
+    //     return data.value === this.value;
+    //   });
+    //   await this.waitForNextRender();
+    //   this.stzhChange.emit({
+    //     component: "stzh-chipselect",
+    //     value: this.value
+    //   })
+    // }
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
       const activeOptionIndex = this.activeFocusOptionIndex;
@@ -70,6 +82,8 @@ export class StzhChipselect {
     this.data = [];
     this.name = undefined;
     this.label = "";
+    this.labelHidden = false;
+    this.multiple = false;
     this.value = "";
     this.defaultValue = "";
     this.description = undefined;
@@ -90,6 +104,19 @@ export class StzhChipselect {
       });
     }
   }
+  valueWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._value = JSON.parse(newValue);
+      }
+      catch (ex) {
+        this._value = newValue ? [newValue] : [];
+      }
+    }
+    else {
+      this._value = newValue ? newValue : [];
+    }
+  }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
       this._data = JSON.parse(newValue);
@@ -97,12 +124,14 @@ export class StzhChipselect {
     else {
       this._data = newValue;
     }
-    this._dataDropdown = this._data.map((data) => {
-      return {
-        text: `${data.label} (${data.counter})`,
-        value: data.value
-      };
-    });
+    // this._dataDropdown = this._data.map((data) => {
+    //   return {
+    //     text: data.counter
+    //       ? `${data.label} (${data.counter})`
+    //       : data.label,
+    //     value: data.value
+    //   }
+    // });
   }
   errorWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -137,6 +166,7 @@ export class StzhChipselect {
     this.id = `stzh-chipselect-${chipselectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
+    this.valueWatcher(this.value);
     this.defaultValue = this.defaultValue || this.value;
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "chipselect");
@@ -153,13 +183,26 @@ export class StzhChipselect {
       "stzh-chipselect--has-error": errorUsed,
       "stzh-chipselect--is-invalid": this.invalid || errorUsed,
       "stzh-chipselect--is-disabled": this.disabled,
-      "stzh-chipselect--is-required": this.required
+      "stzh-chipselect--is-required": this.required,
+      "stzh-chipselect--has-label-hidden": this.labelHidden,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this._data.length > 0 &&
-      h(Fragment, null, h("div", { class: "stzh-chipselect__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: {
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, this.multiple
+      ?
+        h(Fragment, null, this._value.map((value) => h("input", { type: "hidden", name: this.name, value: value })))
+      :
+        h("input", { type: "hidden", name: this.name, value: this.value }), h("label", { class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional &&
+      h("span", { class: "stzh-chipselect__marker" }, h("span", { class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-chipselect__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this._data.length > 0 &&
+      h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "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-chipselect__chip": true,
           "is-focused": this.activeFocusOptionIndex === index
-        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, 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-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chipselect__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, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))));
+        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
+          ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   static get is() { return "stzh-chipselect"; }
   static get encapsulation() { return "scoped"; }
@@ -255,12 +298,48 @@ export class StzhChipselect {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether label is hidden."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Multiple"
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "value": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -277,8 +356,8 @@ export class StzhChipselect {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -469,7 +548,7 @@ export class StzhChipselect {
         },
         "complexType": {
           "original": "StzhChipselectChangeEvent",
-          "resolved": "{ component: \"stzh-chipselect\"; value: string; }",
+          "resolved": "{ component: \"stzh-chipselect\"; value: string | string[]; }",
           "references": {
             "StzhChipselectChangeEvent": {
               "location": "import",
@@ -483,6 +562,9 @@ export class StzhChipselect {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
         "propName": "data",
         "methodName": "dataWatcher"
       }, {