@utrecht/component-library-css 9.0.8 → 9.0.9

package/dist/index.css

@@ -213,6 +213,8 @@
 .utrecht-alert-dialog__message {
   --utrecht-heading-color: var(--utrecht-alert-color);
   --utrecht-paragraph-color: var(--utrecht-alert-color);
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-message-row-gap);
 }
 
@@ -264,12 +266,16 @@
 }
 
 .utrecht-alert__content {
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-content-row-gap);
 }
 
 .utrecht-alert__message {
   --utrecht-heading-color: var(--utrecht-alert-color);
   --utrecht-paragraph-color: var(--utrecht-alert-color);
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-message-row-gap);
 }
 
@@ -4266,6 +4272,13 @@
   }
 }
 
+.utrecht-nav-bar--sticky {
+  background-color: var(--utrecht-nav-bar-background-color, Canvas);
+  color: var(--utrecht-nav-bar-color, CanvasText);
+  inset-block-start: 0;
+  position: sticky;
+}
+
 .utrecht-nav-bar__heading {
   display: none;
 }
@@ -4791,12 +4804,19 @@
 }
 .utrecht-page-layout {
   align-items: flex-start;
-  block-size: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   inline-size: 100%;
   justify-content: flex-start;
 }
+
+.utrecht-page-layout--stretch {
+  min-block-size: 100%;
+  min-block-size: -moz-available;
+  min-block-size: -webkit-fill-available;
+  min-block-size: stretch;
+}
 .utrecht-page {
   margin-inline-end: auto;
   margin-inline-start: auto;
@@ -7313,7 +7333,8 @@
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
   background-color: var(--utrecht-root-background-color, Canvas);
-  block-size: 100%;
+  border: 0;
+  box-sizing: border-box;
   color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
   font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
@@ -7323,14 +7344,16 @@
   -ms-hyphens: auto;
   hyphens: auto;
   inline-size: 100%;
-  overflow-block: auto;
-  overflow-inline: auto;
+  margin: 0;
+  min-block-size: 100%;
   overflow-wrap: break-word;
+  padding: 0;
   position: relative;
   text-rendering: optimizeLegibility;
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  view-transition-name: root;
 }
 @media (prefers-reduced-motion: no-preference) {
   .utrecht-root {
@@ -7347,14 +7370,49 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
   z-index: 1;
 }
-:where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
+:where(.utrecht-root) :where(:fullscreen)::backdrop {
   background-color: var(--utrecht-root-background-color, Canvas);
 }
+:where(.utrecht-root):lang(ar), :where(.utrecht-root) :lang(ar) {
+  letter-spacing: 0;
+}
+:where(.utrecht-root):lang(nl), :where(.utrecht-root) :lang(nl) {
+  hyphenate-limit-chars: 12 8 4;
+}
+
+.utrecht-root:where(:root) {
+  display: flex;
+  flex-direction: column;
+  container-name: root;
+  container-type: size scroll-state;
+}
+
+.utrecht-root:where(body) {
+  margin: 0;
+}
+@media screen {
+  .utrecht-root:where(body) {
+    min-block-size: 100vh;
+    min-block-size: 100vb;
+  }
+}
 .utrecht-root:where(:root) > *,
 .utrecht-root:where(:not(:root)) {
   font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
   line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
 }
+
+.utrecht-root:where(:root) > :where(body) {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.utrecht-root--scroll {
+  container-name: root;
+  container-type: size scroll-state;
+  overflow-block: auto;
+  overflow-inline: auto;
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7610,12 +7668,15 @@
   border-style: solid;
   border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
   color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
+  display: flex;
+  flex-direction: column;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
   padding-block-end: var(--utrecht-spotlight-section-padding-block-end);
   padding-block-start: var(--utrecht-spotlight-section-padding-block-start);
   padding-inline-end: var(--utrecht-spotlight-section-padding-inline-end);
   padding-inline-start: var(--utrecht-spotlight-section-padding-inline-start);
+  row-gap: var(--utrecht-spotlight-section-row-gap);
 }
 
 .utrecht-spotlight-section--info {

package/dist/prince-xml.css

@@ -202,6 +202,8 @@
 .utrecht-alert-dialog__message {
   --utrecht-heading-color: var(--utrecht-alert-color);
   --utrecht-paragraph-color: var(--utrecht-alert-color);
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-message-row-gap);
 }
 
@@ -253,12 +255,16 @@
 }
 
 .utrecht-alert__content {
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-content-row-gap);
 }
 
 .utrecht-alert__message {
   --utrecht-heading-color: var(--utrecht-alert-color);
   --utrecht-paragraph-color: var(--utrecht-alert-color);
+  display: flex;
+  flex-direction: column;
   row-gap: var(--utrecht-alert-message-row-gap);
 }
 
@@ -4128,6 +4134,13 @@
   width: 100%;
 }
 
+.utrecht-nav-bar--sticky {
+  background-color: var(--utrecht-nav-bar-background-color, Canvas);
+  color: var(--utrecht-nav-bar-color, CanvasText);
+  top: 0;
+  position: sticky;
+}
+
 .utrecht-nav-bar__heading {
   display: none;
 }
@@ -4649,12 +4662,19 @@
 }
 .utrecht-page-layout {
   align-items: flex-start;
-  height: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   width: 100%;
   justify-content: flex-start;
 }
+
+.utrecht-page-layout--stretch {
+  min-height: 100%;
+  min-height: -moz-available;
+  min-height: -webkit-fill-available;
+  min-height: stretch;
+}
 .utrecht-page {
   margin-right: auto;
   margin-left: auto;
@@ -7169,7 +7189,8 @@
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
   background-color: var(--utrecht-root-background-color, Canvas);
-  height: 100%;
+  border: 0;
+  box-sizing: border-box;
   color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
   font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
@@ -7179,14 +7200,16 @@
   -ms-hyphens: auto;
   hyphens: auto;
   width: 100%;
-  overflow-block: auto;
-  overflow-inline: auto;
+  margin: 0;
+  min-height: 100%;
   overflow-wrap: break-word;
+  padding: 0;
   position: relative;
   text-rendering: optimizeLegibility;
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  view-transition-name: root;
 }
 :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)
@@ -7198,14 +7221,49 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
   z-index: 1;
 }
-:where(.utrecht-root) :where(:not(:root):fullscreen)[prince-xml-ignore-pseudo-element-backdrop] {
+:where(.utrecht-root) :where(:fullscreen)[prince-xml-ignore-pseudo-element-backdrop] {
   background-color: var(--utrecht-root-background-color, Canvas);
 }
+:where(.utrecht-root):lang(ar), :where(.utrecht-root) :lang(ar) {
+  letter-spacing: 0;
+}
+:where(.utrecht-root):lang(nl), :where(.utrecht-root) :lang(nl) {
+  hyphenate-limit-chars: 12 8 4;
+}
+
+.utrecht-root:where(:root) {
+  display: flex;
+  flex-direction: column;
+  container-name: root;
+  container-type: size scroll-state;
+}
+
+.utrecht-root:where(body) {
+  margin: 0;
+}
+@media screen {
+  .utrecht-root:where(body) {
+    min-height: 100vh;
+    min-height: 100vb;
+  }
+}
 .utrecht-root:where(:root) > *,
 .utrecht-root:where(:not(:root)) {
   font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
   line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
 }
+
+.utrecht-root:where(:root) > :where(body) {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.utrecht-root--scroll {
+  container-name: root;
+  container-type: size scroll-state;
+  overflow-block: auto;
+  overflow-inline: auto;
+}
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7461,12 +7519,15 @@
   border-style: solid;
   border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
   color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
+  display: flex;
+  flex-direction: column;
   margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
   margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
   padding-bottom: var(--utrecht-spotlight-section-padding-block-end);
   padding-top: var(--utrecht-spotlight-section-padding-block-start);
   padding-right: var(--utrecht-spotlight-section-padding-inline-end);
   padding-left: var(--utrecht-spotlight-section-padding-inline-start);
+  row-gap: var(--utrecht-spotlight-section-row-gap);
 }
 
 .utrecht-spotlight-section--info {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.8",
+  "version": "9.0.9",
   "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",
@@ -22,46 +22,47 @@
   "dependencies": {
     "@utrecht/accordion-css": "4.0.0",
     "@utrecht/action-group-css": "4.0.0",
-    "@utrecht/alert-css": "4.0.0",
+    "@utrecht/alert-css": "4.0.1",
     "@utrecht/alert-dialog-css": "3.0.0",
     "@utrecht/alternate-lang-nav-css": "3.0.0",
     "@utrecht/article-css": "3.0.0",
     "@utrecht/backdrop-css": "3.0.0",
     "@utrecht/badge-counter-css": "3.0.0",
+    "@utrecht/badge-list-css": "4.0.0",
     "@utrecht/blockquote-css": "3.0.0",
     "@utrecht/body-css": "4.0.0",
     "@utrecht/breadcrumb-nav-css": "3.0.0",
     "@utrecht/button-css": "4.0.0",
-    "@utrecht/button-link-css": "3.0.0",
     "@utrecht/button-group-css": "3.0.0",
+    "@utrecht/button-link-css": "3.0.0",
     "@utrecht/calendar-css": "3.0.0",
     "@utrecht/checkbox-css": "3.0.0",
-    "@utrecht/badge-list-css": "4.0.0",
     "@utrecht/code-block-css": "3.0.0",
     "@utrecht/code-css": "3.0.0",
     "@utrecht/color-sample-css": "3.0.0",
     "@utrecht/column-layout-css": "3.0.0",
     "@utrecht/combobox-css": "3.0.0",
+    "@utrecht/currency-data-css": "3.0.0",
     "@utrecht/custom-checkbox-css": "3.0.0",
     "@utrecht/data-badge-css": "3.0.0",
     "@utrecht/data-list-css": "3.0.0",
-    "@utrecht/currency-data-css": "3.0.0",
+    "@utrecht/data-placeholder-css": "3.0.0",
     "@utrecht/digid-button-css": "2.0.0",
     "@utrecht/document-css": "3.0.0",
-    "@utrecht/data-placeholder-css": "3.0.0",
     "@utrecht/drawer-css": "3.0.0",
     "@utrecht/emphasis-css": "3.0.0",
-    "@utrecht/form-css": "3.0.0",
     "@utrecht/figure-css": "3.0.0",
+    "@utrecht/form-css": "3.0.0",
+    "@utrecht/form-field-css": "3.0.0",
     "@utrecht/form-field-description-css": "3.0.0",
     "@utrecht/form-field-error-message-css": "3.0.0",
-    "@utrecht/form-field-css": "3.0.0",
     "@utrecht/form-fieldset-css": "3.0.0",
+    "@utrecht/form-label-css": "3.0.0",
     "@utrecht/form-toggle-css": "3.0.0",
     "@utrecht/grid-css": "2.0.0",
     "@utrecht/heading-1-css": "3.0.0",
+    "@utrecht/heading-2-css": "3.0.0",
     "@utrecht/heading-3-css": "3.0.0",
-    "@utrecht/form-label-css": "3.0.0",
     "@utrecht/heading-4-css": "3.0.0",
     "@utrecht/heading-5-css": "3.0.0",
     "@utrecht/heading-6-css": "3.0.0",
@@ -69,7 +70,6 @@
     "@utrecht/html-content-css": "3.0.0",
     "@utrecht/iban-data-css": "3.0.0",
     "@utrecht/icon-css": "4.0.0",
-    "@utrecht/heading-2-css": "3.0.0",
     "@utrecht/img-css": "3.0.0",
     "@utrecht/index-char-nav-css": "3.0.0",
     "@utrecht/link-button-css": "3.0.0",
@@ -80,12 +80,12 @@
     "@utrecht/listbox-css": "3.0.0",
     "@utrecht/logo-button-css": "2.0.0",
     "@utrecht/logo-css": "3.0.0",
+    "@utrecht/logo-image-css": "2.0.0",
     "@utrecht/map-marker-css": "3.0.0",
     "@utrecht/mark-css": "3.0.0",
     "@utrecht/multiline-data-css": "3.0.0",
-    "@utrecht/nav-bar-css": "3.0.0",
+    "@utrecht/nav-bar-css": "3.1.0",
     "@utrecht/nav-list-css": "2.0.0",
-    "@utrecht/logo-image-css": "2.0.0",
     "@utrecht/navigation-css": "2.0.0",
     "@utrecht/number-badge-css": "4.0.0",
     "@utrecht/number-data-css": "3.0.0",
@@ -95,19 +95,19 @@
     "@utrecht/page-css": "3.0.0",
     "@utrecht/page-footer-css": "4.0.0",
     "@utrecht/page-header-css": "3.0.0",
+    "@utrecht/page-layout-css": "4.0.0",
     "@utrecht/pagination-css": "3.0.0",
-    "@utrecht/page-layout-css": "3.0.0",
     "@utrecht/paragraph-css": "4.0.0",
     "@utrecht/pre-heading-css": "3.0.0",
     "@utrecht/preserve-data-css": "3.0.0",
-    "@utrecht/rich-text-css": "3.0.0",
     "@utrecht/radio-button-css": "3.0.0",
-    "@utrecht/root-css": "4.0.0",
+    "@utrecht/rich-text-css": "3.0.0",
+    "@utrecht/root-css": "4.1.0",
     "@utrecht/search-bar-css": "4.0.0",
     "@utrecht/select-css": "3.0.0",
     "@utrecht/separator-css": "3.0.0",
     "@utrecht/skip-link-css": "3.0.0",
-    "@utrecht/spotlight-section-css": "3.0.0",
+    "@utrecht/spotlight-section-css": "3.0.1",
     "@utrecht/status-badge-css": "2.0.0",
     "@utrecht/surface-css": "3.0.0",
     "@utrecht/table-css": "3.0.0",
@@ -115,24 +115,43 @@
     "@utrecht/textarea-css": "4.0.0",
     "@utrecht/textbox-css": "4.0.0",
     "@utrecht/tooltip-css": "3.0.0",
+    "@utrecht/top-task-link-css": "3.0.0",
     "@utrecht/top-task-nav-css": "2.0.0",
     "@utrecht/unordered-list-css": "3.1.0",
     "@utrecht/url-data-css": "3.0.0",
-    "@utrecht/youtube-video-css": "3.0.0",
-    "@utrecht/top-task-link-css": "3.0.0"
+    "@utrecht/youtube-video-css": "3.0.0"
   },
   "devDependencies": {
+    "@nl-design-system/tsconfig": "1.0.5",
+    "@vitest/browser-playwright": "4.0.12",
+    "@vitest/coverage-v8": "4.0.12",
+    "@vitest/ui": "4.0.12",
+    "colorjs.io": "0.6.1",
+    "http-server": "14.1.1",
+    "playwright": "1.56.1",
     "postcss": "8.4.49",
     "postcss-discard-duplicates": "7.0.2",
     "postcss-logical": "7.0.1",
-    "rimraf": "5.0.10",
+    "rimraf": "6.0.1",
     "rollup": "4.18.1",
     "rollup-plugin-postcss": "4.0.2",
-    "@utrecht/build-utils-css": "0.0.4"
+    "sass-embedded": "1.99.0",
+    "tslib": "2.8.1",
+    "typescript": "5.9.3",
+    "vite": "7.1.12",
+    "vitest": "4.0.12",
+    "@utrecht/build-utils-css": "0.0.4",
+    "@utrecht/design-tokens": "6.1.1",
+    "@utrecht/focus-ring-css": "4.0.0"
   },
   "main": "dist/index.css",
   "scripts": {
     "build": "rollup --config ./rollup.config.mjs",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "dev": "vite",
+    "lint": "tsc --noEmit",
+    "start": "cp test-dist.html dist/index.html && http-server dist/",
+    "test-e2e": "vitest --coverage --config vitest.e2e.config.ts",
+    "ui": "vitest --coverage --config vitest.e2e.config.ts --ui"
   }
 }