From 33c4c0edefdf9c785bb828b0c61f0a120d697b02 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 25 Oct 2024 14:47:44 +0200
Subject: [PATCH 1/4] feat!: Make API for icon in button friendlier (#1700)

Co-authored-by: alimpens <a.limpens@amsterdam.nl>
---
 .../css/src/components/button/button.scss     |  6 +-
 packages/react/src/Button/Button.test.tsx     | 33 +++++------
 packages/react/src/Button/Button.tsx          | 55 ++++++++++++++-----
 .../src/components/ams/button.tokens.json     |  2 +-
 .../src/components/Button/Button.docs.mdx     |  8 +--
 .../src/components/Button/Button.stories.tsx  | 26 ++++++---
 6 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 89d2e4ce04..baf5276da5 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -96,7 +96,7 @@
   }
 }
 
-.ams-button--icon-position-only {
-  padding-block: var(--ams-button-icon-position-only-padding-block);
-  padding-inline: var(--ams-button-icon-position-only-padding-inline);
+.ams-button--icon-only {
+  padding-block: var(--ams-button-icon-only-padding-block);
+  padding-inline: var(--ams-button-icon-only-padding-inline);
 }
diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx
index 60f1f8bdf0..1476bb0799 100644
--- a/packages/react/src/Button/Button.test.tsx
+++ b/packages/react/src/Button/Button.test.tsx
@@ -1,4 +1,4 @@
-import { ShareIcon } from '@amsterdam/design-system-react-icons'
+import { CloseIcon } from '@amsterdam/design-system-react-icons'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { createRef } from 'react'
@@ -114,50 +114,51 @@ describe('Button', () => {
 
   it('renders a button with an icon at the end', () => {
     render(
-      <Button icon={ShareIcon}>
-        <span>Share</span>
+      <Button icon={CloseIcon}>
+        <span>Sluiten</span>
       </Button>,
     )
 
     const button = screen.getByRole('button', {
-      name: 'Share',
+      name: 'Sluiten',
     })
+    const icon = button.querySelector('.ams-icon:last-child')
 
     expect(button).toBeInTheDocument()
-    const icon = button.querySelector('.ams-icon:last-child')
     expect(icon).toBeInTheDocument()
   })
 
-  it('renders a button with an icon at the start', () => {
+  it('renders a button with an icon before the label', () => {
     render(
-      <Button icon={ShareIcon} iconPosition="start">
-        <span>Share</span>
+      <Button icon={CloseIcon} iconBefore>
+        <span>Sluiten</span>
       </Button>,
     )
 
     const button = screen.getByRole('button', {
-      name: 'Share',
+      name: 'Sluiten',
     })
+    const icon = button.querySelector('.ams-icon:first-child')
 
     expect(button).toBeInTheDocument()
-    const icon = button.querySelector('.ams-icon:first-child')
     expect(icon).toBeInTheDocument()
   })
 
   it('renders a button with an icon only', () => {
     render(
-      <Button icon={ShareIcon} iconPosition="only" variant="tertiary">
-        Share
+      <Button icon={CloseIcon} iconOnly variant="tertiary">
+        Sluiten
       </Button>,
     )
 
     const button = screen.getByRole('button', {
-      name: 'Share',
+      name: 'Sluiten',
     })
+    const icon = button.querySelector('.ams-icon')
+    const label = button.querySelector('.ams-visually-hidden')
 
     expect(button).toBeInTheDocument()
-    expect(button).toHaveClass('ams-button--icon-position-only')
-    const label = button.querySelector('.ams-visually-hidden')
-    expect(label).toHaveTextContent('Share')
+    expect(icon).toBeInTheDocument()
+    expect(label).toBeInTheDocument()
   })
 })
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 08a44f2d43..e9f9461062 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -5,20 +5,31 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { Icon } from '../Icon'
 import type { IconProps } from '../Icon'
 
+type IconBeforeProp = {
+  /** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
+  iconBefore?: boolean
+  iconOnly?: never
+}
+
+type IconOnlyProp = {
+  iconBefore?: never
+  /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
+  iconOnly?: boolean
+}
+
 type IconButtonProps = {
-  /** An icon to add to the button. */
+  /** Adds an icon to the button, showing it after the label. */
   icon: IconProps['svg']
-  /** The position of the icon. The default is after the label. */
-  iconPosition?: 'start' | 'only'
-}
+} & (IconBeforeProp | IconOnlyProp)
 
 type TextButtonProps = {
   icon?: never
-  iconPosition?: never
+  iconBefore?: never
+  iconOnly?: never
 }
 
 export type ButtonProps = {
@@ -29,27 +40,41 @@ export type ButtonProps = {
 
 export const Button = forwardRef(
   (
-    { children, className, disabled, icon, iconPosition, type, variant = 'primary', ...restProps }: ButtonProps,
+    { children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
+    const content = (): ReactNode => {
+      switch (true) {
+        case !icon:
+          return children
+        case iconBefore:
+          return [<Icon svg={icon} size="level-5" />, children]
+        case iconOnly:
+          return [
+            <Icon key={1} svg={icon} size="level-5" square={true} />,
+            <span className="ams-visually-hidden" key={2}>
+              {children}
+            </span>,
+          ]
+        default:
+          return [children, <Icon svg={icon} size="level-5" />]
+      }
+    }
+
     return (
       <button
         {...restProps}
-        ref={ref}
-        disabled={disabled}
         className={clsx(
           'ams-button',
           `ams-button--${variant}`,
-          icon && iconPosition === 'only' && `ams-button--icon-position-only`,
+          icon && iconOnly && !iconBefore && `ams-button--icon-only`,
           className,
         )}
+        disabled={disabled}
+        ref={ref}
         type={type || 'button'}
       >
-        {icon && (iconPosition === 'start' || iconPosition === 'only') && (
-          <Icon svg={icon} size="level-5" square={iconPosition === 'only'} />
-        )}
-        {icon && iconPosition === 'only' ? <span className="ams-visually-hidden">{children}</span> : children}
-        {icon && !iconPosition && <Icon svg={icon} size="level-5" />}
+        {content()}
       </button>
     )
   },
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index 58cd0e7929..fc23bdf712 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -57,7 +57,7 @@
           "color": { "value": "{ams.color.neutral-grey2}" }
         }
       },
-      "icon-position-only": {
+      "icon-only": {
         "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "{ams.space.sm}" }
       }
diff --git a/storybook/src/components/Button/Button.docs.mdx b/storybook/src/components/Button/Button.docs.mdx
index 633c6b8ed9..164e138739 100644
--- a/storybook/src/components/Button/Button.docs.mdx
+++ b/storybook/src/components/Button/Button.docs.mdx
@@ -34,20 +34,20 @@ They are also a good choice for buttons with an icon only.
 
 <Canvas of={ButtonStories.Tertiary} />
 
-### With an icon
+### With icon
 
 Add an icon if it makes it easier or faster to understand its purpose.
 The icon will appear after the label.
 
 <Canvas of={ButtonStories.WithIcon} />
 
-### With an icon at the start
+### With icon before
 
 The icon can also appear before the label.
 
-<Canvas of={ButtonStories.WithIconAtStart} />
+<Canvas of={ButtonStories.WithIconBefore} />
 
-### With an icon only
+### With icon only
 
 A button can even consist of an icon only.
 Do this only for icons that are universally recognized.
diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx
index 6f9310b2ea..34b74d1c51 100644
--- a/storybook/src/components/Button/Button.stories.tsx
+++ b/storybook/src/components/Button/Button.stories.tsx
@@ -13,6 +13,9 @@ const meta = {
   args: {
     children: 'Versturen',
     disabled: false,
+    icon: undefined,
+    iconBefore: false,
+    iconOnly: false,
     variant: 'primary',
   },
   argTypes: {
@@ -27,12 +30,21 @@ const meta = {
       options: [undefined, ...Object.keys(Icons)],
       mapping: Icons,
     },
-    iconPosition: {
+    iconBefore: {
       control: {
-        type: 'inline-radio',
-        labels: { undefined: 'end', start: 'start', only: 'only' },
+        type: 'boolean',
+      },
+      if: {
+        arg: 'icon',
+      },
+    },
+    iconOnly: {
+      control: {
+        type: 'boolean',
+      },
+      if: {
+        arg: 'icon',
       },
-      options: [undefined, 'start', 'only'],
     },
   },
 } satisfies Meta<typeof Button>
@@ -64,11 +76,11 @@ export const WithIcon: Story = {
   },
 }
 
-export const WithIconAtStart: Story = {
+export const WithIconBefore: Story = {
   args: {
     children: 'Sluiten',
     icon: Icons.CloseIcon,
-    iconPosition: 'start',
+    iconBefore: true,
   },
 }
 
@@ -76,7 +88,7 @@ export const WithIconOnly: Story = {
   args: {
     children: 'Sluiten',
     icon: Icons.CloseIcon,
-    iconPosition: 'only',
+    iconOnly: true,
     variant: 'tertiary',
   },
 }

From 88dee33583eb7085b8d6fceef52d392b441dae50 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:45:03 +0200
Subject: [PATCH 2/4] chore: release main (#1701)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: alimpens <a.limpens@amsterdam.nl>
Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 .release-please-manifest.json        | 10 +++---
 packages/css/CHANGELOG.md            | 48 ++++++++++++++++++----------
 packages/css/package.json            |  2 +-
 packages/react/CHANGELOG.md          | 48 +++++++++++++++++++---------
 packages/react/package.json          |  2 +-
 proprietary/assets/CHANGELOG.md      |  9 ++++--
 proprietary/assets/package.json      |  2 +-
 proprietary/react-icons/CHANGELOG.md |  6 ++++
 proprietary/react-icons/package.json |  2 +-
 proprietary/tokens/CHANGELOG.md      | 43 +++++++++++++++++--------
 proprietary/tokens/package.json      |  2 +-
 11 files changed, 115 insertions(+), 59 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 07f500a7bf..d36e24f7e4 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,7 +1,7 @@
 {
-  "packages/css": "0.11.1",
-  "packages/react": "0.11.1",
-  "proprietary/assets": "0.2.1",
-  "proprietary/react-icons": "0.1.12",
-  "proprietary/tokens": "0.11.0"
+  "packages/css": "0.12.0",
+  "packages/react": "0.12.0",
+  "proprietary/assets": "0.2.2",
+  "proprietary/react-icons": "0.1.13",
+  "proprietary/tokens": "0.12.0"
 }
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index 1e79d6ab7d..d326737a74 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -3,8 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.11.0...design-system-css-v0.11.1) (2024-08-29)
+## [0.12.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.11.1...design-system-css-v0.12.0) (2024-10-25)
+
+### ⚠ BREAKING CHANGES
+
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448))
+
+### Features
 
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592)) ([d0ea054](https://github.com/Amsterdam/design-system/commit/d0ea054b98a7f2ee41bd9a8434b76a85e9b8c9f2))
+* Add border to Avatar in forced colors mode ([#1578](https://github.com/Amsterdam/design-system/issues/1578)) ([1f29f35](https://github.com/Amsterdam/design-system/commit/1f29f358ab7b831c502e8fa2cbd284d1853ff6af))
+* Add Breakout component that lets a figure stick out of a Spotlight ([#1397](https://github.com/Amsterdam/design-system/issues/1397)) ([715f4d6](https://github.com/Amsterdam/design-system/commit/715f4d6241353b9b9f1f68dad7b7773b9c618492))
+* Add Hint as component and Label and FieldSet props ([#1499](https://github.com/Amsterdam/design-system/issues/1499)) ([3d86882](https://github.com/Amsterdam/design-system/commit/3d86882f22e4629a17a98cbbf96f03ad56620be9))
+* Add initial Password Input component ([#1449](https://github.com/Amsterdam/design-system/issues/1449)) ([3cc863](https://github.com/Amsterdam/design-system/commit/3cc863ec8f1f2b50f79a426fd41676ab05838768))
+* Add utility functions as methods to Dialog ([#1576](https://github.com/Amsterdam/design-system/issues/1576)) ([f25bc01](https://github.com/Amsterdam/design-system/commit/f25bc016f1cea8c81e4b341af515fcad2f00a416))
+* Allow Button to display an icon without a label ([#1654](https://github.com/Amsterdam/design-system/issues/1654), [#1700](https://github.com/Amsterdam/design-system/issues/1700)) ([2d347b6](https://github.com/Amsterdam/design-system/commit/2d347b654b701cd6cce9182d5b6837960f41b551), [33c4c0e](https://github.com/Amsterdam/design-system/commit/33c4c0edefdf9c785bb828b0c61f0a120d697b02))
+* Image slider ([#1595](https://github.com/Amsterdam/design-system/issues/1595)) ([58e7766](https://github.com/Amsterdam/design-system/commit/58e77661ad99acb5d3f6e10cbfca981345dc8704))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693)) ([cc8f40e](https://github.com/Amsterdam/design-system/commit/cc8f40e631669a2f3423b7f55b8b129c025efcf9))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448)) ([f5176b1](https://github.com/Amsterdam/design-system/commit/f5176b1e2c85c166fa2b6cb67d11ce0b1f9727a3))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582)) ([4fb6e53](https://github.com/Amsterdam/design-system/commit/4fb6e53441f3bae914eb483da2f0537a65273fd2))
+* Remove margin Safari sets on buttons ([#1529](https://github.com/Amsterdam/design-system/issues/1529)) ([2ccc1b](https://github.com/Amsterdam/design-system/commit/2ccc1bc4eba83a49c37213582fae5d9e7ee6fc98))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591)) ([450b0c3](https://github.com/Amsterdam/design-system/commit/450b0c3e9adf5bdd9fb868400e17aaaea4b2c545))
+* Show selected and disabled Tabs in forced colors mode ([#1517](https://github.com/Amsterdam/design-system/issues/1517)) ([339bd1](https://github.com/Amsterdam/design-system/commit/339bd1eff89e095a96be048ea6f6311bbf3e7980))
+* Show Switch in forced colors mode ([#1528](https://github.com/Amsterdam/design-system/issues/1528)) ([302ae7](https://github.com/Amsterdam/design-system/commit/302ae75ecc5de23cbb0f371d169daa9ed0a1a61c))
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697)) ([5a98c07](https://github.com/Amsterdam/design-system/commit/5a98c07cad19eea38a2ff299378dc4dc5b80018c))
+* Update spacing in Ordered and Unordered List ([#1632](https://github.com/Amsterdam/design-system/issues/1632)) ([986e023](https://github.com/Amsterdam/design-system/commit/986e023b83007560911724e819f54fb18c97f1dc))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.11.0...design-system-css-v0.11.1) (2024-08-29)
 
 ### Bug Fixes
 
@@ -12,7 +42,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.10.0...design-system-css-v0.11.0) (2024-07-25)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Apply default gap in Row and Column without extra class ([#1422](https://github.com/Amsterdam/design-system/issues/1422))
@@ -36,7 +65,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Rename Form Field Character Counter to Character Count ([#1363](https://github.com/Amsterdam/design-system/issues/1363)) ([a5299db](https://github.com/Amsterdam/design-system/commit/a5299dbfb3659bada5565893be63f615b511c0ee))
 * Use flexbox and regular space in Column as we do in Row ([#1388](https://github.com/Amsterdam/design-system/issues/1388)) ([86d693c](https://github.com/Amsterdam/design-system/commit/86d693cf75be205cd096abe339cdd3f97e9b1a2f))
 
-
 ### Bug Fixes
 
 * Change CSS classes for Heading level for consistency with token names ([#1355](https://github.com/Amsterdam/design-system/issues/1355)) ([7c34bbe](https://github.com/Amsterdam/design-system/commit/7c34bbea69b377b8e5efffd169374d383cddc54b))
@@ -44,7 +72,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.10.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.9.0...design-system-css-v0.10.0) (2024-06-28)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
@@ -59,7 +86,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Change values for tall, wide, and extra wide aspect ratios ([#1254](https://github.com/Amsterdam/design-system/issues/1254)) ([478508a](https://github.com/Amsterdam/design-system/commit/478508a758f311b89dfb8214813b25e50d875ff0))
 * Rename title props for Alert, Header and Dialog and require it for Dialog ([#1251](https://github.com/Amsterdam/design-system/issues/1251)) ([bbec4de](https://github.com/Amsterdam/design-system/commit/bbec4de523bebb4d8187e713d4d79af228953674))
 
-
 ### Bug Fixes
 
 * Fix FieldSet float issue ([#1268](https://github.com/Amsterdam/design-system/issues/1268)) ([5593916](https://github.com/Amsterdam/design-system/commit/5593916904db612f4dfa1c5d02c88add35d0103a))
@@ -67,7 +93,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.8.0...design-system-css-v0.9.0) (2024-06-05)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245))
@@ -93,7 +118,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391))
 * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9))
 
-
 ### Bug Fixes
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8))
@@ -103,7 +127,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.7.1...design-system-css-v0.8.0) (2024-04-22)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201))
@@ -124,27 +147,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Set explicit white background on text fields ([#1200](https://github.com/Amsterdam/design-system/issues/1200)) ([e22d48e](https://github.com/Amsterdam/design-system/commit/e22d48eae8994eb370e3edef38a0ca1e015925bf))
 * Time input component ([#1202](https://github.com/Amsterdam/design-system/issues/1202)) ([ccec68e](https://github.com/Amsterdam/design-system/commit/ccec68efafa02d5f9ac9bd4abea6c5e7cb72d556))
 
-
 ### Bug Fixes
 
 * Fix SearchField styling on Safari on iOS ([#1203](https://github.com/Amsterdam/design-system/issues/1203)) ([eb05fff](https://github.com/Amsterdam/design-system/commit/eb05fff8295af3c59ef584700e3c1bc06da0c924))
 
 ## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.7.0...design-system-css-v0.7.1) (2024-03-22)
 
-
 ### Features
 
 * Add Avatar component ([#1134](https://github.com/Amsterdam/design-system/issues/1134)) ([8dec2cf](https://github.com/Amsterdam/design-system/commit/8dec2cff8f7885ccb163774c0dc979fb2c781256))
 * Add Form Field Character Counter ([#1114](https://github.com/Amsterdam/design-system/issues/1114)) ([779ae8c](https://github.com/Amsterdam/design-system/commit/779ae8c9764b23508ffbfb38c6dc2f7a7c1cbd28))
 
-
 ### Bug Fixes
 
 * Use semantic Heading for the title of a Dialog ([#1123](https://github.com/Amsterdam/design-system/issues/1123)) ([0493fd8](https://github.com/Amsterdam/design-system/commit/0493fd87587d36a83bb7aa9cbb69b8debf5d66f0))
 
 ## [0.7.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.6.1...design-system-css-v0.7.0) (2024-03-12)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
@@ -155,14 +174,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.6.0...design-system-css-v0.6.1) (2024-03-11)
 
-
 ### Bug Fixes
 
 * Button fixes ([#1122](https://github.com/Amsterdam/design-system/issues/1122)) ([b5a9504](https://github.com/Amsterdam/design-system/commit/b5a950491f46710d92526ce6012f7d76992a569f))
 
 ## [0.6.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.5.0...design-system-css-v0.6.0) (2024-03-08)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108))
@@ -187,14 +204,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108)) ([f87e834](https://github.com/Amsterdam/design-system/commit/f87e8345ec900ab08941d5d7ab40f8abd16a569a))
 * Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089)) ([b55f0a3](https://github.com/Amsterdam/design-system/commit/b55f0a3b64dcfb660a878ade75033a1dd835ac2d))
 
-
 ### Bug Fixes
 
 * Remove whitespace at the right end of dialog content ([#1091](https://github.com/Amsterdam/design-system/issues/1091)) ([23e1253](https://github.com/Amsterdam/design-system/commit/23e1253e38bba8ac85ebbd696af37742d1c1a02d))
 
 ## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.4.0...design-system-css-v0.5.0) (2024-02-09)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
@@ -208,7 +223,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
 * Remove deprecated `inList` variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
 
-
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.3.0...@amsterdam/design-system-css@0.4.0) (2024-01-31)
 
 ### ⚠ BREAKING CHANGES
diff --git a/packages/css/package.json b/packages/css/package.json
index f67613f27a..39e7c4bdab 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.1",
+  "version": "0.12.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.",
   "homepage": "https://designsystem.amsterdam/",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 09dc4aea95..eb43efe7d7 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,8 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.11.0...design-system-react-v0.11.1) (2024-08-29)
+## [0.12.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.11.1...design-system-react-v0.12.0) (2024-10-25)
+
+### ⚠ BREAKING CHANGES
 
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448))
+* Add and rename Pagination props, remove use of aria-label
+ ([#1366](https://github.com/Amsterdam/design-system/issues/1366))
+
+### Features
+
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592)) ([d0ea054](https://github.com/Amsterdam/design-system/commit/d0ea054b98a7f2ee41bd9a8434b76a85e9b8c9f2))
+* Add and rename Pagination props, remove use of aria-label
+ ([#1366](https://github.com/Amsterdam/design-system/issues/1366)) ([ce0937](https://github.com/Amsterdam/design-system/commit/ce09376a745a7414bcf6f22c44a2f480f29cb945))
+* Add Breakout component that lets a figure stick out of a Spotlight ([#1397](https://github.com/Amsterdam/design-system/issues/1397)) ([715f4d6](<https://github.com/>
+Amsterdam/design-system/commit/715f4d6241353b9b9f1f68dad7b7773b9c618492))
+* Add Hint as component and Label and FieldSet props ([#1499](https://github.com/Amsterdam/design-system/issues/1499)) ([3d86882](https://github.com/Amsterdam/design-system/commit/3d86882f22e4629a17a98cbbf96f03ad56620be9))
+* Add initial Password Input component ([#1449](https://github.com/Amsterdam/design-system/issues/1449)) ([3cc863](https://github.com/Amsterdam/design-system/commit/3cc863ec8f1f2b50f79a426fd41676ab05838768))
+* Add utility functions as methods to Dialog ([#1576](https://github.com/Amsterdam/design-system/issues/1576)) ([f25bc01](https://github.com/Amsterdam/design-system/commit/f25bc016f1cea8c81e4b341af515fcad2f00a416))
+* Allow Button to display an icon without a label ([#1654](https://github.com/Amsterdam/design-system/issues/1654), [#1700](https://github.com/Amsterdam/design-system/issues/1700)) ([2d347b6](https://github.com/Amsterdam/design-system/commit/2d347b654b701cd6cce9182d5b6837960f41b551), [33c4c0e](https://github.com/Amsterdam/design-system/commit/33c4c0edefdf9c785bb828b0c61f0a120d697b02))
+* Image slider ([#1595](https://github.com/Amsterdam/design-system/issues/1595)) ([58e7766](https://github.com/Amsterdam/design-system/commit/58e77661ad99acb5d3f6e10cbfca981345dc8704))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693)) ([cc8f40e](https://github.com/Amsterdam/design-system/commit/cc8f40e631669a2f3423b7f55b8b129c025efcf9))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448)) ([f5176b1](https://github.com/Amsterdam/design-system/commit/f5176b1e2c85c166fa2b6cb67d11ce0b1f9727a3))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582)) ([4fb6e53](https://github.com/Amsterdam/design-system/commit/4fb6e53441f3bae914eb483da2f0537a65273fd2))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591)) ([450b0c3](https://github.com/Amsterdam/design-system/commit/450b0c3e9adf5bdd9fb868400e17aaaea4b2c545))
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697)) ([5a98c07](https://github.com/Amsterdam/design-system/commit/5a98c07cad19eea38a2ff299378dc4dc5b80018c))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+### Bug Fixes
+
+* Disallow invalid number of columns for narrow and medium Grids ([#1628](https://github.com/Amsterdam/design-system/issues/1628)) ([7dc0ee8](https://github.com/Amsterdam/design-system/commit/7dc0ee89f27d77cb3147732b29a083f443bbbd03))
+* Remove lodash ([#1667](https://github.com/Amsterdam/design-system/issues/1667)) ([9db04cf](https://github.com/Amsterdam/design-system/commit/9db04cfe91d7cbabe796299254888c88fbcb0b56))
+
+## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.11.0...design-system-react-v0.11.1) (2024-08-29)
 
 ### Bug Fixes
 
@@ -12,7 +44,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.10.0...design-system-react-v0.11.0) (2024-07-25)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Remove Visually Hidden component ([#1391](https://github.com/Amsterdam/design-system/issues/1391))
@@ -32,7 +63,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Remove Visually Hidden component ([#1391](https://github.com/Amsterdam/design-system/issues/1391)) ([83a60ca](https://github.com/Amsterdam/design-system/commit/83a60ca5310704b3348440dd9f1ee8bc1f22811f))
 * Rename Form Field Character Counter to Character Count ([#1363](https://github.com/Amsterdam/design-system/issues/1363)) ([a5299db](https://github.com/Amsterdam/design-system/commit/a5299dbfb3659bada5565893be63f615b511c0ee))
 
-
 ### Bug Fixes
 
 * Change CSS classes for Heading level for consistency with token names ([#1355](https://github.com/Amsterdam/design-system/issues/1355)) ([7c34bbe](https://github.com/Amsterdam/design-system/commit/7c34bbea69b377b8e5efffd169374d383cddc54b))
@@ -40,7 +70,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.10.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.9.0...design-system-react-v0.10.0) (2024-06-28)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
@@ -57,7 +86,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Allow various types of text input ([#1259](https://github.com/Amsterdam/design-system/issues/1259)) ([dc1e5d5](https://github.com/Amsterdam/design-system/commit/dc1e5d5d0e1f7a1f9baa29581de11a3400d4d9da))
 * Rename title props for Alert, Header and Dialog and require it for Dialog ([#1251](https://github.com/Amsterdam/design-system/issues/1251)) ([bbec4de](https://github.com/Amsterdam/design-system/commit/bbec4de523bebb4d8187e713d4d79af228953674))
 
-
 ### Bug Fixes
 
 * Remove `password` from Text Input types ([#1300](https://github.com/Amsterdam/design-system/issues/1300)) ([c5b75e0](https://github.com/Amsterdam/design-system/commit/c5b75e04fded8b9b4caf2d3403c49daa2bc4e08d))
@@ -65,7 +93,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.8.0...design-system-react-v0.9.0) (2024-06-05)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Change Accordion `section` boolean prop to `sectionAs` enum ([#1244](https://github.com/Amsterdam/design-system/issues/1244))
@@ -93,7 +120,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.7.1...design-system-react-v0.8.0) (2024-04-22)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201))
@@ -109,7 +135,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Select component ([#1151](https://github.com/Amsterdam/design-system/issues/1151)) ([7679acc](https://github.com/Amsterdam/design-system/commit/7679acc7542c2e3d1279b9eaa364031092d16016))
 * Time input component ([#1202](https://github.com/Amsterdam/design-system/issues/1202)) ([ccec68e](https://github.com/Amsterdam/design-system/commit/ccec68efafa02d5f9ac9bd4abea6c5e7cb72d556))
 
-
 ### Bug Fixes
 
 * Fix autodocs for stories ([#1149](https://github.com/Amsterdam/design-system/issues/1149)) ([48c9610](https://github.com/Amsterdam/design-system/commit/48c961023932d673ff815d6e123e61670ed9d1d0))
@@ -119,13 +144,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.7.0...design-system-react-v0.7.1) (2024-03-22)
 
-
 ### Features
 
 * Add Avatar component ([#1134](https://github.com/Amsterdam/design-system/issues/1134)) ([8dec2cf](https://github.com/Amsterdam/design-system/commit/8dec2cff8f7885ccb163774c0dc979fb2c781256))
 * Add Form Field Character Counter ([#1114](https://github.com/Amsterdam/design-system/issues/1114)) ([779ae8c](https://github.com/Amsterdam/design-system/commit/779ae8c9764b23508ffbfb38c6dc2f7a7c1cbd28))
 
-
 ### Bug Fixes
 
 * Improve subcomponent types ([#1130](https://github.com/Amsterdam/design-system/issues/1130)) ([827ac4e](https://github.com/Amsterdam/design-system/commit/827ac4e1197730fb0c69de197347cd4be3a77ebf))
@@ -133,7 +156,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.7.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.6.1...design-system-react-v0.7.0) (2024-03-12)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
@@ -144,14 +166,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.6.0...design-system-react-v0.6.1) (2024-03-11)
 
-
 ### Bug Fixes
 
 * Button fixes ([#1122](https://github.com/Amsterdam/design-system/issues/1122)) ([b5a9504](https://github.com/Amsterdam/design-system/commit/b5a950491f46710d92526ce6012f7d76992a569f))
 
 ## [0.6.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.5.0...design-system-react-v0.6.0) (2024-03-08)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108))
@@ -172,7 +192,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108)) ([f87e834](https://github.com/Amsterdam/design-system/commit/f87e8345ec900ab08941d5d7ab40f8abd16a569a))
 * Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089)) ([b55f0a3](https://github.com/Amsterdam/design-system/commit/b55f0a3b64dcfb660a878ade75033a1dd835ac2d))
 
-
 ### Bug Fixes
 
 * Refactor Mega menu, use correct list category class ([#1079](https://github.com/Amsterdam/design-system/issues/1079)) ([00c198d](https://github.com/Amsterdam/design-system/commit/00c198de13ea3d69e4b24db6a8868ae5f7560503))
@@ -182,7 +201,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.4.0...design-system-react-v0.5.0) (2024-02-09)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
diff --git a/packages/react/package.json b/packages/react/package.json
index c698e3c169..616fb93253 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.1",
+  "version": "0.12.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All React components from the Amsterdam Design System. Use it to compose pages in your website or application.",
   "homepage": "https://designsystem.amsterdam/",
diff --git a/proprietary/assets/CHANGELOG.md b/proprietary/assets/CHANGELOG.md
index 02e05646f6..5f77738342 100644
--- a/proprietary/assets/CHANGELOG.md
+++ b/proprietary/assets/CHANGELOG.md
@@ -3,8 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.2.1](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.0...design-system-assets-v0.2.1) (2024-06-05)
+## [0.2.2](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.1...design-system-assets-v0.2.2) (2024-10-25)
+
+### Features
 
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+## [0.2.1](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.0...design-system-assets-v0.2.1) (2024-06-05)
 
 ### Features
 
@@ -12,7 +17,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.2.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.8...design-system-assets-v0.2.0) (2024-03-12)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
@@ -23,7 +27,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.1.8](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.7...design-system-assets-v0.1.8) (2024-03-08)
 
-
 ### Features
 
 * Logo Museum Weesp  ([#1088](https://github.com/Amsterdam/design-system/issues/1088)) ([da1b780](https://github.com/Amsterdam/design-system/commit/da1b7808b5bcf17acb93fe46531a9722814e9256))
diff --git a/proprietary/assets/package.json b/proprietary/assets/package.json
index aa0c3c2cc7..da68d82954 100644
--- a/proprietary/assets/package.json
+++ b/proprietary/assets/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All assets from the Amsterdam Design System. Use it to include the correct fonts, icons or logos in your website or application.",
   "homepage": "https://designsystem.amsterdam/",
diff --git a/proprietary/react-icons/CHANGELOG.md b/proprietary/react-icons/CHANGELOG.md
index 7d2145a326..c9d003d934 100644
--- a/proprietary/react-icons/CHANGELOG.md
+++ b/proprietary/react-icons/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.13](https://github.com/Amsterdam/design-system/compare/design-system-react-icons-v0.1.12...design-system-react-icons-v0.1.13) (2024-10-25)
+
+### Features
+
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
 ## [0.1.12](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react-icons@0.1.11...@amsterdam/design-system-react-icons@0.1.12) (2024-01-31)
 
 **Note:** Version bump only for package @amsterdam/design-system-react-icons
diff --git a/proprietary/react-icons/package.json b/proprietary/react-icons/package.json
index 60790de521..a1adcd3e17 100644
--- a/proprietary/react-icons/package.json
+++ b/proprietary/react-icons/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.12",
+  "version": "0.1.13",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All icons from the Amsterdam Design System as React components. Use it to use the correct icons in your React project.",
   "homepage": "https://designsystem.amsterdam/",
diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md
index 3d674b7587..fccca46d0a 100644
--- a/proprietary/tokens/CHANGELOG.md
+++ b/proprietary/tokens/CHANGELOG.md
@@ -3,8 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.10.0...design-system-tokens-v0.11.0) (2024-07-25)
+## [0.12.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.11.0...design-system-tokens-v0.12.0) (2024-10-25)
+
+### ⚠ BREAKING CHANGES
+
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693))
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448))
+
+### Features
 
+* Add Action Group component, e.g. to wrap Dialog buttons in ([#1592](https://github.com/Amsterdam/design-system/issues/1592)) ([d0ea054](https://github.com/Amsterdam/design-system/commit/d0ea054b98a7f2ee41bd9a8434b76a85e9b8c9f2))
+* Add border to Avatar in forced colors mode ([#1578](https://github.com/Amsterdam/design-system/issues/1578)) ([1f29f35](https://github.com/Amsterdam/design-system/commit/1f29f358ab7b831c502e8fa2cbd284d1853ff6af))
+* Add Breakout component that lets a figure stick out of a Spotlight ([#1397](https://github.com/Amsterdam/design-system/issues/1397)) ([715f4d6](https://github.com/Amsterdam/design-system/commit/715f4d6241353b9b9f1f68dad7b7773b9c618492))
+* Add Hint as component and Label and FieldSet props ([#1499](https://github.com/Amsterdam/design-system/issues/1499)) ([3d86882](https://github.com/Amsterdam/design-system/commit/3d86882f22e4629a17a98cbbf96f03ad56620be9))
+* Add initial Password Input component ([#1449](https://github.com/Amsterdam/design-system/issues/1449)) ([3cc863e](https://github.com/Amsterdam/design-system/commit/3cc863ec8f1f2b50f79a426fd41676ab05838768))
+* Allow Button to display an icon without a label ([#1654](https://github.com/Amsterdam/design-system/issues/1654), [#1700](https://github.com/Amsterdam/design-system/issues/1700)) ([2d347b6](https://github.com/Amsterdam/design-system/commit/2d347b654b701cd6cce9182d5b6837960f41b551), [33c4c0e](https://github.com/Amsterdam/design-system/commit/33c4c0edefdf9c785bb828b0c61f0a120d697b02))
+* Image slider ([#1595](https://github.com/Amsterdam/design-system/issues/1595)) ([58e7766](https://github.com/Amsterdam/design-system/commit/58e77661ad99acb5d3f6e10cbfca981345dc8704))
+* Make terms bold instead of descriptions in Description List ([#1693](https://github.com/Amsterdam/design-system/issues/1693)) ([cc8f40e](https://github.com/Amsterdam/design-system/commit/cc8f40e631669a2f3423b7f55b8b129c025efcf9))
+* Remove form from Dialog ([#1582](https://github.com/Amsterdam/design-system/issues/1582)) ([4fb6e53](https://github.com/Amsterdam/design-system/commit/4fb6e53441f3bae914eb483da2f0537a65273fd2))
+* Remove unnecessary Dialog wrapper ([#1591](https://github.com/Amsterdam/design-system/issues/1591)) ([450b0c3](https://github.com/Amsterdam/design-system/commit/450b0c3e9adf5bdd9fb868400e17aaaea4b2c545))
+* Replace ‘on background’ props with ‘inverseColor’ and ‘contrastColor’ for Link, Link List Link, and Icon Button ([#1448](https://github.com/Amsterdam/design-system/issues/1448)) ([f5176b1](https://github.com/Amsterdam/design-system/commit/f5176b1e2c85c166fa2b6cb67d11ce0b1f9727a3))
+* Support various column widths for Description List ([#1697](https://github.com/Amsterdam/design-system/issues/1697)) ([5a98c07](https://github.com/Amsterdam/design-system/commit/5a98c07cad19eea38a2ff299378dc4dc5b80018c))
+* Update spacing in Ordered and Unordered List ([#1632](https://github.com/Amsterdam/design-system/issues/1632)) ([986e023](https://github.com/Amsterdam/design-system/commit/986e023b83007560911724e819f54fb18c97f1dc))
+* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a))
+
+## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.10.0...design-system-tokens-v0.11.0) (2024-07-25)
 
 ### ⚠ BREAKING CHANGES
 
@@ -26,7 +54,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.10.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.9.0...design-system-tokens-v0.10.0) (2024-06-28)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
@@ -39,7 +66,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245))
@@ -63,7 +89,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391))
 * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9))
 
-
 ### Bug Fixes
 
 * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8))
@@ -71,7 +96,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.1...design-system-tokens-v0.8.0) (2024-04-22)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201))
@@ -91,27 +115,23 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Time input component ([#1202](https://github.com/Amsterdam/design-system/issues/1202)) ([ccec68e](https://github.com/Amsterdam/design-system/commit/ccec68efafa02d5f9ac9bd4abea6c5e7cb72d556))
 * Use fluid gaps in Page Menu ([#1146](https://github.com/Amsterdam/design-system/issues/1146)) ([848223b](https://github.com/Amsterdam/design-system/commit/848223bed7c0ad95de9ce1911c7313104a938f5b))
 
-
 ### Bug Fixes
 
 * Use correct text size in Text Input, Search Field, and Text Area ([#1150](https://github.com/Amsterdam/design-system/issues/1150)) ([d5462e4](https://github.com/Amsterdam/design-system/commit/d5462e4537cfb39d62d0cd31564cfff086238330))
 
 ## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.0...design-system-tokens-v0.7.1) (2024-03-22)
 
-
 ### Features
 
 * Add Avatar component ([#1134](https://github.com/Amsterdam/design-system/issues/1134)) ([8dec2cf](https://github.com/Amsterdam/design-system/commit/8dec2cff8f7885ccb163774c0dc979fb2c781256))
 * Add Form Field Character Counter ([#1114](https://github.com/Amsterdam/design-system/issues/1114)) ([779ae8c](https://github.com/Amsterdam/design-system/commit/779ae8c9764b23508ffbfb38c6dc2f7a7c1cbd28))
 
-
 ### Bug Fixes
 
 * Use semantic Heading for the title of a Dialog ([#1123](https://github.com/Amsterdam/design-system/issues/1123)) ([0493fd8](https://github.com/Amsterdam/design-system/commit/0493fd87587d36a83bb7aa9cbb69b8debf5d66f0))
 
 ## [0.7.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.6.1...design-system-tokens-v0.7.0) (2024-03-12)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125))
@@ -122,7 +142,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.6.0...design-system-tokens-v0.6.1) (2024-03-11)
 
-
 ### Bug Fixes
 
 * Button fixes ([#1122](https://github.com/Amsterdam/design-system/issues/1122)) ([b5a9504](https://github.com/Amsterdam/design-system/commit/b5a950491f46710d92526ce6012f7d76992a569f))
@@ -130,7 +149,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.6.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.1...design-system-tokens-v0.6.0) (2024-03-08)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108))
@@ -156,21 +174,18 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108)) ([f87e834](https://github.com/Amsterdam/design-system/commit/f87e8345ec900ab08941d5d7ab40f8abd16a569a))
 * Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089)) ([b55f0a3](https://github.com/Amsterdam/design-system/commit/b55f0a3b64dcfb660a878ade75033a1dd835ac2d))
 
-
 ### Bug Fixes
 
 * Remove whitespace at the right end of dialog content ([#1091](https://github.com/Amsterdam/design-system/issues/1091)) ([23e1253](https://github.com/Amsterdam/design-system/commit/23e1253e38bba8ac85ebbd696af37742d1c1a02d))
 
 ## [0.5.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.0...design-system-tokens-v0.5.1) (2024-02-13)
 
-
 ### Features
 
 * Create unique token classes ([#1071](https://github.com/Amsterdam/design-system/issues/1071)) ([d53d0a9](https://github.com/Amsterdam/design-system/commit/d53d0a93f18238759d85bd897a7b6ee537cc78b0))
 
 ## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.4.0...design-system-tokens-v0.5.0) (2024-02-09)
 
-
 ### ⚠ BREAKING CHANGES
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json
index 4ebf40c6db..47ef064348 100644
--- a/proprietary/tokens/package.json
+++ b/proprietary/tokens/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.0",
+  "version": "0.12.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam/",

From 139d8cb5c8fc4ffc93a2283abeabda6b8364b7cc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 28 Oct 2024 09:35:31 +0100
Subject: [PATCH 3/4] =?UTF-8?q?fix!:=20Rename=20Description=20List=20?=
 =?UTF-8?q?=E2=80=98details=E2=80=99=20to=20=E2=80=99description=E2=80=99?=
 =?UTF-8?q?=20(#1703)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../description-list/description-list.scss    | 10 +++----
 .../src/DescriptionList/DescriptionList.tsx   |  4 +--
 ...sx => DescriptionListDescription.test.tsx} | 12 ++++-----
 .../DescriptionListDescription.tsx            | 20 ++++++++++++++
 .../DescriptionListDetails.tsx                | 20 --------------
 packages/react/src/DescriptionList/index.ts   |  2 +-
 .../ams/description-list.tokens.json          |  2 +-
 .../DescriptionList.stories.tsx               | 26 +++++++++----------
 8 files changed, 48 insertions(+), 48 deletions(-)
 rename packages/react/src/DescriptionList/{DescriptionListDetails.test.tsx => DescriptionListDescription.test.tsx} (62%)
 create mode 100644 packages/react/src/DescriptionList/DescriptionListDescription.tsx
 delete mode 100644 packages/react/src/DescriptionList/DescriptionListDetails.tsx

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 4c3c983fd0..40c1db033c 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -54,15 +54,15 @@
   }
 }
 
-@mixin reset-details {
+@mixin reset-description {
   margin-inline: 0;
 }
 
-.ams-description-list__details {
-  font-weight: var(--ams-description-list-details-font-weight);
-  padding-inline-start: var(--ams-description-list-details-padding-inline-start);
+.ams-description-list__description {
+  font-weight: var(--ams-description-list-description-font-weight);
+  padding-inline-start: var(--ams-description-list-description-padding-inline-start);
 
-  @include reset-details;
+  @include reset-description;
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index b65f45e22a..65b54b325d 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -6,7 +6,7 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { DescriptionListDetails } from './DescriptionListDetails'
+import { DescriptionListDescription } from './DescriptionListDescription'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
 export const descriptionListTermsWidths = ['sm', 'md', 'lg'] as const
@@ -43,5 +43,5 @@ DescriptionListRoot.displayName = 'DescriptionList'
 
 export const DescriptionList = Object.assign(DescriptionListRoot, {
   Term: DescriptionListTerm,
-  Details: DescriptionListDetails,
+  Description: DescriptionListDescription,
 })
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx b/packages/react/src/DescriptionList/DescriptionListDescription.test.tsx
similarity index 62%
rename from packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
rename to packages/react/src/DescriptionList/DescriptionListDescription.test.tsx
index 56129737e6..41b7dfa4ea 100644
--- a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionListDescription.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Description List Description', () => {
   it('renders', () => {
-    render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
@@ -14,25 +14,25 @@ describe('Description List Description', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
-    expect(component).toHaveClass('ams-description-list__details')
+    expect(component).toHaveClass('ams-description-list__description')
   })
 
   it('renders an additional class name', () => {
-    render(<DescriptionList.Details className="extra">Test</DescriptionList.Details>)
+    render(<DescriptionList.Description className="extra">Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
-    expect(component).toHaveClass('ams-description-list__details extra')
+    expect(component).toHaveClass('ams-description-list__description extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    render(<DescriptionList.Details ref={ref}>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description ref={ref}>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
diff --git a/packages/react/src/DescriptionList/DescriptionListDescription.tsx b/packages/react/src/DescriptionList/DescriptionListDescription.tsx
new file mode 100644
index 0000000000..798e1bae33
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListDescription.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+
+export const DescriptionListDescription = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListDescriptionProps, ref: ForwardedRef<HTMLElement>) => (
+    <dd {...restProps} ref={ref} className={clsx('ams-description-list__description', className)}>
+      {children}
+    </dd>
+  ),
+)
+
+DescriptionListDescription.displayName = 'DescriptionList.Description'
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.tsx
deleted file mode 100644
index 79a800891a..0000000000
--- a/packages/react/src/DescriptionList/DescriptionListDetails.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-import clsx from 'clsx'
-import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-
-export type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
-
-export const DescriptionListDetails = forwardRef(
-  ({ children, className, ...restProps }: DescriptionListDetailsProps, ref: ForwardedRef<HTMLElement>) => (
-    <dd {...restProps} ref={ref} className={clsx('ams-description-list__details', className)}>
-      {children}
-    </dd>
-  ),
-)
-
-DescriptionListDetails.displayName = 'DescriptionList.Details'
diff --git a/packages/react/src/DescriptionList/index.ts b/packages/react/src/DescriptionList/index.ts
index fa57776c93..b5895ee183 100644
--- a/packages/react/src/DescriptionList/index.ts
+++ b/packages/react/src/DescriptionList/index.ts
@@ -1,4 +1,4 @@
 export { DescriptionList } from './DescriptionList'
 export type { DescriptionListProps } from './DescriptionList'
 export type { DescriptionListTermProps } from './DescriptionListTerm'
-export type { DescriptionListDetailsProps } from './DescriptionListDetails'
+export type { DescriptionListDescriptionProps } from './DescriptionListDescription'
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
index 639290b568..1339b48d6b 100644
--- a/proprietary/tokens/src/components/ams/description-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -11,7 +11,7 @@
       "term": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
-      "details": {
+      "description": {
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "padding-inline-start": { "value": "{ams.space.lg}" }
       }
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index a61605e981..4719cc032f 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -15,15 +15,15 @@ const meta = {
   args: {
     children: [
       <DescriptionList.Term key={1}>Het hoger onderwijs</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>Het hbo en wo</DescriptionList.Details>,
+      <DescriptionList.Description key={2}>Het hbo en wo</DescriptionList.Description>,
       <DescriptionList.Term key={3}>Het mbo en hoger onderwijs</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>Het vervolgonderwijs</DescriptionList.Details>,
+      <DescriptionList.Description key={4}>Het vervolgonderwijs</DescriptionList.Description>,
       <DescriptionList.Term key={5}>Laagopgeleid</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>Praktisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Description key={6}>Praktisch opgeleid</DescriptionList.Description>,
       <DescriptionList.Term key={7}>Hoogopgeleid</DescriptionList.Term>,
-      <DescriptionList.Details key={8}>Theoretisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Description key={8}>Theoretisch opgeleid</DescriptionList.Description>,
       <DescriptionList.Term key={9}>Opleidingsniveau</DescriptionList.Term>,
-      <DescriptionList.Details key={10}>Onderwijsrichting</DescriptionList.Details>,
+      <DescriptionList.Description key={10}>Onderwijsrichting</DescriptionList.Description>,
     ],
     inverseColor: false,
   },
@@ -48,10 +48,10 @@ export const MultipleDescriptions: Story = {
   args: {
     children: [
       <DescriptionList.Term key={1}>Blinde, slechtziende</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>Persoon met een visuele beperking</DescriptionList.Details>,
-      <DescriptionList.Details key={3}>Persoon met een visuele handicap</DescriptionList.Details>,
-      <DescriptionList.Details key={4}>Persoon die blind is</DescriptionList.Details>,
-      <DescriptionList.Details key={5}>Persoon die slechtziend is</DescriptionList.Details>,
+      <DescriptionList.Description key={2}>Persoon met een visuele beperking</DescriptionList.Description>,
+      <DescriptionList.Description key={3}>Persoon met een visuele handicap</DescriptionList.Description>,
+      <DescriptionList.Description key={4}>Persoon die blind is</DescriptionList.Description>,
+      <DescriptionList.Description key={5}>Persoon die slechtziend is</DescriptionList.Description>,
     ],
   },
 }
@@ -60,7 +60,7 @@ export const RichDescription: Story = {
   render: (args) => (
     <DescriptionList {...args}>
       <DescriptionList.Term key={1}>Amsterdam Light Festival</DescriptionList.Term>
-      <DescriptionList.Details key={2}>
+      <DescriptionList.Description key={2}>
         <Paragraph className="ams-mb--sm" inverseColor={args.inverseColor}>
           Een jaarlijks evenement waarbij kunstenaars van over de hele wereld hun{' '}
           <strong>creatieve lichtinstallaties</strong> tonen. De kunstwerken zijn verspreid over de stad en zijn zowel
@@ -77,7 +77,7 @@ export const RichDescription: Story = {
             .
           </UnorderedList.Item>
         </UnorderedList>
-      </DescriptionList.Details>
+      </DescriptionList.Description>
     </DescriptionList>
   ),
 }
@@ -87,9 +87,9 @@ export const MultipleTerms: Story = {
     children: [
       <DescriptionList.Term key={1}>mbo-leerling</DescriptionList.Term>,
       <DescriptionList.Term key={2}>mbo-scholier</DescriptionList.Term>,
-      <DescriptionList.Details key={3} style={{ gridRow: '1 / 2' }}>
+      <DescriptionList.Description key={3} style={{ gridRow: '1 / 2' }}>
         mbo-student
-      </DescriptionList.Details>,
+      </DescriptionList.Description>,
     ],
   },
 }

From 4b58cf14581fa73435205e160d07a824c82887e8 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 28 Oct 2024 09:47:25 +0100
Subject: [PATCH 4/4] chore: Remove buggy example of multiple terms for a
 Description List (#1704)

Co-authored-by: alimpens <a.limpens@amsterdam.nl>
---
 .../DescriptionList/DescriptionList.docs.mdx         |  6 ------
 .../DescriptionList/DescriptionList.stories.tsx      | 12 ------------
 2 files changed, 18 deletions(-)

diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index 36cc5b7f40..88728215f8 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -26,12 +26,6 @@ A description can include rich content such as inline formatting, links, paragra
 
 <Canvas of={DescriptionListStories.RichDescription} />
 
-### Multiple terms
-
-Multiple terms may share one description.
-
-<Canvas of={DescriptionListStories.MultipleTerms} />
-
 ### Inverse colour
 
 Set the `inverseColor` prop if the Description List sits on a dark background.
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 4719cc032f..0c7a9eb7f1 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -82,18 +82,6 @@ export const RichDescription: Story = {
   ),
 }
 
-export const MultipleTerms: Story = {
-  args: {
-    children: [
-      <DescriptionList.Term key={1}>mbo-leerling</DescriptionList.Term>,
-      <DescriptionList.Term key={2}>mbo-scholier</DescriptionList.Term>,
-      <DescriptionList.Description key={3} style={{ gridRow: '1 / 2' }}>
-        mbo-student
-      </DescriptionList.Description>,
-    ],
-  },
-}
-
 export const InverseColour: Story = {
   args: {
     inverseColor: true,