@utrecht/web-component-library-stencil 1.0.0-alpha.2 → 1.0.0-alpha.201

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

@@ -0,0 +1,133 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-form-field-textbox {
+  font-family: var(--utrecht-document-font-family, inherit);
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.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));
+  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);
+  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));
+  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-textbox {
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
+  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
+  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
+  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
+  border-style: solid;
+  box-sizing: border-box;
+  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
+  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
+  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
+  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
+  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
+  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
+  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
+  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
+  width: 100%;
+}
+
+.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
+}
+
+.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled {
+  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-textbox--focus, .utrecht-textbox--html-input:focus {
+  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+}
+
+.utrecht-textbox--focus-visible, .utrecht-textbox--html-input:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
+  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+}
+
+.utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder {
+  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+  font-style: var(--utrecht-form-input-placeholder-font-style);
+  opacity: 100%;
+}
+
+.utrecht-textbox--numeric {
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.utrecht-textbox--password {
+  font-variant-ligatures: none;
+  font-variant-numeric: slashed-zero;
+}
+
+.utrecht-textbox--url {
+  font-variant-ligatures: none;
+}
+
+.utrecht-textbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

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

@@ -0,0 +1,300 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class FormFieldTextbox {
+  constructor() {
+    this.autoComplete = '';
+    this.disabled = false;
+    this.invalid = false;
+    this.min = '';
+    this.max = '';
+    this.pattern = '';
+    this.placeholder = '';
+    this.readOnly = false;
+    this.required = false;
+    this.type = '';
+    this.value = '';
+  }
+  render() {
+    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
+    return (h("div", { class: "utrecht-form-field-textbox" },
+      h("input", { id: "input", class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+          this.value = evt.target.value;
+          this.utrechtInput.emit(evt);
+        } }),
+      h("label", { class: "utrecht-form-field-textbox__label utrecht-form-label", htmlFor: "input" },
+        h("slot", null))));
+  }
+  static get is() { return "utrecht-form-field-textbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stencil.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stencil.css"]
+  }; }
+  static get properties() { return {
+    "autoComplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autocomplete",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "max": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pattern",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get events() { return [{
+      "method": "utrechtBlur",
+      "name": "utrechtBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtChange",
+      "name": "utrechtChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtFocus",
+      "name": "utrechtFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtInput",
+      "name": "utrechtInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/form-fieldset/bem.js

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const FormFieldset = ({ content = '', legend = '' }) =>
+  `<div class="utrecht-form-fieldset">
+  ${legend ? `<div class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--distanced">${legend}</div>` : ''}
+  ${content}
+</div>`;

package/dist/collection/form-label/bem.js

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  textContent: '',
+  type: null,
+};
+
+export const FormLabel = ({ checked = false, disabled = false, textContent = '', type = null }) =>
+  `<span class="${clsx(
+    'utrecht-form-label',
+    type === 'checkbox' && 'utrecht-form-label--checkbox',
+    checked && 'utrecht-form-label--checked',
+    disabled && 'utrecht-form-label--disabled',
+    type === 'radio' && 'utrecht-form-label--radio',
+  )}">${textContent}</span>`;

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

@@ -0,0 +1,47 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  focus: false,
+  hover: false,
+};
+
+export const FormToggle = ({ checked = false, disabled = false, hover = false, focus = false }) =>
+  `<div class="${clsx(
+    'utrecht-form-toggle',
+    checked && 'utrecht-form-toggle--checked',
+    !checked && 'utrecht-form-toggle--not-checked',
+    disabled && 'utrecht-form-toggle--disabled',
+    focus && 'utrecht-form-toggle--focus',
+    hover && 'utrecht-form-toggle--hover',
+  )}" role="switch" tabindex="0"${checked ? ' aria-checked="true"' : ''}${disabled ? ' aria-disabled="true"' : ''}>
+  <div 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',
+  )}">
+    <div 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',
+    )}"></div>
+  </div>
+</div>`;
+
+export const FormToggleCheckbox = ({ checked = false, disabled = false, id }) =>
+  `<div class="${clsx('utrecht-form-toggle', 'utrecht-form-toggle--html-checkbox')}">
+  <input id="${id}" type="checkbox" class="utrecht-form-toggle__checkbox"${checked ? ' checked' : ''}${
+    disabled ? ' disabled' : ''
+  }>
+  <label for="${id}" class="${clsx('utrecht-form-toggle__track')}">
+    <div class="${clsx('utrecht-form-toggle__thumb')}"></div>
+  </label>
+</div>`;

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

@@ -0,0 +1,115 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-form-toggle {
+  align-items: center;
+  border-color: var(--utrecht-form-toggle-border-color, currentColor);
+  border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
+  border-style: var(--utrecht-form-toggle-border-style, solid);
+  border-width: var(--utrecht-form-toggle-border-width, 1px);
+  color: var(--utrecht-form-toggle-color);
+  display: flex;
+  height: var(--utrecht-form-toggle-height, 2em);
+  padding-block-end: var(--utrecht-form-toggle-padding-block-end);
+  padding-block-start: var(--utrecht-form-toggle-padding-block-start);
+  padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
+  padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
+  position: relative;
+  user-select: none;
+  width: var(--utrecht-form-toggle-width, 6em);
+}
+
+.utrecht-form-toggle--focus, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {
+  border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
+  border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
+}
+
+.utrecht-form-toggle--hover, .utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {
+  background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
+  color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
+}
+
+.utrecht-form-toggle--disabled {
+  border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
+  border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-form-toggle__thumb {
+  /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
+  background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
+  border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
+  box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
+  margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
+  margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
+  min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
+  min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
+  z-index: 20;
+}
+
+.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  margin-inline-start: auto;
+}
+
+.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  margin-inline-end: auto;
+}
+
+.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
+  background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
+  box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
+}
+
+.utrecht-form-toggle__track {
+  align-items: center;
+  background-color: var(--utrecht-form-toggle-accent-color);
+  border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
+  background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
+}
+
+.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
+  background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
+  color: var(--utrecht-form-toggle-disabled-color, black);
+}
+
+.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
+  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: -1px !important;
+  overflow: hidden !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
+  outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
+  outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
+  outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
+}
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}