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

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h } from './index-73546a7d.js';
+import { r as registerInstance, h } from './index-b6f2699c.js';
 import { c as clsx } from './clsx.m-071989db.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 indexCss = ".utrecht-sidenav{--utrecht-sidenav-connection-color:var(--utrecht-sidenav-item-marker-color);--utrecht-sidenav-connection-inline-size:2px;--utrecht-sidenav-marker-current-color:var(--utrecht-sidenav-link-hover-color);--utrecht-sidenav-marker-offset:26px;--utrecht-sidenav-connection-block-size:100%;--utrecht-sidenav-marker-height:8px;--utrecht-sidenav-marker-outline-width:2px;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:19rem}.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--child{margin-block-start:0;padding-inline-end:0;padding-inline-start:1.4rem}.utrecht-sidenav__item{list-style:none;margin-inline-start:0;position:relative}.utrecht-sidenav__item--current{color:var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red))}.utrecht-sidenav__item--last{border-block-end:none}.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator){border-block-end:1px solid var(--utrecht-color-grey-80);display:block;margin-inline-start:var(--utrecht-space-inline-lg)}.utrecht-sidenav__link{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));display:block;margin-inline-start:0;padding-block-end:var(--utrecht-space-block-xs);padding-block-start:var(--utrecht-space-block-xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link:hover{color:var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));text-decoration:underline}.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:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-sidenav__link--parent{padding-block-end:0}.utrecht-sidenav__connection,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--parent):not(.utrecht-sidenav__link--child)::after{background:var(--utrecht-sidenav-connection-color);bottom:0;content:\"\";display:block;height:calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));left:3px;overflow:hidden;position:absolute;top:calc(var(--utrecht-sidenav-marker-offset));width:var(--utrecht-sidenav-connection-inline-size);z-index:5}.utrecht-sidenav__connection--last,.utrecht-sidenav__connection--parent,.utrecht-sidenav__connection--sibling{display:none}.utrecht-sidenav__marker,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-item-marker-color);border-radius:100%;content:\"\";height:var(--utrecht-sidenav-marker-height);left:var(--utrecht-sidenav-marker-offset);overflow:hidden;position:absolute;top:20px;transform:translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));width:8px;z-index:10}.utrecht-sidenav__marker--child,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before{background-color:transparent;border:2px solid var(--utrecht-sidenav-link-color);height:4px;left:1.2rem;top:16px;transform:translateY(-50%) translateX(-19.5px);width:4px}.utrecht-sidenav__marker--current,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before{background-color:var(--utrecht-sidenav-marker-current-color)}.utrecht-sidenav__link--child,.utrecht-sidenav__link--current-child{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));margin-block-end:0;margin-block-start:0;padding-block-end:var(--utrecht-space-block-2xs);padding-block-start:var(--utrecht-space-block-2xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link--current,.utrecht-sidenav__link--current-child{font-weight:var(--utrecht-typography-weight-scale-bold-font-weight)}.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before{background-color:var(--utrecht-sidenav-link-hover-color);border:2px solid var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after{display:none}.utrecht-sidenav__link:focus:not(:focus-visible){box-shadow:none;outline-style:none}";
 
 const Sidenav = class {
   constructor(hostRef) {
@@ -9,9 +9,9 @@ const Sidenav = class {
   }
   render() {
     const items = JSON.parse(this.json);
-    return (h("nav", { class: "utrecht-sidenav" }, h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }) => (h("li", { key: href, class: clsx("utrecht-sidenav__item", sibling && "utrecht-sidenav__item--sibling", haschildren && "utrecht-sidenav__item--has-children") }, h("a", { class: clsx("utrecht-sidenav__link", current && "utrecht-sidenav__link--current", focus && "utrecht-sidenav__link--focus", sibling && "utrecht-sidenav__link--sibling", haschildren && "utrecht-sidenav__link--has-children"), href: href }, title), h("span", null), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx("utrecht-sidenav__link utrecht-sidenav__link--child", current && "utrecht-sidenav__link--current utrecht-sidenav__link--child--current", focus && "utrecht-sidenav__link--focus"), href: href }, title)))))) : ("")))))));
+    return (h("nav", { class: "utrecht-sidenav" }, h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), h("div", { class: clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), h("div", { class: "utrecht-sidenav__item-separator" })))))));
   }
 };
-Sidenav.style = bemCss;
+Sidenav.style = indexCss;
 
 export { Sidenav as utrecht_sidenav };

package/dist/esm/utrecht-table-body.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableBodyCss = ":host{vertical-align:baseline;display:table-row-group}";
+
+const TableBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+TableBody.style = tableBodyCss;
+
+export { TableBody as utrecht_table_body };

package/dist/esm/utrecht-table-caption.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h } from './index-b6f2699c.js';
+
+const tableCaptionCss = ":host{color:var(--utrecht-table-caption-color);font-family:var(--utrecht-table-caption-font-family);font-size:var(--utrecht-table-caption-font-size);font-weight:var(--utrecht-table-caption-font-weight);line-height:var(--utrecht-table-caption-line-height);margin-block-end:var(--utrecht-table-caption-margin-block-end);text-align:var(--utrecht-table-caption-text-align, center);display:table-caption;page-break-after:avoid;page-break-inside:avoid}";
+
+const TableCaption = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+    return h("slot", null);
+  }
+};
+TableCaption.style = tableCaptionCss;
+
+export { TableCaption as utrecht_table_caption };

package/dist/esm/utrecht-table-cell.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableCellCss = ":host{border-block-end-color:var(--utrecht-table-row-border-block-end-color, transparent);border-block-end-style:solid;border-block-end-width:var(--utrecht-table-row-border-block-end-width, 0);line-height:var(--utrecht-table-cell-line-height, inherit);padding-block-end:var(--utrecht-table-cell-padding-block-end, 0);padding-block-start:var(--utrecht-table-cell-padding-block-start, 0);padding-inline-end:var(--utrecht-table-cell-padding-inline-end, 0);padding-inline-start:var(--utrecht-table-cell-padding-inline-start, 0);text-align:start;display:table-cell}";
+
+const TableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "cell" }, h("slot", null)));
+  }
+};
+TableCell.style = tableCellCss;
+
+export { TableCell as utrecht_table_cell };

package/dist/esm/utrecht-table-footer.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableFooterCss = ":host{display:table-footer-group}";
+
+const TableFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+TableFooter.style = tableFooterCss;
+
+export { TableFooter as utrecht_table_footer };

package/dist/esm/utrecht-table-header-cell.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableHeaderCellCss = ":host{color:var(--utrecht-table-header-cell-color);font-size:var(--utrecht-table-header-cell-font-size);font-weight:var(--utrecht-table-header-cell-font-weight);text-align:start;text-transform:var(--utrecht-table-header-cell-text-transform);display:table-cell}";
+
+const TableHeaderCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell' }, h("slot", null)));
+  }
+};
+TableHeaderCell.style = tableHeaderCellCss;
+
+export { TableHeaderCell as utrecht_table_header_cell };

package/dist/esm/utrecht-table-header.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableHeaderCss = ":host{background-color:var(--utrecht-table-header-background-color);color:var(--utrecht-table-header-color);font-weight:var(--utrecht-table-header-font-weight);text-transform:var(--utrecht-table-header-text-transform);vertical-align:bottom;display:table-header-group}";
+
+const TableHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+TableHeader.style = tableHeaderCss;
+
+export { TableHeader as utrecht_table_header };

package/dist/esm/utrecht-table-row.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableRowCss = ":host{display:table-row}";
+
+const TableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "row" }, h("slot", null)));
+  }
+};
+TableRow.style = tableRowCss;
+
+export { TableRow as utrecht_table_row };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b6f2699c.js';
+
+const tableCss = ":host{border-collapse:collapse;border-color:var(--utrecht-table-border-color, 0);border-style:solid;border-width:var(--utrecht-table-border-width, 0);font-family:var(--utrecht-table-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-table-font-size, inherit);width:100%;display:table}";
+
+const Table = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "table" }, h("slot", null)));
+  }
+};
+Table.style = tableCss;
+
+export { Table as utrecht_table };

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

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

package/dist/esm/utrecht.js

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

package/dist/types/backdrop/web-component/index.stencil.d.ts

@@ -0,0 +1,4 @@
+export declare class Backdrop {
+  viewport: boolean;
+  render(): any;
+}

package/dist/types/breadcrumb/web-component/index.stencil.d.ts

@@ -0,0 +1,5 @@
+export declare class Breadcrumb {
+  json: string;
+  variant: string;
+  render(): any;
+}

package/dist/types/button/web-component/index.stencil.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Button {
+  appearance: string;
+  busy: boolean;
+  disabled: boolean;
+  utrechtRequestReset: EventEmitter;
+  utrechtRequestSubmit: EventEmitter;
+  host: HTMLElement;
+  type: string;
+  render(): any;
+}

package/dist/types/checkbox/web-component/index.stencil.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Checkbox {
+  disabled: boolean;
+  readOnly: boolean;
+  checked: boolean;
+  value: string;
+  utrechtBlur: EventEmitter;
+  utrechtChange: EventEmitter;
+  utrechtFocus: EventEmitter;
+  utrechtInput: EventEmitter;
+  render(): any;
+}