@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.160

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8cef21e1.js');
+const clsx_m = require('./clsx.m-b00fa5e1.js');
+
+const stencilCss = ".utrecht-pagination{font-family:var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-pagination-font-size, var(--utrecht-document-font-family))}.utrecht-pagination--distanced{margin-block-end:var(--utrecht-pagination-margin-block-end);margin-block-start:var(--utrecht-pagination-margin-block-start)}.utrecht-pagination__relative-link{background-color:var(--utrecht-pagination-relative-link-background-color);border-color:var(--utrecht-pagination-relative-link-border-color);border-radius:var(--utrecht-pagination-relative-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-relative-link-border-width, 0);color:var(--utrecht-pagination-relative-link-color);display:inline-block;font-weight:var(--utrecht-pagination-relative-link-font-weight);padding-block-end:var(--utrecht-pagination-relative-link-padding-block-end);padding-block-start:var(--utrecht-pagination-relative-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-relative-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-relative-link-padding-inline-start);text-decoration:var(--utrecht-pagination-relative-link-text-decoration);text-transform:var(--utrecht-pagination-relative-link-text-transform)}.utrecht-pagination__relative-link--next{margin-inline-start:var(--utrecht-pagination-relative-link-distanced-margin-inline-start)}.utrecht-pagination__relative-link--prev{margin-inline-end:var(--utrecht-pagination-relative-link-distanced-margin-inline-end)}.utrecht-pagination__relative-link--disabled{background-color:var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));color:var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__relative-link--hover,.utrecht-pagination__relative-link:hover{background-color:var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));border-color:var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));color:var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__page-link{background-color:var(--utrecht-pagination-page-link-background-color);border-color:var(--utrecht-pagination-page-link-border-color, 0);border-radius:var(--utrecht-pagination-page-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-page-link-border-width);color:var(--utrecht-pagination-page-link-color);display:inline-block;font-weight:var(--utrecht-pagination-page-link-font-weight);padding-block-end:var(--utrecht-pagination-page-link-padding-block-end);padding-block-start:var(--utrecht-pagination-page-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-page-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-page-link-padding-inline-start);text-decoration:var(--utrecht-pagination-page-link-text-decoration)}.utrecht-pagination__page-link--current{--utrecht-pagination-page-link-background-color:var(--utrecht-pagination-page-link-current-background-color);--utrecht-pagination-page-link-border-color:var(--utrecht-pagination-page-link-current-border-color);--utrecht-pagination-page-link-color:var(--utrecht-pagination-page-link-current-color)}.utrecht-pagination__page-link--distanced,.utrecht-pagination__page-link~.utrecht-pagination__page-link{margin-inline-start:var(--utrecht-pagination-page-link-distanced-margin-inline-start)}.utrecht-pagination__page-link--hover,.utrecht-pagination__page-link:hover{background-color:var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));border-color:var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));color:var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color))}.utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link: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:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+
+let Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const { currentIndex } = this;
+    const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
+    const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
+    const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
+    const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (index.h("span", { class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (index.h("a", { href: href, class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
+    const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (index.h("a", { class: clsx_m.clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
+    return (index.h("nav", { class: "utrecht-pagination" }, index.h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), index.h("span", { role: "group", class: "utrecht-pagination__pages" }, links
+      .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+      .map((link, arrayIndex) => {
+      const index = typeof link.index === 'number' ? link.index : arrayIndex;
+      return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
+          ? index === currentIndex + 1
+            ? 'next'
+            : index === currentIndex - 1
+              ? 'prev'
+              : null
+          : null, textContent: link.index || index }, link);
+    })
+      .map((link) => PageLink(link))), index.h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+  }
+};
+Pagination.style = stencilCss;
+
+exports.utrecht_pagination = Pagination;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4628fffe.js');
+const index = require('./index-8cef21e1.js');
 
-const bemCss = ".utrecht-separator{border-style:solid;border-color:var(--utrecht-separator-color);border-width:0 0 var(--utrecht-separator-width) 0;margin-block-start:var(--utrecht-separator-margin-block-start);margin-block-end:var(--utrecht-separator-margin-block-end)}";
+const stencilCss = ".utrecht-separator{border-color:var(--utrecht-separator-color);border-style:solid;border-width:0 0 var(--utrecht-separator-block-size) 0}.utrecht-separator--distanced{margin-block-end:var(--utrecht-separator-margin-block-end);margin-block-start:var(--utrecht-separator-margin-block-start)}:host{display:block}:host([hidden]){display:none !important}";
 
-const Separator = class {
+let Separator = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
@@ -14,6 +14,6 @@ const Separator = class {
     return index.h("hr", { class: "utrecht-separator" });
   }
 };
-Separator.style = bemCss;
+Separator.style = stencilCss;
 
 exports.utrecht_separator = Separator;

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

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4628fffe.js');
+const index = require('./index-8cef21e1.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const bemCss = ".utrecht-navhtml{font-family:var(--utrecht-font-family-sans-serif)}.utrecht-sidenav{padding-block-start:0;padding-block-end:0;margin-block-start:0;margin-block-end:0;width:13rem;border-block-start:1px solid var(--utrecht-color-grey-80);border-block-end:1px solid var(--utrecht-color-grey-80)}.utrecht-sidenav__list{padding-block-start:0;padding-block-end:0;margin-block-start:0.2rem;margin-block-end:0;padding-inline-start:0}.utrecht-sidenav__list ul{padding-block-start:0;padding-block-end:0;margin-block-end:0;padding-inline-start:1.2rem}.utrecht-sidenav__item,.utrecht-sidenav__sibling__item{list-style:none;position:relative;margin-inline-start:0}.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){display:block;border-block-end:1px solid var(--utrecht-color-grey-80);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{display:block;color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));padding-block-start:var(--utrecht-space-block-xs);padding-block-end:var(--utrecht-space-block-xs);padding-inline-start:var(--utrecht-space-inline-lg);padding-inline-end:var(--utrecht-space-inline-3xs);margin-inline-start:0;text-decoration:none}.utrecht-sidenav__link--child,.utrecht-sidenav__link--child--current{display:block;color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));text-decoration:none;padding-block-start:var(--utrecht-space-block-2xs);padding-block-end:var(--utrecht-space-block-2xs);padding-inline-start:var(--utrecht-space-inline-lg);padding-inline-end:var(--utrecht-space-inline-3xs);margin-block-start:0;margin-block-end:0}.utrecht-sidenav__link::before,.utrecht-sidenav__link--sibling::before,.utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before{overflow:hidden;position:absolute;top:20px;transform:translateY(-50%) translateX(-2.5ch);content:\"\";width:8px;height:8px;border-radius:100%;z-index:10;box-shadow:0 0 2px 2px #fff;}.utrecht-sidenav__link::before,.utrecht-sidenav__link--sibling::before{background-color:var(--utrecht-sidenav-item-marker-color)}.utrecht-sidenav__link::before,.utrecht-sidenav__link--sibling::before{left:26px}.utrecht-sidenav__link--current::before{left:27px}.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{display:block;content:\"\";overflow:hidden;width:3px;background:var(--utrecht-sidenav-item-marker-color);position:absolute;left:3px;top:-22px;bottom:0;z-index:5}.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,.utrecht-sidenav__link--current::after,.utrecht-sidenav__item--has-children a::after{min-height:38px;height:calc(38px + 2px)}.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-start:0;margin-block-end:0;padding-block-start:0;padding-block-end:0;padding-inline-start:1.4rem;padding-inline-end:0}.utrecht-sidenav__item--child{list-style:none;position:relative;border:none}.utrecht-sidenav__item--child:last-child{border:none}.utrecht-sidenav__link--child::before,.utrecht-sidenav__link--child--current::before{overflow:hidden;position:absolute;top:16px;left:1.2rem;transform:translateY(-50%) translateX(-19.5px);content:\"\";width:4px;height:4px;border-radius:100%;border:2px solid var(--utrecht-sidenav-link-color);z-index:10}.utrecht-sidenav__link--child::before{background-color:transparent}.utrecht-sidenav__link--current::before,.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{outline-width:var(--utrecht-focus-outline-width, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-color:var(--utrecht-focus-outline-color, transparent);color:var(--utrecht-focus-color, inherit);box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-offset:0;background-color:var(--utrecht-focus-background-color)}";
+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-lg)}.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-xl);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-xl);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:40px;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-visible,.utrecht-sidenav__link: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:0;outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-sidenav__link:focus:not(:focus-visible){box-shadow:none;outline-style:none}";
 
-const Sidenav = class {
+let Sidenav = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
     const items = JSON.parse(this.json);
-    return (index.h("nav", { class: "utrecht-sidenav" }, index.h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }) => (index.h("li", { key: href, class: clsx_m.clsx("utrecht-sidenav__item", sibling && "utrecht-sidenav__item--sibling", haschildren && "utrecht-sidenav__item--has-children") }, index.h("a", { class: clsx_m.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), index.h("span", null), children ? (index.h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (index.h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, index.h("a", { class: clsx_m.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)))))) : ("")))))));
+    return (index.h("nav", { class: "utrecht-sidenav" }, index.h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }) => (index.h("li", { key: href, class: clsx_m.clsx('utrecht-sidenav__item', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--has-children') }, index.h("a", { class: clsx_m.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), index.h("span", null), children ? (index.h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (index.h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, index.h("a", { class: clsx_m.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;

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

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

package/dist/cjs/utrecht.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-4628fffe.js');
+const index = require('./index-8cef21e1.js');
 
 /*
- Stencil Client Patch Browser v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.11.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('utrecht.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-button.cjs",[[1,"utrecht-button",{"disabled":[4]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-paragraph.cjs",[[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]],["utrecht-sidenav.cjs",[[1,"utrecht-sidenav",{"json":[1]}]]]], options);
+  return index.bootstrapLazy([["utrecht-contact-card-template.cjs",[[1,"utrecht-contact-card-template"]]],["utrecht-digid-button.cjs",[[1,"utrecht-digid-button",{"type":[1]}]]],["utrecht-logo-button.cjs",[[1,"utrecht-logo-button",{"type":[1]}]]],["utrecht-custom-checkbox.cjs",[[1,"utrecht-custom-checkbox",{"disabled":[516],"checked":[516],"indeterminate":[516],"invalid":[516],"required":[516]}]]],["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-backdrop.cjs",[[1,"utrecht-backdrop",{"viewport":[4]}]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb.cjs",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-checkbox.cjs",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-eherkenning-logo.cjs",[[1,"utrecht-eherkenning-logo"]]],["utrecht-eidas-logo.cjs",[[1,"utrecht-eidas-logo"]]],["utrecht-form-field-checkbox.cjs",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["utrecht-form-field-description.cjs",[[1,"utrecht-form-field-description",{"status":[513]}]]],["utrecht-form-field-textarea.cjs",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["utrecht-form-field-textbox.cjs",[[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.cjs",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-heading-1.cjs",[[1,"utrecht-heading-1"]]],["utrecht-heading-4.cjs",[[1,"utrecht-heading-4"]]],["utrecht-heading-5.cjs",[[1,"utrecht-heading-5"]]],["utrecht-heading-6.cjs",[[1,"utrecht-heading-6"]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-icon-afval.cjs",[[1,"utrecht-icon-afval"]]],["utrecht-icon-arrow.cjs",[[1,"utrecht-icon-arrow"]]],["utrecht-icon-cross.cjs",[[1,"utrecht-icon-cross"]]],["utrecht-icon-error.cjs",[[1,"utrecht-icon-error"]]],["utrecht-icon-facebook.cjs",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-filter.cjs",[[1,"utrecht-icon-filter"]]],["utrecht-icon-information.cjs",[[1,"utrecht-icon-information"]]],["utrecht-icon-instagram.cjs",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin.cjs",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-list.cjs",[[1,"utrecht-icon-list"]]],["utrecht-icon-loupe.cjs",[[1,"utrecht-icon-loupe"]]],["utrecht-icon-melding.cjs",[[1,"utrecht-icon-melding"]]],["utrecht-icon-paspoort.cjs",[[1,"utrecht-icon-paspoort"]]],["utrecht-icon-rijbewijs.cjs",[[1,"utrecht-icon-rijbewijs"]]],["utrecht-icon-toeslag.cjs",[[1,"utrecht-icon-toeslag"]]],["utrecht-icon-trouwen.cjs",[[1,"utrecht-icon-trouwen"]]],["utrecht-icon-twitter.cjs",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-verhuizen.cjs",[[1,"utrecht-icon-verhuizen"]]],["utrecht-icon-warning.cjs",[[1,"utrecht-icon-warning"]]],["utrecht-icon-whatsapp.cjs",[[1,"utrecht-icon-whatsapp"]]],["utrecht-icon-zoomin.cjs",[[1,"utrecht-icon-zoomin"]]],["utrecht-icon-zoomout.cjs",[[1,"utrecht-icon-zoomout"]]],["utrecht-logo.cjs",[[1,"utrecht-logo"]]],["utrecht-page.cjs",[[1,"utrecht-page"]]],["utrecht-page-content.cjs",[[1,"utrecht-page-content"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-page-header.cjs",[[1,"utrecht-page-header"]]],["utrecht-pagination.cjs",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]],["utrecht-sidenav.cjs",[[1,"utrecht-sidenav",{"json":[1]}]]],["utrecht-textbox.cjs",[[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-icon-checkmark.cjs",[[1,"utrecht-icon-checkmark"]]],["utrecht-heading-2_3.cjs",[[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-button_2.cjs",[[1,"utrecht-button",{"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-digid-logo"]]]], options);
 });

package/dist/collection/alternate-lang-link/bem.js

@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  current: false,
+  hreflang: '',
+  lang: '',
+  textContent: '',
+  title: '',
+};
+
+export const AlternateLangLink = ({ textContent = '', title = '', current = false, lang = '', hreflang = '' }) =>
+  `<a href="https://example.com/${lang}/" class="${clsx('utrecht-link', 'utrecht-link--alternate-lang', {
+    'utrecht-link--current-lang': current,
+  })}"${current ? ' aria-current="page"' : ''}${title ? ` title="${title}"` : ''}${
+    hreflang ? ` hreflang="${hreflang}"` : ''
+  }${lang ? ` lang="${lang}"` : ''}${!current ? ' rel="alternate"' : ''}>${textContent}</a>`;

package/dist/collection/alternate-lang-nav/bem.js

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import { AlternateLangLink } from '../alternate-lang-link/bem';
+
+export const AlternateLangNav = ({ languages }) =>
+  `<div class="utrecht-alternate-lang-nav">
+${languages.map(AlternateLangLink).join('\n<span aria-hidden="true"> | </span>\n')}
+</div>`;

package/dist/collection/article/bem.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const Article = ({ content }) => `<div class="utrecht-article">${content}</div>`;

package/dist/collection/article/{bem.css → stencil.css}

@@ -2,7 +2,18 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-article {
   max-inline-size: var(--utrecht-article-max-inline-size);
 }
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/article/stencil.js

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

package/dist/collection/backdrop/bem.js

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  viewport: false,
+};
+
+export const Backdrop = ({ viewport = false }) =>
+  `<div class="${clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport')}"></div>`;

package/dist/collection/backdrop/checkerboard.js

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

package/dist/collection/backdrop/stencil.css

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.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;
+}

package/dist/collection/backdrop/stencil.js

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

package/dist/collection/badge-counter/bem.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeCounter = ({ textContent = '' }) =>
+  `<span class="utrecht-badge-counter"><span class="utrecht-badge-counter__text">${textContent}</span></span>`;

package/dist/collection/badge-counter/{bem.css → stencil.css}

@@ -6,16 +6,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-badge {
   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-style: normal;
+  font-size: var(--utrecht-badge-font-size, inherit);
+  font-style: var(--utrecht-badge-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold);
   /* no inheritance */
+  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);
@@ -30,7 +36,7 @@
   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: normal;
+  font-style: var(--utrecht-badge-counter-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
   /* no inheritance */
@@ -40,4 +46,12 @@
   padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
   text-decoration: none;
   /* no inheritance */
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/badge-counter/stencil.js

@@ -2,22 +2,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class BadgeCounter {
   render() {
     const { locale, max, value } = this;
-    const limited = typeof max === "number" && typeof value === "number" && Number(value) > Number(max);
+    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) : "";
+    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';
     return h("div", { class: "utrecht-badge-counter" }, textContent ? textContent : h("slot", null));
   }
   static get is() { return "utrecht-badge-counter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
   static get properties() { return {
     "value": {

package/dist/collection/badge-data/bem.js

@@ -0,0 +1,6 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeData = ({ textContent = '' }) => `<div class="utrecht-badge-data">${textContent}</div>`;

package/dist/collection/badge-data/{bem.css → stencil.css}

@@ -6,16 +6,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-badge, .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-style: normal;
+  font-size: var(--utrecht-badge-font-size, inherit);
+  font-style: var(--utrecht-badge-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold);
   /* no inheritance */
+  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);
@@ -27,4 +33,12 @@
 .utrecht-badge-data {
   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;
 }

package/dist/collection/badge-data/stencil.js

@@ -2,7 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, h } from "@stencil/core";
+import { Component, h } from '@stencil/core';
 export class BadgeData {
   render() {
     return (h("div", { class: "utrecht-badge-data" },
@@ -11,9 +11,9 @@ export class BadgeData {
   static get is() { return "utrecht-badge-data"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
 }

package/dist/collection/badge-status/bem.js

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const BadgeStatus = ({ status = '', textContent = '' }) =>
+  `<div class="utrecht-badge-status utrecht-badge-status--${status ? status : 'neutral'}">${textContent}</div>`;

package/dist/collection/badge-status/{bem.css → stencil.css}

@@ -6,16 +6,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-badge, .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-style: normal;
+  font-size: var(--utrecht-badge-font-size, inherit);
+  font-style: var(--utrecht-badge-font-style, normal);
   /* no inheritance */
   font-weight: var(--utrecht-badge-font-weight, bold);
   /* no inheritance */
+  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);
@@ -44,6 +50,11 @@
   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));
@@ -72,4 +83,12 @@
 .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;
 }

package/dist/collection/badge-status/stencil.js

@@ -2,7 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class BadgeStatus {
   render() {
     return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` },
@@ -11,10 +11,10 @@ export class BadgeStatus {
   static get is() { return "utrecht-badge-status"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["stencil.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["stencil.css"]
   }; }
   static get properties() { return {
     "status": {