refactor(tokens): rework form-control width scale to fit actual component needs

Jeffrey Lauwers · claude · Jeffrey Lauwers · commit 943cc98aecbb · 2026-02-19T12:09:10.000+01:00
xs (8ch) → unchanged — postcode, year, CVV
sm (16ch → 12ch) — time input (HH:MM), short codes
md (32ch → 20ch) — date input (dd/mm/yyyy), phone number
lg (48ch → 32ch) — standard default — name, email
xl (64ch → 48ch) — longer inputs — URL

DateInput wrapper updated from sm to md (20ch).
TextInput docs and Width story updated to reflect new scale.
TimeInput and DateInput docs updated with correct ch values.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/components-react/src/DateInput/DateInput.css b/packages/components-react/src/DateInput/DateInput.css
@@ -6,12 +6,12 @@
  * Button hover/focus/color states come from the Button component itself.
  */
 
-/* Wrapper — fixed sm width, positions calendar button absolutely inside the input */
+/* Wrapper — fixed md width (20ch), positions calendar button absolutely inside the input */
 .dsn-date-input-wrapper {
   position: relative;
   display: block;
   inline-size: 100%;
-  max-inline-size: var(--dsn-form-control-width-sm);
+  max-inline-size: var(--dsn-form-control-width-md);
 }
 
 /* Calendar button — centered vertically, positioned at inline-end */
diff --git a/packages/design-tokens/src/tokens/themes/start/base.json b/packages/design-tokens/src/tokens/themes/start/base.json
@@ -442,27 +442,27 @@
         "xs": {
           "value": "8ch",
           "type": "dimension",
-          "comment": "Extra small width - for short inputs (e.g., postal code, 6 characters)"
+          "comment": "Extra small width - for very short inputs (e.g., postal code, year, CVV)"
         },
         "sm": {
-          "value": "16ch",
+          "value": "12ch",
           "type": "dimension",
-          "comment": "Small width - for medium inputs (e.g., phone number, 10-12 digits)"
+          "comment": "Small width - for short inputs (e.g., time HH:MM, short codes)"
         },
         "md": {
-          "value": "32ch",
+          "value": "20ch",
           "type": "dimension",
-          "comment": "Medium width (default) - for standard inputs (e.g., email, name)"
+          "comment": "Medium width - for medium inputs (e.g., date dd/mm/yyyy, phone number)"
         },
         "lg": {
-          "value": "48ch",
+          "value": "32ch",
           "type": "dimension",
-          "comment": "Large width - for longer inputs (e.g., URL)"
+          "comment": "Large width (default) - for standard inputs (e.g., name, email)"
         },
         "xl": {
-          "value": "64ch",
+          "value": "48ch",
           "type": "dimension",
-          "comment": "Extra large width - for very long text fields"
+          "comment": "Extra large width - for longer inputs (e.g., URL)"
         },
         "full": {
           "value": "100%",
diff --git a/packages/storybook/src/DateInput.docs.md b/packages/storybook/src/DateInput.docs.md
@@ -4,7 +4,7 @@ Een invoerveld voor datums met een interactieve kalenderknop aan de rechterkant.
 
 ## Doel
 
-De DateInput component is een gespecialiseerd invoerveld voor het invoeren van een datum. Een interactieve kalenderknop staat rechts in het veld (`inline-end`) en opent de native datumkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `sm`-breedte (16ch) — datumvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
+De DateInput component is een gespecialiseerd invoerveld voor het invoeren van een datum. Een interactieve kalenderknop staat rechts in het veld (`inline-end`) en opent de native datumkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `md`-breedte (20ch) — datumvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
 
 <!-- VOORBEELD -->
 
diff --git a/packages/storybook/src/TextInput.docs.md b/packages/storybook/src/TextInput.docs.md
@@ -23,11 +23,11 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 ## Best practices
 
 - **Kies de juiste width.** Gebruik `width` om de breedte aan te passen aan het type data:
-  - `xs` (8ch) - Korte codes (postcode, CVV)
-  - `sm` (16ch) - Medium tekst (telefoonnummer, 10-12 cijfers)
-  - `md` (32ch) - Standaard (naam, email) - **DEFAULT**
-  - `lg` (48ch) - Langere tekst (URL)
-  - `xl` (64ch) - Zeer lange tekst
+  - `xs` (8ch) - Zeer korte codes (postcode, jaar, CVV)
+  - `sm` (12ch) - Korte invoer (tijdstip, korte codes)
+  - `md` (20ch) - Medium invoer (datum, telefoonnummer)
+  - `lg` (32ch) - Standaard (naam, email) - **DEFAULT**
+  - `xl` (48ch) - Langere tekst (URL)
   - `full` (100%) - Responsive, neemt volledige breedte
 - **Gebruik het juiste type.** Gebruik native input types: `email`, `url`, `tel`, `search`, etc.
 - **Duidelijke placeholders.** Gebruik placeholders voor voorbeelden, geen instructies.
@@ -37,14 +37,14 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 
 ## Width varianten
 
-| Variant | Width | Gebruik                                          |
-| ------- | ----- | ------------------------------------------------ |
-| `xs`    | 8ch   | Zeer korte codes (postcode "1234 AB", CVV "123") |
-| `sm`    | 16ch  | Medium tekst (telefoonnummer "06-12345678")      |
-| `md`    | 32ch  | **Standaard** - naam, email, etc.                |
-| `lg`    | 48ch  | Langere tekst (URL "https://example.com")        |
-| `xl`    | 64ch  | Zeer lange tekst                                 |
-| `full`  | 100%  | Responsive, past zich aan container              |
+| Variant | Width | Gebruik                                            |
+| ------- | ----- | -------------------------------------------------- |
+| `xs`    | 8ch   | Zeer korte codes (postcode "1234 AB", CVV "123")   |
+| `sm`    | 12ch  | Korte invoer (tijdstip "14:30", korte codes)       |
+| `md`    | 20ch  | Medium invoer (datum "15-03-2025", telefoonnummer) |
+| `lg`    | 32ch  | **Standaard** - naam, email, etc.                  |
+| `xl`    | 48ch  | Langere tekst (URL "https://example.com")          |
+| `full`  | 100%  | Responsive, past zich aan container                |
 
 ## Design tokens
 
@@ -79,10 +79,10 @@ De TextInput component is een gestandaardiseerd invoerveld voor single-line teks
 | `--dsn-text-input-invalid-background-color`   | Invalid background color                |
 | `--dsn-text-input-invalid-border-color`       | Invalid border color                    |
 | `--dsn-form-control-width-xs`                 | Extra small width (8ch)                 |
-| `--dsn-form-control-width-sm`                 | Small width (16ch)                      |
-| `--dsn-form-control-width-md`                 | Medium width (32ch)                     |
-| `--dsn-form-control-width-lg`                 | Large width (48ch)                      |
-| `--dsn-form-control-width-xl`                 | Extra large width (64ch)                |
+| `--dsn-form-control-width-sm`                 | Small width (12ch)                      |
+| `--dsn-form-control-width-md`                 | Medium width (20ch)                     |
+| `--dsn-form-control-width-lg`                 | Large width (32ch)                      |
+| `--dsn-form-control-width-xl`                 | Extra large width (48ch)                |
 | `--dsn-form-control-width-full`               | Full width (100%)                       |
 
 ## Accessibility
diff --git a/packages/storybook/src/TextInput.stories.tsx b/packages/storybook/src/TextInput.stories.tsx
@@ -77,12 +77,12 @@ export const Widths: Story = {
   name: 'Width variants',
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <TextInput width="xs" placeholder="Extra small (xs)" />
-      <TextInput width="sm" placeholder="Small (sm)" />
-      <TextInput width="md" placeholder="Medium (md)" />
-      <TextInput width="lg" placeholder="Large (lg)" />
-      <TextInput width="xl" placeholder="Extra large (xl)" />
-      <TextInput width="full" placeholder="Full width" />
+      <TextInput width="xs" placeholder="xs — 8ch (postcode, CVV)" />
+      <TextInput width="sm" placeholder="sm — 12ch (tijdstip, korte codes)" />
+      <TextInput width="md" placeholder="md — 20ch (datum, telefoonnummer)" />
+      <TextInput width="lg" placeholder="lg — 32ch (naam, email)" />
+      <TextInput width="xl" placeholder="xl — 48ch (URL)" />
+      <TextInput width="full" placeholder="full — 100% (responsive)" />
     </div>
   ),
 };
diff --git a/packages/storybook/src/TimeInput.docs.md b/packages/storybook/src/TimeInput.docs.md
@@ -4,7 +4,7 @@ Een invoerveld voor tijden met een interactieve klokknop aan de rechterkant.
 
 ## Doel
 
-De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van een tijdstip. Een interactieve klokknop staat rechts in het veld (`inline-end`) en opent de native tijdkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `sm`-breedte (16ch) — tijdvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
+De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van een tijdstip. Een interactieve klokknop staat rechts in het veld (`inline-end`) en opent de native tijdkiezer van de browser of het mobiele apparaat bij klikken. De `padding-inline-end` van het invoerveld wordt automatisch vergroot zodat tekst nooit achter de knop terechtkomt. Het veld heeft een vaste `sm`-breedte (12ch) — tijdvelden hebben een voorspelbare inhoudsbreedte waarvoor dit altijd voldoende is.
 
 <!-- VOORBEELD -->
 
