@utrecht/design-tokens 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utrecht/design-tokens
 
+## 3.2.0
+
+### Minor Changes
+
+- cbb98e9: Add `utrecht.breadcrumb-nav.item.first.padding-inline-start` token.
+
+  Use this token to align the content of the first link with the other content, by setting it to `0`.
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/_mixin-theme.scss

@@ -378,6 +378,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/_mixin.scss

@@ -378,6 +378,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/_variables.scss

@@ -376,6 +376,7 @@ $utrecht-breadcrumb-nav-divider-inline-size: 1px;
 $utrecht-breadcrumb-nav-link-text-decoration: none;
 $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+$utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 $utrecht-breadcrumb-nav-min-block-size: 34px;
 $utrecht-body-line-height: 1.4;
 $utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/_mixin-theme.scss

@@ -379,6 +379,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/_mixin.scss

@@ -379,6 +379,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/_variables.scss

@@ -377,6 +377,7 @@ $utrecht-breadcrumb-nav-divider-inline-size: 1px;
 $utrecht-breadcrumb-nav-link-text-decoration: none;
 $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+$utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 $utrecht-breadcrumb-nav-min-block-size: 34px;
 $utrecht-body-line-height: 1.4;
 $utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/index.cjs

@@ -97,6 +97,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/dark/index.css

@@ -384,6 +384,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/index.d.ts

@@ -106,6 +106,7 @@ export const utrechtBodyBackgroundColor : string;
 export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
 export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;

package/dist/dark/index.flat.json

@@ -225,6 +225,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/dark/index.json

@@ -5840,6 +5840,45 @@
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/dark/index.mjs

@@ -96,6 +96,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
 export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
 export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";

package/dist/dark/index.tokens.json

@@ -927,6 +927,9 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": "0"
+        },
         "padding-block-start": "8px",
         "padding-block-end": "8px",
         "padding-inline-end": "8px",

package/dist/dark/list.json

@@ -5840,6 +5840,45 @@
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/dark/list.mjs

@@ -5840,6 +5840,45 @@ export default [
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/dark/property.css

@@ -106,6 +106,7 @@
 @property --utrecht-breadcrumb-nav-arrows-link-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-arrows-link-focus-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-font-size { syntax: '<length>'; inherits: true; }
+@property --utrecht-breadcrumb-nav-item-first-padding-inline-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-inline-end { syntax: '<length>'; inherits: true; }

package/dist/dark/root.css

@@ -354,6 +354,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/dark/theme-prince-xml.css

@@ -379,6 +379,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/theme.css

@@ -354,6 +354,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/dark/tokens.cjs

@@ -3814,6 +3814,47 @@ module.exports = {
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false,
+              "studio.tokens": {
+                "originalType": "spacing"
+              }
+            },
+            "type": "dimension",
+            "value": "0",
+            "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<length>",
+                  "inherits": true
+                },
+                "nl.nldesignsystem.figma.supports-token": false,
+                "studio.tokens": {
+                  "originalType": "spacing"
+                }
+              },
+              "type": "dimension",
+              "value": "0"
+            },
+            "name": "padding-inline-start",
+            "attributes": {},
+            "path": [
+              "utrecht",
+              "breadcrumb-nav",
+              "item",
+              "first",
+              "padding-inline-start"
+            ]
+          }
+        },
         "padding-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

package/dist/dark/tokens.d.ts

@@ -559,6 +559,9 @@ declare const tokens: {
         }
       },
       "item": {
+        "first": {
+          "padding-inline-start": DesignToken
+        },
         "padding-block-start": DesignToken,
         "padding-block-end": DesignToken,
         "padding-inline-end": DesignToken,

package/dist/dark/tokens.json

@@ -3810,6 +3810,47 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false,
+              "studio.tokens": {
+                "originalType": "spacing"
+              }
+            },
+            "type": "dimension",
+            "value": "0",
+            "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<length>",
+                  "inherits": true
+                },
+                "nl.nldesignsystem.figma.supports-token": false,
+                "studio.tokens": {
+                  "originalType": "spacing"
+                }
+              },
+              "type": "dimension",
+              "value": "0"
+            },
+            "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+            "attributes": {},
+            "path": [
+              "utrecht",
+              "breadcrumb-nav",
+              "item",
+              "first",
+              "padding-inline-start"
+            ]
+          }
+        },
         "padding-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

package/dist/dark/variables.cjs

@@ -97,6 +97,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/dark/variables.css

@@ -354,6 +354,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/dark/variables.d.ts

@@ -106,6 +106,7 @@ export const utrechtBodyBackgroundColor : string;
 export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
 export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;

package/dist/dark/variables.json

@@ -225,6 +225,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/dark/variables.less

@@ -377,6 +377,7 @@
 @utrecht-breadcrumb-nav-link-text-decoration: none;
 @utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 @utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+@utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 @utrecht-breadcrumb-nav-min-block-size: 34px;
 @utrecht-body-line-height: 1.4;
 @utrecht-blockquote-margin-block-end: 1.6em;

package/dist/dark/variables.mjs

@@ -96,6 +96,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
 export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
 export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";

package/dist/index.cjs

@@ -95,6 +95,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/index.css

@@ -405,6 +405,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;
@@ -1527,6 +1528,7 @@
     --utrecht-breadcrumb-nav-link-text-decoration: none;
     --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
     --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+    --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
     --utrecht-breadcrumb-nav-min-block-size: 34px;
     --utrecht-body-line-height: 1.4;
     --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/index.d.ts

@@ -104,6 +104,7 @@ export const utrechtBodyBackgroundColor : string;
 export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
 export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;

package/dist/index.flat.json

@@ -223,6 +223,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/index.json

@@ -6048,6 +6048,45 @@
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/index.mjs

@@ -94,6 +94,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
 export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
 export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";

package/dist/index.tokens.json

@@ -923,6 +923,9 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": "0"
+        },
         "padding-block-start": "8px",
         "padding-block-end": "8px",
         "padding-inline-end": "8px",

package/dist/list.json

@@ -6048,6 +6048,45 @@
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/list.mjs

@@ -6048,6 +6048,45 @@ export default [
       "font-size"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "spacing"
+      }
+    },
+    "type": "dimension",
+    "value": "0",
+    "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "spacing"
+        }
+      },
+      "type": "dimension",
+      "value": "0"
+    },
+    "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "breadcrumb-nav",
+      "item",
+      "first",
+      "padding-inline-start"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {

package/dist/property.css

@@ -118,6 +118,7 @@
 @property --utrecht-breadcrumb-nav-arrows-link-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-arrows-link-focus-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-font-size { syntax: '<length>'; inherits: true; }
+@property --utrecht-breadcrumb-nav-item-first-padding-inline-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-block-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-breadcrumb-nav-item-padding-inline-end { syntax: '<length>'; inherits: true; }

package/dist/root.css

@@ -353,6 +353,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/theme-prince-xml.css

@@ -378,6 +378,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-body-line-height: 1.4;
   --utrecht-blockquote-margin-block-end: 1.6em;

package/dist/theme.css

@@ -353,6 +353,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/tokens.cjs

@@ -4020,6 +4020,47 @@ module.exports = {
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false,
+              "studio.tokens": {
+                "originalType": "spacing"
+              }
+            },
+            "type": "dimension",
+            "value": "0",
+            "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<length>",
+                  "inherits": true
+                },
+                "nl.nldesignsystem.figma.supports-token": false,
+                "studio.tokens": {
+                  "originalType": "spacing"
+                }
+              },
+              "type": "dimension",
+              "value": "0"
+            },
+            "name": "padding-inline-start",
+            "attributes": {},
+            "path": [
+              "utrecht",
+              "breadcrumb-nav",
+              "item",
+              "first",
+              "padding-inline-start"
+            ]
+          }
+        },
         "padding-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

package/dist/tokens.d.ts

@@ -555,6 +555,9 @@ declare const tokens: {
         }
       },
       "item": {
+        "first": {
+          "padding-inline-start": DesignToken
+        },
         "padding-block-start": DesignToken,
         "padding-block-end": DesignToken,
         "padding-inline-end": DesignToken,

package/dist/tokens.json

@@ -4016,6 +4016,47 @@
         "type": "textCase"
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false,
+              "studio.tokens": {
+                "originalType": "spacing"
+              }
+            },
+            "type": "dimension",
+            "value": "0",
+            "filePath": "src/component/utrecht/breadcrumb-nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<length>",
+                  "inherits": true
+                },
+                "nl.nldesignsystem.figma.supports-token": false,
+                "studio.tokens": {
+                  "originalType": "spacing"
+                }
+              },
+              "type": "dimension",
+              "value": "0"
+            },
+            "name": "utrechtBreadcrumbNavItemFirstPaddingInlineStart",
+            "attributes": {},
+            "path": [
+              "utrecht",
+              "breadcrumb-nav",
+              "item",
+              "first",
+              "padding-inline-start"
+            ]
+          }
+        },
         "padding-block-start": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

package/dist/variables.cjs

@@ -95,6 +95,7 @@ module.exports = {
   "utrechtBodyColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavMinBlockSize": "34px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/variables.css

@@ -353,6 +353,7 @@
   --utrecht-breadcrumb-nav-link-text-decoration: none;
   --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
   --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+  --utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
   --utrecht-breadcrumb-nav-divider-inline-size: 1px;
   --utrecht-border-width-sm: 1px;
   --utrecht-border-width-md: 2px;

package/dist/variables.d.ts

@@ -104,6 +104,7 @@ export const utrechtBodyBackgroundColor : string;
 export const utrechtBodyColor : string;
 export const utrechtBreadcrumbNavMinBlockSize : string;
 export const utrechtBreadcrumbNavFontSize : string;
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockStart : string;
 export const utrechtBreadcrumbNavItemPaddingBlockEnd : string;
 export const utrechtBreadcrumbNavItemPaddingInlineEnd : string;

package/dist/variables.json

@@ -223,6 +223,7 @@
   "utrechtBreadcrumbNavArrowsLinkFocusColor": "hsl(0 0% 0%)",
   "utrechtBreadcrumbNavDividerInlineSize": "1px",
   "utrechtBreadcrumbNavFontSize": "1rem",
+  "utrechtBreadcrumbNavItemFirstPaddingInlineStart": "0",
   "utrechtBreadcrumbNavItemPaddingBlockEnd": "8px",
   "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
   "utrechtBreadcrumbNavItemPaddingInlineEnd": "8px",

package/dist/variables.less

@@ -376,6 +376,7 @@
 @utrecht-breadcrumb-nav-link-text-decoration: none;
 @utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
 @utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
+@utrecht-breadcrumb-nav-item-first-padding-inline-start: 0;
 @utrecht-breadcrumb-nav-min-block-size: 34px;
 @utrecht-body-line-height: 1.4;
 @utrecht-blockquote-margin-block-end: 1.6em;

package/dist/variables.mjs

@@ -94,6 +94,7 @@ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtBodyColor = "hsl(0 0% 0%)";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
 export const utrechtBreadcrumbNavFontSize = "1rem";
+export const utrechtBreadcrumbNavItemFirstPaddingInlineStart = "0";
 export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
 export const utrechtBreadcrumbNavItemPaddingBlockEnd = "8px";
 export const utrechtBreadcrumbNavItemPaddingInlineEnd = "8px";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0",
+  "version": "3.2.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/component/utrecht/breadcrumb-nav.tokens.json

@@ -13,6 +13,11 @@
         }
       },
       "item": {
+        "first": {
+          "padding-inline-start": {
+            "value": "0"
+          }
+        },
         "padding-block-start": {
           "value": "{utrecht.space.block.xs}"
         },