@utrecht/web-component-library-stencil 1.0.0-alpha.45 → 1.0.0-alpha.451

package/dist/cjs/utrecht-eherkenning-logo.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+
+const indexCss = ":host{display:inline}:host([hidden]){display:none !important}svg{height:100%;max-height:var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));max-width:var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));width:100%}";
+
+const EherkenningLogo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-1 0 81 80" }, index.h("title", null, "Eherkenning"), index.h("rect", { fill: "#E0E0E0", width: "80", height: "80" }), index.h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M37.363,23.178c0,2.027,0,4.055,0,6.08c-4.257,0-9.55,0-14.208,0  c-1.662,0-3.648-0.207-4.799,0.193c-1.041,0.359-1.796,1.169-2.176,2.111c-0.439,1.084-0.32,2.8-0.32,4.414c0,3.425,0,6.055,0,9.475  c0,1.531-0.159,3.325,0.191,4.479c0.316,1.042,1.316,2.194,2.561,2.496c1.318,0.319,3.094,0.064,4.672,0.064  c4.599,0,9.521,0,14.08,0c0,2.025,0,4.053,0,6.08c-6.402-0.083-12.492,0.112-18.176,0c-4.937-0.099-8.966-3.966-9.344-8.833  c-0.226-2.883,0-5.901,0-8.769c0-2.971-0.19-5.932,0-8.767c0.328-4.896,4.208-8.676,8.959-9.024c3.002-0.222,6.129,0,9.28,0  C31.145,23.178,34.26,23.178,37.363,23.178z" }), index.h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.867,23.178c1.962,0,3.926,0,5.888,0c0,4.864,0,9.729,0,14.592  c-1.984,0-3.969,0-5.952,0c0-4.801,0-9.6,0-14.399C42.797,23.279,42.792,23.188,42.867,23.178z" }), index.h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M64.434,23.178c1.941,0,3.883,0,5.824,0c0,11.798,0,23.595,0,35.393  c-1.962,0-3.926,0-5.888,0c0-4.992,0-9.984,0-14.977c-5.077,0-10.155,0-15.232,0c0.824-1.95,1.651-3.896,2.56-5.76  c4.203,0,8.405,0,12.608,0c0.15-4.693,0.021-9.664,0.064-14.464C64.365,23.279,64.36,23.188,64.434,23.178z" }), index.h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M19.89,37.77c5.376,0,10.752,0,16.129,0c-0.772,2.022-1.748,3.843-2.56,5.824  c-4.544,0-9.088,0-13.633,0c0-1.877,0-3.755,0-5.633C19.821,37.87,19.816,37.781,19.89,37.77z" }), index.h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.93,43.594c1.941,0,3.883,0,5.824,0c0,4.992,0,9.984,0,14.977  c-1.984,0-3.969,0-5.952,0c0-4.93,0-9.856,0-14.783C42.8,43.678,42.851,43.62,42.93,43.594z" })));
+  }
+};
+EherkenningLogo.style = indexCss;
+
+exports.utrecht_eherkenning_logo = EherkenningLogo;

package/dist/cjs/utrecht-eidas-logo.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+
+const indexCss = ":host{display:inline}:host([hidden]){display:none !important}svg{height:100%;max-height:var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));max-width:var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));width:100%}";
+
+const EidasLogo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("svg", { viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M21 17.3383C21 18.2955 20.2291 19.0664 19.272 19.0664H1.72805C0.770872 19.0664 0 18.2955 0 17.3383V1.72805C0 0.770879 0.777296 0 1.72805 0H19.272C20.2291 0 21 0.777303 21 1.72805V17.3383Z", fill: "#2C4375" }), index.h("path", { d: "M7.88867 19.0984V15.9057C7.88867 14.5952 8.94862 13.5353 10.2591 13.5353H17.0493C18.3598 13.5353 19.4197 14.6017 19.4197 15.9057V19.0984", fill: "white" }), index.h("path", { d: "M9.38546 9.78369C9.55891 9.19911 9.83513 8.72373 10.2141 8.34472C10.5932 7.97213 11.075 7.69589 11.6724 7.51602C12.2698 7.33615 12.9765 7.24622 13.8051 7.24622C14.4989 7.24622 15.1028 7.32973 15.6231 7.49675C16.1435 7.66377 16.5932 7.92716 16.985 8.2869C17.4411 8.71089 17.7495 9.20553 17.9101 9.76442C18.0707 10.3233 18.1542 11.0299 18.1542 11.8651V17.0428C18.1542 17.486 18.0514 17.8201 17.8523 18.0385C17.6467 18.2569 17.3833 18.3661 17.0557 18.3661C16.7281 18.3661 16.4647 18.2569 16.272 18.0385C16.0792 17.8201 15.9765 17.4925 15.9765 17.0428V11.7173C15.9765 10.7987 15.803 10.1113 15.4497 9.66163C15.0964 9.21196 14.4989 8.98069 13.6445 8.98069C13.0278 8.98069 12.5525 9.0899 12.2056 9.31474C11.8651 9.53958 11.6274 9.84793 11.4925 10.2526C11.3576 10.6574 11.2934 11.1584 11.2934 11.7559V17.0428C11.2934 17.4796 11.197 17.8137 10.9979 18.0321C10.7987 18.2505 10.5353 18.3597 10.1949 18.3597C9.87367 18.3597 9.6103 18.2505 9.41758 18.0321C9.21844 17.8137 9.12207 17.4796 9.12207 17.0428V11.8779C9.12207 11.0621 9.21201 10.3683 9.38546 9.78369Z", fill: "white" }), index.h("path", { d: "M13.169 0.648804L13.683 2.0942L15.3275 2.08778L13.9913 2.98071L14.5052 4.41968L13.169 3.52675L11.8457 4.41968L12.3532 2.98071L11.0234 2.08778L12.668 2.0942L13.169 0.648804Z", fill: "#F2CD23" }), index.h("path", { d: "M18.2893 1.59314L18.7968 3.03854L20.4413 3.03211L19.1116 3.91862L19.6191 5.35759L18.2893 4.46466L16.9595 5.35759L17.4735 3.91862L16.1309 3.03211L17.7882 3.03854L18.2893 1.59314Z", fill: "#F2CD23" }), index.h("path", { d: "M3.60369 14.833L4.11118 16.2784L5.75573 16.272L4.41954 17.1585L4.93346 18.5975L3.60369 17.7045L2.27392 18.5975L2.78784 17.1585L1.45166 16.272L3.09619 16.2784L3.60369 14.833Z", fill: "#F2CD23" }), index.h("path", { d: "M4.80536 5.51819L5.31284 6.96358L6.95739 6.95716L5.62763 7.84367L6.13512 9.28264L4.80536 8.38971L3.47559 9.28264L3.98308 7.84367L2.65332 6.95716L4.30428 6.96358L4.80536 5.51819Z", fill: "#F2CD23" }), index.h("path", { d: "M8.43483 2.07495L8.93591 3.52035L10.5869 3.51392L9.25068 4.40043L9.76459 5.83941L8.43483 4.94647L7.10507 5.83941L7.61256 4.40043L6.27637 3.51392L7.92733 3.52035L8.43483 2.07495Z", fill: "#F2CD23" }), index.h("path", { d: "M3.12176 10.3234L3.62925 11.7688L5.28021 11.7623L3.94402 12.6488L4.45152 14.0878L3.12176 13.1949L1.79198 14.0878L2.3059 12.6488L0.969727 11.7623L2.61426 11.7688L3.12176 10.3234Z", fill: "#F2CD23" })));
+  }
+};
+EidasLogo.style = indexCss;
+
+exports.utrecht_eidas_logo = EidasLogo;

package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
 
-const stencilCss = ".utrecht-form-field-checkbox{font-family:var(--utrecht-document-font-family, inherit)}.utrecht-form-field-checkbox--distanced{margin-block-start:var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));margin-block-end:var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end))}.utrecht-form-field-checkbox__label{margin-inline-start:1ch}.utrecht-form-label{font-weight:var(--utrecht-form-label-font-weight);font-size:var(--utrecht-form-label-font-size)}.utrecht-form-label--checkbox{font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--radio{font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}";
+const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}:host{display:block}:host([hidden]){display:none !important}";
 
 const FormFieldCheckbox = class {
   constructor(hostRef) {
@@ -16,18 +16,19 @@ const FormFieldCheckbox = class {
     this.utrechtInput = index.createEvent(this, "utrechtInput", 7);
     this.label = false;
     this.disabled = false;
-    this.readOnly = false;
     this.checked = false;
-    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.value = '';
   }
   render() {
-    const { checked, disabled, value } = this;
-    return (index.h("div", { class: "utrecht-form-field-checkbox" }, index.h("input", { id: "input", class: clsx_m.clsx("utrecht-checkbox"), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+    const { checked, disabled, invalid, required, value } = this;
+    return (index.h("div", { class: "utrecht-form-field utrecht-form-field--checkbox" }, index.h("input", { id: "input", class: clsx_m.clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, "aria-invalid": invalid ? 'true' : null, 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.checked = evt.target.checked;
         this.utrechtInput.emit(evt);
-      } }), index.h("label", { class: clsx_m.clsx("utrecht-form-field-checkbox__label", "utrecht-form-label", "utrecht-form-label--checkbox"), htmlFor: "input" }, index.h("slot", null))));
+      } }), index.h("label", { class: clsx_m.clsx('utrecht-form-field__label', 'utrecht-form-field__label--checkbox', 'utrecht-form-label', 'utrecht-form-label--checkbox'), htmlFor: "input" }, index.h("slot", null))));
   }
 };
-FormFieldCheckbox.style = stencilCss;
+FormFieldCheckbox.style = indexCss;
 
 exports.utrecht_form_field_checkbox = FormFieldCheckbox;

package/dist/cjs/utrecht-form-field-description.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
+
+const indexCss = ".utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
+
+const FormFieldDescription = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.status = null;
+  }
+  render() {
+    const { status } = this;
+    return (index.h("div", { class: clsx_m.clsx('utrecht-form-field-description', status === 'valid' && 'utrecht-form-field-description--valid', status === 'invalid' && 'utrecht-form-field-description--invalid') }, index.h("slot", null)));
+  }
+};
+FormFieldDescription.style = indexCss;
+
+exports.utrecht_form_field_description = FormFieldDescription;

package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
+
+const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));font-weight:initial;height:initial;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));resize:vertical;width:100%}.utrecht-textarea--invalid{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-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-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-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-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-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-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-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-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textarea--html-textarea:read-only{border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-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 FormFieldTextarea = 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.disabled = false;
+    this.invalid = false;
+    this.readOnly = false;
+    this.placeholder = '';
+    this.required = false;
+    this.value = '';
+  }
+  render() {
+    const { disabled, invalid, placeholder, readOnly, required, value } = this;
+    return (index.h("div", { class: "utrecht-form-field utrecht-form-field--textarea" }, index.h("textarea", { id: "input", class: clsx_m.clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, 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);
+      } }, value), index.h("label", { class: "utrecht-form-field-textarea__label utrecht-form-label", htmlFor: "input" }, index.h("slot", null))));
+  }
+};
+FormFieldTextarea.style = indexCss;
+
+exports.utrecht_form_field_textarea = FormFieldTextarea;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
 
-const stencilCss = ".utrecht-form-field-textbox{font-family:var(--utrecht-document-font-family, inherit)}.utrecht-form-label{font-weight:var(--utrecht-form-label-font-weight);font-size:var(--utrecht-form-label-font-size)}.utrecht-form-label--checkbox{font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--radio{font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-textbox{border-width:var(--utrecht-textbox-border-width);border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));border-color:var(--utrecht-textbox-border-color);border-radius:var(--utrecht-textbox-border-radius, 0);border-style:solid;color:var(--utrecht-textbox-color);font-family:var(--utrecht-textbox-font-family);font-size:var(--utrecht-textbox-font-size, 1em);max-width:var(--utrecht-textbox-max-width);padding-block-end:var(--utrecht-textbox-padding-block-end);padding-block-start:var(--utrecht-textbox-padding-block-start);padding-inline-end:var(--utrecht-textbox-padding-inline-end);padding-inline-start:var(--utrecht-textbox-padding-inline-start);box-sizing:border-box;width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{border-color:var(--utrecht-textbox-invalid-border-color);border-width:var(--utrecht-textbox-invalid-border-width)}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled{border-color:var(--utrecht-textbox-disabled-border-color);color:var(--utrecht-textbox-disabled-color)}.utrecht-textbox--focus,.utrecht-textbox--html-input: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)}.utrecht-textbox--read-only,.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color);color:var(--utrecht-textbox-read-only-color)}";
+const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.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));font-weight:initial;height:initial;line-height:initial;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, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));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{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.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))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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[pattern=\"\\\\d*\"],.utrecht-textbox--html-input[pattern=\"[0-9]*\"],.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 FormFieldTextbox = class {
   constructor(hostRef) {
@@ -14,20 +14,26 @@ const FormFieldTextbox = class {
     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.placeholder = "";
-    this.value = "";
+    this.required = false;
+    this.type = '';
+    this.value = '';
   }
   render() {
-    const { disabled, invalid, placeholder, readOnly, value } = this;
-    return (index.h("div", { class: "utrecht-form-field-textbox" }, index.h("input", { id: "input", class: clsx_m.clsx("utrecht-textbox", disabled && "utrecht-textbox--disabled", invalid && "utrecht-textbox--invalid", readOnly && "utrecht-textbox--readonly"), type: "text", disabled: disabled, placeholder: placeholder || null, readonly: readOnly, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+    return (index.h("div", { class: "utrecht-form-field-textbox utrecht-form-field--textbox" }, index.h("input", { id: "input", class: clsx_m.clsx('utrecht-form-field__input', '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);
-      } }), index.h("label", { class: "utrecht-form-field-textbox__label utrecht-form-label", htmlFor: "input" }, index.h("slot", null))));
+      } }), index.h("label", { class: "utrecht-form-field__label utrecht-form-label", htmlFor: "input" }, index.h("slot", null))));
   }
 };
-FormFieldTextbox.style = stencilCss;
+FormFieldTextbox.style = indexCss;
 
 exports.utrecht_form_field_textbox = FormFieldTextbox;

package/dist/cjs/utrecht-form-toggle.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
+
+const indexCss = ".utrecht-form-toggle{align-items:center;border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor);display:flex;height:var(--utrecht-form-toggle-height, 2em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;user-select:none;width:var(--utrecht-form-toggle-width, 6em)}.utrecht-form-toggle--focus,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus{border-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;height:100%;width:100%}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus~.utrecht-form-toggle__track{outline-color:var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));outline-style:var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));outline-width:var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px))}:host{display:inline-block}:host([hidden]){display:none !important}";
+
+const FormToggle = 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.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    const { checked, disabled } = this;
+    const toggleInteraction = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.utrechtInput.emit(this);
+        this.utrechtChange.emit(this);
+      }
+    };
+    const handleClick = () => {
+      toggleInteraction();
+    };
+    const handleKeyPress = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        // Do not scroll the page using Space when the toggle is focussed
+        evt.preventDefault();
+      }
+    };
+    const handleKeyUp = (evt) => {
+      if (evt.code === 'Space' || evt.key === ' ') {
+        toggleInteraction();
+      }
+    };
+    return (index.h("div", { class: clsx_m.clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, index.h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), index.h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), index.h("div", { class: clsx_m.clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, index.h("div", { class: clsx_m.clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+  }
+};
+FormToggle.style = indexCss;
+
+exports.utrecht_form_toggle = FormToggle;

package/dist/cjs/utrecht-heading-1.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
+const index = require('./index-893d96db.js');
 
-const bemCss = ".utrecht-heading-1{font-family:var(\n    --utrecht-heading-1-font-family,\n    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))\n  );font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);text-transform:var(--utrecht-heading-1-text-transform, inherit);color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-1--distanced{margin-block-start:var(--utrecht-heading-1-margin-block-start);margin-block-end:var(--utrecht-heading-1-margin-block-end)}";
+const indexCss = ".utrecht-heading-1{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 
 const Heading1 = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const Heading1 = class {
     return (index.h("h1", { class: "utrecht-heading-1" }, index.h("slot", null)));
   }
 };
-Heading1.style = bemCss;
+Heading1.style = indexCss;
 
 exports.utrecht_heading_1 = Heading1;

package/dist/cjs/utrecht-heading-2_3.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-893d96db.js');
+const clsx_m = require('./clsx.m-b21b5592.js');
+
+const indexCss$2 = ".utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size, revert);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+
+const Heading2 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("h2", { class: "utrecht-heading-2" }, index.h("slot", null)));
+  }
+};
+Heading2.style = indexCss$2;
+
+const indexCss$1 = ".utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size, revert);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+
+const Heading3 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("h3", { class: "utrecht-heading-3" }, index.h("slot", null)));
+  }
+};
+Heading3.style = indexCss$1;
+
+const indexCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0))}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph--small{color:var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph__small{font-size:inherit}.utrecht-paragraph--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+
+const Paragraph = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.lead = undefined;
+  }
+  render() {
+    return (index.h("div", { class: clsx_m.clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead') }, index.h("slot", null)));
+  }
+};
+Paragraph.style = indexCss;
+
+exports.utrecht_heading_2 = Heading2;
+exports.utrecht_heading_3 = Heading3;
+exports.utrecht_paragraph = Paragraph;

package/dist/cjs/utrecht-heading-4.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
+const index = require('./index-893d96db.js');
 
-const bemCss = ".utrecht-heading-4{font-family:var(\n    --utrecht-heading-4-font-family,\n    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))\n  );font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);text-transform:var(--utrecht-heading-4-text-transform, inherit);color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-4--distanced{margin-block-start:var(--utrecht-heading-4-margin-block-start);margin-block-end:var(--utrecht-heading-4-margin-block-end)}";
+const indexCss = ".utrecht-heading-4{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 
 const Heading4 = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const Heading4 = class {
     return (index.h("h4", { class: "utrecht-heading-4" }, index.h("slot", null)));
   }
 };
-Heading4.style = bemCss;
+Heading4.style = indexCss;
 
 exports.utrecht_heading_4 = Heading4;

package/dist/cjs/utrecht-heading-5.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
+const index = require('./index-893d96db.js');
 
-const bemCss = ".utrecht-heading-5{font-family:var(\n    --utrecht-heading-5-font-family,\n    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))\n  );font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);text-transform:var(--utrecht-heading-5-text-transform, inherit);color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-5--distanced{margin-block-start:var(--utrecht-heading-5-margin-block-start);margin-block-end:var(--utrecht-heading-5-margin-block-end)}";
+const indexCss = ".utrecht-heading-5{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 
 const Heading5 = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const Heading5 = class {
     return (index.h("h5", { class: "utrecht-heading-5" }, index.h("slot", null)));
   }
 };
-Heading5.style = bemCss;
+Heading5.style = indexCss;
 
 exports.utrecht_heading_5 = Heading5;

package/dist/cjs/utrecht-heading-6.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
+const index = require('./index-893d96db.js');
 
-const bemCss = ".utrecht-heading-6{font-family:var(\n    --utrecht-heading-6-font-family,\n    var(--utrecht-heading-font-family, var(--utrecht-document-font-family))\n  );font-size:var(--utrecht-heading-6-font-size);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);text-transform:var(--utrecht-heading-6-text-transform, inherit);color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-6--distanced{margin-block-start:var(--utrecht-heading-6-margin-block-start);margin-block-end:var(--utrecht-heading-6-margin-block-end)}";
+const indexCss = ".utrecht-heading-6{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-6-text-transform, inherit)}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 
 const Heading6 = class {
   constructor(hostRef) {
@@ -14,6 +14,6 @@ const Heading6 = class {
     return (index.h("h6", { class: "utrecht-heading-6" }, index.h("slot", null)));
   }
 };
-Heading6.style = bemCss;
+Heading6.style = indexCss;
 
 exports.utrecht_heading_6 = Heading6;

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-94a45638.js');
+const index = require('./index-893d96db.js');
 
-const stencilCss = ".utrecht-heading-1{font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);text-transform:var(--utrecht-heading-1-text-transform, inherit);color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-1--distanced{margin-block-start:var(--utrecht-heading-1-margin-block-start);margin-block-end:var(--utrecht-heading-1-margin-block-end)}.utrecht-heading-2{font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);text-transform:var(--utrecht-heading-2-text-transform, inherit);color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-2--distanced{margin-block-start:var(--utrecht-heading-2-margin-block-start);margin-block-end:var(--utrecht-heading-2-margin-block-end)}.utrecht-heading-3{font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);text-transform:var(--utrecht-heading-3-text-transform, inherit);color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-3--distanced{margin-block-start:var(--utrecht-heading-3-margin-block-start);margin-block-end:var(--utrecht-heading-3-margin-block-end)}.utrecht-heading-4{font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);text-transform:var(--utrecht-heading-4-text-transform, inherit);color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-4--distanced{margin-block-start:var(--utrecht-heading-4-margin-block-start);margin-block-end:var(--utrecht-heading-4-margin-block-end)}.utrecht-heading-5{font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);text-transform:var(--utrecht-heading-5-text-transform, inherit);color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-5--distanced{margin-block-start:var(--utrecht-heading-5-margin-block-start);margin-block-end:var(--utrecht-heading-5-margin-block-end)}.utrecht-heading-6{font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);text-transform:var(--utrecht-heading-6-text-transform, inherit);color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)))}.utrecht-heading-6--distanced{margin-block-start:var(--utrecht-heading-6-margin-block-start);margin-block-end:var(--utrecht-heading-6-margin-block-end)}";
+const indexCss = ".utrecht-heading-1{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced{--utrecht-space-around:1}.utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size, revert);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{--utrecht-space-around:1}.utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size, revert);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{--utrecht-space-around:1}.utrecht-heading-4{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced{--utrecht-space-around:1}.utrecht-heading-5{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced{--utrecht-space-around:1}.utrecht-heading-6{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid;text-transform:var(--utrecht-heading-6-text-transform, inherit)}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 
 const Heading = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.level = undefined;
   }
   render() {
     if (this.level === 1) {
@@ -34,6 +35,6 @@ const Heading = class {
     }
   }
 };
-Heading.style = stencilCss;
+Heading.style = indexCss;
 
 exports.utrecht_heading = Heading;