feat(Stack): voeg 5xl en 6xl space-varianten toe

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Jeffrey Lauwers

packages/components-html/src/stack/stack.css

@@ -44,3 +44,9 @@
 .dsn-stack--space-4xl {
   --dsn-stack-space: var(--dsn-space-row-4xl);
 }
+.dsn-stack--space-5xl {
+  --dsn-stack-space: var(--dsn-space-row-5xl);
+}
+.dsn-stack--space-6xl {
+  --dsn-stack-space: var(--dsn-space-row-6xl);
+}

packages/components-react/src/Stack/Stack.test.tsx

@@ -35,7 +35,7 @@ describe('Stack', () => {
     expect(container.firstChild).not.toHaveClass('dsn-stack--space-md');
   });
 
-  it.each(['sm', 'lg', 'xl', '2xl', '3xl', '4xl'] as const)(
+  it.each(['sm', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'] as const)(
     'applies space modifier class for %s',
     (space) => {
       const { container } = render(<Stack space={space} />);

packages/components-react/src/Stack/Stack.tsx

@@ -2,7 +2,16 @@ import React from 'react';
 import { classNames } from '@dsn/core';
 import './Stack.css';
 
-export type StackSpace = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type StackSpace =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl';
 
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

packages/storybook/src/Stack.docs.md

@@ -6,7 +6,7 @@ Layout primitief dat consistente verticale ruimte aanbrengt tussen gestapelde el
 
 Stack past automatisch verticale ruimte toe tussen alle directe child-elementen via `display: flex; flex-direction: column; gap`. Je schrijft nooit zelf `margin` of `padding` voor tussenruimte — de Stack regelt dat.
 
-Zeven space-varianten — gebaseerd op de globale `--dsn-space-row-*` tokens — geven je controle over hoe ver de elementen uit elkaar staan.
+Negen space-varianten — gebaseerd op de globale `--dsn-space-row-*` tokens — geven je controle over hoe ver de elementen uit elkaar staan.
 
 <!-- VOORBEELD -->
 
@@ -24,7 +24,7 @@ Zeven space-varianten — gebaseerd op de globale `--dsn-space-row-*` tokens —
 
 ## Best practices
 
-- **Kies de kleinst passende variant**: voor formuliervelden `sm`–`md`, voor secties op een pagina `3xl`–`4xl`.
+- **Kies de kleinst passende variant**: voor formuliervelden `sm`–`md`, voor secties op een pagina `3xl`–`4xl`, voor grote paginaovergangen `5xl`–`6xl`.
 - **Nest Stack-componenten** voor complexe layouts: een buitenste Stack met `4xl` voor paginasecties, binnenste Stacks met `md` voor formuliervelden.
 - **Gebruik Stack niet als vervanging voor semantische HTML**: de Stack rendert altijd als `<div>`. Geef children de juiste semantische elementen mee.
 
@@ -44,3 +44,5 @@ Stack is een puur visueel layout-hulpmiddel. Het voegt geen ARIA-rollen, labels
 | `--dsn-space-row-2xl` | 20px — gebruikt door `.dsn-stack--space-2xl`                                    |
 | `--dsn-space-row-3xl` | 24px — gebruikt door `.dsn-stack--space-3xl`                                    |
 | `--dsn-space-row-4xl` | 32px — gebruikt door `.dsn-stack--space-4xl`                                    |
+| `--dsn-space-row-5xl` | 64px — gebruikt door `.dsn-stack--space-5xl`                                    |
+| `--dsn-space-row-6xl` | 160px — gebruikt door `.dsn-stack--space-6xl`                                   |

packages/storybook/src/Stack.stories.tsx

@@ -37,7 +37,7 @@ const meta: Meta<typeof Stack> = {
   argTypes: {
     space: {
       control: 'select',
-      options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+      options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     },
     children: { control: false },
   },
@@ -59,7 +59,17 @@ export const Default: Story = {
   ),
 };
 
-const SPACE_VARIANTS = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const;
+const SPACE_VARIANTS = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+] as const;
 
 const SPACE_LABELS: Record<string, string> = {
   sm: 'sm — 4px',
@@ -69,6 +79,8 @@ const SPACE_LABELS: Record<string, string> = {
   '2xl': '2xl — 20px',
   '3xl': '3xl — 24px',
   '4xl': '4xl — 32px',
+  '5xl': '5xl — 64px',
+  '6xl': '6xl — 160px',
 };
 
 export const AllSpaces: Story = {