@utrecht/web-component-library-stencil 1.0.0-alpha.2 → 1.0.0-alpha.201

package/dist/collection/form-toggle/stencil.js

@@ -0,0 +1,148 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class FormToggle {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    const { checked, disabled } = this;
+    const toggleInteraction = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.utrechtInput.emit(this);
+        this.utrechtChange.emit(this);
+      }
+    };
+    const handleClick = () => {
+      toggleInteraction();
+    };
+    const handleKeyPress = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        // Do not scroll the page using Space when the toggle is focussed
+        evt.preventDefault();
+      }
+    };
+    const handleKeyUp = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        toggleInteraction();
+      }
+    };
+    return (h("div", { class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp },
+      h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }),
+      h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }),
+      h("div", { class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') },
+        h("div", { class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+  }
+  static get is() { return "utrecht-form-toggle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "utrechtBlur",
+      "name": "utrechtBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtChange",
+      "name": "utrechtChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtFocus",
+      "name": "utrechtFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtInput",
+      "name": "utrechtInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/heading/bem.js

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading1 = ({ textContent = '', distanced = false }) =>
+  `<h1 class="${clsx('utrecht-heading-1', {
+    'utrecht-heading-1--distanced': distanced,
+  })}">${textContent}</h1>`;
+
+export const Heading2 = ({ textContent = '', distanced = false }) =>
+  `<h2 class="${clsx('utrecht-heading-2', {
+    'utrecht-heading-2--distanced': distanced,
+  })}">${textContent}</h2>`;
+
+export const Heading3 = ({ textContent = '', distanced = false }) =>
+  `<h3 class="${clsx('utrecht-heading-3', {
+    'utrecht-heading-3--distanced': distanced,
+  })}">${textContent}</h3>`;
+
+export const Heading4 = ({ textContent = '', distanced = false }) =>
+  `<h4 class="${clsx('utrecht-heading-4', {
+    'utrecht-heading-4--distanced': distanced,
+  })}">${textContent}</h4>`;
+
+export const Heading5 = ({ textContent = '', distanced = false }) =>
+  `<h5 class="${clsx('utrecht-heading-5', {
+    'utrecht-heading-5--distanced': distanced,
+  })}">${textContent}</h5>`;
+
+export const Heading6 = ({ textContent = '', distanced = false }) =>
+  `<h6 class="${clsx('utrecht-heading-6', {
+    'utrecht-heading-6--distanced': distanced,
+  })}">${textContent}</h6>`;

package/dist/collection/heading/{bem.css → stencil.css}

@@ -1,114 +1,149 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-
 .utrecht-heading-1 {
-  font-family: var(
-    --utrecht-heading-1-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-1-font-size);
   font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-1-letter-spacing);
   line-height: var(--utrecht-heading-1-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-1-text-transform, inherit);
-  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-1--distanced {
-  margin-block-start: var(--utrecht-heading-1-margin-block-start);
   margin-block-end: var(--utrecht-heading-1-margin-block-end);
+  margin-block-start: var(--utrecht-heading-1-margin-block-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
 .utrecht-heading-2 {
-  font-family: var(
-    --utrecht-heading-2-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-2-font-size);
   font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-2-letter-spacing);
   line-height: var(--utrecht-heading-2-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-2-text-transform, inherit);
-  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-2--distanced {
-  margin-block-start: var(--utrecht-heading-2-margin-block-start);
   margin-block-end: var(--utrecht-heading-2-margin-block-end);
+  margin-block-start: var(--utrecht-heading-2-margin-block-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
 .utrecht-heading-3 {
-  font-family: var(
-    --utrecht-heading-3-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size);
   font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-3-letter-spacing);
   line-height: var(--utrecht-heading-3-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-3-text-transform, inherit);
-  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-3--distanced {
-  margin-block-start: var(--utrecht-heading-3-margin-block-start);
   margin-block-end: var(--utrecht-heading-3-margin-block-end);
+  margin-block-start: var(--utrecht-heading-3-margin-block-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
 .utrecht-heading-4 {
-  font-family: var(
-    --utrecht-heading-4-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-4-font-size);
   font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-4-letter-spacing);
   line-height: var(--utrecht-heading-4-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-4-text-transform, inherit);
-  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-4--distanced {
-  margin-block-start: var(--utrecht-heading-4-margin-block-start);
   margin-block-end: var(--utrecht-heading-4-margin-block-end);
+  margin-block-start: var(--utrecht-heading-4-margin-block-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
 .utrecht-heading-5 {
-  font-family: var(
-    --utrecht-heading-5-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-5-font-size);
   font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-5-letter-spacing);
   line-height: var(--utrecht-heading-5-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-5-text-transform, inherit);
-  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-5--distanced {
-  margin-block-start: var(--utrecht-heading-5-margin-block-start);
   margin-block-end: var(--utrecht-heading-5-margin-block-end);
+  margin-block-start: var(--utrecht-heading-5-margin-block-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
 .utrecht-heading-6 {
-  font-family: var(
-    --utrecht-heading-6-font-family,
-    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))
-  );
+  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-6-font-size);
   font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
   letter-spacing: var(--utrecht-heading-6-letter-spacing);
   line-height: var(--utrecht-heading-6-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
   text-transform: var(--utrecht-heading-6-text-transform, inherit);
-  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
 }
 
 .utrecht-heading-6--distanced {
-  margin-block-start: var(--utrecht-heading-6-margin-block-start);
   margin-block-end: var(--utrecht-heading-6-margin-block-end);
+  margin-block-start: var(--utrecht-heading-6-margin-block-start);
 }
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading/stencil.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class Heading {
   render() {
     if (this.level === 1) {
@@ -33,10 +33,10 @@ export class Heading {
   static get is() { return "utrecht-heading"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
   static get properties() { return {
     "level": {

package/dist/collection/heading-1/bem.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading1 = ({ textContent = '', distanced = false }) =>
+  `<h1 class="${clsx('utrecht-heading-1', {
+    'utrecht-heading-1--distanced': distanced,
+  })}">${textContent}</h1>`;

package/dist/collection/heading-1/stencil.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+.utrecht-heading-1 {
+  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
+  font-size: var(--utrecht-heading-1-font-size);
+  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
+  letter-spacing: var(--utrecht-heading-1-letter-spacing);
+  line-height: var(--utrecht-heading-1-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  text-transform: var(--utrecht-heading-1-text-transform, inherit);
+}
+
+.utrecht-heading-1--distanced {
+  margin-block-end: var(--utrecht-heading-1-margin-block-end);
+  margin-block-start: var(--utrecht-heading-1-margin-block-start);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading-1/stencil.js

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class Heading1 {
+  render() {
+    return (h("h1", { class: "utrecht-heading-1" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-heading-1"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/heading-2/bem.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading2 = ({ textContent = '', distanced = false }) =>
+  `<h2 class="${clsx('utrecht-heading-2', {
+    'utrecht-heading-2--distanced': distanced,
+  })}">${textContent}</h2>`;

package/dist/collection/heading-2/stencil.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+.utrecht-heading-2 {
+  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
+  font-size: var(--utrecht-heading-2-font-size);
+  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
+  letter-spacing: var(--utrecht-heading-2-letter-spacing);
+  line-height: var(--utrecht-heading-2-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  text-transform: var(--utrecht-heading-2-text-transform, inherit);
+}
+
+.utrecht-heading-2--distanced {
+  margin-block-end: var(--utrecht-heading-2-margin-block-end);
+  margin-block-start: var(--utrecht-heading-2-margin-block-start);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading-2/stencil.js

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class Heading2 {
+  render() {
+    return (h("h2", { class: "utrecht-heading-2" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-heading-2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/heading-3/bem.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading3 = ({ textContent = '', distanced = false }) =>
+  `<h3 class="${clsx('utrecht-heading-3', {
+    'utrecht-heading-3--distanced': distanced,
+  })}">${textContent}</h3>`;

package/dist/collection/heading-3/stencil.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+.utrecht-heading-3 {
+  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
+  font-size: var(--utrecht-heading-3-font-size);
+  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
+  letter-spacing: var(--utrecht-heading-3-letter-spacing);
+  line-height: var(--utrecht-heading-3-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  text-transform: var(--utrecht-heading-3-text-transform, inherit);
+}
+
+.utrecht-heading-3--distanced {
+  margin-block-end: var(--utrecht-heading-3-margin-block-end);
+  margin-block-start: var(--utrecht-heading-3-margin-block-start);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading-3/stencil.js

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class Heading3 {
+  render() {
+    return (h("h3", { class: "utrecht-heading-3" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-heading-3"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/heading-4/bem.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading4 = ({ textContent = '', distanced = false }) =>
+  `<h4 class="${clsx('utrecht-heading-4', {
+    'utrecht-heading-4--distanced': distanced,
+  })}">${textContent}</h4>`;

package/dist/collection/heading-4/stencil.css

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+.utrecht-heading-4 {
+  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
+  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
+  font-size: var(--utrecht-heading-4-font-size);
+  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
+  letter-spacing: var(--utrecht-heading-4-letter-spacing);
+  line-height: var(--utrecht-heading-4-line-height);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  text-transform: var(--utrecht-heading-4-text-transform, inherit);
+}
+
+.utrecht-heading-4--distanced {
+  margin-block-end: var(--utrecht-heading-4-margin-block-end);
+  margin-block-start: var(--utrecht-heading-4-margin-block-start);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading-4/stencil.js

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+export class Heading4 {
+  render() {
+    return (h("h4", { class: "utrecht-heading-4" },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-heading-4"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+}

package/dist/collection/heading-5/bem.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const Heading5 = ({ textContent = '', distanced = false }) =>
+  `<h5 class="${clsx('utrecht-heading-5', {
+    'utrecht-heading-5--distanced': distanced,
+  })}">${textContent}</h5>`;