@oiz/stzh-components 2.0.0-beta → 2.0.0

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

@@ -226,22 +226,14 @@
 :host ::slotted(*) h2,
 :host ::slotted(*) stzh-heading[level="1"],
 :host ::slotted(*) stzh-heading[level="2"] {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h1,
-:host ::slotted(*) h2,
-:host ::slotted(*) stzh-heading[level="1"],
-:host ::slotted(*) stzh-heading[level="2"] {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) h1,
 :host ::slotted(*) h2,
 :host ::slotted(*) stzh-heading[level="1"],
 :host ::slotted(*) stzh-heading[level="2"] {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -249,108 +241,65 @@
 :host ::slotted(*) h2,
 :host ::slotted(*) stzh-heading[level="1"],
 :host ::slotted(*) stzh-heading[level="2"] {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) h1, :host ::slotted(*) h2 {
   padding-bottom: var(--stzh-space-xsmall);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h1, :host ::slotted(*) h2 {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) h1, :host ::slotted(*) h2 {
-    padding-bottom: var(--stzh-space-medium);
+    padding-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) h1, :host ::slotted(*) h2 {
-    padding-bottom: var(--stzh-space-large);
+    padding-bottom: var(--stzh-space-medium);
   }
 }
 :host ::slotted(*) h1,
-:host ::slotted(*) stzh-heading[level="1"] {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h1,
-:host ::slotted(*) stzh-heading[level="1"] {
-    margin-top: var(--stzh-space-xlarge);
-  }
+:host ::slotted(*) stzh-heading[level="1"],
+:host ::slotted(*) h2,
+:host ::slotted(*) stzh-heading[level="2"] {
+  margin-top: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) h1,
-:host ::slotted(*) stzh-heading[level="1"] {
-    margin-top: var(--stzh-space-xxlarge);
+:host ::slotted(*) stzh-heading[level="1"],
+:host ::slotted(*) h2,
+:host ::slotted(*) stzh-heading[level="2"] {
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) h1,
-:host ::slotted(*) stzh-heading[level="1"] {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(*) stzh-heading[level="1"],
 :host ::slotted(*) h2,
-:host ::slotted(*) stzh-heading[level="2"] {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h2,
 :host ::slotted(*) stzh-heading[level="2"] {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
-  :host ::slotted(*) h2,
-:host ::slotted(*) stzh-heading[level="2"] {
-    margin-top: var(--stzh-space-xbig);
-  }
-}
 :host ::slotted(*) h3,
-:host ::slotted(*) stzh-heading[level="3"] {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h3,
-:host ::slotted(*) stzh-heading[level="3"] {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(*) h3,
-:host ::slotted(*) stzh-heading[level="3"] {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(*) h3,
-:host ::slotted(*) stzh-heading[level="3"] {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(*) stzh-heading[level="3"],
 :host ::slotted(*) h4,
 :host ::slotted(*) stzh-heading[level="4"] {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) h4,
-:host ::slotted(*) stzh-heading[level="4"] {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) h4,
+  :host ::slotted(*) h3,
+:host ::slotted(*) stzh-heading[level="3"],
+:host ::slotted(*) h4,
 :host ::slotted(*) stzh-heading[level="4"] {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) h4,
+  :host ::slotted(*) h3,
+:host ::slotted(*) stzh-heading[level="3"],
+:host ::slotted(*) h4,
 :host ::slotted(*) stzh-heading[level="4"] {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) p,
@@ -372,6 +321,16 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) p,
+:host ::slotted(*) stzh-text,
+:host ::slotted(*) ul,
+:host ::slotted(*) ol,
+:host ::slotted(*) dl,
+:host ::slotted(*) stzh-list {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) p,
 :host ::slotted(*) stzh-text,
@@ -382,6 +341,16 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) p,
+:host ::slotted(*) stzh-text,
+:host ::slotted(*) ul,
+:host ::slotted(*) ol,
+:host ::slotted(*) dl,
+:host ::slotted(*) stzh-list {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(*) ul ul,
 :host ::slotted(*) ul ol,
 :host ::slotted(*) ul dl,
@@ -403,46 +372,32 @@
 }
 :host ::slotted(*) stzh-text[curve=hero],
 :host ::slotted(*) stzh-heading[curve=hero] {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) stzh-text[curve=hero],
-:host ::slotted(*) stzh-heading[curve=hero] {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=hero],
 :host ::slotted(*) stzh-heading[curve=hero] {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) stzh-text[curve=hero],
 :host ::slotted(*) stzh-heading[curve=hero] {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) stzh-text[curve=h1],
 :host ::slotted(*) stzh-heading[curve=h1],
 :host ::slotted(*) stzh-text[curve=h2],
 :host ::slotted(*) stzh-heading[curve=h2] {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) stzh-text[curve=h1],
-:host ::slotted(*) stzh-heading[curve=h1],
-:host ::slotted(*) stzh-text[curve=h2],
-:host ::slotted(*) stzh-heading[curve=h2] {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=h1],
 :host ::slotted(*) stzh-heading[curve=h1],
 :host ::slotted(*) stzh-text[curve=h2],
 :host ::slotted(*) stzh-heading[curve=h2] {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -450,23 +405,17 @@
 :host ::slotted(*) stzh-heading[curve=h1],
 :host ::slotted(*) stzh-text[curve=h2],
 :host ::slotted(*) stzh-heading[curve=h2] {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) stzh-text[curve=h1],
 :host ::slotted(*) stzh-heading[curve=h1] {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) stzh-text[curve=h1],
-:host ::slotted(*) stzh-heading[curve=h1] {
-    margin-top: var(--stzh-space-xlarge);
-  }
+  margin-top: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=h1],
 :host ::slotted(*) stzh-heading[curve=h1] {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -477,7 +426,7 @@
 }
 :host ::slotted(*) stzh-text[curve=h2],
 :host ::slotted(*) stzh-heading[curve=h2] {
-  margin-top: var(--stzh-space-xxlarge);
+  margin-top: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(*) stzh-text[curve=h2],
@@ -485,6 +434,12 @@
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  :host ::slotted(*) stzh-text[curve=h2],
+:host ::slotted(*) stzh-heading[curve=h2] {
+    margin-top: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) stzh-text[curve=h2],
 :host ::slotted(*) stzh-heading[curve=h2] {
@@ -493,46 +448,34 @@
 }
 :host ::slotted(*) stzh-text[curve=h3],
 :host ::slotted(*) stzh-heading[curve=h3] {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) stzh-text[curve=h3],
-:host ::slotted(*) stzh-heading[curve=h3] {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=h3],
 :host ::slotted(*) stzh-heading[curve=h3] {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) stzh-text[curve=h3],
 :host ::slotted(*) stzh-heading[curve=h3] {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) stzh-text[curve=h4],
 :host ::slotted(*) stzh-heading[curve=h4] {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) stzh-text[curve=h4],
-:host ::slotted(*) stzh-heading[curve=h4] {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=h4],
 :host ::slotted(*) stzh-heading[curve=h4] {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) stzh-text[curve=h4],
 :host ::slotted(*) stzh-heading[curve=h4] {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(*) stzh-text[curve=p1],
@@ -550,6 +493,14 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) stzh-text[curve=p1],
+:host ::slotted(*) stzh-text[curve=p2],
+:host ::slotted(*) stzh-heading[curve=p1],
+:host ::slotted(*) stzh-heading[curve=p2] {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) stzh-text[curve=p1],
 :host ::slotted(*) stzh-text[curve=p2],
@@ -558,6 +509,14 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) stzh-text[curve=p1],
+:host ::slotted(*) stzh-text[curve=p2],
+:host ::slotted(*) stzh-heading[curve=p1],
+:host ::slotted(*) stzh-heading[curve=p2] {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(*) ul, :host ::slotted(*) ol, :host ::slotted(*) dl {
   list-style: none;
   padding-left: 0;
@@ -602,7 +561,7 @@
   letter-spacing: var(--stzh-font-curve-h3-default-text-letter-spacing);
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
-  margin: var(--stzh-space-large);
+  margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
 }
@@ -640,14 +599,9 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) blockquote {
-    margin: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) blockquote {
-    margin: var(--stzh-space-xxlarge);
+    margin: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -674,6 +628,11 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(*) blockquote p {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(*) blockquote p::before, :host ::slotted(*) blockquote p::after {
   display: inline-block;
 }

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

@@ -96,7 +96,7 @@
 
 .stzh-saptcha__box {
   padding-top: var(--stzh-space-medium);
-  padding-bottom: 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);
@@ -111,19 +111,14 @@
     padding-top: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
@@ -167,4 +162,9 @@
   .stzh-saptcha__input {
     margin-top: var(--stzh-space-medium);
   }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-saptcha__input {
+    margin-top: var(--stzh-space-large);
+  }
 }

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

@@ -95,24 +95,30 @@
 }
 
 :host {
+  --cursor: grab;
+  --grabbing-cursor: grabbing;
   --unselected-item-opacity: 0.6;
   --ghost-item-background: var(--stzh-color-grey5);
   --ghost-item-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.32);
 }
+:host[disabled] {
+  --cursor: inherit;
+}
+:host[disabled] ::slotted(*) *.is-sortable-item {
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+          user-select: auto;
+}
 :host ::slotted(*) *.is-sortable-item {
   position: relative;
   transition: opacity var(--stzh-base-transition-animation-speed);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
+  cursor: var(--cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag, :host ::slotted(*) *.is-sortable-item.is-chosen, :host ::slotted(*) *.is-sortable-item.is-ghost, :host ::slotted(*) *.is-sortable-item.is-selected {
-  cursor: move;
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
+  cursor: var(--grabbing-cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag {
   opacity: 1 !important;

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

@@ -302,7 +302,8 @@ export class StzhSortable {
   }
   render() {
     const classes = {
-      "stzh-sortable": true
+      "stzh-sortable": true,
+      "stzh-sortable--disabled": this.disabled
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description), h("div", { ref: (el) => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { ref: (el) => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", null)))));
   }

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

@@ -131,6 +131,11 @@ stzh-table *::after {
     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);

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

@@ -218,7 +218,7 @@ stzh-upload *::after {
   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);
-  padding: var(--stzh-space-large);
+  padding: var(--stzh-space-xxlarge);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -230,14 +230,9 @@ stzh-upload *::after {
   border-image-repeat: round;
   transition: background-color var(--stzh-base-transition-animation-speed);
 }
-@media screen and (min-width: 600px) {
-  .stzh-upload__clickarea {
-    padding: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-upload__clickarea {
-    padding: var(--stzh-space-xxlarge);
+    padding: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -259,6 +254,11 @@ stzh-upload *::after {
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-upload__button {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-upload stzh-icon.stzh-upload__delete-icon-error {
   display: none;
 }
@@ -283,6 +283,12 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete {
   display: flex;
 }
+.stzh-upload__preview.dz-empty .stzh-upload__extension::after {
+  content: "";
+}
+.stzh-upload__preview.dz-empty .stzh-upload__size {
+  display: none;
+}
 .stzh-upload__inner {
   height: 3.875rem;
   display: flex;
@@ -364,6 +370,9 @@ stzh-upload *::after {
 .stzh-upload__extension {
   text-transform: uppercase;
 }
+.stzh-upload__extension::after {
+  content: " | ";
+}
 .stzh-upload__delete {
   cursor: pointer;
   -webkit-appearance: none;

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

@@ -263,12 +263,56 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
+      // Called when a file is added to the queue
+      // Receives `file`
+      // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
+      addedfile(file) {
+        if (this.element === this.previewsContainer) {
+          this.element.classList.add("dz-started");
+        }
+        if (this.previewsContainer && !this.options.disablePreviews) {
+          file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
+          file.previewTemplate = file.previewElement; // Backwards compatibility
+          this.previewsContainer.appendChild(file.previewElement);
+          if (file.size == 0) {
+            file.previewElement.classList.add('dz-empty');
+          }
+          for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
+            node.textContent = file.name;
+          }
+          for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
+            node.innerHTML = this.filesize(file.size);
+          }
+          if (this.options.addRemoveLinks) {
+            file._removeLink = Dropzone.createElement(`<a class="dz-remove" href="javascript:undefined;" data-dz-remove>${this.options.dictRemoveFile}</a>`);
+            file.previewElement.appendChild(file._removeLink);
+          }
+          let removeFileEvent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (file.status === Dropzone.UPLOADING) {
+              return Dropzone.confirm(this.options.dictCancelUploadConfirmation, () => this.removeFile(file));
+            }
+            else {
+              if (this.options.dictRemoveFileConfirmation) {
+                return Dropzone.confirm(this.options.dictRemoveFileConfirmation, () => this.removeFile(file));
+              }
+              else {
+                return this.removeFile(file);
+              }
+            }
+          };
+          for (let removeLink of file.previewElement.querySelectorAll("[data-dz-remove]")) {
+            removeLink.addEventListener("click", removeFileEvent);
+          }
+        }
+      },
       // When the upload is finished, either with success or an error.
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
       complete(file) {
         for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
-          node.setAttribute('title', this.options.dictRemoveFile);
-          node.setAttribute('aria-label', this.options.dictRemoveFile);
+          node.setAttribute("title", this.options.dictRemoveFile);
+          node.setAttribute("aria-label", this.options.dictRemoveFile);
         }
         // move file uploads with errors to another element, so they are grouped together
         if (file.status === "error") {
@@ -348,7 +392,6 @@ export class StzhUpload {
               </div>
               <div class="stzh-upload__meta">
                 <span class="stzh-upload__extension" data-dz-extension></span>
-                |
                 <span class="stzh-upload__size" data-dz-size></span>
               </div>
               <div class="stzh-upload__error-message">

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

@@ -66,6 +66,6 @@ ExistingFiles.args = {
   'existing-files': `[
     { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
     { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
-    { "name": "Filename3.pdf", "size": 32345, "id": "upload-3" }
+    { "name": "Filename3.pdf", "size": 0, "id": "upload-3" }
   ]`
 };

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

@@ -154,19 +154,14 @@
   line-height: var(--stzh-font-micro-text-line-height);
   margin-top: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-medium);
+    margin-top: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-medium);
   }
 }
 .stzh-vbz-ticker__link {