@oiz/stzh-components 3.0.0-beta5 → 3.0.0

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -260,7 +260,7 @@
   --color: var(--stzh-text-info-color);
 }
 :host[color=inherit] {
-  --color: inherit;
+  --color: initial;
 }
 
 .stzh-text {

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */
@@ -333,4 +333,10 @@
 }
 .stzh-textandimage--is-single .stzh-textandimage__right {
   grid-area: text;
+}
+.stzh-textandimage--is-single-left .stzh-textandimage__right {
+  display: none;
+}
+.stzh-textandimage--is-single-right .stzh-textandimage__left {
+  display: none;
 }

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

@@ -46,7 +46,8 @@ export class StzhTextandimage {
     const isSingle = !(leftSlotUsed && rightSlotUsed);
     const classes = {
       "stzh-textandimage": true,
-      "stzh-textandimage--is-single": isSingle,
+      "stzh-textandimage--is-single-left": isSingle && leftSlotUsed,
+      "stzh-textandimage--is-single-right": isSingle && rightSlotUsed,
       "stzh-textandimage--has-left": leftSlotUsed,
       "stzh-textandimage--has-right": rightSlotUsed,
       [`stzh-textandimage--size-${this.size}`]: !!this.size

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-textandimage.js","sourceRoot":"","sources":["../../../../src/components/stzh-textandimage/stzh-textandimage.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,WAAW,GACZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,gBAAgB;;IAQnB,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC7C,yDAAyD,CAC1D,CAAC;MAEF,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;UACxB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAA;QAC5B,CAAC,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAC3B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;MAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;gBAhC8D,SAAS;;EAkCxE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,CAAC,CAAC,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,8BAA8B,EAAE,QAAQ;MACxC,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KACtD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ;MACpB,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,yBAAyB;UAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE;QAEN,WAAK,KAAK,EAAC,0BAA0B;UACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single\": isSingle,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-textandimage.js","sourceRoot":"","sources":["../../../../src/components/stzh-textandimage/stzh-textandimage.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,WAAW,GACZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,gBAAgB;;IAQnB,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC7C,yDAAyD,CAC1D,CAAC;MAEF,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;UACxB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAA;QAC5B,CAAC,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAC3B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;MAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;gBAhC8D,SAAS;;EAkCxE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,CAAC,CAAC,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,mCAAmC,EAAE,QAAQ,IAAI,YAAY;MAC7D,oCAAoC,EAAE,QAAQ,IAAI,aAAa;MAC/D,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KACtD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ;MACpB,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,yBAAyB;UAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE;QAEN,WAAK,KAAK,EAAC,0BAA0B;UACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -74,6 +74,8 @@ const TEMPLATE_ONLY_TEXT = () => {
         </li>
       </ul>
       <p><strong>Laboris laborum aute</strong> id laboris culpa esse <strong>aliquip nisi anim</strong> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+      <p><a href="#">Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.</a> Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+      <p><a href="http://google.ch" rel="external nofollow" target="_blank">Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.</a> Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
     </stzh-richtext>
   </div>
 `;

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-vbz-carousel/stzh-vbz-carousel.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

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

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/pages/website/website.e2e.js

@@ -7,7 +7,7 @@ const STORIES = [
   "content-page-with-disturber",
   "content-page-with-ghettobox",
   "content-page-with-banner",
-  "job-detail",
+  "job-detail"
 ];
 test.describe("page: website", () => {
   STORIES.forEach((storyId) => {

package/dist/collection/pages/website/website.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"website.e2e.js","sourceRoot":"","sources":["../../../../src/pages/website/website.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,eAAe,CAAC;AAE5B,MAAM,OAAO,GAAG;EACd,cAAc;EACd,gCAAgC;EAChC,6BAA6B;EAC7B,6BAA6B;EAC7B,0BAA0B;EAC1B,YAAY;CACb,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAClC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"pages-website\";\n\nconst STORIES = [\n  \"content-page\",\n  \"content-page-without-anchornav\",\n  \"content-page-with-disturber\",\n  \"content-page-with-ghettobox\",\n  \"content-page-with-banner\",\n  \"job-detail\",\n];\n\ntest.describe(\"page: website\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n\n"]}
+{"version":3,"file":"website.e2e.js","sourceRoot":"","sources":["../../../../src/pages/website/website.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,eAAe,CAAC;AAE5B,MAAM,OAAO,GAAG;EACd,cAAc;EACd,gCAAgC;EAChC,6BAA6B;EAC7B,6BAA6B;EAC7B,0BAA0B;EAC1B,YAAY;CACb,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAClC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"pages-website\";\n\nconst STORIES = [\n  \"content-page\",\n  \"content-page-without-anchornav\",\n  \"content-page-with-disturber\",\n  \"content-page-with-ghettobox\",\n  \"content-page-with-banner\",\n  \"job-detail\"\n];\n\ntest.describe(\"page: website\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n\n"]}

package/dist/components/index.js

@@ -2,7 +2,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 export { V as VBZ } from './index2.js';
 
 const name = "@oiz/stzh-components";
-const version = "3.0.0-beta5";
+const version = "3.0.0";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;

package/dist/components/stzh-actions.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as setPropsIfNull } from './utils.js';
 
-const stzhActionsCss = ".sc-stzh-actions-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-actions-h{display:none}.sc-stzh-actions-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-actions-h .has-focus.sc-stzh-actions{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions{outline-style:none !important}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions::-moz-focus-inner{border:0 !important}.sc-stzh-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}.stzh-actions__actions.sc-stzh-actions{display:flex;flex-direction:column;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:flex}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:space-between}.stzh-actions--search.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:flex-end}";
+const stzhActionsCss = ".sc-stzh-actions-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-actions-h{display:none}.sc-stzh-actions-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-actions-h .has-focus.sc-stzh-actions{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions{outline-style:none !important}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions::-moz-focus-inner{border:0 !important}.sc-stzh-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=tertiary]{flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}.stzh-actions__actions.sc-stzh-actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions,.stzh-actions__tertiary-actions.sc-stzh-actions{display:flex}.stzh-actions__wrapper.sc-stzh-actions{display:contents}@media screen and (max-width: 599px){.stzh-actions--process.sc-stzh-actions .stzh-actions__wrapper.sc-stzh-actions{display:flex;flex-wrap:wrap}}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process.sc-stzh-actions .stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions--process.sc-stzh-actions .stzh-actions__secondary-actions.sc-stzh-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process.sc-stzh-actions .stzh-actions__tertiary-actions.sc-stzh-actions{margin-right:auto}}.stzh-actions--search.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:flex-end}";
 
 const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class StzhActions extends HTMLElement {
   constructor() {
@@ -9,11 +9,17 @@ const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class StzhActions extends
     this.__registerHost();
     this.init = () => {
       const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
+      const tertiaryButtons = this.element.querySelectorAll('stzh-button[slot="tertiary"], [slot="tertiary"] stzh-button');
       secondaryButtons.forEach((button) => {
         setPropsIfNull(button, {
           variant: "secondary"
         });
       });
+      tertiaryButtons.forEach((button) => {
+        setPropsIfNull(button, {
+          variant: "tertiary"
+        });
+      });
     };
     this.variant = "form";
   }
@@ -35,7 +41,7 @@ const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class StzhActions extends
       "stzh-actions": true,
       [`stzh-actions--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "group" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" }))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "group" }, h("div", { class: "stzh-actions__tertiary-actions" }, h("slot", { name: "tertiary" })), h("div", { class: "stzh-actions__wrapper" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" })))))));
   }
   get element() { return this; }
   static get style() { return stzhActionsCss; }

package/dist/components/stzh-actions.js.map

@@ -1 +1 @@
-{"file":"stzh-actions.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,q4DAAq4D;;MCmB/4DA,aAAW;;;;IAQd,SAAI,GAAG;MACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM;QAC9B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;OAC5B,CAAC,CAAC;KACJ,CAAA;mBAhByE,MAAM;;EAkBhF,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhActions"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space('medium')} / 2);\n  }\n\n  // &[variant=\"cta\"] ::slotted([slot=\"primary\"]),\n  // &[variant=\"cta\"] ::slotted([slot=\"secondary\"]) {\n  //   flex-grow: 0;\n  // }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column;\n    margin: calc(#{space('medium')} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions {\n    display: flex;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__actions {\n    justify-content: space-between;\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-actions.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,qiFAAqiF;;MCoB/iFA,aAAW;;;;IAQd,SAAI,GAAG;MACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACnD,6DAA6D,CAC9D,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM;QAC9B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;OAC5B,CAAC,CAAC;MAEH,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM;QAC7B,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,UAAU;SACK,CAAC,CAAA;OAC5B,CAAC,CAAC;KACJ,CAAA;mBA1ByE,MAAM;;EA4BhF,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IAC7C,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhActions"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space('medium')} / 2);\n  }\n\n  // &[variant=\"cta\"] ::slotted([slot=\"primary\"]),\n  // &[variant=\"cta\"] ::slotted([slot=\"secondary\"]) {\n  //   flex-grow: 0;\n  // }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space('medium')} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n    tertiaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-breadcrumb2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
-const stzhBreadcrumbCss = ".sc-stzh-breadcrumb-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-color-primary70)}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{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-breadcrumb__item-link.sc-stzh-breadcrumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{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-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}";
+const stzhBreadcrumbCss = ".sc-stzh-breadcrumb-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-color-primary70)}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{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-breadcrumb__item-link.sc-stzh-breadcrumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{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-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}";
 
 const ITEM_EXPAND_INDEX = 1;
 const SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left