npm - @utrecht/web-component-library-stencil - Versions diffs - 2.1.0 → 3.0.0 - Mend

@utrecht/web-component-library-stencil 2.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3019) hide show

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as clsx } from './clsx.js';
 import { d as defineCustomElement$2 } from './form-field-description.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));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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 description-invalid\";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 description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{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:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{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  );background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));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;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));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));min-block-size:var(--utrecht-pointer-target-min-size, 44px);min-inline-size:var(--utrecht-pointer-target-min-size, 44px);max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));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))}.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  );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))));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)))));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))));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)}.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: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-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_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  );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))));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)))));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))));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: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: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));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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  );background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));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;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));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));min-block-size:var(--utrecht-pointer-target-min-size, 44px);min-inline-size:var(--utrecht-pointer-target-min-size, 44px);max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));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))}.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  );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))));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)))));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))));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{}.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: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  );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))));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)))));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))));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: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: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 HTMLElement {
@@ -44,14 +44,14 @@ const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox
             input.name = name;
             input.value = value || '';
         }
-        return (h("div", { key: 'c4f39b3b8b682585046f850eae20fd31e6b0820d', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
+        return (h("div", { key: 'e9cb00b9e653f6a29ef2f128289234d3c965a0df', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
                 'utrecht-form-field--invalid': invalid,
-            }) }, h("p", { key: 'd5debf9f5a06f90a2042c2156a0697b3ed627ee5', class: "utrecht-form-field__label" }, h("label", { key: '811c31089322c6f07cffce0e02b002b10828eeb2', class: clsx('utrecht-form-label', {
+            }) }, h("p", { key: 'c208aa999af784794f3ea1681a2da9568811632a', class: "utrecht-form-field__label" }, h("label", { key: '5c11a65bb000ecc3170c2ef256cfb7bcb11b22bc', class: clsx('utrecht-form-label', {
                 'utrecht-form-label--disabled': disabled,
-            }), htmlFor: "input" }, label, h("slot", { key: '0ea139a16de187e5bc85b74d17d7d3c0b301299a', name: "label" }))), h("utrecht-form-field-description", { key: '78cf041e821ebefb84f5f49e0b846b44cb994179', id: "description" }, h("slot", { key: 'f31a1c8a0953c4b2ea28f37254ac21648021d0fe', name: "description" })), invalid && (h("utrecht-form-field-description", { key: '3f97c7b77dd49557c52b960a23b3d90ff0d6c6e8', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: 'fd5d9f16054b74ae63911a935c2295b535084b1d', name: "error-message" }))), h("p", { key: 'a95ce97223f49034b56e17b118d963a768c10e89', class: "utrecht-form-field__input" }, h("input", { key: 'fea085805316cbd81b5e68941a32bc7ddee4d46d', 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: '78a552675351e2aee44ca08ad57d03cf38ffefe2', name: "label" }))), h("utrecht-form-field-description", { key: 'cea5b31b3e2e59d5ab6fdb2cfa707af7dc393c68', id: "description" }, h("slot", { key: '96a9f15cd6ba6b2c65dfbbeee365df86d3d926a4', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'c507621e8483d8865aa514bc45c434f61b7fbfe7', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: 'fcae39db5748f81b8ff5e864732942d00c17d390', name: "error-message" }))), h("p", { key: 'aeae8e40e523872e01d2e0e696638a3f1b772e2a', class: "utrecht-form-field__input" }, h("input", { key: '0d244ad6f672fc711ac7473106ac89a1913bbd4a', 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: '6a708da2bbe6b721dcc9354f203aaebe4d044cdd', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'd4ecd27951570a89c652729adad3d5733078bfb7', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: 'b8da5c1fcd60158a6e72d8040d3db43dda0e9ed5', name: "status" })))));
+            } })), h("div", { key: 'a66bf9644c67cefad3a320fa9a748b651377d713', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'f3fdc3c3835d4281f7ddbad7107524aae85d3838', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: 'e579bc13bb6539395759a9d439a77bbcb3e6dd83', name: "status" })))));
     }
     get hostElement() { return this; }
     static get style() { return UtrechtFormFieldTextboxStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"utrecht-form-field-textbox.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG~~,+ugBAA+ugB~~,CAAC;~~AAC5wgB~~,sCAAe,mBAAmB;;~~MCYrB~~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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) 2021 ~~Robbert~~ ~~Broersma~~\n /\n\n@import \"~@utrecht/form-field-css/src\";\n@import \"~@utrecht/form-label-css/src\";\n@import \"~@utrecht/form-field-description-css/src\";\n@import \"~@utrecht/textbox-css/src\";\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) 2021 ~~Robbert~~ ~~Broersma~~\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}
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@import \"~@utrecht/form-field-css/src\";\n@import \"~@utrecht/form-label-css/src\";\n@import \"~@utrecht/form-field-description-css/src\";\n@import \"~@utrecht/textbox-css/src\";\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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.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)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div: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)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !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)}:host{display:inline-block}:host([hidden]){display:none !important}";
+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):not(.utrecht-form-toggle--html-div: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:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !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}";
 const UtrechtFormToggleStyle0 = formToggleCss;
 const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTMLElement {
@@ -39,7 +39,7 @@ const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTM
                 toggleInteraction();
             }
         };
-        return (h("div", { key: 'e50441d494eea0dbf949283b820877e147991c37', 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: '1a76a11c72929e64aaf12a3ed1d39aefbbaddb77', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: 'f4eb9f79800f1b3527e3033a4b8fa9401dd7b3ba', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: '8a6aa7345bd182f1e654f1c40a4b8654e35fa6c3', 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: '557e5340e6489e1a14667ec000fc4cc9130441c9', 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: '5fab336353956969278692ab16d49b4670219d7d', 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: '42ee41122748db652c5d4b8d9b581e3b062f67f8', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: 'e2f61213f75785fceb109d7aa6e5f8e858082100', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: 'f9924fd642a74914f8a5ad028c71253fd6aae559', 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: '97b4e2262123e0749147b9b196fbb1ee19003415', 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-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,~~mmMAAmmM~~,CAAC;~~AAC1nM~~,gCAAe,aAAa;;~~MCYf~~,UAAU;;;;;;;;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,iBAAiB,EAAE,CAAC;SACrB,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG;YACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;gBAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;aACtB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG;YACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC3C,iBAAiB,EAAE,CAAC;aACrB;SACF,CAAC;QAEF,QACE,4DACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,4DAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,4DAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-toggle.scss?tag=utrecht-form-toggle&encapsulation=shadow","src/components/form-toggle.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n /\n\n@import \"~@utrecht/form-toggle-css/src\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\n}\n","/\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'form-toggle.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' \|\| evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' \|\| evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ioMAAioM,CAAC;AACxpM,gCAAe,aAAa;;MCaf,UAAU;;;;;;;;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,iBAAiB,EAAE,CAAC;SACrB,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG;YACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;gBAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;aACtB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG;YACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC3C,iBAAiB,EAAE,CAAC;aACrB;SACF,CAAC;QAEF,QACE,4DACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,4DAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,4DAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-toggle.scss?tag=utrecht-form-toggle&encapsulation=shadow","src/components/form-toggle.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@import \"~@utrecht/form-toggle-css/src\";\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n @extend .utrecht-form-toggle--hover;\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, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-toggle',\n styleUrl: 'form-toggle.scss',\n shadow: true,\n})\nexport class FormToggle {\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) checked: boolean = false;\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled } = this;\n\n const toggleInteraction = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.utrechtInput.emit(this);\n this.utrechtChange.emit(this);\n }\n };\n\n const handleClick = () => {\n toggleInteraction();\n };\n\n const handleKeyPress = (evt) => {\n if (evt.code === 'Space' \|\| evt.key === ' ') {\n // Do not scroll the page using Space when the toggle is focussed\n evt.preventDefault();\n }\n };\n\n const handleKeyUp = (evt) => {\n if (evt.code === 'Space' \|\| evt.key === ' ') {\n toggleInteraction();\n }\n };\n\n return (\n <div\n class={clsx(\n 'utrecht-form-toggle',\n checked && 'utrecht-form-toggle--checked',\n !checked && 'utrecht-form-toggle--not-checked',\n disabled && 'utrecht-form-toggle--disabled',\n )}\n tabIndex={disabled ? null : 0}\n role=\"switch\"\n aria-disabled={disabled ? 'true' : null}\n onClick={handleClick}\n onKeyPress={handleKeyPress}\n onKeyUp={handleKeyUp}\n >\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n <div\n class={clsx(\n 'utrecht-form-toggle__track',\n checked && 'utrecht-form-toggle__track--checked',\n !checked && 'utrecht-form-toggle__track--not-checked',\n disabled && 'utrecht-form-toggle__track--disabled',\n )}\n >\n <div\n class={clsx(\n 'utrecht-form-toggle__thumb',\n checked && 'utrecht-form-toggle__thumb--checked',\n !checked && 'utrecht-form-toggle__thumb--not-checked',\n disabled && 'utrecht-form-toggle__thumb--disabled',\n )}\n ></div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/utrecht-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,4OAA4O,CAAC;AAC7P,0BAAe,OAAO;;MCYT,IAAI;;;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC5F,CAAC,CAAC;QAEH,QACE,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS,IAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,EACN,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form.scss?tag=utrecht-form","src/components/form.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2020-~~2022~~ ~~Gemeente~~ ~~Utrecht\~~n * Copyright (c) ~~2020~~-~~2022~~ ~~Frameless~~ ~~B.V.\~~n /\n\n@import \"~@utrecht/form-css/src\";\n\n:host {\n @include utrecht-form;\n}\n\n.utrecht-form__heading:empty {\n display: none;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/\n @license EUPL-1.2\n * Copyright (c) 2020-~~2022~~ ~~Gemeente~~ ~~Utrecht\~~n * Copyright (c) ~~2020~~-~~2022~~ ~~Frameless~~ ~~B.V.\~~n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-form',\n styleUrl: 'form.scss',\n shadow: false,\n})\nexport class Form {\n @Prop() action?: string;\n @Prop() autocomplete?: string;\n @Prop() enctype?: string;\n @Prop() method?: string;\n @Prop({ attribute: 'novalidate' }) noValidate?: string;\n @Prop() target?: string;\n render() {\n const { action, autocomplete, enctype, method, target, noValidate } = this;\n const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n const c = parseInt(n, 10);\n return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n });\n\n return (\n <form\n action={action}\n aria-labelledby={headingId}\n autocomplete={autocomplete}\n enctype={enctype}\n method={method}\n novalidate={noValidate}\n target={target}\n >\n <div class=\"utrecht-form__heading\" id={headingId}>\n <slot name=\"heading\" />\n </div>\n <slot></slot>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,4OAA4O,CAAC;AAC7P,0BAAe,OAAO;;MCYT,IAAI;;;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC5F,CAAC,CAAC;QAEH,QACE,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS,IAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,EACN,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form.scss?tag=utrecht-form","src/components/form.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@import \"~@utrecht/form-css/src\";\n\n:host {\n @include utrecht-form;\n}\n\n.utrecht-form__heading:empty {\n display: none;\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, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-form',\n styleUrl: 'form.scss',\n shadow: false,\n})\nexport class Form {\n @Prop() action?: string;\n @Prop() autocomplete?: string;\n @Prop() enctype?: string;\n @Prop() method?: string;\n @Prop({ attribute: 'novalidate' }) noValidate?: string;\n @Prop() target?: string;\n render() {\n const { action, autocomplete, enctype, method, target, noValidate } = this;\n const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n const c = parseInt(n, 10);\n return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n });\n\n return (\n <form\n action={action}\n aria-labelledby={headingId}\n autocomplete={autocomplete}\n enctype={enctype}\n method={method}\n novalidate={noValidate}\n target={target}\n >\n <div class=\"utrecht-form__heading\" id={headingId}>\n <slot name=\"heading\" />\n </div>\n <slot></slot>\n </form>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h1", { key: 'dbcec4f57d1bb60a204dad60dd64e885329ea263' }, h("slot", { key: '51349ea9c9ead6e65014f55acc386354e544f738' })));
+        return (h("h1", { key: 'ec37fb469bb120e71147ac2db128e426994de695' }, h("slot", { key: 'ef88290bb18bd54b484f345aee80b3e675935485' })));
     }
     static get style() { return UtrechtHeading1Style0; }
 }, [1, "utrecht-heading-1"]);

package/dist/components/utrecht-heading-1.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-1.scss?tag=utrecht-heading-1&encapsulation=shadow","src/components/heading-1.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n */\n\n@import \"~@utrecht/heading-1-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh1 {\n @include utrecht-heading-1;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-1',\n styleUrl: 'heading-1.scss',\n shadow: true,\n})\nexport class Heading1 {\n render() {\n return (\n <h1>\n <slot></slot>\n </h1>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-1.scss?tag=utrecht-heading-1&encapsulation=shadow","src/components/heading-1.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@import \"~@utrecht/heading-1-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh1 {\n @include utrecht-heading-1;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-1',\n styleUrl: 'heading-1.scss',\n shadow: true,\n})\nexport class Heading1 {\n render() {\n return (\n <h1>\n <slot></slot>\n </h1>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h4", { key: '9481587b32b4e33997ee64eb5d326b6eb40b49c1' }, h("slot", { key: '0838ff16d87ba3860f250b124027a41ca0f1564b' })));
+        return (h("h4", { key: '0fa27cca33829066a4162e467c38cc8458e5d79c' }, h("slot", { key: '41972971fb28f68d44475a34064014983fa01640' })));
     }
     static get style() { return UtrechtHeading4Style0; }
 }, [1, "utrecht-heading-4"]);

package/dist/components/utrecht-heading-4.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-4.scss?tag=utrecht-heading-4&encapsulation=shadow","src/components/heading-4.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n */\n\n@import \"~@utrecht/heading-4-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh4 {\n @include utrecht-heading-4;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-4',\n styleUrl: 'heading-4.scss',\n shadow: true,\n})\nexport class Heading4 {\n render() {\n return (\n <h4>\n <slot></slot>\n </h4>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-4.scss?tag=utrecht-heading-4&encapsulation=shadow","src/components/heading-4.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@import \"~@utrecht/heading-4-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh4 {\n @include utrecht-heading-4;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-4',\n styleUrl: 'heading-4.scss',\n shadow: true,\n})\nexport class Heading4 {\n render() {\n return (\n <h4>\n <slot></slot>\n </h4>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h5", { key: '0fa27cca33829066a4162e467c38cc8458e5d79c' }, h("slot", { key: '41972971fb28f68d44475a34064014983fa01640' })));
+        return (h("h5", { key: '894f5fd5ab920cd220261132e5b00c60f756678e' }, h("slot", { key: '5fa86bcb746bc358c7ca48ae18dcadd9e900eeb2' })));
     }
     static get style() { return UtrechtHeading5Style0; }
 }, [1, "utrecht-heading-5"]);

package/dist/components/utrecht-heading-5.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-5.scss?tag=utrecht-heading-5&encapsulation=shadow","src/components/heading-5.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n */\n\n@import \"~@utrecht/heading-5-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh5 {\n @include utrecht-heading-5;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-5',\n styleUrl: 'heading-5.scss',\n shadow: true,\n})\nexport class Heading5 {\n render() {\n return (\n <h5>\n <slot></slot>\n </h5>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-5.scss?tag=utrecht-heading-5&encapsulation=shadow","src/components/heading-5.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@import \"~@utrecht/heading-5-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh5 {\n @include utrecht-heading-5;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-5',\n styleUrl: 'heading-5.scss',\n shadow: true,\n})\nexport class Heading5 {\n render() {\n return (\n <h5>\n <slot></slot>\n </h5>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h6", { key: '894f5fd5ab920cd220261132e5b00c60f756678e' }, h("slot", { key: '5fa86bcb746bc358c7ca48ae18dcadd9e900eeb2' })));
+        return (h("h6", { key: '33631df3f9437addd45a9ace7511ab9f92f74464' }, h("slot", { key: 'af0f277a5271a62d21f41c0938a16ae6ab1b3d9d' })));
     }
     static get style() { return UtrechtHeading6Style0; }
 }, [1, "utrecht-heading-6"]);

package/dist/components/utrecht-heading-6.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-6.scss?tag=utrecht-heading-6&encapsulation=shadow","src/components/heading-6.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n */\n\n@import \"~@utrecht/heading-6-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh6 {\n @include utrecht-heading-6;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-6',\n styleUrl: 'heading-6.scss',\n shadow: true,\n})\nexport class Heading6 {\n render() {\n return (\n <h6>\n <slot></slot>\n </h6>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-6.scss?tag=utrecht-heading-6&encapsulation=shadow","src/components/heading-6.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@import \"~@utrecht/heading-6-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\nh6 {\n @include utrecht-heading-6;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-6',\n styleUrl: 'heading-6.scss',\n shadow: true,\n})\nexport class Heading6 {\n render() {\n return (\n <h6>\n <slot></slot>\n </h6>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends
         this.__attachShadow();
     }
     render() {
-        return (h("hgroup", { key: 'a03632de85a5f753c301f15ec02019b3ef4d2837' }, h("slot", { key: 'e2b740831a7a41ae83f9f4527643551cd32787b6' })));
+        return (h("hgroup", { key: '6d665373ae70700b705e919212ad417dda8c2221' }, h("slot", { key: 'c5ad940c3faaca4c81e4feb02e28c13ab5aa6969' })));
     }
     static get style() { return UtrechtHeadingGroupStyle0; }
 }, [1, "utrecht-heading-group"]);

package/dist/components/utrecht-heading-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kYAAkY,CAAC;AAC3Z,kCAAe,eAAe;;MCYjB,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,iEACE,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-group.scss?tag=utrecht-heading-group&encapsulation=shadow","src/components/heading-group.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2020-~~2022~~ ~~Gemeente~~ ~~Utrecht\~~n * Copyright (c) ~~2020~~-~~2022~~ ~~Frameless~~ ~~B.V.\~~n /\n\n@import \"~@utrecht/heading-group-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\nhgroup {\n @include utrecht-heading-group;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","/\n @license EUPL-1.2\n * Copyright (c) 2020-~~2022~~ ~~Gemeente~~ ~~Utrecht\~~n * Copyright (c) ~~2020~~-~~2022~~ ~~Frameless~~ ~~B.V.\~~n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-group',\n styleUrl: 'heading-group.scss',\n shadow: true,\n})\nexport class HeadingGroup {\n render() {\n return (\n <hgroup>\n <slot></slot>\n </hgroup>\n );\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kYAAkY,CAAC;AAC3Z,kCAAe,eAAe;;MCYjB,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,iEACE,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-group.scss?tag=utrecht-heading-group&encapsulation=shadow","src/components/heading-group.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@import \"~@utrecht/heading-group-css/src/mixin\";\n\n:host {\n display: contents;\n}\n\nhgroup {\n @include utrecht-heading-group;\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, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading-group',\n styleUrl: 'heading-group.scss',\n shadow: true,\n})\nexport class HeadingGroup {\n render() {\n return (\n <hgroup>\n <slot></slot>\n </hgroup>\n );\n }\n}\n"],"version":3}

package/dist/components/utrecht-heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utrecht-heading.js","mappings":";;AAAA,MAAM,UAAU,GAAG,kvJAAkvJ,CAAC;AACtwJ,6BAAe,UAAU;;MCMZ,OAAO;;;;;;;IAMlB,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM;YACL,QACE,WAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,IAChE,eAAa,CACT,EACN;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading.scss?tag=utrecht-heading&encapsulation=shadow","src/components/heading.tsx"],"sourcesContent":["/*\n @license EUPL-1.2\n * Copyright (c) 2021 ~~Robbert~~ ~~Broersma~~\n /\n\n@import \"~@utrecht/heading-1-css/src\";\n@import \"~@utrecht/heading-2-css/src\";\n@import \"~@utrecht/heading-3-css/src\";\n@import \"~@utrecht/heading-4-css/src\";\n@import \"~@utrecht/heading-5-css/src\";\n@import \"~@utrecht/heading-6-css/src\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading',\n styleUrl: 'heading.scss',\n shadow: true,\n})\nexport class Heading {\n /\n Heading level\n */\n @Prop() level: number;\n\n render() {\n if (this.level === 1) {\n return (\n <h1 class=\"utrecht-heading-1\">\n <slot></slot>\n </h1>\n );\n } else if (this.level === 2) {\n return (\n <h2 class=\"utrecht-heading-2\">\n <slot></slot>\n </h2>\n );\n } else if (this.level === 3) {\n return (\n <h3 class=\"utrecht-heading-3\">\n <slot></slot>\n </h3>\n );\n } else if (this.level === 4) {\n return (\n <h4 class=\"utrecht-heading-4\">\n <slot></slot>\n </h4>\n );\n } else if (this.level === 5) {\n return (\n <h5 class=\"utrecht-heading-5\">\n <slot></slot>\n </h5>\n );\n } else if (this.level === 6) {\n return (\n <h6 class=\"utrecht-heading-6\">\n <slot></slot>\n </h6>\n );\n } else {\n return (\n <div class=\"utrecht-heading\" role=\"heading\" aria-level={this.level}>\n <slot></slot>\n </div>\n );\n }\n }\n}\n"],"version":3}
1	+ {"file":"utrecht-heading.js","mappings":";;AAAA,MAAM,UAAU,GAAG,kvJAAkvJ,CAAC;AACtwJ,6BAAe,UAAU;;MCMZ,OAAO;;;;;;;IAMlB,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM;YACL,QACE,WAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,IAChE,eAAa,CACT,EACN;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading.scss?tag=utrecht-heading&encapsulation=shadow","src/components/heading.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@import \"~@utrecht/heading-1-css/src\";\n@import \"~@utrecht/heading-2-css/src\";\n@import \"~@utrecht/heading-3-css/src\";\n@import \"~@utrecht/heading-4-css/src\";\n@import \"~@utrecht/heading-5-css/src\";\n@import \"~@utrecht/heading-6-css/src\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-heading',\n styleUrl: 'heading.scss',\n shadow: true,\n})\nexport class Heading {\n /\n Heading level\n */\n @Prop() level: number;\n\n render() {\n if (this.level === 1) {\n return (\n <h1 class=\"utrecht-heading-1\">\n <slot></slot>\n </h1>\n );\n } else if (this.level === 2) {\n return (\n <h2 class=\"utrecht-heading-2\">\n <slot></slot>\n </h2>\n );\n } else if (this.level === 3) {\n return (\n <h3 class=\"utrecht-heading-3\">\n <slot></slot>\n </h3>\n );\n } else if (this.level === 4) {\n return (\n <h4 class=\"utrecht-heading-4\">\n <slot></slot>\n </h4>\n );\n } else if (this.level === 5) {\n return (\n <h5 class=\"utrecht-heading-5\">\n <slot></slot>\n </h5>\n );\n } else if (this.level === 6) {\n return (\n <h6 class=\"utrecht-heading-6\">\n <slot></slot>\n </h6>\n );\n } else {\n return (\n <div class=\"utrecht-heading\" role=\"heading\" aria-level={this.level}>\n <slot></slot>\n </div>\n );\n }\n }\n}\n"],"version":3}