@utrecht/web-component-library-stencil 1.1.0 → 1.1.1-alpha.0

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

@@ -1 +1 @@
-{"file":"utrecht-form-field-checkbox.js","mappings":"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","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/checkbox/css\";\n@import \"~@utrecht/components/custom-checkbox/css\";\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-checkbox',\n  styleUrl: 'form-field-checkbox.scss',\n  shadow: true,\n})\nexport class FormFieldCheckbox {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() label: string = '';\n  @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n  @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n  @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n  @Prop() name: 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 { checked, disabled, hostElement, label, name, invalid, required, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = checked ? value || '' : '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            <input\n              id=\"input\"\n              type=\"checkbox\"\n              class={clsx(\n                'utrecht-form-field__input',\n                'utrecht-checkbox',\n                'utrecht-checkbox--custom',\n                'utrecht-checkbox--html-input',\n                {\n                  'utrecht-checkbox--disabled': disabled,\n                  'utrecht-checkbox--invalid': invalid,\n                  'utrecht-checkbox--required': required,\n                },\n              )}\n              aria-invalid={invalid || undefined}\n              disabled={disabled}\n              required={required}\n              checked={checked}\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.checked = (evt.target as HTMLInputElement).checked;\n                this.utrechtInput.emit(evt);\n              }}\n            />{' '}\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n          {invalid && (\n            <utrecht-form-field-description\n              status=\"invalid\"\n              class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n              id=\"error-message\"\n            >\n              <slot name=\"error-message\"></slot>\n            </utrecht-form-field-description>\n          )}\n        </p>\n        <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-field-checkbox.js","mappings":"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","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/checkbox/css\";\n@import \"~@utrecht/components/custom-checkbox/css\";\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-checkbox',\n  styleUrl: 'form-field-checkbox.scss',\n  shadow: true,\n})\nexport class FormFieldCheckbox {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() label: string = '';\n  @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n  @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n  @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n  @Prop() name: 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 { checked, disabled, hostElement, label, name, invalid, required, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = checked ? value || '' : '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            <input\n              id=\"input\"\n              type=\"checkbox\"\n              class={clsx(\n                'utrecht-form-field__input',\n                'utrecht-checkbox',\n                'utrecht-checkbox--custom',\n                'utrecht-checkbox--html-input',\n                {\n                  'utrecht-checkbox--disabled': disabled,\n                  'utrecht-checkbox--invalid': invalid,\n                  'utrecht-checkbox--required': required,\n                },\n              )}\n              aria-invalid={invalid || undefined}\n              disabled={disabled}\n              required={required}\n              checked={checked}\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.checked = (evt.target as HTMLInputElement).checked;\n                this.utrechtInput.emit(evt);\n              }}\n            />{' '}\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n          {invalid && (\n            <utrecht-form-field-description\n              status=\"invalid\"\n              class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n              id=\"error-message\"\n            >\n              <slot name=\"error-message\"></slot>\n            </utrecht-form-field-description>\n          )}\n        </p>\n        <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$2 } from './form-field-description.js';
 
-const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
+const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.utrecht-textarea--html-textarea:focus{background-color:var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));border-color:var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea:disabled{background-color:var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
 
 const HTML_DEFAULT_COLS = 20;
 const HTML_DEFAULT_ROWS = 2;
@@ -45,10 +45,10 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
         'utrecht-form-field--invalid': invalid,
       }) }, h("p", { class: "utrecht-form-field__label" }, h("label", { class: clsx('utrecht-form-label', {
         'utrecht-form-label--disabled': disabled,
-      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), h("p", { class: "utrecht-form-field__input" }, h("textarea", { id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("p", { class: "utrecht-form-field__input" }, h("textarea", { id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
         this.value = evt.target.value;
         this.utrechtInput.emit(evt);
-      } }, value)), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
+      } }, value)), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
   }
   get hostElement() { return this; }
   static get style() { return formFieldTextareaCss; }

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

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

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as clsx } from './clsx.m.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));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textbox{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:initial;inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));max-inline-size: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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-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--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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-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));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 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{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textbox{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:initial;inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));max-inline-size: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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-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--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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-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-textarea-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-textarea-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-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 FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox extends HTMLElement {
   constructor() {
@@ -47,10 +47,10 @@ const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox
         'utrecht-form-field--invalid': invalid,
       }) }, h("p", { class: "utrecht-form-field__label" }, h("label", { class: clsx('utrecht-form-label', {
         'utrecht-form-label--disabled': disabled,
-      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), h("p", { class: "utrecht-form-field__input" }, h("input", { 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, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("p", { class: "utrecht-form-field__input" }, h("input", { 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);
-      } })), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
+      } })), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
   }
   get hostElement() { return this; }
   static get style() { return formFieldTextboxCss; }
@@ -59,8 +59,8 @@ const FormFieldTextbox = /*@__PURE__*/ proxyCustomElement(class FormFieldTextbox
     "disabled": [516],
     "invalid": [516],
     "label": [1],
-    "min": [1],
-    "max": [1],
+    "min": [8],
+    "max": [8],
     "name": [1],
     "pattern": [1],
     "placeholder": [1],

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

@@ -1 +1 @@
-{"file":"utrecht-form-field-textbox.js","mappings":"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","names":[],"sources":["src/components/form-field-textbox.scss?tag=utrecht-form-field-textbox&encapsulation=shadow","src/components/form-field-textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textbox/css\";\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: string = '';\n  @Prop() max: 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        <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            disabled={disabled}\n            min={min ? min : null}\n            max={max ? 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        {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        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-field-textbox.js","mappings":"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","names":[],"sources":["src/components/form-field-textbox.scss?tag=utrecht-form-field-textbox&encapsulation=shadow","src/components/form-field-textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textbox/css\";\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}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const heading1Css = ".utrecht-heading-1{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-1--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+const heading1Css = ":host{display:contents}:host([hidden]){display:none !important}h1{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid}";
 
 const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends HTMLEle
     this.__attachShadow();
   }
   render() {
-    return (h("h1", { class: "utrecht-heading-1" }, h("slot", null)));
+    return (h("h1", null, h("slot", null)));
   }
   static get style() { return heading1Css; }
 }, [1, "utrecht-heading-1"]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,41BAA41B;;MCOn2B,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-1/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\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 class=\"utrecht-heading-1\">\n        <slot></slot>\n      </h1>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,cACE,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-1/css/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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const heading4Css = ".utrecht-heading-4{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-4--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+const heading4Css = ":host{display:contents}:host([hidden]){display:none !important}h4{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid}";
 
 const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends HTMLEle
     this.__attachShadow();
   }
   render() {
-    return (h("h4", { class: "utrecht-heading-4" }, h("slot", null)));
+    return (h("h4", null, h("slot", null)));
   }
   static get style() { return heading4Css; }
 }, [1, "utrecht-heading-4"]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,41BAA41B;;MCOn2B,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-4/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\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 class=\"utrecht-heading-4\">\n        <slot></slot>\n      </h4>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,cACE,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-4/css/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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const heading5Css = ".utrecht-heading-5{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-5--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+const heading5Css = ":host{display:contents}:host([hidden]){display:none !important}h5{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid}";
 
 const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends HTMLEle
     this.__attachShadow();
   }
   render() {
-    return (h("h5", { class: "utrecht-heading-5" }, h("slot", null)));
+    return (h("h5", null, h("slot", null)));
   }
   static get style() { return heading5Css; }
 }, [1, "utrecht-heading-5"]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,41BAA41B;;MCOn2B,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-5/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\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 class=\"utrecht-heading-5\">\n        <slot></slot>\n      </h5>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,cACE,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-5/css/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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const heading6Css = ".utrecht-heading-6{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+const heading6Css = ":host{display:contents}:host([hidden]){display:none !important}h6{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid}";
 
 const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends HTMLEle
     this.__attachShadow();
   }
   render() {
-    return (h("h6", { class: "utrecht-heading-6" }, h("slot", null)));
+    return (h("h6", null, h("slot", null)));
   }
   static get style() { return heading6Css; }
 }, [1, "utrecht-heading-6"]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,41BAA41B;;MCOn2B,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-6/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\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 class=\"utrecht-heading-6\">\n        <slot></slot>\n      </h6>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;EACnB,MAAM;IACJ,QACE,cACE,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-6/css/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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const headingGroupCss = ":host{--utrecht-pre-heading-order:-1;display:flex;flex-direction:column;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0))}:host>*{--utrecht-space-around:0}:host([hidden]){display:none !important}";
+const headingGroupCss = ":host{display:contents}hgroup{--utrecht-pre-heading-order:-1;display:flex;flex-direction:column;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0))}hgroup>*{--utrecht-space-around:0}:host([hidden]){display:none !important}";
 
 const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends
     this.__attachShadow();
   }
   render() {
-    return h("slot", null);
+    return (h("hgroup", null, h("slot", null)));
   }
   static get style() { return headingGroupCss; }
 }, [1, "utrecht-heading-group"]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yWAAyW;;MCapX,YAAY;;;;;;EACvB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-group/css/mixin\";\n\n:host {\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 <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kYAAkY;;MCa7Y,YAAY;;;;;;EACvB,MAAM;IACJ,QACE,kBACE,eAAa,CACN,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;","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/components/heading-group/css/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}

package/dist/components/utrecht-icon-afspraak-maken.js

@@ -9,7 +9,7 @@ const UtrechtIconAfspraakMaken$1 = /*@__PURE__*/ proxyCustomElement(class Utrech
     this.__attachShadow();
   }
   render() {
-    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0ZM18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16Z" }), h("path", { d: "M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4Zm9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36Z" })));
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0M18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16" }), h("path", { d: "M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4m9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36" })));
   }
   static get style() { return generatedCss; }
 }, [1, "utrecht-icon-afspraak-maken"]);

package/dist/components/utrecht-icon-afspraak-maken.js.map

@@ -1 +1 @@
-{"file":"utrecht-icon-afspraak-maken.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,0BAAwB;;;;;;EACnC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,kJAAkJ,GAAE,EAC5J,YAAM,CAAC,EAAC,0MAA0M,GAAE,CAChN,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfspraakMaken"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afspraak-maken&encapsulation=shadow","src/components/generated/utrecht-icon-afspraak-maken/utrecht-icon-afspraak-maken.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afspraak-maken',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfspraakMaken {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0ZM18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16Z\"/>\n  <path d=\"M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4Zm9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-icon-afspraak-maken.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,0BAAwB;;;;;;EACnC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,gJAAgJ,GAAE,EAC1J,YAAM,CAAC,EAAC,wMAAwM,GAAE,CAC9M,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfspraakMaken"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afspraak-maken&encapsulation=shadow","src/components/generated/utrecht-icon-afspraak-maken/utrecht-icon-afspraak-maken.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afspraak-maken',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfspraakMaken {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M17.98 0C8.05 0 0 8.06 0 18s8.05 18 17.98 18S36 27.94 36 18 27.94 0 17.98 0M18 34C9.18 34 2 26.82 2 18S9.18 2 18 2s16 7.18 16 16-7.18 16-16 16\"/>\n  <path d=\"M18 4C10.28 4 4 10.28 4 18s6.28 14 14 14 14-6.28 14-14S25.72 4 18 4m9 19.49c-.27.48-.88.66-1.36.39l-8.13-4.51a.992.992 0 0 1-.51-.87V7.49c0-.55.45-1 1-1s1 .45 1 1V17.9l7.61 4.23c.48.27.66.88.39 1.36\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-icon-afval-container.js

@@ -9,7 +9,7 @@ const UtrechtIconAfvalContainer$1 = /*@__PURE__*/ proxyCustomElement(class Utrec
     this.__attachShadow();
   }
   render() {
-    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1ZM24 10H11V7h13v3Zm0 10H11v-8h13v8Zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2Zm-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1Z" })));
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1M24 10H11V7h13zm0 10H11v-8h13zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2m-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1" })));
   }
   static get style() { return generatedCss; }
 }, [1, "utrecht-icon-afval-container"]);

package/dist/components/utrecht-icon-afval-container.js.map

@@ -1 +1 @@
-{"file":"utrecht-icon-afval-container.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,2BAAyB;;;;;;EACpC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,gRAAgR,GAAE,CACtR,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalContainer"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-container&encapsulation=shadow","src/components/generated/utrecht-icon-afval-container/utrecht-icon-afval-container.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-container',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalContainer {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1ZM24 10H11V7h13v3Zm0 10H11v-8h13v8Zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2Zm-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-icon-afval-container.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,2BAAyB;;;;;;EACpC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,yQAAyQ,GAAE,CAC/Q,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalContainer"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-container&encapsulation=shadow","src/components/generated/utrecht-icon-afval-container/utrecht-icon-afval-container.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-container',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalContainer {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M36 35c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h34c.55 0 1-.45 1-1M24 10H11V7h13zm0 10H11v-8h13zm6-11v22H5V9c0-1.1.9-2 2-2h2v14c0 .55.45 1 1 1h15c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2m-3-8c0 .55-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-icon-afval-containerpas.js

@@ -9,7 +9,7 @@ const UtrechtIconAfvalContainerpas$1 = /*@__PURE__*/ proxyCustomElement(class Ut
     this.__attachShadow();
   }
   render() {
-    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M20.53 22H1.47C.66 22 0 22.66 0 23.47v11.06C0 35.34.66 36 1.47 36h18.52a2 2 0 0 0 2-2V23.47c0-.81-.66-1.47-1.47-1.47ZM7.51 25.07c.96 0 1.74.78 1.74 1.75s-.78 1.75-1.74 1.75-1.74-.78-1.74-1.75.78-1.75 1.74-1.75ZM10 32H5c-.53 0-.95-.41-.99-.93.08-1.12 2.34-1.69 3.49-1.69s3.41.57 3.49 1.69c-.04.52-.46.93-.99.93Zm7-1c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1Zm1-4c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1Zm9-18H16V7h11v2Zm9 22c0 .55-.45 1-1 1H24v-2h11c.55 0 1 .45 1 1ZM22 1c0-.55.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1Zm5 15H16v-5h11v5Zm-3 7c0-1.66-1.34-3-3-3H10V9c0-1.1.9-2 2-2h2v10c0 .55.45 1 1 1h13c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2v19h-9v-5Z" })));
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M20.53 22H1.47C.66 22 0 22.66 0 23.47v11.06C0 35.34.66 36 1.47 36h18.52a2 2 0 0 0 2-2V23.47c0-.81-.66-1.47-1.47-1.47ZM7.51 25.07c.96 0 1.74.78 1.74 1.75s-.78 1.75-1.74 1.75-1.74-.78-1.74-1.75.78-1.75 1.74-1.75M10 32H5c-.53 0-.95-.41-.99-.93.08-1.12 2.34-1.69 3.49-1.69s3.41.57 3.49 1.69c-.04.52-.46.93-.99.93m7-1c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1m1-4c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1m9-18H16V7h11zm9 22c0 .55-.45 1-1 1H24v-2h11c.55 0 1 .45 1 1M22 1c0-.55.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1m5 15H16v-5h11zm-3 7c0-1.66-1.34-3-3-3H10V9c0-1.1.9-2 2-2h2v10c0 .55.45 1 1 1h13c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2v19h-9z" })));
   }
   static get style() { return generatedCss; }
 }, [1, "utrecht-icon-afval-containerpas"]);

package/dist/components/utrecht-icon-afval-containerpas.js.map

@@ -1 +1 @@
-{"file":"utrecht-icon-afval-containerpas.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,8BAA4B;;;;;;EACvC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,gtBAAgtB,GAAE,CACttB,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalContainerpas"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-containerpas&encapsulation=shadow","src/components/generated/utrecht-icon-afval-containerpas/utrecht-icon-afval-containerpas.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-containerpas',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalContainerpas {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M20.53 22H1.47C.66 22 0 22.66 0 23.47v11.06C0 35.34.66 36 1.47 36h18.52a2 2 0 0 0 2-2V23.47c0-.81-.66-1.47-1.47-1.47ZM7.51 25.07c.96 0 1.74.78 1.74 1.75s-.78 1.75-1.74 1.75-1.74-.78-1.74-1.75.78-1.75 1.74-1.75ZM10 32H5c-.53 0-.95-.41-.99-.93.08-1.12 2.34-1.69 3.49-1.69s3.41.57 3.49 1.69c-.04.52-.46.93-.99.93Zm7-1c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1Zm1-4c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1Zm9-18H16V7h11v2Zm9 22c0 .55-.45 1-1 1H24v-2h11c.55 0 1 .45 1 1ZM22 1c0-.55.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1Zm5 15H16v-5h11v5Zm-3 7c0-1.66-1.34-3-3-3H10V9c0-1.1.9-2 2-2h2v10c0 .55.45 1 1 1h13c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2v19h-9v-5Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-icon-afval-containerpas.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,8BAA4B;;;;;;EACvC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,msBAAmsB,GAAE,CACzsB,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalContainerpas"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-containerpas&encapsulation=shadow","src/components/generated/utrecht-icon-afval-containerpas/utrecht-icon-afval-containerpas.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-containerpas',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalContainerpas {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M20.53 22H1.47C.66 22 0 22.66 0 23.47v11.06C0 35.34.66 36 1.47 36h18.52a2 2 0 0 0 2-2V23.47c0-.81-.66-1.47-1.47-1.47ZM7.51 25.07c.96 0 1.74.78 1.74 1.75s-.78 1.75-1.74 1.75-1.74-.78-1.74-1.75.78-1.75 1.74-1.75M10 32H5c-.53 0-.95-.41-.99-.93.08-1.12 2.34-1.69 3.49-1.69s3.41.57 3.49 1.69c-.04.52-.46.93-.99.93m7-1c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1s.45-1 1-1h2c.55 0 1 .45 1 1m1-4c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1m9-18H16V7h11zm9 22c0 .55-.45 1-1 1H24v-2h11c.55 0 1 .45 1 1M22 1c0-.55.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1h-2v3h-2V2h-2c-.55 0-1-.45-1-1m5 15H16v-5h11zm-3 7c0-1.66-1.34-3-3-3H10V9c0-1.1.9-2 2-2h2v10c0 .55.45 1 1 1h13c.55 0 1-.45 1-1V7h2c1.1 0 2 .9 2 2v19h-9z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-icon-afval-kalender.js

@@ -9,7 +9,7 @@ const UtrechtIconAfvalKalender$1 = /*@__PURE__*/ proxyCustomElement(class Utrech
     this.__attachShadow();
   }
   render() {
-    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M32 4v5H4V3.98c0-.55.45-1 1-1h4v2.03c0 .55.44.99.99.99.54 0 .99-.44.99-.99L11 .99c0-.55.45-1 1-1s1 .45 1 1v1.98l9 .02V5c0 .55.44.99.99.99h.02c.55 0 .99-.44.99-.99V1c0-.55.45-1 1-1s1 .45 1 1v2h5c.55 0 1 .45 1 1ZM4 11h28v20c0 3.21-1.79 5-4 5H8c-2.21 0-4-1.79-4-4V11Zm12 19.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5ZM23.01 19h-9.99L13 27.97c.69-.44 1.57-.62 2.5-.33.88.27 1.6.97 1.91 1.83.34.94.18 1.82-.23 2.53h2.98c.78 0 1.43-.6 1.49-1.38L23.01 19ZM12 16c0 .55.45 1 1 1l11.02-.02c.54 0 .98-.44.98-.99s-.44-.99-.99-.99h-.95c0-.55-.45-1-1-1h-8.03c-.56 0-1.03.44-1.03 1-.55 0-1 .45-1 1Z" })));
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "M32 4v5H4V3.98c0-.55.45-1 1-1h4v2.03c0 .55.44.99.99.99.54 0 .99-.44.99-.99L11 .99c0-.55.45-1 1-1s1 .45 1 1v1.98l9 .02V5c0 .55.44.99.99.99h.02c.55 0 .99-.44.99-.99V1c0-.55.45-1 1-1s1 .45 1 1v2h5c.55 0 1 .45 1 1M4 11h28v20c0 3.21-1.79 5-4 5H8c-2.21 0-4-1.79-4-4zm12 19.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5M23.01 19h-9.99L13 27.97c.69-.44 1.57-.62 2.5-.33.88.27 1.6.97 1.91 1.83.34.94.18 1.82-.23 2.53h2.98c.78 0 1.43-.6 1.49-1.38zM12 16c0 .55.45 1 1 1l11.02-.02c.54 0 .98-.44.98-.99s-.44-.99-.99-.99h-.95c0-.55-.45-1-1-1h-8.03c-.56 0-1.03.44-1.03 1-.55 0-1 .45-1 1" })));
   }
   static get style() { return generatedCss; }
 }, [1, "utrecht-icon-afval-kalender"]);

package/dist/components/utrecht-icon-afval-kalender.js.map

@@ -1 +1 @@
-{"file":"utrecht-icon-afval-kalender.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,0BAAwB;;;;;;EACnC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,qmBAAqmB,GAAE,CAC3mB,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalKalender"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-kalender&encapsulation=shadow","src/components/generated/utrecht-icon-afval-kalender/utrecht-icon-afval-kalender.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-kalender',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalKalender {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M32 4v5H4V3.98c0-.55.45-1 1-1h4v2.03c0 .55.44.99.99.99.54 0 .99-.44.99-.99L11 .99c0-.55.45-1 1-1s1 .45 1 1v1.98l9 .02V5c0 .55.44.99.99.99h.02c.55 0 .99-.44.99-.99V1c0-.55.45-1 1-1s1 .45 1 1v2h5c.55 0 1 .45 1 1ZM4 11h28v20c0 3.21-1.79 5-4 5H8c-2.21 0-4-1.79-4-4V11Zm12 19.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5ZM23.01 19h-9.99L13 27.97c.69-.44 1.57-.62 2.5-.33.88.27 1.6.97 1.91 1.83.34.94.18 1.82-.23 2.53h2.98c.78 0 1.43-.6 1.49-1.38L23.01 19ZM12 16c0 .55.45 1 1 1l11.02-.02c.54 0 .98-.44.98-.99s-.44-.99-.99-.99h-.95c0-.55-.45-1-1-1h-8.03c-.56 0-1.03.44-1.03 1-.55 0-1 .45-1 1Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-icon-afval-kalender.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,0BAAwB;;;;;;EACnC,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,slBAAslB,GAAE,CAC5lB,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconAfvalKalender"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-afval-kalender&encapsulation=shadow","src/components/generated/utrecht-icon-afval-kalender/utrecht-icon-afval-kalender.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-afval-kalender',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconAfvalKalender {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M32 4v5H4V3.98c0-.55.45-1 1-1h4v2.03c0 .55.44.99.99.99.54 0 .99-.44.99-.99L11 .99c0-.55.45-1 1-1s1 .45 1 1v1.98l9 .02V5c0 .55.44.99.99.99h.02c.55 0 .99-.44.99-.99V1c0-.55.45-1 1-1s1 .45 1 1v2h5c.55 0 1 .45 1 1M4 11h28v20c0 3.21-1.79 5-4 5H8c-2.21 0-4-1.79-4-4zm12 19.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5M23.01 19h-9.99L13 27.97c.69-.44 1.57-.62 2.5-.33.88.27 1.6.97 1.91 1.83.34.94.18 1.82-.23 2.53h2.98c.78 0 1.43-.6 1.49-1.38zM12 16c0 .55.45 1 1 1l11.02-.02c.54 0 .98-.44.98-.99s-.44-.99-.99-.99h-.95c0-.55-.45-1-1-1h-8.03c-.56 0-1.03.44-1.03 1-.55 0-1 .45-1 1\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-icon-afval-pmd.js

@@ -9,7 +9,7 @@ const UtrechtIconAfvalPmd$1 = /*@__PURE__*/ proxyCustomElement(class UtrechtIcon
     this.__attachShadow();
   }
   render() {
-    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "m19.91 19.96 1.1 1.83V33L20 35h-8l-1-2V21.93l1.1-1.94 7.8-.03ZM7.01 2.98h-2c-.54.01-.98.45-.99.99 0 .55-.02 1-.02 1h4v-1c0-.55-.45-.99-1-.99ZM33 2c0-.55-.45-1-1-1h-8c-.56 0-1.01.45-1.01 1.01V3l-3 3.94h10l3.03-3.97-.03-.97Zm.99 2.94L32 7.95V33l3.24-.79c.45-.11.76-.51.76-.97V7.35a1 1 0 0 0-.3-.71l-1.71-1.71Zm-22 9.05h.02s-.04-.08-.05-.12c-.02-.32-.13-.63-.37-.88 0 0-3.21-3.88-3.5-4.97l-.06-.4s-.02-.09-.02-.14v-.49h-4v.08c0 .05-.01.1-.02.15l-.06.43c-.29 1.17-3.5 5.33-3.5 5.33-.24.24-.35.56-.37.88-.02.04-.04.08-.05.12.01.33.14.66.39.92.28.28.43.64.43 1.04s-.15.76-.43 1.04c-.53.53-.53 1.4 0 1.93.28.28.43.64.43 1.04s-.15.76-.43 1.04c-.53.53-.53 1.4 0 1.93.56.56.57 1.46.04 2.03-.26.27-.44.61-.44 1v5.06c0 1.66 1.34 3 3 3h6.01V21.96c0-.34.09-.68.26-.98l1.1-1.94c.33-.58.94-.95 1.6-.99.03-.38-.09-.77-.38-1.06-.28-.28-.43-.64-.43-1.04s.15-.76.43-1.04c.25-.25.38-.58.39-.92Zm11.02 7.81V33h7V8.94h-10V18c.66.03 1.26.38 1.61.95l1.1 1.82c.19.31.29.67.29 1.03Z" })));
+    return (h("svg", { viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: "1em", width: "1em" }, h("path", { d: "m19.91 19.96 1.1 1.83V33L20 35h-8l-1-2V21.93l1.1-1.94 7.8-.03ZM7.01 2.98h-2c-.54.01-.98.45-.99.99 0 .55-.02 1-.02 1h4v-1c0-.55-.45-.99-1-.99ZM33 2c0-.55-.45-1-1-1h-8c-.56 0-1.01.45-1.01 1.01V3l-3 3.94h10l3.03-3.97-.03-.97Zm.99 2.94L32 7.95V33l3.24-.79c.45-.11.76-.51.76-.97V7.35a1 1 0 0 0-.3-.71l-1.71-1.71Zm-22 9.05h.02s-.04-.08-.05-.12c-.02-.32-.13-.63-.37-.88 0 0-3.21-3.88-3.5-4.97l-.06-.4s-.02-.09-.02-.14v-.49h-4v.08c0 .05-.01.1-.02.15l-.06.43c-.29 1.17-3.5 5.33-3.5 5.33-.24.24-.35.56-.37.88-.02.04-.04.08-.05.12.01.33.14.66.39.92.28.28.43.64.43 1.04s-.15.76-.43 1.04c-.53.53-.53 1.4 0 1.93.28.28.43.64.43 1.04s-.15.76-.43 1.04c-.53.53-.53 1.4 0 1.93.56.56.57 1.46.04 2.03-.26.27-.44.61-.44 1v5.06c0 1.66 1.34 3 3 3h6.01V21.96c0-.34.09-.68.26-.98l1.1-1.94c.33-.58.94-.95 1.6-.99.03-.38-.09-.77-.38-1.06-.28-.28-.43-.64-.43-1.04s.15-.76.43-1.04c.25-.25.38-.58.39-.92Zm11.02 7.81V33h7V8.94h-10V18c.66.03 1.26.38 1.61.95l1.1 1.82c.19.31.29.67.29 1.03" })));
   }
   static get style() { return generatedCss; }
 }, [1, "utrecht-icon-afval-pmd"]);