@utrecht/component-library-css 1.0.0-alpha.205 → 1.0.0-alpha.208

package/dist/bem.css

@@ -426,6 +426,40 @@ ol.utrecht-breadcrumb__list {
   transform: scale(var(--utrecht-button-focus-transform-scale, 1));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Frameless B.V.
+ */
+.utrecht-button-group {
+  background-color: var(--utrecht-button-group-background-color);
+  display: flex;
+  min-block-size: var(--utrecht-button-block-size);
+  padding-block-end: var(--utrecht-button-group-padding-block-end);
+  padding-block-start: var(--utrecht-button-group-padding-block-start);
+}
+
+.utrecht-button-group--distance {
+  margin-block-end: var(--utrecht-button-group-margin-block-end);
+  margin-block-start: var(--utrecht-button-group-margin-block-start);
+}
+
+.utrecht-button-group,
+.utrecht-button-group--horizontal {
+  gap: var(--utrecht-button-group-inline-gap, 1em);
+}
+
+.utrecht-button-group__button-link--horizontal,
+.utrecht-button-group--horizontal .utrecht-button-link,
+.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-button-link {
+  --utrecht-button-padding-inline-end: 0;
+  --utrecht-button-padding-inline-start: 0;
+}
+
+.utrecht-button-group--vertical {
+  flex-direction: column;
+  gap: var(--utrecht-button-group-block-gap, 1em);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1516,87 +1550,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

@@ -463,6 +463,40 @@ ol.utrecht-breadcrumb__list {
   transform: scale(var(--utrecht-button-focus-transform-scale, 1));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Frameless B.V.
+ */
+.utrecht-button-group {
+  background-color: var(--utrecht-button-group-background-color);
+  display: flex;
+  min-block-size: var(--utrecht-button-block-size);
+  padding-block-end: var(--utrecht-button-group-padding-block-end);
+  padding-block-start: var(--utrecht-button-group-padding-block-start);
+}
+
+.utrecht-button-group--distance {
+  margin-block-end: var(--utrecht-button-group-margin-block-end);
+  margin-block-start: var(--utrecht-button-group-margin-block-start);
+}
+
+.utrecht-button-group,
+.utrecht-button-group--horizontal {
+  gap: var(--utrecht-button-group-inline-gap, 1em);
+}
+
+.utrecht-button-group__button-link--horizontal,
+.utrecht-button-group--horizontal .utrecht-button-link,
+.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-button-link {
+  --utrecht-button-padding-inline-end: 0;
+  --utrecht-button-padding-inline-start: 0;
+}
+
+.utrecht-button-group--vertical {
+  flex-direction: column;
+  gap: var(--utrecht-button-group-block-gap, 1em);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1556,87 +1590,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.
@@ -5281,9 +5234,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 16:14:24 GMT
+ * Generated on Sat, 14 May 2022 12:04:02 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 16:14:24 GMT
+ * Generated on Sat, 14 May 2022 12:04:02 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.205",
+  "version": "1.0.0-alpha.208",
   "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.198",
+    "@utrecht/design-tokens": "1.0.0-alpha.201",
     "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": "3f461a33b1d12db8ec72a1cfdde003e13f62f27a"
+  "gitHead": "6cdfa3731ad2ef4e2e43add8c193d9f311e045c8"
 }

package/src/bem.scss

@@ -17,16 +17,17 @@
  */
 
 @import "../../../components/article/css";
-@import "../../../components/badge-counter/bem";
-@import "../../../components/badge-data/bem";
-@import "../../../components/badge-status/bem";
+@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/button-group/css";
 @import "../../../components/checkbox/css";
-@import "../../../components/custom-checkbox/bem";
-@import "../../../components/digid-button/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";
@@ -36,40 +37,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";