@utrecht/web-component-library-stencil 1.0.0-alpha.232 → 1.0.0-alpha.235

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

@@ -0,0 +1,20 @@
+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 Separator = class Separator {
+    render() {
+        return h("hr", { class: "utrecht-separator" });
+    }
+};
+Separator = __decorate([
+    Component({
+        tag: 'utrecht-separator',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], Separator);
+export { Separator };

package/dist/components/table/web-component/table-body.stencil.d.ts

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

package/dist/components/table/web-component/table-body.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, Host } from '@stencil/core';
+let TableBody = class TableBody {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableBody = __decorate([
+    Component({
+        tag: 'utrecht-table-body',
+        styleUrl: 'table-body.scss',
+        shadow: true,
+    })
+], TableBody);
+export { TableBody };

package/dist/components/table/web-component/table-caption.stencil.d.ts

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

package/dist/components/table/web-component/table-caption.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 TableCaption = class TableCaption {
+    render() {
+        // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+        return h("slot", null);
+    }
+};
+TableCaption = __decorate([
+    Component({
+        tag: 'utrecht-table-caption',
+        styleUrl: 'table-caption.scss',
+        shadow: true,
+    })
+], TableCaption);
+export { TableCaption };

package/dist/components/table/web-component/table-cell.stencil.d.ts

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

package/dist/components/table/web-component/table-cell.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, Host } from '@stencil/core';
+let TableCell = class TableCell {
+    render() {
+        return (h(Host, { role: "cell" },
+            h("slot", null)));
+    }
+};
+TableCell = __decorate([
+    Component({
+        tag: 'utrecht-table-cell',
+        styleUrl: 'table-cell.scss',
+        shadow: true,
+    })
+], TableCell);
+export { TableCell };

package/dist/components/table/web-component/table-footer.stencil.d.ts

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

package/dist/components/table/web-component/table-footer.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, Host } from '@stencil/core';
+let TableFooter = class TableFooter {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableFooter = __decorate([
+    Component({
+        tag: 'utrecht-table-footer',
+        styleUrl: 'table-footer.scss',
+        shadow: true,
+    })
+], TableFooter);
+export { TableFooter };

package/dist/components/table/web-component/table-header-cell.stencil.d.ts

@@ -0,0 +1,4 @@
+export declare class TableHeaderCell {
+    scope: 'col' | 'row';
+    render(): any;
+}

package/dist/components/table/web-component/table-header-cell.stencil.js

@@ -0,0 +1,24 @@
+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, Host, Prop } from '@stencil/core';
+let TableHeaderCell = class TableHeaderCell {
+    render() {
+        return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' },
+            h("slot", null)));
+    }
+};
+__decorate([
+    Prop()
+], TableHeaderCell.prototype, "scope", void 0);
+TableHeaderCell = __decorate([
+    Component({
+        tag: 'utrecht-table-header-cell',
+        styleUrl: 'table-header-cell.scss',
+        shadow: true,
+    })
+], TableHeaderCell);
+export { TableHeaderCell };

package/dist/components/table/web-component/table-header.stencil.d.ts

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

package/dist/components/table/web-component/table-header.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, Host } from '@stencil/core';
+let TableHeader = class TableHeader {
+    render() {
+        return (h(Host, { role: "rowgroup" },
+            h("slot", null)));
+    }
+};
+TableHeader = __decorate([
+    Component({
+        tag: 'utrecht-table-header',
+        styleUrl: 'table-header.scss',
+        shadow: true,
+    })
+], TableHeader);
+export { TableHeader };

package/dist/components/table/web-component/table-row.stencil.d.ts

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

package/dist/components/table/web-component/table-row.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, Host } from '@stencil/core';
+let TableRow = class TableRow {
+    render() {
+        return (h(Host, { role: "row" },
+            h("slot", null)));
+    }
+};
+TableRow = __decorate([
+    Component({
+        tag: 'utrecht-table-row',
+        styleUrl: 'table-row.scss',
+        shadow: true,
+    })
+], TableRow);
+export { TableRow };

package/dist/components/table/web-component/table.stencil.d.ts

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

package/dist/components/table/web-component/table.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, Host } from '@stencil/core';
+let Table = class Table {
+    render() {
+        return (h(Host, { role: "table" },
+            h("slot", null)));
+    }
+};
+Table = __decorate([
+    Component({
+        tag: 'utrecht-table',
+        styleUrl: 'table.scss',
+        shadow: true,
+    })
+], Table);
+export { Table };

package/dist/components/templates/contact-card-template/web-component/index.stencil.d.ts

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

package/dist/components/templates/contact-card-template/web-component/index.stencil.js

@@ -0,0 +1,31 @@
+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 ContactCardTemplate = class ContactCardTemplate {
+    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"))))));
+    }
+};
+ContactCardTemplate = __decorate([
+    Component({
+        tag: 'utrecht-contact-card-template',
+        styleUrl: 'index.scss',
+        shadow: true,
+    })
+], ContactCardTemplate);
+export { ContactCardTemplate };

package/dist/components/textbox/web-component/index.stencil.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from '@stencil/core';
+export declare class Textbox {
+    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/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 };