@utrecht/web-component-library-stencil 1.0.0-alpha.32 → 1.0.0-alpha.322

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e1ed72fb.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);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));width:100%;display:table}";
+
+const Table = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { role: "table" }, index.h("slot", null)));
+  }
+};
+Table.style = tableCss;
+
+exports.utrecht_table = Table;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e1ed72fb.js');
+const clsx_m = require('./clsx.m-b81c6b86.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%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}:host{display:block}:host([hidden]){display:none !important}";
+
+const 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 = indexCss;
+
+exports.utrecht_textbox = Textbox;

package/dist/cjs/utrecht.cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-fe92e5ce.js');
+const index = require('./index-e1ed72fb.js');
 
 /*
- Stencil Client Patch Browser v2.6.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.2 | 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-breadcrumb.cjs",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[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-icon-facebook.cjs",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-instagram.cjs",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin.cjs",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-twitter.cjs",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-whatsapp.cjs",[[1,"utrecht-icon-whatsapp"]]],["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(JSON.parse("[[\"utrecht-contact-card-template.cjs\",[[1,\"utrecht-contact-card-template\"]]],[\"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-digid-button.cjs\",[[1,\"utrecht-digid-button\",{\"type\":[1]}]]],[\"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.cjs\",[[1,\"utrecht-icon\"]]],[\"utrecht-icon-afspraak-maken.cjs\",[[1,\"utrecht-icon-afspraak-maken\"]]],[\"utrecht-icon-afval.cjs\",[[1,\"utrecht-icon-afval\"]]],[\"utrecht-icon-afval-container.cjs\",[[1,\"utrecht-icon-afval-container\"]]],[\"utrecht-icon-afval-containerpas.cjs\",[[1,\"utrecht-icon-afval-containerpas\"]]],[\"utrecht-icon-afval-kalender.cjs\",[[1,\"utrecht-icon-afval-kalender\"]]],[\"utrecht-icon-afval-scheiden.cjs\",[[1,\"utrecht-icon-afval-scheiden\"]]],[\"utrecht-icon-afvalkalender.cjs\",[[1,\"utrecht-icon-afvalkalender\"]]],[\"utrecht-icon-alleen.cjs\",[[1,\"utrecht-icon-alleen\"]]],[\"utrecht-icon-arrow.cjs\",[[1,\"utrecht-icon-arrow\"]]],[\"utrecht-icon-bestemmingsplan.cjs\",[[1,\"utrecht-icon-bestemmingsplan\"]]],[\"utrecht-icon-betaaldatum.cjs\",[[1,\"utrecht-icon-betaaldatum\"]]],[\"utrecht-icon-bewijsstukken.cjs\",[[1,\"utrecht-icon-bewijsstukken\"]]],[\"utrecht-icon-bijstand.cjs\",[[1,\"utrecht-icon-bijstand\"]]],[\"utrecht-icon-blad.cjs\",[[1,\"utrecht-icon-blad\"]]],[\"utrecht-icon-bouwproject.cjs\",[[1,\"utrecht-icon-bouwproject\"]]],[\"utrecht-icon-brandgevaar.cjs\",[[1,\"utrecht-icon-brandgevaar\"]]],[\"utrecht-icon-college-b-w.cjs\",[[1,\"utrecht-icon-college-b-w\"]]],[\"utrecht-icon-container.cjs\",[[1,\"utrecht-icon-container\"]]],[\"utrecht-icon-container-bio.cjs\",[[1,\"utrecht-icon-container-bio\"]]],[\"utrecht-icon-cross.cjs\",[[1,\"utrecht-icon-cross\"]]],[\"utrecht-icon-dakloos.cjs\",[[1,\"utrecht-icon-dakloos\"]]],[\"utrecht-icon-dementie.cjs\",[[1,\"utrecht-icon-dementie\"]]],[\"utrecht-icon-duurzaam.cjs\",[[1,\"utrecht-icon-duurzaam\"]]],[\"utrecht-icon-eenzaamheid.cjs\",[[1,\"utrecht-icon-eenzaamheid\"]]],[\"utrecht-icon-eikenprocessie.cjs\",[[1,\"utrecht-icon-eikenprocessie\"]]],[\"utrecht-icon-energie-vergoeding.cjs\",[[1,\"utrecht-icon-energie-vergoeding\"]]],[\"utrecht-icon-energietransitie.cjs\",[[1,\"utrecht-icon-energietransitie\"]]],[\"utrecht-icon-error.cjs\",[[1,\"utrecht-icon-error\"]]],[\"utrecht-icon-evenementen.cjs\",[[1,\"utrecht-icon-evenementen\"]]],[\"utrecht-icon-facebook.cjs\",[[1,\"utrecht-icon-facebook\"]]],[\"utrecht-icon-fiets.cjs\",[[1,\"utrecht-icon-fiets\"]]],[\"utrecht-icon-filter.cjs\",[[1,\"utrecht-icon-filter\"]]],[\"utrecht-icon-gebruiker-centraal.cjs\",[[1,\"utrecht-icon-gebruiker-centraal\"]]],[\"utrecht-icon-gegevenswoordenboek.cjs\",[[1,\"utrecht-icon-gegevenswoordenboek\"]]],[\"utrecht-icon-gemeenteraad.cjs\",[[1,\"utrecht-icon-gemeenteraad\"]]],[\"utrecht-icon-grofvuil.cjs\",[[1,\"utrecht-icon-grofvuil\"]]],[\"utrecht-icon-horeca.cjs\",[[1,\"utrecht-icon-horeca\"]]],[\"utrecht-icon-huishoudelijk-geweld.cjs\",[[1,\"utrecht-icon-huishoudelijk-geweld\"]]],[\"utrecht-icon-hulp-huishouden.cjs\",[[1,\"utrecht-icon-hulp-huishouden\"]]],[\"utrecht-icon-hulp-vervoer.cjs\",[[1,\"utrecht-icon-hulp-vervoer\"]]],[\"utrecht-icon-hulp-zorg.cjs\",[[1,\"utrecht-icon-hulp-zorg\"]]],[\"utrecht-icon-hulpverlening.cjs\",[[1,\"utrecht-icon-hulpverlening\"]]],[\"utrecht-icon-information.cjs\",[[1,\"utrecht-icon-information\"]]],[\"utrecht-icon-innovatie.cjs\",[[1,\"utrecht-icon-innovatie\"]]],[\"utrecht-icon-instagram.cjs\",[[1,\"utrecht-icon-instagram\"]]],[\"utrecht-icon-kalender.cjs\",[[1,\"utrecht-icon-kalender\"]]],[\"utrecht-icon-kerstbomen.cjs\",[[1,\"utrecht-icon-kerstbomen\"]]],[\"utrecht-icon-klachten.cjs\",[[1,\"utrecht-icon-klachten\"]]],[\"utrecht-icon-kroon.cjs\",[[1,\"utrecht-icon-kroon\"]]],[\"utrecht-icon-laadpaal.cjs\",[[1,\"utrecht-icon-laadpaal\"]]],[\"utrecht-icon-lantaarnpaal.cjs\",[[1,\"utrecht-icon-lantaarnpaal\"]]],[\"utrecht-icon-leren.cjs\",[[1,\"utrecht-icon-leren\"]]],[\"utrecht-icon-let-op.cjs\",[[1,\"utrecht-icon-let-op\"]]],[\"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-markt.cjs\",[[1,\"utrecht-icon-markt\"]]],[\"utrecht-icon-melding.cjs\",[[1,\"utrecht-icon-melding\"]]],[\"utrecht-icon-melding-klacht.cjs\",[[1,\"utrecht-icon-melding-klacht\"]]],[\"utrecht-icon-menselijk.cjs\",[[1,\"utrecht-icon-menselijk\"]]],[\"utrecht-icon-milieu-ontheffing.cjs\",[[1,\"utrecht-icon-milieu-ontheffing\"]]],[\"utrecht-icon-natuur.cjs\",[[1,\"utrecht-icon-natuur\"]]],[\"utrecht-icon-nieuw-huis.cjs\",[[1,\"utrecht-icon-nieuw-huis\"]]],[\"utrecht-icon-nummerbord.cjs\",[[1,\"utrecht-icon-nummerbord\"]]],[\"utrecht-icon-omgeving.cjs\",[[1,\"utrecht-icon-omgeving\"]]],[\"utrecht-icon-omgevingsvisie.cjs\",[[1,\"utrecht-icon-omgevingsvisie\"]]],[\"utrecht-icon-omgevingswet.cjs\",[[1,\"utrecht-icon-omgevingswet\"]]],[\"utrecht-icon-onderhoud.cjs\",[[1,\"utrecht-icon-onderhoud\"]]],[\"utrecht-icon-openingstijden.cjs\",[[1,\"utrecht-icon-openingstijden\"]]],[\"utrecht-icon-panden.cjs\",[[1,\"utrecht-icon-panden\"]]],[\"utrecht-icon-park.cjs\",[[1,\"utrecht-icon-park\"]]],[\"utrecht-icon-parkeerkaart.cjs\",[[1,\"utrecht-icon-parkeerkaart\"]]],[\"utrecht-icon-parkeervergunning.cjs\",[[1,\"utrecht-icon-parkeervergunning\"]]],[\"utrecht-icon-parken.cjs\",[[1,\"utrecht-icon-parken\"]]],[\"utrecht-icon-parkeren-bedrijven.cjs\",[[1,\"utrecht-icon-parkeren-bedrijven\"]]],[\"utrecht-icon-parkeren-betalen.cjs\",[[1,\"utrecht-icon-parkeren-betalen\"]]],[\"utrecht-icon-participatie-campagne.cjs\",[[1,\"utrecht-icon-participatie-campagne\"]]],[\"utrecht-icon-paspoort.cjs\",[[1,\"utrecht-icon-paspoort\"]]],[\"utrecht-icon-rijbewijs.cjs\",[[1,\"utrecht-icon-rijbewijs\"]]],[\"utrecht-icon-rolstoel.cjs\",[[1,\"utrecht-icon-rolstoel\"]]],[\"utrecht-icon-shoppen.cjs\",[[1,\"utrecht-icon-shoppen\"]]],[\"utrecht-icon-sinterklaas.cjs\",[[1,\"utrecht-icon-sinterklaas\"]]],[\"utrecht-icon-sport.cjs\",[[1,\"utrecht-icon-sport\"]]],[\"utrecht-icon-stookverbod.cjs\",[[1,\"utrecht-icon-stookverbod\"]]],[\"utrecht-icon-strooien.cjs\",[[1,\"utrecht-icon-strooien\"]]],[\"utrecht-icon-subsidie-gezin.cjs\",[[1,\"utrecht-icon-subsidie-gezin\"]]],[\"utrecht-icon-toeslag.cjs\",[[1,\"utrecht-icon-toeslag\"]]],[\"utrecht-icon-trein.cjs\",[[1,\"utrecht-icon-trein\"]]],[\"utrecht-icon-trouwen.cjs\",[[1,\"utrecht-icon-trouwen\"]]],[\"utrecht-icon-twitter.cjs\",[[1,\"utrecht-icon-twitter\"]]],[\"utrecht-icon-vaccinatie.cjs\",[[1,\"utrecht-icon-vaccinatie\"]]],[\"utrecht-icon-veilige-wijk.cjs\",[[1,\"utrecht-icon-veilige-wijk\"]]],[\"utrecht-icon-vergoeding.cjs\",[[1,\"utrecht-icon-vergoeding\"]]],[\"utrecht-icon-verhuizen.cjs\",[[1,\"utrecht-icon-verhuizen\"]]],[\"utrecht-icon-verkiezingen.cjs\",[[1,\"utrecht-icon-verkiezingen\"]]],[\"utrecht-icon-verslaving.cjs\",[[1,\"utrecht-icon-verslaving\"]]],[\"utrecht-icon-vervoersvoorziening.cjs\",[[1,\"utrecht-icon-vervoersvoorziening\"]]],[\"utrecht-icon-virus.cjs\",[[1,\"utrecht-icon-virus\"]]],[\"utrecht-icon-vluchtelingen.cjs\",[[1,\"utrecht-icon-vluchtelingen\"]]],[\"utrecht-icon-voorzieningen-vervoer.cjs\",[[1,\"utrecht-icon-voorzieningen-vervoer\"]]],[\"utrecht-icon-vrijwilligerswerk.cjs\",[[1,\"utrecht-icon-vrijwilligerswerk\"]]],[\"utrecht-icon-vuurwerk.cjs\",[[1,\"utrecht-icon-vuurwerk\"]]],[\"utrecht-icon-wandelstok.cjs\",[[1,\"utrecht-icon-wandelstok\"]]],[\"utrecht-icon-warm.cjs\",[[1,\"utrecht-icon-warm\"]]],[\"utrecht-icon-warning.cjs\",[[1,\"utrecht-icon-warning\"]]],[\"utrecht-icon-werken.cjs\",[[1,\"utrecht-icon-werken\"]]],[\"utrecht-icon-werkzaamheden.cjs\",[[1,\"utrecht-icon-werkzaamheden\"]]],[\"utrecht-icon-whatsapp.cjs\",[[1,\"utrecht-icon-whatsapp\"]]],[\"utrecht-icon-wonen-kosten.cjs\",[[1,\"utrecht-icon-wonen-kosten\"]]],[\"utrecht-icon-woning-zoeken.cjs\",[[1,\"utrecht-icon-woning-zoeken\"]]],[\"utrecht-icon-youtube.cjs\",[[1,\"utrecht-icon-youtube\"]]],[\"utrecht-icon-zelfstandig-wonen.cjs\",[[1,\"utrecht-icon-zelfstandig-wonen\"]]],[\"utrecht-icon-zoomin.cjs\",[[1,\"utrecht-icon-zoomin\"]]],[\"utrecht-icon-zoomout.cjs\",[[1,\"utrecht-icon-zoomout\"]]],[\"utrecht-icon-zorg-huis.cjs\",[[1,\"utrecht-icon-zorg-huis\"]]],[\"utrecht-icon-zwemmen.cjs\",[[1,\"utrecht-icon-zwemmen\"]]],[\"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-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-table.cjs\",[[1,\"utrecht-table\"]]],[\"utrecht-table-body.cjs\",[[1,\"utrecht-table-body\"]]],[\"utrecht-table-caption.cjs\",[[1,\"utrecht-table-caption\"]]],[\"utrecht-table-cell.cjs\",[[1,\"utrecht-table-cell\"]]],[\"utrecht-table-footer.cjs\",[[1,\"utrecht-table-footer\"]]],[\"utrecht-table-header.cjs\",[[1,\"utrecht-table-header\"]]],[\"utrecht-table-header-cell.cjs\",[[1,\"utrecht-table-header-cell\",{\"scope\":[1]}]]],[\"utrecht-table-row.cjs\",[[1,\"utrecht-table-row\"]]],[\"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-button.cjs\",[[1,\"utrecht-button\",{\"appearance\":[1],\"busy\":[4],\"disabled\":[4],\"type\":[1]}]]],[\"utrecht-icon-checkmark.cjs\",[[1,\"utrecht-icon-checkmark\"]]],[\"utrecht-digid-logo.cjs\",[[1,\"utrecht-digid-logo\"]]],[\"utrecht-heading-2_3.cjs\",[[1,\"utrecht-heading-2\"],[1,\"utrecht-heading-3\"],[1,\"utrecht-paragraph\",{\"lead\":[4]}]]]]"), options);
 });

package/dist/collection/article/web-component/index.css

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.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 → web-component/index.stencil.js}

@@ -1,4 +1,9 @@
-import { Component, h } from "@stencil/core";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { Component, h } from '@stencil/core';
 export class Article {
   render() {
     return (h("article", { class: "utrecht-article" },
@@ -7,9 +12,9 @@ export class Article {
   static get is() { return "utrecht-article"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/backdrop/web-component/index.css

@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.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/{button/stencil.js → backdrop/web-component/index.stencil.js}

@@ -1,20 +1,26 @@
-import { Component, Prop, h } from "@stencil/core";
-import clsx from "clsx";
-export class Button {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Backdrop {
   render() {
-    return (h("button", { class: clsx("utrecht-button", this.disabled && "utrecht-button--disabled"), disabled: this.disabled },
+    const { viewport } = this;
+    return (h("div", { class: clsx('utrecht-backdrop', viewport && 'utrecht-backdrop--viewport') },
       h("slot", null)));
   }
-  static get is() { return "utrecht-button"; }
+  static get is() { return "utrecht-backdrop"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
-    "disabled": {
+    "viewport": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -28,7 +34,7 @@ export class Button {
         "tags": [],
         "text": ""
       },
-      "attribute": "disabled",
+      "attribute": "viewport",
       "reflect": false
     }
   }; }

package/dist/collection/badge-counter/{bem.css → web-component/index.css}

@@ -1,36 +1,20 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-.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;
-  /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold);
-  /* no inheritance */
-  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;
-  /* no inheritance */
-}
-
 .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: 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 +24,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 → web-component/index.stencil.js}

@@ -1,23 +1,24 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-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"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "value": {

package/dist/collection/badge-data/{bem.css → web-component/index.css}

@@ -1,30 +1,44 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-.utrecht-badge, .utrecht-badge-data {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.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);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.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 → web-component/index.stencil.js}

@@ -1,8 +1,9 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-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 +12,9 @@ export class BadgeData {
   static get is() { return "utrecht-badge-data"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
 }

package/dist/collection/badge-status/{bem.css → web-component/index.css}

@@ -1,30 +1,36 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-.utrecht-badge, .utrecht-badge-status {
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.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);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-status {
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }
@@ -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 → web-component/index.stencil.js}

@@ -1,20 +1,21 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-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}` },
+    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` },
       h("slot", null)));
   }
   static get is() { return "utrecht-badge-status"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "status": {