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

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

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

package/dist/collection/components/form-field-textbox.css

@@ -1,16 +1,20 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
+/** @deprecated */
 .utrecht-form-field {
   break-inside: avoid;
   font-family: var(--utrecht-document-font-family, inherit);
@@ -33,7 +37,7 @@
 .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-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
   /*
   .utrecht-form-field__label .utrecht-form-field__input {
@@ -54,7 +58,7 @@
 .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-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
   /*
   .utrecht-form-field__label .utrecht-form-field__input {
@@ -96,7 +100,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  grid-area: description-invalid;
+  grid-area: error-message;
   order: 3;
 }
 
@@ -112,13 +116,20 @@
   order: 4;
 }
 
+.utrecht-form-field__error-message {
+  grid-area: error-message;
+  order: 3;
+}
+
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-form-label {
   color: var(--utrecht-form-label-color);
@@ -149,11 +160,13 @@
 
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-form-field-description {
   --utrecht-document-color: currentColor;
@@ -187,22 +200,24 @@
 
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /* TODO: Enable ordering properties when the plugin supports logical CSS properties
@@ -294,6 +309,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-textbox--read-only {
@@ -412,6 +428,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
   --_utrecht-textbox-border-width: var(

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

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 import clsx from "clsx";
@@ -36,14 +37,14 @@ export class FormFieldTextbox {
             input.name = name;
             input.value = value || '';
         }
-        return (h("div", { key: '887b727eb2bb4e4ed9399bdaa8d5aa82e2dcb5ba', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
+        return (h("div", { key: 'e9cb00b9e653f6a29ef2f128289234d3c965a0df', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
                 'utrecht-form-field--invalid': invalid,
-            }) }, h("p", { key: 'f22ed50beb44694633a371b095307f2cebaca4b8', class: "utrecht-form-field__label" }, h("label", { key: 'b6497c641f584a8b80c4a301e75936d3190af66e', class: clsx('utrecht-form-label', {
+            }) }, h("p", { key: 'c208aa999af784794f3ea1681a2da9568811632a', class: "utrecht-form-field__label" }, h("label", { key: '5c11a65bb000ecc3170c2ef256cfb7bcb11b22bc', class: clsx('utrecht-form-label', {
                 'utrecht-form-label--disabled': disabled,
-            }), htmlFor: "input" }, label, h("slot", { key: '886d2d0235001c0bf3d27391c72214606a245aca', name: "label" }))), h("utrecht-form-field-description", { key: '422921fe6cdac44e9475f42773925df412e52d1b', id: "description" }, h("slot", { key: '0b3646ab43a388145aaf5da013683cb2020be8d3', name: "description" })), invalid && (h("utrecht-form-field-description", { key: '4df44898c88f286604a287fa1cbba23cea8c58ad', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '3addd16a93c35fd59e27b2aa876e8e048fe2846f', name: "error-message" }))), h("p", { key: 'f76cca72677bc665a9ee8aaeb29e9d5a2f465def', class: "utrecht-form-field__input" }, h("input", { key: '8c95fcf3517364209596401853969573e18475f1', id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, "aria-describedby": clsx('description', 'status', { 'error-message': invalid }), "aria-invalid": invalid, dir: "auto", disabled: disabled, min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+            }), htmlFor: "input" }, label, h("slot", { key: '78a552675351e2aee44ca08ad57d03cf38ffefe2', name: "label" }))), h("utrecht-form-field-description", { key: 'cea5b31b3e2e59d5ab6fdb2cfa707af7dc393c68', id: "description" }, h("slot", { key: '96a9f15cd6ba6b2c65dfbbeee365df86d3d926a4', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'c507621e8483d8865aa514bc45c434f61b7fbfe7', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: 'fcae39db5748f81b8ff5e864732942d00c17d390', name: "error-message" }))), h("p", { key: 'aeae8e40e523872e01d2e0e696638a3f1b772e2a', class: "utrecht-form-field__input" }, h("input", { key: '0d244ad6f672fc711ac7473106ac89a1913bbd4a', id: "input", class: clsx('utrecht-form-field__input', 'utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, "aria-describedby": clsx('description', 'status', { 'error-message': invalid }), "aria-invalid": invalid, dir: "auto", disabled: disabled, min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.value = evt.target.value;
                 this.utrechtInput.emit(evt);
-            } })), h("div", { key: '00e9d8d87040c1d6d8a6942d5823af8511177e94', class: "utrecht-form-field__status", id: "status" }, h("div", { key: '33e8917e3abeac2fa4d0aff0c62b3fecd85e2785', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: 'e87d7789be613eb9705bf29e9d25ff5c0fb2a65d', name: "status" })))));
+            } })), h("div", { key: 'a66bf9644c67cefad3a320fa9a748b651377d713', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'f3fdc3c3835d4281f7ddbad7107524aae85d3838', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: 'e579bc13bb6539395759a9d439a77bbcb3e6dd83', name: "status" })))));
     }
     static get is() { return "utrecht-form-field-textbox"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/form-toggle.css

@@ -1,19 +1,22 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-form-toggle {
@@ -62,6 +65,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-form-toggle--hover, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover {
@@ -135,6 +139,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
@@ -165,6 +170,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 :host {
   display: inline-block;

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

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 import clsx from "clsx";
@@ -32,7 +33,7 @@ export class FormToggle {
                 toggleInteraction();
             }
         };
-        return (h("div", { key: '45a24047b4e336bf11457803119a8544a2ce7396', class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, h("div", { key: 'bcfa9ff67a0db3231ab27de357cfb90637b3af7e', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: 'd361d122bfbaa5c9703b2b1cb1b666ff6116d910', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: 'a98b6049292f7bc18c748c44117c61cfaa801245', class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { key: '8a8f3e01e8823f7ff9be327effc7b5d5788211c1', class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+        return (h("div", { key: '5fab336353956969278692ab16d49b4670219d7d', class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, h("div", { key: '42ee41122748db652c5d4b8d9b581e3b062f67f8', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: 'e2f61213f75785fceb109d7aa6e5f8e858082100', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: 'f9924fd642a74914f8a5ad028c71253fd6aae559', class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { key: '97b4e2262123e0749147b9b196fbb1ee19003415', class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
     }
     static get is() { return "utrecht-form-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-toggle.js","sourceRoot":"","sources":["../../src/components/form-toggle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,UAAU;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,iBAAiB,EAAE,CAAC;QACtB,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,EAAE;YAC7B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,iEAAiE;gBACjE,GAAG,CAAC,cAAc,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,EAAE;YAC1B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,iBAAiB,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW;YAEpB,4DAAK,KAAK,EAAC,4DAA4D,GAAO;YAC9E,4DAAK,KAAK,EAAC,2DAA2D,GAAO;YAC7E,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD;gBAED,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-toggle',\n  styleUrl: 'form-toggle.scss',\n  shadow: true,\n})\nexport class FormToggle {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled } = this;\n\n    const toggleInteraction = () => {\n      if (!this.disabled) {\n        this.checked = !this.checked;\n        this.utrechtInput.emit(this);\n        this.utrechtChange.emit(this);\n      }\n    };\n\n    const handleClick = () => {\n      toggleInteraction();\n    };\n\n    const handleKeyPress = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        // Do not scroll the page using Space when the toggle is focussed\n        evt.preventDefault();\n      }\n    };\n\n    const handleKeyUp = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        toggleInteraction();\n      }\n    };\n\n    return (\n      <div\n        class={clsx(\n          'utrecht-form-toggle',\n          checked && 'utrecht-form-toggle--checked',\n          !checked && 'utrecht-form-toggle--not-checked',\n          disabled && 'utrecht-form-toggle--disabled',\n        )}\n        tabIndex={disabled ? null : 0}\n        role=\"switch\"\n        aria-disabled={disabled ? 'true' : null}\n        onClick={handleClick}\n        onKeyPress={handleKeyPress}\n        onKeyUp={handleKeyUp}\n      >\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n        <div\n          class={clsx(\n            'utrecht-form-toggle__track',\n            checked && 'utrecht-form-toggle__track--checked',\n            !checked && 'utrecht-form-toggle__track--not-checked',\n            disabled && 'utrecht-form-toggle__track--disabled',\n          )}\n        >\n          <div\n            class={clsx(\n              'utrecht-form-toggle__thumb',\n              checked && 'utrecht-form-toggle__thumb--checked',\n              !checked && 'utrecht-form-toggle__thumb--not-checked',\n              disabled && 'utrecht-form-toggle__thumb--disabled',\n            )}\n          ></div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"form-toggle.js","sourceRoot":"","sources":["../../src/components/form-toggle.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,UAAU;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,iBAAiB,EAAE,CAAC;QACtB,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,EAAE;YAC7B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,iEAAiE;gBACjE,GAAG,CAAC,cAAc,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,EAAE;YAC1B,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,iBAAiB,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEF,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW;YAEpB,4DAAK,KAAK,EAAC,4DAA4D,GAAO;YAC9E,4DAAK,KAAK,EAAC,2DAA2D,GAAO;YAC7E,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD;gBAED,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-toggle',\n  styleUrl: 'form-toggle.scss',\n  shadow: true,\n})\nexport class FormToggle {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled } = this;\n\n    const toggleInteraction = () => {\n      if (!this.disabled) {\n        this.checked = !this.checked;\n        this.utrechtInput.emit(this);\n        this.utrechtChange.emit(this);\n      }\n    };\n\n    const handleClick = () => {\n      toggleInteraction();\n    };\n\n    const handleKeyPress = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        // Do not scroll the page using Space when the toggle is focussed\n        evt.preventDefault();\n      }\n    };\n\n    const handleKeyUp = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        toggleInteraction();\n      }\n    };\n\n    return (\n      <div\n        class={clsx(\n          'utrecht-form-toggle',\n          checked && 'utrecht-form-toggle--checked',\n          !checked && 'utrecht-form-toggle--not-checked',\n          disabled && 'utrecht-form-toggle--disabled',\n        )}\n        tabIndex={disabled ? null : 0}\n        role=\"switch\"\n        aria-disabled={disabled ? 'true' : null}\n        onClick={handleClick}\n        onKeyPress={handleKeyPress}\n        onKeyUp={handleKeyUp}\n      >\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n        <div\n          class={clsx(\n            'utrecht-form-toggle__track',\n            checked && 'utrecht-form-toggle__track--checked',\n            !checked && 'utrecht-form-toggle__track--not-checked',\n            disabled && 'utrecht-form-toggle__track--disabled',\n          )}\n        >\n          <div\n            class={clsx(\n              'utrecht-form-toggle__thumb',\n              checked && 'utrecht-form-toggle__thumb--checked',\n              !checked && 'utrecht-form-toggle__thumb--not-checked',\n              disabled && 'utrecht-form-toggle__thumb--disabled',\n            )}\n          ></div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/form.css

@@ -1,17 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-form {
   display: block;

package/dist/collection/components/form.js

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 export class Form {

package/dist/collection/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/components/form.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YAC/E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7F,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM;YAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS;gBAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;YACN,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-form',\n  styleUrl: 'form.scss',\n  shadow: false,\n})\nexport class Form {\n  @Prop() action?: string;\n  @Prop() autocomplete?: string;\n  @Prop() enctype?: string;\n  @Prop() method?: string;\n  @Prop({ attribute: 'novalidate' }) noValidate?: string;\n  @Prop() target?: string;\n  render() {\n    const { action, autocomplete, enctype, method, target, noValidate } = this;\n    const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n      const c = parseInt(n, 10);\n      return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n    });\n\n    return (\n      <form\n        action={action}\n        aria-labelledby={headingId}\n        autocomplete={autocomplete}\n        enctype={enctype}\n        method={method}\n        novalidate={noValidate}\n        target={target}\n      >\n        <div class=\"utrecht-form__heading\" id={headingId}>\n          <slot name=\"heading\" />\n        </div>\n        <slot></slot>\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/components/form.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YAC/E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7F,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM;YAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS;gBAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;YACN,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-form',\n  styleUrl: 'form.scss',\n  shadow: false,\n})\nexport class Form {\n  @Prop() action?: string;\n  @Prop() autocomplete?: string;\n  @Prop() enctype?: string;\n  @Prop() method?: string;\n  @Prop({ attribute: 'novalidate' }) noValidate?: string;\n  @Prop() target?: string;\n  render() {\n    const { action, autocomplete, enctype, method, target, noValidate } = this;\n    const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n      const c = parseInt(n, 10);\n      return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n    });\n\n    return (\n      <form\n        action={action}\n        aria-labelledby={headingId}\n        autocomplete={autocomplete}\n        enctype={enctype}\n        method={method}\n        novalidate={noValidate}\n        target={target}\n      >\n        <div class=\"utrecht-form__heading\" id={headingId}>\n          <slot name=\"heading\" />\n        </div>\n        <slot></slot>\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/heading-1.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-2.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-3.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-4.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-5.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-6.css

@@ -1,16 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

package/dist/collection/components/heading-group.css

@@ -1,13 +1,12 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2022 Gemeente Utrecht
- * Copyright (c) 2022 Robbert Broersma
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   display: contents;

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

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 export class HeadingGroup {

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

@@ -1 +1 @@
-{"version":3,"file":"heading-group.js","sourceRoot":"","sources":["../../src/components/heading-group.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\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,"file":"heading-group.js","sourceRoot":"","sources":["../../src/components/heading-group.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-group',\n  styleUrl: 'heading-group.scss',\n  shadow: true,\n})\nexport class HeadingGroup {\n  render() {\n    return (\n      <hgroup>\n        <slot></slot>\n      </hgroup>\n    );\n  }\n}\n"]}