@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -219,8 +219,8 @@
 .stzh-radio__check {
   background-color: currentColor;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  width: 0.375rem;
-  height: 0.375rem;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
   opacity: 0;
 }

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

@@ -3,9 +3,10 @@ import { hasSlot } from "../../utils/utils";
 import { camelCase } from "../../utils/string-utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
 let radiogroupCounter = 0;
 /**
- * @slot - Slot for `stzh-radio` elements
+ * @slot - Slot for `stzh-radio`, `stzh-button[type="radio"]` or `stzh-card` elements
  * @slot description - Slot for description
  * @slot description-long - Slot for long description (in popover)
  * @slot error - Slot for error
@@ -32,7 +33,7 @@ export class StzhRadiogroup {
     this.preventUpdateProperties = [];
     this.init = () => {
       // update radios
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       this.updateRadiosProperty("show-marker", false);
       this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
       this.watchValue(this.value);
@@ -119,7 +120,7 @@ export class StzhRadiogroup {
   }
   connectedCallback() {
     if (!this.value) {
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       // try to find a checkbox that might has checked set to true
       const checkedRadio = this.radios.find(radio => radio.checked);
       if (checkedRadio) {

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

@@ -7,6 +7,9 @@ export default {
   title: 'Components/Radiogroup',
   component: 'stzh-radiogroup',
   parameters: {
+    actions: {
+      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    },
     docs: {
       description: {
         component: readme

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

@@ -102,6 +102,7 @@
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
 }
 :host ::slotted(*) h1, :host ::slotted(*) h2, :host ::slotted(*) h3, :host ::slotted(*) h4 {
@@ -225,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) {
@@ -248,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,
@@ -371,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,
@@ -381,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,
@@ -402,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) {
@@ -449,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) {
@@ -476,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],
@@ -484,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] {
@@ -492,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],
@@ -549,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],
@@ -557,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;
@@ -601,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;
 }
@@ -639,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) {
@@ -673,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;
 }
@@ -699,6 +659,150 @@
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+:host ::slotted(*) table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+:host ::slotted(*) thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+:host ::slotted(*) tr:hover td,
+:host ::slotted(*) tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+:host ::slotted(*) td,
+:host ::slotted(*) 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);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+:host ::slotted(*) td a,
+:host ::slotted(*) th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+:host ::slotted(*) td a:hover, :host ::slotted(*) td a:focus,
+:host ::slotted(*) th a:hover,
+:host ::slotted(*) th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+:host ::slotted(*) td b, :host ::slotted(*) td strong,
+:host ::slotted(*) th b,
+:host ::slotted(*) th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+:host ::slotted(*) td i, :host ::slotted(*) td em,
+:host ::slotted(*) th i,
+:host ::slotted(*) th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+:host ::slotted(*) td.align-left,
+:host ::slotted(*) th.align-left {
+  text-align: left;
+}
+:host ::slotted(*) td.align-right,
+:host ::slotted(*) th.align-right {
+  text-align: right;
+}
+:host ::slotted(*) td.align-center,
+:host ::slotted(*) th.align-center {
+  text-align: center;
+}
+:host ::slotted(*) td.valign-auto,
+:host ::slotted(*) th.valign-auto {
+  vertical-align: auto;
+}
+:host ::slotted(*) td.valign-middle,
+:host ::slotted(*) th.valign-middle {
+  vertical-align: middle;
+}
+:host ::slotted(*) td.valign-bottom,
+:host ::slotted(*) th.valign-bottom {
+  vertical-align: bottom;
+}
+:host ::slotted(*) td.nowrap,
+:host ::slotted(*) th.nowrap {
+  white-space: nowrap;
+}
+:host ::slotted(*) td.is-sticky-left, :host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-left,
+:host ::slotted(*) th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+:host ::slotted(*) td.has-sticked,
+:host ::slotted(*) th.has-sticked {
+  z-index: 2;
+}
+:host ::slotted(*) td.is-sticky-left,
+:host ::slotted(*) th.is-sticky-left {
+  left: 0;
+}
+:host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-right {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-left::after, :host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  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;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+:host ::slotted(*) td.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-left::after {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+:host ::slotted(*) td.has-sticked.is-sticky-left::after, :host ::slotted(*) td.has-sticked.is-sticky-right::after,
+:host ::slotted(*) th.has-sticked.is-sticky-left::after,
+:host ::slotted(*) th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+:host ::slotted(*) 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));
+}
+:host ::slotted(*) th.is-sortable {
+  padding: 0;
+}
 :host ::slotted(*) a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);

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

@@ -71,6 +71,25 @@ const Template = (args) => (
     </blockquote>
 
     <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim 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>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Column Head 1</th>
+          <th>Column Head 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+      </tbody>
+    </table>
   </stzh-richtext>
 );
 

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);
+  }
 }