@utrecht/web-component-library-stencil 1.0.0-alpha.218 → 1.0.0-alpha.219

package/dist/cjs/utrecht-textbox.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8c6952a4.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const indexCss = ".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{-moz-appearance:textfield;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){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".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{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{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{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{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{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{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{-moz-appearance:textfield;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: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--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))));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--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}.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--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--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%}:host{display:block}:host([hidden]){display:none !important}";
 
 const Textbox = class {
   constructor(hostRef) {

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

@@ -6,6 +6,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-article {
   max-inline-size: var(--utrecht-article-max-inline-size);
 }

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

@@ -6,6 +6,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-backdrop {
   background-color: var(--utrecht-backdrop-background-color);
   bottom: 0;

package/dist/collection/badge-counter/web-component/index.css

@@ -6,30 +6,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-badge {
-  background-color: var(--utrecht-badge-background-color, black);
-  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
-  color: var(--utrecht-badge-color, white);
-  display: inline-block;
-  font-family: var(--utrecht-document-font-family, sans-serif);
-  font-size: var(--utrecht-badge-font-size, inherit);
-  font-style: var(--utrecht-badge-font-style, normal);
-  /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold);
-  /* no inheritance */
-  line-height: var(--utrecht-badge-line-height);
-  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
-  padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
-  text-decoration: none;
-  /* no inheritance */
-}
-
 .utrecht-badge-counter {
   background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
   border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));

package/dist/collection/badge-data/web-component/index.css

@@ -10,7 +10,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-data {
+.utrecht-badge-data {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
@@ -28,9 +28,6 @@
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-data {
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }

package/dist/collection/badge-status/web-component/index.css

@@ -10,7 +10,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-status {
+.utrecht-badge-status {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
@@ -28,9 +28,6 @@
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-status {
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }

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

@@ -6,6 +6,63 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-breadcrumb--arrows {
+  /* https://css-tricks.com/triangle-breadcrumbs/ */
+  --utrecht-breadcrumb-arrow-size: 24px;
+  overflow: hidden;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
+  padding-inline-end: 0;
+  position: relative;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
+  border-block-end-width: var(--utrecht-breadcrumb-block-size);
+  border-block-start-width: var(--utrecht-breadcrumb-block-size);
+  border-color: transparent;
+  border-style: solid;
+  content: " ";
+  display: block;
+  height: 0;
+  left: 100%;
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
+  border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
+  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
+  z-index: 2;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
+  border-inline-start-color: var(--utrecht-document-background-color);
+  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  margin-inline-start: 1px;
+  z-index: 1;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus {
+  background-color: var(--utrecht-breadcrumb-link-focus-background-color);
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
+  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
+  padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
+}
+
+.utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
+  margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
+}
+
 .utrecht-breadcrumb {
   --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
   --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
@@ -99,6 +156,18 @@ ol.utrecht-breadcrumb__list {
   margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
 }
 
+/**
+ * @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.
@@ -166,6 +235,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `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 */
 .utrecht-link {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
@@ -203,7 +276,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-link:focus {
+.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));
@@ -212,7 +285,21 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-link:focus {
+.utrecht-link--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-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);
   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);

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

@@ -13,6 +13,17 @@
  * 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);
@@ -69,7 +80,7 @@
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
-.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.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);
@@ -78,12 +89,24 @@
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.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) {
@@ -121,6 +144,26 @@
   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));
@@ -142,6 +185,26 @@
   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));
@@ -163,6 +226,26 @@
   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;
 }

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

@@ -12,6 +12,17 @@
  * 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"] */
@@ -21,7 +32,7 @@
 }
 
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled {
+.utrecht-checkbox--disabled {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
@@ -33,6 +44,9 @@
   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);

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

@@ -16,6 +16,85 @@
  * 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;
+}
+
+/**
+ * @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 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"] */
@@ -25,7 +104,7 @@
 }
 
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled {
+.utrecht-checkbox--disabled {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
@@ -37,6 +116,9 @@
   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);
@@ -64,13 +146,6 @@
   width: var(--utrecht-custom-checkbox-size);
 }
 
-.utrecht-custom-checkbox__input,
-.utrecht-custom-checkbox__box {
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
 .utrecht-custom-checkbox__input {
   margin-block-end: 0;
   /* reset native margin for input[type="checkbox"] */
@@ -78,7 +153,10 @@
   margin-inline-end: 0;
   margin-inline-start: 0;
   height: var(--utrecht-custom-checkbox-size);
+  left: 0;
   opacity: 0%;
+  position: absolute;
+  top: 0;
   width: var(--utrecht-custom-checkbox-size);
   z-index: 10;
 }
@@ -95,7 +173,10 @@
   display: flex;
   height: var(--utrecht-custom-checkbox-size);
   justify-content: center;
+  left: 0;
   pointer-events: none;
+  position: absolute;
+  top: 0;
   width: var(--utrecht-custom-checkbox-size);
   z-index: 1000;
 }
@@ -115,7 +196,7 @@
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-custom-checkbox__box--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
+.utrecht-custom-checkbox__box--indeterminate {
   color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
 }
 
@@ -133,7 +214,7 @@
   color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
 }
 
-.utrecht-custom-checkbox__box--focus, .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+.utrecht-custom-checkbox__box--focus {
   background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
   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));
@@ -148,7 +229,15 @@
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
+  color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
+}
+
 .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+  background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
+  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));
+  color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
   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);
@@ -171,7 +260,7 @@
   display: block;
 }
 
-.utrecht-custom-checkbox__box--indeterminate .utrecht-custom-checkbox__icon--indeterminate, .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box .utrecht-custom-checkbox__icon--indeterminate {
+.utrecht-custom-checkbox__box--indeterminate .utrecht-custom-checkbox__icon--indeterminate {
   display: block;
 }
 

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

@@ -6,6 +6,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-document {
   /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
   color: var(--utrecht-document-color, inherit);

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

@@ -10,6 +10,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-form-field {
   font-family: var(--utrecht-document-font-family, inherit);
   max-inline-size: var(--utrecht-form-field-max-inline-size);
@@ -24,6 +28,10 @@
   margin-inline-start: 1ch;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -63,6 +71,17 @@
  * 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"] */
@@ -72,7 +91,7 @@
 }
 
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-checkbox--disabled, .utrecht-checkbox--html-input:disabled {
+.utrecht-checkbox--disabled {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
@@ -84,6 +103,9 @@
   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);