@utrecht/component-library-css 9.0.2 → 9.0.4

package/dist/html.css

@@ -1304,4 +1304,14 @@
 .utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
+}
+:where(.utrecht-html) :where(:focus-visible) {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }

package/dist/index.css

@@ -546,10 +546,6 @@
 }
 .utrecht-body {
   block-size: 100%;
-  font-family: var(--utrecht-body-font-family, inherit);
-  font-size: var(--utrecht-body-font-size, inherit);
-  font-weight: var(--utrecht-body-font-weight, inherit);
-  line-height: var(--utrecht-body-line-height, inherit);
   margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-end: 0;
@@ -7314,15 +7310,19 @@
 .utrecht-root {
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
-  background-color: var(--utrecht-root-background-color);
+  background-color: var(--utrecht-root-background-color, Canvas);
   block-size: 100%;
-  color: var(--utrecht-root-color);
+  color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
+  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
+  font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   inline-size: 100%;
+  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
   overflow-block: auto;
   overflow-inline: auto;
   position: relative;
@@ -7332,6 +7332,24 @@
   text-size-adjust: none;
   word-break: break-word;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .utrecht-root {
+    scroll-behavior: smooth;
+  }
+}
+:where(.utrecht-root) :where(:focus-visible) {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+}
+:where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
+  background-color: var(--utrecht-root-background-color, Canvas);
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);

package/dist/prince-xml.css

@@ -511,10 +511,6 @@
 }
 .utrecht-body {
   height: 100%;
-  font-family: var(--utrecht-body-font-family, inherit);
-  font-size: var(--utrecht-body-font-size, inherit);
-  font-weight: var(--utrecht-body-font-weight, inherit);
-  line-height: var(--utrecht-body-line-height, inherit);
   margin-bottom: 0;
   margin-top: 0;
   margin-right: 0;
@@ -7170,15 +7166,19 @@
 .utrecht-root {
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
-  background-color: var(--utrecht-root-background-color);
+  background-color: var(--utrecht-root-background-color, Canvas);
   height: 100%;
-  color: var(--utrecht-root-color);
+  color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
+  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
+  font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   width: 100%;
+  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
   overflow-block: auto;
   overflow-inline: auto;
   position: relative;
@@ -7188,6 +7188,19 @@
   text-size-adjust: none;
   word-break: break-word;
 }
+:where(.utrecht-root) :where([prince-xml-ignore-pseudo-class-focus-visible]) {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+}
+:where(.utrecht-root) :where(:not(:root):fullscreen)[prince-xml-ignore-pseudo-element-backdrop] {
+  background-color: var(--utrecht-root-background-color, Canvas);
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -9746,4 +9759,14 @@
 .utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
+}
+:where(.utrecht-html) :where([prince-xml-ignore-pseudo-class-focus-visible]) {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.2",
+  "version": "9.0.4",
   "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",
@@ -30,7 +30,7 @@
     "@utrecht/badge-counter-css": "2.0.1",
     "@utrecht/badge-list-css": "3.0.1",
     "@utrecht/blockquote-css": "2.0.1",
-    "@utrecht/body-css": "2.0.1",
+    "@utrecht/body-css": "3.0.0",
     "@utrecht/breadcrumb-nav-css": "2.1.0",
     "@utrecht/button-css": "3.1.0",
     "@utrecht/button-group-css": "2.0.1",
@@ -55,8 +55,8 @@
     "@utrecht/form-css": "2.0.1",
     "@utrecht/form-field-css": "2.0.1",
     "@utrecht/form-field-description-css": "2.0.1",
-    "@utrecht/form-field-error-message-css": "2.0.1",
     "@utrecht/form-fieldset-css": "2.0.1",
+    "@utrecht/form-field-error-message-css": "2.0.1",
     "@utrecht/form-label-css": "2.0.1",
     "@utrecht/form-toggle-css": "2.0.1",
     "@utrecht/grid-css": "1.0.0",
@@ -67,7 +67,7 @@
     "@utrecht/heading-5-css": "2.0.1",
     "@utrecht/heading-6-css": "2.0.1",
     "@utrecht/heading-group-css": "2.0.1",
-    "@utrecht/html-content-css": "2.0.1",
+    "@utrecht/html-content-css": "2.1.0",
     "@utrecht/iban-data-css": "2.0.1",
     "@utrecht/icon-css": "3.0.1",
     "@utrecht/img-css": "2.0.1",
@@ -102,7 +102,7 @@
     "@utrecht/preserve-data-css": "2.0.1",
     "@utrecht/radio-button-css": "2.0.1",
     "@utrecht/rich-text-css": "2.1.0",
-    "@utrecht/root-css": "2.0.1",
+    "@utrecht/root-css": "3.1.0",
     "@utrecht/search-bar-css": "3.0.1",
     "@utrecht/select-css": "2.0.1",
     "@utrecht/separator-css": "2.0.1",