@rijkshuisstijl-community/components-css 16.0.1 → 17.0.0

package/index.scss

@@ -4,17 +4,17 @@
  */
 
 @use "@rijkshuisstijl-community/accordion-css/src/index" as accordion;
-@use "src/action-group/index" as actionGroup;
+@use "@rijkshuisstijl-community/action-group-css/src/index" as actionGroup;
 @use "@rijkshuisstijl-community/alert-css/src/index" as alert;
 @use "@rijkshuisstijl-community/article-css/src/index" as article;
 @use "@rijkshuisstijl-community/blockquote-css/src/index" as blockquote;
-@use "src/breadcrumb-nav/index" as breadcrumb;
+@use "@rijkshuisstijl-community/breadcrumb-nav-css/src/index" as breadcrumb;
 @use "@rijkshuisstijl-community/button-css/src/index" as button;
 @use "src/link-button/index" as linkButton;
-@use "src/card-as-link/index" as cardAsLink;
-@use "src/card/index" as card;
-@use "src/checkbox/index" as checkbox;
-@use "src/checkbox-group/index" as checkboxGroup;
+@use "@rijkshuisstijl-community/card-as-link-css/src/index" as cardAsLink;
+@use "@rijkshuisstijl-community/card-css/src/index" as card;
+@use "@rijkshuisstijl-community/checkbox-css/src/index" as checkbox;
+@use "@rijkshuisstijl-community/checkbox-group-css/src/index" as checkboxGroup;
 @use "src/code-input/index" as codeInput;
 @use "src/code-input-group/index" as codeInputGroup;
 @use "src/data-badge-button/index" as dataBadgeButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "16.0.1",
+  "version": "17.0.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -36,7 +36,7 @@
     "@utrecht/article-css": "1.5.1",
     "@utrecht/badge-list-css": "2.2.1",
     "@utrecht/blockquote-css": "1.6.1",
-    "@utrecht/body-css": "2.0.1",
+    "@utrecht/body-css": "4.0.0",
     "@utrecht/breadcrumb-nav-css": "1.5.1",
     "@utrecht/button-css": "3.1.0",
     "@utrecht/button-link-css": "1.3.1",
@@ -63,31 +63,37 @@
     "@utrecht/link-list-css": "2.3.1",
     "@utrecht/listbox-css": "2.1.0",
     "@utrecht/ordered-list-css": "2.0.0",
-    "@utrecht/page-body-css": "0.1.1",
-    "@utrecht/page-content-css": "1.4.1",
-    "@utrecht/page-footer-css": "2.1.1",
-    "@utrecht/page-header-css": "1.5.1",
-    "@utrecht/page-layout-css": "1.1.1",
+    "@utrecht/page-body-css": "2.0.0",
+    "@utrecht/page-content-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/paragraph-css": "2.3.1",
     "@utrecht/pre-heading-css": "1.4.1",
     "@utrecht/radio-button-css": "1.6.1",
-    "@utrecht/root-css": "3.1.1",
+    "@utrecht/root-css": "4.1.0",
     "@utrecht/select-css": "1.8.1",
     "@utrecht/separator-css": "1.5.1",
     "@utrecht/table-css": "2.0.2",
     "@utrecht/textarea-css": "2.3.2",
     "@utrecht/textbox-css": "2.0.0",
     "@utrecht/unordered-list-css": "1.5.1",
-    "@rijkshuisstijl-community/accordion-css": "2.0.0",
-    "@rijkshuisstijl-community/alert-css": "4.0.0",
-    "@rijkshuisstijl-community/article-css": "2.0.0",
-    "@rijkshuisstijl-community/blockquote-css": "1.0.0",
-    "@rijkshuisstijl-community/button-css": "1.0.0",
-    "@rijkshuisstijl-community/dot-badge-css": "1.0.0",
-    "@rijkshuisstijl-community/figure-css": "1.0.0",
-    "@rijkshuisstijl-community/link-css": "1.0.0",
-    "@rijkshuisstijl-community/paragraph-css": "2.0.0",
-    "@rijkshuisstijl-community/separator-css": "1.0.0"
+    "@rijkshuisstijl-community/accordion-css": "2.0.1",
+    "@rijkshuisstijl-community/action-group-css": "1.0.0",
+    "@rijkshuisstijl-community/alert-css": "4.0.1",
+    "@rijkshuisstijl-community/article-css": "2.0.1",
+    "@rijkshuisstijl-community/blockquote-css": "1.0.1",
+    "@rijkshuisstijl-community/breadcrumb-nav-css": "1.0.0",
+    "@rijkshuisstijl-community/button-css": "1.0.1",
+    "@rijkshuisstijl-community/card-as-link-css": "1.0.0",
+    "@rijkshuisstijl-community/card-css": "1.0.0",
+    "@rijkshuisstijl-community/checkbox-group-css": "1.0.0",
+    "@rijkshuisstijl-community/checkbox-css": "1.0.0",
+    "@rijkshuisstijl-community/dot-badge-css": "1.0.1",
+    "@rijkshuisstijl-community/figure-css": "1.0.1",
+    "@rijkshuisstijl-community/link-css": "1.0.1",
+    "@rijkshuisstijl-community/paragraph-css": "2.0.1",
+    "@rijkshuisstijl-community/separator-css": "1.0.1"
   },
   "scripts": {
     "dev": "vite build --watch",

package/src/footer/index.scss

@@ -4,39 +4,31 @@
  */
 
 .rhc-page-footer {
-  --utrecht-space-around: 1;
-  --utrecht-link-hover-text-decoration: underline;
   --_utrecht-link-state-text-decoration-color: currentColor;
-  --utrecht-column-layout-gap: var(--rhc-page-footer-column-gap);
-  --utrecht-column-layout-column-width: var(--rhc-page-footer-column-width);
   --nl-heading-level-1-color: currentColor;
   --nl-heading-level-2-color: currentColor;
   --nl-heading-level-3-color: currentColor;
   --nl-heading-level-4-color: currentColor;
   --nl-heading-level-5-color: currentColor;
   --nl-heading-level-6-color: currentColor;
+  --nl-link-active-color: currentColor;
+  --nl-link-color: currentColor;
+  --nl-link-hover-color: currentColor;
+  --nl-link-text-decoration-color: currentColor;
   --nl-paragraph-color: currentColor;
-
-  align-items: center;
-  display: flex;
-  flex-direction: var(--rhc-page-footer-flex-direction);
-  padding-block: 0;
-  padding-inline: 0;
-
-  :is(.rhc-heading, .rhc-paragraph):is(h1, h2, h3, h4, h5, h6, p) {
-    margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
-  }
-}
-
-.rhc-page-footer > * {
-  inline-size: 100%;
+  --utrecht-column-layout-column-width: var(--rhc-page-footer-column-width);
+  --utrecht-column-layout-gap: var(--rhc-page-footer-column-gap);
+  --utrecht-link-hover-text-decoration: underline;
+  --utrecht-space-around: 1;
 }
 
 .rhc-page-footer--primary-filled {
   --utrecht-page-footer-background-color: var(--rhc-color-primary-500);
+  --utrecht-page-footer-color: var(--rhc-color-wit);
+  --utrecht-page-footer-content-color: inherit;
 }
 
-.rhc-page-footer--primary-filled.rhc-page-subfooter {
+.rhc-page-footer--primary-filled.rhc-page-footer--subfooter {
   border-block-start-color: var(--rhc-page-footer-border-block-start-color);
   border-block-start-style: var(--rhc-page-footer-border-block-start-style);
   border-block-start-width: var(--rhc-page-footer-border-block-start-width);
@@ -51,26 +43,31 @@
   border-block-start-width: var(--rhc-page-footer-border-block-start-width);
 }
 
-.rhc-page-footer__content {
+/**
+ * Contains:
+ * - the pre-footer (optional)
+ * - the regular page footer
+ * - the subfooter (optional)
+ */
+.rhc-page-footer-container {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+}
+
+.rhc-page-footer-layout {
   column-gap: var(--rhc-page-footer-column-gap);
   display: flex;
   flex: 1;
   flex-direction: row;
-  @media (width <= 1024px) {
-    & {
-      flex-direction: var(--rhc-page-footer-flex-direction);
-    }
+
+  :is(.rhc-heading, .rhc-paragraph):is(h1, h2, h3, h4, h5, h6, p) {
+    margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
   }
 }
 
-.rhc-page-footer__wrapper {
-  box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: var(--rhc-page-footer-content-max-inline-size);
-  padding-block-end: var(--utrecht-page-footer-padding-block-end);
-  padding-block-start: var(--utrecht-page-footer-padding-block-start);
-  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
-  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
+.rhc-page-footer-layout > * {
+  flex: 1;
 }
 
 .rhc-page-footer__section,
@@ -80,17 +77,7 @@
   padding-block-end: var(--rhc-page-footer-padding-block-end);
 }
 
-.rhc-page-footer__content > * {
-  flex: 1;
-}
-
-.rhc-page-subfooter {
-  align-items: center;
-  display: flex;
-  flex-direction: var(--rhc-page-footer-flex-direction);
-}
-
-.rhc-page-subfooter__content {
+.rhc-page-subfooter-layout {
   align-items: center;
   display: flex;
   gap: var(--rhc-page-footer-content-column-gap);
@@ -101,26 +88,6 @@
   }
 }
 
-.rhc-page-subfooter__backtotop {
-  align-items: center;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  text-decoration: none;
-  &:hover {
-    text-decoration: var(--rhc-sidenav-link-active-text-decoration);
-  }
-}
-
-@media (width <= 780px) {
-  .rhc-page-footer__wrapper {
-    --utrecht-page-footer-padding-inline-end: var(--rhc-page-footer-padding-inline-end);
-    --utrecht-page-footer-padding-inline-start: var(--rhc-page-footer-padding-inline-start);
-    --utrecht-page-footer-padding-block-end: var(--rhc-page-footer-padding-block-end);
-    --utrecht-page-footer-padding-block-start: var(--rhc-page-footer-padding-block-start);
-  }
-}
-
 .rhc-page-prefooter {
   display: flex;
   justify-content: center;
@@ -128,20 +95,30 @@
 }
 
 .rhc-page-prefooter::before {
-  background-color: var(--rhc-color-primary-500);
-  block-size: 1.5rem;
+  background-color: var(--rhc-color-primary-500, currentColor);
+  block-size: var(--rhc-space-2xl);
   content: "";
-  inline-size: 2rem;
+  inline-size: var(--rhc-space-5xl);
+
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 .rhc-page-prefooter__content {
   font-family: var(--rhc-text-font-family-serif);
   inset: 0% 50% auto auto;
-  line-height: 100%;
+  line-height: 1;
   margin-inline-end: calc(-1 * var(--rhc-space-3xl));
   position: absolute;
   transform: translateX(100%);
+
   @media (width <= 720px) {
+    /*
+     * Hiding the text of this feature is a violation of WCAG SC 1.4.10 Reflow
+     * TODO: Reconsider if the Page Footer Prefooter can be made accessible, or should be removed.
+     * https://nldesignsystem.nl/wcag/1.4.10/
+     */
     & {
       display: none;
     }

package/src/logo/_mixin.scss

@@ -40,6 +40,9 @@
 
 @mixin rhc-logo__caption {
   color: var(--rhc-logo-color, inherit);
+
+  /* Harden against `font-feature-settings` configured, use the default font for the logotype */
+  font-feature-settings: normal;
   grid-area: caption;
   max-inline-size: var(--rhc-logo-caption-max-inline-size);
 }

package/src/action-group/index.scss

@@ -1,4 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */

package/src/breadcrumb-nav/index.scss

@@ -1,22 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-breadcrumb-nav {
-  .utrecht-breadcrumb-nav__list {
-    align-items: center;
-  }
-
-  &__link {
-    &--current {
-      --utrecht-link-text-decoration: none;
-
-      color: var(--rhc-breadcrumb-nav-link-current-color);
-    }
-
-    &--active {
-      --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-active-text-decoration, underline);
-    }
-  }
-}

package/src/card/_mixin.scss

@@ -1,114 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-card {
-  @include rounded-border-corners;
-
-  box-sizing: border-box;
-  column-gap: var(--rhc-card-column-gap, var(--rhc-space-xl));
-  display: inline-flex;
-  flex-direction: column;
-  font-family: var(--rhc-text-font-family-default, inherit);
-  font-size: var(--rhc-card-font-size, inherit);
-  line-height: var(--rhc-text-line-height-md, inherit);
-  max-inline-size: var(--rhc-card-inline-size);
-  position: relative;
-  text-decoration: none;
-}
-
-@mixin rhc-card--default {
-  background-color: var(--rhc-card-background-color);
-  border-color: var(--rhc-card-border-color);
-  border-style: solid;
-  border-width: var(--rhc-card-border-width, var(--rhc-border-width-sm));
-  color: var(--rhc-card-color);
-}
-
-@mixin rhc-card__content {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-card-padding-block-end, var(--rhc-space-xl));
-  padding-block-start: var(--rhc-card-padding-block-start, var(--rhc-space-xl));
-  padding-inline-end: var(--rhc-card-padding-inline-end, var(--rhc-space-xl));
-  padding-inline-start: var(--rhc-card-padding-inline-start, var(--rhc-space-xl));
-  row-gap: var(--rhc-card-row-gap, var(--rhc-size-quarter-lint));
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin-block-end: 0;
-    margin-block-start: 0;
-  }
-}
-
-@mixin rhc-card__heading {
-  align-items: center;
-  display: flex;
-  font-size: var(--rhc-card-heading-font-size);
-  font-weight: var(--rhc-card-heading-font-weight, 700);
-  text-decoration: none;
-}
-
-@mixin rhc-card__heading--active {
-  text-decoration: var(--rhc-card-active-text-decoration, underline);
-}
-@mixin rhc-card__heading--hover {
-  text-decoration: var(--rhc-card-hover-text-decoration, underline);
-}
-@mixin rhc-card__heading--focus {
-  text-decoration: var(--rhc-card-focus-text-decoration, underline);
-}
-
-@mixin rhc-card__subheading {
-  align-items: center;
-  display: flex;
-  font-size: var(--rhc-card-subheading-font-size);
-  text-decoration: none;
-}
-
-@mixin rhc-card__link {
-  color: var(--rhc-card-link-color);
-  text-decoration: none !important;
-}
-
-@mixin rhc-card__link--active {
-  --utrecht-link-color: var(--rhc-card-link-active-color);
-
-  color: var(--rhc-card-link-active-color);
-  text-decoration: var(--rhc-card-link-active-text-decoration, none);
-}
-@mixin rhc-card__link--hover {
-  text-decoration: var(--rhc-card-link-hover-text-decoration, none);
-}
-@mixin rhc-card__link--focus {
-  text-decoration: var(--rhc-card-link-focus-text-decoration, none);
-}
-
-@mixin rhc-card__metadata {
-  color: var(--rhc-card-metadata-color);
-}
-
-@mixin rounded-border-corners {
-  border-end-end-radius: var(
-    --rhc-card-border-end-end-radius,
-    var(--rhc-card-border-radius, var(--rhc-border-radius-md))
-  );
-  border-end-start-radius: var(
-    --rhc-card-border-end-start-radius,
-    var(--rhc-card-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-end-radius: var(
-    --rhc-card-border-start-end-radius,
-    var(--rhc-card-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-start-radius: var(
-    --rhc-card-border-start-start-radius,
-    var(--rhc-card-border-radius, var(--rhc-border-radius-md))
-  );
-}

package/src/card/index.scss

@@ -1,62 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-card {
-  @include mixin.rhc-card;
-  .utrecht-img:not(img[width]) {
-    block-size: 100%;
-    inline-size: 100%;
-  }
-}
-
-.rhc-card--default {
-  @include mixin.rhc-card--default;
-}
-
-.rhc-card__heading {
-  @include mixin.rhc-card__heading;
-}
-
-.rhc-card__subheading {
-  @include mixin.rhc-card__subheading;
-}
-
-.rhc-card__metadata {
-  @include mixin.rhc-card__metadata;
-}
-
-.rhc-card__content {
-  @include mixin.rhc-card__content;
-}
-
-.rhc-card__link {
-  @include mixin.rhc-card__link;
-}
-
-.rhc-card:active .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-.rhc-card:focus .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-.rhc-card:hover .rhc-card__heading {
-  @include mixin.rhc-card__heading--active;
-}
-
-.rhc-card:active .rhc-card__link {
-  @include mixin.rhc-card__link--active;
-}
-.rhc-card:focus .rhc-card__link {
-  @include mixin.rhc-card__link--focus;
-}
-.rhc-card:hover .rhc-card__link {
-  @include mixin.rhc-card__link--hover;
-}
-
-.rhc-card__footer {
-  @include mixin.rhc-card__content;
-}