@oiz/stzh-components 2.0.0-beta → 2.0.0

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

@@ -123,19 +123,14 @@
 :host([curve=tiny]) {
   --space: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  :host([curve=tiny]) {
-    --space: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-medium);
+    --space: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-large);
+    --space: var(--stzh-space-medium);
   }
 }
 
@@ -147,6 +142,11 @@
     --space: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-large);
+  }
+}
 
 :host([curve=regular]) {
   --space: var(--stzh-space-medium);
@@ -163,35 +163,25 @@
 }
 
 :host([curve=medium]) {
-  --space: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=medium]) {
-    --space: var(--stzh-space-large);
-  }
+  --space: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xlarge);
+    --space: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 
 :host([curve=large]) {
-  --space: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=large]) {
-    --space: var(--stzh-space-xlarge);
-  }
+  --space: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -201,13 +191,18 @@
 }
 
 :host([curve=big]) {
-  --space: var(--stzh-space-xxlarge);
+  --space: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xbig);
@@ -215,7 +210,7 @@
 }
 
 :host([curve=huge]) {
-  --space: var(--stzh-space-xxxlarge);
+  --space: var(--stzh-space-xxxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=huge]) {

package/dist/collection/pages/meinkonto.stories.js

@@ -170,7 +170,7 @@ const TemplateServices = (args) => (
 
         <stzh-vspace curve="large"></stzh-vspace>
 
-        <stzh-card-list show-toggle-link>
+        <stzh-card-list show-toggle-link sortable-enabled>
           <stzh-text slot="description">
             Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
           </stzh-text>

package/dist/components/index.js

@@ -74,7 +74,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "2.0.0-beta";
+const version = "2.0.0";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

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

@@ -1,22 +1,24 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { w as waitForEvent } from './event-utils.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesHeightAuto } from './animation-utils.js';
+import { d as defineCustomElement$3 } from './stzh-badge2.js';
+import { d as defineCustomElement$2 } from './stzh-icon2.js';
 
-const stzhAccordionItemCss = ".sc-stzh-accordion-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-accordion-item-h{display:none}.sc-stzh-accordion-item-h *.sc-stzh-accordion-item,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::before,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-item-h{--trigger-size:1.3125rem;--content-padding:var(--stzh-accordion-content-padding);--content-background:var(--stzh-accordion-content-background)}.stzh-accordion-item__heading.sc-stzh-accordion-item{margin:0}.stzh-accordion-item__button.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:3.75rem;border:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-align:left;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 1024px){.stzh-accordion-item__button.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-accordion-item__button.sc-stzh-accordion-item:hover,.stzh-accordion-item__button.sc-stzh-accordion-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-accordion-item__button-text.sc-stzh-accordion-item{-ms-flex-positive:1;flex-grow:1}.stzh-accordion-item__button-icon.sc-stzh-accordion-item{position:relative;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.0625rem;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s;-webkit-transform-origin:top left;transform-origin:top left;background-color:currentColor}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before{-webkit-transform:rotate(180deg) translate(-50%, -50%);transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(90deg) translate(-50%, -50%);transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__content.sc-stzh-accordion-item{overflow:hidden;background-color:var(--content-background)}.stzh-accordion-item__content-inner.sc-stzh-accordion-item{padding:var(--content-padding)}.stzh-accordion-item__subtitle.sc-stzh-accordion-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-accordion-item__heading.sc-stzh-accordion-item,.stzh-accordion-item__subtitle.sc-stzh-accordion-item{display:block}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{padding:var(--stzh-space-medium)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-base-color)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-color-white)}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(0) translate(-50%, -50%);transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-disabled.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{cursor:not-allowed;color:var(--stzh-color-grey61);border-color:var(--stzh-color-grey5);background-color:var(--stzh-color-grey5)}";
+const stzhAccordionItemCss = ".sc-stzh-accordion-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-accordion-item-h{display:none}.sc-stzh-accordion-item-h *.sc-stzh-accordion-item,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::before,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-item-h{--trigger-size:1.3125rem;--content-padding:var(--stzh-accordion-content-padding);--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size-small)}.sc-stzh-accordion-item-h .sc-stzh-accordion-item-s>stzh-icon,.stzh-accordion-item__icon.sc-stzh-accordion-item{--size:var(--icon-size)}.stzh-accordion-item__heading.sc-stzh-accordion-item{position:relative;margin:0}.stzh-accordion-item__button.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:3.75rem;border:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-align:left;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 1024px){.stzh-accordion-item__button.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-accordion-item__button.sc-stzh-accordion-item:hover,.stzh-accordion-item__button.sc-stzh-accordion-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-accordion-item__button-text.sc-stzh-accordion-item{-ms-flex-positive:1;flex-grow:1}.stzh-accordion-item__button-icon.sc-stzh-accordion-item{position:relative;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.0625rem;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s;-webkit-transform-origin:top left;transform-origin:top left;background-color:currentColor}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before{-webkit-transform:rotate(180deg) translate(-50%, -50%);transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(90deg) translate(-50%, -50%);transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__content.sc-stzh-accordion-item{overflow:hidden;background-color:var(--content-background)}.stzh-accordion-item__content-inner.sc-stzh-accordion-item{padding:var(--content-padding)}.stzh-accordion-item__icon-wrapper.sc-stzh-accordion-item{-ms-flex-item-align:start;align-self:flex-start}.stzh-accordion-item__icon-wrapper.sc-stzh-accordion-item:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item__badge.sc-stzh-accordion-item{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description.sc-stzh-accordion-item,.stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-accordion-item__description.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-accordion-item__description.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-accordion-item__heading.sc-stzh-accordion-item,.stzh-accordion-item__description.sc-stzh-accordion-item,.stzh-accordion-item__subtitle.sc-stzh-accordion-item{display:block}.stzh-accordion-item--has-description.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item,.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{padding:var(--stzh-space-medium)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__description.sc-stzh-accordion-item,.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-color-white)}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(0) translate(-50%, -50%);transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-disabled.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{cursor:not-allowed;color:var(--stzh-color-grey61);border-color:var(--stzh-color-grey5);background-color:var(--stzh-color-grey5)}";
 
 const ANIMATION_SHOW = {
   keyframes: [
-    { height: '0', opacity: '0' },
-    { height: 'auto', opacity: '1' }
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
   ],
-  options: { duration: 300, easing: 'linear' }
+  options: { duration: 300, easing: "linear" }
 };
 const ANIMATION_HIDE = {
   keyframes: [
-    { height: 'auto', opacity: '1' },
-    { height: '0', opacity: '0' }
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
   ],
-  options: { duration: 300, easing: 'linear' }
+  options: { duration: 300, easing: "linear" }
 };
 let accordionItemCounter = 0;
 const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -35,6 +37,16 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.heading = "";
     /** Subtitle */
     this.subtitle = "";
+    /** Description */
+    this.description = "";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Badge */
+    this.badge = "";
+    /** Whether badge should be displayed empty */
+    this.badgeEmpty = false;
+    /** Badge type */
+    this.badgeType = "default";
     /** Heading level */
     this.headingLevel = "3";
     this.toggledByMethod = false;
@@ -89,32 +101,34 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
       await stopAnimations(this.bodyElement);
       this.bodyElement.hidden = false;
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
-      this.bodyElement.style.height = 'auto';
+      this.bodyElement.style.height = "auto";
+      this.bodyElement.style.overflow = "auto";
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
     }
     else {
       if (this.toggledByMethod) {
         this.stzhClose.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
       await stopAnimations(this.bodyElement);
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
       this.bodyElement.hidden = true;
-      this.bodyElement.style.height = 'auto';
+      this.bodyElement.style.height = "0px";
+      this.bodyElement.style.overflow = "hidden";
       if (this.toggledByMethod) {
         this.stzhClosed.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
     }
@@ -156,17 +170,23 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   }
   componentDidLoad() {
     this.bodyElement.hidden = !this.open;
-    this.bodyElement.style.height = this.open ? "auto" : "0";
+    this.bodyElement.style.height = this.open ? "auto" : "0px";
+    this.bodyElement.style.overflow = this.open ? "auto" : "hidden";
   }
   render() {
     const Heading = `h${this.headingLevel}`;
     const classes = {
       "stzh-accordion-item": true,
+      "stzh-accordion-item--has-description": !!this.description,
       "stzh-accordion-item--has-subtitle": !!this.subtitle,
       "stzh-accordion-item--is-open": this.open,
       "stzh-accordion-item--is-disabled": this.disabled,
     };
-    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading)), h("span", { class: "stzh-accordion-item__button-icon" }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__icon-wrapper" }, this.icon ?
+      h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })
+      :
+        h("slot", { name: "icon" })), h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading), h("span", { class: "stzh-accordion-item__description" }, this.description)), h("span", { class: "stzh-accordion-item__button-icon" }), (this.badge || this.badgeEmpty) &&
+      h("stzh-badge", { class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -178,6 +198,11 @@ const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "disabled": [516],
     "heading": [1],
     "subtitle": [1],
+    "description": [1],
+    "icon": [1],
+    "badge": [1],
+    "badgeEmpty": [516, "badge-empty"],
+    "badgeType": [513, "badge-type"],
     "headingLevel": [513, "heading-level"],
     "show": [64],
     "hide": [64],
@@ -188,13 +213,23 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-accordion-item"];
+  const components = ["stzh-accordion-item", "stzh-badge", "stzh-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-accordion-item":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, StzhAccordionItem$1);
       }
       break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/stzh-actionset2.js

@@ -93,14 +93,6 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this._actions = newValue;
     }
   }
-  // handleLoad(e) {
-  //   console.log(e);
-  //   requestAnimationFrame(() => {
-  //   requestAnimationFrame(() => {
-  //     this.update();
-  //   });
-  //   });
-  // }
   handleResize() {
     if (this.debounceResize) {
       window.cancelAnimationFrame(this.debounceResize);
@@ -155,7 +147,7 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         ? 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)))))))));
   }
   get element() { return this; }

package/dist/components/stzh-badge2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhBadgeCss = ".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-badge-h{display:-ms-inline-flexbox;display:inline-flex}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;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);text-transform:uppercase}";
+const stzhBadgeCss = ".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";
 
 const StzhBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,13 +8,20 @@ const StzhBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     /** 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 style() { return stzhBadgeCss; }
 }, [2, "stzh-badge", {
-    "label": [1]
+    "label": [1],
+    "type": [513]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-button2.js

@@ -14,8 +14,12 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhChange = createEvent(this, "stzhChange", 7);
     /** 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 */
@@ -100,16 +104,16 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -134,13 +138,15 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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))));
   }
   get element() { return this; }
   static get style() { return stzhButtonCss; }
 }, [6, "stzh-button", {
     "badge": [1],
+    "badgeType": [513, "badge-type"],
     "badgePosition": [513, "badge-position"],
+    "badgeEmpty": [516, "badge-empty"],
     "fullwidth": [516],
     "size": [513],
     "textAlign": [513, "text-align"],

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

@@ -15,27 +15,10 @@ const StzhCardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.stzhCollapseAll = createEvent(this, "stzhCollapseAll", 7);
     /** 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"));
@@ -54,6 +37,22 @@ const StzhCardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       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();
@@ -71,16 +70,15 @@ const StzhCardList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       "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))))));
   }
   get element() { return this; }
   static get style() { return stzhCardListCss; }
 }, [6, "stzh-card-list", {
     "localization": [16],
     "showToggleLink": [516, "show-toggle-link"],
-    "sortableDisabled": [4, "sortable-disabled"],
+    "sortableEnabled": [4, "sortable-enabled"],
     "sortableDataIdAttribute": [1, "sortable-data-id-attribute"],
-    "sortableGhostClone": [16],
     "allCollapsed": [32]
   }, [[0, "stzhCollapse", "collapseListener"]]]);
 function defineCustomElement$1() {