@utrecht/component-library-css 9.0.1 → 9.0.3

package/dist/html.css

@@ -255,7 +255,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -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

@@ -975,7 +975,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -1355,7 +1355,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -7318,6 +7318,7 @@
   block-size: 100%;
   color: var(--utrecht-root-color);
   font-family: var(--utrecht-root-font-family);
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
@@ -7332,6 +7333,16 @@
   text-size-adjust: none;
   word-break: break-word;
 }
+: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;
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7891,7 +7902,7 @@
 }
 
 .utrecht-table__header-cell-button {
-  justify-content: var(--_utrecht-table-cell-text-align, start);
+  --utrecht-button-justify-content: var(--_utrecht-table-cell-text-align, start);
 }
 .utrecht-table__data--truncate {
   display: block;

package/dist/prince-xml.css

@@ -940,7 +940,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   width: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-width: var(--utrecht-button-max-inline-size, fit-content);
   min-height: var(--utrecht-button-min-block-size, 44px);
@@ -1311,7 +1311,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   width: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-width: var(--utrecht-button-max-inline-size, fit-content);
   min-height: var(--utrecht-button-min-block-size, 44px);
@@ -7174,6 +7174,7 @@
   height: 100%;
   color: var(--utrecht-root-color);
   font-family: var(--utrecht-root-font-family);
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
@@ -7188,6 +7189,16 @@
   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;
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7747,7 +7758,7 @@
 }
 
 .utrecht-table__header-cell-button {
-  justify-content: var(--_utrecht-table-cell-text-align, start);
+  --utrecht-button-justify-content: var(--_utrecht-table-cell-text-align, start);
 }
 .utrecht-table__data--truncate {
   display: block;
@@ -8698,7 +8709,7 @@
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
   width: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-width: var(--utrecht-button-max-inline-size, fit-content);
   min-height: var(--utrecht-button-min-block-size, 44px);
@@ -9746,4 +9757,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.1",
+  "version": "9.0.3",
   "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",
@@ -32,7 +32,7 @@
     "@utrecht/blockquote-css": "2.0.1",
     "@utrecht/body-css": "2.0.1",
     "@utrecht/breadcrumb-nav-css": "2.1.0",
-    "@utrecht/button-css": "3.0.1",
+    "@utrecht/button-css": "3.1.0",
     "@utrecht/button-group-css": "2.0.1",
     "@utrecht/button-link-css": "2.0.1",
     "@utrecht/calendar-css": "2.0.1",
@@ -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.0.0",
     "@utrecht/search-bar-css": "3.0.1",
     "@utrecht/select-css": "2.0.1",
     "@utrecht/separator-css": "2.0.1",
@@ -110,7 +110,7 @@
     "@utrecht/spotlight-section-css": "2.0.1",
     "@utrecht/status-badge-css": "1.0.0",
     "@utrecht/surface-css": "2.0.1",
-    "@utrecht/table-css": "2.0.1",
+    "@utrecht/table-css": "2.0.2",
     "@utrecht/table-of-contents-css": "1.0.1",
     "@utrecht/textarea-css": "3.0.1",
     "@utrecht/textbox-css": "3.1.0",