@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/components/stzh-card2.js

@@ -11,7 +11,7 @@ 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 stzhCardCss = ".sc-stzh-card-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-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-popover);--border-color:var(--stzh-base-border-color);--border-radius:0.1875rem;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:none}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:hover,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:focus-within,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-selected,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-chosen,.is-selected [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]),.is-chosen [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:var(--stzh-box-shadow-popover)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border-color:transparent;overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h .sc-stzh-card-s>*{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-card.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-width:0.0625rem;border-style:solid;border-color:var(--border-color);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .vshow-medium.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .show-medium.sc-stzh-card{display:none}}@media screen and (min-width: 1024px){.stzh-card.sc-stzh-card .hide-medium.sc-stzh-card{display:none}}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card__header-top.sc-stzh-card{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:-ms-inline-flexbox;display:inline-flex;margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-card__subtitle.sc-stzh-card{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-card__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-color-grey70)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{z-index:1}.stzh-card--has-link.sc-stzh-card .stzh-card__card-actions.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card .stzh-card__image-link.sc-stzh-card:hover+.stzh-card__content-wrapper.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:hover,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .vhide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .vhide-when-collapsed.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .show-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .show-when-collapsed.sc-stzh-card{display:block}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
+const stzhCardCss = ".sc-stzh-card-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-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-popover);--border-color:var(--stzh-base-border-color);--border-radius:0.1875rem;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:none}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:hover,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:focus-within,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-selected,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-chosen,.is-selected [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]),.is-chosen [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:var(--stzh-box-shadow-popover)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border-color:transparent;overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h .sc-stzh-card-s>*{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-card.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-width:0.0625rem;border-style:solid;border-color:var(--border-color);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .vshow-medium.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .show-medium.sc-stzh-card{display:none}}@media screen and (min-width: 1024px){.stzh-card.sc-stzh-card .hide-medium.sc-stzh-card{display:none}}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:-ms-inline-flexbox;display:inline-flex;margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-card__subtitle.sc-stzh-card{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-card__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-color-grey70)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{z-index:1}.stzh-card--has-link.sc-stzh-card .stzh-card__card-actions.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card .stzh-card__image-link.sc-stzh-card:hover+.stzh-card__content-wrapper.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:hover,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .vhide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .vhide-when-collapsed.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .show-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .show-when-collapsed.sc-stzh-card{display:block}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
 
 const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLElement {
   constructor() {
@@ -162,11 +162,16 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
   }
   subtitleWatcher(newValue) {
     if (typeof newValue === "string") {
-      try {
-        this._subtitles = JSON.parse(newValue);
+      if (newValue === "") {
+        this._subtitles = [];
       }
-      catch (err) {
-        this._subtitles = [newValue];
+      else {
+        try {
+          this._subtitles = JSON.parse(newValue);
+        }
+        catch (err) {
+          this._subtitles = [newValue];
+        }
       }
     }
     else {
@@ -226,8 +231,12 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
   }
   componentDidRender() {
     requestAnimationFrame(() => {
-      this.imageLinkElement.setAttribute("s-object-id", this.analyticsId || this.headingTextElement.innerText);
-      this.titleLinkElement.setAttribute("s-object-id", this.analyticsId || this.headingTextElement.innerText);
+      var _a, _b, _c;
+      const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+      if (objectId) {
+        (_b = this.imageLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+        (_c = this.titleLinkElement) === null || _c === void 0 ? void 0 : _c.setAttribute("s-object-id", objectId);
+      }
     });
   }
   connectedCallback() {
@@ -251,6 +260,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
   render() {
     var _a, _b, _c;
     const imageUsed = hasSlot(this.element, "image");
+    const headingUsed = hasSlot(this.element, "heading");
     const contentUsed = hasSlot(this.element, "content");
     const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
     const sortableChildElement = this.findSortableChildElement();
@@ -266,6 +276,16 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
     // const headerActions = [
     //   ...this._headerActions
     // ];
+    const hasHeading = !!this.heading || headingUsed;
+    const hasHeader = hasHeading
+      || this._subtitles.length > 0
+      || this._headerActions.length > 0
+      || nonCollapsingTextHeaderActions.length > 0
+      || this.starrable
+      || sortableActionsEnabled;
+    const hasFooter = this._footerActions.length > 0
+      || this.selectable
+      || this.withArrow;
     const classes = {
       "stzh-card": true,
       "stzh-card--has-link": !!this.href,
@@ -275,13 +295,16 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
       "stzh-card--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
       "stzh-card--has-hidden-header-border": this.hideHeaderBorder,
       "stzh-card--has-hidden-footer-border": this.hideFooterBorder,
+      "stzh-card--has-header": hasHeader,
+      "stzh-card--has-footer": hasFooter,
       "stzh-card--is-collapsible": this.collapsible,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
       "stzh-card--is-checked": this.checked,
       "stzh-card--is-sortable": sortableEnabled
     };
-    return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { ref: (el) => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { ref: (el) => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), this._subtitles.length > 0 &&
+    return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { ref: (el) => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, hasHeading &&
+      h("h3", { class: "stzh-card__title" }, h("a", { ref: (el) => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), this._subtitles.length > 0 &&
       h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
         "stzh-card__card-action": true,
         "is-button": true,

package/dist/components/stzh-card2.js.map

@@ -1 +1 @@
-{"file":"stzh-card2.js","mappings":"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","names":[],"sources":["./src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","./src/components/stzh-card/stzh-card.tsx"],"sourcesContent":[":host {\n  --box-shadow: #{$boxShadowPopover};\n  --border-color: #{$baseBorderColor};\n  --border-radius: 3px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &[hide-elevation]:not([hide-elevation=\"false\"]) {\n    --box-shadow: none;\n\n    &[href]:hover,\n    &[href]:focus-within,\n    &.is-selected,\n    &.is-chosen,\n    .is-selected &,\n    .is-chosen & {\n      --box-shadow: #{$boxShadowPopover};\n    }\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    --box-shadow: none;\n    --border-color: transparent;\n\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted(*) {\n    @include fontSize('milli');\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted([slot=\"meta\"]:not(:last-child)) {\n    margin-right: space('xsmall');\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n  @include font('heavy');\n  @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n  .vshow-medium {\n    @include mq($to: medium) {\n      @include visuallyhidden;\n    }\n  }\n\n  .show-medium {\n    @include mq($to: medium) {\n      display: none;\n    }\n  }\n\n  .hide-medium {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n\t&__dnd {\n    --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n\t}\n\n  &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n  &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n    }\n  }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n\t&__subtitle {\n    @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n    flex-grow: 1;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'regular');\n    }\n\t}\n\n  &__footer {\n    &:not(:empty) {\n      @include spaceCurve('padding', 'regular');\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  &__footer-arrow {\n    --size: #{iconSize('medium')};\n    color: $colorPrimary;\n  }\n\n  &__card-actions {\n\t\tdisplay: inline-flex;\n    white-space: nowrap;\n\t}\n\n\t&__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$colorGrey70};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n\t}\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link &__image-link:hover + &__content-wrapper &__title-link,\n  &--has-link &__title-link:hover,\n  &--has-link &__title-link:focus {\n    color: $colorPrimaryHover;\n\n  //   &::before,\n  //   &::before {\n  //     background-color: $colorPrimary4;\n  //   }\n  }\n\n  &--has-link:hover &__footer-arrow {\n    color: $colorPrimaryHover;\n  }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    .vhide-when-collapsed {\n      @include visuallyhidden;\n    }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    .show-when-collapsed {\n      display: block;\n    }\n  }\n\n  &--is-collapsed &__header {\n    border-bottom: none;\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /** Hidden header / footer border */\n\n  &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n    padding-bottom: 0;\n  }\n\n  &--has-hidden-footer-border &__footer {\n    &:not(:empty) {\n      padding-top: 0;\n      border-top: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Fragment,\n  forceUpdate\n} from \"@stencil/core\";\n\nimport {\n  StzhCardHeaderAction,\n  StzhActionsetItem,\n  StzhCardCollapseEvent,\n  StzhCardSubtitleClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardClickEvent,\n  StzhCardHeaderActionClickEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether card arrow is shown in footer area */\n  @Prop({ reflect: true }) withArrow: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /** Whether to hide header separation border */\n  @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n  /** Whether to hide footer separation border */\n  @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n  /** Whether card elevation should be hidden */\n  @Prop({ reflect: true }) hideElevation: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._subtitles = JSON.parse(newValue);\n      } catch(err) {\n        this._subtitles = [newValue];\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  @Watch(\"collapsed\")\n  collapsedWatcher() {\n    this.handleResize();\n  }\n\n  private observer: MutationObserver;\n\n  private nodeChange = (entries) => {\n    let changeInSlot = false;\n\n    entries.forEach((entry) => {\n      if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  private mainElement: HTMLElement;\n  private headerElement: HTMLElement;\n  private headerLeftElement: HTMLElement;\n  private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private update = () => {\n    if (!this.mainElement) {\n      return;\n    }\n\n    this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n    if (media('medium').matches) {\n      const headerWidth = this.headerElement.clientWidth;\n      const leftWidth = this.headerLeftElement.clientWidth;\n      const rightWidth = this.headerRightElement.clientWidth;\n\n      if (headerWidth - leftWidth <= rightWidth) {\n        this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n      }\n    }\n  }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r))\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed\n      });\n    }\n  }\n\n  private subtitleClick = () => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\"\n      });\n    }\n  }\n\n  private starToggleClick = () => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred\n    });\n  }\n\n  private actionClick = (action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action\n    });\n  }\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  }\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  }\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  }\n\n  private init = () => {\n    const chips = this.element.querySelectorAll(\n      'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    );\n\n    chips.forEach((chip) => {\n      setPropsIfNull(chip, {\n        size: \"small\"\n      } as HTMLStzhChipElement)\n    });\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private handleMutation = (entries) => {\n    this.init();\n    this.nodeChange(entries);\n  }\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  }\n\n  private cardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent\n    });\n  }\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"card\");\n    }\n  }\n\n  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.imageLinkElement.setAttribute(\"s-object-id\", this.analyticsId || this.headingTextElement.innerText);\n      this.titleLinkElement.setAttribute(\"s-object-id\", this.analyticsId || this.headingTextElement.innerText);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n      \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.cardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n            <header\n              ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    <h3 class=\"stzh-card__title\">\n                      <a\n                        ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n                        class=\"stzh-card__title-link\"\n                        href={this.href}\n                        target={this.target}\n                        onClick={this.href ? this.cardClick : null}\n                      >\n                        <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                          {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                        </div>\n                      </a>\n                    </h3>\n                    {this._subtitles.length > 0 &&\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    }\n                  </div>\n                </div>\n                <div\n                  ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={() => { this.actionClick(action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))}\n\n                    {this.starrable &&\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    }\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n\n                    {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {this.starrable &&\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          }\n\n                          {nonCollapsingTextHeaderActions.map(action => (\n                            <stzh-menu-item\n                              class=\"hide-medium show-when-collapsed\"\n                              icon={action.icon}\n                              badge={action.badge}\n                              badgeEmpty={action.badgeEmpty}\n                              badgeType={action.badgeType}\n                              onClick={() => { this.actionClick(action) }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled &&\n                            <Fragment>\n                              {!isFirstItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              }\n                              {!isLastItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              }\n                            </Fragment>\n                          }\n                        </stzh-menu>\n                      </stzh-popover>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 &&\n                  <stzh-actionset\n                    class=\"stzh-card__footer-actionset\"\n                    actions={this._footerActions}\n                  ></stzh-actionset>\n                }\n\n                {this.selectable &&\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                }\n\n                {this.withArrow &&\n                  <stzh-icon\n                    class=\"stzh-card__footer-arrow\"\n                    name=\"arrow-right-long\"\n                  ></stzh-icon>}\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-card2.js","mappings":"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","names":[],"sources":["./src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","./src/components/stzh-card/stzh-card.tsx"],"sourcesContent":[":host {\n  --box-shadow: #{$boxShadowPopover};\n  --border-color: #{$baseBorderColor};\n  --border-radius: 3px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &[hide-elevation]:not([hide-elevation=\"false\"]) {\n    --box-shadow: none;\n\n    &[href]:hover,\n    &[href]:focus-within,\n    &.is-selected,\n    &.is-chosen,\n    .is-selected &,\n    .is-chosen & {\n      --box-shadow: #{$boxShadowPopover};\n    }\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    --box-shadow: none;\n    --border-color: transparent;\n\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted(*) {\n    @include fontSize('milli');\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted([slot=\"meta\"]:not(:last-child)) {\n    margin-right: space('xsmall');\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n  @include font('heavy');\n  @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n  .vshow-medium {\n    @include mq($to: medium) {\n      @include visuallyhidden;\n    }\n  }\n\n  .show-medium {\n    @include mq($to: medium) {\n      display: none;\n    }\n  }\n\n  .hide-medium {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n\t&__dnd {\n    --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n\t}\n\n  &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n    }\n  }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n\t&__subtitle {\n    @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n    flex-grow: 1;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'regular');\n    }\n\t}\n\n  &__footer-arrow {\n    --size: #{iconSize('medium')};\n    color: $colorPrimary;\n  }\n\n  &__card-actions {\n\t\tdisplay: inline-flex;\n    white-space: nowrap;\n\t}\n\n\t&__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$colorGrey70};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n\t}\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Has header */\n\n  &--has-header &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n  /* Has footer */\n\n  &--has-footer &__footer {\n    &:not(:empty) {\n      @include spaceCurve('padding', 'regular');\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link &__image-link:hover + &__content-wrapper &__title-link,\n  &--has-link &__title-link:hover,\n  &--has-link &__title-link:focus {\n    color: $colorPrimaryHover;\n\n  //   &::before,\n  //   &::before {\n  //     background-color: $colorPrimary4;\n  //   }\n  }\n\n  &--has-link:hover &__footer-arrow {\n    color: $colorPrimaryHover;\n  }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    .vhide-when-collapsed {\n      @include visuallyhidden;\n    }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    .show-when-collapsed {\n      display: block;\n    }\n  }\n\n  &--is-collapsed &__header {\n    border-bottom: none;\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /** Hidden header / footer border */\n\n  &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n    padding-bottom: 0;\n  }\n\n  &--has-hidden-footer-border &__footer {\n    &:not(:empty) {\n      padding-top: 0;\n      border-top: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Fragment,\n  forceUpdate\n} from \"@stencil/core\";\n\nimport {\n  StzhCardHeaderAction,\n  StzhActionsetItem,\n  StzhCardCollapseEvent,\n  StzhCardSubtitleClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardClickEvent,\n  StzhCardHeaderActionClickEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether card arrow is shown in footer area */\n  @Prop({ reflect: true }) withArrow: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /** Whether to hide header separation border */\n  @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n  /** Whether to hide footer separation border */\n  @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n  /** Whether card elevation should be hidden */\n  @Prop({ reflect: true }) hideElevation: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      if (newValue === \"\") {\n        this._subtitles = [];\n      } else {\n        try {\n          this._subtitles = JSON.parse(newValue);\n        } catch(err) {\n          this._subtitles = [newValue];\n        }\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  @Watch(\"collapsed\")\n  collapsedWatcher() {\n    this.handleResize();\n  }\n\n  private observer: MutationObserver;\n\n  private nodeChange = (entries) => {\n    let changeInSlot = false;\n\n    entries.forEach((entry) => {\n      if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  private mainElement: HTMLElement;\n  private headerElement: HTMLElement;\n  private headerLeftElement: HTMLElement;\n  private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private update = () => {\n    if (!this.mainElement) {\n      return;\n    }\n\n    this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n    if (media('medium').matches) {\n      const headerWidth = this.headerElement.clientWidth;\n      const leftWidth = this.headerLeftElement.clientWidth;\n      const rightWidth = this.headerRightElement.clientWidth;\n\n      if (headerWidth - leftWidth <= rightWidth) {\n        this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n      }\n    }\n  }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r))\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed\n      });\n    }\n  }\n\n  private subtitleClick = () => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\"\n      });\n    }\n  }\n\n  private starToggleClick = () => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred\n    });\n  }\n\n  private actionClick = (action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action\n    });\n  }\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  }\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  }\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  }\n\n  private init = () => {\n    const chips = this.element.querySelectorAll(\n      'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    );\n\n    chips.forEach((chip) => {\n      setPropsIfNull(chip, {\n        size: \"small\"\n      } as HTMLStzhChipElement)\n    });\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private handleMutation = (entries) => {\n    this.init();\n    this.nodeChange(entries);\n  }\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  }\n\n  private cardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent\n    });\n  }\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"card\");\n    }\n  }\n\n  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const hasHeading = !!this.heading || headingUsed;\n\n    const hasHeader = hasHeading\n      || this._subtitles.length > 0\n      || this._headerActions.length > 0\n      || nonCollapsingTextHeaderActions.length > 0\n      || this.starrable\n      || sortableActionsEnabled;\n\n    const hasFooter = this._footerActions.length > 0\n      || this.selectable\n      || this.withArrow;\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n      \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n      \"stzh-card--has-header\": hasHeader,\n      \"stzh-card--has-footer\": hasFooter,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.cardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n            <header\n              ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    {hasHeading &&\n                      <h3 class=\"stzh-card__title\">\n                        <a\n                          ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n                          class=\"stzh-card__title-link\"\n                          href={this.href}\n                          target={this.target}\n                          onClick={this.href ? this.cardClick : null}\n                        >\n                          <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                          </div>\n                        </a>\n                      </h3>\n                    }\n                    {this._subtitles.length > 0 &&\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    }\n                  </div>\n                </div>\n                <div\n                  ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={() => { this.actionClick(action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))}\n\n                    {this.starrable &&\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    }\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n\n                    {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {this.starrable &&\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          }\n\n                          {nonCollapsingTextHeaderActions.map(action => (\n                            <stzh-menu-item\n                              class=\"hide-medium show-when-collapsed\"\n                              icon={action.icon}\n                              badge={action.badge}\n                              badgeEmpty={action.badgeEmpty}\n                              badgeType={action.badgeType}\n                              onClick={() => { this.actionClick(action) }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled &&\n                            <Fragment>\n                              {!isFirstItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              }\n                              {!isLastItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              }\n                            </Fragment>\n                          }\n                        </stzh-menu>\n                      </stzh-popover>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 &&\n                  <stzh-actionset\n                    class=\"stzh-card__footer-actionset\"\n                    actions={this._footerActions}\n                  ></stzh-actionset>\n                }\n\n                {this.selectable &&\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                }\n\n                {this.withArrow &&\n                  <stzh-icon\n                    class=\"stzh-card__footer-arrow\"\n                    name=\"arrow-right-long\"\n                  ></stzh-icon>}\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-cell.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhCellCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host::after{content:\"\";display:table;clear:both}:host([justify-self=start]){justify-self:flex-start}:host([justify-self=end]){justify-self:flex-end}:host([justify-self=center]){justify-self:center}:host([justify-self=between]){justify-self:space-between}:host([justify-self=around]){justify-self:space-around}:host([justify-self=evenly]){justify-self:space-evenly}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span=\"1\"]){--cell-width:8.3333333333%}:host([span=\"2\"]){--cell-width:16.6666666667%}:host([span=\"3\"]){--cell-width:25%}:host([span=\"4\"]){--cell-width:33.3333333333%}:host([span=\"5\"]){--cell-width:41.6666666667%}:host([span=\"6\"]){--cell-width:50%}:host([span=\"7\"]){--cell-width:58.3333333333%}:host([span=\"8\"]){--cell-width:66.6666666667%}:host([span=\"9\"]){--cell-width:75%}:host([span=\"10\"]){--cell-width:83.3333333333%}:host([span=\"11\"]){--cell-width:91.6666666667%}:host([span=\"12\"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}";
+const stzhCellCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host([justify-self=start]){justify-self:flex-start}:host([justify-self=end]){justify-self:flex-end}:host([justify-self=center]){justify-self:center}:host([justify-self=between]){justify-self:space-between}:host([justify-self=around]){justify-self:space-around}:host([justify-self=evenly]){justify-self:space-evenly}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span=\"1\"]){--cell-width:8.3333333333%}:host([span=\"2\"]){--cell-width:16.6666666667%}:host([span=\"3\"]){--cell-width:25%}:host([span=\"4\"]){--cell-width:33.3333333333%}:host([span=\"5\"]){--cell-width:41.6666666667%}:host([span=\"6\"]){--cell-width:50%}:host([span=\"7\"]){--cell-width:58.3333333333%}:host([span=\"8\"]){--cell-width:66.6666666667%}:host([span=\"9\"]){--cell-width:75%}:host([span=\"10\"]){--cell-width:83.3333333333%}:host([span=\"11\"]){--cell-width:91.6666666667%}:host([span=\"12\"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}";
 
 const StzhCell$1 = /*@__PURE__*/ proxyCustomElement(class StzhCell extends HTMLElement {
   constructor() {

package/dist/components/stzh-cell.js.map

@@ -1 +1 @@
-{"file":"stzh-cell.js","mappings":";;AAAA,MAAM,WAAW,GAAG,klPAAklP;;MCiBzlPA,UAAQ;;;;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;uBAG8B,MAAM;qBAGV,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCell"],"sources":["./src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","./src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  @include clearfix;\n\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Justify self variants */\n\n:host([justify-self=\"start\"]) {\n  justify-self: flex-start;\n}\n\n:host([justify-self=\"end\"]) {\n  justify-self: flex-end;\n}\n\n:host([justify-self=\"center\"]) {\n  justify-self: center;\n}\n\n:host([justify-self=\"between\"]) {\n  justify-self: space-between;\n}\n\n:host([justify-self=\"around\"]) {\n  justify-self: space-around;\n}\n\n:host([justify-self=\"evenly\"]) {\n  justify-self: space-evenly;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justifySelf: Layout.JustifySelf = \"auto\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cell.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+hPAA+hP;;MCiBtiPA,UAAQ;;;;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;uBAG8B,MAAM;qBAGV,MAAM;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;OAClB,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCell"],"sources":["./src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","./src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Justify self variants */\n\n:host([justify-self=\"start\"]) {\n  justify-self: flex-start;\n}\n\n:host([justify-self=\"end\"]) {\n  justify-self: flex-end;\n}\n\n:host([justify-self=\"center\"]) {\n  justify-self: center;\n}\n\n:host([justify-self=\"between\"]) {\n  justify-self: space-between;\n}\n\n:host([justify-self=\"around\"]) {\n  justify-self: space-around;\n}\n\n:host([justify-self=\"evenly\"]) {\n  justify-self: space-evenly;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justifySelf: Layout.JustifySelf = \"auto\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-chip2.js

@@ -113,13 +113,13 @@ const StzhChip = /*@__PURE__*/ proxyCustomElement(class StzhChip extends HTMLEle
           "stzh-chip__button": true,
           "is-button": !this.nonInteractive && !this.href,
           "is-link": !this.nonInteractive && !!this.href
-        }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
+        }, href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
         h(Chip, { ref: (el) => (this.chip = el), class: {
             "stzh-chip__button": true,
             "is-button": !this.nonInteractive && !this.href,
             "is-link": !this.nonInteractive && !!this.href
-          }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
+          }, disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   get element() { return this; }
   static get style() { return stzhChipCss; }

package/dist/components/stzh-chip2.js.map

@@ -1 +1 @@
-{"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n  --color: #{$colorPrimary};\n  --height: 32px;\n  --padding: 0 #{space('medium')};\n  --border-color: #{$colorGrey13};\n  --border-radius: 16px;\n  --remove-color: #{$baseLeadColor};\n  --remove-border-radius: 24px;\n  --background-color: #{$colorWhite};\n  --icon-size: #{iconSize('small')};\n  --icon-color: #{$colorPrimary};\n  --icon-gap: #{space('xsmall')};\n  --counter-color: #{$colorPrimary60op};\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: #{$colorPrimaryHover};\n  --hover-border-color: var(--border-color);\n  --hover-background-color: #{$colorPrimary8};\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: var(--hover-background-color);\n  --hover-icon-color: #{$colorPrimaryHover};\n  --hover-counter-color: #{$colorPrimaryHover};\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-border: 1px solid Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-color: Highlight;\n    --hover-remove-background-color: Canvas;\n    --hover-icon-color: Highlight;\n    --hover-counter-color: Highlight;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding: 0 #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --icon-size: #{iconSize('xsmall')};\n    --counter-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"input\"] {\n    --border-color: transparent;\n    --background-color: #{$colorGrey5};\n\n    --hover-border-color: transparent;\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$baseColor};\n    --icon-color: #{$baseColor};\n    --counter-color: #{$baseColor};\n    --border-color: transparent;\n    --background-color: #{$colorBlack8};\n\n    --hover-color: #{$baseColor};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorBlack8};\n    --hover-icon-color: #{$baseColor};\n    --hover-counter-color: #{$baseColor};\n  }\n\n  &[variant=\"input\"][size=\"small\"] {\n    --padding: 0 #{space('small')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"][size=\"small\"] {\n    --padding: 0 #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[type=\"secondary\"] {\n    --color: #{$baseLeadColor};\n    --counter-color: #{$colorGrey40};\n  }\n\n  &[type=\"important\"] {\n    --color: #{$colorError};\n    --icon-color: #{$colorError};\n    --counter-color: #{$colorError};\n\n    --hover-color: #{$colorError};\n    --hover-icon-color: #{$colorError};\n    --hover-counter-color: #{$colorError};\n\n    @include highContrast() {\n      --hover-color: Highlight;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --border-color: transparent;\n    --remove-color: #{$colorWhite};\n    --background-color: #{$colorPrimary};\n    --icon-color: #{$colorWhite};\n    --counter-color: #{$colorWhite56};\n\n    --hover-color: #{$colorWhite};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-remove-color: #{$colorWhite};\n    --hover-remove-background-color: #{$colorPrimaryHover};\n    --hover-icon-color: #{$colorWhite};\n    --hover-counter-color: #{$colorWhite56};\n\n    @include highContrast() {\n      --color: SelectedItem;\n      --border-color: SelectedItem;\n      --remove-color: SelectedItem;\n      --background-color: Canvas;\n      --icon-color: SelectedItem;\n      --counter-color: SelectedItem;\n\n      --hover-color: Highlight;\n      --hover-border-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-color: Highlight;\n      --hover-remove-background-color: Canvas;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-border: var(--border-color);\n    --hover-background-color: var(--background-color);\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --border-color: #{$baseBorderColor};\n    --remove-color: #{$colorGrey13};\n    --background-color: #{$colorWhite};\n    --icon-color: #{$colorGrey25};\n    --counter-color: #{$colorGrey25};\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$baseBorderColor};\n    --hover-background-color: #{$colorWhite};\n    --hover-remove-color: #{$colorGrey13};\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: #{$colorGrey25};\n    --hover-counter-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    color: var(--color);\n    appearance: none;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover,\n  &__remove:hover + &__button {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"tag\" | \"filter\" | \"input\" = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"secondary\" | \"important\" = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.chip.focus();\n  }\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon ?\n            <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["./src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","./src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n  --color: #{$colorPrimary};\n  --height: 32px;\n  --padding: 0 #{space('medium')};\n  --border-color: #{$colorGrey13};\n  --border-radius: 16px;\n  --remove-color: #{$baseLeadColor};\n  --remove-border-radius: 24px;\n  --background-color: #{$colorWhite};\n  --icon-size: #{iconSize('small')};\n  --icon-color: #{$colorPrimary};\n  --icon-gap: #{space('xsmall')};\n  --counter-color: #{$colorPrimary60op};\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: #{$colorPrimaryHover};\n  --hover-border-color: var(--border-color);\n  --hover-background-color: #{$colorPrimary8};\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: var(--hover-background-color);\n  --hover-icon-color: #{$colorPrimaryHover};\n  --hover-counter-color: #{$colorPrimaryHover};\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-border: 1px solid Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-color: Highlight;\n    --hover-remove-background-color: Canvas;\n    --hover-icon-color: Highlight;\n    --hover-counter-color: Highlight;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding: 0 #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --icon-size: #{iconSize('xsmall')};\n    --counter-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"input\"] {\n    --border-color: transparent;\n    --background-color: #{$colorGrey5};\n\n    --hover-border-color: transparent;\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$baseColor};\n    --icon-color: #{$baseColor};\n    --counter-color: #{$baseColor};\n    --border-color: transparent;\n    --background-color: #{$colorBlack8};\n\n    --hover-color: #{$baseColor};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorBlack8};\n    --hover-icon-color: #{$baseColor};\n    --hover-counter-color: #{$baseColor};\n  }\n\n  &[variant=\"input\"][size=\"small\"] {\n    --padding: 0 #{space('small')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"][size=\"small\"] {\n    --padding: 0 #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[type=\"secondary\"] {\n    --color: #{$baseLeadColor};\n    --counter-color: #{$colorGrey40};\n  }\n\n  &[type=\"important\"] {\n    --color: #{$colorError};\n    --icon-color: #{$colorError};\n    --counter-color: #{$colorError};\n\n    --hover-color: #{$colorError};\n    --hover-icon-color: #{$colorError};\n    --hover-counter-color: #{$colorError};\n\n    @include highContrast() {\n      --hover-color: Highlight;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --border-color: transparent;\n    --remove-color: #{$colorWhite};\n    --background-color: #{$colorPrimary};\n    --icon-color: #{$colorWhite};\n    --counter-color: #{$colorWhite56};\n\n    --hover-color: #{$colorWhite};\n    --hover-border-color: transparent;\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-remove-color: #{$colorWhite};\n    --hover-remove-background-color: #{$colorPrimaryHover};\n    --hover-icon-color: #{$colorWhite};\n    --hover-counter-color: #{$colorWhite56};\n\n    @include highContrast() {\n      --color: SelectedItem;\n      --border-color: SelectedItem;\n      --remove-color: SelectedItem;\n      --background-color: Canvas;\n      --icon-color: SelectedItem;\n      --counter-color: SelectedItem;\n\n      --hover-color: Highlight;\n      --hover-border-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-color: Highlight;\n      --hover-remove-background-color: Canvas;\n      --hover-icon-color: Highlight;\n      --hover-counter-color: Highlight;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-border: var(--border-color);\n    --hover-background-color: var(--background-color);\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --border-color: #{$baseBorderColor};\n    --remove-color: #{$colorGrey13};\n    --background-color: #{$colorWhite};\n    --icon-color: #{$colorGrey25};\n    --counter-color: #{$colorGrey25};\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$baseBorderColor};\n    --hover-background-color: #{$colorWhite};\n    --hover-remove-color: #{$colorGrey13};\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: #{$colorGrey25};\n    --hover-counter-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-chip__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n    color: var(--color);\n    appearance: none;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover,\n  &__remove:hover + &__button {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n    border-color: var(--hover-border-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"tag\" | \"filter\" | \"input\" = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"secondary\" | \"important\" = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.chip.focus();\n  }\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon ?\n            <stzh-icon class=\"stzh-chip__icon\" name={this.icon}></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}