@utrecht/web-component-library-stencil 1.0.0-alpha.203 → 1.0.0-alpha.206

package/dist/cjs/utrecht-textbox.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8c6952a4.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const stencilCss = ".utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus,.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible,.utrecht-textbox--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-textbox--read-only,.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder,.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus,.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible,.utrecht-textbox--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-textbox--read-only,.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder,.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
 
 const Textbox = class {
   constructor(hostRef) {
@@ -34,6 +34,6 @@ const Textbox = class {
       } }));
   }
 };
-Textbox.style = stencilCss;
+Textbox.style = indexCss;
 
 exports.utrecht_textbox = Textbox;

package/dist/collection/article/html/template.js

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2
+ */
+
+export const Article = ({ textContent }) => `<div class="utrecht-html"><article>${textContent}</article></div>`;

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

@@ -7,9 +7,9 @@ export class Article {
   static get is() { return "utrecht-article"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1 @@
+export const Article = ({ content }) => `<utrecht-article>${content}</utrecht-article>`;

package/dist/collection/backdrop/css/template.js

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  viewport: false,
+};
+
+export const Backdrop = ({ viewport = false }) =>
+  `<div class="${clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport')}"></div>`;
+
+export const checkerboard = (story) =>
+  `<div style="
+      --checkerboard-color-1: #000000;
+      --checkerboard-color-2: #ffffff;
+      --checkerboard-size: 16px;
+      background-color: var(--checkerboard-color-2);
+      background-image: linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%,var(--checkerboard-color-1)), linear-gradient(45deg, var(--checkerboard-color-1) 25%, transparent 25%, transparent 75%, var(--checkerboard-color-1) 75%, var(--checkerboard-color-1));
+      background-position: 0 0, var(--checkerboard-size) var(--checkerboard-size);
+      background-size: calc(var(--checkerboard-size) * 2) calc(var(--checkerboard-size) * 2);
+      height: 100%;
+      min-height: calc(40 * var(--checkerboard-size));
+      min-width: calc(40 * var(--checkerboard-size));
+      position: relative;
+      width: 100%;
+">${story()}</div>`;

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

@@ -13,10 +13,10 @@ export class Backdrop {
   static get is() { return "utrecht-backdrop"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "viewport": {

package/dist/collection/backdrop/{checkerboard.js → web-component/template.js}

@@ -1,7 +1,4 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
+export const Backdrop = ({ viewport }) => `<utrecht-backdrop${viewport ? ' viewport="true"' : ''}></utrecht-backdrop>`;
 
 export const checkerboard = (story) =>
   `<div style="

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

@@ -14,10 +14,10 @@ export class BadgeCounter {
   static get is() { return "utrecht-badge-counter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "value": {

package/dist/collection/badge-counter/web-component/template.js

@@ -0,0 +1,4 @@
+export const BadgeCounter = ({ locale = null, textContent = '', value = null, max = null }) =>
+  `<utrecht-badge-counter${typeof max !== 'undefined' && max !== null ? ` max="${max}"` : ''}${
+    typeof value !== 'undefined' && value !== null ? ` value="${value}"` : ''
+  }${locale ? ` locale="${locale}"` : ''}>${textContent}</utrecht-badge-counter>`;

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

@@ -11,9 +11,9 @@ export class BadgeData {
   static get is() { return "utrecht-badge-data"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/badge-data/web-component/template.js

@@ -0,0 +1 @@
+export const BadgeData = ({ textContent = '' }) => `<utrecht-badge-data>${textContent}</utrecht-badge-data>`;

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

@@ -5,16 +5,16 @@
 import { Component, h, Prop } from '@stencil/core';
 export class BadgeStatus {
   render() {
-    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` },
+    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` },
       h("slot", null)));
   }
   static get is() { return "utrecht-badge-status"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "status": {

package/dist/collection/badge-status/web-component/template.js

@@ -0,0 +1,4 @@
+export const BadgeStatus = ({ status = '', textContent = '' }) =>
+  status
+    ? `<utrecht-badge-status status="${status}">${textContent}</utrecht-badge-status>`
+    : `<utrecht-badge-status>${textContent}</utrecht-badge-status>`;

package/dist/collection/collection-manifest.json

@@ -1,24 +1,24 @@
 {
   "entries": [
-    "./article/stencil.js",
-    "./backdrop/stencil.js",
-    "./badge-counter/stencil.js",
-    "./badge-data/stencil.js",
-    "./badge-status/stencil.js",
+    "./article/web-component/index.stencil.js",
+    "./backdrop/web-component/index.stencil.js",
+    "./badge-counter/web-component/index.stencil.js",
+    "./badge-data/web-component/index.stencil.js",
+    "./badge-status/web-component/index.stencil.js",
     "./breadcrumb/web-component/index.stencil.js",
     "./button/stencil.js",
     "./checkbox/web-component/index.stencil.js",
-    "./custom-checkbox/stencil.js",
-    "./digid-button/stencil.js",
-    "./digid-logo/stencil.js",
-    "./document/stencil.js",
-    "./eherkenning-logo/stencil.js",
+    "./custom-checkbox/web-component/index.stencil.js",
+    "./digid-button/web-component/index.stencil.js",
+    "./digid-logo/web-component/index.stencil.js",
+    "./document/web-component/index.stencil.js",
+    "./eherkenning-logo/web-component/index.stencil.js",
     "./eidas-logo/web-component/index.stencil.js",
     "./form-field-checkbox/stencil.js",
     "./form-field-description/stencil.js",
     "./form-field-textarea/stencil.js",
     "./form-field-textbox/stencil.js",
-    "./form-toggle/stencil.js",
+    "./form-toggle/web-component/index.stencil.js",
     "./heading/stencil.js",
     "./heading-1/stencil.js",
     "./heading-2/stencil.js",
@@ -27,41 +27,41 @@
     "./heading-5/stencil.js",
     "./heading-6/stencil.js",
     "./html-content/stencil.js",
-    "./icon/afval.stencil.js",
-    "./icon/arrow.stencil.js",
-    "./icon/checkmark.stencil.js",
-    "./icon/cross.stencil.js",
-    "./icon/error.stencil.js",
-    "./icon/facebook.stencil.js",
-    "./icon/filter.stencil.js",
-    "./icon/information.stencil.js",
-    "./icon/instagram.stencil.js",
-    "./icon/linkedin.stencil.js",
-    "./icon/list.stencil.js",
-    "./icon/loupe.stencil.js",
-    "./icon/melding.stencil.js",
-    "./icon/paspoort.stencil.js",
-    "./icon/rijbewijs.stencil.js",
-    "./icon/toeslag.stencil.js",
-    "./icon/trouwen.stencil.js",
-    "./icon/twitter.stencil.js",
-    "./icon/verhuizen.stencil.js",
-    "./icon/warning.stencil.js",
-    "./icon/whatsapp.stencil.js",
-    "./icon/zoomin.stencil.js",
-    "./icon/zoomout.stencil.js",
-    "./logo/stencil.js",
-    "./logo-button/stencil.js",
-    "./navigatie sidenav/stencil.js",
-    "./page/stencil.js",
-    "./page-content/stencil.js",
-    "./page-footer/stencil.js",
-    "./page-header/stencil.js",
-    "./pagination/stencil.js",
+    "./icon/web-component/afval.stencil.js",
+    "./icon/web-component/arrow.stencil.js",
+    "./icon/web-component/checkmark.stencil.js",
+    "./icon/web-component/cross.stencil.js",
+    "./icon/web-component/error.stencil.js",
+    "./icon/web-component/facebook.stencil.js",
+    "./icon/web-component/filter.stencil.js",
+    "./icon/web-component/information.stencil.js",
+    "./icon/web-component/instagram.stencil.js",
+    "./icon/web-component/linkedin.stencil.js",
+    "./icon/web-component/list.stencil.js",
+    "./icon/web-component/loupe.stencil.js",
+    "./icon/web-component/melding.stencil.js",
+    "./icon/web-component/paspoort.stencil.js",
+    "./icon/web-component/rijbewijs.stencil.js",
+    "./icon/web-component/toeslag.stencil.js",
+    "./icon/web-component/trouwen.stencil.js",
+    "./icon/web-component/twitter.stencil.js",
+    "./icon/web-component/verhuizen.stencil.js",
+    "./icon/web-component/warning.stencil.js",
+    "./icon/web-component/whatsapp.stencil.js",
+    "./icon/web-component/zoomin.stencil.js",
+    "./icon/web-component/zoomout.stencil.js",
+    "./logo/web-component/index.stencil.js",
+    "./logo-button/web-component/index.stencil.js",
+    "./navigatie sidenav/web-component/index.stencil.js",
+    "./page/web-component/index.stencil.js",
+    "./page-content/web-component/index.stencil.js",
+    "./page-footer/web-component/index.stencil.js",
+    "./page-header/web-component/stencil.js",
+    "./pagination/web-component/index.stencil.js",
     "./paragraph/web-component/index.stencil.js",
-    "./separator/stencil.js",
-    "./templates/contact-card-template/stencil.js",
-    "./textbox/stencil.js"
+    "./separator/web-component/index.stencil.js",
+    "./templates/contact-card-template/web-component/index.stencil.js",
+    "./textbox/web-component/index.stencil.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -44,10 +44,10 @@ export class CustomCheckbox {
   static get is() { return "utrecht-custom-checkbox"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "disabled": {

package/dist/collection/custom-checkbox/web-component/template.js

@@ -0,0 +1,22 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  indeterminate: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const CustomCheckbox = ({
+  checked = false,
+  disabled = false,
+  indeterminate = false,
+  invalid = false,
+  required = false,
+  value = '',
+}) =>
+  `<utrecht-custom-checkbox${checked ? ' checked="true"' : ''}${disabled ? ' disabled="true"' : ''}${
+    indeterminate ? ' indeterminate="true"' : ''
+  }${invalid ? ' invalid="true"' : ''}${required ? ' required="true"' : ''}${
+    value ? ` value="${value}"` : ''
+  }></utrecht-custom-checkbox>`;

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

@@ -14,10 +14,10 @@ export class DigidButton {
   static get is() { return "utrecht-digid-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "type": {

package/dist/collection/digid-button/web-component/template.js

@@ -0,0 +1 @@
+export const DigidButton = () => `<utrecht-digid-button>Inloggen</utrecht-digid-button>`;

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

@@ -15,9 +15,9 @@ export class DigidLogo {
   static get is() { return "utrecht-digid-logo"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/digid-logo/web-component/template.js

@@ -0,0 +1 @@
+export const DigidLogo = () => `<utrecht-digid-logo></utrecht-digid-logo>`;

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

@@ -7,9 +7,9 @@ export class Document {
   static get is() { return "utrecht-document"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

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

@@ -0,0 +1 @@
+export const Document = ({ innerHTML }) => `<utrecht-document>${innerHTML}</utrecht-document>`;

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

@@ -18,9 +18,9 @@ export class EherkenningLogo {
   static get is() { return "utrecht-eherkenning-logo"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/eherkenning-logo/web-component/template.js

@@ -0,0 +1 @@
+export const EherkenningLogo = () => `<utrecht-eherkenning-logo></utrecht-eherkenning-logo>`;

package/dist/collection/emphasis/html/template.js

@@ -0,0 +1,20 @@
+export const defaultArgs = {
+  stressed: false,
+  strong: false,
+  textContent: '',
+};
+
+export const StressedTemplate = ({ textContent = '' }) => `<em>${textContent}</em>`;
+
+export const StrongTemplate = ({ textContent = '' }) => `<strong>${textContent}</strong>`;
+
+export const Emphasis = ({ textContent = '', stressed = false, strong = false }) => {
+  let formatted = textContent;
+  if (stressed) {
+    formatted = StressedTemplate({ textContent: formatted });
+  }
+  if (strong) {
+    formatted = StrongTemplate({ textContent: formatted });
+  }
+  return `<div class="utrecht-html">${formatted}</div>`;
+};

package/dist/collection/favicon/html/template.js

@@ -0,0 +1 @@
+export const Favicon = ({ href = '' }) => `<link rel="icon" href="${href}">`;

package/dist/collection/form-fieldset/html/template.js

@@ -0,0 +1,12 @@
+export const defaultArgs = {
+  innerHTML: '',
+  legend: '',
+};
+
+export const FormFieldset = ({ innerHTML = '', legend = '' }) =>
+  `<div class="utrecht-html">
+  <fieldset>
+    ${legend ? `<legend>${legend}</legend>` : ''}
+    ${innerHTML}
+  </fieldset>
+</div>`;

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

@@ -41,10 +41,10 @@ export class FormToggle {
   static get is() { return "utrecht-form-toggle"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "disabled": {

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/icon/{afval.stencil.js → web-component/afval.stencil.js}

@@ -11,9 +11,9 @@ export class IconAfval {
   static get is() { return "utrecht-icon-afval"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{arrow.stencil.js → web-component/arrow.stencil.js}

@@ -9,9 +9,9 @@ export class IconArrow {
   static get is() { return "utrecht-icon-arrow"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{checkmark.stencil.js → web-component/checkmark.stencil.js}

@@ -8,9 +8,9 @@ export class Checkmark {
   static get is() { return "utrecht-icon-checkmark"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/icon/{cross.stencil.js → web-component/cross.stencil.js}

@@ -9,9 +9,9 @@ export class IconCross {
   static get is() { return "utrecht-icon-cross"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["index.css"]
   }; }
 }