Repository: nl-design-system/utrecht
Pull request #2798: feat(accordion-css): add support for Utrecht Municipality's new accordion style
Author: login: AliKdhim87
Created: 2025-04-11T14:12:32Z | Merged: 2025-05-07T11:24:06Z

- [Figma link](https://www.figma.com/design/UXIHcIurAD8hyoBWx4hDBV/NLDS---Gemeente-Utrecht---Bibliotheek?node-id=1261-4784&p=f&t=pzBK3YUk6XgRaS9x-0)
- [Issue link](https://github.com/frameless/strapi/issues/1122)


Diff:
diff --git a/.changeset/fuzzy-bats-rest.md b/.changeset/fuzzy-bats-rest.md
new file mode 100644
index 00000000000..a650b1f917c
--- /dev/null
+++ b/.changeset/fuzzy-bats-rest.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": major
+---
+
+This release introduces a breaking change by removing the deprecated `appearance='utrecht'` property, which relied on the `utrecht-accordion__button--utrecht` CSS class. Applications using this property will need to update their code to ensure compatibility.
diff --git a/.changeset/giant-mirrors-cover.md b/.changeset/giant-mirrors-cover.md
new file mode 100644
index 00000000000..2412e02a2e8
--- /dev/null
+++ b/.changeset/giant-mirrors-cover.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": minor
+---
+
+Add the new Accordion style design tokens
diff --git a/.changeset/nervous-rats-speak.md b/.changeset/nervous-rats-speak.md
new file mode 100644
index 00000000000..fb07e3c07eb
--- /dev/null
+++ b/.changeset/nervous-rats-speak.md
@@ -0,0 +1,7 @@
+---
+"@utrecht/component-library-react": major
+"@utrecht/design-tokens": major
+"@utrecht/accordion-css": major
+---
+
+Remove deprecated `utrecht-accordion__button--utrecht` class. It has been fully removed in this release.
diff --git a/.changeset/sweet-rings-join.md b/.changeset/sweet-rings-join.md
new file mode 100644
index 00000000000..9b48da7dcfb
--- /dev/null
+++ b/.changeset/sweet-rings-join.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": patch
+---
+
+Add `currentColor` to the accordion icon component
diff --git a/.changeset/witty-trainers-fry.md b/.changeset/witty-trainers-fry.md
new file mode 100644
index 00000000000..61c38789fe5
--- /dev/null
+++ b/.changeset/witty-trainers-fry.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/accordion-css": minor
+---
+
+Support the new accordion component style for the Municipality of Utrecht.
diff --git a/components/accordion/src/_mixin.scss b/components/accordion/src/_mixin.scss
index 9fbc1b2a20f..e0a7da4add4 100644
--- a/components/accordion/src/_mixin.scss
+++ b/components/accordion/src/_mixin.scss
@@ -13,7 +13,21 @@
 }
 
 @mixin utrecht-accordion__section {
+  border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
   break-inside: avoid;
+  &:is(:last-child, :only-child) {
+    border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
+    border-block-end-style: solid;
+    border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
+  }
+  &:not(:last-child) {
+    border-block-end-color: transparent;
+  }
+  &:hover {
+    --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
+  }
 }
 
 @mixin utrecht-accordion__button {
@@ -26,6 +40,8 @@
   --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
   --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
   --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
+  --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
+  --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
   --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
   --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
   --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
@@ -46,36 +62,15 @@
   text-align: start;
 }
 
-@mixin utrecht-accordion__button-icon {
-  display: flex;
-}
-@mixin utrecht-accordion__button-icon--utrecht {
-  background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
-  background-position: center;
-  background-repeat: no-repeat;
-  block-size: var(--utrecht-accordion-button-icon-size);
-  content: "";
-  inline-size: var(--utrecht-accordion-button-icon-size);
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  position: absolute;
-}
-
-@mixin utrecht-accordion__button-icon--utrecht-arrow-down {
-  background-image: var(
-    --utrecht-accordion-icon-utrecht-arrow-down,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E")
-  );
+@mixin utrecht-accordion__button--focus-visible {
+  --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
+  --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
+  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
+  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
 }
 
-@mixin utrecht-accordion__button-icon--utrecht-arrow-up {
-  background-image: var(
-    --utrecht-accordion-icon-utrecht-arrow-up,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E")
-  );
-  background-position: center;
-  background-repeat: no-repeat;
-  content: "";
+@mixin utrecht-accordion__button-icon {
+  display: flex;
 }
 
 @mixin utrecht-accordion__button--rtl {
@@ -94,6 +89,8 @@
 }
 
 @mixin utrecht-accordion__header {
+  align-items: center;
+  display: flex;
   margin-block-end: 0;
   margin-block-start: 0;
 }
diff --git a/components/accordion/src/index.scss b/components/accordion/src/index.scss
index 93f315c3cbe..12549f491d6 100644
--- a/components/accordion/src/index.scss
+++ b/components/accordion/src/index.scss
@@ -16,19 +16,9 @@
 
 .utrecht-accordion__button {
   @include utrecht-accordion__button;
-}
-
-.utrecht-accordion__button--utrecht {
-  &[aria-expanded]::after {
-    @include utrecht-accordion__button-icon--utrecht;
-  }
-
-  &[aria-expanded="false"]::after {
-    @include utrecht-accordion__button-icon--utrecht-arrow-down;
-  }
 
-  &[aria-expanded="true"]::after {
-    @include utrecht-accordion__button-icon--utrecht-arrow-up;
+  &:focus-visible {
+    @include utrecht-accordion__button--focus-visible;
   }
 }
 
diff --git a/components/accordion/src/tokens.json b/components/accordion/src/tokens.json
index a78dda3e2d3..72b89c4d0be 100644
--- a/components/accordion/src/tokens.json
+++ b/components/accordion/src/tokens.json
@@ -228,48 +228,58 @@
             "type": "color"
           }
         },
-        "icon": {
-          "size": {
+        "focus-visible": {
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "border-width": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<length>",
                 "inherits": true
               },
-              "nl.nldesignsystem.figma.supports-token": true
+              "nl.nldesignsystem.figma.supports-token": false
             },
-            "type": "sizing"
+            "type": "borderWidth"
           },
-          "utrecht": {
-            "arrow-down": {
-              "$extensions": {
-                "nl.nldesignsystem.css.property": {
-                  "syntax": "<url>",
-                  "inherits": true
-                },
-                "nl.nldesignsystem.figma.supports-token": false
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
               },
-              "type": "other"
-            },
-            "arrow-up": {
-              "$extensions": {
-                "nl.nldesignsystem.css.property": {
-                  "syntax": "<url>",
-                  "inherits": true
-                },
-                "nl.nldesignsystem.figma.supports-token": false
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
               },
-              "type": "other"
-            },
-            "background-color": {
-              "$extensions": {
-                "nl.nldesignsystem.css.property": {
-                  "syntax": "<color>",
-                  "inherits": true
-                },
-                "nl.nldesignsystem.figma.supports-token": false
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
+        },
+        "icon": {
+          "size": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
               },
-              "type": "color"
-            }
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "sizing"
           }
         }
       },
@@ -355,6 +365,38 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "spacing"
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "border-width": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "borderWidth"
+        },
+        "hover": {
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": false
+            },
+            "type": "color"
+          }
         }
       }
     }
diff --git a/packages/component-library-react/src/Accordion.tsx b/packages/component-library-react/src/Accordion.tsx
index fc57d00f94c..5d52b57c5f8 100644
--- a/packages/component-library-react/src/Accordion.tsx
+++ b/packages/component-library-react/src/Accordion.tsx
@@ -16,7 +16,7 @@ import { HTMLHeading } from './HTMLHeading';
 import { Heading } from './Heading';
 
 const IconChevronDown = () => (
-  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8">
+  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="currentColor">
     <defs>
       <clipPath id="clippath">
         <rect width="14" height="8" style={{ fill: 'none', strokeWidth: '0px' }} />
@@ -69,7 +69,6 @@ export interface AccordionSectionProps extends HTMLAttributes<HTMLDivElement> {
   onButtonBlur?: Function;
   buttonRef?: RefObject<HTMLButtonElement>;
   icon?: ReactNode;
-  appearance?: string;
 }
 
 export const AccordionSection = forwardRef(
@@ -88,7 +87,6 @@ export const AccordionSection = forwardRef(
       onButtonBlur,
       onButtonFocus,
       icon,
-      appearance,
       ...props
     }: AccordionSectionProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -106,10 +104,6 @@ export const AccordionSection = forwardRef(
 
     let iconStart = icon ? icon : icon === null ? null : <IconChevronDown />;
 
-    if (appearance === 'utrecht') {
-      iconStart = null;
-    }
-
     const idPrefix = 'utrecht-accordion';
     const idSuffix = id || useId();
     const buttonId = `${idPrefix}${idSuffix}-button`;
@@ -124,9 +118,7 @@ export const AccordionSection = forwardRef(
       <div className={clsx('utrecht-accordion__section', className)} id={id} ref={ref} {...props}>
         <HTMLHeading level={headingLevel} className={clsx('utrecht-accordion__header')}>
           <Button
-            className={clsx('utrecht-accordion__button', {
-              ['utrecht-accordion__button--utrecht']: appearance === 'utrecht',
-            })}
+            className={clsx('utrecht-accordion__button')}
             appearance="subtle-button"
             aria-expanded={expanded === true}
             aria-controls={panelId}
@@ -244,11 +236,11 @@ export const useAccordionSection = (
 
 export interface AccordionProviderProps
   extends Pick<AccordionProps, 'heading' | 'headingLevel'>,
-    Pick<AccordionSectionProps, 'icon' | 'appearance'> {
+    Pick<AccordionSectionProps, 'icon'> {
   sections: AccordionSectionProps[];
 }
 
-export const AccordionProvider = ({ sections, icon, appearance, heading, headingLevel }: AccordionProviderProps) => {
+export const AccordionProvider = ({ sections, icon, heading, headingLevel }: AccordionProviderProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { refs, buttonRefs, focusNextSection, focusFirstSection, focusLastSection, focusPreviousSection } =
     useAccordion(sections, ref);
@@ -312,7 +304,6 @@ export const AccordionProvider = ({ sections, icon, appearance, heading, heading
             headingLevel={sectionHeadingLevel}
             {...section}
             icon={icon}
-            appearance={appearance}
             ref={refs[index]}
             buttonRef={buttonRefs[index]}
             key={index}
diff --git a/packages/storybook-react/src/stories/Accordion.stories.tsx b/packages/storybook-react/src/stories/Accordion.stories.tsx
index bf1c7d66541..e30ae805ec8 100644
--- a/packages/storybook-react/src/stories/Accordion.stories.tsx
+++ b/packages/storybook-react/src/stories/Accordion.stories.tsx
@@ -22,12 +22,11 @@ interface AccordionStoryProps {
   expanded?: boolean;
   expandedAccordion?: boolean;
   icon?: ReactNode;
-  appearance?: string;
   sections?: AccordionSectionProps[];
 }
 
-const AccordionStory = ({ expanded, label, body, appearance, icon, sections }: AccordionStoryProps) => (
-  <AccordionProvider icon={icon} appearance={appearance} sections={sections || [{ expanded, label, body }]} />
+const AccordionStory = ({ expanded, label, body, icon, sections }: AccordionStoryProps) => (
+  <AccordionProvider icon={icon} sections={sections || [{ expanded, label, body }]} />
 );
 
 const meta = {
@@ -37,7 +36,6 @@ const meta = {
     label: '',
     body: '',
     expandedAccordion: false,
-    appearance: '',
     icon: undefined,
   },
   argTypes: {
@@ -65,11 +63,6 @@ const meta = {
         category: 'API',
       },
     },
-    appearance: {
-      description: 'Appearance',
-      control: { type: 'select' },
-      options: ['', 'utrecht'],
-    },
     icon: {
       name: 'icon',
       description: 'Icon at the start',
@@ -207,44 +200,12 @@ export const Default: Story = {
   args: accordionDefaultDataEn,
 };
 
-export const DefaultUtrecht: Story = {
-  args: {
-    ...accordionDefaultDataEn,
-    icon: undefined,
-    appearance: 'utrecht',
-  },
-};
-
 export const Multiple: Story = {
   args: {
     sections: accordionData,
   },
 };
 
-export const MultipleUtrecht: Story = {
-  args: {
-    appearance: 'utrecht',
-    icon: undefined,
-    sections: accordionData,
-  },
-};
-
-export const RTLUtrecht: Story = {
-  args: {
-    ...accordionDefaultDataAR,
-    appearance: 'utrecht',
-    icon: undefined,
-  },
-  decorators: [
-    (Story) => (
-      <div lang="ar" dir="rtl">
-        {Story()}
-      </div>
-    ),
-  ],
-  name: 'Right-to-left Utrecht',
-};
-
 export const RTL: Story = {
   args: accordionDefaultDataAR,
   decorators: [
@@ -257,16 +218,6 @@ export const RTL: Story = {
   name: 'Right-to-left',
 };
 
-export const tableInlineOverflowUtrecht: Story = {
-  args: {
-    appearance: 'utrecht',
-    label: 'table',
-    icon: undefined,
-    body: <ExampleTable />,
-  },
-  name: 'Table Inline Overflow Utrecht',
-};
-
 export const tableInlineOverflow: Story = {
   args: {
     label: 'table',
diff --git a/proprietary/design-tokens/src/component/utrecht/accordion.tokens.json b/proprietary/design-tokens/src/component/utrecht/accordion.tokens.json
index 3f281d482c5..58df07bae24 100644
--- a/proprietary/design-tokens/src/component/utrecht/accordion.tokens.json
+++ b/proprietary/design-tokens/src/component/utrecht/accordion.tokens.json
@@ -1,36 +1,47 @@
 {
   "utrecht": {
     "accordion": {
-      "row-gap": { "value": "{utrecht.space.block.xs}" },
+      "row-gap": {},
       "section": {
         "margin-block-start": { "value": "{utrecht.space.block.2xs}" },
-        "margin-block-end": {}
+        "margin-block-end": {},
+        "border-color": { "value": "{utrecht.color.grey.90}" },
+        "border-width": { "value": "2px" },
+        "hover": {
+          "border-color": { "value": "{utrecht.color.grey.95}" }
+        }
       },
       "button": {
-        "padding-inline-start": { "value": "{utrecht.space.block.md}" },
-        "padding-inline-end": { "value": "{utrecht.space.block.md}" },
-        "padding-block-start": { "value": "{utrecht.space.block.xs}" },
-        "padding-block-end": { "value": "{utrecht.space.block.xs}" },
-        "background-color": { "value": "{utrecht.color.grey.95}" },
-        "color": { "value": "{utrecht.color.grey.10}" },
-        "border-color": { "value": "{utrecht.color.grey.95}" },
+        "padding-inline-start": { "value": "{utrecht.space.block.xs}" },
+        "padding-inline-end": { "value": "{utrecht.space.block.xs}" },
+        "padding-block-start": { "value": "{utrecht.space.block.md}" },
+        "padding-block-end": { "value": "{utrecht.space.block.md}" },
+        "background-color": {},
+        "color": { "value": "{utrecht.color.blue.40}" },
+        "border-color": { "value": "transparent" },
         "border-width": { "value": "0" },
         "gap": {},
         "hover": {
-          "background-color": { "value": "inherit" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
-          "color": { "value": "{utrecht.color.grey.10}" }
+          "background-color": { "value": "{utrecht.color.grey.95}" },
+          "border-color": { "value": "transparent" },
+          "color": { "value": "{utrecht.color.blue.40}" }
         },
         "active": {
-          "background-color": { "value": "{utrecht.color.grey.80}" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
+          "background-color": { "value": "{utrecht.color.white}" },
+          "border-color": { "value": "transparent" },
           "color": { "value": "{utrecht.color.grey.10}" }
         },
         "focus": {
-          "background-color": { "value": "{utrecht.color.grey.80}" },
-          "border-color": { "value": "{utrecht.color.grey.95}" },
+          "background-color": { "value": "{utrecht.color.white}" },
+          "border-color": { "value": "transparent" },
           "color": { "value": "{utrecht.color.grey.10}" }
         },
+        "focus-visible": {
+          "background-color": { "value": "{utrecht.color.yellow.80}" },
+          "border-color": { "value": "{utrecht.color.grey.90}" },
+          "border-width": { "value": "2px" },
+          "color": { "value": "{utrecht.color.blue.40}" }
+        },
         "icon": {
           "size": { "value": "24px" },
           "utrecht": {
@@ -39,9 +50,9 @@
         }
       },
       "panel": {
-        "border-color": { "value": "{utrecht.color.grey.95}" },
-        "border-width": { "value": "2px" },
-        "padding-inline-start": { "value": "{utrecht.space.block.md}" },
+        "border-color": { "value": "transparent" },
+        "border-width": { "value": "0" },
+        "padding-inline-start": { "value": "{utrecht.space.block.2xl}" },
         "padding-inline-end": { "value": "{utrecht.space.block.md}" },
         "padding-block-start": { "value": "{utrecht.space.block.xs}" },
         "padding-block-end": { "value": "{utrecht.space.block.xs}" }


Reviews:
user: login: Robbert
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-25T10:50:19Z
user: login: Robbert
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-05-06T14:55:34Z
user: login: Robbert
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-07T09:10:30Z

Review comments:
diff_hunk: @@ -13,7 +13,28 @@
 }
 
 @mixin utrecht-accordion__section {
+  --_utrecht-accordion-section-border-style: solid;
+
+  border-block-start-color: var(--utrecht-accordion-section-border-color);
+  border-block-start-style: var(--_utrecht-accordion-section-border-style);
+  border-block-start-width: var(--utrecht-accordion-section-border-width);
path: components/accordion/src/_mixin.scss
user: login: Robbert
body: Kun je niet gewoon 1 keer `border-style: solid; border-width: 0;` doen, en daarna de meer specifieke colors en widths overschrijven?
created_at: 2025-04-25T09:13:50Z
author_association: MEMBER
diff_hunk: @@ -13,7 +13,28 @@
 }
 
 @mixin utrecht-accordion__section {
+  --_utrecht-accordion-section-border-style: solid;
path: components/accordion/src/_mixin.scss
user: login: Robbert
body: Deze is static toch? Als `solid` niet verandert zou ik hier geen variable voor gebruiken.
created_at: 2025-04-25T09:43:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,7 @@
+---
+"@utrecht/component-library-react": major
+"@utrecht/design-tokens": major
+"@utrecht/accordion-css": major
+---
+
+Remove deprecated `utrecht-accordion__button--utrecht` class. It has been fully removed in this release.
path: .changeset/nervous-rats-speak.md
user: login: Robbert
body: Ik zou een losse changeset maken voor React, want die gebruikers weten helemaal niet van een class name. Voor hun is het een breaking change dat er geen `appearance` meer is.
created_at: 2025-04-25T10:12:29Z
author_association: MEMBER
diff_hunk: @@ -13,7 +13,21 @@
 }
 
 @mixin utrecht-accordion__section {
+  border-block-start-color: var(--utrecht-accordion-section-border-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-accordion-section-border-width);
   break-inside: avoid;
+  &:is(:last-child, :only-child) {
+    border-block-end-color: var(--utrecht-accordion-section-border-color);
+    border-block-end-style: solid;
+    border-block-end-width: var(--utrecht-accordion-section-border-width);
+  }
+  &:not(:last-child) {
+    border-block-end-color: transparent;
+  }
+  &:hover {
+    --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color);
path: components/accordion/src/_mixin.scss
user: login: Robbert
body: ```suggestion
  border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
  break-inside: avoid;
  &:is(:last-child, :only-child) {
    border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
    border-block-end-style: solid;
    border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
  }
  &:not(:last-child) {
    border-block-end-color: transparent;
  }
  &:hover {
    --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
```
created_at: 2025-05-06T14:51:00Z
author_association: MEMBER
diff_hunk: @@ -228,48 +228,58 @@
             "type": "color"
           }
         },
-        "icon": {
-          "size": {
+        "focus-visible": {
+          "border-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
path: components/accordion/src/tokens.json
user: login: Robbert
body: @AliKdhim87 Als je nieuwe tokens toevoegt, dan moet in eerste instantie `...figma.support-token": false` gebruikt worden, tot Jeffrey or Rozerin de token in Figma ook heeft toegevoegd.

Zou je de tokens die nieuw zijn op `false` willen zetten?
created_at: 2025-05-06T14:52:56Z
author_association: MEMBER
diff_hunk: @@ -13,7 +13,21 @@
 }
 
 @mixin utrecht-accordion__section {
+  border-block-start-color: var(--utrecht-accordion-section-border-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-accordion-section-border-width);
   break-inside: avoid;
+  &:is(:last-child, :only-child) {
+    border-block-end-color: var(--utrecht-accordion-section-border-color);
+    border-block-end-style: solid;
+    border-block-end-width: var(--utrecht-accordion-section-border-width);
+  }
+  &:not(:last-child) {
+    border-block-end-color: transparent;
+  }
+  &:hover {
+    --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color);
path: components/accordion/src/_mixin.scss
user: login: Robbert
body: Dit is hoe de [NL Design System componenten](https://nldesignsystem.nl/componenten/) pagina eruit ziet met deze PR zonder `0` als default:

<img width="849" alt="Screenshot 2025-05-06 at 16 48 53" src="https://github.com/user-attachments/assets/1081da0b-cbba-48e7-be1a-6886d28ecd23" />

created_at: 2025-05-06T14:54:25Z
author_association: MEMBER

PR comments:
user: login: vercel[bot]
created_at: 2025-04-11T14:12:37Z
body: [vc]: #6h1sCP54o272VOKq/T2RAKB5d/3umjWgGSFptngxTII=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ1dHJlY2h0IiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL25sLWRlc2lnbi1zeXN0ZW0vdXRyZWNodC82QVpiS3ZSZUwyenBCSlJTa0tKTFFFU21iOGJkIiwicHJldmlld1VybCI6InV0cmVjaHQtZ2l0LWZlYXQtbmV3LWFjY29yZGlvbi1zdHlsZS1ubC1kZXNpZ24tc3lzdGVtLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidXRyZWNodC1naXQtZmVhdC1uZXctYWNjb3JkaW9uLXN0eWxlLW5sLWRlc2lnbi1zeXN0ZW0udmVyY2VsLmFwcCJ9LCJyb290RGlyZWN0b3J5IjpudWxsfV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **utrecht** | ✅ Ready ([Inspect](https://vercel.com/nl-design-system/utrecht/6AZbKvReL2zpBJRSkKJLQESmb8bd)) | [Visit Preview](https://utrecht-git-feat-new-accordion-style-nl-design-system.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/utrecht-git-feat-new-accordion-style-nl-design-system.vercel.app?via=pr-comment-feedback-link) | May 7, 2025 8:57am |


author_association: NONE
user: login: codecov[bot]
created_at: 2025-04-11T14:16:30Z
body: ## [Codecov](https://app.codecov.io/gh/nl-design-system/utrecht/pull/2798?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=nl-design-system) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 90.39%. Comparing base [(`d0ce355`)](https://app.codecov.io/gh/nl-design-system/utrecht/commit/d0ce355cd616c5197270a620cf7f698405c71176?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=nl-design-system) to head [(`df190ca`)](https://app.codecov.io/gh/nl-design-system/utrecht/commit/df190caac1db3f9bd5141944c2889f6c1815d710?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=nl-design-system).
> Report is 12 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #2798      +/-   ##
==========================================
+ Coverage   90.34%   90.39%   +0.04%     
==========================================
  Files         192      192              
  Lines        1668     1666       -2     
  Branches      361      345      -16     
==========================================
- Hits         1507     1506       -1     
- Misses        155      156       +1     
+ Partials        6        4       -2     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/nl-design-system/utrecht/pull/2798?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=nl-design-system).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=nl-design-system).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-05-07T08:49:50Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=nl-design-system_utrecht&pullRequest=2798) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=nl-design-system_utrecht&pullRequest=2798&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=nl-design-system_utrecht&pullRequest=2798&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=nl-design-system_utrecht&pullRequest=2798&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_utrecht&pullRequest=2798&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_utrecht&pullRequest=2798&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=nl-design-system_utrecht&pullRequest=2798)


author_association: NONE