@utrecht/component-library-css 1.0.0-alpha.301 → 1.0.0-alpha.304

package/dist/index.css

@@ -1215,6 +1215,69 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-data-list {
+  /* also set `margin-block` to reset browser styling of <dl> */
+  display: block;
+  margin-block-end: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-end));
+  margin-block-start: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-start));
+}
+
+.utrecht-data-list__item-key {
+  color: var(--utrecht-data-list-item-key-color);
+  font-size: var(--utrecht-data-list-item-key-font-size);
+  font-weight: var(--utrecht-data-list-item-key-font-weight);
+  grid-area: label;
+  line-height: var(--utrecht-data-list-item-key-line-height);
+}
+
+.utrecht-data-list__item-value {
+  /* configure `min-block-size` in case the value is empty */
+  color: var(--utrecht-data-list-label-color);
+  font-size: var(--utrecht-data-list-item-value-font-size);
+  font-weight: var(--utrecht-data-list-item-value-font-weight);
+  grid-area: value;
+  line-height: var(--utrecht-data-list-label-line-height);
+  min-block-size: var(--utrecht-data-list-label-line-height);
+}
+
+.utrecht-data-list__actions--html-dd,
+.utrecht-data-list__item-value--html-dd {
+  /* reset browser styling of <dd> */
+  margin-inline-start: 0;
+}
+
+.utrecht-data-list__item-value--multiline {
+  white-space: pre-line;
+}
+
+.utrecht-data-list--rows .utrecht-data-list__actions {
+  align-items: last baseline;
+  display: flex;
+  justify-content: flex-end;
+}
+.utrecht-data-list--rows .utrecht-data-list__item {
+  display: grid;
+  grid-template-areas: "label actions" "value value";
+  margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
+}
+.utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
+  margin-block-start: 0;
+}
+.utrecht-data-list--rows .utrecht-data-list__item-value {
+  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1955,6 +2018,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-link-button {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
@@ -1978,13 +2047,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   user-select: none;
 }
 
-.utrecht-link-button--html-button {
-  background-color: transparent;
-  /* reset <button> styling */
-  border-width: 0;
-}
-
-.utrecht-link-button--hover {
+.utrecht-link-button--hover, .utrecht-link-button--html-button: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;
@@ -1992,11 +2055,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link-button--active {
+.utrecht-link-button--active, .utrecht-link-button--html-button:active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link-button--focus {
+.utrecht-link-button--focus, .utrecht-link-button--html-button: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));
@@ -2005,7 +2068,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link-button--focus-visible {
+.utrecht-link-button--focus-visible, .utrecht-link-button--html-button: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: var(--utrecht-focus-outline-offset, 0);
@@ -2013,6 +2076,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-link-button--inline {
+  min-block-size: auto;
+  min-inline-size: auto;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -3610,3 +3687,25 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-url {
   font-variant-ligatures: none;
 }
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.utrecht-value-number {
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.utrecht-value-number--positive {
+  color: var(--utrecht-value-number-positive-color);
+}
+
+.utrecht-value-number--negative {
+  color: var(--utrecht-value-number-negative-color);
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.301",
+  "version": "1.0.0-alpha.304",
   "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.294",
+    "@utrecht/design-tokens": "1.0.0-alpha.297",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.54.0"
@@ -27,5 +27,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "cabff650fb07a96706f95b5779e4e8f6b320189a"
+  "gitHead": "5e0eb8b75ca23c2063867f7396e6a6a5e50e0ba9"
 }

package/src/index.scss

@@ -29,6 +29,7 @@
 @import "../../../components/checkbox/css";
 @import "../../../components/custom-checkbox/css";
 @import "../../../components/custom-radio-button/css";
+@import "../../../components/data-list/css";
 @import "../../../components/digid-button/css";
 @import "../../../components/document/css";
 @import "../../../components/emphasis/css";
@@ -76,3 +77,4 @@
 @import "../../../components/textbox/css";
 @import "../../../components/unordered-list/css";
 @import "../../../components/url/css";
+@import "../../../components/value-number/css";