@oiz/stzh-components 2.0.0-beta → 2.0.0

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.stories.js

@@ -38,6 +38,15 @@ Default.args = {
   heading: 'Lorem ipsum'
 };
 
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  heading: 'Lorem ipsum',
+  description: 'Description',
+  icon: 'question-help',
+  'badge-empty': true,
+  'badge-type': 'warning'
+};
+
 export const WithSubtitle = Template.bind({});
 WithSubtitle.args = {
   heading: 'Lorem ipsum',

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

@@ -82,14 +82,6 @@ export class StzhActionset {
       this._actions = newValue;
     }
   }
-  // handleLoad(e) {
-  //   console.log(e);
-  //   requestAnimationFrame(() => {
-  //   requestAnimationFrame(() => {
-  //     this.update();
-  //   });
-  //   });
-  // }
   handleResize() {
     if (this.debounceResize) {
       window.cancelAnimationFrame(this.debounceResize);
@@ -144,7 +136,7 @@ export class StzhActionset {
         ? this.localization.furtherActions
         : (!this.isMedium ? this.localization.actions : "") }), h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
       // class="hide-medium show-when-collapsed"
-      icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); }
+      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
     }, action.label)))))))));
   }
   static get is() { return "stzh-actionset"; }

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

@@ -95,8 +95,23 @@
 }
 
 :host {
+  --color: var(--stzh-color-white);
+  --background-color: var(--stzh-base-color);
   display: inline-flex;
 }
+:host[type=success] {
+  --background-color: var(--stzh-color-truegreen);
+}
+:host[type=warning] {
+  --color: var(--stzh-color-grey87);
+  --background-color: var(--stzh-color-warning);
+}
+:host[type=error] {
+  --background-color: var(--stzh-color-error);
+}
+:host[type=info] {
+  --background-color: var(--stzh-color-zueriblue);
+}
 
 .stzh-badge {
   font-family: var(--stzh-font-family-heavy);
@@ -112,7 +127,12 @@
   box-shadow: 0 0 0 0.0625rem #fff;
   border-radius: 0.875rem;
   padding: 0.0625rem 0.375rem;
-  background-color: var(--stzh-color-shiraz);
-  color: var(--stzh-color-white);
+  background-color: var(--background-color);
+  color: var(--color);
   text-transform: uppercase;
+}
+.stzh-badge:empty {
+  width: 0.875rem;
+  height: 0.875rem;
+  padding: 0;
 }

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

@@ -6,9 +6,15 @@ export class StzhBadge {
   constructor() {
     /** Text content of the badge */
     this.label = "";
+    /** Type */
+    this.type = "default";
   }
   render() {
-    return (h(Host, null, h("div", { class: "stzh-badge" }, this.label)));
+    const classes = {
+      "stzh-badge": true,
+      [`stzh-badge--type-${this.type}`]: !!this.type
+    };
+    return (h(Host, null, h("div", { class: classes }, this.label)));
   }
   static get is() { return "stzh-badge"; }
   static get encapsulation() { return "scoped"; }
@@ -41,6 +47,24 @@ export class StzhBadge {
         "attribute": "label",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -8,8 +8,12 @@ export class StzhButton {
   constructor() {
     /** Display a badge aligned to button or icons */
     this.badge = "";
+    /** Badge type */
+    this.badgeType = "default";
     /** Badge position */
     this.badgePosition = "button";
+    /** Whether badge should be displayed empty */
+    this.badgeEmpty = false;
     /** Whether the button is full width */
     this.fullwidth = false;
     /** Size variant */
@@ -94,16 +98,16 @@ export class StzhButton {
     return (h("div", { class: "stzh-button__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-button__icon", name: this.icon })
       :
-        h("slot", { name: "icon" }), this.badge && this.badgePosition === "icon" && iconUsed &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge })));
+        h("slot", { name: "icon" }), (this.badge || this.badgeEmpty) && this.badgePosition === "icon" && iconUsed &&
+      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)));
   }
   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.badgePosition === "button" || !iconUsed) &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
+      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 })));
   }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
@@ -128,7 +132,7 @@ export class StzhButton {
         this.type === "radio" ?
           h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
           :
-            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -162,6 +166,24 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "badgeType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "badgePosition": {
         "type": "string",
         "mutable": false,
@@ -180,6 +202,24 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "\"button\""
       },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "fullwidth": {
         "type": "boolean",
         "mutable": false,

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

@@ -159,7 +159,6 @@
   border: var(--border);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
   /* Interactive Subtitle */
-  /* Type Alert */
   /* Collapsed (Header) */
   /* Starred */
   /** Hidden header / footer border */
@@ -230,19 +229,14 @@
 .stzh-card__header-right {
   padding-left: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  .stzh-card__header-right {
-    padding-left: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-card__header-right {
-    padding-left: var(--stzh-space-medium);
+    padding-left: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-card__header-right {
-    padding-left: var(--stzh-space-large);
+    padding-left: var(--stzh-space-medium);
   }
 }
 .stzh-card__left {
@@ -373,12 +367,6 @@
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-card--type-alert .stzh-card__subtitle {
-  color: var(--stzh-color-error);
-}
-.stzh-card--type-alert .stzh-card__subtitle:hover, .stzh-card--type-alert .stzh-card__subtitle:focus {
-  color: var(--stzh-color-error);
-}
 .stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
   display: none;
 }

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

@@ -13,7 +13,10 @@ export class StzhCard {
     this.collapsed = false;
     /** Whether card was starred */
     this.starred = false;
-    /** Whether card star is displayed */
+    /**
+     * Whether card star is displayed (with tooltip and menu-item in mobile popover).
+     * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).
+     */
     this.starrable = false;
     /** Whether card is selectable */
     this.selectable = false;
@@ -32,13 +35,18 @@ export class StzhCard {
     this._subtitles = [];
     /** Card header actions */
     this.headerActions = [];
-    /** Card footer actions */
+    /**
+     * Card footer actions.
+     * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.
+     * You can listen to clicks with the `stzhActionClick` event.
+     */
     this.footerActions = [];
     /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
     this.subtitleInteractive = false;
-    /** Type */
-    this.type = "default";
-    /** Whether sorting should be disabled */
+    /**
+     * Whether sorting should be disabled.
+     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
+     */
     this.sortableDisabled = false;
     /** Whether card is collapsible */
     this.collapsible = false;
@@ -46,7 +54,10 @@ export class StzhCard {
     this.hideHeaderBorder = false;
     /** Whether to hide footer separation border */
     this.hideFooterBorder = false;
-    /** Whether movement menu items should be shown */
+    /**
+     * Whether movement menu items should be shown.
+     * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
+     */
     this.hideMovementActions = false;
     this.nodeChange = (entries) => {
       let changeInSlot = false;
@@ -147,7 +158,6 @@ export class StzhCard {
     };
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
-      console.log(this.element, this.checked);
     };
   }
   handleResize() {
@@ -242,8 +252,7 @@ export class StzhCard {
       "stzh-card--has-hidden-footer-border": this.hideFooterBorder,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
-      "stzh-card--is-checked": this.checked,
-      [`stzh-card--type-${this.type}`]: !!this.type,
+      "stzh-card--is-checked": this.checked
     };
     const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
     const sortableChildElement = this.findSortableChildElement();
@@ -253,6 +262,11 @@ export class StzhCard {
     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
     // ];
@@ -263,15 +277,19 @@ export class StzhCard {
         "show-medium": !action.onlyCollapseText,
         "hide-when-collapsed": !action.onlyCollapseText,
         "hide-text-when-collapsed": action.onlyCollapseText
-      }, icon: action.icon, badge: action.badge, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+      }, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
         "show-medium": action.onlyCollapseText,
         "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)))), this.starrable &&
-      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-card__card-action-popover" }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
-      h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), this._headerActions.filter(action => !action.onlyCollapseText).map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, onClick: () => { this.actionClick(action); } }, action.label))), (!this.sortableDisabled && !this.hideMovementActions && this.sortable && !this.sortable.disabled) &&
-      h(Fragment, null, !isFirstItemInSortable &&
-        h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
-        h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
+      h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
+      h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+          "stzh-card__card-action-popover": true,
+          "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
+        } }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
+        h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), nonCollapsingTextHeaderActions.map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); } }, action.label))), sortableActionsEnabled &&
+        h(Fragment, null, !isFirstItemInSortable &&
+          h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
+          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
       h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
       h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))));
   }
@@ -357,7 +375,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether card star is displayed"
+          "text": "Whether card star is displayed (with tooltip and menu-item in mobile popover).\nThe tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`)."
         },
         "attribute": "starrable",
         "reflect": true,
@@ -529,7 +547,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Card footer actions"
+          "text": "Card footer actions.\nThe [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\nYou can listen to clicks with the `stzhActionClick` event."
         },
         "attribute": "footer-actions",
         "reflect": false,
@@ -553,24 +571,6 @@ export class StzhCard {
         "reflect": false,
         "defaultValue": "false"
       },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"alert\"",
-          "resolved": "\"alert\" | \"default\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
       "sortableDisabled": {
         "type": "boolean",
         "mutable": false,
@@ -583,7 +583,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether sorting should be disabled.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         "attribute": "sortable-disabled",
         "reflect": true,
@@ -655,7 +655,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether movement menu items should be shown"
+          "text": "Whether movement menu items should be shown.\nHas no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true."
         },
         "attribute": "hide-movement-actions",
         "reflect": false,

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

@@ -102,16 +102,13 @@ export const Default = Template.bind({});
 Default.args = {
   heading: 'Lorem ipsum',
   subtitle: 'Dolor si',
-  status: {
-    label: 'Test'
-  },
   'header-actions': headerActions,
   'footer-actions': `[
     {
       "id": "action-1",
       "icon": "arrow-right",
       "label": "Lorem",
-      "variant": "primary",
+      "variant": "default",
       "iconPosition": "right"
     }
   ]`

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

@@ -9,27 +9,10 @@ export class StzhCardList {
   constructor() {
     /** Whether collapse/expand toggle link */
     this.showToggleLink = false;
-    /** Whether sorting should be disabled */
-    this.sortableDisabled = false;
+    /** Whether sorting should be enabled */
+    this.sortableEnabled = false;
     /** HTML attribute that is used by the `toArray()` of sortable method */
     this.sortableDataIdAttribute = "data-id";
-    /** Algorithm how the ghost element will be cloned */
-    this.sortableGhostClone = (dragElement) => {
-      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
-      if (clonedStzhElement
-        && originalStzhElement
-        && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {
-        const clonedStzhElementCard = clonedStzhElement;
-        const originalStzhElementCard = originalStzhElement;
-        // copy every property that is not reflected to its attribute
-        clonedStzhElementCard.heading = originalStzhElementCard.heading;
-        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
-        clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;
-        clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;
-        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
-      }
-      return clonedElement;
-    };
     this.allCollapsed = false;
     this.collapseClick = () => {
       const cards = Array.from(this.element.querySelectorAll("stzh-card"));
@@ -48,6 +31,22 @@ export class StzhCardList {
       const cards = Array.from(this.element.querySelectorAll("stzh-card"));
       this.allCollapsed = !cards.some(card => !card.collapsed);
     };
+    this.sortableGhostClone = (dragElement) => {
+      const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);
+      if (clonedStzhElement
+        && originalStzhElement
+        && clonedStzhElement.tagName.toLowerCase() === "stzh-card") {
+        const clonedStzhElementCard = clonedStzhElement;
+        const originalStzhElementCard = originalStzhElement;
+        // copy every property that is not reflected to its attribute
+        clonedStzhElementCard.heading = originalStzhElementCard.heading;
+        clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;
+        clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;
+        clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;
+        clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;
+      }
+      return clonedElement;
+    };
   }
   collapseListener() {
     this.updateCollapsedState();
@@ -65,7 +64,7 @@ export class StzhCardList {
       "stzh-card-list": true
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-card-list__header" }, h("div", { class: "stzh-card-list__description" }, h("slot", { name: "description" })), this.showToggleLink &&
-      h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: this.sortableDisabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
+      h("stzh-link", { class: "stzh-card-list__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick })), h("stzh-sortable", { disabled: !this.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-card-list__cards", role: "list" }, h("slot", null))))));
   }
   static get is() { return "stzh-card-list"; }
   static get encapsulation() { return "scoped"; }
@@ -119,7 +118,7 @@ export class StzhCardList {
         "reflect": true,
         "defaultValue": "false"
       },
-      "sortableDisabled": {
+      "sortableEnabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -131,9 +130,9 @@ export class StzhCardList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether sorting should be disabled"
+          "text": "Whether sorting should be enabled"
         },
-        "attribute": "sortable-disabled",
+        "attribute": "sortable-enabled",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -154,32 +153,6 @@ export class StzhCardList {
         "attribute": "sortable-data-id-attribute",
         "reflect": false,
         "defaultValue": "\"data-id\""
-      },
-      "sortableGhostClone": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Function",
-          "resolved": "Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            },
-            "HTMLStzhCardElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Algorithm how the ghost element will be cloned"
-        },
-        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement, clonedStzhElement, originalStzhElement] = cloneElement(dragElement);\n\n    if (\n      clonedStzhElement\n      && originalStzhElement\n      && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    ) {\n      const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n      const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedStzhElementCard.heading = originalStzhElementCard.heading;\n      clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n      clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n      clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n      clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    }\n\n    return clonedElement;\n  }"
       }
     };
   }

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

@@ -116,7 +116,7 @@ const Template = (args) => (
     <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
       <div slot="content">Content</div>
     </stzh-card>
-    <stzh-card collapsible starrable heading="Lorem ipsum 4">
+    <stzh-card collapsible heading="Lorem ipsum 4">
       <stzh-cspace slot="content">
         <p>Content with Input:</p>
         <stzh-input></stzh-input>
@@ -128,5 +128,5 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  'show-toggle-Link': true
+  'show-toggle-link': true
 };

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

@@ -27,6 +27,8 @@ export class StzhChip {
     this.disabled = false;
     /** Invert (only available for tag variant) */
     this.invert = false;
+    /** Id for element which describes the button */
+    this.a11yDescribedby = "";
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -80,7 +82,7 @@ export class StzhChip {
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, 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" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
+      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" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
@@ -297,6 +299,41 @@ export class StzhChip {
         "attribute": "invert",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for screen readers to replace visible text"
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the button"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }