@utrecht/web-component-library-stencil 1.0.0-alpha.21 → 1.0.0-alpha.212

package/dist/collection/form-toggle/web-component/template.js

@@ -0,0 +1,7 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const FormToggle = ({ checked = false, disabled = false }) =>
+  `<utrecht-form-toggle${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}></utrecht-form-toggle>`;

package/dist/collection/heading/{bem.css → web-component/index.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 → web-component/index.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"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "level": {

package/dist/collection/heading/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading = ({ level, textContent = '' }) =>
+  `<section>
+  <utrecht-heading level="${level}">${textContent}</utrecht-heading>
+</section>`;

package/dist/collection/heading-1/css/template.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/html/template.js

@@ -0,0 +1,4 @@
+export const Heading1 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h1>${textContent}</h1>
+</section>`;

package/dist/collection/heading-1/web-component/index.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/web-component/index.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 {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/heading-1/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading1 = ({ textContent = '' }) =>
+  `<section>
+  <utrecht-heading-1>${textContent}</utrecht-heading-1>
+</section>`;

package/dist/collection/heading-2/css/template.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/html/template.js

@@ -0,0 +1,4 @@
+export const Heading2 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h2>${textContent}</h2>
+</section>`;

package/dist/collection/heading-2/web-component/index.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/web-component/index.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 {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/heading-2/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading2 = ({ textContent = '' }) =>
+  `<section>
+  <utrecht-heading-2>${textContent}</utrecht-heading-2>
+</section>`;

package/dist/collection/heading-3/css/template.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/html/template.js

@@ -0,0 +1,4 @@
+export const Heading3 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h3>${textContent}</h3>
+</section>`;

package/dist/collection/heading-3/web-component/index.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/web-component/index.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 {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/heading-3/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading3 = ({ textContent = '' }) =>
+  `<section>
+  <utrecht-heading-3>${textContent}</utrecht-heading-3>
+</section>`;

package/dist/collection/heading-4/css/template.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/html/template.js

@@ -0,0 +1,4 @@
+export const Heading4 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h4>${textContent}</h4>
+</section>`;

package/dist/collection/heading-4/web-component/index.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/web-component/index.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 {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/heading-4/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading4 = ({ textContent = '' }) =>
+  `<section>
+  <utrecht-heading-4>${textContent}</utrecht-heading-4>
+</section>`;

package/dist/collection/heading-5/css/template.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>`;

package/dist/collection/heading-5/html/template.js

@@ -0,0 +1,4 @@
+export const Heading5 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h5>${textContent}</h5>
+</section>`;

package/dist/collection/heading-5/web-component/index.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-5 {
+  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);
+}
+
+.utrecht-heading-5--distanced {
+  margin-block-end: var(--utrecht-heading-5-margin-block-end);
+  margin-block-start: var(--utrecht-heading-5-margin-block-start);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/heading-5/web-component/index.stencil.js

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

package/dist/collection/heading-5/web-component/template.js

@@ -0,0 +1,4 @@
+export const Heading5 = ({ textContent = '' }) =>
+  `<section>
+  <utrecht-heading-5>${textContent}</utrecht-heading-5>
+</section>`;

package/dist/collection/heading-6/css/template.js

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

package/dist/collection/heading-6/html/template.js

@@ -0,0 +1,4 @@
+export const Heading6 = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <h6>${textContent}</h6>
+</section>`;

package/dist/collection/heading-6/web-component/index.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-6 {
+  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);
+}
+
+.utrecht-heading-6--distanced {
+  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;
+}