@rijkshuisstijl-community/components-css 17.0.0 → 17.1.0

package/src/footer/index.scss

@@ -1,126 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-page-footer {
-  --_utrecht-link-state-text-decoration-color: currentColor;
-  --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;
-  --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-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);
-}
-
-.rhc-page-footer--primary-outlined {
-  --utrecht-page-footer-background-color: var(--rhc-page-footer-outlined-background-color);
-  --utrecht-page-footer-color: var(--rhc-page-footer-outlined-color);
-
-  border-block-start-color: var(--rhc-page-footer-outlined-border-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);
-}
-
-/**
- * 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;
-
-  :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-layout > * {
-  flex: 1;
-}
-
-.rhc-page-footer__section,
-.rhc-page-footer__tagline {
-  break-inside: avoid;
-  line-height: var(--rhc-text-line-height-md, inherit);
-  padding-block-end: var(--rhc-page-footer-padding-block-end);
-}
-
-.rhc-page-subfooter-layout {
-  align-items: center;
-  display: flex;
-  gap: var(--rhc-page-footer-content-column-gap);
-  justify-content: space-between;
-
-  @media (width <= 1024px) {
-    flex-direction: column;
-  }
-}
-
-.rhc-page-prefooter {
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.rhc-page-prefooter::before {
-  background-color: var(--rhc-color-primary-500, currentColor);
-  block-size: var(--rhc-space-2xl);
-  content: "";
-  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: 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/heading/index.scss

@@ -1,33 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "@nl-design-system-candidate/heading-css/dist/heading.css";
-
-.rhc-heading {
-  &.nl-heading--level-1 {
-    margin-block-end: var(--nl-heading-level-1-margin-block-end, var(--rhc-space-none, 0));
-    margin-block-start: var(--nl-heading-level-1-margin-block-start, var(--rhc-space-none, 0));
-  }
-
-  &.nl-heading--level-2 {
-    margin-block-end: var(--nl-heading-level-2-margin-block-end, var(--rhc-space-none, 0));
-    margin-block-start: var(--nl-heading-level-2-margin-block-start, var(--rhc-space-none, 0));
-  }
-
-  &.nl-heading--level-3 {
-    margin-block-end: var(--nl-heading-level-3-margin-block-end, var(--rhc-space-none, 0));
-    margin-block-start: var(--nl-heading-level-3-margin-block-start, var(--rhc-space-none, 0));
-  }
-
-  &.nl-heading--level-4 {
-    margin-block-end: var(--nl-heading-level-4-margin-block-end, var(--rhc-space-none, 0));
-    margin-block-start: var(--nl-heading-level-4-margin-block-start, var(--rhc-space-none, 0));
-  }
-
-  &.nl-heading--level-5 {
-    margin-block-end: var(--nl-heading-level-5-margin-block-end, var(--rhc-space-none, 0));
-    margin-block-start: var(--nl-heading-level-5-margin-block-start, var(--rhc-space-none, 0));
-  }
-}

package/src/hero/_mixin.scss

@@ -1,104 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-hero {
-  block-size: auto;
-  inline-size: var(--rhc-hero-inline-size);
-  overflow: hidden;
-  position: relative;
-}
-
-@mixin rhc-hero--aspect-ratio-16-9 {
-  aspect-ratio: 16 / 9;
-}
-
-@mixin rhc-hero--aspect-ratio-1-1 {
-  aspect-ratio: 1 / 1;
-}
-
-@mixin rhc-hero--aspect-ratio-4-3 {
-  aspect-ratio: 4 / 3;
-}
-
-@mixin rhc-hero__message {
-  background-color: var(--rhc-hero-message-background-color);
-  box-sizing: border-box;
-  color: var(--rhc-hero-message-color, inherit);
-  display: flex;
-  flex-direction: column;
-  inline-size: var(--rhc-hero-message-inline-size);
-  inset-block-end: 0;
-  padding-block-end: var(--rhc-hero-message-padding-block-end);
-  padding-block-start: var(--rhc-hero-message-padding-block-start);
-  padding-inline-end: var(--rhc-hero-message-padding-inline-end);
-  padding-inline-start: var(--rhc-hero-message-padding-inline-start);
-  position: absolute;
-  row-gap: var(--rhc-hero-message-row-gap);
-}
-
-@mixin rhc-hero__heading-group {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-hero-message-heading-group-row-gap, var(--rhc-hero-message-row-gap));
-}
-
-@mixin rhc-hero--border-radius-corner-end-end {
-  border-end-end-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-end-start {
-  border-end-start-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-start-end {
-  border-start-end-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero--border-radius-corner-start-start {
-  border-start-start-radius: var(--rhc-hero-border-radius);
-}
-
-@mixin rhc-hero__message--text-align-start {
-  border-start-end-radius: var(--rhc-hero-message-border-radius);
-  inset-inline-start: 0;
-}
-
-@mixin rhc-hero__message--text-align-end {
-  border-start-start-radius: var(--rhc-hero-message-border-radius);
-  inset-inline-end: 0;
-}
-
-@mixin rhc-hero__image {
-  block-size: auto;
-  inline-size: var(--rhc-hero-inline-size);
-  position: relative;
-}
-
-@mixin rhc-hero__heading {
-  color: currentColor;
-  font-family: var(--rhc-hero-heading-font-family);
-  font-size: var(--rhc-hero-heading-font-size);
-  font-weight: var(--rhc-hero-heading-font-weight);
-  line-height: var(--rhc-hero-heading-line-height);
-}
-
-@mixin rhc-hero__sub-heading {
-  --nl-paragraph-font-size: var(--rhc-hero-sub-heading-font-size);
-  --nl-paragraph-color: currentColor;
-
-  font-family: var(--rhc-hero-sub-heading-font-family);
-  font-weight: var(--rhc-hero-sub-heading-font-weight);
-  line-height: var(--rhc-hero-sub-heading-line-height);
-}
-
-@mixin rhc-hero__children {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  inset-block-start: 50%;
-  position: absolute;
-  row-gap: var(--rhc-hero-message-row-gap);
-  transform: translateY(-50%);
-}

package/src/hero/index.scss

@@ -1,87 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-hero {
-  @include mixin.rhc-hero;
-
-  .utrecht-img:not(img[width]) {
-    inline-size: var(--rhc-hero-inline-size);
-  }
-}
-
-.rhc-hero--aspect-ratio-16-9 {
-  @include mixin.rhc-hero--aspect-ratio-16-9;
-}
-
-.rhc-hero--aspect-ratio-1-1 {
-  @include mixin.rhc-hero--aspect-ratio-1-1;
-}
-
-.rhc-hero--aspect-ratio-4-3 {
-  @include mixin.rhc-hero--aspect-ratio-4-3;
-}
-
-.rhc-hero__message {
-  @include mixin.rhc-hero__message;
-}
-
-.rhc-hero__children {
-  @include mixin.rhc-hero__children;
-}
-
-.rhc-hero__message .utrecht-heading-group {
-  @include mixin.rhc-hero__heading-group;
-}
-
-.rhc-hero--text-align-start:not(.rhc-hero--custom-border-radius-corner) {
-  @include mixin.rhc-hero--border-radius-corner-start-start;
-}
-
-.rhc-hero--text-align-start .rhc-hero__message {
-  @include mixin.rhc-hero__message--text-align-start;
-}
-
-.rhc-hero--text-align-end:not(.rhc-hero--custom-border-radius-corner) {
-  @include mixin.rhc-hero--border-radius-corner-start-end;
-}
-
-.rhc-hero--text-align-end .rhc-hero__message {
-  @include mixin.rhc-hero__message--text-align-end;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-start {
-  @include mixin.rhc-hero--border-radius-corner-start-start;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-start-end {
-  @include mixin.rhc-hero--border-radius-corner-start-end;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-start {
-  @include mixin.rhc-hero--border-radius-corner-end-start;
-}
-
-.rhc-hero--custom-border-radius-corner.rhc-hero--border-radius-corner-end-end {
-  @include mixin.rhc-hero--border-radius-corner-end-end;
-}
-
-.rhc-hero__image {
-  @include mixin.rhc-hero__image;
-}
-
-.rhc-hero__image:not(img[height]) {
-  block-size: auto;
-  inline-size: var(--rhc-hero-inline-size);
-}
-
-.rhc-hero__heading {
-  @include mixin.rhc-hero__heading;
-}
-
-.rhc-hero__sub-heading {
-  @include mixin.rhc-hero__sub-heading;
-}

package/src/language-navigation/_mixin.scss

@@ -1,85 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "@utrecht/listbox-css/src/mixin" as utrecht-listbox-mixin;
-
-@mixin rhc-language-navigation__trigger {
-  --utrecht-button-font-weight: var(--rhc-font-weight-regular);
-}
-
-@mixin rhc-language-navigation__list {
-  @include utrecht-listbox-mixin.utrecht-listbox;
-  @include utrecht-listbox-mixin.reset-ul;
-}
-
-@mixin rhc-language-navigation__list__item {
-  @include utrecht-listbox-mixin.utrecht-listbox__option;
-
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-@mixin rhc-language-navigation__list__item--html-li {
-  @include utrecht-listbox-mixin.reset-li;
-
-  &:hover {
-    @include utrecht-listbox-mixin.utrecht-listbox__option--hover;
-  }
-
-  &:focus {
-    @include utrecht-listbox-mixin.utrecht-listbox__option--focus;
-  }
-}
-
-// Currently the utrecht mixin does not apply pseudo classes properly so we set the variables ourselves
-// once the following issue is resolved we can use the mixin again: https://github.com/nl-design-system/utrecht/issues/3031
-@mixin rhc-language-navigation__list__item--selected {
-  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
-  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
-  --_nl-link-state-color: var(--utrecht-listbox-option-selected-color);
-}
-
-@mixin rhc-language-navigation__link--focus-visible {
-  @include utrecht-listbox-mixin.utrecht-listbox__option--focus-visible;
-}
-
-@mixin rhc-language-navigation__link {
-  // remove default link styles
-  --nl-link-text-decoration-line: none;
-  --nl-link-hover-text-decoration-line: none;
-
-  // set link colors based on listbox option colors
-  --nl-link-color: var(--utrecht-listbox-option-color, var(--rhc-color-zwart));
-  --nl-link-active-color: var(--utrecht-listbox-option-color, var(--rhc-color-zwart));
-  --nl-link-hover-color: var(--utrecht-listbox-option-hover-color, var(--rhc-color-zwart));
-
-  flex-grow: 1;
-
-  // make the link fill the list item
-  line-height: calc(
-    var(--utrecht-listbox-option-min-block-size, var(--rhc-space-3xl)) - var(
-        --utrecht-listbox-option-padding-block-start,
-        var(--rhc-space-md)
-      ) - var(--utrecht-listbox-option-padding-block-end, var(--rhc-space-md))
-  );
-  padding-block-end: var(--utrecht-listbox-option-padding-block-end, var(--rhc-space-md));
-  padding-block-start: var(--utrecht-listbox-option-padding-block-start, var(--rhc-space-md));
-  padding-inline-end: var(--utrecht-listbox-option-padding-inline-end, var(--rhc-space-xl));
-  padding-inline-start: var(--utrecht-listbox-option-padding-inline-start, var(--rhc-space-xl));
-}
-
-@mixin rhc-language-navigation__link--button {
-  // reset default button styles & match link colors
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  inline-size: 100%;
-  text-align: start;
-}

package/src/language-navigation/index.scss

@@ -1,37 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-@use "mixin";
-
-.rhc-language-navigation__trigger {
-  @include mixin.rhc-language-navigation__trigger;
-}
-
-.rhc-language-navigation__list {
-  @include mixin.rhc-language-navigation__list;
-}
-
-.rhc-language-navigation__list__item {
-  @include mixin.rhc-language-navigation__list__item;
-}
-
-.rhc-language-navigation__list__item--selected {
-  @include mixin.rhc-language-navigation__list__item--selected;
-}
-
-.rhc-language-navigation__list__item--html-li {
-  @include mixin.rhc-language-navigation__list__item--html-li;
-}
-
-.rhc-language-navigation__link:focus-visible {
-  @include mixin.rhc-language-navigation__link--focus-visible;
-}
-
-.rhc-language-navigation__link {
-  @include mixin.rhc-language-navigation__link;
-}
-
-button.rhc-language-navigation__link {
-  @include mixin.rhc-language-navigation__link--button;
-}

package/src/link-button/_mixin.scss

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

package/src/link-button/index.scss

@@ -1,7 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-// If needed to extend the Utrecht component add styles here.
-@use "mixin";

package/src/link-list/index.scss

@@ -1,28 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-link-list {
-  .utrecht-link-list__link {
-    align-items: flex-start;
-
-    .utrecht-icon {
-      align-items: center;
-      block-size: 1lh;
-      display: flex;
-      flex-shrink: 0;
-      position: static;
-    }
-  }
-
-  .utrecht-link-list__item {
-    display: inline-flex;
-    font-family: var(--rhc-text-font-family-default, inherit);
-    font-size: var(--utrecht-link-list-item-font-size, inherit);
-  }
-
-  .utrecht-link-list__item .utrecht-link:any-link {
-    line-height: var(--rhc-text-line-height-md, inherit);
-  }
-}

package/src/link-list-card/index.scss

@@ -1,15 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-.rhc-link-list-card {
-  background-color: var(--rhc-link-list-card-background-color);
-  display: flex;
-  flex-direction: column;
-  gap: var(--rhc-link-list-card-row-gap);
-  padding-block-end: var(--rhc-link-list-card-padding-block-end);
-  padding-block-start: var(--rhc-link-list-card-padding-block-start);
-  padding-inline-end: var(--rhc-link-list-card-padding-inline-end);
-  padding-inline-start: var(--rhc-link-list-card-padding-inline-start);
-}

package/src/listbox/_mixin.scss

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

package/src/listbox/index.scss

@@ -1,7 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-// If needed to extend the Utrecht component add styles here.
-@use "mixin";

package/src/logo/_mixin.scss

@@ -1,61 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-logo {
-  display: grid;
-  font-family: var(--rhc-logo-font-family);
-  font-size: var(--rhc-logo-title-font-size, 1em);
-  font-weight: var(--rhc-logo-title-font-weight);
-  gap: 0 var(--rhc-logo-column-gap, inherit);
-  grid-auto-rows: var(--rhc-logo-image-inline-size);
-  grid-template-areas: ". image ." ". image caption";
-  grid-template-columns: 1fr var(--rhc-logo-image-inline-size) 1fr;
-  grid-template-rows: var(--rhc-logo-title-padding-block-start) 1fr;
-  line-height: var(--rhc-logo-title-line-height, 1);
-  margin-block-end: var(--rhc-logo-margin-block-end, 0);
-  margin-block-start: var(--rhc-logo-margin-block-start, 0);
-  margin-inline-end: var(--rhc-logo-margin-inline-end, 0);
-  margin-inline-start: var(--rhc-logo-margin-inline-start, 0);
-  min-block-size: calc(var(--rhc-logo-rows, 2) * var(--rhc-logo-image-inline-size));
-}
-
-@mixin rhc-logo__image {
-  align-items: center;
-  background-color: var(--rhc-logo-image-background-color, inherit);
-  block-size: var(--rhc-logo-image-block-size);
-  color: var(--rhc-logo-image-color, inherit);
-  display: flex;
-  flex-direction: column;
-  grid-area: image;
-  inline-size: var(--rhc-logo-image-inline-size);
-  justify-content: end;
-}
-
-@mixin rhc-logo__icon {
-  block-size: unset;
-  inline-size: unset;
-}
-
-@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);
-}
-
-@mixin rhc-logo__title {
-  /* reset margin of HTML <h1> element */
-  margin-block-end: 0;
-  margin-block-start: 0;
-  white-space: pre-line;
-}
-
-@mixin rhc-logo__subtitle {
-  font-size: var(--rhc-logo-subtitle-font-size, 1em);
-  font-weight: var(--rhc-logo-subtitle-font-weight);
-  line-height: var(--rhc-logo-subtitle-line-height, 1);
-}

package/src/logo/index.scss

@@ -1,32 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-logo {
-  @include mixin.rhc-logo;
-}
-
-.rhc-logo__image {
-  @include mixin.rhc-logo__image;
-}
-
-.rhc-logo__image .utrecht-icon,
-.rhc-logo__image .rhc-icon {
-  @include mixin.rhc-logo__icon;
-}
-
-.rhc-logo__caption {
-  @include mixin.rhc-logo__caption;
-}
-
-.rhc-logo__title {
-  @include mixin.rhc-logo__title;
-}
-
-.rhc-logo__subtitle {
-  @include mixin.rhc-logo__subtitle;
-  @include mixin.rhc-logo__title;
-}