@rijkshuisstijl-community/design-tokens 10.0.1 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @rijkshuisstijl-community/design-tokens
 
+## 11.0.0
+
+### Major Changes
+
+- 378973a: Added licenses to Blockquote source code
+- 13de6a7: Voor de Navigation List component zijn de design tokens gewijzigd en verwerkt in de CSS:
+  - `rhc.navigation-list.icon.background-color` hernoemd naar `rhc.navigation-list.item.icon-start.background-color`.
+  - `rhc.navigation-list.icon.border-radius` hernoemd naar `rhc.navigation-list.item.icon-start.border-radius`.
+  - `rhc.navigation-list.icon.color` hernoemd naar `rhc.navigation-list.item.icon-start.color`.
+  - `rhc.navigation-list.item.content.font-size` hernoemd naar `rhc.navigation-list.item.description.font-size`.
+  - `rhc.navigation-list.item.heading.color` hernoemd naar `rhc.navigation-list.item.label.color`.
+  - `rhc.navigation-list.item.icon.padding-block` hernoemd naar `rhc.navigation-list.item.icon-start.padding-block`.
+  - `rhc.navigation-list.item.icon.padding-inline` hernoemd naar `rhc.navigation-list.item.icon-start.padding-inline`.
+  - `rhc.navigation-list.item.icon.size` hernoemd naar `rhc.navigation-list.item.icon-start.size`.
+  - `rhc.navigation-list.item.color` is verwijderd en `rhc.navigation-list.item.description.color` is toegevoegd zodat de color netjes op de description word ingesteld en niet elders overschreven word.
+  - `rhc.navigation-list.item.description.line-height` is toegevoegd omdat we over het algemeen line-height instelbaar maken waar font-size instelbaar is.
+  - `rhc.navigation-list.item.icon-end.color` is toegevoegd zodat icon color van end-icon niet meer via common token is gezet.
+
 ## 10.0.1
 
 ### Patch Changes

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Mon, 15 Dec 2025 18:39:45 GMT
+// Generated on Tue, 30 Dec 2025 09:35:37 GMT
 
 $rhc-border-radius-round: 999px;
 $rhc-border-radius-none: 0px;
@@ -494,21 +494,22 @@ $rhc-nav-bar-link-padding-inline-end: $rhc-space-150;
 $rhc-nav-bar-link-padding-inline-start: $rhc-space-150;
 $rhc-nav-bar-link-column-gap: $rhc-space-100;
 $rhc-nav-bar-background-color: $rhc-color-wit;
-$rhc-navigation-list-icon-border-radius: $rhc-border-radius-round;
-$rhc-navigation-list-item-icon-padding-inline: $rhc-space-100;
-$rhc-navigation-list-item-icon-padding-block: $rhc-space-100;
-$rhc-navigation-list-item-icon-size: $rhc-size-icon-md;
-$rhc-navigation-list-item-content-column-gap: $rhc-space-100;
-$rhc-navigation-list-item-content-row-gap: $rhc-space-50;
-$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
-$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
-$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
-$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-border-color: $rhc-color-cool-grey-300;
+$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-column-gap: $rhc-space-200;
 $rhc-navigation-list-item-min-height: $rhc-size-pointer-target;
 $rhc-navigation-list-item-padding-block: $rhc-space-150;
 $rhc-navigation-list-item-padding-inline: $rhc-space-200;
+$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
+$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
+$rhc-navigation-list-item-content-column-gap: $rhc-space-100; // [code-only]
+$rhc-navigation-list-item-content-row-gap: $rhc-space-50; // [code-only]
+$rhc-navigation-list-item-description-line-height: $rhc-text-line-height-md;
+$rhc-navigation-list-item-icon-start-border-radius: $rhc-border-radius-round;
+$rhc-navigation-list-item-icon-start-padding-block: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-padding-inline: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-size: $rhc-size-icon-md;
+$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
 $rhc-radio-group-padding-block-end: $rhc-space-100;
 $rhc-radio-group-padding-block-start: $rhc-space-100;
 $rhc-radio-group-row-gap: $rhc-space-200;
@@ -1053,16 +1054,17 @@ $rhc-nav-bar-link-font-size: $rhc-text-font-size-md;
 $rhc-nav-bar-heading-font-weight: $rhc-text-font-weight-strong;
 $rhc-nav-bar-color: $rhc-color-primary-500;
 $rhc-nav-bar-border-color: $rhc-color-primary-400;
-$rhc-navigation-list-icon-background-color: $rhc-color-foreground-default;
-$rhc-navigation-list-icon-color: $rhc-color-foreground-on-dark-color;
-$rhc-navigation-list-item-content-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
+$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
+$rhc-navigation-list-item-description-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-description-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-icon-end-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-icon-start-background-color: $rhc-color-foreground-default;
+$rhc-navigation-list-item-icon-start-color: $rhc-color-foreground-on-dark-color;
+$rhc-navigation-list-item-label-color: $rhc-color-foreground-default;
 $rhc-navigation-list-item-label-font-family: $rhc-text-font-family-default;
 $rhc-navigation-list-item-label-font-size: $rhc-text-font-size-xl;
 $rhc-navigation-list-item-label-font-weight: $rhc-text-font-weight-strong;
-$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
-$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
-$rhc-navigation-list-item-color: $rhc-color-foreground-subtle;
-$rhc-navigation-list-item-heading-color: $rhc-color-foreground-default;
 $rhc-sidenav-link-font-size: $rhc-text-font-size-md;
 $rhc-sidenav-link-font-family: $rhc-text-font-family-default;
 $rhc-sidenav-link-font-weight: $rhc-text-font-weight-default;

package/dist/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Mon, 15 Dec 2025 18:39:45 GMT
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 .rhc-theme {
@@ -496,21 +496,22 @@
   --rhc-nav-bar-link-padding-inline-start: var(--rhc-space-150);
   --rhc-nav-bar-link-column-gap: var(--rhc-space-100);
   --rhc-nav-bar-background-color: var(--rhc-color-wit);
-  --rhc-navigation-list-icon-border-radius: var(--rhc-border-radius-round);
-  --rhc-navigation-list-item-icon-padding-inline: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-padding-block: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-size: var(--rhc-size-icon-md);
-  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100);
-  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50);
-  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
-  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
-  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
-  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-border-color: var(--rhc-color-cool-grey-300);
+  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-column-gap: var(--rhc-space-200);
   --rhc-navigation-list-item-min-height: var(--rhc-size-pointer-target);
   --rhc-navigation-list-item-padding-block: var(--rhc-space-150);
   --rhc-navigation-list-item-padding-inline: var(--rhc-space-200);
+  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
+  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
+  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100); /** [code-only] */
+  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50); /** [code-only] */
+  --rhc-navigation-list-item-description-line-height: var(--rhc-text-line-height-md);
+  --rhc-navigation-list-item-icon-start-border-radius: var(--rhc-border-radius-round);
+  --rhc-navigation-list-item-icon-start-padding-block: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-padding-inline: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-size: var(--rhc-size-icon-md);
+  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
   --rhc-radio-group-padding-block-end: var(--rhc-space-100);
   --rhc-radio-group-padding-block-start: var(--rhc-space-100);
   --rhc-radio-group-row-gap: var(--rhc-space-200);
@@ -1055,16 +1056,17 @@
   --rhc-nav-bar-heading-font-weight: var(--rhc-text-font-weight-strong);
   --rhc-nav-bar-color: var(--rhc-color-primary-500);
   --rhc-nav-bar-border-color: var(--rhc-color-primary-400);
-  --rhc-navigation-list-icon-background-color: var(--rhc-color-foreground-default);
-  --rhc-navigation-list-icon-color: var(--rhc-color-foreground-on-dark-color);
-  --rhc-navigation-list-item-content-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
+  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
+  --rhc-navigation-list-item-description-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-description-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-icon-end-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-icon-start-background-color: var(--rhc-color-foreground-default);
+  --rhc-navigation-list-item-icon-start-color: var(--rhc-color-foreground-on-dark-color);
+  --rhc-navigation-list-item-label-color: var(--rhc-color-foreground-default);
   --rhc-navigation-list-item-label-font-family: var(--rhc-text-font-family-default);
   --rhc-navigation-list-item-label-font-size: var(--rhc-text-font-size-xl);
   --rhc-navigation-list-item-label-font-weight: var(--rhc-text-font-weight-strong);
-  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
-  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
-  --rhc-navigation-list-item-color: var(--rhc-color-foreground-subtle);
-  --rhc-navigation-list-item-heading-color: var(--rhc-color-foreground-default);
   --rhc-sidenav-link-font-size: var(--rhc-text-font-size-md);
   --rhc-sidenav-link-font-family: var(--rhc-text-font-family-default);
   --rhc-sidenav-link-font-weight: var(--rhc-text-font-weight-default);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Mon, 15 Dec 2025 18:39:45 GMT
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 export const rhcBorderRadiusRound: string;
@@ -435,31 +435,35 @@ export const rhcNavBarHeadingFontWeight: string;
 export const rhcNavBarBackgroundColor: string;
 export const rhcNavBarColor: string;
 export const rhcNavBarBorderColor: string;
-export const rhcNavigationListIconBackgroundColor: string;
-export const rhcNavigationListIconBorderRadius: string;
-export const rhcNavigationListIconColor: string;
-export const rhcNavigationListItemIconPaddingInline: string;
-export const rhcNavigationListItemIconPaddingBlock: string;
-export const rhcNavigationListItemIconSize: string;
-export const rhcNavigationListItemContentFontSize: string;
-export const rhcNavigationListItemContentColumnGap: string;
-export const rhcNavigationListItemContentRowGap: string;
-export const rhcNavigationListItemLabelFontFamily: string;
-export const rhcNavigationListItemLabelFontSize: string;
-export const rhcNavigationListItemLabelFontWeight: string;
-export const rhcNavigationListItemLabelLineHeight: string;
-export const rhcNavigationListItemActiveBackgroundColor: string;
-export const rhcNavigationListItemHoverBackgroundColor: string;
-export const rhcNavigationListItemFocusBackgroundColor: string;
 export const rhcNavigationListItemBackgroundColor: string;
-export const rhcNavigationListItemColor: string;
-export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemBorderColor: string;
-export const rhcNavigationListItemHeadingColor: string;
+export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemColumnGap: string;
 export const rhcNavigationListItemMinHeight: string;
 export const rhcNavigationListItemPaddingBlock: string;
 export const rhcNavigationListItemPaddingInline: string;
+export const rhcNavigationListItemActiveBackgroundColor: string;
+export const rhcNavigationListItemHoverBackgroundColor: string;
+export const rhcNavigationListItemFocusBackgroundColor: string;
+/** [code-only] */
+export const rhcNavigationListItemContentColumnGap: string;
+/** [code-only] */
+export const rhcNavigationListItemContentRowGap: string;
+export const rhcNavigationListItemDescriptionColor: string;
+export const rhcNavigationListItemDescriptionFontSize: string;
+export const rhcNavigationListItemDescriptionLineHeight: string;
+export const rhcNavigationListItemIconEndColor: string;
+export const rhcNavigationListItemIconStartBackgroundColor: string;
+export const rhcNavigationListItemIconStartBorderRadius: string;
+export const rhcNavigationListItemIconStartColor: string;
+export const rhcNavigationListItemIconStartPaddingBlock: string;
+export const rhcNavigationListItemIconStartPaddingInline: string;
+export const rhcNavigationListItemIconStartSize: string;
+export const rhcNavigationListItemLabelColor: string;
+export const rhcNavigationListItemLabelFontFamily: string;
+export const rhcNavigationListItemLabelFontSize: string;
+export const rhcNavigationListItemLabelFontWeight: string;
+export const rhcNavigationListItemLabelLineHeight: string;
 export const rhcRadioGroupPaddingBlockEnd: string;
 export const rhcRadioGroupPaddingBlockStart: string;
 export const rhcRadioGroupRowGap: string;

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Mon, 15 Dec 2025 18:39:45 GMT
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 export const rhcBorderRadiusRound = "999px";
@@ -436,32 +436,34 @@ export const rhcNavBarHeadingFontWeight = "700";
 export const rhcNavBarBackgroundColor = "#ffffff";
 export const rhcNavBarColor = "#154273";
 export const rhcNavBarBorderColor = "#4f7196";
-export const rhcNavigationListIconBackgroundColor = "#0f172a";
-export const rhcNavigationListIconBorderRadius = "999px";
-export const rhcNavigationListIconColor = "#ffffff";
-export const rhcNavigationListItemIconPaddingInline = "0.5rem";
-export const rhcNavigationListItemIconPaddingBlock = "0.5rem";
-export const rhcNavigationListItemIconSize = "24px";
-export const rhcNavigationListItemContentFontSize = "1.25rem";
-export const rhcNavigationListItemContentColumnGap = "0.5rem";
-export const rhcNavigationListItemContentRowGap = "0.25rem";
-export const rhcNavigationListItemLabelFontFamily =
-  "'Fira Sans', Arial, Verdana, sans-serif";
-export const rhcNavigationListItemLabelFontSize = "1.875rem";
-export const rhcNavigationListItemLabelFontWeight = "700";
-export const rhcNavigationListItemLabelLineHeight = "150%";
-export const rhcNavigationListItemActiveBackgroundColor = "#f1f5f9";
-export const rhcNavigationListItemHoverBackgroundColor = "#f8fafc";
-export const rhcNavigationListItemFocusBackgroundColor = "#dce3ea";
 export const rhcNavigationListItemBackgroundColor = "#ffffff";
-export const rhcNavigationListItemColor = "#334155";
-export const rhcNavigationListItemBorderWidth = "1px";
 export const rhcNavigationListItemBorderColor = "#cbd5e1";
-export const rhcNavigationListItemHeadingColor = "#0f172a";
+export const rhcNavigationListItemBorderWidth = "1px";
 export const rhcNavigationListItemColumnGap = "1rem";
 export const rhcNavigationListItemMinHeight = "48px";
 export const rhcNavigationListItemPaddingBlock = "0.75rem";
 export const rhcNavigationListItemPaddingInline = "1rem";
+export const rhcNavigationListItemActiveBackgroundColor = "#f1f5f9";
+export const rhcNavigationListItemHoverBackgroundColor = "#f8fafc";
+export const rhcNavigationListItemFocusBackgroundColor = "#dce3ea";
+export const rhcNavigationListItemContentColumnGap = "0.5rem"; // [code-only]
+export const rhcNavigationListItemContentRowGap = "0.25rem"; // [code-only]
+export const rhcNavigationListItemDescriptionColor = "#334155";
+export const rhcNavigationListItemDescriptionFontSize = "1.25rem";
+export const rhcNavigationListItemDescriptionLineHeight = "150%";
+export const rhcNavigationListItemIconEndColor = "#334155";
+export const rhcNavigationListItemIconStartBackgroundColor = "#0f172a";
+export const rhcNavigationListItemIconStartBorderRadius = "999px";
+export const rhcNavigationListItemIconStartColor = "#ffffff";
+export const rhcNavigationListItemIconStartPaddingBlock = "0.5rem";
+export const rhcNavigationListItemIconStartPaddingInline = "0.5rem";
+export const rhcNavigationListItemIconStartSize = "24px";
+export const rhcNavigationListItemLabelColor = "#0f172a";
+export const rhcNavigationListItemLabelFontFamily =
+  "'Fira Sans', Arial, Verdana, sans-serif";
+export const rhcNavigationListItemLabelFontSize = "1.875rem";
+export const rhcNavigationListItemLabelFontWeight = "700";
+export const rhcNavigationListItemLabelLineHeight = "150%";
 export const rhcRadioGroupPaddingBlockEnd = "0.5rem";
 export const rhcRadioGroupPaddingBlockStart = "0.5rem";
 export const rhcRadioGroupRowGap = "1rem";

package/dist/index.json

@@ -428,31 +428,33 @@
   "rhcNavBarBackgroundColor": "#ffffff",
   "rhcNavBarColor": "#154273",
   "rhcNavBarBorderColor": "#4f7196",
-  "rhcNavigationListIconBackgroundColor": "#0f172a",
-  "rhcNavigationListIconBorderRadius": "999px",
-  "rhcNavigationListIconColor": "#ffffff",
-  "rhcNavigationListItemIconPaddingInline": "0.5rem",
-  "rhcNavigationListItemIconPaddingBlock": "0.5rem",
-  "rhcNavigationListItemIconSize": "24px",
-  "rhcNavigationListItemContentFontSize": "1.25rem",
-  "rhcNavigationListItemContentColumnGap": "0.5rem",
-  "rhcNavigationListItemContentRowGap": "0.25rem",
-  "rhcNavigationListItemLabelFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
-  "rhcNavigationListItemLabelFontSize": "1.875rem",
-  "rhcNavigationListItemLabelFontWeight": "700",
-  "rhcNavigationListItemLabelLineHeight": "150%",
-  "rhcNavigationListItemActiveBackgroundColor": "#f1f5f9",
-  "rhcNavigationListItemHoverBackgroundColor": "#f8fafc",
-  "rhcNavigationListItemFocusBackgroundColor": "#dce3ea",
   "rhcNavigationListItemBackgroundColor": "#ffffff",
-  "rhcNavigationListItemColor": "#334155",
-  "rhcNavigationListItemBorderWidth": "1px",
   "rhcNavigationListItemBorderColor": "#cbd5e1",
-  "rhcNavigationListItemHeadingColor": "#0f172a",
+  "rhcNavigationListItemBorderWidth": "1px",
   "rhcNavigationListItemColumnGap": "1rem",
   "rhcNavigationListItemMinHeight": "48px",
   "rhcNavigationListItemPaddingBlock": "0.75rem",
   "rhcNavigationListItemPaddingInline": "1rem",
+  "rhcNavigationListItemActiveBackgroundColor": "#f1f5f9",
+  "rhcNavigationListItemHoverBackgroundColor": "#f8fafc",
+  "rhcNavigationListItemFocusBackgroundColor": "#dce3ea",
+  "rhcNavigationListItemContentColumnGap": "0.5rem",
+  "rhcNavigationListItemContentRowGap": "0.25rem",
+  "rhcNavigationListItemDescriptionColor": "#334155",
+  "rhcNavigationListItemDescriptionFontSize": "1.25rem",
+  "rhcNavigationListItemDescriptionLineHeight": "150%",
+  "rhcNavigationListItemIconEndColor": "#334155",
+  "rhcNavigationListItemIconStartBackgroundColor": "#0f172a",
+  "rhcNavigationListItemIconStartBorderRadius": "999px",
+  "rhcNavigationListItemIconStartColor": "#ffffff",
+  "rhcNavigationListItemIconStartPaddingBlock": "0.5rem",
+  "rhcNavigationListItemIconStartPaddingInline": "0.5rem",
+  "rhcNavigationListItemIconStartSize": "24px",
+  "rhcNavigationListItemLabelColor": "#0f172a",
+  "rhcNavigationListItemLabelFontFamily": "'Fira Sans', Arial, Verdana, sans-serif",
+  "rhcNavigationListItemLabelFontSize": "1.875rem",
+  "rhcNavigationListItemLabelFontWeight": "700",
+  "rhcNavigationListItemLabelLineHeight": "150%",
   "rhcRadioGroupPaddingBlockEnd": "0.5rem",
   "rhcRadioGroupPaddingBlockStart": "0.5rem",
   "rhcRadioGroupRowGap": "1rem",

package/dist/index.tokens.json

@@ -678,28 +678,14 @@
       "border-color": "#4f7196"
     },
     "navigation-list": {
-      "icon": {
-        "background-color": "#0f172a",
-        "border-radius": "999px",
-        "color": "#ffffff"
-      },
       "item": {
-        "icon": {
-          "padding-inline": "0.5rem",
-          "padding-block": "0.5rem",
-          "size": "24px"
-        },
-        "content": {
-          "font-size": "1.25rem",
-          "column-gap": "0.5rem",
-          "row-gap": "0.25rem"
-        },
-        "label": {
-          "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
-          "font-size": "1.875rem",
-          "font-weight": "700",
-          "line-height": "150%"
-        },
+        "background-color": "#ffffff",
+        "border-color": "#cbd5e1",
+        "border-width": "1px",
+        "column-gap": "1rem",
+        "min-height": "48px",
+        "padding-block": "0.75rem",
+        "padding-inline": "1rem",
         "active": {
           "background-color": "#f1f5f9"
         },
@@ -709,17 +695,33 @@
         "focus": {
           "background-color": "#dce3ea"
         },
-        "background-color": "#ffffff",
-        "color": "#334155",
-        "border-width": "1px",
-        "border-color": "#cbd5e1",
-        "heading": {
-          "color": "#0f172a"
+        "content": {
+          "column-gap": "0.5rem",
+          "row-gap": "0.25rem"
         },
-        "column-gap": "1rem",
-        "min-height": "48px",
-        "padding-block": "0.75rem",
-        "padding-inline": "1rem"
+        "description": {
+          "color": "#334155",
+          "font-size": "1.25rem",
+          "line-height": "150%"
+        },
+        "icon-end": {
+          "color": "#334155"
+        },
+        "icon-start": {
+          "background-color": "#0f172a",
+          "border-radius": "999px",
+          "color": "#ffffff",
+          "padding-block": "0.5rem",
+          "padding-inline": "0.5rem",
+          "size": "24px"
+        },
+        "label": {
+          "color": "#0f172a",
+          "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
+          "font-size": "1.875rem",
+          "font-weight": "700",
+          "line-height": "150%"
+        }
       }
     },
     "radio-group": {

package/dist/kern-lintblauw/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Mon, 15 Dec 2025 18:39:48 GMT
+// Generated on Tue, 30 Dec 2025 09:35:40 GMT
 
 $rhc-border-radius-round: 999px;
 $rhc-border-radius-none: 0px;
@@ -494,21 +494,22 @@ $rhc-nav-bar-link-padding-inline-end: $rhc-space-150;
 $rhc-nav-bar-link-padding-inline-start: $rhc-space-150;
 $rhc-nav-bar-link-column-gap: $rhc-space-100;
 $rhc-nav-bar-background-color: $rhc-color-wit;
-$rhc-navigation-list-icon-border-radius: $rhc-border-radius-round;
-$rhc-navigation-list-item-icon-padding-inline: $rhc-space-100;
-$rhc-navigation-list-item-icon-padding-block: $rhc-space-100;
-$rhc-navigation-list-item-icon-size: $rhc-size-icon-md;
-$rhc-navigation-list-item-content-column-gap: $rhc-space-100;
-$rhc-navigation-list-item-content-row-gap: $rhc-space-50;
-$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
-$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
-$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
-$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-border-color: $rhc-color-cool-grey-300;
+$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-column-gap: $rhc-space-200;
 $rhc-navigation-list-item-min-height: $rhc-size-pointer-target;
 $rhc-navigation-list-item-padding-block: $rhc-space-150;
 $rhc-navigation-list-item-padding-inline: $rhc-space-200;
+$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
+$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
+$rhc-navigation-list-item-content-column-gap: $rhc-space-100; // [code-only]
+$rhc-navigation-list-item-content-row-gap: $rhc-space-50; // [code-only]
+$rhc-navigation-list-item-description-line-height: $rhc-text-line-height-md;
+$rhc-navigation-list-item-icon-start-border-radius: $rhc-border-radius-round;
+$rhc-navigation-list-item-icon-start-padding-block: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-padding-inline: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-size: $rhc-size-icon-md;
+$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
 $rhc-radio-group-padding-block-end: $rhc-space-100;
 $rhc-radio-group-padding-block-start: $rhc-space-100;
 $rhc-radio-group-row-gap: $rhc-space-200;
@@ -1053,16 +1054,17 @@ $rhc-nav-bar-link-font-size: $rhc-text-font-size-md;
 $rhc-nav-bar-heading-font-weight: $rhc-text-font-weight-strong;
 $rhc-nav-bar-color: $rhc-color-primary-500;
 $rhc-nav-bar-border-color: $rhc-color-primary-400;
-$rhc-navigation-list-icon-background-color: $rhc-color-foreground-default;
-$rhc-navigation-list-icon-color: $rhc-color-foreground-on-dark-color;
-$rhc-navigation-list-item-content-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
+$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
+$rhc-navigation-list-item-description-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-description-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-icon-end-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-icon-start-background-color: $rhc-color-foreground-default;
+$rhc-navigation-list-item-icon-start-color: $rhc-color-foreground-on-dark-color;
+$rhc-navigation-list-item-label-color: $rhc-color-foreground-default;
 $rhc-navigation-list-item-label-font-family: $rhc-text-font-family-default;
 $rhc-navigation-list-item-label-font-size: $rhc-text-font-size-xl;
 $rhc-navigation-list-item-label-font-weight: $rhc-text-font-weight-strong;
-$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
-$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
-$rhc-navigation-list-item-color: $rhc-color-foreground-subtle;
-$rhc-navigation-list-item-heading-color: $rhc-color-foreground-default;
 $rhc-sidenav-link-font-size: $rhc-text-font-size-md;
 $rhc-sidenav-link-font-family: $rhc-text-font-family-default;
 $rhc-sidenav-link-font-weight: $rhc-text-font-weight-default;

package/dist/kern-lintblauw/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Mon, 15 Dec 2025 18:39:48 GMT
+ * Generated on Tue, 30 Dec 2025 09:35:40 GMT
  */
 
 .kern-lintblauw {
@@ -496,21 +496,22 @@
   --rhc-nav-bar-link-padding-inline-start: var(--rhc-space-150);
   --rhc-nav-bar-link-column-gap: var(--rhc-space-100);
   --rhc-nav-bar-background-color: var(--rhc-color-wit);
-  --rhc-navigation-list-icon-border-radius: var(--rhc-border-radius-round);
-  --rhc-navigation-list-item-icon-padding-inline: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-padding-block: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-size: var(--rhc-size-icon-md);
-  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100);
-  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50);
-  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
-  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
-  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
-  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-border-color: var(--rhc-color-cool-grey-300);
+  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-column-gap: var(--rhc-space-200);
   --rhc-navigation-list-item-min-height: var(--rhc-size-pointer-target);
   --rhc-navigation-list-item-padding-block: var(--rhc-space-150);
   --rhc-navigation-list-item-padding-inline: var(--rhc-space-200);
+  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
+  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
+  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100); /** [code-only] */
+  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50); /** [code-only] */
+  --rhc-navigation-list-item-description-line-height: var(--rhc-text-line-height-md);
+  --rhc-navigation-list-item-icon-start-border-radius: var(--rhc-border-radius-round);
+  --rhc-navigation-list-item-icon-start-padding-block: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-padding-inline: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-size: var(--rhc-size-icon-md);
+  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
   --rhc-radio-group-padding-block-end: var(--rhc-space-100);
   --rhc-radio-group-padding-block-start: var(--rhc-space-100);
   --rhc-radio-group-row-gap: var(--rhc-space-200);
@@ -1055,16 +1056,17 @@
   --rhc-nav-bar-heading-font-weight: var(--rhc-text-font-weight-strong);
   --rhc-nav-bar-color: var(--rhc-color-primary-500);
   --rhc-nav-bar-border-color: var(--rhc-color-primary-400);
-  --rhc-navigation-list-icon-background-color: var(--rhc-color-foreground-default);
-  --rhc-navigation-list-icon-color: var(--rhc-color-foreground-on-dark-color);
-  --rhc-navigation-list-item-content-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
+  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
+  --rhc-navigation-list-item-description-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-description-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-icon-end-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-icon-start-background-color: var(--rhc-color-foreground-default);
+  --rhc-navigation-list-item-icon-start-color: var(--rhc-color-foreground-on-dark-color);
+  --rhc-navigation-list-item-label-color: var(--rhc-color-foreground-default);
   --rhc-navigation-list-item-label-font-family: var(--rhc-text-font-family-default);
   --rhc-navigation-list-item-label-font-size: var(--rhc-text-font-size-xl);
   --rhc-navigation-list-item-label-font-weight: var(--rhc-text-font-weight-strong);
-  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
-  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
-  --rhc-navigation-list-item-color: var(--rhc-color-foreground-subtle);
-  --rhc-navigation-list-item-heading-color: var(--rhc-color-foreground-default);
   --rhc-sidenav-link-font-size: var(--rhc-text-font-size-md);
   --rhc-sidenav-link-font-family: var(--rhc-text-font-family-default);
   --rhc-sidenav-link-font-weight: var(--rhc-text-font-weight-default);

package/dist/kern-lintblauw/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Mon, 15 Dec 2025 18:39:48 GMT
+ * Generated on Tue, 30 Dec 2025 09:35:40 GMT
  */
 
 export const rhcBorderRadiusRound: string;
@@ -435,31 +435,35 @@ export const rhcNavBarHeadingFontWeight: string;
 export const rhcNavBarBackgroundColor: string;
 export const rhcNavBarColor: string;
 export const rhcNavBarBorderColor: string;
-export const rhcNavigationListIconBackgroundColor: string;
-export const rhcNavigationListIconBorderRadius: string;
-export const rhcNavigationListIconColor: string;
-export const rhcNavigationListItemIconPaddingInline: string;
-export const rhcNavigationListItemIconPaddingBlock: string;
-export const rhcNavigationListItemIconSize: string;
-export const rhcNavigationListItemContentFontSize: string;
-export const rhcNavigationListItemContentColumnGap: string;
-export const rhcNavigationListItemContentRowGap: string;
-export const rhcNavigationListItemLabelFontFamily: string;
-export const rhcNavigationListItemLabelFontSize: string;
-export const rhcNavigationListItemLabelFontWeight: string;
-export const rhcNavigationListItemLabelLineHeight: string;
-export const rhcNavigationListItemActiveBackgroundColor: string;
-export const rhcNavigationListItemHoverBackgroundColor: string;
-export const rhcNavigationListItemFocusBackgroundColor: string;
 export const rhcNavigationListItemBackgroundColor: string;
-export const rhcNavigationListItemColor: string;
-export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemBorderColor: string;
-export const rhcNavigationListItemHeadingColor: string;
+export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemColumnGap: string;
 export const rhcNavigationListItemMinHeight: string;
 export const rhcNavigationListItemPaddingBlock: string;
 export const rhcNavigationListItemPaddingInline: string;
+export const rhcNavigationListItemActiveBackgroundColor: string;
+export const rhcNavigationListItemHoverBackgroundColor: string;
+export const rhcNavigationListItemFocusBackgroundColor: string;
+/** [code-only] */
+export const rhcNavigationListItemContentColumnGap: string;
+/** [code-only] */
+export const rhcNavigationListItemContentRowGap: string;
+export const rhcNavigationListItemDescriptionColor: string;
+export const rhcNavigationListItemDescriptionFontSize: string;
+export const rhcNavigationListItemDescriptionLineHeight: string;
+export const rhcNavigationListItemIconEndColor: string;
+export const rhcNavigationListItemIconStartBackgroundColor: string;
+export const rhcNavigationListItemIconStartBorderRadius: string;
+export const rhcNavigationListItemIconStartColor: string;
+export const rhcNavigationListItemIconStartPaddingBlock: string;
+export const rhcNavigationListItemIconStartPaddingInline: string;
+export const rhcNavigationListItemIconStartSize: string;
+export const rhcNavigationListItemLabelColor: string;
+export const rhcNavigationListItemLabelFontFamily: string;
+export const rhcNavigationListItemLabelFontSize: string;
+export const rhcNavigationListItemLabelFontWeight: string;
+export const rhcNavigationListItemLabelLineHeight: string;
 export const rhcRadioGroupPaddingBlockEnd: string;
 export const rhcRadioGroupPaddingBlockStart: string;
 export const rhcRadioGroupRowGap: string;