@oiz/stzh-components 2.0.0 → 2.1.0-beta

package/dist/cjs/stzh-progressbar-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 
 const stzhProgressbarItemCss = ".sc-stzh-progressbar-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-item-h{display:none}.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::before,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hide].sc-stzh-progressbar-item-h{display:none}.stzh-progressbar-item.sc-stzh-progressbar-item{text-align:center}.stzh-progressbar-item__button.sc-stzh-progressbar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;border-radius:var(--stzh-form-input-border-radius)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary8)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-grey13);border-radius:1.3125rem;text-align:center;margin-bottom:var(--stzh-space-large);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stzh-color-grey55);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{width:2.625rem;height:2.625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:none;content:\"\";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-color-grey13);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:1.25rem;right:2.5625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item::after{content:\"\";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:1.3125rem;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-size:0.875rem;line-height:1.28;color:var(--stzh-color-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;display:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:block}}.stzh-progressbar-item__number.sc-stzh-progressbar-item,.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{z-index:1}.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-grey13);border-radius:50%;cursor:pointer;-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:var(--stzh-color-primary8)}@media screen and (min-width: 600px){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before,.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block}.stzh-progressbar-item--first.sc-stzh-progressbar-item{position:relative}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.96875rem))}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:transparent}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item:hover{text-decoration:none}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white)}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));z-index:-1}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-white)}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{margin-bottom:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{padding-left:0;padding-right:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.8125rem;right:1.875rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:none}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:var(--stzh-color-white);z-index:1}";
 
@@ -11,14 +11,6 @@ const StzhProgressbarItem = class {
     index.registerInstance(this, hostRef);
     this.stzhClick = index.createEvent(this, "stzhClick", 7);
     this.stzhDottedClick = index.createEvent(this, "stzhDottedClick", 7);
-    this.first = false;
-    this.last = false;
-    this.passed = false;
-    this.current = false;
-    this.hide = false;
-    this.dotted = false;
-    this.step = 1;
-    this.icon = "";
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
@@ -31,6 +23,14 @@ const StzhProgressbarItem = class {
         originalEvent: event
       });
     };
+    this.first = false;
+    this.last = false;
+    this.passed = false;
+    this.current = false;
+    this.hide = false;
+    this.dotted = false;
+    this.step = 1;
+    this.icon = "";
   }
   render() {
     const classes = {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 const mediaUtils = require('./media-utils-8cfc8591.js');
 
 const stzhProgressbarCss = ".sc-stzh-progressbar-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-progressbar-h{display:none}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}";
@@ -10,29 +10,6 @@ const stzhProgressbarCss = ".sc-stzh-progressbar-h{font-family:var(--stzh-font-f
 const StzhProgressbar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
     this.setCurrentSteps = () => {
       if (mediaUtils.media("ultra").matches && this.stepsUltra) {
         this.currentSteps = this.stepsUltra;
@@ -51,6 +28,14 @@ const StzhProgressbar = class {
       }
       this.element.style.setProperty("--steps", this.currentSteps.toString());
     };
+    this.data = [];
+    this.index = 0;
+    this.steps = 5;
+    this.stepsSmall = 6;
+    this.stepsMedium = 0;
+    this.stepsLarge = 0;
+    this.stepsUltra = 0;
+    this.currentSteps = undefined;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 const utils = require('./utils-8dc66449.js');
 
 const stzhReadspeakerCss = ":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}.stzh-readspeaker{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}.stzh-readspeaker[hidden]{display:none}.stzh-readspeaker *,.stzh-readspeaker *::before,.stzh-readspeaker *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-readspeaker .rsbtn_play{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-readspeaker .rsbtn_classic.rsexpanded .rsbtn_exp.rsimg{float:left;padding-bottom:0;-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover)}.rsbtn_classic.rsexpanded{position:absolute;max-width:100%;z-index:var(--stzh-z-index-sticky)}.rsbtn_classic.rsexpanded,.rsbtn_classic.rsexpanded *,.rsbtn_classic.rsexpanded *::after,.rsbtn_classic.rsexpanded *::before{-webkit-box-sizing:initial;box-sizing:initial}.rsbtn_classic.rsexpanded .rsbtn_playerarea{padding:0.625rem;border:none}.rsbtn_classic.rsexpanded .rsbtn_closer.rsimg{right:0.625rem;top:0.625rem}.rsbtn_classic.rsexpanded .rsbtn_settings .rsbtn_btnlabel.rsimg,.rsbtn_classic.rsexpanded .rsbtn_dl .rsbtn_btnlabel,.rsbtn_classic.rsexpanded .rsbtn_powered .rsbtn_btnlabel{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);height:auto}.rsbtn_classic.rsexpanded .rsbtn_bottomlinks{margin-top:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_topbar>*,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_stop,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_pause,.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_volume,.rsbtn_classic.rsexpanded .rsbtn_closer,.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.375rem solid var(--stzh-color-grey13);border-radius:0.3125rem}.rsbtn_classic.rsexpanded .rsbtn_exp.rsimg .rsbtn_icon{border:0.3125rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_progress_container.rsimg{border:0.4375rem solid var(--stzh-color-grey13)}.rsbtn_classic.rsexpanded .rsbtn_topbar{margin-right:2.5rem}.rsbtn_classic.rspopup.rscompact{z-index:var(--stzh-z-index-sticky);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border:none;padding:0.625rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:1.25rem;height:1.25rem}.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_left,.rsbtn_classic.rspopup.rscompact .rsbtn_play .rsbtn_right{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}.rsbtn_classic.rspopup.rscompact .rsbtn_exp .rsbtn_separator{height:0.0625rem}";
@@ -23,6 +23,8 @@ const StzhReadspeaker = class {
         });
       });
     };
+    this.href = undefined;
+    this.eventId = undefined;
   }
   // Sometimes the library is loaded later, so we register
   // the click events also when the page has loaded

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

@@ -2,28 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 
 const stzhRowCss = ":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{width:100%}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]) ::slotted(stzh-cell:not([span-smallheader])){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 1024px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}.stzh-row--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-row--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-row--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-row--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-row--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-row--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-row--items-center{-ms-flex-align:center;align-items:center}.stzh-row--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-row--items-stretch{-ms-flex-align:stretch;align-items:stretch}.stzh-row--content-end{-ms-flex-line-pack:end;align-content:flex-end}.stzh-row--content-center{-ms-flex-line-pack:center;align-content:center}.stzh-row--content-between{-ms-flex-line-pack:justify;align-content:space-between}.stzh-row--content-around{-ms-flex-line-pack:distribute;align-content:space-around}.stzh-row--content-evenly{-ms-flex-line-pack:space-evenly;align-content:space-evenly}";
 
 const StzhRow = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Default span of each cell */
     this.span = 12;
-    /** Default span of each cell above small breakpoint */
     this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
     this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
     this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
     this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
     this.justify = "start";
-    /** Control how cells items are positioned along a container's cross axis */
     this.items = "start";
-    /** Utilities for controlling how rows are positioned in multi-row flex containers. */
     this.content = "start";
   }
   render() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 
 const stzhSaptchaCss = ".sc-stzh-saptcha-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-saptcha-h{display:none}.sc-stzh-saptcha-h *.sc-stzh-saptcha,.sc-stzh-saptcha-h *.sc-stzh-saptcha::before,.sc-stzh-saptcha-h *.sc-stzh-saptcha::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);background-color:var(--stzh-section-highlight-background-color)}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-saptcha__box.sc-stzh-saptcha{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-saptcha__box.sc-stzh-saptcha{padding-right:var(--stzh-space-xlarge)}}.stzh-saptcha__info.sc-stzh-saptcha,.stzh-saptcha__question.sc-stzh-saptcha{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)}.stzh-saptcha__answer.sc-stzh-saptcha{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-saptcha__input.sc-stzh-saptcha{margin-top:var(--stzh-space-large)}}";
@@ -11,16 +11,13 @@ let saptchaCounter = 0;
 const StzhSaptcha = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Numbers shown to user for selection */
-    this.numbers = [];
     this._numbers = [];
-    /** The value of the input element */
+    this.localization = undefined;
+    this.numbers = [];
     this.value = "";
-    /** Name of input */
     this.name = "saptcha";
-    /** Invalid status */
+    this.error = undefined;
     this.invalid = false;
-    /** Whether the element is disabled or not */
     this.disabled = false;
   }
   numbersWatcher(newValue) {

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

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 
 const stzhSectionCss = ".sc-stzh-section-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-section-h{display:none}.sc-stzh-section-h *.sc-stzh-section,.sc-stzh-section-h *.sc-stzh-section::before,.sc-stzh-section-h *.sc-stzh-section::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-section-h{--background-color:var(--stzh-section-background-color)}[variant=highlight].sc-stzh-section-h{--stzh-base-color:var(--stzh-color-grey61);--background-color:var(--stzh-section-highlight-background-color);--highlight-horizontal-padding:var(--stzh-section-highlight-horizontal-padding);--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding)}@media screen and (min-width: 600px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-medium) var(--highlight-horizontal-padding) var(--stzh-space-large)}}@media screen and (min-width: 1024px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-large) var(--highlight-horizontal-padding) var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[variant=highlight].sc-stzh-section-h{--highlight-padding:var(--stzh-space-xlarge) var(--highlight-horizontal-padding) var(--stzh-space-xxlarge)}}.stzh-section--highlight.sc-stzh-section{background-color:var(--background-color);padding:var(--highlight-padding)}";
 
 const StzhSection = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Variant */
     this.variant = "default";
   }
   render() {

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

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9fcb4305.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+
+const stzhShareCss = ".sc-stzh-share-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-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:-ms-flexbox;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-small)}.stzh-share__icon.sc-stzh-share{--size:var(--stzh-icon-size-xsmall)}.stzh-share__button.sc-stzh-share{color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius);display:grid;place-items:center;width:2.875rem;height:1.625rem}.stzh-share__button.is-facebook.sc-stzh-share{background-color:#3b5998}.stzh-share__button.is-facebook.sc-stzh-share:hover{background-color:#23355B}.stzh-share__button.is-twitter.sc-stzh-share{background-color:#1da1f2}.stzh-share__button.is-twitter.sc-stzh-share:hover{background-color:#116091}.stzh-share__button.is-linkedin.sc-stzh-share{background-color:#1485BD}.stzh-share__button.is-linkedin.sc-stzh-share:hover{background-color:#0C4F71}.stzh-share__button.is-xing.sc-stzh-share{background-color:#0E7574}.stzh-share__button.is-xing.sc-stzh-share:hover{background-color:#084645}.stzh-share__button.is-mail.sc-stzh-share{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-share__button.is-mail.sc-stzh-share:hover{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
+
+const abbreviateText = function (text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+};
+// returns content of <meta name="" content=""> tags or '' if empty/non existant
+const getMeta = function (name) {
+  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
+  return meta ? meta.getAttribute("content") : "";
+};
+const StzhShare = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._services = [];
+    this.openPopup = (url, event) => {
+      event.preventDefault();
+      window.open(url, "_blank", "width=600,height=460");
+    };
+    this.localization = undefined;
+    this.url = window.location.href;
+    this.services = [
+      "facebook", "twitter", "linkedin", "xing", "mail"
+    ];
+  }
+  servicesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._services = JSON.parse(newValue);
+    }
+    else {
+      this._services = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.servicesWatcher(this.services);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "share");
+    }
+  }
+  render() {
+    var _a;
+    const classes = {
+      "stzh-share": true
+    };
+    const shareUrl = encodeURIComponent(this.url);
+    const mailSubject = encodeURIComponent(this.localization.mailSubject);
+    const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
+    const title = encodeURIComponent(document.title);
+    const description = encodeURIComponent(getMeta("description"));
+    // 280 - URL (always 24) = 256
+    const maxTweetLength = 256;
+    const serviceData = {
+      "facebook": {
+        popup: true,
+        blank: true,
+        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
+        text: this.localization.shareFacebook,
+        icon: "facebook"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter"
+      },
+      "linkedin": {
+        popup: true,
+        blank: true,
+        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
+        text: this.localization.shareLinkedin,
+        icon: "linkedin"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail"
+      }
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("ul", { class: "stzh-share__list" }, this._services.map((service) => index.h("li", { class: "stzh-share__item" }, index.h("stzh-tooltip", { content: serviceData[service].text }, index.h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, index.h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "services": ["servicesWatcher"]
+  }; }
+};
+StzhShare.style = stzhShareCss;
+
+exports.stzh_share = StzhShare;

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

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 
 const stzhSkiplinkCss = ".sc-stzh-skiplink-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-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);text-decoration:none}.stzh-skiplink.sc-stzh-skiplink: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}.stzh-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
 
 const StzhSkiplink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Whether the skiplink is currently focused */
+    this.href = undefined;
+    this.linkAccesskey = undefined;
+    this.linkTitle = undefined;
     this.focused = false;
   }
   focusinHandler() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-ac9bdc7f.js');
+const index$1 = require('./index-9fcb4305.js');
 const utils = require('./utils-8dc66449.js');
 const translationUtils = require('./translation-utils-73073e44.js');
 
@@ -3870,35 +3870,6 @@ const StzhSortable = class {
     index$1.registerInstance(this, hostRef);
     this.stzhUpdate = index$1.createEvent(this, "stzhUpdate", 7);
     this.stzhDisable = index$1.createEvent(this, "stzhDisable", 7);
-    /** Wether sorting is disabled or not */
-    this.disabled = false;
-    /** HTML attribute that is used by the `toArray()` method */
-    this.dataIdAttribute = "data-id";
-    /** Container  */
-    this.container = () => {
-      var _a;
-      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    };
-    /** Algorithm how the ghost element will be cloned */
-    this.ghostClone = (dragElement) => {
-      const [clonedElement] = utils.cloneElement(dragElement);
-      return clonedElement;
-    };
-    /** Filtered elements that should prevent dragging inside the drag item elements */
-    this.filterElements = [
-      "[data-stzh-sortable-filtered]",
-      "[sortable-disabled]",
-      "button",
-      "a[href]",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      "iframe",
-      "details",
-      "area",
-      "stzh-sortable"
-    ];
     this.selectedItem = null;
     this.resetItemOnBlur = false;
     this.init = () => {
@@ -3994,6 +3965,31 @@ const StzhSortable = class {
         this.resetActiveItem();
       }
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.dataIdAttribute = "data-id";
+    this.container = () => {
+      var _a;
+      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    };
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = utils.cloneElement(dragElement);
+      return clonedElement;
+    };
+    this.filterElements = [
+      "[data-stzh-sortable-filtered]",
+      "[sortable-disabled]",
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "label",
+      "iframe",
+      "details",
+      "area",
+      "stzh-sortable"
+    ];
   }
   /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
   async toArray() {

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

@@ -2,20 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 
 const stzhStatusCss = ".sc-stzh-status-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-status-h{display:none}.sc-stzh-status-h *.sc-stzh-status,.sc-stzh-status-h *.sc-stzh-status::before,.sc-stzh-status-h *.sc-stzh-status::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-status-h{--color:var(--stzh-base-color)}[type=success].sc-stzh-status-h{--color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-status-h{--color:var(--stzh-color-warning)}[type=error].sc-stzh-status-h{--color:var(--stzh-color-error)}[type=info].sc-stzh-status-h{--color:var(--stzh-color-zueriblue)}.stzh-status.sc-stzh-status{min-width:10rem;color:var(--color)}.stzh-status__dot.sc-stzh-status{border-radius:50%;width:0.75rem;height:0.75rem;background-color:currentColor;margin-right:var(--stzh-space-xxsmall)}.stzh-status__bar.sc-stzh-status{display:block;height:0.25rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xxsmall)}.stzh-status__bar-inner.sc-stzh-status{display:block;height:100%;width:0;border-radius:0.75rem;background:currentColor}.stzh-status__text.sc-stzh-status{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
 
 const StzhStatus = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show loadingbar */
     this.withLoadingbar = false;
-    /** Label */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9fcb4305.js');
+
+const stzhStickyCss = ".sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem}[disable-sticky-top].sc-stzh-sticky-h:not([disable-sticky-top=false]){top:auto}[disable-sticky-bottom].sc-stzh-sticky-h:not([disable-sticky-bottom=false]){bottom:auto}.stzh-sticky.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky.sc-stzh-sticky::before,.stzh-sticky.sc-stzh-sticky::after{content:\"\";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky--is-stuck.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky::after{opacity:1}";
+
+const StzhSticky = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhStuckTop = index.createEvent(this, "stzhStuckTop", 7);
+    this.stzhStuckBottom = index.createEvent(this, "stzhStuckBottom", 7);
+    this.observe = ([entry]) => {
+      this.updateStuck(entry.target);
+    };
+    this.disableStickyTop = false;
+    this.disableStickyBottom = false;
+    this.isStuckTop = false;
+    this.isStuckBottom = false;
+  }
+  disableStickyWatcher() {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.updateStuck(this.element);
+      });
+    });
+  }
+  isStuckTopWatcher(newValue) {
+    this.stzhStuckTop.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  isStuckBottomWatcher(newValue) {
+    this.stzhStuckBottom.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  updateStuck(element) {
+    const topCss = parseInt(getComputedStyle(element).top, 10);
+    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
+    const rect = element.getBoundingClientRect();
+    if (topCss) {
+      this.isStuckTop = rect.top < 0;
+    }
+    else {
+      this.isStuckTop = false;
+    }
+    if (bottomCss) {
+      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;
+    }
+    else {
+      this.isStuckBottom = false;
+    }
+  }
+  connectedCallback() {
+    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+    this.observer.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-sticky": true,
+      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck-top": this.isStuckTop,
+      "stzh-sticky--is-stuck-bottom": this.isStuckBottom
+    };
+    return (index.h(index.Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { class: classes }, index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "disableStickyTop": ["disableStickyWatcher"],
+    "disableStickyBottom": ["disableStickyWatcher"],
+    "isStuckTop": ["isStuckTopWatcher"],
+    "isStuckBottom": ["isStuckBottomWatcher"]
+  }; }
+};
+StzhSticky.style = stzhStickyCss;
+
+exports.stzh_sticky = StzhSticky;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ac9bdc7f.js');
+const index = require('./index-9fcb4305.js');
 const utils = require('./utils-8dc66449.js');
 
 const stzhTableCss = ":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}stzh-table{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;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-table{}.stzh-table__header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.stzh-table__header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-table__heading{margin-bottom:0}}.stzh-table__header .stzh-table__search{width:var(--stzh-table-input-width)}@media screen and (min-width: 1024px){.stzh-table__header .stzh-table__search{margin-left:var(--stzh-space-large)}}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table__sort-icon{opacity:0}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{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);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{opacity:1}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}";
@@ -13,15 +13,6 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
 const StzhTable = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Columns that should be sticky on the left side (column indexes separated by comma) */
-    this.fixedLeft = null;
-    /** Columns that should be sticky on the right side (column indexes separated by comma) */
-    this.fixedRight = null;
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateCellClasses = () => {
       if (!this.tableWrapper) {
         return;
@@ -102,6 +93,13 @@ const StzhTable = class {
       }
       this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
     };
+    this.fixedLeft = null;
+    this.fixedRight = null;
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   fixedCellWatcher() {
     this.updateCellClasses();