@rijkshuisstijl-community/components-css 16.0.1 → 17.1.0

package/index.scss

@@ -4,60 +4,60 @@
  */
 
 @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 "src/code-input/index" as codeInput;
-@use "src/code-input-group/index" as codeInputGroup;
-@use "src/data-badge-button/index" as dataBadgeButton;
+@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 "@rijkshuisstijl-community/code-input-css/src/index" as codeInput;
+@use "@rijkshuisstijl-community/code-input-group-css/src/index" as codeInputGroup;
+@use "@rijkshuisstijl-community/data-badge-button-css/src/index" as dataBadgeButton;
+@use "@rijkshuisstijl-community/data-summary-css/src/index" as dataSummary;
 @use "@rijkshuisstijl-community/dot-badge-css/src/index" as dotBadge;
 @use "src/expandable-checkbox-group/index" as expandableCheckboxGroup;
 @use "@rijkshuisstijl-community/figure-css/src/index" as figure;
-@use "src/file/index" as file;
-@use "src/file-input/index" as fileInput;
+@use "@rijkshuisstijl-community/file-css/src/index" as file;
+@use "@rijkshuisstijl-community/file-input-css/src/index" as fileInput;
 @use "src/form/index" as form;
 @use "src/form-field/index" as formField;
 @use "src/form-field-radio-option/index" as FormFieldRadio;
-@use "src/footer/index" as footer;
-@use "src/heading/index" as heading;
-@use "src/hero/index" as hero;
-@use "src/language-navigation/index" as languageNavigation;
-@use "src/link-list/index" as linkList;
-@use "src/link-list-card/index" as linkListCard;
+@use "@rijkshuisstijl-community/footer-css/src/index" as footer;
+@use "@rijkshuisstijl-community/heading-css/src/index" as heading;
+@use "@rijkshuisstijl-community/hero-css/src/index" as hero;
+@use "@rijkshuisstijl-community/language-navigation-css/src/index" as languageNavigation;
+@use "@rijkshuisstijl-community/link-button-css/src/index" as linkButton;
+@use "@rijkshuisstijl-community/link-list-css/src/index" as linkList;
+@use "@rijkshuisstijl-community/link-list-card-css/src/index" as linkListCard;
 @use "@rijkshuisstijl-community/link-css/src/index" as link;
-@use "src/listbox/index" as listbox;
-@use "src/logo/index" as logo;
-@use "src/navbar/index" as navbar;
-@use "src/message-list/index" as messageList;
-@use "src/navigation-list/index" as navigationList;
-@use "src/number-badge/index" as numberBadge;
-@use "src/ordered-list/index" as orderedList;
+@use "@rijkshuisstijl-community/listbox-css/src/index" as listbox;
+@use "@rijkshuisstijl-community/logo-css/src/index" as logo;
+@use "@rijkshuisstijl-community/navigation-bar-css/src/index"as navBar;
+@use "@rijkshuisstijl-community/message-list-css/src/index" as messageList;
+@use "@rijkshuisstijl-community/navigation-list-css/src/index" as navigationList;
+@use "@rijkshuisstijl-community/number-badge-css/src/index" as numberBadge;
+@use "@rijkshuisstijl-community/ordered-list-css/src/index" as orderedList;
 @use "@rijkshuisstijl-community/paragraph-css/src/index" as paragraph;
-@use "src/page-number-navigation/index" as pagination;
+@use "@rijkshuisstijl-community/page-number-navigation-css/src/index" as pagination;
 @use "src/pre-heading/index" as preHeading;
-@use "src/radio/index" as radio;
+@use "@rijkshuisstijl-community/radio-css/src/index" as radio;
 @use "src/radio-group/index" as radioGroup;
-@use "src/rounded-corner/index" as roundedCorner;
+@use "@rijkshuisstijl-community/rounded-corner-css/src/index" as roundedCorner;
 @use "src/select/index" as select;
 @use "@rijkshuisstijl-community/separator-css/src/index" as separator;
-@use "src/side-nav/index" as sideNav;
-@use "src/skip-link/index" as skipLink;
+@use "@rijkshuisstijl-community/side-nav-css/src/index" as sideNav;
+@use "@rijkshuisstijl-community/skip-link-css/src/index" as skipLink;
 @use "src/table/index" as table;
-@use "src/textarea/index" as textarea;
-@use "src/text-input/index" as textinput;
-@use "src/toggletip/index" as toggletip;
-@use "src/unordered-list/index" as unorderedList;
-@use "src/visually-hidden/index" as visually-hidden;
+@use "@rijkshuisstijl-community/textarea-css/src/index" as textarea;
+@use "@rijkshuisstijl-community/text-input-css/src/index" as textinput;
+@use "@rijkshuisstijl-community/toggletip-css/src/index" as toggletip;
+@use "@rijkshuisstijl-community/unordered-list-css/src/index" as unorderedList;
+@use "@rijkshuisstijl-community/visually-hidden-css/src/index" as visually-hidden;
 @use "src/wrapper/index" as wrapper;
-@use "src/data-summary/index" as dataSummary;
 
 @import "@utrecht/action-group-css/dist/index.css";
 @import "@utrecht/article-css/dist/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "16.0.1",
+  "version": "17.1.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -11,7 +11,7 @@
   "private": false,
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "provenance": true
   },
   "repository": {
     "type": "git+ssh",
@@ -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,67 @@
     "@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.1.0",
+    "@rijkshuisstijl-community/action-group-css": "1.1.0",
+    "@rijkshuisstijl-community/alert-css": "4.1.0",
+    "@rijkshuisstijl-community/article-css": "2.1.0",
+    "@rijkshuisstijl-community/blockquote-css": "1.1.0",
+    "@rijkshuisstijl-community/breadcrumb-nav-css": "1.1.0",
+    "@rijkshuisstijl-community/button-css": "1.1.0",
+    "@rijkshuisstijl-community/card-as-link-css": "1.1.0",
+    "@rijkshuisstijl-community/card-css": "1.1.0",
+    "@rijkshuisstijl-community/checkbox-group-css": "1.0.1",
+    "@rijkshuisstijl-community/checkbox-css": "1.0.1",
+    "@rijkshuisstijl-community/code-input-css": "1.0.0",
+    "@rijkshuisstijl-community/code-input-group-css": "1.0.0",
+    "@rijkshuisstijl-community/data-badge-button-css": "1.0.0",
+    "@rijkshuisstijl-community/data-summary-css": "1.0.0",
+    "@rijkshuisstijl-community/dot-badge-css": "1.1.0",
+    "@rijkshuisstijl-community/figure-css": "1.1.0",
+    "@rijkshuisstijl-community/file-css": "1.0.0",
+    "@rijkshuisstijl-community/file-input-css": "1.0.0",
+    "@rijkshuisstijl-community/footer-css": "1.0.0",
+    "@rijkshuisstijl-community/heading-css": "1.0.0",
+    "@rijkshuisstijl-community/hero-css": "1.0.0",
+    "@rijkshuisstijl-community/link-button-css": "1.0.0",
+    "@rijkshuisstijl-community/link-list-card-css": "1.0.0",
+    "@rijkshuisstijl-community/link-css": "1.1.0",
+    "@rijkshuisstijl-community/listbox-css": "1.0.0",
+    "@rijkshuisstijl-community/language-navigation-css": "1.0.0",
+    "@rijkshuisstijl-community/link-list-css": "1.0.0",
+    "@rijkshuisstijl-community/logo-css": "1.0.0",
+    "@rijkshuisstijl-community/message-list-css": "1.0.0",
+    "@rijkshuisstijl-community/navigation-bar-css": "1.0.0",
+    "@rijkshuisstijl-community/navigation-list-css": "1.0.0",
+    "@rijkshuisstijl-community/number-badge-css": "1.0.0",
+    "@rijkshuisstijl-community/ordered-list-css": "1.0.0",
+    "@rijkshuisstijl-community/page-number-navigation-css": "1.0.0",
+    "@rijkshuisstijl-community/paragraph-css": "2.1.0",
+    "@rijkshuisstijl-community/radio-css": "1.0.0",
+    "@rijkshuisstijl-community/rounded-corner-css": "1.0.0",
+    "@rijkshuisstijl-community/separator-css": "1.1.0",
+    "@rijkshuisstijl-community/side-nav-css": "1.0.0",
+    "@rijkshuisstijl-community/skip-link-css": "1.0.0",
+    "@rijkshuisstijl-community/text-input-css": "1.0.0",
+    "@rijkshuisstijl-community/textarea-css": "1.0.0",
+    "@rijkshuisstijl-community/toggletip-css": "1.0.0",
+    "@rijkshuisstijl-community/unordered-list-css": "1.0.0",
+    "@rijkshuisstijl-community/visually-hidden-css": "1.0.0"
   },
   "scripts": {
     "dev": "vite build --watch",

package/src/expandable-checkbox-group/_mixin.scss

@@ -3,7 +3,7 @@
  * Copyright (c) 2026 Community for NL Design System
  */
 
-@use "../visually-hidden/mixin" as visually-hidden;
+@use "@rijkshuisstijl-community/visually-hidden-css/src/mixin" as visually-hidden;
 @use "@utrecht/focus-ring-css/src/mixin" as utrecht-focus-mixin;
 
 @mixin rhc-expandable-checkbox-group__details {

package/src/wrapper/createSpacingCSS.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 const spacingMatrix = JSON.parse(fs.readFileSync('./src/wrapper/spacing-matrix.json'));
 
 const spaceMap = {

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;
-}

package/src/card-as-link/_mixin.scss

@@ -1,222 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-card-as-link {
-  @include rounded-border-corners;
-
-  box-sizing: border-box;
-  column-gap: var(--rhc-card-as-link-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-as-link-font-size-md, inherit);
-  inline-size: 100%;
-  line-height: var(--rhc-text-line-height-md, inherit);
-  position: relative;
-  text-decoration: none;
-}
-
-@mixin rhc-card-as-link--default {
-  background-color: var(--rhc-card-as-link-background-color);
-  border-color: var(--rhc-card-as-link-border-color);
-  border-style: solid;
-  border-width: var(--rhc-card-as-link-border-width, var(--rhc-border-width-sm));
-  color: var(--rhc-card-as-link-color);
-}
-
-@mixin rhc-card-as-link--full-bleed {
-  --rhc-card-as-link-heading-color: var(--rhc-card-as-link-full-bleed-color);
-  --rhc-card-as-link-metadata-color: var(
-    --rhc-card-as-link-full-bleed-metadata-color,
-    var(--rhc-card-as-link-full-bleed-color)
-  );
-
-  color: var(--rhc-card-as-link-full-bleed-color);
-}
-
-@mixin rhc-card-as-link--horizontal {
-  --rhc-card-as-link-heading-color: var(--rhc-card-as-link-horizontal-color);
-
-  color: var(--rhc-card-as-link-horizontal-color);
-  flex-direction: row;
-  gap: 0;
-  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
-}
-
-@mixin rhc-card-as-link--active {
-  background-color: var(--rhc-card-as-link-active-background-color);
-}
-
-@mixin rhc-card-as-link--default--focus {
-  background-color: var(--rhc-card-as-link-focus-background-color);
-}
-
-@mixin rhc-card-as-link--default--hover {
-  background-color: var(--rhc-card-as-link-hover-background-color);
-}
-
-@mixin rhc-card-as-link--full-bleed__footer {
-  padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, var(--rhc-space-xl));
-  padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, var(--rhc-space-xl));
-  padding-inline-end: var(--rhc-card-as-link-full-bleed-padding-inline-end, 0);
-  padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
-}
-
-@mixin rhc-card-as-link__button {
-  z-index: 1;
-}
-
-@mixin rhc-card-as-link__image-container {
-  order: -1;
-}
-
-@mixin rhc-card-as-link__image {
-  aspect-ratio: 16 / 9;
-  block-size: 100%;
-}
-
-@mixin rhc-card-as-link__content {
-  @include container-content;
-
-  flex: 1;
-}
-
-@mixin rhc-card-as-link__footer {
-  @include container-content;
-}
-
-@mixin rhc-card-as-link--horizontal__content {
-  @include rounded-border-corners;
-
-  background-color: var(--rhc-card-as-link-horizontal-background-color);
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-  color: var(--rhc-card-as-link-horizontal-color);
-  column-gap: var(--rhc-card-as-link-column-gap, var(--rhc-space-xl));
-  flex-direction: row;
-  padding-block-end: var(--rhc-card-as-link-horizontal-padding-block-end, 0);
-  padding-block-start: var(--rhc-card-as-link-horizontal-padding-block-start, 0);
-  padding-inline-end: var(--rhc-card-as-link-horizontal-padding-inline-end, 0);
-  padding-inline-start: var(--rhc-card-as-link-horizontal-padding-inline-start, 0);
-  row-gap: var(--rhc-card-as-link-row-gap, var(--rhc-size-quarter-lint));
-}
-
-@mixin rhc-card-as-link--horizontal__heading {
-  inline-size: var(--rhc-card-as-link-horizontal-heading-inline-size);
-}
-
-@mixin rhc-card-as-link--full-bleed__image-container {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-@mixin rhc-card-as-link--full-bleed__image {
-  @include rounded-border-corners;
-
-  block-size: 100%;
-  filter: brightness(var(--rhc-card-as-link-full-bleed-opacity, 0.5));
-  inline-size: 100%;
-  position: absolute;
-  z-index: -1;
-}
-
-@mixin rhc-card-as-link--horizontal__image {
-  @include rounded-border-corners;
-
-  aspect-ratio: 1 / 1;
-  border-end-end-radius: 0;
-  border-start-end-radius: 0;
-  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
-}
-
-@mixin rhc-card-as-link__heading {
-  align-items: center;
-  color: var(--rhc-card-as-link-heading-color);
-  display: flex;
-  font-size: var(--rhc-card-as-link-heading-font-size, var(--rhc-space-2xl));
-  font-weight: var(--rhc-card-as-link-heading-font-weight, 700);
-}
-
-@mixin rhc-card-as-link__heading--active {
-  text-decoration: var(--rhc-card-as-link-active-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__heading--hover {
-  text-decoration: var(--rhc-card-as-link-hover-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__heading--focus {
-  text-decoration: var(--rhc-card-as-link-focus-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__icon {
-  color: var(--rhc-card-as-link-icon-color);
-  size: var(--rhc-card-as-link-icon-size, 24px);
-}
-
-@mixin rhc-card-as-link__link {
-  color: var(--rhc-card-as-link-link-color);
-  text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__anchor {
-  a::after {
-    content: "";
-    inset: 0;
-    position: absolute;
-  }
-}
-
-@mixin rhc-card-as-link__link--active {
-  --utrecht-link-color: var(--rhc-card-as-link-link-active-color);
-
-  color: var(--rhc-card-as-link-link-active-color);
-  text-decoration: var(--rhc-card-as-link-link-active-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__link--hover {
-  text-decoration: var(--rhc-card-as-link-link-hover-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__link--focus {
-  text-decoration: var(--rhc-card-as-link-link-focus-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__metadata {
-  color: var(--rhc-card-as-link-metadata-color);
-}
-
-@mixin container-content {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-card-as-link-padding-block-end, var(--rhc-space-xl));
-  padding-block-start: var(--rhc-card-as-link-padding-block-start, var(--rhc-space-xl));
-  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, var(--rhc-space-xl));
-  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, var(--rhc-space-xl));
-  row-gap: var(--rhc-card-as-link-row-gap, var(--rhc-size-quarter-lint));
-}
-
-@mixin rounded-border-corners {
-  border-end-end-radius: var(
-    --rhc-card-as-link-border-end-end-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-end-start-radius: var(
-    --rhc-card-as-link-border-end-start-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-end-radius: var(
-    --rhc-card-as-link-border-start-end-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-start-radius: var(
-    --rhc-card-as-link-border-start-start-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-}
-
-@mixin rhc-card-as-link__empty-element {
-  display: none;
-}