@utrecht/web-component-library-stencil 1.0.0-alpha.214 → 1.0.0-alpha.217

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

@@ -0,0 +1,172 @@
+/**
+ * @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 */
+.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, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  /* 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, .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));
+}
+
+/* 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--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--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)));
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

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

@@ -24,18 +24,35 @@ export class Button {
         handleSubmit();
       }
     };
-    return (h("button", { class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', this.type === 'submit' && 'utrecht-button--submit'), "aria-busy": this.busy ? 'true' : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick },
+    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 {
-    "$": ["stencil.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["stencil.css"]
+    "$": ["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,

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/collection-manifest.json

@@ -6,7 +6,7 @@
     "./badge-data/web-component/index.stencil.js",
     "./badge-status/web-component/index.stencil.js",
     "./breadcrumb/web-component/index.stencil.js",
-    "./button/stencil.js",
+    "./button/web-component/index.stencil.js",
     "./checkbox/web-component/index.stencil.js",
     "./custom-checkbox/web-component/index.stencil.js",
     "./digid-button/web-component/index.stencil.js",

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

@@ -10,7 +10,7 @@ export const defaultArgs = {
 
 export const DigidButton = ({ label = '', textContent = '' }) => `<div class="utrecht-digid-button">
   <utrecht-digid-logo class="utrecht-digid-button__logo"></utrecht-digid-logo>
-  <button class="utrecht-digid-button__button utrecht-button" type="button"${
+  <button class="utrecht-digid-button__button utrecht-button utrecht-button--primary-action" type="button"${
     label ? ` aria-label="${label}"` : ''
   }>${textContent}</button>
 </div>`;

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

@@ -8,7 +8,7 @@ export class DigidButton {
   render() {
     return (h("div", { class: "utrecht-digid-button" },
       h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }),
-      h("utrecht-button", { class: "utrecht-digid-button__button", type: this.type || null },
+      h("utrecht-button", { appearance: "primary-action-button", class: "utrecht-digid-button__button", type: this.type || null },
         h("slot", null))));
   }
   static get is() { return "utrecht-digid-button"; }

package/dist/collection/html-content/web-component/index.css

@@ -71,19 +71,22 @@
 .utrecht-html input[type=reset i],
 .utrecht-html input[type=submit i],
 .utrecht-html button {
-  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
+  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);
-  color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
+  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);
-  min-block-size: var(--utrecht-button-min-block-size, auto);
-  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  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);
@@ -179,6 +182,90 @@
   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-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--primary-action[type=submit i]: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-html input.utrecht-button--primary-action[type=button i]:disabled,
+.utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
+.utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
+.utrecht-html button.utrecht-button--primary-action:disabled,
+.utrecht-button--primary-action.utrecht-button--disabled,
+.utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
+  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--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-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--secondary-action[type=submit i]: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-html input.utrecht-button--secondary-action[type=button i]:disabled,
+.utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
+.utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
+.utrecht-html button.utrecht-button--secondary-action:disabled,
+.utrecht-button--secondary-action.utrecht-button--disabled,
+.utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
+  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--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-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input.utrecht-button--subtle[type=submit i]: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-html input.utrecht-button--subtle[type=button i]:disabled,
+.utrecht-html input.utrecht-button--subtle[type=reset i]:disabled,
+.utrecht-html input.utrecht-button--subtle[type=submit i]:disabled,
+.utrecht-html button.utrecht-button--subtle:disabled,
+.utrecht-button--subtle.utrecht-button--disabled,
+.utrecht-html button.utrecht-button--subtle[aria-disabled=true] {
+  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)));
+}
+
 /* override the `:focus` selector above */
 /* stylelint-disable-next-line no-descending-specificity */
 /**
@@ -596,6 +683,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link--focus, .utrecht-html a: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));
   text-decoration-skip: none;

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

@@ -11,7 +11,7 @@ export const defaultArgs = {
 
 export const LogoButton = ({ label = '', textContent = '', logo = '' }) => `<div class="utrecht-logo-button">
   <utrecht-${logo}-logo class="utrecht-logo-button__logo"></utrecht-${logo}-logo>
-  <button class="utrecht-logo-button__button utrecht-button" type="button"${
+  <button class="utrecht-logo-button__button utrecht-button utrecht-button--primary-action" type="button"${
     label ? ` aria-label="${label}"` : ''
   }>${textContent}</button>
 </div>`;

package/dist/collection/search-bar/css/template.js

@@ -11,5 +11,5 @@ export const SearchBar = ({
   value,
 }) => `<form class="utrecht-search-bar" role="search" aria-label="${formLabel}">
   <input type="search" class="utrecht-search-bar__input utrecht-textbox utrecht-textbox utrecht-textbox--html-input" name="q" autocomplete="off" spellcheck="false" value="${value}" aria-label="${inputLabel}">
-  <button type="submit" value="Zoeken" class="utrecht-search-bar__button utrecht-button">${buttonLabel}</button>
+  <button type="submit" value="Zoeken" class="utrecht-search-bar__button utrecht-button utrecht-button--primary-action">${buttonLabel}</button>
 </form>`;

package/dist/collection/templates/contact-card-template/web-component/index.css

@@ -107,6 +107,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .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));
   text-decoration-skip: none;