@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

package/dist/cjs/stzh-vbz-majorticker.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9fcb4305.js');
-const index$1 = require('./index-8bd1552a.js');
+const index = require('./index-83d427ee.js');
+const axios = require('./axios-7ec96df7.js');
 const stringUtils = require('./string-utils-a867b99d.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 const dateAdapter = require('./date-adapter-2a78f6f8.js');
-const index$2 = require('./index.cjs.js');
+const index$1 = require('./index.cjs.js');
 
 const stzhVbzMajortickerCss = ".sc-stzh-vbz-majorticker-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-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--background-color:var(--stzh-color-coral);--color:var(--stzh-color-black);--close-color:var(--stzh-color-black)}";
 
@@ -45,7 +45,7 @@ const StzhVbzMajorticker = class {
     let apiUrl = this.api.replace(/\{lang\}/, this.localization.$locale);
     apiUrl = apiUrl + (apiUrl.includes("?") ? "&" : "?") + Date.now();
     // load data from API
-    const { data } = await index$1.axios.get(apiUrl);
+    const { data } = await axios.axios.get(apiUrl);
     this.data = data;
   }
   async dataWatcher(newValue) {
@@ -56,14 +56,14 @@ const StzhVbzMajorticker = class {
     else {
       this._data = newValue;
     }
-    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === index$2.VBZ.DISTURBANCE_INFORMATION && message.baseType === index$2.VBZ.BASE_TYPE_GLOBAL);
+    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === index$1.VBZ.DISTURBANCE_INFORMATION && message.baseType === index$1.VBZ.BASE_TYPE_GLOBAL);
     if (bigDisturbance) {
       const urls = bigDisturbance.channel
-        .filter(channel => channel.name === index$2.VBZ.CHANNEL_TICKER && channel.url)
+        .filter(channel => channel.name === index$1.VBZ.CHANNEL_TICKER && channel.url)
         .map(channel => channel.url)
         .reduce((a, b) => a.concat(b), []);
       const infoUrl = urls
-        .find(url => url.url.indexOf(index$2.VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
+        .find(url => url.url.indexOf(index$1.VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
       this.disturbance = {
         id: bigDisturbance.id,
         head: bigDisturbance.head,

package/dist/cjs/stzh-vbz-ticker.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9fcb4305.js');
-const index$2 = require('./index-8bd1552a.js');
+const index = require('./index-83d427ee.js');
+const axios = require('./axios-7ec96df7.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 const dateAdapter = require('./date-adapter-2a78f6f8.js');
 const index$1 = require('./index.cjs.js');
@@ -41,7 +41,7 @@ const StzhVbzTicker = class {
     let apiUrl = this.api.replace(/\{lang\}/, this.localization.$locale);
     apiUrl = apiUrl + (apiUrl.includes("?") ? "&" : "?") + Date.now();
     // load data from API
-    const { data } = await index$2.axios.get(apiUrl);
+    const { data } = await axios.axios.get(apiUrl);
     this.data = data;
   }
   async dataWatcher(newValue) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9fcb4305.js');
+const index = require('./index-83d427ee.js');
 
 const stzhVisuallyhiddenCss = ".sc-stzh-visuallyhidden-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-visuallyhidden-h{display:none}.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden,.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden::before,.sc-stzh-visuallyhidden-h *.sc-stzh-visuallyhidden::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-visuallyhidden-h .sc-stzh-visuallyhidden-s>*:not(:focus):not(:active){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}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9fcb4305.js');
+const index = require('./index-83d427ee.js');
 
-const stzhVspaceCss = ".sc-stzh-vspace-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-vspace-h{display:none}.sc-stzh-vspace-h *.sc-stzh-vspace,.sc-stzh-vspace-h *.sc-stzh-vspace::before,.sc-stzh-vspace-h *.sc-stzh-vspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-vspace-h{--space:var(--stzh-space-default);--around:0}.sc-stzh-vspace-h .sc-stzh-vspace-s>*{max-width:100%;padding-top:calc(var(--space) * var(--around));padding-bottom:calc(var(--space) * var(--around));margin:0}.sc-stzh-vspace-h .sc-stzh-vspace-s>*:not(:last-child){margin-bottom:calc(var(--space) * (1 - var(--around)))}.sc-stzh-vspace-h .sc-stzh-vspace-s>stzh-vspace,.sc-stzh-vspace-h .sc-stzh-vspace-s>stzh-hspace,.sc-stzh-vspace-h .sc-stzh-vspace-s>stzh-row,.sc-stzh-vspace-h .sc-stzh-vspace-s>stzh-container,.sc-stzh-vspace-h .sc-stzh-vspace-s>stzh-section{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}[around].sc-stzh-vspace-h{--around:1}[curve=tiny].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){[curve=tiny].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[curve=tiny].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}[curve=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}@media screen and (min-width: 1024px){[curve=small].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){[curve=small].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}[curve=regular].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){[curve=regular].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){[curve=regular].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}[curve=medium].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){[curve=medium].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){[curve=medium].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}[curve=large].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){[curve=large].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){[curve=large].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}[curve=big].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){[curve=big].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){[curve=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){[curve=big].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}[curve=huge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){[curve=huge].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){[curve=huge].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){[curve=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}[size=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}[size=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}[size=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}[size=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}[size=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}[size=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}[size=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}[size=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}[size=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}[size=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}[size=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}[size=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}[size=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}[size=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}[size=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}[size=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}@media screen and (min-width: 600px){[size-small=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){[size-small=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){[size-small=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){[size-small=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){[size-small=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){[size-small=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){[size-small=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){[size-small=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){[size-small=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){[size-small=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size-small=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){[size-small=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){[size-small=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){[size-small=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){[size-small=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){[size-small=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 800px){[size-smallheader=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){[size-smallheader=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){[size-smallheader=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){[size-smallheader=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 800px){[size-smallheader=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){[size-smallheader=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 800px){[size-smallheader=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){[size-smallheader=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 800px){[size-smallheader=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){[size-smallheader=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){[size-smallheader=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){[size-smallheader=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 800px){[size-smallheader=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){[size-medium=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){[size-medium=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){[size-medium=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){[size-medium=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){[size-medium=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){[size-medium=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){[size-medium=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){[size-medium=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){[size-medium=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){[size-medium=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){[size-medium=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){[size-medium=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){[size-medium=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){[size-medium=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){[size-medium=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){[size-medium=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){[size-large=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){[size-large=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){[size-large=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){[size-large=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[size-large=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){[size-large=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){[size-large=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[size-large=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){[size-large=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){[size-large=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){[size-large=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){[size-large=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){[size-large=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){[size-large=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){[size-large=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){[size-large=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){[size-ultra=xxxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){[size-ultra=xxsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){[size-ultra=xsmall].sc-stzh-vspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){[size-ultra=small].sc-stzh-vspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){[size-ultra=medium].sc-stzh-vspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){[size-ultra=large].sc-stzh-vspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){[size-ultra=xlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxxxlarge].sc-stzh-vspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){[size-ultra=big].sc-stzh-vspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){[size-ultra=xbig].sc-stzh-vspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){[size-ultra=huge].sc-stzh-vspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){[size-ultra=xhuge].sc-stzh-vspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){[size-ultra=none].sc-stzh-vspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){[size-ultra=default].sc-stzh-vspace-h{--space:var(--stzh-space-default)}}.stzh-vspace.sc-stzh-vspace{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start;padding:0;margin:0}.stzh-vspace.sc-stzh-vspace:empty{height:var(--space)}.stzh-vspace--border-top.sc-stzh-vspace{border-top:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--border-bottom.sc-stzh-vspace{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-vspace--justify-center.sc-stzh-vspace{-ms-flex-pack:center;justify-content:center}.stzh-vspace--justify-end.sc-stzh-vspace{-ms-flex-pack:end;justify-content:flex-end}.stzh-vspace--justify-between.sc-stzh-vspace{-ms-flex-pack:justify;justify-content:space-between}.stzh-vspace--justify-around.sc-stzh-vspace{-ms-flex-pack:distribute;justify-content:space-around}.stzh-vspace--justify-evenly.sc-stzh-vspace{-ms-flex-pack:space-evenly;justify-content:space-evenly}";
+const stzhVspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--v-space:var(--stzh-space-default);--v-around:0;clear:both}:host::after{content:\"\";display:table;clear:both}:host ::slotted(*){max-width:100%;padding-top:calc(var(--v-space) * var(--v-around));padding-bottom:calc(var(--v-space) * var(--v-around));margin:0}:host ::slotted(*:not(:last-child)){margin-bottom:calc(var(--v-space) * (1 - var(--v-around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty){--v-around:1;height:var(--v-space)}:host([around]:not([around=false])){--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: 1024px){: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: 1024px){: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: 1024px){:host([curve=regular]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--v-space:var(--stzh-space-xlarge)}}:host([curve=medium]){--v-space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){: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: 1024px){: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-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--v-space:var(--stzh-space-big)}}@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: 1024px){:host([curve=huge]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--v-space:var(--stzh-space-huge)}}: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: 800px){:host([size-smallheader=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--v-space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){: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: 1440px){:host([size-ultra=xxxsmall]){--v-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--v-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--v-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--v-space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--v-space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--v-space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--v-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--v-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--v-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--v-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--v-space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--v-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--v-space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--v-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--v-space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--v-space:var(--stzh-space-default)}}.stzh-vspace{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align: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{-ms-flex-pack:center;justify-content:center}.stzh-vspace--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-vspace--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-vspace--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-vspace--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-vspace--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-vspace--items-center{-ms-flex-align:center;align-items:center}.stzh-vspace--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-vspace--items-stretch{-ms-flex-align:stretch;align-items:stretch}";
 
 const StzhVspace = class {
   constructor(hostRef) {
@@ -16,6 +16,7 @@ const StzhVspace = class {
     this.sizeLarge = "inherit";
     this.sizeUltra = "inherit";
     this.justify = "start";
+    this.items = "start";
     this.around = false;
     this.border = "none";
   }
@@ -23,7 +24,7 @@ const StzhVspace = class {
     return (index.h(index.Host, null, index.h("div", { class: {
         "stzh-vspace": true,
         [`stzh-vspace--justify-${this.justify}`]: !!this.justify,
-        [`stzh-vspace--border-${this.border}`]: !!this.border
+        [`stzh-vspace--items-${this.items}`]: !!this.items
       } }, index.h("slot", null))));
   }
 };

package/dist/cjs/{utils-ff153309.js → utils-a2ff9f84.js}

@@ -1,17 +1,14 @@
 'use strict';
 
-// IMPORTANT: Don't use this to check for a default slot when shadow DOM is not used
-// https://github.com/shoelace-style/shoelace/blob/9f7bc29b5f13eda1beb1d4f9c952894a21e13322/src/components/card/card.tsx
 // Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
 // slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
-//
 function hasSlot(el, name) {
   // Look for a named slot
   if (name) {
     return el.querySelector(`[slot="${name}"]`) !== null;
   }
   // Look for a default slot
-  return Array.from(el.childNodes).some(node => {
+  return Array.from(childNodes(el)).some(node => {
     if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
       return true;
     }
@@ -32,18 +29,49 @@ function setPropsIfNull(element, attributes) {
   });
 }
 function isStzhElement(element) {
-  if (!element) {
+  if (!element || element.nodeType !== 1) {
     return false;
   }
   return element.tagName.toLowerCase().indexOf('stzh-') === 0;
 }
-// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom) and potentially wrapped in normal elements (e.g. angular component)
-function cloneElement(elementToClone) {
+function childNodes(node) {
+  const childNodes = node.childNodes;
+  // check if element is stencil element without shadow dom
+  // and then detect elements that were slotted into the element
+  if (node["s-sc"]) {
+    const result = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const slot = childNodes[i]["s-nr"];
+      if (slot) {
+        result.push(slot);
+      }
+    }
+    return result;
+  }
+  return Array.from(childNodes);
+}
+const nativeCloneNodeFn = Node.prototype.cloneNode;
+function cloneElement(node, deep) {
+  const clonedNode = nativeCloneNodeFn.call(node, false);
+  const srcChildNodes = childNodes(node);
+  if (deep) {
+    for (let i = 0; i < srcChildNodes.length; i++) {
+      if (srcChildNodes[i].nodeType !== 2) {
+        const childClone = cloneElement(srcChildNodes[i], true);
+        clonedNode.appendChild(childClone);
+      }
+    }
+  }
+  return clonedNode;
+}
+// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)
+// and potentially wrapped in normal elements (e.g. angular component)
+function cloneWrappedStzhElement(elementToClone) {
   let clonedElement;
   let clonedStzhElement;
   let originalStzhElement;
   if (isStzhElement(elementToClone)) {
-    clonedElement = elementToClone.cloneNode(true);
+    clonedElement = cloneElement(elementToClone, true);
     clonedStzhElement = clonedElement;
     originalStzhElement = elementToClone;
   }
@@ -59,19 +87,19 @@ function cloneElement(elementToClone) {
       clonedInnerElementLast = clonedInnerElementCurrent;
     }
     if (isStzhElement(originalInnerElementLast.children[0])) {
-      clonedStzhElement = originalInnerElementLast.children[0].cloneNode(true);
+      clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);
       originalStzhElement = originalInnerElementLast.children[0];
       clonedInnerElementLast.appendChild(clonedStzhElement);
     }
     else {
       // no root stzh element found, so we give up and just deep clone the root
-      clonedElement = elementToClone.cloneNode(true);
+      clonedElement = cloneElement(elementToClone, true);
     }
   }
   return [clonedElement, clonedStzhElement, originalStzhElement];
 }
 
-exports.cloneElement = cloneElement;
+exports.cloneWrappedStzhElement = cloneWrappedStzhElement;
 exports.hasSlot = hasSlot;
 exports.isStzhElement = isStzhElement;
 exports.setPropsIfNull = setPropsIfNull;

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

@@ -19,7 +19,7 @@
     "requiredFieldMarker": "",
     "requiredFieldText": " (Pflichtfeld)",
     "optionalFieldMarker": " (optional)",
-    "optionalFieldText": "",
+    "optionalFieldText": " (optional)",
     "clearButtonLabel": "Feld leeren",
     "moreInfoButtonLabel": "Mehr Info",
     "dayNames": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
@@ -56,7 +56,7 @@
   },
   "dropdown": {
     "create": "<strong>{x}</strong> hinzufügen",
-    "notLoading": "Schreibe mindestens {x} Zeichen",
+    "notLoading": "Schreiben Sie mindestens {x} Zeichen",
     "noResults": "Keine Resultate gefunden für \"{x}\"",
     "removeButtonTitle": "Option löschen"
   },
@@ -109,7 +109,7 @@
     "answerOr": " oder "
   },
   "sortable": {
-    "description": "Drücke die Leertaste, um ein Item auszuwählen, verschiebe es dann mit den Pfeiltasten oder drücke Escape, um abzubrechen.",
+    "description": "Drücken Sie die Leertaste, um ein Item auszuwählen, verschieben Sie es dann mit den Pfeiltasten oder drücken Sie Escape, um abzubrechen.",
     "started": "Item {title} ausgewählt. Aktuelle Position in der Liste: {current} von {total}.",
     "dropped": "Item {title}, Verschiebung beendet. Finale Position in der Liste: {current} von {total}",
     "canceled": "Item {title}, Verschiebung abgebrochen.",
@@ -117,7 +117,7 @@
   },
   "datamessagelist-item": {
     "actionsPopoverLabel": "Aktionen",
-    "unread": "Ungelesen" 
+    "unread": "Ungelesen"
   },
   "actionset": {
     "actions": "Aktionen",

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

@@ -19,7 +19,7 @@
     "requiredFieldMarker": "",
     "requiredFieldText": " (required)",
     "optionalFieldMarker": " (optional)",
-    "optionalFieldText": "",
+    "optionalFieldText": " (optional)",
     "clearButtonLabel": "Clear input",
     "moreInfoButtonLabel": "More Info",
     "dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],

package/dist/collection/assets/icons/mono/calculator.svg

@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2688_137326)">
+<path d="M16.25 4.50006V6.00006M5 0.750061H20C20.4142 0.750061 20.75 1.08585 20.75 1.50006V22.5001C20.75 22.9143 20.4142 23.2501 20 23.2501H5C4.58579 23.2501 4.25 22.9143 4.25 22.5001V1.50006C4.25 1.08585 4.58579 0.750061 5 0.750061ZM9.125 20.0626C9.125 20.3732 8.87316 20.6251 8.5625 20.6251C8.25184 20.6251 8 20.3732 8 20.0626C8 19.7519 8.25184 19.5001 8.5625 19.5001C8.87316 19.5001 9.125 19.7519 9.125 20.0626ZM13.0625 20.0626C13.0625 20.3732 12.8107 20.6251 12.5 20.6251C12.1893 20.6251 11.9375 20.3732 11.9375 20.0626C11.9375 19.7519 12.1893 19.5001 12.5 19.5001C12.8107 19.5001 13.0625 19.7519 13.0625 20.0626ZM17 20.0626C17 20.3732 16.7482 20.6251 16.4375 20.6251C16.1268 20.6251 15.875 20.3732 15.875 20.0626C15.875 19.7519 16.1268 19.5001 16.4375 19.5001C16.7482 19.5001 17 19.7519 17 20.0626ZM9.125 15.9376C9.125 16.2482 8.87316 16.5001 8.5625 16.5001C8.25184 16.5001 8 16.2482 8 15.9376C8 15.6269 8.25184 15.3751 8.5625 15.3751C8.87316 15.3751 9.125 15.6269 9.125 15.9376ZM13.0625 15.9376C13.0625 16.2482 12.8107 16.5001 12.5 16.5001C12.1893 16.5001 11.9375 16.2482 11.9375 15.9376C11.9375 15.6269 12.1893 15.3751 12.5 15.3751C12.8107 15.3751 13.0625 15.6269 13.0625 15.9376ZM17 15.9376C17 16.2482 16.7482 16.5001 16.4375 16.5001C16.1268 16.5001 15.875 16.2482 15.875 15.9376C15.875 15.6269 16.1268 15.3751 16.4375 15.3751C16.7482 15.3751 17 15.6269 17 15.9376ZM9.125 11.8126C9.125 12.1232 8.87316 12.3751 8.5625 12.3751C8.25184 12.3751 8 12.1232 8 11.8126C8 11.5019 8.25184 11.2501 8.5625 11.2501C8.87316 11.2501 9.125 11.5019 9.125 11.8126ZM13.0625 11.8126C13.0625 12.1232 12.8107 12.3751 12.5 12.3751C12.1893 12.3751 11.9375 12.1232 11.9375 11.8126C11.9375 11.5019 12.1893 11.2501 12.5 11.2501C12.8107 11.2501 13.0625 11.5019 13.0625 11.8126ZM17 11.8126C17 12.1232 16.7482 12.3751 16.4375 12.3751C16.1268 12.3751 15.875 12.1232 15.875 11.8126C15.875 11.5019 16.1268 11.2501 16.4375 11.2501C16.7482 11.2501 17 11.5019 17 11.8126ZM6.5 3.00006H18.5V8.25006H6.5V3.00006Z" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2688_137326">
+<rect width="24" height="24" fill="white" transform="translate(0.5 6.10352e-05)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/collection-manifest.json

@@ -20,7 +20,7 @@
     "./components/stzh-chip/stzh-chip.js",
     "./components/stzh-chip-select/stzh-chip-select.js",
     "./components/stzh-clamp/stzh-clamp.js",
-    "./components/stzh-contactaddress/stzh-contactaddress.js",
+    "./components/stzh-contact/stzh-contact.js",
     "./components/stzh-container/stzh-container.js",
     "./components/stzh-cspace/stzh-cspace.js",
     "./components/stzh-datalist/stzh-datalist.js",
@@ -44,6 +44,7 @@
     "./components/stzh-icon/stzh-icon.js",
     "./components/stzh-icon-sprite/stzh-icon-sprite.js",
     "./components/stzh-input/stzh-input.js",
+    "./components/stzh-invert/stzh-invert.js",
     "./components/stzh-langnav/stzh-langnav.js",
     "./components/stzh-link/stzh-link.js",
     "./components/stzh-list/stzh-list.js",
@@ -67,15 +68,18 @@
     "./components/stzh-progressbar-item/stzh-progressbar-item.js",
     "./components/stzh-radio/stzh-radio.js",
     "./components/stzh-radiogroup/stzh-radiogroup.js",
+    "./components/stzh-ratio/stzh-ratio.js",
     "./components/stzh-readspeaker/stzh-readspeaker.js",
     "./components/stzh-richtext/stzh-richtext.js",
     "./components/stzh-row/stzh-row.js",
     "./components/stzh-saptcha/stzh-saptcha.js",
     "./components/stzh-section/stzh-section.js",
     "./components/stzh-share/stzh-share.js",
+    "./components/stzh-show/stzh-show.js",
     "./components/stzh-sitemap/stzh-sitemap.js",
     "./components/stzh-skiplink/stzh-skiplink.js",
     "./components/stzh-sortable/stzh-sortable.js",
+    "./components/stzh-space/stzh-space.js",
     "./components/stzh-status/stzh-status.js",
     "./components/stzh-sticky/stzh-sticky.js",
     "./components/stzh-table/stzh-table.js",
@@ -92,8 +96,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.22.2",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

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

@@ -98,6 +98,7 @@
 }
 
 .stzh-actionset {
+  /* Overflow variant */
   /* Stack variant */
 }
 .stzh-actionset__actions {
@@ -120,6 +121,11 @@
   --width: auto;
   opacity: 1;
 }
+@media screen and (min-width: 1024px) {
+  .stzh-actionset--overflow .stzh-actionset__action {
+    --white-space: nowrap;
+  }
+}
 @media screen and (max-width: 599px) {
   .stzh-actionset--stack .stzh-actionset__actions {
     flex-direction: column;
@@ -132,6 +138,11 @@
     align-items: stretch;
   }
 }
+@media screen and (min-width: 600px) {
+  .stzh-actionset--stack .stzh-actionset__action {
+    --white-space: nowrap;
+  }
+}
 @media screen and (max-width: 599px) {
   .stzh-actionset--stack .stzh-actionset__action:not(:last-child) {
     margin-bottom: var(--stzh-space-xsmall);

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { fetchTranslations } from "../../utils/translation-utils";
-import { media } from '../../utils/media-utils';
+import { media, addMediaChangeListener, removeMediaChangeListener } from '../../utils/media-utils';
 /**
  */
 export class StzhActionset {
@@ -44,11 +44,11 @@ export class StzhActionset {
             if (newActionsHeight < childHeight) {
               newActionsHeight = childHeight;
             }
-            newActionsWidth = newActionsWidth + childWidth;
+            newActionsWidth = newActionsWidth + childWidth + 1;
           }
         });
         Object.assign(this.actionsElement.style, {
-          width: `${newActionsWidth + 1}px`,
+          width: `${newActionsWidth}px`,
           height: `${newActionsHeight}px`
         });
       }
@@ -63,6 +63,10 @@ export class StzhActionset {
       }
       this.actionsCollapsed = this._actions.slice(newActionsVisible);
     };
+    this.mediaChangeHandler = () => {
+      this.actionsCollapsed = [];
+      requestAnimationFrame(this.update);
+    };
     this.localization = undefined;
     this.variant = "stack";
     this.popoverButtonVariant = "";
@@ -82,7 +86,7 @@ export class StzhActionset {
       this._actions = newValue;
     }
   }
-  handleResize() {
+  handleLoad() {
     if (this.debounceResize) {
       window.cancelAnimationFrame(this.debounceResize);
     }
@@ -94,6 +98,12 @@ export class StzhActionset {
       this.localization = await fetchTranslations(this.element, "actionset");
     }
   }
+  connectedCallback() {
+    addMediaChangeListener(this.mediaChangeHandler);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.mediaChangeHandler);
+  }
   componentDidLoad() {
     this.update();
   }
@@ -316,25 +326,25 @@ export class StzhActionset {
   static get listeners() {
     return [{
         "name": "appload",
-        "method": "handleResize",
+        "method": "handleLoad",
         "target": "window",
         "capture": false,
         "passive": false
       }, {
         "name": "resize",
-        "method": "handleResize",
+        "method": "handleLoad",
         "target": "window",
         "capture": false,
         "passive": true
       }, {
         "name": "DOMContentLoaded",
-        "method": "handleResize",
+        "method": "handleLoad",
         "target": "window",
         "capture": false,
         "passive": false
       }, {
         "name": "load",
-        "method": "handleResize",
+        "method": "handleLoad",
         "target": "window",
         "capture": false,
         "passive": false

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

@@ -35,28 +35,28 @@ const actions = `[
   {
     "id": "action-1",
     "icon": "alarm-bell",
-    "label": "Lorem",
+    "label": "Lorem ipsum dolor sit amet",
     "badge": "3"
   },
   {
     "id": "action-2",
     "icon": "cart",
-    "label": "Ipsum"
+    "label": "Lorem ipsum dolor sit amet"
   },
   {
     "id": "action-3",
     "icon": "delete",
-    "label": "Dolor"
+    "label": "Lorem ipsum dolor sit amet"
   },
   {
     "id": "action-4",
     "icon": "mail",
-    "label": "Lorem"
+    "label": "Lorem ipsum dolor sit amet"
   },
   {
     "id": "action-5",
     "icon": "clock",
-    "label": "Ipsum"
+    "label": "Lorem ipsum dolor sit amet"
   }
 ]`;
 

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

@@ -272,11 +272,9 @@
   }
 }
 
-.stzh-anchornav {
+.stzh-anchornav__list {
   -moz-column-count: var(--columns);
        column-count: var(--columns);
-}
-.stzh-anchornav__list {
   margin: calc((var(--stzh-space-large) / 2) / -2);
 }
 .stzh-anchornav__item {

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

@@ -106,24 +106,45 @@
   --icon-size: var(--stzh-icon-size-small);
   --icon-text-margin: var(--stzh-space-small);
   --badge-icon-text-margin: calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));
-  --padding: var(--stzh-space-xsmall) var(--stzh-space-xlarge);
+  --padding: calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);
+  --white-space: normal;
+  --border-radius: var(--stzh-button-border-radius);
   --hover-color: var(--stzh-color-white);
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --floating-position: sticky;
+  --floating-float: right;
+  --floating-bottom: var(--stzh-space-medium);
+  --floating-right: var(--stzh-space-medium);
   display: inline-block;
-  border-radius: var(--stzh-button-border-radius);
+  border-radius: var(--border-radius);
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --floating-bottom: var(--stzh-space-xlarge);
+    --floating-right: var(--stzh-space-xlarge);
+  }
 }
 :host[fullwidth]:not([fullwidth=false]) {
   width: 100%;
   display: block;
 }
+:host[rounded]:not([rounded=false]) {
+  --border-radius: var(--height);
+}
+:host[floating]:not([floating=false]) {
+  position: var(--floating-position);
+  bottom: var(--floating-bottom);
+  right: var(--floating-right);
+  float: var(--floating-float);
+}
 :host[size=small] {
   --height: var(--stzh-form-input-small-height);
 }
 :host[size=tiny] {
   --height: var(--stzh-form-input-tiny-height);
   --icon-text-margin: var(--stzh-space-xsmall);
-  --padding: var(--stzh-space-xxsmall) var(--stzh-space-medium);
+  --padding: calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium);
 }
 :host[variant=secondary] {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
@@ -200,6 +221,7 @@
   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);
+  line-height: 1.25;
   font-family: inherit;
   position: relative;
   z-index: 0;
@@ -219,11 +241,12 @@
   text-decoration: none;
   width: 100%;
   min-width: var(--height);
-  height: var(--height);
-  border-radius: var(--stzh-button-border-radius);
+  min-height: var(--height);
+  border-radius: var(--border-radius);
   text-align: left;
   /* Hover / Focus / Checked / Disabled of Radio Type */
   /* Size variants */
+  /* Floating */
   /* Badge positioning variants */
   /* Variant if button only has icon */
   /* Effect */
@@ -250,7 +273,13 @@
   height: 1em;
 }
 .stzh-button__text {
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+          hyphens: auto;
+  white-space: var(--white-space);
+  text-align: center;
 }
 .stzh-button__icon-wrapper:not(:empty) + .stzh-button__text:not(:empty), .stzh-button__text:not(:empty) + .stzh-button__icon-wrapper:not(:empty) {
   margin-left: var(--icon-text-margin);
@@ -329,6 +358,9 @@
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
 }
+.stzh-button--is-floating {
+  box-shadow: var(--stzh-box-shadow-overlay);
+}
 .stzh-button--badge-position-button .stzh-button__icon-wrapper {
   position: static;
 }