@utrecht/web-component-library-stencil 4.2.1 → 5.0.0

package/dist/components/utrecht-form-field-error-message.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const formFieldErrorMessageCss = ":host{--utrecht-document-color:currentColor;background-color:var(--utrecht-form-field-error-message-background-color);color:var(--utrecht-form-field-error-message-color);display:block;font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-error-message-font-size, inherit);font-style:var(--utrecht-form-field-error-message-font-style);line-height:var(--utrecht-form-field-error-message-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));padding-block-end:var(--utrecht-form-field-error-message-padding-block-end);padding-block-start:var(--utrecht-form-field-error-message-padding-block-start);padding-inline-end:var(--utrecht-form-field-error-message-padding-inline-end);padding-inline-start:var(--utrecht-form-field-error-message-padding-inline-start)}:host>*{--utrecht-space-around:1}:host([hidden]){display:none !important}";
 const UtrechtFormFieldErrorMessageStyle0 = formFieldErrorMessageCss;
@@ -10,7 +10,7 @@ const FormFieldErrorMessage = /*@__PURE__*/ proxyCustomElement(class FormFieldEr
         this.__attachShadow();
     }
     render() {
-        return h("slot", { key: '7642cbacd380b3e3a0c10cc9164cd421d607118a' });
+        return h("slot", { key: '45474034e4500e93ea12e5e01dbece3c9d0b3d2b' });
     }
     static get style() { return UtrechtFormFieldErrorMessageStyle0; }
 }, [1, "utrecht-form-field-error-message"]);

package/dist/components/utrecht-form-field-textarea.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-169bb78d.js';
 import { c as clsx } from './p-e91d8a25.js';
-import { d as defineCustomElement$2 } from './p-ab1c7a3f.js';
+import { d as defineCustomElement$2 } from './p-24159a0e.js';
 
-const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;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))}.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, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-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 error-message\";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{margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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-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);line-height:var(--utrecht-form-field-description-line-height);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))}.utrecht-textarea{border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));min-inline-size:var(--utrecht-pointer-target-min-size, 44px);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-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);z-index:1}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-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);z-index:1}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
+const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;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))}.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, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-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 error-message\";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{margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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-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);line-height:var(--utrecht-form-field-description-line-height);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))}.utrecht-textarea{border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));min-inline-size:var(--utrecht-pointer-target-min-size, 44px);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--hover{background-color:var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-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);z-index:1}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:hover{background-color:var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-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);z-index:1}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
 const UtrechtFormFieldTextareaStyle0 = formFieldTextareaCss;
 
 const HTML_DEFAULT_COLS = 20;
@@ -42,14 +42,14 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
             input.name = name;
             input.value = value || '';
         }
-        return (h("div", { key: 'cec777de54ce322910d51996873422fbbdca96ca', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
+        return (h("div", { key: 'cc89a3e806f0126dab39992579b65eba92cfbad6', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
                 'utrecht-form-field--invalid': invalid,
-            }) }, h("p", { key: 'a3d6405682b62db03c9b199e0e61b746c47ed9f3', class: "utrecht-form-field__label" }, h("label", { key: 'a07ac189672740a83a793a098164f69ea42dcd4a', class: clsx('utrecht-form-label', {
+            }) }, h("p", { key: 'b98077e6b751afc9549922e2ee6ff356349eef6a', class: "utrecht-form-field__label" }, h("label", { key: '6d906aa6c1eb5474739ec6c61922245da8f6196f', class: clsx('utrecht-form-label', {
                 'utrecht-form-label--disabled': disabled,
-            }), htmlFor: "input" }, label, h("slot", { key: '428b90a47576af81a35ae8d66b6fead6e9901f60', name: "label" }))), h("utrecht-form-field-description", { key: '64a99f6b92e22f7a603ae51fbbfd07928844ef34', id: "description" }, h("slot", { key: 'b13960601fd3d3d9dd6d9cfed6db7d31504c8220', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'bc9701b6db720c1b233b86de6693f0c55f1cc08f', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '9f1fac2834ba2bb1bc6a0012b41d05293d7a0417', name: "error-message" }))), h("p", { key: 'e44c3e6317d0fcf562088403c301443c71893fec', class: "utrecht-form-field__input" }, h("textarea", { key: '39cfc14c30125954f77312c4b229780cf89fa5b8', id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+            }), htmlFor: "input" }, label, h("slot", { key: '53cefaed8754f31df374d821881d8de585a9bc80', name: "label" }))), h("utrecht-form-field-description", { key: '1dccc2a7a1e2a6fb586d8b7921253a36be6b41db', id: "description" }, h("slot", { key: '0eeecf31325e0c2831120ec5d99a8afffba4762f', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'c29d0e549d51652f555e9cd9d1b0322ef3112315', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '8e89f37d4c9c09edf5a62110acf3b8412d2994d1', name: "error-message" }))), h("p", { key: 'f63bd6c1cfab77d2d313c1f95a31e13fc669f2bc', class: "utrecht-form-field__input" }, h("textarea", { key: '81b71af1a7ab0ba273d209842d10cfb27e4dce1b', id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, 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)), h("div", { key: '9ba58f2acefdbaaaa776a3b243ba120df6819044', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'ea134ff87175685e16b444f4229262efc555ddde', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '4eeb7d0d33c6d51288cbcb334e5b0642789dabab', name: "status" })))));
+            } }, value)), h("div", { key: '3ca186aab0fda22436a48686ea7486b096df1184', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'acf126f2e431ab72f75dbe797ee84841a20ac4df', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '36ea4bd43b28f77fecdf852864ce5aec35f8b07d', name: "status" })))));
     }
     get hostElement() { return this; }
     static get style() { return UtrechtFormFieldTextareaStyle0; }

package/dist/components/utrecht-form-field-textarea.js.map

@@ -1 +1 @@
-{"file":"utrecht-form-field-textarea.js","mappings":"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","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/form-field-css/src\" as *;\n@use \"~@utrecht/form-label-css/src\" as *;\n@use \"~@utrecht/form-field-description-css/src\" as *;\n@use \"~@utrecht/textarea-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-form-field-textarea',\n  styleUrl: 'form-field-textarea.scss',\n  shadow: true,\n})\nexport class FormFieldTextarea {\n  @Element() hostElement!: HTMLElement;\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() name: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <p class=\"utrecht-form-field__input\">\n          <textarea\n            id=\"input\"\n            class={clsx(\n              'utrecht-textarea',\n              'utrecht-textarea--html-textarea',\n              disabled && 'utrecht-textarea--disabled',\n              invalid && 'utrecht-textarea--invalid',\n              readOnly && 'utrecht-textarea--readonly',\n            )}\n            aria-invalid={invalid}\n            cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n            disabled={disabled}\n            dir=\"auto\"\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\n            onBlur={(evt) => this.utrechtBlur.emit(evt)}\n            onChange={(evt) => this.utrechtChange.emit(evt)}\n            onFocus={(evt) => this.utrechtFocus.emit(evt)}\n            onInput={(evt) => {\n              this.value = (evt.target as HTMLTextAreaElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          >\n            {value}\n          </textarea>\n        </p>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-field-textarea.js","mappings":"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","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/form-field-css/src\" as *;\n@use \"~@utrecht/form-label-css/src\" as *;\n@use \"~@utrecht/form-field-description-css/src\" as *;\n@use \"~@utrecht/textarea-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-form-field-textarea',\n  styleUrl: 'form-field-textarea.scss',\n  shadow: true,\n})\nexport class FormFieldTextarea {\n  @Element() hostElement!: HTMLElement;\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() name: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <p class=\"utrecht-form-field__input\">\n          <textarea\n            id=\"input\"\n            class={clsx(\n              'utrecht-textarea',\n              'utrecht-textarea--html-textarea',\n              disabled && 'utrecht-textarea--disabled',\n              invalid && 'utrecht-textarea--invalid',\n              readOnly && 'utrecht-textarea--readonly',\n            )}\n            aria-invalid={invalid}\n            cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n            disabled={disabled}\n            dir=\"auto\"\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\n            onBlur={(evt) => this.utrechtBlur.emit(evt)}\n            onChange={(evt) => this.utrechtChange.emit(evt)}\n            onFocus={(evt) => this.utrechtFocus.emit(evt)}\n            onInput={(evt) => {\n              this.value = (evt.target as HTMLTextAreaElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          >\n            {value}\n          </textarea>\n        </p>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-textbox.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-169bb78d.js';
 import { c as clsx } from './p-e91d8a25.js';
-import { d as defineCustomElement$2 } from './p-ab1c7a3f.js';
+import { d as defineCustomElement$2 } from './p-24159a0e.js';
 
-const formFieldTextboxCss = ".utrecht-form-field{break-inside:avoid;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))}.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, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-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 error-message\";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{margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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-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);line-height:var(--utrecht-form-field-description-line-height);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))}.utrecht-textbox{--_utrecht-textbox-value-char:0.667em + 0.334ch;--_utrecht-textbox-max-inline-size:calc(\n    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +\n      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +\n      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +\n      var(--utrecht-textbox-autocomplete-ui-size, 44px)\n  );max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));min-block-size:var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));min-inline-size:var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));--_utrecht-textbox-border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));--_utrecht-textbox-border-block-end-width:var(\n    --utrecht-textbox-border-bottom-width,\n    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n  );border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--_utrecht-textbox-border-block-end-width);box-sizing:border-box;background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));--_utrecht-textbox-padding-block-end:var(\n    --utrecht-textbox-padding-block-end,\n    var(--utrecht-form-control-padding-block-end, 0)\n  );--_utrecht-textbox-padding-block-start:var(\n    --utrecht-textbox-padding-block-start,\n    var(--utrecht-form-control-padding-block-start, 0)\n  );block-size:initial;display:block;font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));overflow:hidden;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, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));white-space:nowrap}.utrecht-textbox--invalid{--_utrecht-textbox-border-width:var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-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);z-index:1}.utrecht-textbox--read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-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--postal-code-nl-size{--utrecht-textbox-value-max-length:7}.utrecht-textbox--house-number-size{--utrecht-textbox-value-max-length:5}.utrecht-textbox--house-letter-size{--utrecht-textbox-value-max-length:1}.utrecht-textbox--house-addition-size{--utrecht-textbox-value-max-length:4}.utrecht-textbox--voorvoegsel-size{--utrecht-textbox-value-max-length:10}.utrecht-textbox--tel-size{--utrecht-textbox-value-max-length:19}.utrecht-textbox--tel-nl-size{--utrecht-textbox-value-max-length:13}.utrecht-textbox--iban-size{--utrecht-textbox-value-max-length:41}.utrecht-textbox--iban-nl-size{--utrecht-textbox-value-max-length:22}.utrecht-textbox--placeholder-ltr::placeholder,.utrecht-textbox--placeholder-ltr:placeholder-shown{direction:ltr}.utrecht-textbox--placeholder-rtl::placeholder,.utrecht-textbox--placeholder-rtl:placeholder-shown{direction:rtl}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input: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);z-index:1}.utrecht-textbox--html-input:user-invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_utrecht-textbox-border-width:var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-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 formFieldTextboxCss = ".utrecht-form-field{break-inside:avoid;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))}.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, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-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 error-message\";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{margin-block-end:0;margin-block-start:0;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:error-message;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-field__error-message{grid-area:error-message;order:3}.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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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-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);line-height:var(--utrecht-form-field-description-line-height);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))}.utrecht-textbox{--_utrecht-textbox-value-char:0.667em + 0.334ch;--_utrecht-textbox-max-inline-size:calc(\n    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +\n      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +\n      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +\n      var(--utrecht-textbox-autocomplete-ui-size, 44px)\n  );max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));min-block-size:var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));min-inline-size:var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));--_utrecht-textbox-border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));--_utrecht-textbox-border-block-end-width:var(\n    --utrecht-textbox-border-bottom-width,\n    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n  );border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--_utrecht-textbox-border-block-end-width);box-sizing:border-box;background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));--_utrecht-textbox-padding-block-end:var(\n    --utrecht-textbox-padding-block-end,\n    var(--utrecht-form-control-padding-block-end, 0)\n  );--_utrecht-textbox-padding-block-start:var(\n    --utrecht-textbox-padding-block-start,\n    var(--utrecht-form-control-padding-block-start, 0)\n  );block-size:initial;display:block;font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));overflow:hidden;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, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));white-space:nowrap}.utrecht-textbox--invalid{--_utrecht-textbox-border-width:var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--hover{background-color:var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-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);z-index:1}.utrecht-textbox--read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-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--postal-code-nl-size{--utrecht-textbox-value-max-length:7}.utrecht-textbox--house-number-size{--utrecht-textbox-value-max-length:5}.utrecht-textbox--house-letter-size{--utrecht-textbox-value-max-length:1}.utrecht-textbox--house-addition-size{--utrecht-textbox-value-max-length:4}.utrecht-textbox--voorvoegsel-size{--utrecht-textbox-value-max-length:10}.utrecht-textbox--tel-size{--utrecht-textbox-value-max-length:19}.utrecht-textbox--tel-nl-size{--utrecht-textbox-value-max-length:13}.utrecht-textbox--iban-size{--utrecht-textbox-value-max-length:41}.utrecht-textbox--iban-nl-size{--utrecht-textbox-value-max-length:22}.utrecht-textbox--placeholder-ltr::placeholder,.utrecht-textbox--placeholder-ltr:placeholder-shown{direction:ltr}.utrecht-textbox--placeholder-rtl::placeholder,.utrecht-textbox--placeholder-rtl:placeholder-shown{direction:rtl}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:hover{background-color:var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input: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);z-index:1}.utrecht-textbox--html-input:user-invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_utrecht-textbox-border-width:var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input{}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-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 UtrechtFormFieldTextboxStyle0 = formFieldTextboxCss;
 
 const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox extends H {
@@ -44,14 +44,14 @@ const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox
             input.name = name;
             input.value = value || '';
         }
-        return (h("div", { key: 'c090a869092abec0630e756ee19fcd30e335d2c8', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
+        return (h("div", { key: 'e00111eb74f0123fd1e1b43fde8f66e0a120bd42', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
                 'utrecht-form-field--invalid': invalid,
-            }) }, h("p", { key: 'f274897a079478facb3acacb371ba3332f60e7dc', class: "utrecht-form-field__label" }, h("label", { key: 'f68cfd0cc55585dae91bce92a13de711430961a9', class: clsx('utrecht-form-label', {
+            }) }, h("p", { key: 'aea77d7fd575fe8385abbe4a22eba4b76183bb47', class: "utrecht-form-field__label" }, h("label", { key: '9bd86f30bd08e17365179ab879f1f75ea96f098f', class: clsx('utrecht-form-label', {
                 'utrecht-form-label--disabled': disabled,
-            }), htmlFor: "input" }, label, h("slot", { key: '08aa7d40ef4d2c3b1b677fb520592a4d0af5529f', name: "label" }))), h("utrecht-form-field-description", { key: '08ab3afb09b3163d2ea8a48a8c7a13f2458b6582', id: "description" }, h("slot", { key: '60338c41dc3ce7856346a22bf0e09d252a5efbdc', name: "description" })), invalid && (h("utrecht-form-field-description", { key: '3570c86b8c3ba92dd7fbb9f32d0121b04911d17a', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '6e2ac0a358e860556a368cff07d1687765538c2b', name: "error-message" }))), h("p", { key: 'f8dea2c3a9b9ac8611c9276f18623e89cb36b1f8', class: "utrecht-form-field__input" }, h("input", { key: '587a0be0dec1c9de86234e2b1f6898b6d9406843', id: "input", class: 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, "aria-describedby": clsx('description', 'status', { 'error-message': invalid }), "aria-invalid": invalid, dir: "auto", disabled: disabled, min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? 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) => {
+            }), htmlFor: "input" }, label, h("slot", { key: 'd5098253ba6fe5958b5021ab509c7061ecad1530', name: "label" }))), h("utrecht-form-field-description", { key: 'f809b4617a9a52aca3d71412630db45c342d68f7', id: "description" }, h("slot", { key: '203d1a706b4b547b04aefdbe492499b38b030775', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'f434676728e1fea524192c2d88f1153ea634f8f3', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '580833d196c8ea104b46d060d55a62e3d5dc332d', name: "error-message" }))), h("p", { key: '9f91f62f316e0eb04dd3df8627ddd2a3b9389a15', class: "utrecht-form-field__input" }, h("input", { key: '82c8d2f3f50188d01cb068505a876b5513cfb525', id: "input", class: 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, "aria-describedby": clsx('description', 'status', { 'error-message': invalid }), "aria-invalid": invalid, dir: "auto", disabled: disabled, min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? 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);
-            } })), h("div", { key: 'd2dcb3f4dd9b36ccf1537f451e0a87e7bbf701d9', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'bf895ff5118e0ed6f9390ab1f8664df1484fa9a3', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '50f0129c9ef48476bbd69549ae017012ca05023e', name: "status" })))));
+            } })), h("div", { key: '18451038af1c6195db94fab218f1d820a3c10dbe', class: "utrecht-form-field__status", id: "status" }, h("div", { key: '80771aac9efbff002b86611ce820a8ba1e4a2cd9', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '257733c223b4019cbb0b340995816694f97697cd', name: "status" })))));
     }
     get hostElement() { return this; }
     static get style() { return UtrechtFormFieldTextboxStyle0; }

package/dist/components/utrecht-form-field-textbox.js.map

@@ -1 +1 @@
-{"file":"utrecht-form-field-textbox.js","mappings":"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","names":[],"sources":["src/components/form-field-textbox.scss?tag=utrecht-form-field-textbox&encapsulation=shadow","src/components/form-field-textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/form-field-css/src\" as *;\n@use \"~@utrecht/form-label-css/src\" as *;\n@use \"~@utrecht/form-field-description-css/src\" as *;\n@use \"~@utrecht/textbox-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-textbox',\n  styleUrl: 'form-field-textbox.scss',\n  shadow: true,\n})\nexport class FormFieldTextbox {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() min: number | string = '';\n  @Prop() max: number | string = '';\n  @Prop() name: string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const {\n      autoComplete,\n      disabled,\n      hostElement,\n      invalid,\n      label,\n      min,\n      max,\n      name,\n      pattern,\n      placeholder,\n      readOnly,\n      required,\n      type,\n      value,\n    } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      input.ariaHidden = 'true';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <p class=\"utrecht-form-field__input\">\n          <input\n            id=\"input\"\n            class={clsx(\n              'utrecht-form-field__input',\n              'utrecht-textbox',\n              'utrecht-textbox--html-input',\n              disabled && 'utrecht-textbox--disabled',\n              invalid && 'utrecht-textbox--invalid',\n              readOnly && 'utrecht-textbox--readonly',\n            )}\n            type={type || 'text'}\n            autoComplete={autoComplete ? autoComplete : null}\n            aria-describedby={clsx('description', 'status', { 'error-message': invalid })}\n            aria-invalid={invalid}\n            dir=\"auto\"\n            disabled={disabled}\n            min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n            max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n            pattern={pattern ? pattern : null}\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            value={value}\n            onBlur={(evt) => this.utrechtBlur.emit(evt)}\n            onChange={(evt) => this.utrechtChange.emit(evt)}\n            onFocus={(evt) => this.utrechtFocus.emit(evt)}\n            onInput={(evt) => {\n              this.value = (evt.target as HTMLInputElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          />\n        </p>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-field-textbox.js","mappings":"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","names":[],"sources":["src/components/form-field-textbox.scss?tag=utrecht-form-field-textbox&encapsulation=shadow","src/components/form-field-textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/form-field-css/src\" as *;\n@use \"~@utrecht/form-label-css/src\" as *;\n@use \"~@utrecht/form-field-description-css/src\" as *;\n@use \"~@utrecht/textbox-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-textbox',\n  styleUrl: 'form-field-textbox.scss',\n  shadow: true,\n})\nexport class FormFieldTextbox {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() min: number | string = '';\n  @Prop() max: number | string = '';\n  @Prop() name: string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const {\n      autoComplete,\n      disabled,\n      hostElement,\n      invalid,\n      label,\n      min,\n      max,\n      name,\n      pattern,\n      placeholder,\n      readOnly,\n      required,\n      type,\n      value,\n    } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      input.ariaHidden = 'true';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <p class=\"utrecht-form-field__input\">\n          <input\n            id=\"input\"\n            class={clsx(\n              'utrecht-form-field__input',\n              'utrecht-textbox',\n              'utrecht-textbox--html-input',\n              disabled && 'utrecht-textbox--disabled',\n              invalid && 'utrecht-textbox--invalid',\n              readOnly && 'utrecht-textbox--readonly',\n            )}\n            type={type || 'text'}\n            autoComplete={autoComplete ? autoComplete : null}\n            aria-describedby={clsx('description', 'status', { 'error-message': invalid })}\n            aria-invalid={invalid}\n            dir=\"auto\"\n            disabled={disabled}\n            min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n            max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n            pattern={pattern ? pattern : null}\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            value={value}\n            onBlur={(evt) => this.utrechtBlur.emit(evt)}\n            onChange={(evt) => this.utrechtChange.emit(evt)}\n            onFocus={(evt) => this.utrechtFocus.emit(evt)}\n            onInput={(evt) => {\n              this.value = (evt.target as HTMLInputElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          />\n        </p>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-toggle.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-169bb78d.js';
 import { c as clsx } from './p-e91d8a25.js';
 
 const formToggleCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);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, revert);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);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;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div: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);z-index:1}.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,.utrecht-form-toggle--html-div: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, not-allowed)}.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);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.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-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle__track--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);z-index:1}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border-width:0 !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_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);z-index:1}:host{display:inline-block}:host([hidden]){display:none !important}";
@@ -39,7 +39,7 @@ const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends H {
                 toggleInteraction();
             }
         };
-        return (h("div", { key: 'be20682f616eb7b0d14a213f46612a8a09292e2e', class: 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 }, h("div", { key: 'a39f6ea33b38051b0cc321a85d830839d8f526db', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: '2a817a7018427997e3ec410076aa58ac27f1b93e', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: '9db9333631a9392b5af650bd40febc6d559e80a9', class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { key: 'd468c947a90b4aec924c658b8d36f84f8eb27bc7', class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+        return (h("div", { key: 'f6bb6fa60275603672878e233e330044a9931f79', class: 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 }, h("div", { key: '54079822b3b2a3c737e33fd1fd18debc891c36d3', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: '691b78027c6d1950880d08930cbef0654f1c5720', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: '732881a040e0c7596ed4009a2eaeef934ed77c52', class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { key: '9f0334e78c30c75b3036286b0884ac3e7142c6e3', class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
     }
     static get style() { return UtrechtFormToggleStyle0; }
 }, [1, "utrecht-form-toggle", {

package/dist/components/utrecht-form.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const formCss = ":host{display:block;max-inline-size:var(--utrecht-form-max-inline-size)}.utrecht-form__heading:empty{display:none}:host([hidden]){display:none !important}";
 const UtrechtFormStyle0 = formCss;

package/dist/components/utrecht-heading-1.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const heading1Css = ":host{display:contents}:host([hidden]){display:none !important}h1{break-after:avoid;break-inside:avoid-column;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));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))}";
 const UtrechtHeading1Style0 = heading1Css;
@@ -10,7 +10,7 @@ const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("h1", { key: 'ae6d99911311d4fc6869e824c4b9b8ad6dcb26ad' }, h("slot", { key: 'db98c3b498bbc84bf2354e6a4cc8e01d80a0e422' })));
+        return (h("h1", { key: '6e1fa993eded47d11d23547767786493a5de8074' }, h("slot", { key: 'aba77ea7dda4ed418399c50b609ae5831f6fc7c5' })));
     }
     static get style() { return UtrechtHeading1Style0; }
 }, [1, "utrecht-heading-1"]);

package/dist/components/utrecht-heading-2.js

@@ -1,4 +1,32 @@
-import { H as Heading2, d as defineCustomElement$1 } from './p-4e89b8e9.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
+
+const heading2Css = ":host{display:contents}:host([hidden]){display:none !important}h2{break-after:avoid;break-inside:avoid-column;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));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))}";
+const UtrechtHeading2Style0 = heading2Css;
+
+const Heading2 = /*@__PURE__*/ proxyCustomElement(class Heading2 extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("h2", { key: 'a60177d9791096b3d4bc3668a7c69e1d648f421d' }, h("slot", { key: 'd21bf0231ebb0844a622b5227223c72d32c2d9fa' })));
+    }
+    static get style() { return UtrechtHeading2Style0; }
+}, [1, "utrecht-heading-2"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["utrecht-heading-2"];
+    components.forEach(tagName => { switch (tagName) {
+        case "utrecht-heading-2":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Heading2);
+            }
+            break;
+    } });
+}
 
 const UtrechtHeading2 = Heading2;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/utrecht-heading-2.js.map

@@ -1 +1 @@
-{"file":"utrecht-heading-2.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"utrecht-heading-2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uvBAAuvB,CAAC;AAC5wB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-2.scss?tag=utrecht-heading-2&encapsulation=shadow","src/components/heading-2.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/heading-2-css/src/mixin\" as *;\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh2 {\n  @include utrecht-heading-2;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-2',\n  styleUrl: 'heading-2.scss',\n  shadow: true,\n})\nexport class Heading2 {\n  render() {\n    return (\n      <h2>\n        <slot></slot>\n      </h2>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-heading-3.js

@@ -1,4 +1,32 @@
-import { H as Heading3, d as defineCustomElement$1 } from './p-2d036b48.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
+
+const heading3Css = ":host{display:contents}:host([hidden]){display:none !important}h3{break-after:avoid;break-inside:avoid-column;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));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))}";
+const UtrechtHeading3Style0 = heading3Css;
+
+const Heading3 = /*@__PURE__*/ proxyCustomElement(class Heading3 extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("h3", { key: 'd4feaf0eb7568f37ca325ac95a4475d16837a111' }, h("slot", { key: '56db9352e892828eb85f1c6d8a06fe6d66f28da5' })));
+    }
+    static get style() { return UtrechtHeading3Style0; }
+}, [1, "utrecht-heading-3"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["utrecht-heading-3"];
+    components.forEach(tagName => { switch (tagName) {
+        case "utrecht-heading-3":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Heading3);
+            }
+            break;
+    } });
+}
 
 const UtrechtHeading3 = Heading3;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/utrecht-heading-3.js.map

@@ -1 +1 @@
-{"file":"utrecht-heading-3.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"utrecht-heading-3.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uvBAAuvB,CAAC;AAC5wB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-3.scss?tag=utrecht-heading-3&encapsulation=shadow","src/components/heading-3.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/heading-3-css/src/mixin\" as *;\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh3 {\n  @include utrecht-heading-3;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-3',\n  styleUrl: 'heading-3.scss',\n  shadow: true,\n})\nexport class Heading3 {\n  render() {\n    return (\n      <h3>\n        <slot></slot>\n      </h3>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-heading-4.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const heading4Css = ":host{display:contents}:host([hidden]){display:none !important}h4{break-after:avoid;break-inside:avoid-column;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));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))}";
 const UtrechtHeading4Style0 = heading4Css;
@@ -10,7 +10,7 @@ const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("h4", { key: '49fafa5e86bacd0e46af5489d31da621facd5b3c' }, h("slot", { key: '14b0baa49df2ce65542b1ae0163f885579b720d1' })));
+        return (h("h4", { key: '62eacd3ca9a52488c47356d4274f321c487f8c73' }, h("slot", { key: '26472819ba58c580bbd61fbdcf98973708c19cc6' })));
     }
     static get style() { return UtrechtHeading4Style0; }
 }, [1, "utrecht-heading-4"]);

package/dist/components/utrecht-heading-5.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const heading5Css = ":host{display:contents}:host([hidden]){display:none !important}h5{break-after:avoid;break-inside:avoid-column;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));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))}";
 const UtrechtHeading5Style0 = heading5Css;
@@ -10,7 +10,7 @@ const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("h5", { key: '6876dec17145da2b2082a87e4f82f73cb9f2fb2c' }, h("slot", { key: '1f058e31a9566bc4f079920982375a42b3d01bfb' })));
+        return (h("h5", { key: '30bf0309a22d4580e4d2f035d96a85b0fd7aed7a' }, h("slot", { key: 'ae2b518e72b3a1179baca0fa6be63736df7576ef' })));
     }
     static get style() { return UtrechtHeading5Style0; }
 }, [1, "utrecht-heading-5"]);

package/dist/components/utrecht-heading-6.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const heading6Css = ":host{display:contents}:host([hidden]){display:none !important}h6{break-after:avoid;break-inside:avoid-column;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));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))}";
 const UtrechtHeading6Style0 = heading6Css;
@@ -10,7 +10,7 @@ const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("h6", { key: '8f433c64df8f80b06a1f887f026fdee236c3ef63' }, h("slot", { key: '4ccf77b8d7c571d1092caa8eb71de18710a5d848' })));
+        return (h("h6", { key: '726e8e7e00a512a36e8ff7b3b12041e7f0d7adcf' }, h("slot", { key: 'eda19a74c755dd3e2f61f849a6542d61c2d44acb' })));
     }
     static get style() { return UtrechtHeading6Style0; }
 }, [1, "utrecht-heading-6"]);

package/dist/components/utrecht-heading-group.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const headingGroupCss = ":host{display:contents}hgroup{--utrecht-pre-heading-order:-1;display:flex;flex-direction:column;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0))}hgroup>*{--utrecht-space-around:0}:host([hidden]){display:none !important}";
 const UtrechtHeadingGroupStyle0 = headingGroupCss;
@@ -10,7 +10,7 @@ const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends
         this.__attachShadow();
     }
     render() {
-        return (h("hgroup", { key: '4e8b6db926485544976a6a8cc2ddf7de20946d1d' }, h("slot", { key: '94272c82ab0a0fba056c22fb396fedf897f0a0c9' })));
+        return (h("hgroup", { key: '597c3753d1a441fc116bcf2b73cd550454ff7cc7' }, h("slot", { key: '3c6d87434085aeaddf5bee22a060c8b8ffba28c5' })));
     }
     static get style() { return UtrechtHeadingGroupStyle0; }
 }, [1, "utrecht-heading-group"]);

package/dist/components/utrecht-heading.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { p as proxyCustomElement, H, h } from './p-169bb78d.js';
 
 const headingCss = ".utrecht-heading-1{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-1--distanced{--utrecht-space-around:1}.utrecht-heading-2{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-2--distanced{--utrecht-space-around:1}.utrecht-heading-3{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-3--distanced{--utrecht-space-around:1}.utrecht-heading-4{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-4--distanced{--utrecht-space-around:1}.utrecht-heading-5{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-5--distanced{--utrecht-space-around:1}.utrecht-heading-6{break-after:avoid;break-inside:avoid-column;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));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))}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 const UtrechtHeadingStyle0 = headingCss;