@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/cjs/stzh-vspace.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-92254d32.js');
 
-const stzhVspaceCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--v-space:var(--stzh-space-default);--v-around-top:0;--v-around-bottom:0;--v-around:0;display:flex;color:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit}:host ::slotted(*){max-width:100%;padding-top:calc(var(--v-space) * var(--v-around-top));padding-bottom:calc(var(--v-space) * var(--v-around-bottom));margin:0}:host ::slotted(*:not(:last-child)){margin-bottom:calc(var(--v-space) * (1 - var(--v-around)))}:host ::slotted(stzh-show){--show-display:block}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){align-self:stretch;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--v-around-top:1;--v-around-bottom:1;--v-around:1}:host(:empty){height:var(--v-space)}:host([around-top]:not([around-top=false])){--v-around-top:1;--v-around:1}:host([around-bottom]:not([around-bottom=false])){--v-around-bottom:1;--v-around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--v-space:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){:host([curve=tiny]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--v-space:var(--stzh-space-medium)}}:host([curve=small]){--v-space:var(--stzh-space-small)}@media screen and (min-width: 900px){:host([curve=small]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--v-space:var(--stzh-space-large)}}:host([curve=regular]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=regular]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=regular]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=regular]){--v-space:var(--stzh-space-xxlarge)}}:host([curve=medium]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){:host([curve=medium]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){:host([curve=large]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([curve=big]){--v-space:var(--stzh-space-xbig)}}:host([curve=huge]){--v-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=huge]){--v-space:var(--stzh-space-huge)}}:host([curve=section-inner]){--v-space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=section-inner]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=background-section-inner]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=background-section-outer]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xxlarge)}}:host([size=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--v-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--v-space:var(--stzh-space-xsmall)}:host([size=small]){--v-space:var(--stzh-space-small)}:host([size=medium]){--v-space:var(--stzh-space-medium)}:host([size=large]){--v-space:var(--stzh-space-large)}:host([size=xlarge]){--v-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--v-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--v-space:var(--stzh-space-big)}:host([size=xbig]){--v-space:var(--stzh-space-xbig)}:host([size=huge]){--v-space:var(--stzh-space-huge)}:host([size=xhuge]){--v-space:var(--stzh-space-xhuge)}:host([size=none]){--v-space:var(--stzh-space-none)}:host([size=default]){--v-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 900px){:host([size-medium=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){:host([size-medium=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([size-medium=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host([size-medium=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([size-medium=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([size-medium=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 900px){:host([size-medium=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 900px){:host([size-medium=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 900px){:host([size-medium=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 900px){:host([size-medium=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1600px){:host([size-ultra=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){:host([size-ultra=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1600px){:host([size-ultra=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1600px){:host([size-ultra=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1600px){:host([size-ultra=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1600px){:host([size-ultra=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1600px){:host([size-ultra=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1600px){:host([size-ultra=default]){--v-space:var(--stzh-space-default)}}.stzh-vspace{flex-grow:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0;margin:0;}.stzh-vspace--border-top{border-top:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--border-bottom{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--justify-center{justify-content:center}.stzh-vspace--justify-end{justify-content:flex-end}.stzh-vspace--justify-between{justify-content:space-between}.stzh-vspace--justify-around{justify-content:space-around}.stzh-vspace--justify-evenly{justify-content:space-evenly}.stzh-vspace--items-end{align-items:flex-end}.stzh-vspace--items-center{align-items:center}.stzh-vspace--items-baseline{align-items:baseline}.stzh-vspace--items-stretch{align-items:stretch}";
+const stzhVspaceCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--v-space:var(--stzh-space-default);--v-around-top:0;--v-around-bottom:0;--v-around:0;display:flex;color:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit}:host ::slotted(*){max-width:100%;padding-top:calc(var(--v-space) * var(--v-around-top));padding-bottom:calc(var(--v-space) * var(--v-around-bottom));margin:0}:host ::slotted(*:not(:last-child)){margin-bottom:calc(var(--v-space) * (1 - var(--v-around)))}:host ::slotted(stzh-show){--show-display:block}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){align-self:stretch;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--v-around-top:1;--v-around-bottom:1;--v-around:1}:host(:empty){height:var(--v-space)}:host([around-top]:not([around-top=false])){--v-around-top:1;--v-around:1}:host([around-bottom]:not([around-bottom=false])){--v-around-bottom:1;--v-around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--v-space:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){:host([curve=tiny]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--v-space:var(--stzh-space-medium)}}:host([curve=small]){--v-space:var(--stzh-space-small)}@media screen and (min-width: 900px){:host([curve=small]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--v-space:var(--stzh-space-large)}}:host([curve=intermediary]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([curve=intermediary]){--v-space:var(--stzh-space-large)}}:host([curve=regular]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=regular]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=regular]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=regular]){--v-space:var(--stzh-space-xxlarge)}}:host([curve=medium]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){:host([curve=medium]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){:host([curve=large]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--v-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([curve=big]){--v-space:var(--stzh-space-xbig)}}:host([curve=huge]){--v-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([curve=huge]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=huge]){--v-space:var(--stzh-space-huge)}}:host([curve=section-inner]){--v-space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=section-inner]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=section-inner]){--v-space:var(--stzh-space-xxxlarge)}}:host([curve=background-section-inner]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-inner]){--v-space:var(--stzh-space-xxxxlarge)}}:host([curve=background-section-outer]){--v-space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-outer]){--v-space:var(--stzh-space-xxlarge)}}:host([size=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--v-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--v-space:var(--stzh-space-xsmall)}:host([size=small]){--v-space:var(--stzh-space-small)}:host([size=medium]){--v-space:var(--stzh-space-medium)}:host([size=large]){--v-space:var(--stzh-space-large)}:host([size=xlarge]){--v-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--v-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--v-space:var(--stzh-space-big)}:host([size=xbig]){--v-space:var(--stzh-space-xbig)}:host([size=huge]){--v-space:var(--stzh-space-huge)}:host([size=xhuge]){--v-space:var(--stzh-space-xhuge)}:host([size=none]){--v-space:var(--stzh-space-none)}:host([size=default]){--v-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 900px){:host([size-medium=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){:host([size-medium=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([size-medium=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host([size-medium=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([size-medium=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([size-medium=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 900px){:host([size-medium=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 900px){:host([size-medium=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 900px){:host([size-medium=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 900px){:host([size-medium=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1600px){:host([size-ultra=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){:host([size-ultra=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1600px){:host([size-ultra=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1600px){:host([size-ultra=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1600px){:host([size-ultra=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1600px){:host([size-ultra=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1600px){:host([size-ultra=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1600px){:host([size-ultra=default]){--v-space:var(--stzh-space-default)}}.stzh-vspace{flex-grow:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0;margin:0;}.stzh-vspace--border-top{border-top:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--border-bottom{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--justify-center{justify-content:center}.stzh-vspace--justify-end{justify-content:flex-end}.stzh-vspace--justify-between{justify-content:space-between}.stzh-vspace--justify-around{justify-content:space-around}.stzh-vspace--justify-evenly{justify-content:space-evenly}.stzh-vspace--items-end{align-items:flex-end}.stzh-vspace--items-center{align-items:center}.stzh-vspace--items-baseline{align-items:baseline}.stzh-vspace--items-stretch{align-items:stretch}";
 
 const StzhVspace = class {
   constructor(hostRef) {

package/dist/cjs/stzh-vspace.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-vspace.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,yraAAyra;;MCiBlsa,UAAU;;;iBAE0B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;qBAGF,KAAK;wBAGF,KAAK;kBAGsB,MAAM;;EAElF,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OACnD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-vspace/stzh-vspace.scss?tag=stzh-vspace&encapsulation=shadow","src/components/stzh-vspace/stzh-vspace.tsx"],"sourcesContent":[":host {\n  --v-space: #{space()};\n  --v-around-top: 0;\n  --v-around-bottom: 0;\n  --v-around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding-top: calc(var(--v-space) * var(--v-around-top));\n    padding-bottom: calc(var(--v-space) * var(--v-around-bottom));\n    margin: 0;\n  }\n\n  ::slotted(*:not(:last-child)) {\n    margin-bottom: calc(var(--v-space) * (1 - var(--v-around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n  --v-around-top: 1;\n  --v-around-bottom: 1;\n  --v-around: 1;\n}\n\n:host(:empty) {\n  height: var(--v-space);\n}\n\n:host([around-top]:not([around-top=\"false\"])) {\n  --v-around-top: 1;\n  --v-around: 1;\n}\n\n:host([around-bottom]:not([around-bottom=\"false\"])) {\n  --v-around-bottom: 1;\n  --v-around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n/* Space variants */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --v-space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --v-space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --v-space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --v-space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-vspace {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n\n  &--border-top {\n    border-top: 1px solid $baseBorderColor;\n  }\n\n  &--border-bottom {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-vspace\",\n  styleUrl: \"stzh-vspace.scss\",\n  shadow: true\n})\nexport class StzhVspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n    /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only top) */\n  @Prop({ reflect: true }) aroundTop: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only bottom) */\n  @Prop({ reflect: true }) aroundBottom: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-vspace\": true,\n            [`stzh-vspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-vspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-vspace.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,41aAA41a;;MCiBr2a,UAAU;;;iBAE0B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;qBAGF,KAAK;wBAGF,KAAK;kBAGsB,MAAM;;EAElF,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OACnD,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/stzh-vspace/stzh-vspace.scss?tag=stzh-vspace&encapsulation=shadow","src/components/stzh-vspace/stzh-vspace.tsx"],"sourcesContent":[":host {\n  --v-space: #{space()};\n  --v-around-top: 0;\n  --v-around-bottom: 0;\n  --v-around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding-top: calc(var(--v-space) * var(--v-around-top));\n    padding-bottom: calc(var(--v-space) * var(--v-around-bottom));\n    margin: 0;\n  }\n\n  ::slotted(*:not(:last-child)) {\n    margin-bottom: calc(var(--v-space) * (1 - var(--v-around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n  --v-around-top: 1;\n  --v-around-bottom: 1;\n  --v-around: 1;\n}\n\n:host(:empty) {\n  height: var(--v-space);\n}\n\n:host([around-top]:not([around-top=\"false\"])) {\n  --v-around-top: 1;\n  --v-around: 1;\n}\n\n:host([around-bottom]:not([around-bottom=\"false\"])) {\n  --v-around-bottom: 1;\n  --v-around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n/* Space variants */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --v-space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --v-space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --v-space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --v-space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-vspace {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n\n  &--border-top {\n    border-top: 1px solid $baseBorderColor;\n  }\n\n  &--border-bottom {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-vspace\",\n  styleUrl: \"stzh-vspace.scss\",\n  shadow: true\n})\nexport class StzhVspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n    /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only top) */\n  @Prop({ reflect: true }) aroundTop: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only bottom) */\n  @Prop({ reflect: true }) aroundBottom: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-vspace\": true,\n            [`stzh-vspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-vspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/collection/assets/i18n/de.json

@@ -58,8 +58,24 @@
     "invalidFieldText": "(ungültig).",
     "clearButtonLabel": "Feld leeren",
     "moreInfoButtonLabel": "Mehr Info",
-    "dayNames": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
-    "dayNamesShort": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+    "dayNames": [
+      "Sonntag",
+      "Montag",
+      "Dienstag",
+      "Mittwoch",
+      "Donnerstag",
+      "Freitag",
+      "Samstag"
+    ],
+    "dayNamesShort": [
+      "So",
+      "Mo",
+      "Di",
+      "Mi",
+      "Do",
+      "Fr",
+      "Sa"
+    ],
     "monthNames": [
       "Januar",
       "Februar",
@@ -74,7 +90,20 @@
       "November",
       "Dezember"
     ],
-    "monthNamesShort": ["Jan.", "Febr.", "März", "April", "Mai", "Juni", "Juli", "Aug.", "Sep.", "Okt.", "Nov.", "Dez."]
+    "monthNamesShort": [
+      "Jan.",
+      "Febr.",
+      "März",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "Aug.",
+      "Sep.",
+      "Okt.",
+      "Nov.",
+      "Dez."
+    ]
   },
   "anchornav": {
     "title": "Seitenanker"
@@ -196,6 +225,7 @@
     "sceneLabel": "Szene",
     "enableFullscreenLabel": "Vollbild starten",
     "disableFullscreenLabel": "Vollbild beenden",
+    "moreInformation": "Mehr Infos",
     "panUp": "nach oben",
     "panDown": "nach unten",
     "panLeft": "nach links",
@@ -346,6 +376,9 @@
     "menuBackLabel": "Zurück",
     "dialogLanguageTitle": "Sprache"
   },
+  "pi-menu": {
+    "menuLabel": "Menu"
+  },
   "breadcrumb": {
     "title": "Sie befinden sich hier:",
     "expandLabel": "...",

package/dist/collection/assets/i18n/en.json

@@ -58,8 +58,24 @@
     "invalidFieldText": " (invalid).",
     "clearButtonLabel": "Clear input",
     "moreInfoButtonLabel": "More Info",
-    "dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    "dayNamesShort": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    "dayNames": [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ],
+    "dayNamesShort": [
+      "Su",
+      "Mo",
+      "Tu",
+      "We",
+      "Th",
+      "Fr",
+      "Sa"
+    ],
     "monthNames": [
       "January",
       "February",
@@ -74,7 +90,20 @@
       "November",
       "December"
     ],
-    "monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+    "monthNamesShort": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ]
   },
   "anchornav": {
     "title": "Page anchors"
@@ -196,6 +225,7 @@
     "sceneLabel": "Scene",
     "enableFullscreenLabel": "start fullscreen",
     "disableFullscreenLabel": "stop fullscreen",
+    "moreInformation": "More Information",
     "panUp": "pan up",
     "panDown": "pan down",
     "panLeft": "pan left",
@@ -347,6 +377,9 @@
     "menuBackLabel": "Back",
     "dialogLanguageTitle": "Language"
   },
+  "pi-menu": {
+    "menuLabel": "Menu"
+  },
   "breadcrumb": {
     "title": "You are here:",
     "expandLabel": "...",

package/dist/collection/collection-manifest.json

@@ -56,6 +56,7 @@
     "components/stzh-ghettobox/stzh-ghettobox.js",
     "components/stzh-header/stzh-header.js",
     "components/stzh-heading/stzh-heading.js",
+    "components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.js",
     "components/stzh-hr/stzh-hr.js",
     "components/stzh-hspace/stzh-hspace.js",
     "components/stzh-icon/stzh-icon.js",
@@ -80,8 +81,14 @@
     "components/stzh-pagecontent/stzh-pagecontent.js",
     "components/stzh-pagetitle/stzh-pagetitle.js",
     "components/stzh-pagetitle-hero/stzh-pagetitle-hero.js",
+    "components/stzh-pagetitle-home/stzh-pagetitle-home.js",
     "components/stzh-pagination/stzh-pagination.js",
     "components/stzh-panorama/stzh-panorama.js",
+    "components/stzh-pi-content-navigation/stzh-pi-content-navigation.js",
+    "components/stzh-pi-menu/stzh-pi-menu.js",
+    "components/stzh-pi-pagetitle/stzh-pi-pagetitle.js",
+    "components/stzh-pi-quote/stzh-pi-quote.js",
+    "components/stzh-pi-teaser/stzh-pi-teaser.js",
     "components/stzh-popover/stzh-popover.js",
     "components/stzh-print/stzh-print.js",
     "components/stzh-progressbar/stzh-progressbar.js",

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -169,4 +172,17 @@
 .stzh-accordion {
   display: grid;
   gap: var(--stzh-space-xsmall);
+}
+.stzh-accordion__heading {
+  margin-bottom: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-accordion__heading {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion__heading {
+    margin-bottom: var(--stzh-space-large);
+  }
 }

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

@@ -1,29 +1,30 @@
-import { Host, h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot - Slot for `stzh-accordion-item` elements
  */
 export class StzhAccordion {
   constructor() {
     this.variant = "default";
+    this.heading = "";
     this.collapsible = true;
     this.multiselectable = true;
   }
   variantWatcher(newValue) {
     this.stzhVariantChange.emit({
       component: "stzh-accordion",
-      value: newValue
+      value: newValue,
     });
   }
   openListener(event) {
     const accordionItemOpened = event.target;
     const accordionOpened = accordionItemOpened.closest("stzh-accordion");
-    if (this.multiselectable
-      || (event.detail && event.detail.component !== "stzh-accordion-item")
-      || accordionOpened !== this.element) {
+    if (this.multiselectable ||
+      (event.detail && event.detail.component !== "stzh-accordion-item") ||
+      accordionOpened !== this.element) {
       return;
     }
     const items = Array.from(accordionOpened.querySelectorAll("stzh-accordion-item"));
-    items.forEach((item) => {
+    items.forEach(item => {
       if (item !== accordionItemOpened) {
         item.hide();
       }
@@ -35,28 +36,27 @@ export class StzhAccordion {
     if (accordion !== this.element) {
       return;
     }
-    const items = Array.from(accordion.querySelectorAll(":scope > stzh-accordion-item"))
-      .filter((item) => !item.disabled);
+    const items = Array.from(accordion.querySelectorAll(":scope > stzh-accordion-item")).filter(item => !item.disabled);
     const currentIndex = items.indexOf(accordionItem);
-    if ((action === 'prev' || action === 'next') && currentIndex === null) {
-      action = action === 'prev' ? 'last' : 'first';
+    if ((action === "prev" || action === "next") && currentIndex === null) {
+      action = action === "prev" ? "last" : "first";
     }
-    if (action === 'prev' && currentIndex === 0) {
-      action = 'last';
+    if (action === "prev" && currentIndex === 0) {
+      action = "last";
     }
-    if (action === 'next' && currentIndex === items.length - 1) {
-      action = 'first';
+    if (action === "next" && currentIndex === items.length - 1) {
+      action = "first";
     }
-    if (action === 'prev') {
+    if (action === "prev") {
       items[currentIndex - 1].focus();
     }
-    else if (action === 'next') {
+    else if (action === "next") {
       items[currentIndex + 1].focus();
     }
-    else if (action === 'last') {
+    else if (action === "last") {
       items[items.length - 1].focus();
     }
-    else if (action === 'first') {
+    else if (action === "first") {
       items[0].focus();
     }
     else {
@@ -67,7 +67,7 @@ export class StzhAccordion {
     const classes = {
       "stzh-accordion": true,
     };
-    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+    return (h(Host, null, h("div", { class: classes }, this.heading && (h("div", { class: "stzh-accordion__heading" }, h("stzh-heading", { level: "2" }, this.heading))), h("slot", null))));
   }
   static get is() { return "stzh-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -88,7 +88,7 @@ export class StzhAccordion {
         "mutable": false,
         "complexType": {
           "original": "StzhAccordionVariant",
-          "resolved": "\"default\" | \"table\" | \"title\"",
+          "resolved": "\"default\" | \"menu\" | \"table\" | \"title\"",
           "references": {
             "StzhAccordionVariant": {
               "location": "import",
@@ -107,6 +107,24 @@ export class StzhAccordion {
         "reflect": true,
         "defaultValue": "\"default\""
       },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
       "collapsible": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-accordion/stzh-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-accordion.js","sourceRoot":"","sources":["../../../../src/components/stzh-accordion/stzh-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionVariantChangeEvent,\n  StzhAccordionVariant\n} from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable\n      || (event.detail && event.detail.component !== \"stzh-accordion-item\")\n      || accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach((item) => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as  HTMLStzhAccordionItemElement[])\n      .filter((item) => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === 'prev' || action === 'next') && currentIndex === null) {\n      action = action === 'prev' ? 'last' : 'first'\n    }\n\n    if (action === 'prev' && currentIndex === 0) {\n      action = 'last'\n    }\n\n    if (action === 'next' && currentIndex === items.length - 1) {\n      action = 'first'\n    }\n\n    if (action === 'prev') {\n      items[currentIndex - 1].focus();\n    } else if (action === 'next') {\n      items[currentIndex + 1].focus();\n    } else if (action === 'last') {\n      items[items.length - 1].focus();\n    } else if (action === 'first') {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-accordion.js","sourceRoot":"","sources":["../../../../src/components/stzh-accordion/stzh-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -57,13 +57,12 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 export const Default = {
   render: (args) => story(args, TEMPLATE),
-  args: {}
+  args: {
+    heading: 'Lorem Ipsum'
+  }
 };

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.css

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -279,7 +279,7 @@ export class StzhAccordionItem {
         "mutable": false,
         "complexType": {
           "original": "StzhAccordionVariant",
-          "resolved": "\"default\" | \"table\" | \"title\"",
+          "resolved": "\"default\" | \"menu\" | \"table\" | \"title\"",
           "references": {
             "StzhAccordionVariant": {
               "location": "import",

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

@@ -1,6 +1,6 @@
 import { createComponentStory } from '../../utils/story-utils';
 import { withActions } from '@storybook/addon-actions/decorator';
-import readme from './readme.md?raw'
+import readme from './readme.md?raw';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
@@ -9,7 +9,9 @@ const story = createComponentStory(COMPONENT_NAME);
 
 const TEMPLATE = `
 <stzh-accordion-item>
-  <stzh-text>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</stzh-text>
+  <stzh-cspace>
+    <stzh-text>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</stzh-text>
+  </stzh-cspace>
 </stzh-accordion-item>
 `;
 
@@ -30,12 +32,9 @@ export default {
       type: 'figma',
       url: getFigmaLink('accordion-item'),
       allowFullscreen: true
-    },
+    }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 export const Default = {
@@ -49,7 +48,7 @@ export const WithDescription = {
   render: (args) => story(args, TEMPLATE),
   args: {
     heading: 'Lorem ipsum',
-    description: 'Description',
+    description: 'Description'
   }
 };
 

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -433,7 +433,7 @@ export class StzhAmount {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hide `(optional)` label (or use `required` inside form ot hide it)"
+          "text": "Hide `(optional)` label (or use `required` inside form to hide it)"
         },
         "attribute": "hide-optional",
         "reflect": true,