@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.js

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
 /**
- * This component is only intended for the mitwirken.stadt-zuerich.ch portal.
- * It introduces global CSS for the page components of the Decidim tool.
+ *
  */
 export class StzhPortalMitwirken {
   componentDidLoad() {

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.stories.js

@@ -3,7 +3,7 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 
 export default {
-  title: 'Components/Portale/PortalMitwirken',
+  title: 'Components/Skins/PortalMitwirken',
   component: 'stzh-portal-mitwirken',
   parameters: {
     layout: 'padded',

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

@@ -5,29 +5,6 @@ import { addMediaChangeListener, removeMediaChangeListener, media } from "../../
  */
 export class StzhProgressbar {
   constructor() {
-    /**
-     * 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 (media("ultra").matches && this.stepsUltra) {
         this.currentSteps = this.stepsUltra;
@@ -46,6 +23,14 @@ export class StzhProgressbar {
       }
       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/collection/components/stzh-progressbar-item/stzh-progressbar-item.js

@@ -4,14 +4,6 @@ import { Host, h, Fragment } from "@stencil/core";
  */
 export class StzhProgressbarItem {
   constructor() {
-    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",
@@ -24,6 +16,14 @@ export class StzhProgressbarItem {
         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/collection/components/stzh-radio/stzh-radio.js

@@ -11,24 +11,6 @@ let radioCounter = 0;
  */
 export class StzhRadio {
   constructor() {
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** The name of the input element */
-    this.name = "";
-    /** The value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -62,6 +44,19 @@ export class StzhRadio {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

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

@@ -13,24 +13,7 @@ let radiogroupCounter = 0;
  */
 export class StzhRadiogroup {
   constructor() {
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Select a radio by value */
-    this.value = "";
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked radio element (readonly) */
-    this.checkedRadio = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       // update radios
       this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
@@ -42,6 +25,21 @@ export class StzhRadiogroup {
       this.watchInvalid(this.invalid);
       this.watchRequired(this.required);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedRadio = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateRadiosProperty("name", newValue);
@@ -80,12 +78,20 @@ export class StzhRadiogroup {
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     this.value = event.detail.value;
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });
@@ -108,6 +114,7 @@ export class StzhRadiogroup {
   async componentWillLoad() {
     this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'radiogroup');
     }
@@ -427,11 +434,11 @@ export class StzhRadiogroup {
         "defaultValue": "null"
       },
       "preventUpdateProperties": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string[] | string",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -440,6 +447,8 @@ export class StzhRadiogroup {
           "tags": [],
           "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker)"
         },
+        "attribute": "prevent-update-properties",
+        "reflect": false,
         "defaultValue": "[]"
       }
     };
@@ -464,6 +473,9 @@ export class StzhRadiogroup {
       }, {
         "propName": "error",
         "methodName": "errorWatcher"
+      }, {
+        "propName": "preventUpdateProperties",
+        "methodName": "preventUpdatePropertiesWatcher"
       }];
   }
   static get listeners() {

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

@@ -18,6 +18,8 @@ export class StzhReadspeaker {
         });
       });
     };
+    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/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-richtext/stzh-richtext.js

@@ -7,9 +7,7 @@ const CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';
  */
 export class StzhRichtext {
   constructor() {
-    /** Selector to recognize external link and attach an icon */
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
-    /** Icon used for marking external links */
     this.externalLinkIcon = 'external-link';
   }
   addExternalLinkIcons() {