@utrecht/web-component-library-stencil 1.0.0-alpha.31 → 1.0.0-alpha.310

package/dist/components/textbox/web-component/index.stencil.js

@@ -0,0 +1,87 @@
+/**
+ * @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, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+let Textbox = class Textbox {
+    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("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);
+            } }));
+    }
+};
+__decorate([
+    Prop({ attribute: 'autocomplete', reflect: true })
+], Textbox.prototype, "autoComplete", void 0);
+__decorate([
+    Prop({ reflect: true })
+], Textbox.prototype, "disabled", void 0);
+__decorate([
+    Prop({ reflect: true })
+], Textbox.prototype, "invalid", void 0);
+__decorate([
+    Prop()
+], Textbox.prototype, "min", void 0);
+__decorate([
+    Prop()
+], Textbox.prototype, "max", void 0);
+__decorate([
+    Prop()
+], Textbox.prototype, "pattern", void 0);
+__decorate([
+    Prop()
+], Textbox.prototype, "placeholder", void 0);
+__decorate([
+    Prop({ attribute: 'readonly', reflect: true })
+], Textbox.prototype, "readOnly", void 0);
+__decorate([
+    Prop({ reflect: true })
+], Textbox.prototype, "required", void 0);
+__decorate([
+    Prop({ reflect: true })
+], Textbox.prototype, "type", void 0);
+__decorate([
+    Prop()
+], Textbox.prototype, "value", void 0);
+__decorate([
+    Event()
+], Textbox.prototype, "utrechtBlur", void 0);
+__decorate([
+    Event()
+], Textbox.prototype, "utrechtChange", void 0);
+__decorate([
+    Event()
+], Textbox.prototype, "utrechtFocus", void 0);
+__decorate([
+    Event()
+], Textbox.prototype, "utrechtInput", void 0);
+Textbox = __decorate([
+    Component({
+        tag: 'utrecht-textbox',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Textbox);
+export { Textbox };

package/dist/components/utrecht-article.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtArticle extends Components.UtrechtArticle, HTMLElement {}
+export const UtrechtArticle: {
+  prototype: UtrechtArticle;
+  new (): UtrechtArticle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-article.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}:host{display:block}:host([hidden]){display:none !important}";
+
+const Article = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("article", { class: "utrecht-article" }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-article"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-article"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-article":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Article);
+      }
+      break;
+  } });
+}
+
+const UtrechtArticle = Article;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtArticle, defineCustomElement };

package/dist/components/utrecht-backdrop.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtBackdrop extends Components.UtrechtBackdrop, HTMLElement {}
+export const UtrechtBackdrop: {
+  prototype: UtrechtBackdrop;
+  new (): UtrechtBackdrop;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-backdrop.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-backdrop{background-color:var(--utrecht-backdrop-background-color);bottom:0;color:var(--utrecht-backdrop-color);display:block;left:0;opacity:var(--utrecht-backdrop-opacity);position:absolute;right:0;top:0;user-select:none;z-index:var(--utrecht-backdrop-z-index)}.utrecht-backdrop--viewport{position:fixed}:host{display:block}:host([hidden]){display:none !important}";
+
+const Backdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const { viewport } = this;
+    return (h("div", { class: clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport') }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-backdrop", {
+    "viewport": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-backdrop"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-backdrop":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Backdrop);
+      }
+      break;
+  } });
+}
+
+const UtrechtBackdrop = Backdrop;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtBackdrop, defineCustomElement };

package/dist/components/utrecht-badge-counter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtBadgeCounter extends Components.UtrechtBadgeCounter, HTMLElement {}
+export const UtrechtBadgeCounter: {
+  prototype: UtrechtBadgeCounter;
+  new (): UtrechtBadgeCounter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-badge-counter.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));border-radius:var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));color:var(--utrecht-badge-counter-color, var(--utrecht-badge-color, white));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-style:var(--utrecht-badge-counter-font-style, normal);font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-decoration:none;}:host{display:inline-block}:host([hidden]){display:none !important}";
+
+const BadgeCounter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const { locale, max, value } = this;
+    const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);
+    const formatNumber = (n) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));
+    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';
+    return h("div", { class: "utrecht-badge-counter" }, textContent ? textContent : h("slot", null));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-badge-counter", {
+    "value": [2],
+    "max": [2],
+    "locale": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-badge-counter"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-badge-counter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BadgeCounter);
+      }
+      break;
+  } });
+}
+
+const UtrechtBadgeCounter = BadgeCounter;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtBadgeCounter, defineCustomElement };

package/dist/components/utrecht-badge-data.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtBadgeData extends Components.UtrechtBadgeData, HTMLElement {}
+export const UtrechtBadgeData: {
+  prototype: UtrechtBadgeData;
+  new (): UtrechtBadgeData;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-badge-data.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-badge-data{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:var(--utrecht-badge-font-style, normal);font-weight:var(--utrecht-badge-font-weight, bold);line-height:var(--utrecht-badge-line-height);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;letter-spacing:var(--utrecht-badge-data-letter-spacing, inherit);text-transform:var(--utrecht-badge-data-text-transform, inherit)}:host{display:inline-block}:host([hidden]){display:none !important}";
+
+const BadgeData = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-badge-data" }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-badge-data"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-badge-data"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-badge-data":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BadgeData);
+      }
+      break;
+  } });
+}
+
+const UtrechtBadgeData = BadgeData;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtBadgeData, defineCustomElement };

package/dist/components/utrecht-badge-status.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtBadgeStatus extends Components.UtrechtBadgeStatus, HTMLElement {}
+export const UtrechtBadgeStatus: {
+  prototype: UtrechtBadgeStatus;
+  new (): UtrechtBadgeStatus;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-badge-status.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".utrecht-badge-status{background-color:var(--utrecht-badge-background-color, black);border-radius:var(--utrecht-badge-border-radius, 0.5ch);color:var(--utrecht-badge-color, white);display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:var(--utrecht-badge-font-style, normal);font-weight:var(--utrecht-badge-font-weight, bold);line-height:var(--utrecht-badge-line-height);padding-block-end:var(--utrecht-badge-padding-block, 0.5ex);padding-block-start:var(--utrecht-badge-padding-block, 0.5ex);padding-inline-end:var(--utrecht-badge-padding-inline, 0.5ch);padding-inline-start:var(--utrecht-badge-padding-inline, 0.5ch);text-decoration:none;letter-spacing:var(--utrecht-badge-status-letter-spacing, inherit);text-transform:var(--utrecht-badge-status-text-transform, inherit)}.utrecht-badge-status--danger{background-color:var(--utrecht-feedback-danger-fill-background-color, red);color:var(--utrecht-feedback-danger-fill-color, white)}.utrecht-badge-status--warning{background-color:var(--utrecht-feedback-warning-fill-background-color, #ffa600);color:var(--utrecht-feedback-warning-fill-color, white)}.utrecht-badge-status--safe{background-color:var(--utrecht-feedback-safe-fill-background-color, green);color:var(--utrecht-feedback-safe-fill-color, white)}.utrecht-badge-status--neutral{background-color:var(--utrecht-feedback-neutral-fill-background-color, black);color:var(--utrecht-feedback-neutral-fill-color, white)}.utrecht-badge-status--valid{background-color:var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));color:var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--invalid{background-color:var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--error{background-color:var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--success{background-color:var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--active{background-color:var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, #ffa600));color:var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--inactive{background-color:var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));color:var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white))}:host{display:inline-block}:host([hidden]){display:none !important}";
+
+const BadgeStatus = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-badge-status", {
+    "status": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-badge-status"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-badge-status":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BadgeStatus);
+      }
+      break;
+  } });
+}
+
+const UtrechtBadgeStatus = BadgeStatus;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtBadgeStatus, defineCustomElement };

package/dist/components/utrecht-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtBreadcrumb extends Components.UtrechtBreadcrumb, HTMLElement {}
+export const UtrechtBreadcrumb: {
+  prototype: UtrechtBreadcrumb;
+  new (): UtrechtBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-breadcrumb.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start, 8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--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-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);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-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}:host{display:block}:host([hidden]){display:none !important}";
+
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const { json, variant } = this;
+    console.log(json);
+    const items = json ? JSON.parse(json) : [];
+    return (h("nav", { class: clsx('utrecht-breadcrumb', variant === 'arrows' && 'utrecht-breadcrumb--arrows') }, h("ol", { class: "utrecht-breadcrumb__list", itemscope: true, itemtype: "https://schema.org/BreadcrumbList" }, items.map(({ href, title, current }, index) => (h("li", { key: href, class: "utrecht-breadcrumb__item", itemscope: true, itemtype: "https://schema.org/ListItem", itemprop: "itemListElement" }, h("a", { class: clsx('utrecht-breadcrumb__link', 'utrecht-link', current && 'utrecht-link--current'), href: href, "aria-current": current ? 'location' : null, itemprop: "item" }, h("span", { class: "utrecht-breadcrumb__text", itemprop: "name" }, title), h("meta", { itemprop: "position", content: index + 1 }))))))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-breadcrumb", {
+    "json": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-breadcrumb"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-breadcrumb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumb);
+      }
+      break;
+  } });
+}
+
+const UtrechtBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtBreadcrumb, defineCustomElement };

package/dist/components/utrecht-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtButton extends Components.UtrechtButton, HTMLElement {}
+export const UtrechtButton: {
+  prototype: UtrechtButton;
+  new (): UtrechtButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-button.js

@@ -0,0 +1,6 @@
+import { B as Button, d as defineCustomElement$1 } from './index.stencil.js';
+
+const UtrechtButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtButton, defineCustomElement };

package/dist/components/utrecht-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtCheckbox extends Components.UtrechtCheckbox, HTMLElement {}
+export const UtrechtCheckbox: {
+  prototype: UtrechtCheckbox;
+  new (): UtrechtCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-checkbox.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.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){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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.disabled = false;
+    this.readOnly = false;
+    this.checked = false;
+    this.value = '';
+  }
+  render() {
+    const { checked, disabled, value } = this;
+    return (h("input", { class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, 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);
+      } }));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-checkbox", {
+    "disabled": [516],
+    "readOnly": [516, "readonly"],
+    "checked": [4],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Checkbox);
+      }
+      break;
+  } });
+}
+
+const UtrechtCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtCheckbox, defineCustomElement };

package/dist/components/utrecht-contact-card-template.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtContactCardTemplate extends Components.UtrechtContactCardTemplate, HTMLElement {}
+export const UtrechtContactCardTemplate: {
+  prototype: UtrechtContactCardTemplate;
+  new (): UtrechtContactCardTemplate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-contact-card-template.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './index.stencil3.js';
+import { d as defineCustomElement$3 } from './index.stencil4.js';
+import { d as defineCustomElement$2 } from './index.stencil5.js';
+
+const indexCss = ".utrecht-link{color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--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-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);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-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-link--telephone{white-space:nowrap}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:#dae9f6;background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-xl);padding-block-start:var(--utrecht-space-block-xl);padding-inline-end:var(--utrecht-space-inline-xl);padding-inline-start:var(--utrecht-space-inline-xl)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{margin-block-start:var(--utrecht-space-row-lg);width:100%}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
+
+const ContactCardTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-contact-card" }, h("utrecht-heading-2", null, "Hulp en contact"), h("div", { class: "utrecht-contact-card__content" }, h("div", { class: "utrecht-contact-card__section" }, h("utrecht-heading-3", null, "Telefoon"), h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" }, h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")), h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")), h("div", { class: "utrecht-contact-card__section" }, h("utrecht-heading-3", null, "E-mail"), h("utrecht-paragraph", null, h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-contact-card-template"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-contact-card-template", "utrecht-heading-2", "utrecht-heading-3", "utrecht-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-contact-card-template":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ContactCardTemplate);
+      }
+      break;
+    case "utrecht-heading-2":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "utrecht-heading-3":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "utrecht-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UtrechtContactCardTemplate = ContactCardTemplate;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtContactCardTemplate, defineCustomElement };

package/dist/components/utrecht-custom-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtCustomCheckbox extends Components.UtrechtCustomCheckbox, HTMLElement {}
+export const UtrechtCustomCheckbox: {
+  prototype: UtrechtCustomCheckbox;
+  new (): UtrechtCustomCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;