@utrecht/web-component-library-stencil 1.0.0-alpha.39 → 1.0.0-alpha.391

package/dist/collection/contact-card-template/index.css

@@ -0,0 +1,238 @@
+/**
+ * @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
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @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
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
+ * 
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
+ */
+.utrecht-link {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
+  color: var(--utrecht-link-color, blue);
+  text-decoration: var(--utrecht-link-text-decoration, underline);
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
+}
+
+.utrecht-link--icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
+.utrecht-link:visited,
+.utrecht-link--visited {
+  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:link:hover,
+.utrecht-link--hover {
+  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link:link:active,
+.utrecht-link--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link--focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link--focus-visible {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+
+.utrecht-link:focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+
+.utrecht-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+
+.utrecht-link--telephone {
+  white-space: nowrap;
+}
+
+.utrecht-link--box-content {
+  color: unset;
+  display: inline-block;
+  text-decoration: unset;
+  text-decoration-skip-ink: unset;
+  text-decoration-thickness: unset;
+  text-underline-offset: unset;
+}
+
+.utrecht-link--placeholder {
+  color: var(--utrecht-link-placeholder-color, var(--utrecht-link-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+  text-decoration: none;
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-contact-card {
+  --utrecht-document-color: currentColor;
+  --utrecht-heading-color: currentColor;
+  --utrecht-link-color: currentColor;
+  --utrecht-link-focus-color: currentColor;
+  --utrecht-link-hover-color: currentColor;
+  --utrecht-link-active-color: currentColor;
+  --utrecht-link-visited-color: currentColor;
+  --utrecht-heading-2-text-transform: uppercase;
+  --utrecht-heading-2-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-contact-card-background-color: hsl(207 60% 91%);
+  --utrecht-contact-card-background-color-2: hsl(207 60% 96%);
+  background-color: #dae9f6;
+  background-image: linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));
+  background-position-x: 66%;
+  background-size: 200%;
+  color: var(--utrecht-color-black);
+  padding-block-end: var(--utrecht-space-block-xl);
+  padding-block-start: var(--utrecht-space-block-xl);
+  padding-inline-end: var(--utrecht-space-inline-xl);
+  padding-inline-start: var(--utrecht-space-inline-xl);
+}
+
+.utrecht-contact-card__content {
+  display: flex;
+  flex-direction: row;
+}
+
+.utrecht-contact-card__section {
+  margin-block-start: var(--utrecht-space-row-lg);
+  width: 100%;
+}
+
+.utrecht-contact-card__telephone {
+  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-2xl-font-size);
+}

package/dist/collection/contact-card-template/index.stencil.js

@@ -0,0 +1,25 @@
+import { Component, h } from '@stencil/core';
+export class ContactCardTemplate {
+  render() {
+    return (h("div", { class: "utrecht-contact-card" },
+      h("utrecht-heading-2", null, "Hulp en contact"),
+      h("div", { class: "utrecht-contact-card__content" },
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "Telefoon"),
+          h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" },
+            h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")),
+          h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")),
+        h("div", { class: "utrecht-contact-card__section" },
+          h("utrecht-heading-3", null, "E-mail"),
+          h("utrecht-paragraph", null,
+            h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+  }
+  static get is() { return "utrecht-contact-card-template"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}

package/dist/collection/custom-checkbox/index.css

@@ -0,0 +1,195 @@
+/**
+ * @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 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--custom,
+.utrecht-custom-checkbox {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-color: var(--utrecht-custom-checkbox-border-color);
+  border-style: solid;
+  border-width: var(--utrecht-custom-checkbox-border-width);
+  cursor: var(--utrecht-action-activate-cursor, revert);
+  height: var(--utrecht-custom-checkbox-size);
+  margin-block-start: var(--utrecht-custom-checkbox-margin-block-start);
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  vertical-align: top;
+  width: var(--utrecht-custom-checkbox-size);
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--checked,
+.utrecht-custom-checkbox--checked {
+  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--disabled,
+.utrecht-custom-checkbox--disabled {
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
+.utrecht-custom-checkbox--disabled:checked {
+  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
+.utrecht-custom-checkbox--disabled:active {
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
+.utrecht-custom-checkbox--indeterminate {
+  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--invalid,
+.utrecht-custom-checkbox--invalid {
+  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--active,
+.utrecht-custom-checkbox--active {
+  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--hover,
+.utrecht-custom-checkbox--hover {
+  background-color: var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--focus,
+.utrecht-custom-checkbox--focus {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
+.utrecht-custom-checkbox--focus-visible {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
+.utrecht-custom-checkbox--html-input:disabled {
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
+.utrecht-custom-checkbox--html-input:disabled:checked {
+  background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
+.utrecht-custom-checkbox--html-input:disabled:active {
+  border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,
+.utrecht-custom-checkbox--html-input:hover {
+  background-color: var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));
+  border-color: var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
+.utrecht-custom-checkbox--html-input:focus {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
+.utrecht-custom-checkbox--html-input:focus-visible {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
+.utrecht-custom-checkbox--html-input:invalid,
+.utrecht-custom-checkbox--html-input[aria-invalid=true] {
+  border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
+.utrecht-custom-checkbox--html-input:active {
+  background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
+.utrecht-custom-checkbox--html-input:checked {
+  background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
+.utrecht-custom-checkbox--html-input:indeterminate {
+  background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+  border-color: var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));
+  border-width: var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/custom-checkbox/index.stencil.js

@@ -0,0 +1,107 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class CustomCheckbox {
+  render() {
+    const { checked, required, disabled, indeterminate, invalid } = this;
+    return (h("input", { "aria-invalid": invalid ? 'true' : null, class: clsx('utrecht-custom-checkbox', 'utrecht-custom-checkbox--html-input', invalid && 'utrecht-custom-checkbox__box--invalid'), type: "checkbox", checked: checked, required: required, indeterminate: indeterminate, disabled: disabled }));
+  }
+  static get is() { return "utrecht-custom-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/digid-button/index.css

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-digid-button {
+  --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
+  --utrecht-logo-max-inline-size: var(--utrecht-digid-button-block-size, 50px);
+  block-size: var(--utrecht-digid-button-block-size, 50px);
+  display: inline-flex;
+  gap: var(--utrecht-space-inline-sm);
+}
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

package/dist/collection/digid-button/index.stencil.js

@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+export class DigidButton {
+  render() {
+    return (h("div", { class: "utrecht-digid-button" },
+      h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }),
+      h("slot", null)));
+  }
+  static get is() { return "utrecht-digid-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/digid-logo/index.css

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+:host {
+  display: inline;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+svg {
+  height: 100%;
+  max-height: var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));
+  max-width: var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));
+  width: 100%;
+}

package/dist/collection/digid-logo/index.stencil.js

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Rijksoverheid
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h } from '@stencil/core';
+export class DigidLogo {
+  render() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 150 150" },
+      h("title", null, "DigiD"),
+      h("path", { d: "M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z" }),
+      h("path", { d: "M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z", fill: "#FFFFFF" }),
+      h("path", { d: "M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z", fill: "#E17000" })));
+  }
+  static get is() { return "utrecht-digid-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+}