@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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}: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/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"],

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/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,7 +106,8 @@
   --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;
   --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));
@@ -123,7 +124,7 @@
 :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 +201,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,7 +221,7 @@
   text-decoration: none;
   width: 100%;
   min-width: var(--height);
-  height: var(--height);
+  min-height: var(--height);
   border-radius: var(--stzh-button-border-radius);
   text-align: left;
   /* Hover / Focus / Checked / Disabled of Radio Type */
@@ -250,7 +252,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);

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

@@ -29,38 +29,42 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-button {...args}>Button Text</stzh-button>
-);
-
-const TemplateJustIcon = (args) => (
   <stzh-button {...args}></stzh-button>
 );
 
 export const Default = Template.bind({});
 Default.args = {
+  label: 'Button Text'
 };
 
 export const AsLink = Template.bind({});
 AsLink.args = {
+  label: 'Button Text',
   href: 'https://www.stadt-zuerich.ch/',
   target: '_blank'
 };
 
 export const WithIcon = Template.bind({});
 WithIcon.args = {
+  label: 'Button Text',
   icon: 'filtering'
 };
 
-export const JustIcon = TemplateJustIcon.bind({});
+export const JustIcon = Template.bind({});
 JustIcon.args = {
   'icon-only': true,
-  label: 'Button Text',
   icon: 'filtering'
 };
 
 export const CTA = Template.bind({});
 CTA.args = {
+  label: 'Button Text',
   effect: 'cta',
   icon: 'arrow-right-long',
   'icon-position': 'right'
 };
+
+export const LongText = Template.bind({});
+LongText.args = {
+  label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit'
+};

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

@@ -405,24 +405,6 @@
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
-.stzh-card--has-link .stzh-card__title-link::before {
-  transition: all var(--stzh-base-transition-animation-speed);
-}
-.stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link, .stzh-card--has-link .stzh-card__title-link:hover, .stzh-card--has-link .stzh-card__title-link:focus {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
-.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:focus::before, .stzh-card--has-link .stzh-card__title-link:focus::before {
-  background-color: var(--stzh-color-primary4);
-}
 .stzh-card--has-link:hover .stzh-card__footer-arrow {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }

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

@@ -84,7 +84,7 @@ const footerActions = `[
   {
     "id": "action-3",
     "icon": "delete",
-    "label": "Dolor"
+    "label": "Lorem ipsum dolor sit amet"
   },
   {
     "id": "action-4",