@utrecht/web-component-library-stencil 1.0.0-alpha.9 → 1.0.0-alpha.93

package/dist/esm/utrecht-sidenav.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-26eb3bc0.js';
+import { c as clsx } from './clsx.m-071989db.js';
+
+const bemCss = ".utrecht-navhtml{font-family:var(--utrecht-font-family-sans-serif)}.utrecht-sidenav{border-block-end:1px solid var(--utrecht-color-grey-80);border-block-start:1px solid var(--utrecht-color-grey-80);margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0;width:13rem}.utrecht-sidenav__list{margin-block-end:0;margin-block-start:0.2rem;padding-block-end:0;padding-block-start:0;padding-inline-start:0}.utrecht-sidenav__list ul{margin-block-end:0;padding-block-end:0;padding-block-start:0;padding-inline-start:1.2rem}.utrecht-sidenav__item,.utrecht-sidenav__sibling__item{list-style:none;margin-inline-start:0;position:relative}.utrecht-sidenav__item:last-child{border-block-end:none}.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span,.utrecht-sidenav__item--has-children span:first-of-type){border-block-end:1px solid var(--utrecht-color-grey-80);display:block;margin-inline-start:var(--utrecht-space-inline-sm)}.utrecht-sidenav__item .utrecht-sidenav__link--has-children{padding-block-end:0}.utrecht-sidenav__child__item{list-style:none}.utrecht-sidenav__link,.utrecht-sidenav__link--sibling{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));display:block;margin-inline-start:0;padding-block-end:var(--utrecht-space-block-xs);padding-block-start:var(--utrecht-space-block-xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link--child,.utrecht-sidenav__link--child--current{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));display:block;margin-block-end:0;margin-block-start:0;padding-block-end:var(--utrecht-space-block-2xs);padding-block-start:var(--utrecht-space-block-2xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link::before,.utrecht-sidenav__link--sibling::before{background-color:var(--utrecht-sidenav-item-marker-color);left:26px}.utrecht-sidenav__link--current::before{background-color:var(--utrecht-sidenav-link-hover-color);left:27px}.utrecht-sidenav__link::before,.utrecht-sidenav__link--sibling::before,.utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before{border-radius:100%;box-shadow:0 0 2px 2px #fff;content:\"\";height:8px;overflow:hidden;position:absolute;top:20px;transform:translateY(-50%) translateX(-2.5ch);width:8px;z-index:10}.utrecht-sidenav__link:hover::before,.utrecht-sidenav__link--sibling:hover::before{background-color:var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__item a:hover{color:var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));text-decoration:underline}.utrecht-sidenav__item--current{color:var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red))}.utrecht-sidenav__link::after,.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after{background:var(--utrecht-sidenav-item-marker-color);bottom:0;content:\"\";display:block;left:3px;overflow:hidden;position:absolute;top:-22px;width:3px;z-index:5}.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,.utrecht-sidenav__link--current::after,.utrecht-sidenav__item--has-children a::after{height:calc(38px + 2px);min-height:38px}.utrecht-sidenav__item:first-child .utrecht-sidenav__link::after{content:\"\";display:none}.utrecht-sidenav__link--current,.utrecht-sidenav__link--child--current{font-weight:var(--utrecht-typography-weight-scale-bold-font-weight)}.utrecht-sidenav__list--child{margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:1.4rem}.utrecht-sidenav__item--child{border:none;list-style:none;position:relative}.utrecht-sidenav__item--child:last-child{border:none}.utrecht-sidenav__link--child::before,.utrecht-sidenav__link--child--current::before{background-color:transparent;border:2px solid var(--utrecht-sidenav-link-color);border-radius:100%;content:\"\";height:4px;left:1.2rem;overflow:hidden;position:absolute;top:16px;transform:translateY(-50%) translateX(-19.5px);width:4px;z-index:10}.utrecht-sidenav__link--child--current::before{background-color:var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__link--child:hover::before{background-color:var(--utrecht-sidenav-link-hover-color);border:2px solid var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,.utrecht-sidenav__link--child::after,.utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,.utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,.utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after{display:none}.utrecht-sidenav__link:focus,.utrecht-sidenav__link--focus{background-color:var(--utrecht-focus-background-color);box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);color:var(--utrecht-focus-color, inherit);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}";
+
+const Sidenav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const items = JSON.parse(this.json);
+    return (h("nav", { class: "utrecht-sidenav" }, h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }) => (h("li", { key: href, class: clsx("utrecht-sidenav__item", sibling && "utrecht-sidenav__item--sibling", haschildren && "utrecht-sidenav__item--has-children") }, h("a", { class: clsx("utrecht-sidenav__link", current && "utrecht-sidenav__link--current", focus && "utrecht-sidenav__link--focus", sibling && "utrecht-sidenav__link--sibling", haschildren && "utrecht-sidenav__link--has-children"), href: href }, title), h("span", null), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx("utrecht-sidenav__link utrecht-sidenav__link--child", current && "utrecht-sidenav__link--current utrecht-sidenav__link--child--current", focus && "utrecht-sidenav__link--focus"), href: href }, title)))))) : ("")))))));
+  }
+};
+Sidenav.style = bemCss;
+
+export { Sidenav as utrecht_sidenav };

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

@@ -0,0 +1,35 @@
+import { r as registerInstance, c as createEvent, h } from './index-26eb3bc0.js';
+import { c as clsx } from './clsx.m-071989db.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-focus-background-color);box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);color:var(--utrecht-focus-color, inherit);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0);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--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))));opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
+
+const Textbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.utrechtBlur = createEvent(this, "utrechtBlur", 7);
+    this.utrechtChange = createEvent(this, "utrechtChange", 7);
+    this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
+    this.utrechtInput = createEvent(this, "utrechtInput", 7);
+    this.autoComplete = "";
+    this.disabled = false;
+    this.invalid = false;
+    this.min = "";
+    this.max = "";
+    this.pattern = "";
+    this.placeholder = "";
+    this.readOnly = false;
+    this.required = false;
+    this.type = "";
+    this.value = "";
+  }
+  render() {
+    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+    return (h("input", { class: clsx("utrecht-textbox", "utrecht-textbox--html-input", disabled && "utrecht-textbox--disabled", invalid && "utrecht-textbox--invalid", readOnly && "utrecht-textbox--readonly"), type: type || "text", autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.value = evt.target.value;
+        this.utrechtInput.emit(evt);
+      } }));
+  }
+};
+Textbox.style = stencilCss;
+
+export { Textbox as utrecht_textbox };

package/dist/esm/utrecht.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-7fbac151.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-26eb3bc0.js';
 
 /*
- Stencil Client Patch Browser v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["utrecht-article",[[1,"utrecht-article"]]],["utrecht-badge-counter",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data",[[1,"utrecht-badge-data"]]],["utrecht-badge-status",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-button",[[1,"utrecht-button",{"disabled":[4]}]]],["utrecht-document",[[1,"utrecht-document"]]],["utrecht-heading",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-html-content",[[4,"utrecht-html-content"]]],["utrecht-page-footer",[[1,"utrecht-page-footer"]]],["utrecht-paragraph",[[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-separator",[[1,"utrecht-separator"]]]], options);
+  return bootstrapLazy([["utrecht-contact-card-template",[[1,"utrecht-contact-card-template"]]],["utrecht-digid-button",[[1,"utrecht-digid-button",{"type":[1]}]]],["utrecht-logo-button",[[1,"utrecht-logo-button",{"type":[1]}]]],["utrecht-article",[[1,"utrecht-article"]]],["utrecht-badge-counter",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data",[[1,"utrecht-badge-data"]]],["utrecht-badge-status",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-checkbox",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["utrecht-document",[[1,"utrecht-document"]]],["utrecht-eherkenning-logo",[[1,"utrecht-eherkenning-logo"]]],["utrecht-eidas-logo",[[1,"utrecht-eidas-logo"]]],["utrecht-form-field-checkbox",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["utrecht-form-field-description",[[1,"utrecht-form-field-description",{"status":[513]}]]],["utrecht-form-field-textarea",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["utrecht-form-field-textbox",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-form-toggle",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["utrecht-heading",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-heading-1",[[1,"utrecht-heading-1"]]],["utrecht-heading-4",[[1,"utrecht-heading-4"]]],["utrecht-heading-5",[[1,"utrecht-heading-5"]]],["utrecht-heading-6",[[1,"utrecht-heading-6"]]],["utrecht-html-content",[[4,"utrecht-html-content"]]],["utrecht-icon-arrow",[[1,"utrecht-icon-arrow"]]],["utrecht-icon-cross",[[1,"utrecht-icon-cross"]]],["utrecht-icon-facebook",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-filter",[[1,"utrecht-icon-filter"]]],["utrecht-icon-instagram",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-list",[[1,"utrecht-icon-list"]]],["utrecht-icon-loupe",[[1,"utrecht-icon-loupe"]]],["utrecht-icon-twitter",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-whatsapp",[[1,"utrecht-icon-whatsapp"]]],["utrecht-icon-zoomin",[[1,"utrecht-icon-zoomin"]]],["utrecht-icon-zoomout",[[1,"utrecht-icon-zoomout"]]],["utrecht-logo",[[1,"utrecht-logo"]]],["utrecht-page-footer",[[1,"utrecht-page-footer"]]],["utrecht-pagination",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["utrecht-separator",[[1,"utrecht-separator"]]],["utrecht-sidenav",[[1,"utrecht-sidenav",{"json":[1]}]]],["utrecht-textbox",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-heading-2_3",[[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-button_2",[[1,"utrecht-button",{"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-digid-logo"]]]], options);
 });

package/dist/form-field-checkbox/stencil.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from "@stencil/core";
+export declare class FormFieldCheckbox {
+    label: boolean;
+    disabled: boolean;
+    checked: boolean;
+    invalid: boolean;
+    required: boolean;
+    value: string;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/form-field-checkbox/stencil.js

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, Prop, State, h } from "@stencil/core";
+import clsx from "clsx";
+let FormFieldCheckbox = class FormFieldCheckbox {
+    constructor() {
+        this.label = false;
+        this.disabled = false;
+        this.checked = false;
+        this.invalid = false;
+        this.required = false;
+        this.value = "";
+    }
+    render() {
+        const { checked, disabled, invalid, required, value } = this;
+        return (h("div", { class: "utrecht-form-field utrecht-form-field--checkbox" },
+            h("input", { id: "input", class: clsx("utrecht-checkbox"), type: "checkbox", checked: checked, disabled: disabled, "aria-invalid": invalid, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+                    this.checked = evt.target.checked;
+                    this.utrechtInput.emit(evt);
+                } }),
+            h("label", { class: clsx("utrecht-form-field__label", "utrecht-form-field__label--checkbox", "utrecht-form-label", "utrecht-form-label--checkbox"), htmlFor: "input" },
+                h("slot", null))));
+    }
+};
+__decorate([
+    Prop()
+], FormFieldCheckbox.prototype, "label", void 0);
+__decorate([
+    Prop({ attribute: "disabled", reflect: true })
+], FormFieldCheckbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ attribute: "checked", reflect: true })
+], FormFieldCheckbox.prototype, "checked", void 0);
+__decorate([
+    Prop({ attribute: "invalid", reflect: true })
+], FormFieldCheckbox.prototype, "invalid", void 0);
+__decorate([
+    Prop({ attribute: "required", reflect: true })
+], FormFieldCheckbox.prototype, "required", void 0);
+__decorate([
+    State()
+], FormFieldCheckbox.prototype, "value", void 0);
+__decorate([
+    Event()
+], FormFieldCheckbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], FormFieldCheckbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], FormFieldCheckbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], FormFieldCheckbox.prototype, "utrechtInput", void 0);
+FormFieldCheckbox = __decorate([
+    Component({
+        tag: "utrecht-form-field-checkbox",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], FormFieldCheckbox);
+export { FormFieldCheckbox };

package/dist/form-field-description/stencil.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+export declare class FormFieldDescription {
+    status?: string;
+    render(): any;
+}

package/dist/form-field-description/stencil.js

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+let FormFieldDescription = class FormFieldDescription {
+    constructor() {
+        this.status = null;
+    }
+    render() {
+        const { status } = this;
+        return (h("div", { class: clsx("utrecht-form-field-description", status === "valid" && "utrecht-form-field-description--valid", status === "invalid" && "utrecht-form-field-description--invalid") },
+            h("slot", null)));
+    }
+};
+__decorate([
+    Prop({ attribute: "status", reflect: true })
+], FormFieldDescription.prototype, "status", void 0);
+FormFieldDescription = __decorate([
+    Component({
+        tag: "utrecht-form-field-description",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], FormFieldDescription);
+export { FormFieldDescription };

package/dist/form-field-textarea/stencil.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from "@stencil/core";
+export declare class FormFieldTextarea {
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    placeholder: string;
+    required: boolean;
+    value: string;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/form-field-textarea/stencil.js

@@ -0,0 +1,70 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+let FormFieldTextarea = class FormFieldTextarea {
+    constructor() {
+        this.disabled = false;
+        this.invalid = false;
+        this.readOnly = false;
+        this.placeholder = "";
+        this.required = false;
+        this.value = "";
+    }
+    render() {
+        const { disabled, invalid, placeholder, readOnly, required, value } = this;
+        return (h("div", { class: "utrecht-form-field utrecht-form-field--textarea" },
+            h("textarea", { id: "input", class: clsx("utrecht-textarea", "utrecht-textarea--html-textarea", disabled && "utrecht-textarea--disabled", invalid && "utrecht-textarea--invalid", readOnly && "utrecht-textarea--readonly"), disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+                    this.value = evt.target.value;
+                    this.utrechtInput.emit(evt);
+                } }, value),
+            h("label", { class: "utrecht-form-field-textarea__label utrecht-form-label", htmlFor: "input" },
+                h("slot", null))));
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextarea.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextarea.prototype, "invalid", void 0);
+__decorate([
+    Prop({ attribute: "readonly", reflect: true })
+], FormFieldTextarea.prototype, "readOnly", void 0);
+__decorate([
+    Prop()
+], FormFieldTextarea.prototype, "placeholder", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextarea.prototype, "required", void 0);
+__decorate([
+    Prop()
+], FormFieldTextarea.prototype, "value", void 0);
+__decorate([
+    Event()
+], FormFieldTextarea.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], FormFieldTextarea.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], FormFieldTextarea.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], FormFieldTextarea.prototype, "utrechtInput", void 0);
+FormFieldTextarea = __decorate([
+    Component({
+        tag: "utrecht-form-field-textarea",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], FormFieldTextarea);
+export { FormFieldTextarea };

package/dist/form-field-textbox/stencil.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from "@stencil/core";
+export declare class FormFieldTextbox {
+    autoComplete: string;
+    disabled: boolean;
+    invalid: boolean;
+    min: string;
+    max: string;
+    pattern: string;
+    placeholder: string;
+    readOnly: boolean;
+    required: boolean;
+    type: string;
+    value: string;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/form-field-textbox/stencil.js

@@ -0,0 +1,90 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+let FormFieldTextbox = class FormFieldTextbox {
+    constructor() {
+        this.autoComplete = "";
+        this.disabled = false;
+        this.invalid = false;
+        this.min = "";
+        this.max = "";
+        this.pattern = "";
+        this.placeholder = "";
+        this.readOnly = false;
+        this.required = false;
+        this.type = "";
+        this.value = "";
+    }
+    render() {
+        const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+        return (h("div", { class: "utrecht-form-field-textbox" },
+            h("input", { id: "input", class: clsx("utrecht-textbox", "utrecht-textbox--html-input", disabled && "utrecht-textbox--disabled", invalid && "utrecht-textbox--invalid", readOnly && "utrecht-textbox--readonly"), type: type || "text", autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+                    this.value = evt.target.value;
+                    this.utrechtInput.emit(evt);
+                } }),
+            h("label", { class: "utrecht-form-field-textbox__label utrecht-form-label", htmlFor: "input" },
+                h("slot", null))));
+    }
+};
+__decorate([
+    Prop({ attribute: "autocomplete", reflect: true })
+], FormFieldTextbox.prototype, "autoComplete", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextbox.prototype, "invalid", void 0);
+__decorate([
+    Prop()
+], FormFieldTextbox.prototype, "min", void 0);
+__decorate([
+    Prop()
+], FormFieldTextbox.prototype, "max", void 0);
+__decorate([
+    Prop()
+], FormFieldTextbox.prototype, "pattern", void 0);
+__decorate([
+    Prop()
+], FormFieldTextbox.prototype, "placeholder", void 0);
+__decorate([
+    Prop({ attribute: "readonly", reflect: true })
+], FormFieldTextbox.prototype, "readOnly", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextbox.prototype, "required", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormFieldTextbox.prototype, "type", void 0);
+__decorate([
+    Prop()
+], FormFieldTextbox.prototype, "value", void 0);
+__decorate([
+    Event()
+], FormFieldTextbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], FormFieldTextbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], FormFieldTextbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], FormFieldTextbox.prototype, "utrechtInput", void 0);
+FormFieldTextbox = __decorate([
+    Component({
+        tag: "utrecht-form-field-textbox",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], FormFieldTextbox);
+export { FormFieldTextbox };

package/dist/form-toggle/stencil.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from "@stencil/core";
+export declare class FormToggle {
+    disabled: boolean;
+    checked: boolean;
+    utrechtBlur: EventEmitter;
+    utrechtChange: EventEmitter;
+    utrechtFocus: EventEmitter;
+    utrechtInput: EventEmitter;
+    render(): any;
+}

package/dist/form-toggle/stencil.js

@@ -0,0 +1,74 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Event, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+let FormToggle = 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 = () => {
+            console.log("click");
+            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, "aria-disabled": disabled, 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") }))));
+    }
+};
+__decorate([
+    Prop({ reflect: true })
+], FormToggle.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], FormToggle.prototype, "checked", void 0);
+__decorate([
+    Event()
+], FormToggle.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], FormToggle.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], FormToggle.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], FormToggle.prototype, "utrechtInput", void 0);
+FormToggle = __decorate([
+    Component({
+        tag: "utrecht-form-toggle",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], FormToggle);
+export { FormToggle };

package/dist/heading/stencil.d.ts

@@ -0,0 +1,7 @@
+export declare class Heading {
+    /**
+     * Heading level
+     */
+    level: number;
+    render(): any;
+}

package/dist/heading/stencil.js

@@ -43,7 +43,7 @@ __decorate([
 Heading = __decorate([
     Component({
         tag: "utrecht-heading",
-        styleUrl: "bem.css",
+        styleUrl: "stencil.scss",
         shadow: true,
     })
 ], Heading);

package/dist/heading-1/stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Heading1 {
+    render(): any;
+}

package/dist/heading-1/stencil.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h } from "@stencil/core";
+let Heading1 = class Heading1 {
+    render() {
+        return (h("h1", { class: "utrecht-heading-1" },
+            h("slot", null)));
+    }
+};
+Heading1 = __decorate([
+    Component({
+        tag: "utrecht-heading-1",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], Heading1);
+export { Heading1 };

package/dist/heading-2/stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Heading2 {
+    render(): any;
+}

package/dist/heading-2/stencil.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h } from "@stencil/core";
+let Heading2 = class Heading2 {
+    render() {
+        return (h("h2", { class: "utrecht-heading-2" },
+            h("slot", null)));
+    }
+};
+Heading2 = __decorate([
+    Component({
+        tag: "utrecht-heading-2",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], Heading2);
+export { Heading2 };

package/dist/heading-3/stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Heading3 {
+    render(): any;
+}

package/dist/heading-3/stencil.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h } from "@stencil/core";
+let Heading3 = class Heading3 {
+    render() {
+        return (h("h3", { class: "utrecht-heading-3" },
+            h("slot", null)));
+    }
+};
+Heading3 = __decorate([
+    Component({
+        tag: "utrecht-heading-3",
+        styleUrl: "stencil.scss",
+        shadow: true,
+    })
+], Heading3);
+export { Heading3 };

package/dist/heading-4/stencil.d.ts

@@ -0,0 +1,3 @@
+export declare class Heading4 {
+    render(): any;
+}