@utrecht/web-component-library-stencil 1.0.0-alpha.22 → 1.0.0-alpha.220

package/dist/collection/button/web-component/index.css

@@ -0,0 +1,255 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-button {
+  background-color: var(--utrecht-button-background-color);
+  border-color: var(--utrecht-button-border-color, transparent);
+  border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
+  border-radius: var(--utrecht-button-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-button-border-width, 0);
+  border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
+  color: var(--utrecht-button-color);
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  line-height: var(--utrecht-button-line-height);
+  min-block-size: var(--utrecht-button-min-block-size, 44px);
+  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+}
+
+.utrecht-button--distanced {
+  margin-block-end: var(--utrecht-button-margin-block-end);
+  margin-block-start: var(--utrecht-button-margin-block-start);
+  margin-inline-end: var(--utrecht-button-margin-inline-end);
+  margin-inline-start: var(--utrecht-button-margin-inline-start);
+}
+
+.utrecht-button--submit {
+  /* lower priority specificty than busy and disabled cursor */
+  cursor: var(--utrecht-action-submit-cursor);
+}
+
+.utrecht-button--busy {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+
+.utrecht-button:disabled,
+.utrecht-button--disabled {
+  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--active {
+  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--focus-visible {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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-button--focus {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+}
+
+.utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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);
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-button--hover:not(:disabled),
+.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
+  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
+}
+
+.utrecht-button--primary-action {
+  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
+  border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
+  color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--primary-action.utrecht-button--hover:not(:disabled),
+.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
+  border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
+  color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
+}
+
+.utrecht-button--primary-action.utrecht-button:disabled,
+.utrecht-button--primary-action.utrecht-button--disabled {
+  background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
+  border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
+  color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
+}
+
+.utrecht-button--primary-action:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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);
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button--primary-action:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-button--secondary-action {
+  background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
+  border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
+  color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--secondary-action.utrecht-button--hover:not(:disabled),
+.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
+  border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
+  color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
+}
+
+.utrecht-button--secondary-action.utrecht-button:disabled,
+.utrecht-button--secondary-action.utrecht-button--disabled {
+  background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
+  border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
+  color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
+}
+
+.utrecht-button--secondary-action:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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);
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button--secondary-action:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-button--subtle {
+  background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
+  border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
+  color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--subtle.utrecht-button--hover:not(:disabled),
+.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
+  border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
+  color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
+}
+
+.utrecht-button--subtle.utrecht-button:disabled,
+.utrecht-button--subtle.utrecht-button--disabled {
+  background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
+  border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
+  color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
+}
+
+.utrecht-button--subtle:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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);
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button--subtle:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/button/web-component/index.stencil.js

@@ -0,0 +1,140 @@
+import { Component, Element, Event, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Button {
+  render() {
+    const handleReset = () => {
+      var _a, _b;
+      const event = this.utrechtRequestReset.emit();
+      if (!event.defaultPrevented) {
+        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.reset();
+      }
+    };
+    const handleSubmit = () => {
+      var _a, _b;
+      const event = this.utrechtRequestSubmit.emit();
+      if (!event.defaultPrevented) {
+        (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+      }
+    };
+    const handleClick = () => {
+      if (this.type === 'reset') {
+        handleReset();
+      }
+      else if (this.type === 'submit') {
+        handleSubmit();
+      }
+    };
+    return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick },
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "appearance",
+      "reflect": false
+    },
+    "busy": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "busy",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "utrechtRequestReset",
+      "name": "utrechtRequestReset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "utrechtRequestSubmit",
+      "name": "utrechtRequestSubmit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/button/web-component/template.js

@@ -0,0 +1,44 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const defaultArgs = {
+  busy: false,
+  disabled: false,
+  textContent: '',
+  type: '',
+};
+
+export const argTypes = {
+  appearance: {
+    description: 'Appearance',
+    control: { type: 'select' },
+    options: ['', 'button', 'primary-action-button', 'secondary-action-button', 'subtle-button'],
+  },
+  busy: {
+    description: 'Busy',
+    control: 'boolean',
+  },
+  disabled: {
+    description: 'Disabled',
+    control: 'boolean',
+  },
+  textContent: {
+    description: 'Button text',
+    control: 'text',
+  },
+  type: {
+    description: 'Type',
+    type: {
+      name: 'enum',
+    },
+    options: ['', 'button', 'reset', 'submit'],
+  },
+};
+
+export const Button = ({ appearance = '', busy = false, disabled = false, textContent = '', type = '' }) =>
+  `<utrecht-button${appearance ? ` appearance="${appearance}"` : ''}${busy ? ' busy="true"' : ''}${
+    disabled ? ' disabled' : ''
+  }${type ? ` type="${type}"` : ''}>${textContent}</utrecht-button>`;

package/dist/collection/button-group/css/template.js

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  direction: 'horizontal',
+  innerHTML: '',
+};
+
+export const ButtonGroup = ({ innerHTML = '', direction = 'horizontal' }) =>
+  `<div class="${clsx(
+    'utrecht-button-group',
+    direction === 'horizontal' && 'utrecht-button-group--horizontal',
+    direction === 'vertical' && 'utrecht-button-group--vertical',
+  )}" role="group">${innerHTML}</div>`;

package/dist/collection/button-link/css/template.js

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  external: false,
+  hover: false,
+  href: '',
+  focus: false,
+  focusVisible: false,
+  textContent: '',
+};
+
+export const ButtonLink = ({
+  external = false,
+  hover = false,
+  href = '',
+  focus = false,
+  focusVisible = false,
+  textContent = '',
+}) =>
+  `<a role="button" href="${href}" class="${clsx(
+    'utrecht-button-link',
+    hover && 'utrecht-button-link--hover',
+    focus && 'utrecht-button-link--focus',
+    focusVisible && 'utrecht-button-link--focus-visible',
+  )}"${external ? ' rel="external noopener noreferrer"' : ''}>${textContent}</a>`;

package/dist/collection/checkbox/css/template.js

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+};
+
+export const Checkbox = ({ checked = false, disabled = false }) =>
+  `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
+    'utrecht-checkbox',
+    'utrecht-checkbox--html-input',
+    checked && 'utrecht-checkbox--checked',
+    disabled && 'utrecht-checkbox--disabled',
+  )}">`;

package/dist/collection/checkbox/html/template.js

@@ -0,0 +1,14 @@
+export const defaultArgs = {
+  checked: false,
+  disabled: false,
+  invalid: false,
+  required: false,
+  value: '',
+};
+
+export const Checkbox = ({ checked = false, disabled = false, invalid = false, required = false, value = '' }) =>
+  `<div class="utrecht-html">
+  <input type="checkbox"${checked ? ' checked' : ''}${invalid ? ' aria-invalid="true"' : ''}${
+    disabled ? ' disabled' : ''
+  }${required ? ' required' : ''}${value ? ` value="${value}"` : ''}>
+</div>`;

package/dist/collection/checkbox/web-component/index.css

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @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 */
+/**
+ * @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 */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox {
+  margin-block-end: 0;
+  /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-checkbox--focus-visible {
+  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-checkbox--html-input:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-checkbox--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-checkbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}