@utrecht/component-library-css 1.0.0-alpha.111 → 1.0.0-alpha.115

package/dist/bem.css

@@ -370,14 +370,14 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-button:active,
+.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));
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
-.utrecht-button--focus-visible,
-.utrecht-button:focus-visible {
+.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: 0;
@@ -385,14 +385,21 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button--focus,
-.utrecht-button:not(.utrecht-button--disabled):focus {
+.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));
   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(.utrecht-button--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));
   color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
   transform: scale(var(--utrecht-button-focus-transform-scale, 1));
@@ -421,13 +428,26 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-checkbox--focus-visible, .utrecht-checkbox--html-input:focus-visible {
+.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: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.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: 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
@@ -456,7 +476,7 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-checkbox--focus-visible, .utrecht-checkbox--html-input:focus-visible {
+.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: 0;
@@ -464,6 +484,19 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.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: 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
@@ -554,7 +587,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-checkbox-focus-color, var(--utrecht-custom-checkbox-color));
 }
 
-.utrecht-custom-checkbox__box--focus-visible, .utrecht-custom-checkbox__input:focus-visible ~ .utrecht-custom-checkbox__box {
+.utrecht-custom-checkbox__box--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: 0;
@@ -562,6 +595,20 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
+  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: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-custom-checkbox__input:focus:not(:focus-visible) ~ .utrecht-custom-checkbox__box {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 .utrecht-custom-checkbox__icon--checked,
 .utrecht-custom-checkbox__icon--indeterminate {
   display: none;
@@ -1181,14 +1228,12 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link:focus,
-.utrecht-link--focus {
+.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));
 }
 
-.utrecht-link:focus-visible,
-.utrecht-link--focus-visible {
+.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: 0;
@@ -1196,6 +1241,12 @@ ol.utrecht-breadcrumb__list {
   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 {
@@ -1222,6 +1273,11 @@ ol.utrecht-breadcrumb__list {
   order: 2;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-logo {
   max-height: var(--utrecht-logo-max-height, 192px);
   max-width: var(--utrecht-logo-max-width, 96px);
@@ -1278,8 +1334,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-mapcontrolbutton-disabled-color);
 }
 
-.utrecht-mapcontrolbutton--focus-visible,
-.utrecht-mapcontrolbutton:focus-visible {
+.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
   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: 0;
@@ -1287,11 +1342,18 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-mapcontrolbutton--focus,
-.utrecht-mapcontrolbutton:not(.utrecht-mapcontrolbutton--disabled):focus {
+.utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-mapcontrolbutton--disabled) {
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
 }
 
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-mapcontrolbutton:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 .utrecht-mapcontrolbutton--hover:not(:disabled),
 .utrecht-mapcontrolbutton:hover:not(:disabled):not(.utrecht-mapcontrolbutton--disabled) {
   background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
@@ -1304,6 +1366,10 @@ ol.utrecht-breadcrumb__list {
   padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1340,7 +1406,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
 }
 
-.utrecht-menulijst__link--focus-visible {
+.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__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: 0;
@@ -1348,10 +1414,15 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-menulijst__link: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 A Herring
  */
 /**
  * @license EUPL-1.2
@@ -1409,14 +1480,14 @@ ol.utrecht-breadcrumb__list {
   text-decoration: underline;
 }
 
-.utrecht-topnav__link--focus {
+.utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
   background-color: var(--utrecht-topnav-link-focus-background-color);
   /*#ffd633*/
   color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
   text-decoration: var(--utrecht-topnav-link-focus-text-decoration, var(--utrecht-topnav-link-text-decoration, underline));
 }
 
-.utrecht-topnav__link--focus-visible {
+.utrecht-topnav__link--focus-visible, .utrecht-topnav__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: 0;
@@ -1424,11 +1495,12 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 A Herring
- */
+.utrecht-topnav__link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -1660,8 +1732,7 @@ ol.utrecht-breadcrumb__list {
   display: none;
 }
 
-.utrecht-sidenav__link:focus-visible,
-.utrecht-sidenav__link--focus-visible {
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__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: 0;
@@ -1669,10 +1740,15 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-sidenav__link: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 A Herring
  */
 /**
  * @license EUPL-1.2
@@ -1730,14 +1806,12 @@ ol.utrecht-breadcrumb__list {
   text-decoration: underline;
 }
 
-.utrecht-topnav__link:focus,
-.utrecht-topnav__link--focus {
+.utrecht-topnav__link--focus, .utrecht-topnav__link:focus {
   background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color));
   color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
 }
 
-.utrecht-topnav__link:focus-visible,
-.utrecht-topnav__link--focus-visible {
+.utrecht-topnav__link--focus-visible, .utrecht-topnav__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: 0;
@@ -1745,6 +1819,12 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-topnav__link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1911,15 +1991,6 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color));
 }
 
-.utrecht-pagination__relative-link--focus-visible,
-.utrecht-pagination__relative-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: 0;
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-width: var(--utrecht-focus-outline-width, 0);
-}
-
 .utrecht-pagination__relative-link--hover,
 .utrecht-pagination__relative-link:hover {
   background-color: var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));
@@ -1961,6 +2032,22 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
 }
 
+.utrecht-pagination__page-link:focus,
+.utrecht-pagination__relative-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: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-pagination__page-link:focus:not(:focus-visible),
+.utrecht-pagination__relative-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -2032,7 +2119,7 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-radio-button--focus-visible, .utrecht-radio-button--html-input:focus-visible {
+.utrecht-radio-button--focus-visible, .utrecht-radio-button--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: 0;
@@ -2040,6 +2127,12 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-radio-button--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -2126,7 +2219,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
 }
 
-.utrecht-select--focus-visible, .utrecht-select--html-select:focus-visible {
+.utrecht-select--focus-visible, .utrecht-select--html-select: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: 0;
@@ -2144,6 +2237,11 @@ ol.utrecht-breadcrumb__list {
 .utrecht-select--html-select {
   /* <select> does not support :read-only */
 }
+.utrecht-select--html-select:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -2320,7 +2418,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
 }
 
-.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea:focus-visible {
+.utrecht-textarea--focus-visible, .utrecht-textarea--html-textarea: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: 0;
@@ -2339,6 +2437,11 @@ ol.utrecht-breadcrumb__list {
   opacity: 100%;
 }
 
+.utrecht-textarea--html-textarea:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -2387,7 +2490,7 @@ ol.utrecht-breadcrumb__list {
   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-visible {
+.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: 0;
@@ -2419,6 +2522,11 @@ ol.utrecht-breadcrumb__list {
   font-variant-ligatures: none;
 }
 
+.utrecht-textbox--html-input:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma