@oiz/stzh-components 1.5.0-alpha → 2.0.0

package/dist/components/index.d.ts

@@ -2,11 +2,14 @@
 export { StzhAccordion as StzhAccordion } from '../types/components/stzh-accordion/stzh-accordion';
 export { StzhAccordionItem as StzhAccordionItem } from '../types/components/stzh-accordion-item/stzh-accordion-item';
 export { StzhActions as StzhActions } from '../types/components/stzh-actions/stzh-actions';
+export { StzhActionset as StzhActionset } from '../types/components/stzh-actionset/stzh-actionset';
 export { StzhAppnav as StzhAppnav } from '../types/components/stzh-appnav/stzh-appnav';
 export { StzhAppointments as StzhAppointments } from '../types/components/stzh-appointments/stzh-appointments';
 export { StzhBadge as StzhBadge } from '../types/components/stzh-badge/stzh-badge';
 export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-button';
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
+export { StzhCard as StzhCard } from '../types/components/stzh-card/stzh-card';
+export { StzhCardList as StzhCardList } from '../types/components/stzh-card-list/stzh-card-list';
 export { StzhCell as StzhCell } from '../types/components/stzh-cell/stzh-cell';
 export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/stzh-checkbox';
 export { StzhCheckboxgroup as StzhCheckboxgroup } from '../types/components/stzh-checkboxgroup/stzh-checkboxgroup';
@@ -14,6 +17,7 @@ export { StzhChip as StzhChip } from '../types/components/stzh-chip/stzh-chip';
 export { StzhChipSelect as StzhChipSelect } from '../types/components/stzh-chip-select/stzh-chip-select';
 export { StzhContainer as StzhContainer } from '../types/components/stzh-container/stzh-container';
 export { StzhCspace as StzhCspace } from '../types/components/stzh-cspace/stzh-cspace';
+export { StzhDatalist as StzhDatalist } from '../types/components/stzh-datalist/stzh-datalist';
 export { StzhDatamessagelist as StzhDatamessagelist } from '../types/components/stzh-datamessagelist/stzh-datamessagelist';
 export { StzhDatamessagelistItem as StzhDatamessagelistItem } from '../types/components/stzh-datamessagelist-item/stzh-datamessagelist-item';
 export { StzhDatatable as StzhDatatable } from '../types/components/stzh-datatable/stzh-datatable';
@@ -55,8 +59,6 @@ export { StzhRichtext as StzhRichtext } from '../types/components/stzh-richtext/
 export { StzhRow as StzhRow } from '../types/components/stzh-row/stzh-row';
 export { StzhSaptcha as StzhSaptcha } from '../types/components/stzh-saptcha/stzh-saptcha';
 export { StzhSection as StzhSection } from '../types/components/stzh-section/stzh-section';
-export { StzhServicecard as StzhServicecard } from '../types/components/stzh-servicecard/stzh-servicecard';
-export { StzhServicecardList as StzhServicecardList } from '../types/components/stzh-servicecard-list/stzh-servicecard-list';
 export { StzhSkiplink as StzhSkiplink } from '../types/components/stzh-skiplink/stzh-skiplink';
 export { StzhSortable as StzhSortable } from '../types/components/stzh-sortable/stzh-sortable';
 export { StzhStatus as StzhStatus } from '../types/components/stzh-status/stzh-status';

package/dist/components/index.js

@@ -2,11 +2,14 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { StzhAccordion, defineCustomElement as defineCustomElementStzhAccordion } from './stzh-accordion.js';
 export { StzhAccordionItem, defineCustomElement as defineCustomElementStzhAccordionItem } from './stzh-accordion-item.js';
 export { StzhActions, defineCustomElement as defineCustomElementStzhActions } from './stzh-actions.js';
+export { StzhActionset, defineCustomElement as defineCustomElementStzhActionset } from './stzh-actionset.js';
 export { StzhAppnav, defineCustomElement as defineCustomElementStzhAppnav } from './stzh-appnav.js';
 export { StzhAppointments, defineCustomElement as defineCustomElementStzhAppointments } from './stzh-appointments.js';
 export { StzhBadge, defineCustomElement as defineCustomElementStzhBadge } from './stzh-badge.js';
 export { StzhButton, defineCustomElement as defineCustomElementStzhButton } from './stzh-button.js';
 export { StzhCalendar, defineCustomElement as defineCustomElementStzhCalendar } from './stzh-calendar.js';
+export { StzhCard, defineCustomElement as defineCustomElementStzhCard } from './stzh-card.js';
+export { StzhCardList, defineCustomElement as defineCustomElementStzhCardList } from './stzh-card-list.js';
 export { StzhCell, defineCustomElement as defineCustomElementStzhCell } from './stzh-cell.js';
 export { StzhCheckbox, defineCustomElement as defineCustomElementStzhCheckbox } from './stzh-checkbox.js';
 export { StzhCheckboxgroup, defineCustomElement as defineCustomElementStzhCheckboxgroup } from './stzh-checkboxgroup.js';
@@ -14,6 +17,7 @@ export { StzhChip, defineCustomElement as defineCustomElementStzhChip } from './
 export { StzhChipSelect, defineCustomElement as defineCustomElementStzhChipSelect } from './stzh-chip-select.js';
 export { StzhContainer, defineCustomElement as defineCustomElementStzhContainer } from './stzh-container.js';
 export { StzhCspace, defineCustomElement as defineCustomElementStzhCspace } from './stzh-cspace.js';
+export { StzhDatalist, defineCustomElement as defineCustomElementStzhDatalist } from './stzh-datalist.js';
 export { StzhDatamessagelist, defineCustomElement as defineCustomElementStzhDatamessagelist } from './stzh-datamessagelist.js';
 export { StzhDatamessagelistItem, defineCustomElement as defineCustomElementStzhDatamessagelistItem } from './stzh-datamessagelist-item.js';
 export { StzhDatatable, defineCustomElement as defineCustomElementStzhDatatable } from './stzh-datatable.js';
@@ -55,8 +59,6 @@ export { StzhRichtext, defineCustomElement as defineCustomElementStzhRichtext }
 export { StzhRow, defineCustomElement as defineCustomElementStzhRow } from './stzh-row.js';
 export { StzhSaptcha, defineCustomElement as defineCustomElementStzhSaptcha } from './stzh-saptcha.js';
 export { StzhSection, defineCustomElement as defineCustomElementStzhSection } from './stzh-section.js';
-export { StzhServicecard, defineCustomElement as defineCustomElementStzhServicecard } from './stzh-servicecard.js';
-export { StzhServicecardList, defineCustomElement as defineCustomElementStzhServicecardList } from './stzh-servicecard-list.js';
 export { StzhSkiplink, defineCustomElement as defineCustomElementStzhSkiplink } from './stzh-skiplink.js';
 export { StzhSortable, defineCustomElement as defineCustomElementStzhSortable } from './stzh-sortable.js';
 export { StzhStatus, defineCustomElement as defineCustomElementStzhStatus } from './stzh-status.js';
@@ -72,7 +74,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "1.5.0-alpha";
+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-servicecard.d.ts → stzh-actionset.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface StzhServicecard extends Components.StzhServicecard, HTMLElement {}
-export const StzhServicecard: {
-  prototype: StzhServicecard;
-  new (): StzhServicecard;
+interface StzhActionset extends Components.StzhActionset, HTMLElement {}
+export const StzhActionset: {
+  prototype: StzhActionset;
+  new (): StzhActionset;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/stzh-actionset.js

@@ -0,0 +1,6 @@
+import { S as StzhActionset$1, d as defineCustomElement$1 } from './stzh-actionset2.js';
+
+const StzhActionset = StzhActionset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhActionset, defineCustomElement };

package/dist/components/stzh-actionset2.js

@@ -0,0 +1,219 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as fetchTranslations } from './translation-utils.js';
+import { m as media } from './media-utils.js';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-button2.js';
+import { d as defineCustomElement$5 } from './stzh-icon2.js';
+import { d as defineCustomElement$4 } from './stzh-menu2.js';
+import { d as defineCustomElement$3 } from './stzh-menu-item2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
+
+const stzhActionsetCss = ".sc-stzh-actionset-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-actionset-h{display:none}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-actionset__actions.sc-stzh-actionset{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto;opacity:1}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover.sc-stzh-actionset{display:none}}";
+
+const StzhActionset = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhActionClick = createEvent(this, "stzhActionClick", 7);
+    /** Variant determining what position the action buttons are */
+    this.variant = "stack";
+    /** Popover button variant */
+    this.popoverButtonVariant = "";
+    /** Popover button size */
+    this.popoverButtonSize = "";
+    /** Popover placement */
+    this.popoverPlacement = "bottom-end";
+    /** Card header actions */
+    this.actions = [];
+    this._actions = [];
+    this.actionsCollapsed = [];
+    this.actionClick = (action) => {
+      this.stzhActionClick.emit({
+        component: "stzh-actionset",
+        action
+      });
+    };
+    this.update = () => {
+      this.isSmall = media("small").matches;
+      this.isMedium = media("medium").matches;
+      if (!this.actionsElement) {
+        return;
+      }
+      Object.assign(this.actionsElement.style, {
+        width: null,
+        height: null
+      });
+      let newActionsVisible = 0;
+      if (this.variant === "overflow" && this.isMedium
+        || this.variant === "stack" && this.isSmall) {
+        this.dynamicActions = true;
+        let newActionsHeight = 0;
+        let newActionsWidth = 0;
+        // update height and width
+        Array.from(this.actionsElement.children).forEach((child) => {
+          // check which item is visible and
+          if (child.offsetTop === 0) {
+            newActionsVisible++;
+            const style = getComputedStyle(child);
+            const marginLeft = parseInt(style.marginLeft);
+            const marginRight = parseInt(style.marginRight);
+            const marginTop = parseInt(style.marginTop);
+            const marginBottom = parseInt(style.marginBottom);
+            const childWidth = child.offsetWidth + marginLeft + marginRight;
+            const childHeight = child.offsetHeight + marginTop + marginBottom;
+            if (newActionsHeight < childHeight) {
+              newActionsHeight = childHeight;
+            }
+            newActionsWidth = newActionsWidth + childWidth;
+          }
+        });
+        Object.assign(this.actionsElement.style, {
+          width: `${newActionsWidth + 1}px`,
+          height: `${newActionsHeight}px`
+        });
+      }
+      else {
+        this.dynamicActions = false;
+        if (this.variant === "overflow") {
+          newActionsVisible = 0;
+        }
+        else if (this.variant === "stack") {
+          newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
+        }
+      }
+      this.actionsCollapsed = this._actions.slice(newActionsVisible);
+    };
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  async componentWillLoad() {
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "actionset");
+    }
+  }
+  componentDidLoad() {
+    this.update();
+  }
+  render() {
+    const classes = {
+      "stzh-actionset": true,
+      // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
+      "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
+      [`stzh-actionset--${this.variant}`]: !!this.variant
+    };
+    const Action = (action) => (h("stzh-button", { class: {
+        "stzh-actionset__action": true,
+        "is-button": true,
+        // "show-medium": !action.onlyCollapseText,
+        // "hide-when-collapsed": !action.onlyCollapseText,
+        // "hide-text-when-collapsed": action.onlyCollapseText
+      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+        ? action.variant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
+        ? action.size
+        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+      // "show-medium": action.onlyCollapseText,
+      // "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)));
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+      || (!this.dynamicActions &&
+        this.actionsCollapsed.indexOf(action) === -1))
+      &&
+        (action.tooltipContent
+          ?
+            h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
+          :
+            Action(action))))), h("stzh-popover", { label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+        ? this.popoverButtonVariant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
+        ? this.popoverButtonSize
+        : (this.variant === "stack" ? "default" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
+        ? 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, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
+    }, action.label)))))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "actions": ["actionsWatcher"]
+  }; }
+  static get style() { return stzhActionsetCss; }
+}, [2, "stzh-actionset", {
+    "localization": [16],
+    "variant": [513],
+    "popoverButtonVariant": [513, "popover-button-variant"],
+    "popoverButtonSize": [513, "popover-button-size"],
+    "popoverPlacement": [513, "popover-placement"],
+    "actions": [1],
+    "actionsCollapsed": [32],
+    "dynamicActions": [32],
+    "isSmall": [32],
+    "isMedium": [32]
+  }, [[8, "appload", "handleResize"], [9, "resize", "handleResize"], [8, "DOMContentLoaded", "handleResize"], [8, "load", "handleResize"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-actionset", "stzh-badge", "stzh-button", "stzh-icon", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-actionset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhActionset);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhActionset as S, defineCustomElement as d };

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") {