@utrecht/web-component-library-stencil 1.0.0-alpha.21 → 1.0.0-alpha.212

package/dist/collection/badge-status/{bem.css → web-component/index.css}

@@ -6,16 +6,22 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-badge, .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);
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
-  font-style: normal;
+  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);
@@ -44,6 +50,11 @@
   color: var(--utrecht-feedback-safe-fill-color, white);
 }
 
+.utrecht-badge-status--neutral {
+  background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
+  color: var(--utrecht-feedback-neutral-fill-color, white);
+}
+
 .utrecht-badge-status--valid {
   background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, red));
   color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
@@ -72,4 +83,12 @@
 .utrecht-badge-status--inactive {
   background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, #ffa600));
   color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

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

@@ -2,19 +2,19 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-import { Component, Prop, h } from "@stencil/core";
+import { Component, h, Prop } from '@stencil/core';
 export class BadgeStatus {
   render() {
-    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status}` },
+    return (h("div", { class: `utrecht-badge-status utrecht-badge-status--${this.status || 'neutral'}` },
       h("slot", null)));
   }
   static get is() { return "utrecht-badge-status"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["bem.scss"]
+    "$": ["index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["bem.css"]
+    "$": ["index.css"]
   }; }
   static get properties() { return {
     "status": {

package/dist/collection/badge-status/web-component/template.js

@@ -0,0 +1,4 @@
+export const BadgeStatus = ({ status = '', textContent = '' }) =>
+  status
+    ? `<utrecht-badge-status status="${status}">${textContent}</utrecht-badge-status>`
+    : `<utrecht-badge-status>${textContent}</utrecht-badge-status>`;

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

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  textContent: '',
+  attribution: null,
+  distanced: false,
+};
+
+export const Blockquote = ({ textContent = '', attribution = null, distanced = false }) =>
+  `<blockquote class="${clsx('utrecht-blockquote', { 'utrecht-blockquote--distanced': distanced })}">
+  <div class="utrecht-blockquote__content">
+    <p>${textContent}</p>${
+    attribution
+      ? `
+    <div class="utrecht-blockquote__attribution">${attribution}</div>`
+      : ''
+  }
+  </div>
+</blockquote>`;

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

@@ -0,0 +1,6 @@
+export const Blockquote = ({ textContent = '' }) =>
+  `<section class="utrecht-html">
+  <blockquote>
+    <p>${textContent}</p>
+  </blockquote>
+</section>`;

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

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const exampleItems = [
+  { href: 'https://example.com/', title: 'Home', focus: true },
+  { href: 'https://example.com/a/', title: 'Wonen en leven' },
+  { href: 'https://example.com/a/b/', title: 'Afval' },
+  { href: 'https://example.com/a/b/c/', title: "Kliko's", current: true },
+];
+
+export const Breadcrumb = ({ items, microdata, variant }) => `<nav class="${clsx(
+  'utrecht-breadcrumb',
+  variant === 'arrows' && 'utrecht-breadcrumb--arrows',
+)}">
+  <ol class="utrecht-breadcrumb__list"${
+    microdata ? ' itemscope itemtype="https://schema.org/BreadcrumbList"' : ''
+  }>${items
+  .map(
+    ({ href, title, current, focus }, index) => `
+    <li class="utrecht-breadcrumb__item"${
+      microdata ? ' itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"' : ''
+    }>
+      <a class="${clsx(
+        'utrecht-breadcrumb__link',
+        focus && 'utrecht-breadcrumb__link--focus',
+        'utrecht-link',
+        current && 'utrecht-link--current',
+        focus && 'utrecht-link--focus',
+      )}" href="${href}"${current ? ' aria-current="location"' : ''}${microdata ? ' itemprop="item"' : ''}>
+      <span class="utrecht-breadcrumb__text"${microdata ? ' itemprop="name"' : ''}>${title}</span>
+      ${microdata ? `<meta itemprop="position" content="${index + 1}" />` : ''}
+    </a>
+      </li>`,
+  )
+  .join('\n')}
+  </ol>
+</nav>`;

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

@@ -0,0 +1,242 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-breadcrumb {
+  --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
+  --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
+  --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
+  --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
+  --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
+  --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
+  --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
+  --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
+  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
+  font-family: var(--utrecht-document-font-family, inherit);
+  font-size: var(--utrecht-breadcrumb-font-size);
+  text-transform: var(--utrecht-document-text-transform, inherit);
+}
+
+.utrecht-breadcrumb__list {
+  block-size: var(--utrecht-breadcrumb-block-size);
+  display: flex;
+}
+
+ol.utrecht-breadcrumb__list {
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-breadcrumb__item {
+  block-size: 100%;
+}
+
+.utrecht-breadcrumb__link {
+  background-color: var(--utrecht-breadcrumb-link-background-color);
+  display: block;
+  padding-block-end: var(--utrecht-breadcrumb-item-padding-block-end, 8px);
+  padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
+  padding-inline-end: var(--utrecht-breadcrumb-item-padding-inline-end, 8px);
+  padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
+}
+
+/* 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);
+}
+
+/**
+ * @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.
+
+*/
+.utrecht-link {
+  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: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:active,
+.utrecht-link--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link--focus, .utrecht-link:focus {
+  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, .utrecht-link: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-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link--telephone {
+  white-space: nowrap;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}

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

@@ -0,0 +1,62 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+import { Component, h, Prop } from '@stencil/core';
+import clsx from 'clsx';
+export class Breadcrumb {
+  render() {
+    const { json, variant } = this;
+    console.log(json);
+    const items = json ? JSON.parse(json) : [];
+    return (h("nav", { class: clsx('utrecht-breadcrumb', variant === 'arrows' && 'utrecht-breadcrumb--arrows') },
+      h("ol", { class: "utrecht-breadcrumb__list", itemscope: true, itemtype: "https://schema.org/BreadcrumbList" }, items.map(({ href, title, current }, index) => (h("li", { key: href, class: "utrecht-breadcrumb__item", itemscope: true, itemtype: "https://schema.org/ListItem", itemprop: "itemListElement" },
+        h("a", { class: clsx('utrecht-breadcrumb__link', 'utrecht-link', current && 'utrecht-link--current'), href: href, "aria-current": current ? 'location' : null, itemprop: "item" },
+          h("span", { class: "utrecht-breadcrumb__text", itemprop: "name" }, title),
+          h("meta", { itemprop: "position", content: index + 1 }))))))));
+  }
+  static get is() { return "utrecht-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["index.css"]
+  }; }
+  static get properties() { return {
+    "json": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "json",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,4 @@
+export const Breadcrumb = ({ items, variant }) => {
+  const jsonAttribute = (arg) => JSON.stringify(arg).replace(/"/g, '"');
+  return `<utrecht-breadcrumb json="${jsonAttribute(items)}" variant="${variant}"></utrecht-breadcrumb>`;
+};

package/dist/collection/button/bem.js

@@ -0,0 +1,37 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  active: false,
+  busy: false,
+  disabled: false,
+  focus: false,
+  focusVisible: false,
+  hover: false,
+  textContent: '',
+  type: 'button',
+};
+
+export const Button = ({
+  active = false,
+  busy = false,
+  disabled = false,
+  focus = false,
+  focusVisible = false,
+  hover = false,
+  textContent = '',
+  type = 'button',
+}) =>
+  `<button class="${clsx('utrecht-button', {
+    'utrecht-button--active': active,
+    'utrecht-button--busy': busy,
+    'utrecht-button--hover': hover,
+    'utrecht-button--focus': focus,
+    'utrecht-button--focus-visible': focusVisible,
+    'utrecht-button--disabled': disabled,
+  })}"${disabled ? ' aria-disabled="true"' : ''} type="${type}">${textContent}</button>`;

package/dist/collection/button/html.js

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+export const defaultArgs = {
+  busy: false,
+  disabled: false,
+  focusable: false,
+  textContent: '',
+  type: 'button',
+};
+
+export const Button = ({ busy = false, disabled = false, focusable = false, textContent = '', type = 'button' }) =>
+  `<button type="${type || 'button'}"${busy ? ' aria-busy="true"' : ''}${
+    disabled ? (focusable ? ' aria-disabled="true"' : ' disabled') : ''
+  }>${textContent}</button>`;

package/dist/collection/button/stencil.css

@@ -0,0 +1,106 @@
+/**
+ * @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-primary-action-background-color, var(--utrecht-button-background-color));
+  border-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));
+  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);
+  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));
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
+}