@utrecht/component-library-css 1.0.0-alpha.204 → 1.0.0-alpha.207

package/dist/bem.css

@@ -184,6 +184,28 @@
   color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-backdrop {
+  background-color: var(--utrecht-backdrop-background-color);
+  bottom: 0;
+  color: var(--utrecht-backdrop-color);
+  display: block;
+  left: 0;
+  opacity: var(--utrecht-backdrop-opacity);
+  position: absolute;
+  right: 0;
+  top: 0;
+  user-select: none;
+  z-index: var(--utrecht-backdrop-z-index);
+}
+
+.utrecht-backdrop--viewport {
+  position: fixed;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1494,87 +1516,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: none;
 }
 
-/**
- * @license EUPL-1.2
- * 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-navhtml {
-  font-family: var(--utrecht-font-family-sans-serif);
-}
-
-.utrecht-topnav__list {
-  background-color: var(--utrecht-topnav-list-background-color);
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
-  list-style-image: none;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  overflow: visible;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-.utrecht-topnav__item {
-  border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
-  flex: 1 0 auto;
-  margin-inline-start: 0;
-  text-align: center;
-}
-
-.utrecht-topnav__item li:first-child {
-  border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
-  padding-inline-start: 0;
-}
-
-.utrecht-topnav__link {
-  color: var(--utrecht-topnav-link-color);
-  display: block;
-  padding-block-end: 1rem;
-  padding-block-start: 1rem;
-  text-decoration: none;
-}
-
-.utrecht-topnav__link:hover {
-  background-color: var(--utrecht-topnav-link-hover-background-color);
-  color: var(--utrecht-topnav-link-color);
-  text-decoration: underline;
-}
-
-.utrecht-topnav__link--current {
-  background-color: var(--utrecht-topnav-list-background-active);
-  text-decoration: underline;
-}
-
-.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 {
-  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-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.

package/dist/index.css

@@ -193,6 +193,28 @@
   color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-backdrop {
+  background-color: var(--utrecht-backdrop-background-color);
+  bottom: 0;
+  color: var(--utrecht-backdrop-color);
+  display: block;
+  left: 0;
+  opacity: var(--utrecht-backdrop-opacity);
+  position: absolute;
+  right: 0;
+  top: 0;
+  user-select: none;
+  z-index: var(--utrecht-backdrop-z-index);
+}
+
+.utrecht-backdrop--viewport {
+  position: fixed;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1534,87 +1556,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: none;
 }
 
-/**
- * @license EUPL-1.2
- * 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-navhtml {
-  font-family: var(--utrecht-font-family-sans-serif);
-}
-
-.utrecht-topnav__list {
-  background-color: var(--utrecht-topnav-list-background-color);
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
-  list-style-image: none;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  overflow: visible;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-.utrecht-topnav__item {
-  border-inline-end: 1px solid var(--utrecht-topnav-list-border-color);
-  flex: 1 0 auto;
-  margin-inline-start: 0;
-  text-align: center;
-}
-
-.utrecht-topnav__item li:first-child {
-  border-inline-start: 1px solid var(--utrecht-topnav-list-border-color);
-  padding-inline-start: 0;
-}
-
-.utrecht-topnav__link {
-  color: var(--utrecht-topnav-link-color);
-  display: block;
-  padding-block-end: 1rem;
-  padding-block-start: 1rem;
-  text-decoration: none;
-}
-
-.utrecht-topnav__link:hover {
-  background-color: var(--utrecht-topnav-link-hover-background-color);
-  color: var(--utrecht-topnav-link-color);
-  text-decoration: underline;
-}
-
-.utrecht-topnav__link--current {
-  background-color: var(--utrecht-topnav-list-background-active);
-  text-decoration: underline;
-}
-
-.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 {
-  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-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.
@@ -5259,9 +5200,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Wed, 11 May 2022 15:29:27 GMT
+ * Generated on Sat, 14 May 2022 11:25:18 GMT
  */
-:root {
+.utrecht-theme {
   --denhaag-process-steps-sub-step-heading-font-weight: utrecht.typography.weight-scale.normal.font-weight;
   --denhaag-process-steps-sub-step-heading-font-family: ;
   --denhaag-process-steps-sub-step-marker-size: 8px;

package/dist/root-theme.css

@@ -5,9 +5,9 @@
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Wed, 11 May 2022 15:29:27 GMT
+ * Generated on Sat, 14 May 2022 11:25:18 GMT
  */
-:root {
+.utrecht-theme {
   --denhaag-process-steps-sub-step-heading-font-weight: utrecht.typography.weight-scale.normal.font-weight;
   --denhaag-process-steps-sub-step-heading-font-family: ;
   --denhaag-process-steps-sub-step-marker-size: 8px;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.204",
+  "version": "1.0.0-alpha.207",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.197",
+    "@utrecht/design-tokens": "1.0.0-alpha.200",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.50.1"
@@ -26,5 +26,5 @@
     "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
     "clean": "rimraf dist/"
   },
-  "gitHead": "6628416bd259464a13a0ca908c5f61847cde8348"
+  "gitHead": "7324d7dfead6c5c43b2f9f7ccbea6f94cb787975"
 }

package/src/bem.scss

@@ -16,18 +16,19 @@
  *     @import "@utrecht/blockquote/index";
  */
 
-@import "../../../components/article/bem";
-@import "../../../components/badge-counter/bem";
-@import "../../../components/badge-data/bem";
-@import "../../../components/badge-status/bem";
+@import "../../../components/article/css";
+@import "../../../components/badge-counter/css";
+@import "../../../components/badge-data/css";
+@import "../../../components/badge-status/css";
+@import "../../../components/backdrop/css";
 @import "../../../components/blockquote/css";
 @import "../../../components/breadcrumb/css";
 @import "../../../components/button/bem";
 @import "../../../components/checkbox/css";
-@import "../../../components/custom-checkbox/bem";
-@import "../../../components/digid-button/bem";
-@import "../../../components/document/bem";
-@import "../../../components/emphasis/bem";
+@import "../../../components/custom-checkbox/css";
+@import "../../../components/digid-button/css";
+@import "../../../components/document/css";
+@import "../../../components/emphasis/css";
 @import "../../../components/form-field-checkbox-group/bem";
 @import "../../../components/form-field-checkbox/bem";
 @import "../../../components/form-field-description/bem";
@@ -35,40 +36,39 @@
 @import "../../../components/form-field-radio/bem";
 @import "../../../components/form-field-textbox/bem";
 @import "../../../components/form-field/bem";
-@import "../../../components/form-fieldset/bem";
+@import "../../../components/form-fieldset/css";
 @import "../../../components/form-label/css";
-@import "../../../components/form-toggle/bem";
+@import "../../../components/form-toggle/css";
 @import "../../../components/heading-1/bem";
 @import "../../../components/heading-2/bem";
 @import "../../../components/heading-3/bem";
 @import "../../../components/heading-4/bem";
 @import "../../../components/heading-5/bem";
 @import "../../../components/heading-6/bem";
-@import "../../../components/link-list/bem";
-@import "../../../components/link-social/bem";
+@import "../../../components/link-list/css";
+@import "../../../components/link-social/css";
 @import "../../../components/link/css";
-@import "../../../components/logo-button/bem";
-@import "../../../components/logo/bem";
-@import "../../../components/mapcontrolbutton/bem";
-@import "../../../components/menulijst/bem";
-@import "../../../components/nav-top/bem";
-@import "../../../components/navigatie sidenav/bem";
-@import "../../../components/navigatie topnav/bem";
-@import "../../../components/ordered-list/bem";
-@import "../../../components/page-content/bem";
-@import "../../../components/page-footer/bem";
-@import "../../../components/page-header/bem";
-@import "../../../components/page/bem";
-@import "../../../components/pagination/bem";
+@import "../../../components/logo-button/css";
+@import "../../../components/logo/css";
+@import "../../../components/mapcontrolbutton/css";
+@import "../../../components/menulijst/css";
+@import "../../../components/navigatie sidenav/css";
+@import "../../../components/navigatie topnav/css";
+@import "../../../components/ordered-list/css";
+@import "../../../components/page-content/css";
+@import "../../../components/page-footer/css";
+@import "../../../components/page-header/css";
+@import "../../../components/page/css";
+@import "../../../components/pagination/css";
 @import "../../../components/paragraph/css";
-@import "../../../components/pre-heading/bem";
-@import "../../../components/radio-button/bem";
-@import "../../../components/search-bar/bem";
-@import "../../../components/select/bem";
-@import "../../../components/separator/bem";
-@import "../../../components/surface/bem";
-@import "../../../components/table/bem";
-@import "../../../components/textarea/bem";
-@import "../../../components/textbox/bem";
-@import "../../../components/unordered-list/bem";
-@import "../../../components/url/bem";
+@import "../../../components/pre-heading/css";
+@import "../../../components/radio-button/css";
+@import "../../../components/search-bar/css";
+@import "../../../components/select/css";
+@import "../../../components/separator/css";
+@import "../../../components/surface/css";
+@import "../../../components/table/css";
+@import "../../../components/textarea/css";
+@import "../../../components/textbox/css";
+@import "../../../components/unordered-list/css";
+@import "../../../components/url/css";