@oiz/stzh-components 2.1.0 → 2.2.0

package/dist/components/stzh-cspace.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhCspaceCss = ".sc-stzh-cspace-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-cspace-h{display:none}.sc-stzh-cspace-h *.sc-stzh-cspace,.sc-stzh-cspace-h *.sc-stzh-cspace::before,.sc-stzh-cspace-h *.sc-stzh-cspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-input,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datepicker,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-dropdown,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-upload,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkbox,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkboxgroup,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radiogroup{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions[variant=process]{margin-top:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset[legend]{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-top]{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s>:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-bottom]{margin-bottom:0}.sc-stzh-cspace-h :has(:nth-child(1)[hidden]).sc-stzh-cspace-s>:nth-child(2){margin-top:0}.sc-stzh-cspace-h :has(:nth-last-child(1)[hidden]).sc-stzh-cspace-s>:nth-last-child(2){margin-bottom:0}";
+const stzhCspaceCss = ".sc-stzh-cspace-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-cspace-h{display:none}.sc-stzh-cspace-h *.sc-stzh-cspace,.sc-stzh-cspace-h *.sc-stzh-cspace::before,.sc-stzh-cspace-h *.sc-stzh-cspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-input,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datepicker,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-dropdown,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-upload,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkbox,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-checkboxgroup,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radio,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-radiogroup{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h1,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"1\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h2,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>h3,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"3\"],.sc-stzh-cspace-h .sc-stzh-cspace-s>h4,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>p,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text,.sc-stzh-cspace-h .sc-stzh-cspace-s>ul,.sc-stzh-cspace-h .sc-stzh-cspace-s>ol,.sc-stzh-cspace-h .sc-stzh-cspace-s>dl,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-list{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=hero],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h3],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=h4],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-text[curve=p2],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p1],.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-figure,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-chart{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-richtext,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-progressbar,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-section,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-hr{margin-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-table,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-datatable{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-anchornav{margin-top:var(--stzh-space-xxxlarge)}}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-actions[variant=process]{margin-top:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset{margin-top:var(--stzh-space-large);margin-bottom:var(--stzh-space-large)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-fieldset[legend]{margin-top:var(--stzh-space-xxlarge)}.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[level=\"4\"]+stzh-datalist,.sc-stzh-cspace-h .sc-stzh-cspace-s>stzh-heading[curve=h4]+stzh-datalist{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>:first-child[legend],.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-top]{margin-top:0}.sc-stzh-cspace-h .sc-stzh-cspace-s>:last-child,.sc-stzh-cspace-h .sc-stzh-cspace-s>[no-cspace-bottom]{margin-bottom:0}.sc-stzh-cspace-h :has(:nth-child(1)[hidden]).sc-stzh-cspace-s>:nth-child(2){margin-top:0}.sc-stzh-cspace-h :has(:nth-last-child(1)[hidden]).sc-stzh-cspace-s>:nth-last-child(2){margin-bottom:0}";
 
 const StzhCspace$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/stzh-datalist-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhDatalistItem extends Components.StzhDatalistItem, HTMLElement {}
+export const StzhDatalistItem: {
+  prototype: StzhDatalistItem;
+  new (): StzhDatalistItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

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

package/dist/components/stzh-datalist-item2.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './stzh-badge2.js';
+import { d as defineCustomElement$2 } from './stzh-button2.js';
+import { d as defineCustomElement$1 } from './stzh-icon2.js';
+
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var( --stzh-font-weight-regular);--color:inherit;--action-display:block;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[direction=horizontal].sc-stzh-datalist-item-h{--action-display:flex}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;text-decoration:none}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight)}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;text-decoration:none}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-link.sc-stzh-datalist-item .stzh-datalist-item__icon.is-external.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-link.sc-stzh-datalist-item .stzh-datalist-item__action-list[rel*=external].sc-stzh-datalist-item .stzh-datalist-item__icon.is-internal.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-link.sc-stzh-datalist-item .stzh-datalist-item__action-list[rel*=external].sc-stzh-datalist-item .stzh-datalist-item__icon.is-external.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{text-decoration:underline}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/5}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{-ms-flex-align:center;align-items:center}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{-ms-flex-pack:center;justify-content:center}";
+
+const StzhDatalistItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhItemActionClick = createEvent(this, "stzhItemActionClick", 7);
+    this.actionClick = (originalEvent) => {
+      this.stzhItemActionClick.emit({
+        component: "stzh-datalist-item",
+        originalEvent
+      });
+    };
+    this.handleDirectionChange = (event) => {
+      this.direction = event.detail.value;
+    };
+    this.handleHideBorderChange = (event) => {
+      this.hideBorder = event.detail.value;
+    };
+    this.direction = "vertical";
+    this.href = undefined;
+    this.rel = undefined;
+    this.target = undefined;
+    this.download = undefined;
+    this.icon = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.meta = undefined;
+    this.hideBorder = false;
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
+  }
+  renderInner(isButton) {
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
+    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__label", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: "stzh-datalist-item__value", href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__meta", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+  }
+  async connectedCallback() {
+    this.datalist = this.element.closest("stzh-datalist");
+    if (this.datalist) {
+      this.direction = this.datalist.currentDirection;
+      this.hideBorder = this.datalist.hideBorder;
+      this.datalist.addEventListener("stzhDirectionChange", this.handleDirectionChange);
+      this.datalist.addEventListener("stzhHideBorderChange", this.handleHideBorderChange);
+    }
+  }
+  disconnectedCallback() {
+    if (this.datalist) {
+      this.datalist.removeEventListener("stzhDirectionChange", this.handleDirectionChange);
+      this.datalist.removeEventListener("stzhHideBorderChange", this.handleHideBorderChange);
+      this.datalist = null;
+    }
+  }
+  render() {
+    const isButton = typeof this.a11yExpanded !== "undefined"
+      || typeof this.a11yControls !== "undefined";
+    const classes = {
+      "stzh-datalist-item": true,
+      "stzh-datalist-item--is-interactive": !!this.href || isButton,
+      "stzh-datalist-item--is-link": !!this.href,
+      "stzh-datalist-item--is-button": isButton,
+      "stzh-datalist-item--is-expanded": this.a11yExpanded,
+      "stzh-datalist-item--has-hidden-border": this.hideBorder,
+      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction
+    };
+    const Action = isButton ? "button" : (!this.href && this.icon ? "div" : "a");
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
+      this.renderInner(isButton)
+      :
+        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__action-list", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
+      (this.download ?
+        h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" })
+        :
+          h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
+      h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
+      h("stzh-button", { class: "stzh-datalist-item__action", variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return stzhDatalistItemCss; }
+}, [6, "stzh-datalist-item", {
+    "direction": [513],
+    "href": [513],
+    "rel": [1],
+    "target": [1],
+    "download": [1],
+    "icon": [1],
+    "label": [1],
+    "value": [1],
+    "meta": [1],
+    "hideBorder": [516, "hide-border"],
+    "a11yExpanded": [516, "a11y-expanded"],
+    "a11yControls": [1, "a11y-controls"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-datalist-item", "stzh-badge", "stzh-button", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-datalist-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhDatalistItem);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhDatalistItem as S, defineCustomElement as d };

package/dist/components/stzh-datalist.js

@@ -1,99 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './stzh-badge2.js';
-import { d as defineCustomElement$3 } from './stzh-icon2.js';
-import { d as defineCustomElement$2 } from './stzh-link2.js';
-
-const stzhDatalistCss = ".sc-stzh-datalist-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-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-datalist__list-item.sc-stzh-datalist{position:relative}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist__value.sc-stzh-datalist{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);color:var(--stzh-color-black)}.stzh-datalist__label.sc-stzh-datalist,.stzh-datalist__meta.sc-stzh-datalist{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist__action.sc-stzh-datalist{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;padding:0;color:inherit;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist__action.sc-stzh-datalist:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-small-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-small-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-small-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-small-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-small-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-small-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-smallheader-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-smallheader-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-medium-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-medium-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-medium-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-large-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-large-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-large-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-large-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-large-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-large-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:block}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:block;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-icon-size-default))}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:block;padding-top:0;padding-bottom:0}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:0}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:0}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:initial;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.stzh-datalist--direction-ultra-vertical.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{display:table}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__list-item.sc-stzh-datalist{display:table-row;padding-top:0;padding-bottom:0}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__list-item--has-icon.sc-stzh-datalist{padding-right:0}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__list-item.sc-stzh-datalist{border-bottom:none}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{display:table-cell;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__label.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__value.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__meta.sc-stzh-datalist,.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist:not(.stzh-datalist--hide-border) .stzh-datalist__action-list.sc-stzh-datalist{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__label.sc-stzh-datalist:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__meta.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist{vertical-align:top;position:static;right:auto;top:auto;-webkit-transform:initial;transform:initial}.stzh-datalist--direction-ultra-horizontal.sc-stzh-datalist .stzh-datalist__action-list.sc-stzh-datalist:not(:empty){padding-left:var(--stzh-space-xsmall)}}";
-
-const StzhDatalist$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhItemActionClick = createEvent(this, "stzhItemActionClick", 7);
-    this._items = [];
-    this.actionClick = (originalEvent, item) => {
-      this.stzhItemActionClick.emit({
-        component: "stzh-datalist",
-        originalEvent,
-        item
-      });
-    };
-    this.direction = "vertical";
-    this.directionSmall = "horizontal";
-    this.directionMedium = "inherit";
-    this.directionLarge = "inherit";
-    this.directionUltra = "inherit";
-    this.hideBorder = false;
-    this.items = [];
-  }
-  itemsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._items = JSON.parse(newValue);
-    }
-    else {
-      this._items = newValue;
-    }
-  }
-  async componentWillLoad() {
-    this.itemsWatcher(this.items);
-  }
-  render() {
-    const classes = {
-      "stzh-datalist": true,
-      "stzh-datalist--hide-border": this.hideBorder,
-      [`stzh-datalist--direction-${this.direction}`]: !!this.direction,
-      [`stzh-datalist--direction-small-${this.directionSmall}`]: !!this.directionSmall,
-      [`stzh-datalist--direction-medium-${this.directionMedium}`]: !!this.directionMedium,
-      [`stzh-datalist--direction-large-${this.directionLarge}`]: !!this.directionLarge,
-      [`stzh-datalist--direction-ultra-${this.directionUltra}`]: !!this.directionUltra
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("div", { role: "listitem", class: {
-        "stzh-datalist__list-item": true,
-        "stzh-datalist__list-item--has-icon": !!item.icon,
-      } }, h("div", { class: "stzh-datalist__label" }, item.label), h("div", { class: "stzh-datalist__value" }, item.href ? h("stzh-link", { href: item.href, label: item.value, size: "inherit" }) : item.value), h("div", { class: "stzh-datalist__meta" }, item.meta), h("div", { class: "stzh-datalist__action-list" }, h("button", { class: "stzh-datalist__action", onClick: (event) => this.actionClick(event, item) }, h("stzh-icon", { name: item.icon })))))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "items": ["itemsWatcher"]
-  }; }
-  static get style() { return stzhDatalistCss; }
-}, [2, "stzh-datalist", {
-    "direction": [513],
-    "directionSmall": [513, "direction-small"],
-    "directionMedium": [513, "direction-medium"],
-    "directionLarge": [513, "direction-large"],
-    "directionUltra": [513, "direction-ultra"],
-    "hideBorder": [516, "hide-border"],
-    "items": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-datalist", "stzh-badge", "stzh-icon", "stzh-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-datalist":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhDatalist$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { S as StzhDatalist$1, d as defineCustomElement$1 } from './stzh-datalist2.js';
 
 const StzhDatalist = StzhDatalist$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-datalist2.js

@@ -0,0 +1,147 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils.js';
+import { d as defineCustomElement$4 } from './stzh-badge2.js';
+import { d as defineCustomElement$3 } from './stzh-button2.js';
+import { d as defineCustomElement$2 } from './stzh-datalist-item2.js';
+import { d as defineCustomElement$1 } from './stzh-icon2.js';
+
+const stzhDatalistCss = ".sc-stzh-datalist-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-datalist-h{display:none}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-grid-column:1 / 5;--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xlarge);--content-border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h .sc-stzh-datalist-s>stzh-details,.stzh-datalist.sc-stzh-datalist stzh-details.sc-stzh-datalist{--content-padding:var(--stzh-space-large) 0 var(--stzh-space-xxxlarge)}}.stzh-datalist__list.sc-stzh-datalist{width:100%}.stzh-datalist--has-hidden-border.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{margin-top:calc(var(--stzh-space-xsmall) / -2);margin-bottom:calc(var(--stzh-space-xsmall) / -2)}.stzh-datalist--direction-horizontal.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{width:100%;display:grid;border-collapse:collapse;grid-template-columns:auto minmax(auto, 1fr) auto auto;-ms-flex-align:stretch;align-items:stretch}";
+
+const StzhDatalist = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhDirectionChange = createEvent(this, "stzhDirectionChange", 7);
+    this.stzhHideBorderChange = createEvent(this, "stzhHideBorderChange", 7);
+    this._items = [];
+    this.resizeHandler = () => {
+      if (media("ultra").matches && this.directionUltra !== "inherit") {
+        this.currentDirection = this.directionUltra;
+      }
+      else if (media("large").matches && this.directionLarge !== "inherit") {
+        this.currentDirection = this.directionLarge;
+      }
+      else if (media("medium").matches && this.directionMedium !== "inherit") {
+        this.currentDirection = this.directionMedium;
+      }
+      else if (media("small").matches && this.directionSmall !== "inherit") {
+        this.currentDirection = this.directionSmall;
+      }
+      else {
+        this.currentDirection = this.direction;
+      }
+    };
+    this.direction = "vertical";
+    this.directionSmall = "horizontal";
+    this.directionMedium = "inherit";
+    this.directionLarge = "inherit";
+    this.directionUltra = "inherit";
+    this.hideBorder = false;
+    this.items = [];
+    this.currentDirection = undefined;
+  }
+  hideBorderWatcher(newValue) {
+    this.stzhHideBorderChange.emit({
+      component: "stzh-datalist",
+      value: newValue
+    });
+  }
+  directionWatcher() {
+    this.resizeHandler();
+  }
+  currentDirectionWatcher(newValue) {
+    this.stzhDirectionChange.emit({
+      component: "stzh-datalist",
+      value: newValue
+    });
+  }
+  itemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.itemsWatcher(this.items);
+    this.hideBorderWatcher(this.hideBorder);
+    this.resizeHandler();
+  }
+  connectedCallback() {
+    addMediaChangeListener(this.resizeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.resizeHandler);
+  }
+  render() {
+    const classes = {
+      "stzh-datalist": true,
+      "stzh-datalist--has-hidden-border": this.hideBorder,
+      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("stzh-datalist-item", Object.assign({}, item), item.items && item.items.length > 0 &&
+      h("stzh-datalist", { items: item.items }))), h("slot", null)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "hideBorder": ["hideBorderWatcher"],
+    "direction": ["directionWatcher"],
+    "directionSmall": ["directionWatcher"],
+    "directionMedium": ["directionWatcher"],
+    "directionLarge": ["directionWatcher"],
+    "directionUltra": ["directionWatcher"],
+    "currentDirection": ["currentDirectionWatcher"],
+    "items": ["itemsWatcher"]
+  }; }
+  static get style() { return stzhDatalistCss; }
+}, [6, "stzh-datalist", {
+    "direction": [513],
+    "directionSmall": [513, "direction-small"],
+    "directionMedium": [513, "direction-medium"],
+    "directionLarge": [513, "direction-large"],
+    "directionUltra": [513, "direction-ultra"],
+    "hideBorder": [516, "hide-border"],
+    "items": [1],
+    "currentDirection": [1, "current-direction"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-datalist", "stzh-badge", "stzh-button", "stzh-datalist", "stzh-datalist-item", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-datalist":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhDatalist);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-datalist":
+      if (!customElements.get(tagName)) {
+        defineCustomElement();
+      }
+      break;
+    case "stzh-datalist-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { StzhDatalist as S, defineCustomElement as d };

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './stzh-menu-item2.js';
 import { d as defineCustomElement$3 } from './stzh-popover2.js';
 import { d as defineCustomElement$2 } from './stzh-status2.js';
 
-const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium);display:-ms-flexbox;display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{-ms-flex-positive:1;flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:inherit;text-decoration: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-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-primary4)}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{-ms-flex-wrap:nowrap;flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);-ms-flex-pack:center;justify-content:center}}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium);display:-ms-flexbox;display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}.stzh-datamessagelist-item__vhidden.sc-stzh-datamessagelist-item{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-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{-ms-flex-positive:1;flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:inherit;text-decoration: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-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-primary4)}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-base-lead-color)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{-ms-flex-wrap:nowrap;flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);-ms-flex-pack:center;justify-content:center}}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
 
 const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -88,7 +88,8 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class extends
       "stzh-datamessagelist-item": true,
       "stzh-datamessagelist-item--is-unread": this.unread
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.unread &&
+      h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&

package/dist/components/stzh-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhDetails extends Components.StzhDetails, HTMLElement {}
+export const StzhDetails: {
+  prototype: StzhDetails;
+  new (): StzhDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;