@utrecht/web-component-library-stencil 1.0.0-alpha.32 → 1.0.0-alpha.320

package/dist/collection/custom-checkbox/web-component/index.css

@@ -0,0 +1,273 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-checkbox--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-checkbox--html-input:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-checkbox--html-input:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+.utrecht-checkbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-checkbox--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-checkbox--html-input:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-checkbox--html-input:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+.utrecht-checkbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-custom-checkbox {
+  --utrecht-icon-size: var(--utrecht-custom-checkbox-icon-size, calc(0.75 * var(--utrecht-custom-checkbox-size)));
+  display: inline-block;
+  height: var(--utrecht-custom-checkbox-size);
+  position: relative;
+  width: var(--utrecht-custom-checkbox-size);
+}
+
+.utrecht-custom-checkbox__input {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  height: var(--utrecht-custom-checkbox-size);
+  left: 0;
+  opacity: 0%;
+  position: absolute;
+  top: 0;
+  width: var(--utrecht-custom-checkbox-size);
+  z-index: 10;
+}
+
+.utrecht-custom-checkbox__box {
+  align-items: center;
+  background-color: var(--utrecht-custom-checkbox-background-color);
+  border-color: var(--utrecht-custom-checkbox-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-custom-checkbox-border-radius, var(--utrecht-form-input-border-radius));
+  border-style: solid;
+  border-width: var(--utrecht-custom-checkbox-border-width, var(--utrecht-form-input-border-width));
+  box-sizing: border-box;
+  color: var(--utrecht-custom-checkbox-color);
+  display: flex;
+  height: var(--utrecht-custom-checkbox-size);
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: var(--utrecht-custom-checkbox-size);
+  z-index: 1000;
+}
+
+.utrecht-custom-checkbox__box--checked {
+  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-checked-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--disabled {
+  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-disabled-color, var(--utrecht-custom-checkbox-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-custom-checkbox__box--indeterminate {
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--invalid {
+  background-color: var(--utrecht-custom-checkbox-invalid-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-invalid-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--active {
+  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--focus {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__box--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-custom-checkbox__input:focus:not(:focus-visible) ~ .utrecht-custom-checkbox__box {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-custom-checkbox__icon--checked,
+.utrecht-custom-checkbox__icon--indeterminate {
+  display: none;
+}
+
+.utrecht-custom-checkbox__box--checked .utrecht-custom-checkbox__icon--checked {
+  display: block;
+}
+
+.utrecht-custom-checkbox__box--indeterminate .utrecht-custom-checkbox__icon--indeterminate {
+  display: block;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/custom-checkbox/web-component/index.stencil.js

@@ -0,0 +1,205 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class CustomCheckbox {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+    this.invalid = false;
+    this.required = false;
+  }
+  render() {
+    const { checked, disabled, indeterminate, invalid, required } = this;
+    const active = false;
+    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: "utrecht-custom-checkbox", role: "checkbox", tabIndex: disabled ? null : 0, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-invalid": invalid ? 'true' : null, "aria-required": required ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp },
+      h("div", { class: clsx('utrecht-custom-checkbox__box', active && 'utrecht-custom-checkbox__box--active', checked && 'utrecht-custom-checkbox__box--checked', !checked && 'utrecht-custom-checkbox__box--not-checked', disabled && 'utrecht-custom-checkbox__box--disabled', invalid && 'utrecht-custom-checkbox__box--invalid', indeterminate && 'utrecht-custom-checkbox__box--indeterminate') },
+        checked && h("utrecht-icon-checkmark", { class: "utrecht-custom-checkbox__icon" }, "\u2714"),
+        indeterminate && (h("utrecht-icon-indeterminate", { class: "utrecht-custom-checkbox__icon" }, "\u25A0")))));
+  }
+  static get is() { return "utrecht-custom-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.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"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "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/digid-button/web-component/index.css

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-digid-button {
+  --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
+  block-size: var(--utrecht-digid-button-block-size, 50px);
+  display: inline-flex;
+  gap: var(--utrecht-space-inline-sm);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/digid-button/web-component/index.stencil.js

@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+export class DigidButton {
+  render() {
+    return (h("div", { class: "utrecht-digid-button" },
+      h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }),
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-digid-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/digid-logo/web-component/index.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+:host {
+  display: inline;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+svg {
+  height: 100%;
+  max-height: var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));
+  max-width: var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));
+  width: 100%;
+}

package/dist/collection/digid-logo/web-component/index.stencil.js

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from '@stencil/core';
+export class DigidLogo {
+  render() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" },
+      h("title", null, "DigiD"),
+      h("path", { d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }),
+      h("path", { d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }),
+      h("path", { d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
+  }
+  static get is() { return "utrecht-digid-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/document/web-component/index.css

@@ -0,0 +1,37 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-document {
+  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  color: var(--utrecht-document-color, inherit);
+  font-family: var(--utrecht-document-font-family, inherit);
+  font-size: var(--utrecht-document-font-size, inherit);
+  font-weight: var(--utrecht-document-font-weight, inherit);
+  line-height: var(--utrecht-document-line-height, inherit);
+  text-rendering: optimizeLegibility;
+}
+.utrecht-document :lang(ar) {
+  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
+  letter-spacing: 0 !important;
+}
+
+.utrecht-document--surface {
+  background-color: var(--utrecht-document-background-color, inherit);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/document/{stencil.js → web-component/index.stencil.js}

@@ -1,4 +1,4 @@
-import { Component, h } from "@stencil/core";
+import { Component, h } from '@stencil/core';
 export class Document {
   render() {
     return (h("div", { class: "utrecht-document" },
@@ -7,9 +7,9 @@ export class Document {
   static get is() { return "utrecht-document"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/eherkenning-logo/web-component/index.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+:host {
+  display: inline;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+svg {
+  height: 100%;
+  max-height: var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));
+  max-width: var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));
+  width: 100%;
+}

package/dist/collection/eherkenning-logo/web-component/index.stencil.js

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from '@stencil/core';
+export class EherkenningLogo {
+  render() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-1 0 81 80" },
+      h("title", null, "Eherkenning"),
+      h("rect", { fill: "#E0E0E0", width: "80", height: "80" }),
+      h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M37.363,23.178c0,2.027,0,4.055,0,6.08c-4.257,0-9.55,0-14.208,0  c-1.662,0-3.648-0.207-4.799,0.193c-1.041,0.359-1.796,1.169-2.176,2.111c-0.439,1.084-0.32,2.8-0.32,4.414c0,3.425,0,6.055,0,9.475  c0,1.531-0.159,3.325,0.191,4.479c0.316,1.042,1.316,2.194,2.561,2.496c1.318,0.319,3.094,0.064,4.672,0.064  c4.599,0,9.521,0,14.08,0c0,2.025,0,4.053,0,6.08c-6.402-0.083-12.492,0.112-18.176,0c-4.937-0.099-8.966-3.966-9.344-8.833  c-0.226-2.883,0-5.901,0-8.769c0-2.971-0.19-5.932,0-8.767c0.328-4.896,4.208-8.676,8.959-9.024c3.002-0.222,6.129,0,9.28,0  C31.145,23.178,34.26,23.178,37.363,23.178z" }),
+      h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.867,23.178c1.962,0,3.926,0,5.888,0c0,4.864,0,9.729,0,14.592  c-1.984,0-3.969,0-5.952,0c0-4.801,0-9.6,0-14.399C42.797,23.279,42.792,23.188,42.867,23.178z" }),
+      h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M64.434,23.178c1.941,0,3.883,0,5.824,0c0,11.798,0,23.595,0,35.393  c-1.962,0-3.926,0-5.888,0c0-4.992,0-9.984,0-14.977c-5.077,0-10.155,0-15.232,0c0.824-1.95,1.651-3.896,2.56-5.76  c4.203,0,8.405,0,12.608,0c0.15-4.693,0.021-9.664,0.064-14.464C64.365,23.279,64.36,23.188,64.434,23.178z" }),
+      h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M19.89,37.77c5.376,0,10.752,0,16.129,0c-0.772,2.022-1.748,3.843-2.56,5.824  c-4.544,0-9.088,0-13.633,0c0-1.877,0-3.755,0-5.633C19.821,37.87,19.816,37.781,19.89,37.77z" }),
+      h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.93,43.594c1.941,0,3.883,0,5.824,0c0,4.992,0,9.984,0,14.977  c-1.984,0-3.969,0-5.952,0c0-4.93,0-9.856,0-14.783C42.8,43.678,42.851,43.62,42.93,43.594z" })));
+  }
+  static get is() { return "utrecht-eherkenning-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}